@commercetools-frontend/ui-kit/materials/internals/definition.yaml

A preset of all the UI-Kit components.

# This file contains our design tokens.
#
# The tokens are formed by first establishing the choices we offer for our
# design system. Those are things like which colors are we using,
# which border radius, spacing, shadows and so on.
#
# The file also lists the states and component groups for which we apply design
# tokens. The explicit list of states aims to prevent diversion, e.g. by using
# both "-hover" and "-hovered".
#
# Next are the decisions. Decisions take a choice and apply it to a certain
# component group and state. For example, we can make the decision to use
# the choice "color-primary" for the attribute border-color for the component
# group "input" in the state "active". Note that for decisions, the component
# group and state are optional.
#
# A more in-depth explanation can be found in the README of the token story in
# Storybook at uikit.commercetools.com.
#
#
# Run "node scripts/generate-design-tokens" to generate `materials/design-tokens`
# files in different format (css, json, js, ...).
#
# The names of decisions in this file need to follow this format:
#   <attribute>-for-<component-group>
#   <attribute>-for-<component-group>-as-<variant>
#   <attribute>-for-<component-group>-when-<state>-
#   <attribute>-for-<component-group>-as-<variant>-when-<state>
#   <attribute>-for-<component-group>-as-<variant>-as-<variant>-
#   <attribute>-for-<component-group>-as-<variant>-as-<variant>-when-<state>-

