💅 recolouring (#2720)

* refactor: secondary buttom, icon button * refactor: flat button * refactor: link * refactor: primary button, urgent, critical * fix: icon button border when active * refactor: design review * refactor: view switcher * refactor: all inputs * refactor: error message, select menu item * refactor: support success color in icons * refactor: stamp * test: add success icon vrts * refactor: toggle * refactor: loading spinner * chore: content notification * fix: stamp, icon story * fix: toggle input * refactor: cleanup * chore: changeset * refactor: code review improvements * chore: add new success color to default theme * chore: add all the new tokens to default theme
commercetools · Feb 21, 2024 · 5518760 · 5518760
1 parent a414fb5
commit 5518760
Show file tree

Hide file tree

Showing 165 changed files with 1,321 additions and 344 deletions.
diff --git a/.changeset/proud-goats-play.md b/.changeset/proud-goats-play.md
@@ -0,0 +1,20 @@
+---
+'@commercetools-uikit/secondary-button': minor
+'@commercetools-uikit/primary-button': minor
+'@commercetools-uikit/rich-text-utils': minor
+'@commercetools-uikit/checkbox-input': minor
+'@commercetools-uikit/flat-button': minor
+'@commercetools-uikit/icon-button': minor
+'@commercetools-uikit/toggle-input': minor
+'@commercetools-uikit/loading-spinner': minor
+'@commercetools-uikit/notifications': minor
+'@commercetools-uikit/view-switcher': minor
+'@commercetools-uikit/icons': minor
+'@commercetools-uikit/stamp': minor
+'@commercetools-uikit/link': minor
+'@commercetools-uikit/text': minor
+'visual-testing-app': minor
+'@commercetools-uikit/design-system': minor
+---
+
+Implement updated color scheme across all UI-kit components
diff --git a/design-system/materials/custom-properties.css b/design-system/materials/custom-properties.css
@@ -7,6 +7,7 @@
 
 :root {
   --color-primary: hsl(175, 55%, 45%);
+  --color-primary-10: hsl(240, 66%, 19%);
   --color-primary-20: hsl(175, 55%, 20%);
   --color-primary-25: hsl(175, 55%, 25%);
   --color-primary-30: hsl(175, 55%, 30%);
@@ -69,6 +70,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-85: hsl(25.110132158590307, 89.0196078431%, 85%);
   --color-warning-95: hsl(25.110132158590307, 89.0196078431%, 95%);
   --color-error: #e60050;
@@ -82,6 +84,11 @@
   --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;
@@ -211,6 +218,20 @@
     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(232, 18%, 60%);
+  --background-color-for-toggle-track-when-disabled: hsl(232, 18%, 90%);
+  --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%);
   --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%);
@@ -219,6 +240,8 @@
   --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-content-notification-when-success: hsl(175, 70%, 85%);
   --border-radius-for-button-as-big: 4px;
   --border-radius-for-button-as-medium: 4px;
   --border-radius-for-input: 4px;
@@ -231,6 +254,17 @@
   --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%);
   --height-for-button-as-big: 40px;
   --height-for-button-as-medium: 32px;
   --height-for-button-as-small: 16px;

