@commercetools-frontend/ui-kit 18.3.0 → 18.5.0

package/dist/commercetools-frontend-ui-kit.cjs.dev.js

@@ -81,7 +81,7 @@ var text__default = /*#__PURE__*/_interopDefault(text);
 var viewSwitcher__default = /*#__PURE__*/_interopDefault(viewSwitcher);
 
 // NOTE: This string will be replaced on build time with the package version.
-var version = "18.3.0";
+var version = "18.5.0";
 
 exports.i18n = i18n__namespace;
 Object.defineProperty(exports, 'AccessibleHidden', {

package/dist/commercetools-frontend-ui-kit.cjs.prod.js

@@ -81,7 +81,7 @@ var text__default = /*#__PURE__*/_interopDefault(text);
 var viewSwitcher__default = /*#__PURE__*/_interopDefault(viewSwitcher);
 
 // NOTE: This string will be replaced on build time with the package version.
-var version = "18.3.0";
+var version = "18.5.0";
 
 exports.i18n = i18n__namespace;
 Object.defineProperty(exports, 'AccessibleHidden', {

package/dist/commercetools-frontend-ui-kit.esm.js

@@ -34,6 +34,6 @@ export { useDataTableSortingState, usePaginationState, useRowSelection, useSorti
 export { customProperties, designTokens } from '@commercetools-uikit/design-system';
 
 // NOTE: This string will be replaced on build time with the package version.
-var version = "18.3.0";
+var version = "18.5.0";
 
 export { version };

package/materials/custom-properties.css

@@ -7,7 +7,7 @@
 
 :root {
   --color-primary: hsl(175, 55%, 45%);
-  --color-primary-10: hsl(240, 66%, 19%);
+  --color-primary-10: hsl(175, 55%, 10%);
   --color-primary-20: hsl(175, 55%, 20%);
   --color-primary-25: hsl(175, 55%, 25%);
   --color-primary-30: hsl(175, 55%, 30%);
@@ -15,6 +15,7 @@
   --color-primary-85: hsl(175, 70%, 85%);
   --color-primary-90: hsl(175, 70%, 90%);
   --color-primary-95: hsl(175, 90%, 95%);
+  --color-primary-98: hsl(175, 100%, 99%);
   --color-accent: #213c45;
   --color-accent-10: hsl(195, 35.2941176471%, 10%);
   --color-accent-20: hsl(195, 35.2941176471%, 20%);
@@ -70,7 +71,7 @@
   --color-warning: #f16d0e;
   --color-warning-25: hsl(25.110132158590307, 89.0196078431%, 25%);
   --color-warning-40: hsl(25.110132158590307, 89.0196078431%, 40%);
-  --color-warning-60: hsl(35, 90%, 55%);
+  --color-warning-60: hsl(25.110132158590307, 90%, 60%);
   --color-warning-85: hsl(25.110132158590307, 89.0196078431%, 85%);
   --color-warning-95: hsl(25.110132158590307, 89.0196078431%, 95%);
   --color-error: #e60050;
@@ -227,11 +228,42 @@
   --background-color-for-stamp-as-positive: hsl(175, 70%, 90%);
   --background-color-for-toggle-thumb-when-active: hsl(175, 55%, 25%);
   --background-color-for-toggle-track-when-active: hsl(175, 55%, 40%);
-  --background-color-for-toggle-thumb-when-disabled: hsl(232, 18%, 60%);
-  --background-color-for-toggle-track-when-disabled: hsl(232, 18%, 90%);
+  --background-color-for-toggle-thumb-when-disabled: hsl(
+    195,
+    35.2941176471%,
+    60%
+  );
+  --background-color-for-toggle-track-when-disabled: hsl(
+    195,
+    35.2941176471%,
+    90%
+  );
+  --background-color-for-toggle-thumb-when-active-when-disabled: hsl(
+    232,
+    18%,
+    60%
+  );
+  --background-color-for-toggle-track-when-active-when-disabled: hsl(
+    232,
+    18%,
+    90%
+  );
+  --background-color-for-toggle-thumb-when-hovered: rgba(0, 0, 0, 0.1);
   --background-color-for-loading-spinner-track: #213c45;
   --background-color-for-loading-spinner-dot: #213c45;
   --background-color-for-content-notification-when-success: hsl(175, 90%, 95%);
+  --background-color-for-view-switcher-button-when-active: hsl(232, 18%, 95%);
+  --background-color-for-checkbox-input-when-hovered: hsl(232, 18%, 90%);
+  --background-color-for-radio-option-when-hovered: hsl(232, 18%, 90%);
+  --background-color-for-tag: hsl(232, 18%, 95%);
+  --background-color-for-tag-when-hovered: hsl(232, 18%, 90%);
+  --background-color-for-dropdown-when-hovered: hsl(232, 18%, 95%);
+  --background-color-for-dropdown-when-active: hsl(232, 18%, 90%);
+  --background-color-for-dropdown-option-when-active: hsl(
+    203.05555555555554,
+    93.9130434783%,
+    95%
+  );
   --border-color-for-input: hsl(232, 18%, 80%);
   --border-color-for-input-when-focused: hsl(175, 55%, 45%);
   --border-color-for-input-when-disabled: hsl(232, 18%, 80%);
@@ -241,7 +273,11 @@
   --border-color-for-input-when-hovered: hsl(232, 18%, 80%);
   --border-color-for-input-as-quiet: transparent;
   --border-color-for-button-as-secondary: hsl(232, 18%, 80%);
+  --border-color-for-dropdown: hsl(232, 18%, 80%);
   --border-color-for-content-notification-when-success: hsl(175, 70%, 85%);
+  --border-color-for-checkbox-input: hsl(175, 55%, 45%);
+  --border-color-for-checkbox-input-when-active: hsl(175, 55%, 45%);
+  --border-color-for-tag: hsl(232, 18%, 85%);
   --border-radius-for-button-as-big: 4px;
   --border-radius-for-button-as-medium: 4px;
   --border-radius-for-input: 4px;
@@ -265,6 +301,9 @@
   --font-color-for-view-switcher-button: hsl(232, 18%, 40%);
   --font-color-for-stamp-as-positive: hsl(175, 55%, 25%);
   --font-color-for-content-notification-when-success: hsl(175, 55%, 45%);
+  --font-color-for-avatar-as-turquoise: hsl(180, 30%, 45%);
+  --font-color-for-leading-icon-as-turquoise: hsl(180, 30%, 45%);
+  --font-color-for-text-as-positive: hsl(175, 55%, 25%);
   --height-for-button-as-big: 40px;
   --height-for-button-as-medium: 32px;
   --height-for-button-as-small: 16px;

package/materials/custom-properties.json

@@ -1,6 +1,6 @@
 {
   "--color-primary": "hsl(175, 55%, 45%)",
-  "--color-primary-10": "hsl(240, 66%, 19%)",
+  "--color-primary-10": "hsl(175, 55%, 10%)",
   "--color-primary-20": "hsl(175, 55%, 20%)",
   "--color-primary-25": "hsl(175, 55%, 25%)",
   "--color-primary-30": "hsl(175, 55%, 30%)",
@@ -8,6 +8,7 @@
   "--color-primary-85": "hsl(175, 70%, 85%)",
   "--color-primary-90": "hsl(175, 70%, 90%)",
   "--color-primary-95": "hsl(175, 90%, 95%)",
+  "--color-primary-98": "hsl(175, 100%, 99%)",
   "--color-accent": "#213c45",
   "--color-accent-10": "hsl(195, 35.2941176471%, 10%)",
   "--color-accent-20": "hsl(195, 35.2941176471%, 20%)",
@@ -63,7 +64,7 @@
   "--color-warning": "#f16d0e",
   "--color-warning-25": "hsl(25.110132158590307, 89.0196078431%, 25%)",
   "--color-warning-40": "hsl(25.110132158590307, 89.0196078431%, 40%)",
-  "--color-warning-60": "hsl(35, 90%, 55%)",
+  "--color-warning-60": "hsl(25.110132158590307, 90%, 60%)",
   "--color-warning-85": "hsl(25.110132158590307, 89.0196078431%, 85%)",
   "--color-warning-95": "hsl(25.110132158590307, 89.0196078431%, 95%)",
   "--color-error": "#e60050",
@@ -203,11 +204,22 @@
   "--background-color-for-stamp-as-positive": "hsl(175, 70%, 90%)",
   "--background-color-for-toggle-thumb-when-active": "hsl(175, 55%, 25%)",
   "--background-color-for-toggle-track-when-active": "hsl(175, 55%, 40%)",
-  "--background-color-for-toggle-thumb-when-disabled": "hsl(232, 18%, 60%)",
-  "--background-color-for-toggle-track-when-disabled": "hsl(232, 18%, 90%)",
+  "--background-color-for-toggle-thumb-when-disabled": "hsl(195, 35.2941176471%, 60%)",
+  "--background-color-for-toggle-track-when-disabled": "hsl(195, 35.2941176471%, 90%)",
+  "--background-color-for-toggle-thumb-when-active-when-disabled": "hsl(232, 18%, 60%)",
+  "--background-color-for-toggle-track-when-active-when-disabled": "hsl(232, 18%, 90%)",
+  "--background-color-for-toggle-thumb-when-hovered": "rgba(0, 0, 0, 0.1)",
   "--background-color-for-loading-spinner-track": "#213c45",
   "--background-color-for-loading-spinner-dot": "#213c45",
   "--background-color-for-content-notification-when-success": "hsl(175, 90%, 95%)",
+  "--background-color-for-view-switcher-button-when-active": "hsl(232, 18%, 95%)",
+  "--background-color-for-checkbox-input-when-hovered": "hsl(232, 18%, 90%)",
+  "--background-color-for-radio-option-when-hovered": "hsl(232, 18%, 90%)",
+  "--background-color-for-tag": "hsl(232, 18%, 95%)",
+  "--background-color-for-tag-when-hovered": "hsl(232, 18%, 90%)",
+  "--background-color-for-dropdown-when-hovered": "hsl(232, 18%, 95%)",
+  "--background-color-for-dropdown-when-active": "hsl(232, 18%, 90%)",
+  "--background-color-for-dropdown-option-when-active": "hsl(203.05555555555554, 93.9130434783%, 95%)",
   "--border-color-for-input": "hsl(232, 18%, 80%)",
   "--border-color-for-input-when-focused": "hsl(175, 55%, 45%)",
   "--border-color-for-input-when-disabled": "hsl(232, 18%, 80%)",
@@ -217,7 +229,11 @@
   "--border-color-for-input-when-hovered": "hsl(232, 18%, 80%)",
   "--border-color-for-input-as-quiet": "transparent",
   "--border-color-for-button-as-secondary": "hsl(232, 18%, 80%)",
+  "--border-color-for-dropdown": "hsl(232, 18%, 80%)",
   "--border-color-for-content-notification-when-success": "hsl(175, 70%, 85%)",
+  "--border-color-for-checkbox-input": "hsl(175, 55%, 45%)",
+  "--border-color-for-checkbox-input-when-active": "hsl(175, 55%, 45%)",
+  "--border-color-for-tag": "hsl(232, 18%, 85%)",
   "--border-radius-for-button-as-big": "4px",
   "--border-radius-for-button-as-medium": "4px",
   "--border-radius-for-input": "4px",
@@ -237,6 +253,9 @@
   "--font-color-for-view-switcher-button": "hsl(232, 18%, 40%)",
   "--font-color-for-stamp-as-positive": "hsl(175, 55%, 25%)",
   "--font-color-for-content-notification-when-success": "hsl(175, 55%, 45%)",
+  "--font-color-for-avatar-as-turquoise": "hsl(180, 30%, 45%)",
+  "--font-color-for-leading-icon-as-turquoise": "hsl(180, 30%, 45%)",
+  "--font-color-for-text-as-positive": "hsl(175, 55%, 25%)",
   "--height-for-button-as-big": "40px",
   "--height-for-button-as-medium": "32px",
   "--height-for-button-as-small": "16px",

package/materials/custom-properties_default.css

@@ -0,0 +1,322 @@
+/*
+  THIS IS AN AUTOGENERATED FILE. DO NOT EDIT THIS FILE DIRECTLY.
+
+  This file is created by the 'scripts/generate-design-tokens.js' script.
+  The variables should be updated in 'materials/internals/definition.yaml'.
+*/
+
+:root {
+  --color-primary: hsl(175, 55%, 45%);
+  --color-primary-10: hsl(175, 55%, 10%);
+  --color-primary-20: hsl(175, 55%, 20%);
+  --color-primary-25: hsl(175, 55%, 25%);
+  --color-primary-30: hsl(175, 55%, 30%);
+  --color-primary-40: hsl(175, 55%, 40%);
+  --color-primary-85: hsl(175, 70%, 85%);
+  --color-primary-90: hsl(175, 70%, 90%);
+  --color-primary-95: hsl(175, 90%, 95%);
+  --color-primary-98: hsl(175, 100%, 99%);
+  --color-accent: #213c45;
+  --color-accent-10: hsl(195, 35.2941176471%, 10%);
+  --color-accent-20: hsl(195, 35.2941176471%, 20%);
+  --color-accent-30: hsl(195, 35.2941176471%, 30%);
+  --color-accent-40: hsl(195, 35.2941176471%, 40%);
+  --color-accent-50: hsl(195, 35%, 50%);
+  --color-accent-60: hsl(195, 35.2941176471%, 60%);
+  --color-accent-85: hsl(195, 35%, 85%);
+  --color-accent-90: hsl(195, 35.2941176471%, 90%);
+  --color-accent-95: hsl(195, 35.2941176471%, 95%);
+  --color-accent-98: hsl(195, 35.2941176471%, 98%);
+  --color-brown-10: hsl(35, 90%, 10%);
+  --color-brown-20: hsl(35, 50%, 20%);
+  --color-brown-35: hsl(35, 25%, 35%);
+  --color-brown-50: hsl(35, 30%, 50%);
+  --color-brown-70: hsl(35, 40%, 70%);
+  --color-brown-85: hsl(35, 60%, 85%);
+  --color-brown-90: hsl(35, 90%, 90%);
+  --color-brown-95: hsl(35, 80%, 95%);
+  --color-brown-98: hsl(35, 90%, 98%);
+  --color-purple-10: hsl(248, 90%, 10%);
+  --color-purple-20: hsl(248, 50%, 20%);
+  --color-purple-35: hsl(248, 25%, 35%);
+  --color-purple-50: hsl(248, 30%, 50%);
+  --color-purple-70: hsl(248, 40%, 70%);
+  --color-purple-85: hsl(248, 60%, 85%);
+  --color-purple-90: hsl(248, 50%, 90%);
+  --color-purple-95: hsl(248, 80%, 95%);
+  --color-purple-98: hsl(248, 90%, 98%);
+  --color-turquoise-10: hsl(180, 90%, 10%);
+  --color-turquoise-20: hsl(180, 50%, 20%);
+  --color-turquoise-35: hsl(180, 25%, 35%);
+  --color-turquoise-50: hsl(180, 30%, 45%);
+  --color-turquoise-70: hsl(180, 40%, 70%);
+  --color-turquoise-85: hsl(180, 60%, 85%);
+  --color-turquoise-90: hsl(180, 40%, 90%);
+  --color-turquoise-95: hsl(180, 80%, 95%);
+  --color-turquoise-98: hsl(180, 90%, 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-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.05555555555554, 93.9130434783%, 40%);
+  --color-info-85: hsl(203.05555555555554, 93.9130434783%, 85%);
+  --color-info-90: #ceebfd;
+  --color-info-95: hsl(203.05555555555554, 93.9130434783%, 95%);
+  --color-warning: #f16d0e;
+  --color-warning-25: hsl(25.110132158590307, 89.0196078431%, 25%);
+  --color-warning-40: hsl(25.110132158590307, 89.0196078431%, 40%);
+  --color-warning-60: hsl(25.110132158590307, 90%, 60%);
+  --color-warning-85: hsl(25.110132158590307, 89.0196078431%, 85%);
+  --color-warning-95: hsl(25.110132158590307, 89.0196078431%, 95%);
+  --color-error: #e60050;
+  --color-error-25: hsl(339.1304347826087, 100%, 25%);
+  --color-error-40: hsl(339.1304347826087, 100%, 40%);
+  --color-error-85: hsl(339.1304347826087, 100%, 85%);
+  --color-error-95: hsl(339.1304347826087, 100%, 95%);
+  --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%);
+  --border-radius-1: 1px;
+  --border-radius-2: 2px;
+  --border-radius-4: 4px;
+  --border-radius-6: 6px;
+  --border-radius-8: 8px;
+  --border-radius-20: 20px;
+  --border-width-1: 1px;
+  --border-width-2: 2px;
+  --font-family: 'Inter', system-ui;
+  --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;
+  --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;
+  --font-weight-300: 300;
+  --font-weight-400: 400;
+  --font-weight-500: 500;
+  --font-weight-600: 600;
+  --font-weight-700: 700;
+  --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;
+  --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);
+  --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;
+  --spacing-xs: 4px;
+  --spacing-s: 8px;
+  --spacing-m: 16px;
+  --spacing-l: 24px;
+  --spacing-xl: 32px;
+  --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;
+  --transition-linear-80ms: 80ms linear;
+  --transition-easeinout-150ms: 150ms ease-in-out;
+  --transition-standard: 200ms ease;
+  --break-point-mobile: 768px;
+  --break-point-desktop: 1024px;
+  --break-point-biggerdesktop: 1280px;
+  --break-point-giantdesktop: 1680px;
+  --break-point-jumbodesktop: 1920px;
+  --background-color-for-button-when-active: hsl(232, 18%, 95%);
+  --background-color-for-button-when-hovered: hsl(232, 18%, 98%);
+  --background-color-for-button-when-disabled: hsl(195, 35.2941176471%, 95%);
+  --background-color-for-input: #fff;
+  --background-color-for-input-when-selected: hsl(195, 35.2941176471%, 95%);
+  --background-color-for-input-when-disabled: hsl(232, 18%, 95%);
+  --background-color-for-input-when-hovered: hsl(232, 18%, 98%);
+  --background-color-for-input-when-focused: #fff;
+  --background-color-for-input-when-readonly: hsl(232, 18%, 95%);
+  --background-color-for-input-when-active: hsl(
+    203.05555555555554,
+    93.9130434783%,
+    95%
+  );
+  --background-color-for-input-as-quiet: transparent;
+  --background-color-for-input-as-quiet-when-hovered: hsl(0deg 0% 10% / 2%);
+  --background-color-for-localized-input-label: #fff;
+  --background-color-for-localized-input-label-when-readonly: hsl(
+    232,
+    18%,
+    95%
+  );
+  --background-color-for-localized-input-label-when-disabled: hsl(
+    232,
+    18%,
+    95%
+  );
+  --background-color-for-button-as-primary: #15a390;
+  --background-color-for-button-as-primary-when-hovered: hsl(175, 55%, 45%);
+  --background-color-for-button-as-primary-as-default-when-hovered: #17ab97;
+  --background-color-for-button-as-primary-as-default-when-active: #15a390;
+  --background-color-for-button-as-primary-as-urgent: #f16d0e;
+  --background-color-for-stamp-as-primary: hsl(175, 70%, 90%);
+  --background-color-for-stamp-as-positive: hsl(175, 70%, 90%);
+  --background-color-for-toggle-thumb-when-active: hsl(175, 55%, 25%);
+  --background-color-for-toggle-track-when-active: hsl(175, 55%, 40%);
+  --background-color-for-toggle-thumb-when-disabled: hsl(
+    195,
+    35.2941176471%,
+    60%
+  );
+  --background-color-for-toggle-track-when-disabled: hsl(
+    195,
+    35.2941176471%,
+    90%
+  );
+  --background-color-for-toggle-thumb-when-active-when-disabled: hsl(
+    232,
+    18%,
+    60%
+  );
+  --background-color-for-toggle-track-when-active-when-disabled: hsl(
+    232,
+    18%,
+    90%
+  );
+  --background-color-for-toggle-thumb-when-hovered: rgba(0, 0, 0, 0.1);
+  --background-color-for-loading-spinner-track: #213c45;
+  --background-color-for-loading-spinner-dot: #213c45;
+  --background-color-for-content-notification-when-success: hsl(175, 90%, 95%);
+  --background-color-for-view-switcher-button-when-active: hsl(232, 18%, 95%);
+  --background-color-for-checkbox-input-when-hovered: hsl(232, 18%, 90%);
+  --background-color-for-radio-option-when-hovered: hsl(232, 18%, 90%);
+  --background-color-for-tag: hsl(232, 18%, 95%);
+  --background-color-for-tag-when-hovered: hsl(232, 18%, 90%);
+  --background-color-for-dropdown-when-hovered: hsl(232, 18%, 95%);
+  --background-color-for-dropdown-when-active: hsl(232, 18%, 90%);
+  --background-color-for-dropdown-option-when-active: hsl(
+    203.05555555555554,
+    93.9130434783%,
+    95%
+  );
+  --border-color-for-input: hsl(232, 18%, 80%);
+  --border-color-for-input-when-focused: hsl(175, 55%, 45%);
+  --border-color-for-input-when-disabled: hsl(232, 18%, 80%);
+  --border-color-for-input-when-readonly: #fff;
+  --border-color-for-input-when-error: #e60050;
+  --border-color-for-input-when-warning: #f16d0e;
+  --border-color-for-input-when-hovered: hsl(232, 18%, 80%);
+  --border-color-for-input-as-quiet: transparent;
+  --border-color-for-button-as-secondary: hsl(232, 18%, 80%);
+  --border-color-for-dropdown: hsl(232, 18%, 80%);
+  --border-color-for-content-notification-when-success: hsl(175, 70%, 85%);
+  --border-color-for-checkbox-input: hsl(175, 55%, 45%);
+  --border-color-for-checkbox-input-when-active: hsl(175, 55%, 45%);
+  --border-color-for-tag: hsl(232, 18%, 85%);
+  --border-radius-for-button-as-big: 4px;
+  --border-radius-for-button-as-medium: 4px;
+  --border-radius-for-input: 4px;
+  --border-width-for-input: 1px;
+  --border-width-for-input-when-warning: 1px;
+  --border-width-for-input-when-error: 1px;
+  --border-width-for-input-when-focused: 1px;
+  --font-color-for-input: #1a1a1a;
+  --font-color-for-input-when-disabled: hsl(232, 18%, 60%);
+  --font-color-for-input-when-error: #e60050;
+  --font-color-for-input-when-readonly: hsl(232, 18%, 40%);
+  --font-color-for-input-when-warning: #f16d0e;
+  --font-color-for-button-as-secondary: #1a1a1a;
+  --font-color-for-button-as-flat-when-hovered: hsl(175, 55%, 45%);
+  --font-color-for-button-as-flat-as-critical: #e60050;
+  --font-color-for-button-as-flat-as-critical-when-hovered: hsl(
+    339.1304347826087,
+    100%,
+    25%
+  );
+  --font-color-for-view-switcher-button: hsl(232, 18%, 40%);
+  --font-color-for-stamp-as-positive: hsl(175, 55%, 25%);
+  --font-color-for-content-notification-when-success: hsl(175, 55%, 45%);
+  --font-color-for-avatar-as-turquoise: hsl(180, 30%, 45%);
+  --font-color-for-leading-icon-as-turquoise: hsl(180, 30%, 45%);
+  --font-color-for-text-as-positive: hsl(175, 55%, 25%);
+  --height-for-button-as-big: 40px;
+  --height-for-button-as-medium: 32px;
+  --height-for-button-as-small: 16px;
+  --height-for-input: 40px;
+  --height-for-input-as-small: 32px;
+  --placeholder-font-color-for-input: hsl(232, 18%, 60%);
+  --font-size-for-button: 0.875rem;
+  --font-size-for-input: 1rem;
+  --padding-for-input: 0 var(--spacing-30);
+  --padding-for-input-as-quiet: 0 var(--spacing-20);
+  --padding-for-button: 0 var(--spacing-30);
+  --shadow-for-input: none;
+  --shadow-for-input-when-focused: inset 0 0 0 1px var(--color-primary);
+  --shadow-for-input-when-error: inset 0 0 0 1px var(--color-error);
+  --shadow-for-input-when-warning: inset 0 0 0 1px var(--color-warning);
+}

package/materials/custom-properties_recolouring.css

@@ -0,0 +1,310 @@
+/*
+  THIS IS AN AUTOGENERATED FILE. DO NOT EDIT THIS FILE DIRECTLY.
+
+  This file is created by the 'scripts/generate-design-tokens.js' script.
+  The variables should be updated in 'materials/internals/definition.yaml'.
+*/
+
+:root {
+  --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%, 35%);
+  --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%, 35%);
+  --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-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.05555555555554, 93.9130434783%, 40%);
+  --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%);
+  --border-radius-1: 1px;
+  --border-radius-2: 2px;
+  --border-radius-4: 4px;
+  --border-radius-6: 6px;
+  --border-radius-8: 8px;
+  --border-radius-20: 20px;
+  --border-width-1: 1px;
+  --border-width-2: 2px;
+  --font-family: 'Inter', system-ui;
+  --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;
+  --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;
+  --font-weight-300: 300;
+  --font-weight-400: 400;
+  --font-weight-500: 500;
+  --font-weight-600: 600;
+  --font-weight-700: 700;
+  --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;
+  --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);
+  --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;
+  --spacing-xs: 4px;
+  --spacing-s: 8px;
+  --spacing-m: 16px;
+  --spacing-l: 24px;
+  --spacing-xl: 32px;
+  --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;
+  --transition-linear-80ms: 80ms linear;
+  --transition-easeinout-150ms: 150ms ease-in-out;
+  --transition-standard: 200ms ease;
+  --break-point-mobile: 768px;
+  --break-point-desktop: 1024px;
+  --break-point-biggerdesktop: 1280px;
+  --break-point-giantdesktop: 1680px;
+  --break-point-jumbodesktop: 1920px;
+  --background-color-for-button-when-active: hsl(243, 100%, 93%);
+  --background-color-for-button-when-hovered: hsl(244, 100%, 97%);
+  --background-color-for-button-when-disabled: hsl(195, 35.2941176471%, 95%);
+  --background-color-for-input: #fff;
+  --background-color-for-input-when-selected: hsl(244, 100%, 97%);
+  --background-color-for-input-when-disabled: hsl(232, 18%, 95%);
+  --background-color-for-input-when-hovered: hsl(244, 100%, 99%);
+  --background-color-for-input-when-focused: #fff;
+  --background-color-for-input-when-readonly: hsl(232, 18%, 95%);
+  --background-color-for-input-when-active: hsl(244, 100%, 97%);
+  --background-color-for-input-as-quiet: transparent;
+  --background-color-for-input-as-quiet-when-hovered: hsla(240, 64%, 58%, 4%);
+  --background-color-for-localized-input-label: #fff;
+  --background-color-for-localized-input-label-when-readonly: hsl(
+    232,
+    18%,
+    95%
+  );
+  --background-color-for-localized-input-label-when-disabled: hsl(
+    232,
+    18%,
+    95%
+  );
+  --background-color-for-button-as-primary: hsl(240, 64%, 58%);
+  --background-color-for-button-as-primary-when-hovered: hsl(240, 100%, 67%);
+  --background-color-for-button-as-primary-as-default-when-hovered: hsl(
+    240,
+    100%,
+    67%
+  );
+  --background-color-for-button-as-primary-as-default-when-active: hsl(
+    240,
+    46%,
+    48%
+  );
+  --background-color-for-button-as-primary-as-urgent: hsl(35, 90%, 55%);
+  --background-color-for-stamp-as-primary: hsl(244, 100%, 97%);
+  --background-color-for-stamp-as-positive: hsl(141, 76%, 92%);
+  --background-color-for-toggle-thumb-when-active: hsl(240, 100%, 67%);
+  --background-color-for-toggle-track-when-active: hsl(244, 100%, 84%);
+  --background-color-for-toggle-thumb-when-disabled: hsl(232, 18%, 60%);
+  --background-color-for-toggle-track-when-disabled: hsl(232, 18%, 90%);
+  --background-color-for-toggle-thumb-when-active-when-disabled: hsl(
+    244,
+    100%,
+    84%
+  );
+  --background-color-for-toggle-track-when-active-when-disabled: hsl(
+    243,
+    100%,
+    93%
+  );
+  --background-color-for-toggle-thumb-when-hovered: hsla(240, 64%, 58%, 4%);
+  --background-color-for-loading-spinner-track: hsl(243, 100%, 93%);
+  --background-color-for-loading-spinner-dot: hsl(240, 64%, 58%);
+  --background-color-for-content-notification-when-success: hsl(141, 76%, 92%);
+  --background-color-for-view-switcher-button-when-active: hsl(244, 100%, 97%);
+  --background-color-for-checkbox-input-when-hovered: hsl(244, 100%, 97%);
+  --background-color-for-radio-option-when-hovered: hsl(244, 100%, 97%);
+  --background-color-for-tag: hsl(244, 100%, 97%);
+  --background-color-for-tag-when-hovered: hsl(243, 100%, 93%);
+  --background-color-for-dropdown-when-hovered: hsl(244, 100%, 97%);
+  --background-color-for-dropdown-when-active: hsl(243, 100%, 93%);
+  --background-color-for-dropdown-option-when-active: hsl(244, 100%, 97%);
+  --border-color-for-input: hsl(232, 18%, 80%);
+  --border-color-for-input-when-focused: hsl(240, 100%, 67%);
+  --border-color-for-input-when-disabled: hsl(232, 18%, 80%);
+  --border-color-for-input-when-readonly: #fff;
+  --border-color-for-input-when-error: #e60050;
+  --border-color-for-input-when-warning: #f16d0e;
+  --border-color-for-input-when-hovered: hsl(232, 18%, 80%);
+  --border-color-for-input-as-quiet: transparent;
+  --border-color-for-button-as-secondary: hsl(244, 100%, 84%);
+  --border-color-for-dropdown: hsl(244, 100%, 84%);
+  --border-color-for-content-notification-when-success: hsl(144, 69%, 80%);
+  --border-color-for-checkbox-input: hsl(232, 18%, 60%);
+  --border-color-for-checkbox-input-when-active: hsl(240, 64%, 58%);
+  --border-color-for-tag: hsl(243, 100%, 93%);
+  --border-radius-for-button-as-big: 4px;
+  --border-radius-for-button-as-medium: 4px;
+  --border-radius-for-input: 4px;
+  --border-width-for-input: 1px;
+  --border-width-for-input-when-warning: 1px;
+  --border-width-for-input-when-error: 1px;
+  --border-width-for-input-when-focused: 1px;
+  --font-color-for-input: #1a1a1a;
+  --font-color-for-input-when-disabled: hsl(232, 18%, 60%);
+  --font-color-for-input-when-error: hsl(3, 60%, 46%);
+  --font-color-for-input-when-readonly: hsl(232, 18%, 40%);
+  --font-color-for-input-when-warning: #f16d0e;
+  --font-color-for-button-as-secondary: hsl(240, 64%, 58%);
+  --font-color-for-button-as-flat-when-hovered: hsl(240, 100%, 67%);
+  --font-color-for-button-as-flat-as-critical: hsl(3, 60%, 46%);
+  --font-color-for-button-as-flat-as-critical-when-hovered: hsl(3, 65%, 58%);
+  --font-color-for-view-switcher-button: hsl(240, 64%, 58%);
+  --font-color-for-stamp-as-positive: hsl(155, 90%, 24%);
+  --font-color-for-content-notification-when-success: hsl(152, 77%, 39%);
+  --font-color-for-avatar-as-turquoise: hsl(178, 88%, 35%);
+  --font-color-for-leading-icon-as-turquoise: hsl(178, 88%, 35%);
+  --font-color-for-text-as-positive: hsl(155, 90%, 24%);
+  --height-for-button-as-big: 40px;
+  --height-for-button-as-medium: 32px;
+  --height-for-button-as-small: 16px;
+  --height-for-input: 40px;
+  --height-for-input-as-small: 32px;
+  --placeholder-font-color-for-input: hsl(232, 18%, 60%);
+  --font-size-for-button: 0.875rem;
+  --font-size-for-input: 1rem;
+  --padding-for-input: 0 var(--spacing-30);
+  --padding-for-input-as-quiet: 0 var(--spacing-20);
+  --padding-for-button: 0 var(--spacing-30);
+  --shadow-for-input: none;
+  --shadow-for-input-when-focused: inset 0 0 0 1px var(--color-primary);
+  --shadow-for-input-when-error: inset 0 0 0 1px var(--color-error);
+  --shadow-for-input-when-warning: inset 0 0 0 1px var(--color-warning);
+}

