@commercetools-frontend/ui-kit 17.1.0 → 18.0.0

package/materials/internals/definition.yaml

@@ -244,6 +244,7 @@ choiceGroupsByTheme:
         spacing-30: 16px
         spacing-40: 24px
         spacing-50: 32px
+        spacing-55: 40px
         spacing-60: 48px
         spacing-70: 64px
     transitions:
@@ -263,8 +264,41 @@ choiceGroupsByTheme:
         break-point-giantdesktop: 1680px
         break-point-jumbodesktop: 1920px
 
+  recolouring:
+    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-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%)'
+        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%)'
+
 states:
-  active: 'Trigged while the user is currently interacting with the element'
+  active:
+    description: 'Trigged while the user is currently interacting with the element'
   hovered:
     description: 'When the mouse is over the element'
   disabled:
@@ -283,70 +317,14 @@ states:
     description: 'When the element has invalid input'
   selected:
     description: 'When the element is selected'
-  inverted:
-    description: 'When the element has inverted colors'
-  raised:
-    description: 'When the element is raised'
-  highlighted:
-    description: 'When the element is highlighted'
-  condensed:
-    description: 'When the element is condensed'
-  checked:
-    description: 'When the element is checked'
-  checked-and-disabled:
-    description: 'When the element is checked and disabled'
-  info-and-hovered:
-    description: "When the element's tone is info and hovered"
-  info-and-active:
-    description: "When the element's tone is info and active"
 
 variants:
-  h1:
-    description: 'H1 text element'
-  h2:
-    description: 'H2 text element'
-  h3:
-    description: 'H3 text element'
-  h4:
-    description: 'H4 text element'
-  h5:
-    description: 'H5 text element'
-  body:
-    description: 'Body text element'
-  caption:
-    description: 'Caption text element'
-  detail:
-    description: 'Detail text element'
-  icon:
-    description: 'Icon'
   small:
     description: 'To differentiate component small size'
   medium:
     description: 'To differentiate component medium size'
   big:
     description: 'To differentiate component big size'
-  primary:
-    description: 'To differentiate component primary type'
-  secondary:
-    description: 'To differentiate component secondary type'
-  inverted:
-    description: 'To differentiate component inverted type'
-  urgent:
-    description: 'To differentiate component urgent type'
-  info:
-    description: 'To differentiate component info type'
-  condensed:
-    description: 'Elements with a compact style'
-  bottom:
-    description: 'To differentiate component bottom style'
-  positive:
-    description: 'To differentiate component positive style'
-  information:
-    description: 'To differentiate component information style'
-  critical:
-    description: 'To differentiate component critical style'
-  bold:
-    description: 'When the element is bold'
   quiet:
     description: 'When the element is quiet style'
 
@@ -355,160 +333,11 @@ componentGroups:
     description: 'Button elements'
   input:
     description: 'Input elements'
-  tag:
-    description: 'Tag elements'
-  tag-remove-icon:
-    description: 'Tag remove icon elements'
-  tag-drag-icon:
-    description: 'Tag drag icon elements'
-  tag-warning:
-    description: 'Tag elements with type warning'
-  tag-list:
-    description: 'Wrapper for Tag elements'
-  text:
-    description: 'Text elements'
-  body:
-    description: 'Document body element'
-  card:
-    description: 'Card element'
-  link:
-    description: 'Link elements'
-  stamp:
-    description: 'Stamp elements'
-  table:
-    description: 'Table elements'
-  table-header:
-    description: 'Table header elements'
-  table-cell:
-    description: 'Table cell elements'
-  table-manager-droppable-list:
-    description: 'Table manager droppable list elements'
-  table-manager-settings-panel:
-    description: 'Table manager settings panel elements'
-  table-manager-draggable-tag:
-    description: 'Table manager settings draggable tag elements'
-  collapsible-panel-header:
-    description: 'collapsible panel header elements'
-  collapsible-panel-section-wrapper:
-    description: 'collapsible panel section wrapper elements'
-  collapsible-panel-section-description:
-    description: 'collapsible panel section description elements'
-  collapsible-panel-header-icon:
-    description: 'collapsible panel header icon elements'
-  select-input:
-    description: 'Select input elements'
-  select-input-option:
-    description: 'Select input option elements'
-  datetime-input:
-    description: 'Date time input elements'
-  datetime-input-icon:
-    description: 'Date time input icon elements'
-  avatar:
-    description: 'Avatar elements'
-  multiline-input:
-    description: 'Multiline input elements'
   localized-input-label:
     description: 'Localized multiline text input label elements'