diff --git a/design-system/materials/custom-properties.json b/design-system/materials/custom-properties.json
@@ -1,5 +1,6 @@
 {
   "--color-primary": "hsl(175, 55%, 45%)",
+  "--color-primary-10": "hsl(240, 66%, 19%)",
   "--color-primary-20": "hsl(175, 55%, 20%)",
   "--color-primary-25": "hsl(175, 55%, 25%)",
   "--color-primary-30": "hsl(175, 55%, 30%)",
@@ -62,6 +63,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-85": "hsl(25.110132158590307, 89.0196078431%, 85%)",
   "--color-warning-95": "hsl(25.110132158590307, 89.0196078431%, 95%)",
   "--color-error": "#e60050",
@@ -75,6 +77,11 @@
   "--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",
@@ -187,6 +194,20 @@
   "--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(232, 18%, 60%)",
+  "--background-color-for-toggle-track-when-disabled": "hsl(232, 18%, 90%)",
+  "--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%)",
   "--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%)",
@@ -195,6 +216,8 @@
   "--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-content-notification-when-success": "hsl(175, 70%, 85%)",
   "--border-radius-for-button-as-big": "4px",
   "--border-radius-for-button-as-medium": "4px",
   "--border-radius-for-input": "4px",
@@ -207,6 +230,13 @@
   "--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%)",
   "--height-for-button-as-big": "40px",
   "--height-for-button-as-medium": "32px",
   "--height-for-button-as-small": "16px",

diff --git a/design-system/materials/internals/definition.yaml b/design-system/materials/internals/definition.yaml
@@ -37,6 +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-20: 'hsl(175, 55%, 20%)'
         color-primary-25: 'hsl(175, 55%, 25%)'
         color-primary-30: 'hsl(175, 55%, 30%)'
@@ -99,6 +100,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-85: 'hsl(25.110132158590307, 89.0196078431%, 85%)'
         color-warning-95: 'hsl(25.110132158590307, 89.0196078431%, 95%)'
         color-error: '#e60050'
@@ -112,6 +114,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
 
     borderRadiuses:
       label: Border Radiuses
@@ -327,6 +334,21 @@ variants:
     description: 'To differentiate component big size'
   quiet:
     description: 'When the element is quiet style'
+  # recolouring rollout
+  secondary:
+    description: 'To differentiate component secondary type'
+  primary:
+    description: 'To differentiate component primary type'
+  flat:
+    description: 'To differentiate component flat type'
+  default:
+    description: 'To differentiate component default type'
+  critical:
+    description: 'To differentiate component critical type'
+  urgent:
+    description: 'To differentiate component urgent type'
+  positive:
+    description: 'To differentiate component positive type'
 
 componentGroups:
   button:
@@ -335,6 +357,21 @@ componentGroups:
     description: 'Input elements'
   localized-input-label:
     description: 'Localized multiline text input label elements'
+  # recolouring rollout
+  view-switcher-button:
+    description: 'Viewswitcher Button elements'
+  stamp:
+    description: 'Stamp elements'
+  toggle-track:
+    description: 'Toggle track elements'
+  toggle-thumb:
+    description: 'Toggle thumb elements'
+  loading-spinner-track:
+    description: 'Loading spinner track elements'
+  loading-spinner-dot:
+    description: 'Loading spinner dot elements'
+  content-notification:
+    description: 'Content notification elements'
 
 decisionGroupsByTheme:
   default:
@@ -372,6 +409,35 @@ decisionGroupsByTheme:
           choice: color-neutral-95
         background-color-for-localized-input-label-when-disabled:
           choice: color-neutral-95
+        # recolouring rollout
+        background-color-for-button-as-primary:
+          choice: '#15a390'
+        background-color-for-button-as-primary-when-hovered:
+          choice: color-primary
+        background-color-for-button-as-primary-as-default-when-hovered:
+          choice: '#17ab97'
+        background-color-for-button-as-primary-as-default-when-active:
+          choice: '#15a390'
+        background-color-for-button-as-primary-as-urgent:
+          choice: color-warning
+        background-color-for-stamp-as-primary:
+          choice: color-primary-90
+        background-color-for-stamp-as-positive:
+          choice: color-primary-90
+        background-color-for-toggle-thumb-when-active:
+          choice: color-primary-25
+        background-color-for-toggle-track-when-active:
+          choice: color-primary-40
+        background-color-for-toggle-thumb-when-disabled:
+          choice: color-neutral-60
+        background-color-for-toggle-track-when-disabled:
+          choice: color-neutral-90
+        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
 
     borderColors:
       label: Border Colors
@@ -393,6 +459,11 @@ decisionGroupsByTheme:
           choice: color-neutral
         border-color-for-input-as-quiet:
           choice: color-transparent
+        # recolouring rollout
+        border-color-for-button-as-secondary:
+          choice: color-neutral
+        border-color-for-content-notification-when-success:
+          choice: color-primary-85
 
     borderRadiuses:
       label: Border Radius
@@ -432,6 +503,21 @@ decisionGroupsByTheme:
           choice: color-neutral-40
         font-color-for-input-when-warning:
           choice: color-warning
+        # recolouring rollout
+        font-color-for-button-as-secondary:
+          choice: color-solid
+        font-color-for-button-as-flat-when-hovered:
+          choice: color-primary
+        font-color-for-button-as-flat-as-critical:
+          choice: color-error
+        font-color-for-button-as-flat-as-critical-when-hovered:
+          choice: color-error-25
+        font-color-for-view-switcher-button:
+          choice: color-neutral-40
+        font-color-for-stamp-as-positive:
+          choice: color-primary-25
+        font-color-for-content-notification-when-success:
+          choice: color-primary
 
     heights:
       label: Height
@@ -490,3 +576,75 @@ decisionGroupsByTheme:
           choice: 'inset 0 0 0 1px var(--color-error)'
         shadow-for-input-when-warning:
           choice: 'inset 0 0 0 1px var(--color-warning)'
+
+  recolouring:
+    borderColors:
+      label: Border Colors
+      prefix: border-color
+      decisions:
+        border-color-for-button-as-secondary:
+          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
+
+    backgroundColors:
+      label: Background Colors
+      prefix: background-color
+      decisions:
+        background-color-for-button-when-active:
+          choice: color-primary-90
+        background-color-for-button-when-hovered:
+          choice: color-primary-95
+        background-color-for-button-as-primary:
+          choice: color-primary
+        background-color-for-button-as-primary-when-hovered:
+          choice: color-primary-40
+        background-color-for-button-as-primary-as-default-when-hovered:
+          choice: color-primary-40
+        background-color-for-button-as-primary-as-default-when-active:
+          choice: color-primary-25
+        background-color-for-button-as-primary-as-urgent:
+          choice: color-warning-60
+        background-color-for-input-when-selected:
+          choice: color-primary-95
+        background-color-for-stamp-as-primary:
+          choice: color-primary-95
+        background-color-for-stamp-as-positive:
+          choice: color-success-95
+        background-color-for-toggle-thumb-when-active:
+          choice: color-primary-40
+        background-color-for-toggle-track-when-active:
+          choice: color-primary-85
+        background-color-for-toggle-thumb-when-disabled:
+          choice: color-primary-85
+        background-color-for-toggle-track-when-disabled:
+          choice: color-primary-90
+        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
+
+    fontColors:
+      label: Font Colors
+      prefix: font-color
+      decisions:
+        font-color-for-button-as-secondary:
+          choice: color-primary
+        font-color-for-button-as-flat-when-hovered:
+          choice: color-primary-40
+        font-color-for-button-as-flat-as-critical:
+          choice: color-error-40
+        font-color-for-button-as-flat-as-critical-when-hovered:
+          choice: color-error
+        font-color-for-view-switcher-button:
+          choice: color-primary
+        font-color-for-input-when-error:
+          choice: color-error-40
+        font-color-for-stamp-as-positive:
+          choice: color-success-40
+        font-color-for-content-notification-when-success:
+          choice: color-success