package/materials/internals/definition.yaml

@@ -37,7 +37,7 @@ choiceGroupsByTheme:
       description: All colors in the system
       choices:
         color-primary: 'hsl(175, 55%, 45%)'
-        color-primary-10: 'hsl(240, 66%, 19%)' # design token copied from recolouring theme for export
+        color-primary-10: 'hsl(175, 55%, 10%)' # This design token is not used in the default theme; it's included only for export purposes
         color-primary-20: 'hsl(175, 55%, 20%)'
         color-primary-25: 'hsl(175, 55%, 25%)'
         color-primary-30: 'hsl(175, 55%, 30%)'
@@ -45,6 +45,7 @@ choiceGroupsByTheme:
         color-primary-85: 'hsl(175, 70%, 85%)'
         color-primary-90: 'hsl(175, 70%, 90%)'
         color-primary-95: 'hsl(175, 90%, 95%)'
+        color-primary-98: 'hsl(175, 100%, 99%)' # This design token is not used in the default theme; it's included only for export purposes
         color-accent: '#213c45'
         color-accent-10: 'hsl(195, 35.2941176471%, 10%)'
         color-accent-20: 'hsl(195, 35.2941176471%, 20%)'
@@ -100,7 +101,7 @@ choiceGroupsByTheme:
         color-warning: '#f16d0e'
         color-warning-25: 'hsl(25.110132158590307, 89.0196078431%, 25%)'
         color-warning-40: 'hsl(25.110132158590307, 89.0196078431%, 40%)'