-  localized-rich-text-input-label:
-    description: 'Localized rich text input label elements'
-  localized-multiline-text-input-label:
-    description: 'Localized multiline text input label elements'
-  localized-rich-text-body-button:
-    description: 'Localized rich text input button elements'
-  localized-rich-text-dropdown-button:
-    description: 'Localized rich text input dropdown elements'
-  localized-rich-text-dropdown-item:
-    description: 'Localized rich text input dropdown item elements'
-  rich-text-input:
-    description: 'rich text input elements'
-  rich-text-editor-container:
-    description: 'Rich text editor container elements'
-  rich-text-divider:
-    description: 'Rich text divider elements'
-  rich-text-dropdown:
-    description: 'Rich text dropdown elements'
-  rich-text-dropdown-item-label:
-    description: 'Rich text dropdown item label elements'
-  rich-text-more-styles-dropdown:
-    description: 'Rich text more styles dropdown elements'
-  tooltip:
-    description: 'Tooltip elements'
-  view-switcher:
-    description: 'View switcher elements'
-  view-switcher-icon:
-    description: 'View switcher icon elements'
-  content-notification:
-    description: 'Content notification elements'
-  content-notification-message:
-    description: 'Content notification message element'
-  content-notification-icon:
-    description: 'Content notification icon element'
-  checkbox-input-icon:
-    description: 'Checkbox icon elements'
-  checkbox-input-label:
-    description: 'Checkbox icon elements'
-  select-input-icon:
-    description: 'Select input icon elements'
-  select-input-tag:
-    description: 'Select input inner tag elements'
-  clear-input-icon:
-    description: 'clear input icon elements'
-  search-input-icon:
-    description: 'search input icon elements'
-  select-input-menu:
-    description: 'select input menu elements'
-  select-input-options:
-    description: 'select input options element'
-  group-heading-select-input-options:
-    description: 'group heading select input options element'
-  money-input-currency-dropdown:
-    description: 'Money input currency dropdown elements'
-  money-input-currency-dropdown-indicator:
-    description: 'Money Input Dropdown indicator elements'
-  money-input-precision-badge:
-    description: 'Money input precision badge elements'
-  radio-input:
-    description: 'Radio input elements'
-  radio-input-label:
-    description: 'Radio input label elements'
-  radio-input-option:
-    description: 'Radio input option elements'
-  selectable-select-input-dropdown:
-    description: 'Selectable select input dropdown elements'
-  selectable-search-input-dropdown:
-    description: 'Selectable search input dropdown elements'
-  primary-action-dropdown:
-    description: 'Primary action dropdown elements'
-  primary-action-dropdown-icon:
-    description: 'Primary action dropdown icon elements'
-  primary-action-dropdown-menu:
-    description: 'Primary action dropdown menu elements'
-  toggle-input-track:
-    description: 'Toggle input track pseudo-elements'
-  toggle-input-thumb:
-    description: 'Toggle input thumb pseudo-elements'
-  rich-text-toolbar:
-    description: 'Rich text tool bar element'
-  rich-text-button:
-    description: 'Rich text button element'
-  calendar-menu:
-    description: 'Calendar menu element'
-  flat-button:
-    description: 'Flat button elements'
-  flat-button-icon:
-    description: 'Flat button icon elements'
-  secondary-icon-button:
-    description: 'Secondary icon button elements'
 
 decisionGroupsByTheme:
   default:
-    alignItems:
-      label: Flex align items
-      prefix: align-items
-      decisions:
-        align-items-for-select-input-tag:
-          choice: 'center'
-
     backgroundColors:
       label: Background Colors
       prefix: background-color
@@ -517,26 +346,6 @@ decisionGroupsByTheme:
           choice: color-neutral-95
         background-color-for-button-when-hovered:
           choice: color-neutral-98
-        background-color-for-button-as-primary-when-active:
-          choice: '#15A390' # color-primary with 10% black opacity
-        background-color-for-button-as-primary-when-hovered:
-          choice: '#17AB97' # color-primary with 5% black opacity
-        background-color-for-button-as-icon-as-primary-when-active:
-          choice: '#15A390'
-        background-color-for-button-as-icon-as-primary-when-hovered:
-          choice: color-primary
-        background-color-for-button-as-icon-as-info-when-active:
-          choice: '#057FCC' # color-info with 10% black opacity
-        background-color-for-button-as-icon-as-info-when-hovered:
-          choice: color-info
-        background-color-for-button-as-urgent-when-active:
-          choice: '#DC630A' # color-warning with 10% black opacity
-        background-color-for-button-as-urgent-when-hovered:
-          choice: '#E7680D' # color-warning with 5% black opacity
-        background-color-for-button-as-critical-when-active:
-          choice: '#B3003E' # color-error with 10% black opacity
-        background-color-for-button-as-critical-when-hovered:
-          choice: '#CC0047' # color-error with 5% black opacity
         background-color-for-button-when-disabled:
           choice: color-accent-95
         background-color-for-input:
