Skip to content

Commit

Permalink
Recolouring follow-up (#2742)
Browse files Browse the repository at this point in the history 
* refactor: code review improvements

* refactor: improvements

* refactor: improvements

* chore: changeset

* refactor: additional requirement about positive text

* refactor: cleanup

* refactor: cleanup

* refactor: code review improvements

* fix: wrong token values

* refactor: specific token for primary action button

* chore: use fallback design tokens in the default theme from the same color palette
  • Loading branch information
@kark
kark authored Mar 18, 2024
1 parent 739baa5 commit 96dbded
Show file tree
Hide file tree
Showing 23 changed files with 610 additions and 168 deletions.
17 changes: 17 additions & 0 deletions .changeset/breezy-pans-build.md
View file
Original file line number Diff line number Diff line change
@@ -0,0 +1,17 @@
---
'@commercetools-uikit/primary-action-dropdown': minor
'@commercetools-uikit/checkbox-input': minor
'@commercetools-uikit/select-utils': minor
'@commercetools-uikit/toggle-input': minor
'@commercetools-uikit/radio-input': minor
'@commercetools-uikit/view-switcher': minor
'@commercetools-uikit/progress-bar': minor
'@commercetools-uikit/data-table': minor
'@commercetools-uikit/avatar': minor
'@commercetools-uikit/icons': minor
'@commercetools-uikit/text': minor
'@commercetools-uikit/tag': minor
'@commercetools-uikit/design-system': minor
---

Styling adjustments related to the upcoming new colours schema.
47 changes: 43 additions & 4 deletions design-system/materials/custom-properties.css
View file
Original file line number Diff line number Diff line change
Expand Up @@ -7,14 +7,15 @@

: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%);
--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%);
Expand Down Expand Up @@ -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;
Expand Down Expand Up @@ -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%);
Expand All @@ -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;
Expand All @@ -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;
Expand Down
27 changes: 23 additions & 4 deletions design-system/materials/custom-properties.json
View file
Original file line number Diff line number Diff line change
@@ -1,13 +1,14 @@
{
"--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%)",
"--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%)",
Expand Down Expand Up @@ -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",
Expand Down Expand Up @@ -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%)",
Expand All @@ -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",
Expand All @@ -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",
Expand Down
47 changes: 43 additions & 4 deletions design-system/materials/custom-properties_default.css
View file
Original file line number Diff line number Diff line change
Expand Up @@ -7,14 +7,15 @@

: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%);
--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%);
Expand Down Expand Up @@ -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;
Expand Down Expand Up @@ -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%);
Expand All @@ -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;
Expand All @@ -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;
Expand Down
Loading

0 comments on commit 96dbded

Please sign in to comment.