-        color-warning-60: 'hsl(35, 90%, 55%)' # design token copied from recolouring theme for export
+        color-warning-60: 'hsl(25.110132158590307, 90%, 60%)' # This design token is not used in the default theme; it's included only for export purposes
         color-warning-85: 'hsl(25.110132158590307, 89.0196078431%, 85%)'
         color-warning-95: 'hsl(25.110132158590307, 89.0196078431%, 95%)'
         color-error: '#e60050'
@@ -114,11 +115,11 @@ choiceGroupsByTheme:
         color-solid-10: 'hsl(0deg 0% 10% / 10%)'
         color-surface: '#fff'
         color-transparent: 'transparent'
-        color-success: 'hsl(152, 77%, 39%)' # design token copied from recolouring theme for export
-        color-success-25: 'hsl(155, 84%, 20%)' # design token copied from recolouring theme for export
-        color-success-40: 'hsl(155, 90%, 24%)' # design token copied from recolouring theme for export
-        color-success-85: 'hsl(144, 69%, 80%)' # design token copied from recolouring theme for export
-        color-success-95: 'hsl(141, 76%, 92%)' # design token copied from recolouring theme for export
+        color-success: 'hsl(152, 77%, 39%)' # Design token copied from recolouring theme
+        color-success-25: 'hsl(155, 84%, 20%)' # Design token copied from recolouring theme
+        color-success-40: 'hsl(155, 90%, 24%)' # Design token copied from recolouring theme
+        color-success-85: 'hsl(144, 69%, 80%)' # Design token copied from recolouring theme
+        color-success-95: 'hsl(141, 76%, 92%)' # Design token copied from recolouring theme
 
     borderRadiuses:
       label: Border Radiuses