choiceGroupsByTheme:
  default:
    colors:
      label: Colors
      prefix: color
      description: All colors in the system
      choices:
        color-primary: 'hsl(240, 64%, 58%)'
        color-primary-10: 'hsl(240, 66%, 19%)'
        color-primary-20: 'hsl(240, 45%, 33%)'
        color-primary-25: 'hsl(240, 46%, 48%)'
        color-primary-30: 'hsl(240, 46%, 53%)'
        color-primary-40: 'hsl(240, 100%, 67%)'
        color-primary-85: 'hsl(244, 100%, 84%)'
        color-primary-90: 'hsl(243, 100%, 93%)'
        color-primary-95: 'hsl(244, 100%, 97%)'
        color-primary-98: 'hsl(244, 100%, 99%)'
        color-accent: '#213c45'
        color-accent-10: 'hsl(195, 100%, 10%)'
        color-accent-20: 'hsl(195, 80%, 20%)'
        color-accent-30: 'hsl(195, 70%, 30%)'
        color-accent-40: 'hsl(195, 70%, 40%)'
        color-accent-50: 'hsl(195, 70%, 50%)'
        color-accent-60: 'hsl(195, 70%, 60%)'
        color-accent-85: 'hsl(195, 85%, 85%)'
        color-accent-90: 'hsl(195, 90%, 90%)'
        color-accent-95: 'hsl(195, 95%, 95%)'
        color-accent-98: 'hsl(195, 100%, 98%)'
        color-brown-10: 'hsl(41, 100%, 10%)'
        color-brown-20: 'hsl(41, 100%, 20%)'
        color-brown-35: 'hsl(41, 96%, 30%)'
        color-brown-50: 'hsl(41, 95%, 44%)'
        color-brown-70: 'hsl(47, 95%, 70%)'
        color-brown-85: 'hsl(47, 100%, 85%)'
        color-brown-90: 'hsl(47, 100%, 90%)'
        color-brown-95: 'hsl(47, 100%, 95%)'
        color-brown-98: 'hsl(48, 100%, 97%)'
        color-purple-10: 'hsl(248, 88%, 10%)'
        color-purple-20: 'hsl(248, 50%, 20%)'
        color-purple-35: 'hsl(248, 25%, 35%)'
        color-purple-50: 'hsl(248, 64%, 58%)'
        color-purple-70: 'hsl(248, 80%, 70%)'
        color-purple-85: 'hsl(249, 100%, 85%)'
        color-purple-90: 'hsl(248, 100%, 90%)'
        color-purple-95: 'hsl(248, 100%, 95%)'
        color-purple-98: 'hsl(246, 100%, 98%)'
        color-turquoise-10: 'hsl(180, 88%, 10%)'
        color-turquoise-20: 'hsl(180, 90%, 20%)'
        color-turquoise-35: 'hsl(178, 88%, 25%)'
        color-turquoise-50: 'hsl(178, 67%, 50%)'
        color-turquoise-70: 'hsl(180, 75%, 70%)'
        color-turquoise-85: 'hsl(180, 90%, 85%)'
        color-turquoise-90: 'hsl(180, 88%, 90%)'
        color-turquoise-95: 'hsl(180, 88%, 95%)'
        color-turquoise-98: 'hsl(180, 100%, 98%)'
        color-neutral: 'hsl(232, 18%, 80%)'
        color-neutral-05: 'hsl(0deg 0% 80% / 5%)'
        color-neutral-10: 'hsl(0deg 0% 80% / 10%)'
        color-neutral-40: 'hsl(232, 18%, 40%)'
        color-neutral-50: 'hsl(233, 18%, 50%)'
        color-neutral-60: 'hsl(232, 18%, 60%)'
        color-neutral-85: 'hsl(232, 18%, 85%)'
        color-neutral-90: 'hsl(232, 18%, 90%)'
        color-neutral-95: 'hsl(232, 18%, 95%)'
        color-neutral-98: 'hsl(232, 18%, 98%)'
        color-info: '#078cdf'
        color-info-40: 'hsl(203, 94%, 35%)'
        color-info-50: 'hsl(203.05555555555554, 93.9130434783%, 50%)'
        color-info-60: 'hsl(203.05555555555554, 93.9130434783%, 60%)'
        color-info-85: 'hsl(203.05555555555554, 93.9130434783%, 85%)'
        color-info-90: '#CEEBFD'
        color-info-95: 'hsl(203.05555555555554, 93.9130434783%, 95%)'
        color-warning: 'hsl(35, 90%, 45%)'
        color-warning-25: 'hsl(33, 83%, 25%)'
        color-warning-40: 'hsl(33, 80%, 34%)'
        color-warning-60: 'hsl(35, 90%, 55%)'
        color-warning-85: 'hsl(33, 90%, 80%)'
        color-warning-95: 'hsl(45, 100%, 92%)'
        color-error: 'hsl(3, 65%, 58%)'
        color-error-25: 'hsl(4, 69%, 37%)'
        color-error-40: 'hsl(3, 60%, 46%)'
        color-error-85: 'hsl(1, 55%, 74%)'
        color-error-95: 'hsl(349, 66%, 92%)'
        color-solid: '#1a1a1a'
        color-solid-02: 'hsl(0deg 0% 10% / 2%)'
        color-solid-05: 'hsl(0deg 0% 10% / 5%)'
        color-solid-10: 'hsl(0deg 0% 10% / 10%)'
        color-surface: '#fff'
        color-transparent: 'transparent'
        color-success: 'hsl(152, 77%, 39%)'
        color-success-25: 'hsl(155, 84%, 20%)'
        color-success-40: 'hsl(155, 90%, 24%)'
        color-success-85: 'hsl(144, 69%, 80%)'
        color-success-95: 'hsl(141, 76%, 92%)'

    borderRadiuses:
      label: Border Radiuses
      prefix: border-radius
      choices:
        border-radius-1: 1px
        border-radius-2: 2px
        border-radius-4: 4px
        border-radius-6: 6px
        border-radius-8: 8px
        border-radius-20: 20px

    borderWidths:
      label: Border Widths
      prefix: border-width
      choices:
        border-width-1: 1px
        border-width-2: 2px

    fontFamilies:
      label: Font families
      prefix: font-family
      choices:
        font-family: "'Inter', system-ui"
    fontSizes:
      label: Font sizes
      prefix: font-size
      choices:
        font-size-10: '0.75rem'
        font-size-12: '0.8rem'
        font-size-20: '0.875rem'
        font-size-30: '1rem'
        font-size-40: '1.125rem'
        font-size-50: '1.25rem'
        font-size-60: '1.5rem'
        font-size-70: '2rem'
        font-size-80: '2.5rem'
        font-size-90: '3rem'
        # These font sizes are in rems based on a root font-size of 13px and they will be removed when we replace the default theme.
        font-size-15: '0.9231rem'
        font-size-35: '1.0769rem'
        font-size-45: '1.2308rem'
        font-size-63: '1.5385rem'
        font-size-66: '1.8462rem'
        font-size-69: '2.4615rem'
        font-size-78: '3rem'

    fontWeights:
      label: Font weights
      prefix: font-weight
      choices:
        font-weight-300: '300'
        font-weight-400: '400'
        font-weight-500: '500'
        font-weight-600: '600'
        font-weight-700: '700'

    lineHeights:
      label: Line heights
      prefix: line-height
      choices:
        line-height-05: '1.125rem'
        line-height-10: '1.25rem'
        line-height-18: '1.3rem'
        line-height-20: '1.375rem'
        line-height-30: '1.5rem'
        line-height-40: '1.625rem'
        line-height-50: '1.75rem'
        line-height-60: '2.125rem'

    shadows:
      label: Shadows
      prefix: shadow
      choices:
        shadow-0: 'none'
        shadow-1: '0 1px 3px rgba(0, 0, 0, 0.12), 0 1px 2px rgba(0, 0, 0, 0.24)'
        shadow-2: '0 3px 6px rgba(0, 0, 0, 0.16), 0 3px 6px rgba(0, 0, 0, 0.23)'
        shadow-3: '0 10px 20px rgba(0, 0, 0, 0.19), 0 6px 6px rgba(0, 0, 0, 0.23)'
        shadow-4: '0 14px 28px rgba(0, 0, 0, 0.25), 0 10px 10px rgba(0, 0, 0, 0.22)'
        shadow-5: '0 19px 38px rgba(0, 0, 0, 0.3), 0 15px 12px rgba(0, 0, 0, 0.22)'
        shadow-6: '0 -1px 2px 0 rgba(0, 0, 0, 0.2)'
        shadow-7: '0 -1px 1.5px 0 rgba(0, 0, 0, 0.12), 0 1px 1px 0 rgba(0, 0, 0, 0.24)'
        shadow-8: '0 1px 9.5px 0 rgba(0, 0, 0, 0.12), 0 2px 4px 0 rgba(0, 0, 0, 0.24)'
        shadow-9: 'inset 0 -1px 3px 0 rgba(0, 0, 0, 0.1), inset 0 1px 1.5px 0 rgba(0, 0, 0, 0.2), inset 0 1px 1.5px 0 rgba(0, 0, 0, 0.25)'
        shadow-10: '0 0 0 1px rgba(224, 230, 237, 0.5)'
        shadow-11: '0 1px 0.5px rgba(0, 0, 0, 0.24), 0 -1px 0.75px rgba(0, 0, 0, 0.12)'
        shadow-12: '0 0 1px rgba(0, 0, 0, 0.25)'
        shadow-13: '0 0 1px rgba(0, 0, 0, 0.25)'
        shadow-14: '0 0 0.5px rgba(0, 0, 0, 0.1)'
        shadow-15: '0 2px 2px rgba(0, 0, 0, 0.24), 0 1px 4.75px rgba(0, 0, 0, 0.12)'
        shadow-16: '0.5px 1.5px 4px 1px rgba(0, 0, 0, 0.25), -0.5px -0.5px 4px 1px rgba(0, 0, 0, 0.25)'
        shadow-17: '0 1px 5px 0 rgba(0, 0, 0, 0.05)'
        shadow-18: '0 5px 30px 0px rgba(0, 0, 0, 0.1)'
    constraints:
      label: Constraints
      prefix: constraint
      choices:
        constraint-scale: 100%
        constraint-1: 42px
        constraint-2: 84px
        constraint-3: 142px
        constraint-4: 184px
        constraint-5: 242px
        constraint-6: 284px
        constraint-7: 342px
        constraint-8: 384px
        constraint-9: 442px
        constraint-10: 484px
        constraint-11: 542px
        constraint-12: 584px
        constraint-13: 642px
        constraint-14: 684px
        constraint-15: 742px
        constraint-16: 784px
    spacings:
      label: Spacings
      prefix: spacing
      choices:
        # Legacy deprecated tokens
        # TODO: Remove these tokens after no consumers are using them
        spacing-xs: 4px
        spacing-s: 8px
        spacing-m: 16px
        spacing-l: 24px
        spacing-xl: 32px
        # New tokens
        spacing-05: 2px
        spacing-10: 4px
        spacing-20: 8px
        spacing-25: 12px
        spacing-30: 16px
        spacing-40: 24px
        spacing-50: 32px
        spacing-55: 40px
        spacing-60: 48px
        spacing-70: 64px
    transitions:
      label: Transitions
      prefix: transition
      choices:
        transition-linear-80ms: '80ms linear'
        transition-easeinout-150ms: '150ms ease-in-out'
        transition-standard: '200ms ease'
    breakpoints:
      label: Breakpoints
      prefix: break-point
      choices:
        break-point-mobile: 768px
        break-point-desktop: 1024px
        break-point-biggerdesktop: 1280px
        break-point-giantdesktop: 1680px
        break-point-jumbodesktop: 1920px

