How to use the @commercetools-uikit/design-system.customProperties.colorAccent function in @commercetools-uikit/design-system

case 'scale':
    default:
      return vars.constraintScale;
  }
};

export const Body = styled.div`
  font-family: inherit;
  border-radius: ${vars.borderRadius6};
  padding: ${vars.spacingXs} ${vars.spacingS};
  border: 'none';
  box-shadow: ${vars.shadow15};
  font-size: 0.857rem;
  opacity: 0.95;
  color: ${vars.colorSurface};
  background-color: ${vars.colorAccent};
`;
// here we use object styles so we can spread these
// with the styles we get from react-popper :D
// eslint-disable-next-line import/prefer-default-export
export const getBodyStyles = ({ constraint, placement, customStyles }) => ({
  fontFamily: 'inherit',
  margin: `${getOffsetMargin({ placement })} !important`,
  maxWidth: getMaxWidth({ constraint }),
  // so hovering over the tooltip when the tooltip overlaps the component
  pointerEvents: 'none',
  zIndex: 1,
  ...customStyles,
});

export const SingleValue = props => (
  <div>
    
    <span>
      {props.children}
    </span>
    </div>

{({ css: makeClassName, cx }) => (
            <div style="{{">
              {this.headerRenderer(columnDefinition)}
            </div>
          )}

export const ProjectSwitcherOption = props => (
  
    <div>
      <div>
        {props.data.name}
        {props.isDisabled &amp;&amp; (
          <span>
            
          </span>
        )}
      </div>
      </div>

const ButlerCommand = ({ command, onMouseEnter, onClick, isSelected }) => (
  <div data-testid="{`quick-access-result(${command.id})`}">
    <div>
      {command.text}</div></div>

width: ${size};
            height: ${size};
          `}
          viewBox="0 0 40 40"
        >

display: contents;
`;

const Row = styled.tr`
  display: contents;

  &:hover td {
    background: ${vars.backgroundColorForInputWhenHovered};
  }
`;

const HeaderCell = styled.th`
  ${getCellStyles};
  ${getCellAlignment}
  color: ${vars.colorSurface};
  background-color: ${vars.colorAccent};
  font-weight: normal;
`;

const DataCell = styled.td`
  ${getCellStyles}
  ${getCellAlignment}
`;

export { TableGrid, Header, Body, Row, HeaderCell, DataCell };