@@ -286,6 +287,44 @@ choiceGroupsByTheme:
         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-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%, 35%)'
+        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%, 35%)'
+        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-success: 'hsl(152, 77%, 39%)'
         color-success-25: 'hsl(155, 84%, 20%)'
         color-success-40: 'hsl(155, 90%, 24%)'
@@ -310,6 +349,8 @@ states:
     description: 'When the mouse is over the element'
   disabled:
     description: 'When the element can not be interacted with'
+  active-disabled:
+    description: 'When the element is active but can not be interacted with'
   focused:
     description: 'When the element is currently selected to receive input'
   readonly:
@@ -349,6 +390,8 @@ variants:
     description: 'To differentiate component urgent type'
   positive:
     description: 'To differentiate component positive type'
+  turquoise:
+    description: 'To differentiate component turquoise type'
 
 componentGroups:
   button:
@@ -372,6 +415,22 @@ componentGroups:
     description: 'Loading spinner dot elements'
   content-notification:
     description: 'Content notification elements'
+  avatar:
+    description: 'Avatar elements'
+  leading-icon:
+    description: 'Leading icon elements'
+  checkbox-input:
+    description: 'Checkbox input elements'
+  radio-option:
+    description: 'Radio option elements'
+  tag:
+    description: 'Tag elements'
+  dropdown:
+    description: 'Dropdown elements'
+  dropdown-option:
+    description: 'Dropdown option elements'
+  text:
+    description: 'Text elements'
 
 decisionGroupsByTheme:
   default:
