@commercetools-frontend/ui-kit 19.1.0 → 19.2.0

package/materials/custom-properties_default.css

@@ -6,54 +6,54 @@
 */
 
 :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-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, 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-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, 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-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%);
@@ -69,17 +69,17 @@
   --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-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%);
@@ -193,27 +193,10 @@
   --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-icon-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-input-when-hovered: hsl(244, 100%, 99%);
   --background-color-for-localized-input-label: #fff;
   --background-color-for-localized-input-label-when-readonly: hsl(
     232,
@@ -225,102 +208,29 @@
     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%
-  );
+  --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(232, 18%, 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-error: hsl(3, 65%, 58%);
+  --border-color-for-input-when-warning: hsl(35, 90%, 45%);
   --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-color-for-input-when-focused: hsl(240, 100%, 67%);
+  --border-color-for-button-as-secondary: hsl(244, 100%, 84%);
   --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-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: #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%);
+  --font-color-for-input-when-warning: hsl(35, 90%, 45%);
+  --font-color-for-button-as-secondary: hsl(240, 64%, 58%);
   --height-for-button-as-big: 40px;
-  --height-for-button-as-medium: 32px;
   --height-for-button-as-small: 16px;
+  --height-for-button-as-medium: 32px;
   --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);

package/materials/custom-properties_recolouring.css

@@ -193,19 +193,10 @@
   --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-icon-button-when-disabled: transparent;
   --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-input-when-hovered: hsl(244, 100%, 99%);
   --background-color-for-localized-input-label: #fff;
   --background-color-for-localized-input-label-when-readonly: hsl(
     232,
@@ -217,94 +208,29 @@
     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%);
+  --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(232, 18%, 95%);
   --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-error: hsl(3, 65%, 58%);
+  --border-color-for-input-when-warning: hsl(35, 90%, 45%);
   --border-color-for-input-when-hovered: hsl(232, 18%, 80%);
-  --border-color-for-input-as-quiet: transparent;
+  --border-color-for-input-when-focused: hsl(240, 100%, 67%);
   --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-input-when-warning: hsl(35, 90%, 45%);
   --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-button-as-medium: 32px;
   --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);