@@ -557,115 +366,12 @@ decisionGroupsByTheme:
           choice: color-transparent
         background-color-for-input-as-quiet-when-hovered:
           choice: color-solid-02
-        background-color-for-table-cell-when-hovered:
-          choice: color-neutral-98
-        background-color-for-table-header:
-          choice: color-neutral-98
-        background-color-for-tag:
-          choice: color-neutral-95
-        background-color-for-tag-warning:
-          choice: color-warning-95
-        background-color-for-tag-when-hovered:
-          choice: color-neutral-90
-        background-color-for-collapsible-panel-header-icon-when-disabled:
-          choice: color-surface
-        background-color-for-select-input-option-when-hovered:
-          choice: color-neutral-98
-        background-color-for-stamp-as-positive:
-          choice: color-primary-90
-        background-color-for-stamp-as-primary:
-          choice: color-primary-90
         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-localized-rich-text-body-button-when-active:
-          choice: color-accent-20
-        background-color-for-localized-rich-text-body-button:
-          choice: color-neutral-95
-        background-color-for-rich-text-dropdown-when-hovered:
-          choice: color-neutral-95
-        background-color-for-rich-text-more-styles-dropdown-when-hovered:
-          choice: color-info-95
-        background-color-for-rich-text-button:
-          choice: color-accent-20
-        background-color-for-tooltip:
-          choice: color-accent-10
-        background-color-for-view-switcher:
-          choice: color-surface
-        background-color-for-view-switcher-when-disabled:
-          choice: color-surface
-        background-color-for-view-switcher-when-selected:
-          choice: color-neutral-95
-        background-color-for-view-switcher-when-hovered:
-          choice: color-neutral-95
-        background-color-for-content-notification-when-error:
-          choice: color-error-95
-        background-color-for-content-notification-when-info:
-          choice: color-info-95
-        background-color-for-content-notification-when-warning:
-          choice: color-warning-95
-        background-color-for-content-notification-when-success:
-          choice: color-primary-95
-        background-color-for-checkbox-input-icon:
-          choice: color-primary
-        background-color-for-checkbox-input-icon-when-disabled:
-          choice: color-neutral
-        background-color-for-checkbox-input-icon-when-readonly:
-          choice: color-neutral-60
-        background-color-for-checkbox-input-icon-when-error:
-          choice: color-error
-        background-color-for-checkbox-input-icon-when-hovered:
-          choice: color-neutral-90
-        background-color-for-primary-action-dropdown-when-active:
-          choice: color-neutral-90
-        background-color-for-primary-action-dropdown-when-disabled:
-          choice: color-neutral-95
-        background-color-for-toggle-input-track:
-          choice: color-neutral
-        background-color-for-toggle-input-track-when-disabled:
-          choice: color-neutral-90
-        background-color-for-toggle-input-thumb-when-disabled:
-          choice: color-neutral-60
-        background-color-for-toggle-input-track-when-checked:
-          choice: color-primary-40
-        background-color-for-toggle-input-thumb-when-checked:
-          choice: color-primary-25
-        background-color-for-toggle-input-track-when-checked-and-disabled:
-          choice: color-accent-90
-        background-color-for-toggle-input-thumb-when-checked-and-disabled:
-          choice: color-accent-60
-        background-color-for-button-as-secondary-when-info:
-          choice: color-info-95
-        background-color-for-button-as-secondary-when-info-and-hovered:
-          choice: color-info-90
-        background-color-for-button-as-secondary-when-info-and-active:
-          choice: color-info-85
-
-    borders:
-      label: Borders
-      prefix: border
-      decisions:
-        border-for-button-as-secondary:
-          choice: '1px solid var(--color-neutral)'
-        border-for-button-as-secondary-when-hovered:
-          choice: '1px solid var(--color-neutral)'
-        border-for-button-as-secondary-when-active:
-          choice: '1px solid var(--color-neutral)'
-        border-for-card-when-raised:
-          choice: '1px solid var(--color-neutral-90)'
-        border-for-collapsible-panel-header-icon-when-disabled:
-          choice: 'none'
-        border-for-view-switcher:
-          choice: '1px solid var(--color-neutral)'
-        border-for-select-input-tag:
-          choice: '1px solid var(--color-neutral-85)'
-        border-for-radio-input-option:
-          choice: border-width-2
-        border-for-calendar-menu-when-focused:
-          choice: 'none'
 
     borderColors:
       label: Border Colors