@@ -429,15 +488,39 @@ decisionGroupsByTheme:
         background-color-for-toggle-track-when-active:
           choice: color-primary-40
         background-color-for-toggle-thumb-when-disabled:
-          choice: color-neutral-60
+          choice: color-accent-60
         background-color-for-toggle-track-when-disabled:
+          choice: color-accent-90
+        background-color-for-toggle-thumb-when-active-when-disabled:
+          choice: color-neutral-60
+          deprecated: true
+        background-color-for-toggle-track-when-active-when-disabled:
           choice: color-neutral-90
+          deprecated: true
+        background-color-for-toggle-thumb-when-hovered:
+          choice: 'rgba(0, 0, 0, 0.1)'
         background-color-for-loading-spinner-track:
           choice: color-accent
         background-color-for-loading-spinner-dot:
           choice: color-accent
         background-color-for-content-notification-when-success:
           choice: color-primary-95
+        background-color-for-view-switcher-button-when-active:
+          choice: color-neutral-95
+        background-color-for-checkbox-input-when-hovered:
+          choice: color-neutral-90
+        background-color-for-radio-option-when-hovered:
+          choice: color-neutral-90
+        background-color-for-tag:
+          choice: color-neutral-95
+        background-color-for-tag-when-hovered:
+          choice: color-neutral-90
+        background-color-for-dropdown-when-hovered:
+          choice: color-neutral-95
+        background-color-for-dropdown-when-active:
+          choice: color-neutral-90
+        background-color-for-dropdown-option-when-active:
+          choice: color-info-95
 
     borderColors:
       label: Border Colors