states:
  active:
    description: 'Trigged while the user is currently interacting with the element'
  hovered:
    description: 'When the mouse is over the element'
  disabled:
    description: 'When the element can not be interacted with'
  focused:
    description: 'When the element is currently selected to receive input'
  readonly:
    description: 'When the element can not be modified'
  warning:
    description: 'When the element shows a warning state'
  success:
    description: 'When the element has a successful state'
  error:
    description: 'When the element has invalid input'

variants:
  small:
    description: 'To differentiate component small size'
  medium:
    description: 'To differentiate component medium size'
  big:
    description: 'To differentiate component big size'
  secondary:
    description: 'To differentiate component secondary type'
  tertiary:
    description: 'To differentiate component tertiary type'
  '10':
    description: 'To differentiate component small size'
  '20':
    description: 'To differentiate component medium size'
  '30':
    description: 'To differentiate component between big and medium size'
  '40':
    description: 'To differentiate component big size'

componentGroups:
  button:
    description: 'Button elements'
  input:
    description: 'Input elements'
  localized-input-label:
    description: 'Localized multiline text input label elements'

decisionGroupsByTheme:
  default:
    backgroundColors:
      label: Background Colors
      prefix: background-color
      decisions:
        background-color-for-input:
          choice: color-surface
        background-color-for-input-when-disabled:
          choice: color-neutral-95
        background-color-for-input-when-readonly:
          choice: color-neutral-95
        background-color-for-input-when-hovered:
          choice: color-primary-98
        background-color-for-localized-input-label:
          choice: color-surface
        background-color-for-localized-input-label-when-readonly:
          choice: color-neutral-95
        background-color-for-localized-input-label-when-disabled:
          choice: color-neutral-95
        background-color-for-button-when-active:
          choice: color-primary-90
        background-color-for-button-when-hovered:
          choice: color-primary-95
        background-color-for-button-when-disabled:
          choice: color-neutral-95

    borderColors:
      label: Border Colors
      prefix: border-color
      decisions:
        border-color-for-input:
          choice: color-neutral
        border-color-for-input-when-disabled:
          choice: color-neutral
        border-color-for-input-when-readonly:
          choice: color-surface
        border-color-for-input-when-error:
          choice: color-error
        border-color-for-input-when-warning:
          choice: color-warning
        border-color-for-input-when-hovered:
          choice: color-neutral
        border-color-for-input-when-focused:
          choice: color-primary-40
        border-color-for-button-as-secondary:
          choice: color-primary-85

    borderRadiuses:
      label: Border Radius
      prefix: border-radius
      decisions:
        border-radius-for-input:
          choice: border-radius-4

    fontColors:
      label: Font Colors
      prefix: font-color
      decisions:
        font-color-for-input:
          choice: color-solid
        font-color-for-input-when-disabled:
          choice: color-neutral-60
        font-color-for-input-when-error:
          choice: color-error-40
        font-color-for-input-when-readonly:
          choice: color-neutral-40
        font-color-for-input-when-warning:
          choice: color-warning
        font-color-for-button-as-secondary:
          choice: color-primary

    heights:
      label: Height
      prefix: height
      decisions:
        height-for-button-as-big:
          choice: '40px'
        height-for-button-as-small:
          choice: '16px'
        height-for-button-as-medium:
          choice: '32px'
        height-for-button-as-40:
          choice: '40px'
        height-for-button-as-30:
          choice: '32px'
        height-for-button-as-20:
          choice: '24px'
        height-for-button-as-10:
          choice: '16px'
        height-for-input:
          choice: '40px'
        # This is a temporary one to be able to remove the legay 'size-height-for-input'
        height-for-input-as-small:
          choice: '32px'
          description: 'Legacy token to be removed'

    shadows:
      label: Shadows
      prefix: shadow
      decisions:
        shadow-for-input:
          choice: shadow-0
        shadow-for-input-when-focused:
          choice: 'inset 0 0 0 1px var(--color-primary)'
        shadow-for-input-when-error:
          choice: 'inset 0 0 0 1px var(--color-error)'
        shadow-for-input-when-warning:
          choice: 'inset 0 0 0 1px var(--color-warning)'