@@ -687,86 +393,6 @@ decisionGroupsByTheme:
           choice: color-neutral
         border-color-for-input-as-quiet:
           choice: color-transparent
-        border-color-for-tag:
-          choice: color-neutral
-        border-color-for-tag-warning:
-          choice: color-warning
-        border-color-for-tag-when-focused:
-          choice: color-neutral
-        border-color-for-tag-when-hovered:
-          choice: color-neutral
-        border-color-for-button-as-icon:
-          choice: color-neutral
-        border-color-for-button-as-icon-as-info:
-          choice: color-neutral
-        border-color-for-button-as-icon-as-primary:
-          choice: color-neutral
-        border-color-for-button-as-icon-when-disabled:
-          choice: color-surface
-        border-color-for-table-header:
-          choice: color-surface
-        border-color-for-table-header-as-bottom:
-          choice: color-neutral-95
-        border-color-for-table-manager-droppable-list:
-          choice: color-neutral
-        border-color-for-collapsible-panel-header:
-          choice: color-neutral-90
-        border-color-for-stamp-when-error:
-          choice: color-error-85
-        border-color-for-stamp-when-warning:
-          choice: color-warning-85
-        border-color-for-stamp-as-positive:
-          choice: color-primary-85
-        border-color-for-stamp-as-information:
-          choice: color-info-85
-        border-color-for-stamp-as-primary:
-          choice: color-primary-85
-        border-color-for-stamp-as-secondary:
-          choice: color-neutral-85
-        border-color-for-localized-input-label:
-          choice: color-neutral
-        border-color-for-localized-input-label-when-readonly:
-          choice: color-surface
-        border-color-for-content-notification-when-error:
-          choice: color-error-85
-        border-color-for-content-notification-when-info:
-          choice: color-info-85
-        border-color-for-content-notification-when-warning:
-          choice: color-warning-85
-        border-color-for-content-notification-when-success:
-          choice: color-primary-85
-        border-color-for-group-heading-select-input-options:
-          choice: color-neutral-90
-        border-color-for-select-input-menu:
-          choice: color-surface
-        border-color-for-select-input-when-readonly:
-          choice: color-neutral-95
-        border-color-for-select-input-menu-when-warning:
-          choice: color-surface
-        border-color-for-select-input-menu-when-error:
-          choice: color-surface
-        border-color-for-checkbox-input-icon:
-          choice: color-primary
-        border-color-for-checkbox-input-icon-when-disabled:
-          choice: color-neutral
-        border-color-for-checkbox-input-icon-when-readonly:
-          choice: color-neutral-60
-        border-color-for-checkbox-input-icon-when-error:
-          choice: color-error
-        border-color-for-radio-input:
-          choice: color-neutral-60
-        border-color-for-radio-input-when-disabled:
-          choice: color-neutral
-        border-color-for-radio-input-when-readonly:
-          choice: color-neutral-60
-        border-color-for-radio-input-when-checked:
-          choice: color-primary
-        border-color-for-radio-input-when-focused:
-          choice: color-neutral-60
-        border-color-for-primary-action-dropdown-menu:
-          choice: color-surface
-        border-color-for-button-as-secondary-when-info:
-          choice: color-info-85
 
     borderRadiuses:
       label: Border Radius
@@ -776,34 +402,8 @@ decisionGroupsByTheme:
           choice: border-radius-4
         border-radius-for-button-as-medium:
           choice: border-radius-4
-        border-radius-for-button-as-icon-as-big:
-          choice: border-radius-4
-        border-radius-for-button-as-icon-as-medium:
-          choice: border-radius-4
-        border-radius-for-button-as-icon-as-small:
-          choice: border-radius-2
         border-radius-for-input:
           choice: border-radius-4
-        border-radius-for-tag:
-          choice: border-radius-2
-        border-radius-for-card:
-          choice: border-radius-4
-        border-radius-for-table-manager-droppable-list:
-          choice: border-radius-4
-        border-radius-for-stamp:
-          choice: border-radius-4
-        border-radius-for-stamp-as-condensed:
-          choice: border-radius-2
-        border-radius-for-view-switcher:
-          choice: border-radius-4
-        border-radius-for-content-notification:
-          choice: border-radius-4
-        border-radius-for-primary-action-dropdown:
-          choice: 'var(--border-radius-4) 0 0 var(--border-radius-4)'
-        border-radius-for-primary-action-dropdown-icon:
-          choice: '0 var(--border-radius-4) var(--border-radius-4) 0'
-        border-radius-for-primary-action-dropdown-menu:
-          choice: border-radius-4
 
     borderWidths:
       label: Border width