@@ -462,8 +545,16 @@ decisionGroupsByTheme:
         # recolouring rollout
         border-color-for-button-as-secondary:
           choice: color-neutral
+        border-color-for-dropdown:
+          choice: color-neutral
         border-color-for-content-notification-when-success:
           choice: color-primary-85
+        border-color-for-checkbox-input:
+          choice: color-primary
+        border-color-for-checkbox-input-when-active:
+          choice: color-primary
+        border-color-for-tag:
+          choice: color-neutral-85
 
     borderRadiuses:
       label: Border Radius
@@ -518,6 +609,12 @@ decisionGroupsByTheme:
           choice: color-primary-25
         font-color-for-content-notification-when-success:
           choice: color-primary
+        font-color-for-avatar-as-turquoise:
+          choice: color-turquoise-50
+        font-color-for-leading-icon-as-turquoise:
+          choice: color-turquoise-50
+        font-color-for-text-as-positive:
+          choice: color-primary-25
 
     heights:
       label: Height
@@ -584,10 +681,18 @@ decisionGroupsByTheme:
       decisions:
         border-color-for-button-as-secondary:
           choice: color-primary-85
+        border-color-for-dropdown:
+          choice: color-primary-85
         border-color-for-input-when-focused:
           choice: color-primary-40
         border-color-for-content-notification-when-success:
           choice: color-success-85
