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

height: ${props =>
      props.size === 'small' ? thumbSmallSize : thumbBigSize};
    width: ${props => (props.size === 'small' ? thumbSmallSize : thumbBigSize)};
    background-color: ${vars.colorSurface};
    box-shadow: ${vars.shadow7};
    border-radius: 50%;
    z-index: 1;
    transition: transform 0.2s ease, background 0.2s ease;
  }
`;

const Input = styled.input`
  /* when checked */
  &:checked {
    + ${Span}::before {
      background: ${vars.colorPrimary};
    }
    & + ${Span}::after {
      transform: ${props =>
        props.size === 'small'
          ? 'translate(117%, -50%)'
          : 'translate(127%, -50%)'};
    }
  }

  /* when disabled */
  &:disabled {
    & + ${Span}::before {
      background: ${vars.colorNeutral};
      box-shadow: none;
    }
    & + ${Span}::after {

} from '@commercetools-uikit/icons';
import { customProperties } from '@commercetools-uikit/design-system';
import Spacings from '@commercetools-uikit/spacings';
import { TabularModalPage } from '@commercetools-frontend/application-components';
import { Suite, Spec } from '../../test-utils';

export const routePath = '/tabular-modal-page';

const TabControlsContainer = styled.div`
  min-height: 30px;
  display: flex;
  > * {
    min-width: 50px;
    cursor: pointer;
    &:first-of-type {
      border-bottom: 3px solid ${customProperties.colorPrimary};
      & > * {
        color: ${customProperties.colorPrimary};
      }
    }
  }
  > * + * {
    margin-left: 16px;
  }
`;

type ContainerProps = {
  portalId: string;
} & Partial[0]>;

const ModalPageWithPortalParentSelector = ({
  portalId,

const getColorByType = (value: TAppNotificationKind) => {
  switch (value) {
    case NOTIFICATION_KINDS_SIDE.success:
      return customProperties.colorPrimary;
    case NOTIFICATION_KINDS_SIDE.info:
      return customProperties.colorInfo;
    case NOTIFICATION_KINDS_SIDE.error:
      return customProperties.colorError;
    case NOTIFICATION_KINDS_SIDE.warning:
      return customProperties.colorWarning;
    default:
      return 'transparent';
  }
};

const getThemeStyles = theme => {
  if (!theme) return css``;

  if (theme === 'default') return css``;

  switch (theme) {
    case 'primary':
      return css`
        &:hover {
          background-color: ${vars.colorPrimary};
          border-color: ${vars.colorPrimary};
          color: ${vars.colorSurface};
        }
      `;
    case 'info':
      return css`
        &:hover {
          background-color: ${vars.colorInfo};
          border-color: ${vars.colorInfo};
          color: ${vars.colorSurface};
        }
      `;
    default: {
      invariant(
        false,
        `ui-kit/IconButton: the specified theme '${theme}' is not supported.`

    color: ${props => (props.disabled ? vars.colorNeutral : vars.colorPrimary)};
  }

padding: ${vars.spacingS} 0;
      cursor: default;
      color: ${vars.colorNeutral60};
    `);
  }
  if (props.isHighlighted) {
    styles.push(
      css`
        background-color: ${vars.colorNeutral90};
      `
    );
  }
  if (props.isSelected) {
    styles.push(
      css`
        background-color: ${vars.colorPrimary};
        color: ${vars.colorSurface};
      `
    );
  }
  if (props.isRangeStart || props.isRangeEnd) {
    styles.push(
      css`
        background-color: ${vars.colorPrimary40};
        color: ${vars.colorSurface};
      `
    );
  }
  if (props.isRangeBetween) {
    styles.push(
      css`
        background-color: ${vars.colorNeutral90};

box-shadow: ${vars.shadow7};
      &:hover,
      &:focus {
        box-shadow: ${vars.shadow8};
      }
      &:active {
        box-shadow: ${vars.shadow9};
      }
    `,
  ];
  switch (tone) {
    case 'primary':
      return [
        baseDefaultStyles,
        css`
          background-color: ${vars.colorPrimary};
          &:hover {
            background-color: ${vars.colorPrimary25};
          }
          &:active {
            background-color: ${vars.colorPrimary};
          }
        `,
      ];
    case 'urgent':
      return [
        baseDefaultStyles,
        css`
          background-color: ${vars.colorWarning};
          &:hover {
            background-color: ${vars.colorPrimary25};
          }

const getIconContainerBackgroundColour = props => {
  switch (props.type) {
    case 'error':
      return vars.colorError;
    case 'info':
      return vars.colorInfo;
    case 'warning':
      return vars.colorWarning;
    case 'success':
      return vars.colorPrimary;
    default:
      return '';
  }
};

import TextInput from '@commercetools-uikit/text-input';
import { customProperties } from '@commercetools-uikit/design-system';
import LayoutApp from '../layouts/layout-app';
import PlaygroundController from '../components/playground-controller';
import ModalController from '../components/modal-controller';

const containerId = 'tabular-modal-page';

const TabControlsContainer = styled.div`
  min-height: 30px;
  display: flex;
  > * {
    min-width: 50px;
    cursor: pointer;
    &:first-of-type {
      border-bottom: 3px solid ${customProperties.colorPrimary};
      & > * {
        color: ${customProperties.colorPrimary};
      }
    }
  }
  > * + * {
    margin-left: 16px;
  }
`;

const exampleCustomTitleRow = (
  
    
      <label>
        
          Input 1</label>

}
    `,
];

const DropdownContainer = styled.div`
  position: absolute;
  cursor: pointer;
  font-size: ${vars.fontSizeForInput};
  top: ${vars.spacingXs};
  margin-top: ${vars.spacingXs};
  left: 0;
  white-space: nowrap;
  background: ${vars.colorSurface};
  overflow: hidden;
  z-index: 9999;
  border: 1px solid ${vars.colorPrimary};
  border-radius: ${vars.borderRadius6};
`;

export { DropdownContainer, DropdownItem, getButtonStyles };