@@ -817,42 +417,11 @@ decisionGroupsByTheme:
           choice: border-width-1
         border-width-for-input-when-focused:
           choice: border-width-1
-        border-width-for-tag:
-          choice: '1px 1px 1px 0'
-        border-width-for-select-input:
-          choice: border-width-2
-        border-left-width-for-content-notification:
-          choice: '0px'
-        border-width-for-checkbox-input-icon:
-          choice: border-width-2
-        border-for-primary-action-dropdown-icon:
-          choice: '1px 1px 1px 0px'
-
-    boxShadows:
-      label: Box shadows
-      prefix: box-shadow
-      decisions:
-        box-shadow-for-datetime-input-when-hovered:
-          choice: 'inset 0 0 0 1px'
-        box-shadow-for-view-switcher:
-          choice: shadow-0
-        box-shadow-for-view-switcher-when-selected:
-          choice: shadow-0
-        box-shadow-for-select-input-when-focused:
-          choice: 'inset 0 0 0 1px'
-        box-shadow-for-calendar-menu-when-focused:
-          choice: '0 2px 5px 0px rgba(0, 0, 0, 0.15)'
-        box-shadow-for-table:
-          choice: shadow-17
 
     fontColors:
       label: Font Colors
       prefix: font-color
       decisions:
-        font-color-for-text:
-          choice: color-solid
-        font-color-for-text-when-disabled:
-          choice: color-neutral-60
         font-color-for-input:
           choice: color-solid
         font-color-for-input-when-disabled:
@@ -863,104 +432,6 @@ decisionGroupsByTheme:
           choice: color-neutral-40
         font-color-for-input-when-warning:
           choice: color-warning
-        font-color-for-tag:
-          choice: color-solid
-        font-color-for-tag-remove-icon:
-          choice: color-neutral-40
-        font-color-for-tag-drag-icon:
-          choice: color-neutral-40
-        font-color-for-tag-remove-icon-when-hovered:
-          choice: color-error
-        font-color-for-tag-when-disabled:
-          choice: color-neutral-60
-        font-color-for-text-when-inverted:
-          choice: color-surface
-        font-color-for-link-as-inverted:
-          choice: color-surface
-        font-color-for-link-as-primary:
-          choice: color-primary-30
-        font-color-for-link-as-secondary:
-          choice: color-solid
-        font-color-for-link-as-primary-when-active:
-          choice: color-primary
-        font-color-for-link-as-secondary-when-active:
-          choice: color-primary
-        font-color-for-table-header:
-          choice: color-neutral-40
-        font-color-for-localized-input-label:
-          choice: color-neutral-60
-        font-color-for-view-switcher:
-          choice: color-neutral-40
-        font-color-for-view-switcher-when-disabled:
-          choice: color-neutral-60
-        font-color-for-view-switcher-when-selected:
-          choice: color-solid
-        font-color-for-clear-input-icon:
-          choice: color-neutral-40
-        font-color-for-clear-input-icon-when-hovered:
-          choice: color-error
-        font-color-for-content-notification:
-          choice: color-solid
-        font-color-for-content-notification-icon-when-error:
-          choice: color-error
-        font-color-for-content-notification-icon-when-warning:
-          choice: color-warning
-        font-color-for-content-notification-icon-when-success:
-          choice: color-primary
-        font-color-for-content-notification-icon-when-info:
-          choice: color-info
-        font-color-for-search-input-icon:
-          choice: color-neutral-60
-        font-color-for-search-input-icon-when-hovered:
-          choice: color-primary
-        font-color-for-select-input-icon:
-          choice: color-neutral-60
-        font-color-for-select-input-when-error:
-          choice: color-error
-        font-color-for-select-input-when-warning:
-          choice: color-warning
-        font-color-for-select-input-icon-when-error:
-          choice: color-error
-        font-color-for-select-input-icon-when-warning:
-          choice: color-warning
-        font-color-for-money-input-currency-dropdown-indicator:
-          choice: color-neutral-40
-        font-color-for-search-input-icon-when-readonly:
-          choice: color-neutral-60
-        font-color-for-checkbox-input-label:
-          choice: color-solid
-        font-color-for-checkbox-input-label-when-error:
-          choice: color-error
-        font-color-for-checkbox-input-label-when-disabled:
-          choice: color-neutral-60
-        font-color-for-checkbox-input-label-when-readonly:
-          choice: color-neutral-40
-        font-color-for-radio-input-when-disabled:
-          choice: color-neutral-60
-        font-color-for-radio-input-when-error:
-          choice: color-error
-        font-color-for-radio-input-when-readonly:
-          choice: color-neutral-60
-        font-color-for-radio-input-when-warning:
-          choice: color-warning
-        font-color-for-flat-button-as-primary:
-          choice: color-primary-30
-        font-color-for-flat-button-as-primary-when-hovered:
-          choice: color-primary
-        font-color-for-flat-button-as-critical:
-          choice: color-error
-        font-color-for-flat-button-as-critical-when-hovered:
-          choice: color-error-25
-        font-color-for-flat-button-as-secondary:
-          choice: color-solid
-        font-color-for-flat-button-as-inverted:
-          choice: color-surface
-        font-color-for-flat-button-icon-when-disabled:
-          choice: color-neutral-60
-        font-color-for-secondary-icon-button-as-primary:
-          choice: color-primary-25
-        font-color-for-secondary-icon-button-as-primary-when-hovered:
-          choice: color-primary
 
     heights:
       label: Height