+        border-color-for-checkbox-input:
+          choice: color-neutral-60
+        border-color-for-checkbox-input-when-active:
+          choice: color-primary
+        border-color-for-tag:
+          choice: color-primary-90
 
     backgroundColors:
       label: Background Colors
@@ -618,15 +723,45 @@ decisionGroupsByTheme:
         background-color-for-toggle-track-when-active:
           choice: color-primary-85
         background-color-for-toggle-thumb-when-disabled:
-          choice: color-primary-85
+          choice: color-neutral-60
         background-color-for-toggle-track-when-disabled:
+          choice: color-neutral-90
+        background-color-for-toggle-thumb-when-active-when-disabled:
+          choice: color-primary-85
+          deprecated: true
+        background-color-for-toggle-track-when-active-when-disabled:
           choice: color-primary-90
+          deprecated: true
+        background-color-for-toggle-thumb-when-hovered:
+          choice: 'hsla(240, 64%, 58%, 4%)'
         background-color-for-loading-spinner-track:
           choice: color-primary-90
         background-color-for-loading-spinner-dot:
           choice: color-primary
         background-color-for-content-notification-when-success:
           choice: color-success-95
+        background-color-for-view-switcher-button-when-active:
+          choice: color-primary-95
+        background-color-for-checkbox-input-when-hovered:
+          choice: color-primary-95
+        background-color-for-radio-option-when-hovered:
+          choice: color-primary-95
+        background-color-for-tag:
+          choice: color-primary-95
+        background-color-for-tag-when-hovered:
+          choice: color-primary-90
+        background-color-for-dropdown-when-hovered:
+          choice: color-primary-95
+        background-color-for-dropdown-when-active:
+          choice: color-primary-90
+        background-color-for-dropdown-option-when-active:
+          choice: color-primary-95
+        background-color-for-input-as-quiet-when-hovered:
+          choice: 'hsla(240, 64%, 58%, 4%)'
+        background-color-for-input-when-active:
+          choice: color-primary-95
+        background-color-for-input-when-hovered:
+          choice: color-primary-98
 
     fontColors:
       label: Font Colors
@@ -648,3 +783,9 @@ decisionGroupsByTheme:
           choice: color-success-40
         font-color-for-content-notification-when-success:
           choice: color-success
+        font-color-for-avatar-as-turquoise:
+          choice: color-turquoise-35
+        font-color-for-leading-icon-as-turquoise:
+          choice: color-turquoise-35
+        font-color-for-text-as-positive:
+          choice: color-success-40

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@commercetools-frontend/ui-kit",
   "description": "A preset of all the UI-Kit components.",
-  "version": "18.3.0",
+  "version": "18.5.0",
   "bugs": "https://github.com/commercetools/ui-kit/issues",
   "repository": {
     "type": "git",
@@ -24,41 +24,41 @@
   "dependencies": {
     "@babel/runtime": "^7.20.13",
     "@babel/runtime-corejs3": "^7.20.13",
-    "@commercetools-uikit/accessible-hidden": "18.3.0",
-    "@commercetools-uikit/avatar": "18.3.0",
-    "@commercetools-uikit/buttons": "18.3.0",
-    "@commercetools-uikit/card": "18.3.0",
-    "@commercetools-uikit/collapsible": "18.3.0",
-    "@commercetools-uikit/collapsible-motion": "18.3.0",
-    "@commercetools-uikit/collapsible-panel": "18.3.0",
-    "@commercetools-uikit/constraints": "18.3.0",
-    "@commercetools-uikit/data-table": "18.3.0",
-    "@commercetools-uikit/data-table-manager": "18.3.0",
-    "@commercetools-uikit/design-system": "18.3.0",
-    "@commercetools-uikit/field-errors": "18.3.0",
-    "@commercetools-uikit/field-label": "18.3.0",
-    "@commercetools-uikit/fields": "18.3.0",
-    "@commercetools-uikit/grid": "18.3.0",
-    "@commercetools-uikit/hooks": "18.3.0",
-    "@commercetools-uikit/i18n": "18.3.0",
-    "@commercetools-uikit/icons": "18.3.0",
-    "@commercetools-uikit/inputs": "18.3.0",
-    "@commercetools-uikit/label": "18.3.0",
-    "@commercetools-uikit/link": "18.3.0",
-    "@commercetools-uikit/loading-spinner": "18.3.0",
-    "@commercetools-uikit/messages": "18.3.0",
-    "@commercetools-uikit/notifications": "18.3.0",
-    "@commercetools-uikit/pagination": "18.3.0",
-    "@commercetools-uikit/primary-action-dropdown": "18.3.0",
-    "@commercetools-uikit/progress-bar": "18.3.0",
-    "@commercetools-uikit/selectable-search-input": "18.3.0",
-    "@commercetools-uikit/spacings": "18.3.0",
-    "@commercetools-uikit/stamp": "18.3.0",
-    "@commercetools-uikit/tag": "18.3.0",
-    "@commercetools-uikit/text": "18.3.0",
-    "@commercetools-uikit/tooltip": "18.3.0",
-    "@commercetools-uikit/utils": "18.3.0",
-    "@commercetools-uikit/view-switcher": "18.3.0"
+    "@commercetools-uikit/accessible-hidden": "18.5.0",
+    "@commercetools-uikit/avatar": "18.5.0",
+    "@commercetools-uikit/buttons": "18.5.0",
+    "@commercetools-uikit/card": "18.5.0",
+    "@commercetools-uikit/collapsible": "18.5.0",
+    "@commercetools-uikit/collapsible-motion": "18.5.0",
+    "@commercetools-uikit/collapsible-panel": "18.5.0",
+    "@commercetools-uikit/constraints": "18.5.0",
+    "@commercetools-uikit/data-table": "18.5.0",
+    "@commercetools-uikit/data-table-manager": "18.5.0",
+    "@commercetools-uikit/design-system": "18.5.0",
+    "@commercetools-uikit/field-errors": "18.5.0",
+    "@commercetools-uikit/field-label": "18.5.0",
+    "@commercetools-uikit/fields": "18.5.0",
+    "@commercetools-uikit/grid": "18.5.0",
+    "@commercetools-uikit/hooks": "18.5.0",
+    "@commercetools-uikit/i18n": "18.5.0",
+    "@commercetools-uikit/icons": "18.5.0",
+    "@commercetools-uikit/inputs": "18.5.0",
+    "@commercetools-uikit/label": "18.5.0",
+    "@commercetools-uikit/link": "18.5.0",
+    "@commercetools-uikit/loading-spinner": "18.5.0",
+    "@commercetools-uikit/messages": "18.5.0",
+    "@commercetools-uikit/notifications": "18.5.0",
+    "@commercetools-uikit/pagination": "18.5.0",
+    "@commercetools-uikit/primary-action-dropdown": "18.5.0",
+    "@commercetools-uikit/progress-bar": "18.5.0",
+    "@commercetools-uikit/selectable-search-input": "18.5.0",
+    "@commercetools-uikit/spacings": "18.5.0",
+    "@commercetools-uikit/stamp": "18.5.0",
+    "@commercetools-uikit/tag": "18.5.0",
+    "@commercetools-uikit/text": "18.5.0",
+    "@commercetools-uikit/tooltip": "18.5.0",
+    "@commercetools-uikit/utils": "18.5.0",
+    "@commercetools-uikit/view-switcher": "18.5.0"
   },
   "devDependencies": {
     "moment": "2.30.1",