@@ -970,40 +441,14 @@ decisionGroupsByTheme:
           choice: '40px'
         height-for-button-as-medium:
           choice: '32px'
-        height-for-button-as-icon-as-big:
-          choice: '40px'
-        height-for-button-as-icon-as-medium:
-          choice: '32px'
-        height-for-button-as-icon-as-small:
+        height-for-button-as-small:
           choice: '16px'
         height-for-input:
           choice: '40px'
-        height-for-view-switcher:
-          choice: '40px'
-        height-for-view-switcher-when-condensed:
-          choice: '32px'
-        height-for-select-input-tag:
+        # This is a temporary one to be able to remove the legay 'size-height-for-input'
+        height-for-input-as-small:
           choice: '32px'
-        height-for-radio-input-option:
-          choice: '18px'
-        height-for-radio-input-option-when-checked:
-          choice: '10px'
-        height-for-primary-action-dropdown:
-          choice: '40px'
-
-    widths:
-      label: Width
-      prefix: width
-      decisions:
-        width-for-avatar-as-medium:
-          choice: '40px'
-
-    minWidths:
-      label: Min width
-      prefix: min-width
-      decisions:
-        min-width-for-money-input-currency-dropdown:
-          choice: '80px'
+          description: 'Legacy token to be removed'
 
     placeholderFontColors:
       label: Placeholder font colors
@@ -1021,254 +466,22 @@ decisionGroupsByTheme:
           choice: font-size-20
         font-size-for-input:
           choice: font-size-30
-        font-size-for-text-as-h1:
-          choice: font-size-60
-        font-size-for-text-as-h2:
-          choice: font-size-50
-        font-size-for-text-as-h3:
-          choice: font-size-40
-        font-size-for-text-as-h4:
-          choice: font-size-30
-        font-size-for-text-as-h5:
-          choice: font-size-30
-        font-size-for-text-as-body:
-          choice: font-size-30
-        font-size-for-text-as-caption:
-          choice: font-size-10
-        font-size-for-text-as-detail:
-          choice: font-size-20
-        font-size-for-body:
-          choice: '16px'
-        font-size-for-link:
-          choice: font-size-30
-        font-size-for-view-switcher:
-          choice: font-size-20
-        font-size-for-table:
-          choice: font-size-20
-        font-size-for-localized-input-label:
-          choice: font-size-30
-        font-size-for-content-notification:
-          choice: font-size-30
-        font-size-for-select-input-tag:
-          choice: font-size-30
-
-    iconColors:
-      label: Icon colors
-      prefix: icon-color
-      decisions:
-        icon-color-for-datetime-input-icon:
-          choice: color-neutral-40
-        icon-color-for-datetime-input-icon-when-hovered:
-          choice: color-error
-
-    lineHeights:
-      label: Line Heights
-      prefix: line-height
-      decisions:
-        line-height-for-text-as-h1:
-          choice: line-height-60
-        line-height-for-text-as-h2:
-          choice: line-height-50
-        line-height-for-text-as-h3:
-          choice: line-height-30
-        line-height-for-text-as-h4:
-          choice: line-height-20
-        line-height-for-text-as-h5:
-          choice: line-height-20
-        line-height-for-text-as-body:
-          choice: line-height-40
-        line-height-for-text-as-caption:
-          choice: line-height-05
-        line-height-for-text-as-detail:
-          choice: line-height-20
-        line-height-for-select-input-options:
-          choice: line-height-40
-        line-height-for-table-header:
-          choice: '26px'
-
-    fontWeights:
-      label: Font Weights
-      prefix: font-weight
-      decisions:
-        font-weight-for-text-as-h1:
-          choice: font-weight-600
-        font-weight-for-text-as-h2:
-          choice: font-weight-500
-        font-weight-for-text-as-h3:
-          choice: font-weight-500
-        font-weight-for-text-as-h4:
-          choice: font-weight-500
-        font-weight-for-text-as-h5:
-          choice: font-weight-500
-        font-weight-for-text-as-body:
-          choice: font-weight-400
-        font-weight-for-text-as-caption:
-          choice: font-weight-400
-        font-weight-for-text-as-detail:
-          choice: font-weight-400
-        font-weight-for-button:
-          choice: font-weight-500
-        font-weight-for-table-header:
-          choice: font-weight-500
-        font-weight-for-text-as-bold:
-          choice: font-weight-600
-
-    margins:
-      label: Margins
-      prefix: margin
-      decisions:
-        margin-for-table-header:
-          choice: spacing-20
-        margin-for-table-cell-as-condensed:
-          choice: spacing-20
-        margin-for-view-switcher-icon:
-          choice: '0 var(--spacing-20) 0 0'
-        margin-for-group-heading-select-input-options:
-          choice: spacing-20
-        margin-for-select-input-icon:
-          choice: spacing-20
-        margin-left-for-select-input-icon:
-          choice: spacing-20
-        margin-right-for-money-input-precision-badge:
-          choice: '12px'
-        margin-right-for-search-input-icon:
-          choice: '12px'
-        margin-right-for-clear-input-icon:
-          choice: spacing-20
-        margin-left-for-radio-input-label:
-          choice: spacing-10
-        margin-right-for-primary-action-dropdown:
-          choice: spacing-20
-        margin-top-for-primary-action-dropdown:
-          choice: spacing-20
-        margin-for-localized-rich-text-body-button:
-          choice: '0 2px var(--spacing-20) 2px'
-        margin-for-rich-text-divider:
-          choice: 'var(--spacing-10) 2px'
-        margin-for-rich-text-dropdown-item-label:
-          choice: '0 0 0 var(--spacing-20)'
-        margin-for-tag-list:
-          choice: '0 var(--spacing-20) var(--spacing-20) 0'
 
     paddings:
       label: Paddings
       prefix: padding
       decisions:
-        padding-for-stamp:
-          choice: '4px 12px'
-        padding-for-stamp-as-condensed:
-          choice: 'var(--spacing-05) var(--spacing-10)'
-        padding-for-tag:
-          choice: '2px 12px'
-        padding-for-table-header:
-          choice: spacing-40
-        padding-for-table-header-as-condensed:
-          choice: spacing-40
-        padding-for-table-cell:
-          choice: 'var(--spacing-30) var(--spacing-40)'
-        padding-for-table-cell-as-condensed:
-          choice: 'var(--spacing-20) var(--spacing-40)'
-        padding-for-table-manager-droppable-list:
-          choice: spacing-30
-        padding-for-table-manager-settings-panel:
-          choice: 'var(--spacing-40) var(--spacing-50)'
-        padding-for-table-manager-draggable-tag:
-          choice: 'var(--spacing-10) 0'
-        padding-for-collapsible-panel-header:
-          choice: 'var(--spacing-30) 0'
-        padding-for-collapsible-panel-header-as-condensed:
-          choice: 'var(--spacing-20) 0'
-        padding-for-collapsible-panel-section-wrapper:
-          choice: 'var(--spacing-50) 0 0 calc(var(--spacing-30) + var(--spacing-10))'
-        padding-for-collapsible-panel-section-wrapper-as-condensed:
-          choice: 'var(--spacing-40) 0 0 calc(var(--spacing-30) + var(--spacing-10))'
-        padding-for-collapsible-panel-section-description:
-          choice: '0 0 var(--spacing-40)'
-        padding-for-collapsible-panel-section-description-as-condensed:
-          choice: '0 0 var(--spacing-40)'
         padding-for-input:
-          choice: spacing-30
-        padding-for-input-as-quiet:
-          choice: spacing-20
-        padding-for-multiline-input:
-          choice: spacing-20
-        padding-for-localized-rich-text-input-label:
-          choice: 'var(--spacing-20) 12px'
-        padding-for-localized-rich-text-dropdown-button:
-          choice: '5px var(--spacing-20)'
-        padding-for-localized-rich-text-dropdown-item:
-          choice: 'var(--spacing-20) var(--spacing-30)'
-        padding-for-localized-rich-text-body-button:
-          choice: 'var(--spacing-20)'
-        padding-for-localized-input-label:
-          choice: '0 12px'
-        padding-for-rich-text-input:
-          choice: 'var(--spacing-20) var(--spacing-30)'
-        padding-for-rich-text-toolbar:
-          choice: 'none'
-        padding-left-for-rich-text-toolbar:
-          choice: 'none'
-        padding-for-rich-text-editor-container:
-          choice: 'var(--spacing-20) 0 0'
-        padding-for-localized-multiline-text-input-label:
-          choice: '0 var(--spacing-20)'
-        padding-for-tag-remove-icon:
-          choice: '0 12px'
-        padding-for-tooltip:
-          choice: 'var(--spacing-20) 12px'
-        padding-for-view-switcher:
-          choice: '0 var(--spacing-30) 0 var(--spacing-30)'
-        padding-for-view-switcher-when-condensed:
-          choice: '0 12px 0 12px'
-        padding-for-content-notification:
-          choice: 'var(--spacing-20) var(--spacing-30)'
-        padding-for-content-notification-message:
-          choice: '0 var(--spacing-30) 0 var(--spacing-20)'
-        padding-left-for-select-input-options:
-          choice: spacing-30
-        padding-right-for-select-input-options:
-          choice: spacing-30
-        padding-top-for-select-input-options:
-          choice: spacing-20
-        padding-bottom-for-select-input-options:
-          choice: spacing-20
-        padding-for-group-heading-select-input-options:
-          choice: spacing-30
-        padding-for-select-input-menu:
-          choice: 'var(--spacing-10) 0'
-        padding-for-money-input-currency-dropdown:
-          choice: '0 12px'
-        padding-for-selectable-search-input-dropdown:
-          choice: '0 12px'
-        padding-for-primary-action-dropdown:
           choice: '0 var(--spacing-30)'
-        padding-for-primary-action-dropdown-icon:
+        padding-for-input-as-quiet:
           choice: '0 var(--spacing-20)'
-        padding-for-button-as-medium:
-          choice: '0 var(--spacing-30)'
-        padding-for-button-as-big:
+        padding-for-button:
           choice: '0 var(--spacing-30)'
 
     shadows:
       label: Shadows
       prefix: shadow
       decisions:
-        shadow-box-tag-when-hovered:
-          description: ''
-          deprecated: true
-          choice: shadow-1
-        shadow-for-button:
-          choice: shadow-0
-        shadow-for-button-when-focused:
-          choice: shadow-0
-        shadow-for-button-when-hovered:
-          choice: shadow-0
-        shadow-for-button-when-active:
-          choice: shadow-0
-        shadow-for-button-when-disabled:
-          choice: shadow-0
-        shadow-for-card-when-raised:
-          choice: shadow-17
         shadow-for-input:
           choice: shadow-0
         shadow-for-input-when-focused:
@@ -1277,41 +490,3 @@ decisionGroupsByTheme:
           choice: 'inset 0 0 0 1px var(--color-error)'
         shadow-for-input-when-warning:
           choice: 'inset 0 0 0 1px var(--color-warning)'
-        shadow-for-tooltip:
-          choice: '0px 1px 2px 0px rgba(0, 0, 0, 0.25)'
-        shadow-for-select-input-menu:
-          choice: '0 2px 5px 0px rgba(0, 0, 0, 0.15)'
-        shadow-for-primary-action-dropdown:
-          choice: shadow-0
-        shadow-for-primary-action-dropdown-when-hovered:
-          choice: shadow-0
-        shadow-for-primary-action-dropdown-when-active:
-          choice: shadow-0
-        shadow-for-primary-action-dropdown-menu:
-          choice: '0 2px 5px 0px rgba(0, 0, 0, 0.15)'
-        shadow-for-toggle-input-thumb:
-          choice: '0px 1px 5px rgba(0, 0, 0, 0.2)'
-        shadow-for-tag-when-hovered:
-          choice: shadow-0
-
-# These tokens are deprecated as they don't follow our naming patterns.
-# Ideally they should be replaced with new tokens and not be used anymore.
-# But since we have not yet introduced alternatives for them it's still okay to
-# use them.
-#
-# We aim to remove each token from here as soon as we introduce an alternative,
-# but sometimes that's not possible because the usage of the tokens is invalid
-# as well (e.g. the shadows are being combined in invalid ways by ui-kit
-# consumers. We already have new shadow tokens, but those invalid useages would
-# break. Upgrading those parts is not something the ui-kit teams can do on their
-# own so we kept the old tokens around even though proper shadow tokens exist).
-plainTokens:
-  font-size-m: '1rem'
-  big-button-height: 32px
-  small-button-height: 24px
-  size-height-input: 32px
-  font-family-default: "'Open Sans', sans-serif"
-  font-size-default: 1rem
-  font-size-small: 0.9231rem
-  shadow-box-tag-hover: '0 1px 3px rgba(0, 0, 0, 0.12), 0 1px 2px rgba(0, 0, 0, 0.24)'
-  size-height-tag: 26px