From 96dbded975ad3abde9366998c87d613ab1f17546 Mon Sep 17 00:00:00 2001 From: Kacper Krzywiec <49066275+kark@users.noreply.github.com> Date: Mon, 18 Mar 2024 08:33:48 +0100 Subject: [PATCH] Recolouring follow-up (#2742) * 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 --- .changeset/breezy-pans-build.md | 17 ++ design-system/materials/custom-properties.css | 47 +++++- .../materials/custom-properties.json | 27 ++- .../materials/custom-properties_default.css | 47 +++++- .../custom-properties_recolouring.css | 111 +++++++----- .../materials/internals/definition.yaml | 159 +++++++++++++++++- .../scripts/generate-design-tokens.js | 2 +- design-system/src/design-tokens.ts | 134 +++++++++++++-- .../components/avatar/src/avatar.styles.ts | 11 +- .../data-table/src/data-table.styles.tsx | 2 +- .../src/leading-icon/leading-icon.styles.ts | 2 +- .../checkbox-input/src/checkbox-input.tsx | 16 +- .../src/checkbox-input.visualroute.jsx | 2 +- .../radio-input/src/radio-option.styles.ts | 2 +- .../select-utils/src/create-select-styles.ts | 3 +- .../toggle-input/src/toggle-input.styles.ts | 14 +- .../src/primary-action-dropdown.tsx | 134 +++++++++------ .../progress-bar/src/progress-bar.styles.tsx | 30 +++- .../progress-bar/src/progress-bar.tsx | 4 +- packages/components/tag/src/tag-body.tsx | 2 +- packages/components/tag/src/tag.tsx | 8 +- packages/components/text/src/text.styles.ts | 2 +- .../view-switcher/src/view-switcher.styles.ts | 2 +- 23 files changed, 610 insertions(+), 168 deletions(-) create mode 100644 .changeset/breezy-pans-build.md diff --git a/.changeset/breezy-pans-build.md b/.changeset/breezy-pans-build.md new file mode 100644 index 0000000000..5b4236e0ea --- /dev/null +++ b/.changeset/breezy-pans-build.md @@ -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. diff --git a/design-system/materials/custom-properties.css b/design-system/materials/custom-properties.css index 952b48c2bf..e8b1c1ff01 100644 --- a/design-system/materials/custom-properties.css +++ b/design-system/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; diff --git a/design-system/materials/custom-properties.json b/design-system/materials/custom-properties.json index 6ea64319ce..05dbd0d367 100644 --- a/design-system/materials/custom-properties.json +++ b/design-system/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", diff --git a/design-system/materials/custom-properties_default.css b/design-system/materials/custom-properties_default.css index 952b48c2bf..e8b1c1ff01 100644 --- a/design-system/materials/custom-properties_default.css +++ b/design-system/materials/custom-properties_default.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; diff --git a/design-system/materials/custom-properties_recolouring.css b/design-system/materials/custom-properties_recolouring.css index 777f25c6ae..d01be1041e 100644 --- a/design-system/materials/custom-properties_recolouring.css +++ b/design-system/materials/custom-properties_recolouring.css @@ -15,44 +15,45 @@ --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%); @@ -197,16 +198,12 @@ --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(232, 18%, 98%); + --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( - 203.05555555555554, - 93.9130434783%, - 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: hsl(0deg 0% 10% / 2%); + --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, @@ -235,11 +232,30 @@ --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(244, 100%, 84%); - --background-color-for-toggle-track-when-disabled: hsl(243, 100%, 93%); + --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%); @@ -249,7 +265,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(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; @@ -269,6 +289,9 @@ --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; diff --git a/design-system/materials/internals/definition.yaml b/design-system/materials/internals/definition.yaml index 3996328db6..dea50dd621 100644 --- a/design-system/materials/internals/definition.yaml +++ b/design-system/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 diff --git a/design-system/scripts/generate-design-tokens.js b/design-system/scripts/generate-design-tokens.js index 47000badef..e1775b8613 100644 --- a/design-system/scripts/generate-design-tokens.js +++ b/design-system/scripts/generate-design-tokens.js @@ -22,7 +22,7 @@ const endProgram = (message) => { }; const ALLOWED_KEYWORDS_VALUES_IN_CHOICES = - /px|none|inherit|hsl|var|unset|center|(#[A-Za-z0-9]{6})/; + /px|none|inherit|var|unset|center|(#[A-Za-z0-9]{6})|((rgba|hsl).{1,})/; const isAllowedCssChoice = (choice) => choice.match(ALLOWED_KEYWORDS_VALUES_IN_CHOICES) !== null; diff --git a/design-system/src/design-tokens.ts b/design-system/src/design-tokens.ts index 3750707a21..6978b289e3 100644 --- a/design-system/src/design-tokens.ts +++ b/design-system/src/design-tokens.ts @@ -6,7 +6,7 @@ export const themes = { default: { colorPrimary: 'hsl(175, 55%, 45%)', - colorPrimary10: 'hsl(240, 66%, 19%)', + colorPrimary10: 'hsl(175, 55%, 10%)', colorPrimary20: 'hsl(175, 55%, 20%)', colorPrimary25: 'hsl(175, 55%, 25%)', colorPrimary30: 'hsl(175, 55%, 30%)', @@ -14,6 +14,7 @@ export const themes = { colorPrimary85: 'hsl(175, 70%, 85%)', colorPrimary90: 'hsl(175, 70%, 90%)', colorPrimary95: 'hsl(175, 90%, 95%)', + colorPrimary98: 'hsl(175, 100%, 99%)', colorAccent: '#213c45', colorAccent10: 'hsl(195, 35.2941176471%, 10%)', colorAccent20: 'hsl(195, 35.2941176471%, 20%)', @@ -69,7 +70,7 @@ export const themes = { colorWarning: '#f16d0e', colorWarning25: 'hsl(25.110132158590307, 89.0196078431%, 25%)', colorWarning40: 'hsl(25.110132158590307, 89.0196078431%, 40%)', - colorWarning60: 'hsl(35, 90%, 55%)', + colorWarning60: 'hsl(25.110132158590307, 90%, 60%)', colorWarning85: 'hsl(25.110132158590307, 89.0196078431%, 85%)', colorWarning95: 'hsl(25.110132158590307, 89.0196078431%, 95%)', colorError: '#e60050', @@ -215,11 +216,23 @@ export const themes = { backgroundColorForStampAsPositive: 'hsl(175, 70%, 90%)', backgroundColorForToggleThumbWhenActive: 'hsl(175, 55%, 25%)', backgroundColorForToggleTrackWhenActive: 'hsl(175, 55%, 40%)', - backgroundColorForToggleThumbWhenDisabled: 'hsl(232, 18%, 60%)', - backgroundColorForToggleTrackWhenDisabled: 'hsl(232, 18%, 90%)', + backgroundColorForToggleThumbWhenDisabled: 'hsl(195, 35.2941176471%, 60%)', + backgroundColorForToggleTrackWhenDisabled: 'hsl(195, 35.2941176471%, 90%)', + backgroundColorForToggleThumbWhenActiveWhenDisabled: 'hsl(232, 18%, 60%)', + backgroundColorForToggleTrackWhenActiveWhenDisabled: 'hsl(232, 18%, 90%)', + backgroundColorForToggleThumbWhenHovered: 'rgba(0, 0, 0, 0.1)', backgroundColorForLoadingSpinnerTrack: '#213c45', backgroundColorForLoadingSpinnerDot: '#213c45', backgroundColorForContentNotificationWhenSuccess: 'hsl(175, 90%, 95%)', + backgroundColorForViewSwitcherButtonWhenActive: 'hsl(232, 18%, 95%)', + backgroundColorForCheckboxInputWhenHovered: 'hsl(232, 18%, 90%)', + backgroundColorForRadioOptionWhenHovered: 'hsl(232, 18%, 90%)', + backgroundColorForTag: 'hsl(232, 18%, 95%)', + backgroundColorForTagWhenHovered: 'hsl(232, 18%, 90%)', + backgroundColorForDropdownWhenHovered: 'hsl(232, 18%, 95%)', + backgroundColorForDropdownWhenActive: 'hsl(232, 18%, 90%)', + backgroundColorForDropdownOptionWhenActive: + 'hsl(203.05555555555554, 93.9130434783%, 95%)', borderColorForInput: 'hsl(232, 18%, 80%)', borderColorForInputWhenFocused: 'hsl(175, 55%, 45%)', borderColorForInputWhenDisabled: 'hsl(232, 18%, 80%)', @@ -229,7 +242,11 @@ export const themes = { borderColorForInputWhenHovered: 'hsl(232, 18%, 80%)', borderColorForInputAsQuiet: 'transparent', borderColorForButtonAsSecondary: 'hsl(232, 18%, 80%)', + borderColorForDropdown: 'hsl(232, 18%, 80%)', borderColorForContentNotificationWhenSuccess: 'hsl(175, 70%, 85%)', + borderColorForCheckboxInput: 'hsl(175, 55%, 45%)', + borderColorForCheckboxInputWhenActive: 'hsl(175, 55%, 45%)', + borderColorForTag: 'hsl(232, 18%, 85%)', borderRadiusForButtonAsBig: '4px', borderRadiusForButtonAsMedium: '4px', borderRadiusForInput: '4px', @@ -250,6 +267,9 @@ export const themes = { fontColorForViewSwitcherButton: 'hsl(232, 18%, 40%)', fontColorForStampAsPositive: 'hsl(175, 55%, 25%)', fontColorForContentNotificationWhenSuccess: 'hsl(175, 55%, 45%)', + fontColorForAvatarAsTurquoise: 'hsl(180, 30%, 45%)', + fontColorForLeadingIconAsTurquoise: 'hsl(180, 30%, 45%)', + fontColorForTextAsPositive: 'hsl(175, 55%, 25%)', heightForButtonAsBig: '40px', heightForButtonAsMedium: '32px', heightForButtonAsSmall: '16px', @@ -276,6 +296,44 @@ export const themes = { colorPrimary85: 'hsl(244, 100%, 84%)', colorPrimary90: 'hsl(243, 100%, 93%)', colorPrimary95: 'hsl(244, 100%, 97%)', + colorPrimary98: 'hsl(244, 100%, 99%)', + colorAccent10: 'hsl(195, 100%, 10%)', + colorAccent20: 'hsl(195, 80%, 20%)', + colorAccent30: 'hsl(195, 70%, 30%)', + colorAccent40: 'hsl(195, 70%, 40%)', + colorAccent50: 'hsl(195, 70%, 50%)', + colorAccent60: 'hsl(195, 70%, 60%)', + colorAccent85: 'hsl(195, 85%, 85%)', + colorAccent90: 'hsl(195, 90%, 90%)', + colorAccent95: 'hsl(195, 95%, 95%)', + colorAccent98: 'hsl(195, 100%, 98%)', + colorBrown10: 'hsl(41, 100%, 10%)', + colorBrown20: 'hsl(41, 100%, 20%)', + colorBrown35: 'hsl(41, 96%, 35%)', + colorBrown50: 'hsl(41, 95%, 44%)', + colorBrown70: 'hsl(47, 95%, 70%)', + colorBrown85: 'hsl(47, 100%, 85%)', + colorBrown90: 'hsl(47, 100%, 90%)', + colorBrown95: 'hsl(47, 100%, 95%)', + colorBrown98: 'hsl(48, 100%, 97%)', + colorPurple10: 'hsl(248, 88%, 10%)', + colorPurple20: 'hsl(248, 50%, 20%)', + colorPurple35: 'hsl(248, 25%, 35%)', + colorPurple50: 'hsl(248, 64%, 58%)', + colorPurple70: 'hsl(248, 80%, 70%)', + colorPurple85: 'hsl(249, 100%, 85%)', + colorPurple90: 'hsl(248, 100%, 90%)', + colorPurple95: 'hsl(248, 100%, 95%)', + colorPurple98: 'hsl(246, 100%, 98%)', + colorTurquoise10: 'hsl(180, 88%, 10%)', + colorTurquoise20: 'hsl(180, 90%, 20%)', + colorTurquoise35: 'hsl(178, 88%, 35%)', + colorTurquoise50: 'hsl(178, 67%, 50%)', + colorTurquoise70: 'hsl(180, 75%, 70%)', + colorTurquoise85: 'hsl(180, 90%, 85%)', + colorTurquoise90: 'hsl(180, 88%, 90%)', + colorTurquoise95: 'hsl(180, 88%, 95%)', + colorTurquoise98: 'hsl(180, 100%, 98%)', colorSuccess: 'hsl(152, 77%, 39%)', colorSuccess25: 'hsl(155, 84%, 20%)', colorSuccess40: 'hsl(155, 90%, 24%)', @@ -293,8 +351,12 @@ export const themes = { colorError85: 'hsl(1, 55%, 74%)', colorError95: 'hsl(349, 66%, 92%)', borderColorForButtonAsSecondary: 'hsl(244, 100%, 84%)', + borderColorForDropdown: 'hsl(244, 100%, 84%)', borderColorForInputWhenFocused: 'hsl(240, 100%, 67%)', borderColorForContentNotificationWhenSuccess: 'hsl(144, 69%, 80%)', + borderColorForCheckboxInput: 'hsl(232, 18%, 60%)', + borderColorForCheckboxInputWhenActive: 'hsl(240, 64%, 58%)', + borderColorForTag: 'hsl(243, 100%, 93%)', backgroundColorForButtonWhenActive: 'hsl(243, 100%, 93%)', backgroundColorForButtonWhenHovered: 'hsl(244, 100%, 97%)', backgroundColorForButtonAsPrimary: 'hsl(240, 64%, 58%)', @@ -308,11 +370,25 @@ export const themes = { backgroundColorForStampAsPositive: 'hsl(141, 76%, 92%)', backgroundColorForToggleThumbWhenActive: 'hsl(240, 100%, 67%)', backgroundColorForToggleTrackWhenActive: 'hsl(244, 100%, 84%)', - backgroundColorForToggleThumbWhenDisabled: 'hsl(244, 100%, 84%)', - backgroundColorForToggleTrackWhenDisabled: 'hsl(243, 100%, 93%)', + backgroundColorForToggleThumbWhenDisabled: 'hsl(232, 18%, 60%)', + backgroundColorForToggleTrackWhenDisabled: 'hsl(232, 18%, 90%)', + backgroundColorForToggleThumbWhenActiveWhenDisabled: 'hsl(244, 100%, 84%)', + backgroundColorForToggleTrackWhenActiveWhenDisabled: 'hsl(243, 100%, 93%)', + backgroundColorForToggleThumbWhenHovered: 'hsla(240, 64%, 58%, 4%)', backgroundColorForLoadingSpinnerTrack: 'hsl(243, 100%, 93%)', backgroundColorForLoadingSpinnerDot: 'hsl(240, 64%, 58%)', backgroundColorForContentNotificationWhenSuccess: 'hsl(141, 76%, 92%)', + backgroundColorForViewSwitcherButtonWhenActive: 'hsl(244, 100%, 97%)', + backgroundColorForCheckboxInputWhenHovered: 'hsl(244, 100%, 97%)', + backgroundColorForRadioOptionWhenHovered: 'hsl(244, 100%, 97%)', + backgroundColorForTag: 'hsl(244, 100%, 97%)', + backgroundColorForTagWhenHovered: 'hsl(243, 100%, 93%)', + backgroundColorForDropdownWhenHovered: 'hsl(244, 100%, 97%)', + backgroundColorForDropdownWhenActive: 'hsl(243, 100%, 93%)', + backgroundColorForDropdownOptionWhenActive: 'hsl(244, 100%, 97%)', + backgroundColorForInputAsQuietWhenHovered: 'hsla(240, 64%, 58%, 4%)', + backgroundColorForInputWhenActive: 'hsl(244, 100%, 97%)', + backgroundColorForInputWhenHovered: 'hsl(244, 100%, 99%)', fontColorForButtonAsSecondary: 'hsl(240, 64%, 58%)', fontColorForButtonAsFlatWhenHovered: 'hsl(240, 100%, 67%)', fontColorForButtonAsFlatAsCritical: 'hsl(3, 60%, 46%)', @@ -321,12 +397,15 @@ export const themes = { fontColorForInputWhenError: 'hsl(3, 60%, 46%)', fontColorForStampAsPositive: 'hsl(155, 90%, 24%)', fontColorForContentNotificationWhenSuccess: 'hsl(152, 77%, 39%)', + fontColorForAvatarAsTurquoise: 'hsl(178, 88%, 35%)', + fontColorForLeadingIconAsTurquoise: 'hsl(178, 88%, 35%)', + fontColorForTextAsPositive: 'hsl(155, 90%, 24%)', }, } as const; const designTokens = { colorPrimary: 'var(--color-primary, hsl(175, 55%, 45%))', - colorPrimary10: 'var(--color-primary-10, hsl(240, 66%, 19%))', + colorPrimary10: 'var(--color-primary-10, hsl(175, 55%, 10%))', colorPrimary20: 'var(--color-primary-20, hsl(175, 55%, 20%))', colorPrimary25: 'var(--color-primary-25, hsl(175, 55%, 25%))', colorPrimary30: 'var(--color-primary-30, hsl(175, 55%, 30%))', @@ -334,6 +413,7 @@ const designTokens = { colorPrimary85: 'var(--color-primary-85, hsl(175, 70%, 85%))', colorPrimary90: 'var(--color-primary-90, hsl(175, 70%, 90%))', colorPrimary95: 'var(--color-primary-95, hsl(175, 90%, 95%))', + colorPrimary98: 'var(--color-primary-98, hsl(175, 100%, 99%))', colorAccent: 'var(--color-accent, #213c45)', colorAccent10: 'var(--color-accent-10, hsl(195, 35.2941176471%, 10%))', colorAccent20: 'var(--color-accent-20, hsl(195, 35.2941176471%, 20%))', @@ -394,7 +474,7 @@ const designTokens = { 'var(--color-warning-25, hsl(25.110132158590307, 89.0196078431%, 25%))', colorWarning40: 'var(--color-warning-40, hsl(25.110132158590307, 89.0196078431%, 40%))', - colorWarning60: 'var(--color-warning-60, hsl(35, 90%, 55%))', + colorWarning60: 'var(--color-warning-60, hsl(25.110132158590307, 90%, 60%))', colorWarning85: 'var(--color-warning-85, hsl(25.110132158590307, 89.0196078431%, 85%))', colorWarning95: @@ -572,15 +652,36 @@ const designTokens = { backgroundColorForToggleTrackWhenActive: 'var(--background-color-for-toggle-track-when-active, hsl(175, 55%, 40%))', backgroundColorForToggleThumbWhenDisabled: - 'var(--background-color-for-toggle-thumb-when-disabled, hsl(232, 18%, 60%))', + 'var(--background-color-for-toggle-thumb-when-disabled, hsl(195, 35.2941176471%, 60%))', backgroundColorForToggleTrackWhenDisabled: - 'var(--background-color-for-toggle-track-when-disabled, hsl(232, 18%, 90%))', + 'var(--background-color-for-toggle-track-when-disabled, hsl(195, 35.2941176471%, 90%))', + backgroundColorForToggleThumbWhenActiveWhenDisabled: + 'var(--background-color-for-toggle-thumb-when-active-when-disabled, hsl(232, 18%, 60%))', + backgroundColorForToggleTrackWhenActiveWhenDisabled: + 'var(--background-color-for-toggle-track-when-active-when-disabled, hsl(232, 18%, 90%))', + backgroundColorForToggleThumbWhenHovered: + 'var(--background-color-for-toggle-thumb-when-hovered, rgba(0, 0, 0, 0.1))', backgroundColorForLoadingSpinnerTrack: 'var(--background-color-for-loading-spinner-track, #213c45)', backgroundColorForLoadingSpinnerDot: 'var(--background-color-for-loading-spinner-dot, #213c45)', backgroundColorForContentNotificationWhenSuccess: 'var(--background-color-for-content-notification-when-success, hsl(175, 90%, 95%))', + backgroundColorForViewSwitcherButtonWhenActive: + 'var(--background-color-for-view-switcher-button-when-active, hsl(232, 18%, 95%))', + backgroundColorForCheckboxInputWhenHovered: + 'var(--background-color-for-checkbox-input-when-hovered, hsl(232, 18%, 90%))', + backgroundColorForRadioOptionWhenHovered: + 'var(--background-color-for-radio-option-when-hovered, hsl(232, 18%, 90%))', + backgroundColorForTag: 'var(--background-color-for-tag, hsl(232, 18%, 95%))', + backgroundColorForTagWhenHovered: + 'var(--background-color-for-tag-when-hovered, hsl(232, 18%, 90%))', + backgroundColorForDropdownWhenHovered: + 'var(--background-color-for-dropdown-when-hovered, hsl(232, 18%, 95%))', + backgroundColorForDropdownWhenActive: + 'var(--background-color-for-dropdown-when-active, hsl(232, 18%, 90%))', + backgroundColorForDropdownOptionWhenActive: + 'var(--background-color-for-dropdown-option-when-active, hsl(203.05555555555554, 93.9130434783%, 95%))', borderColorForInput: 'var(--border-color-for-input, hsl(232, 18%, 80%))', borderColorForInputWhenFocused: 'var(--border-color-for-input-when-focused, hsl(175, 55%, 45%))', @@ -598,8 +699,15 @@ const designTokens = { 'var(--border-color-for-input-as-quiet, transparent)', borderColorForButtonAsSecondary: 'var(--border-color-for-button-as-secondary, hsl(232, 18%, 80%))', + borderColorForDropdown: + 'var(--border-color-for-dropdown, hsl(232, 18%, 80%))', borderColorForContentNotificationWhenSuccess: 'var(--border-color-for-content-notification-when-success, hsl(175, 70%, 85%))', + borderColorForCheckboxInput: + 'var(--border-color-for-checkbox-input, hsl(175, 55%, 45%))', + borderColorForCheckboxInputWhenActive: + 'var(--border-color-for-checkbox-input-when-active, hsl(175, 55%, 45%))', + borderColorForTag: 'var(--border-color-for-tag, hsl(232, 18%, 85%))', borderRadiusForButtonAsBig: 'var(--border-radius-for-button-as-big, 4px)', borderRadiusForButtonAsMedium: 'var(--border-radius-for-button-as-medium, 4px)', @@ -632,6 +740,12 @@ const designTokens = { 'var(--font-color-for-stamp-as-positive, hsl(175, 55%, 25%))', fontColorForContentNotificationWhenSuccess: 'var(--font-color-for-content-notification-when-success, hsl(175, 55%, 45%))', + fontColorForAvatarAsTurquoise: + 'var(--font-color-for-avatar-as-turquoise, hsl(180, 30%, 45%))', + fontColorForLeadingIconAsTurquoise: + 'var(--font-color-for-leading-icon-as-turquoise, hsl(180, 30%, 45%))', + fontColorForTextAsPositive: + 'var(--font-color-for-text-as-positive, hsl(175, 55%, 25%))', heightForButtonAsBig: 'var(--height-for-button-as-big, 40px)', heightForButtonAsMedium: 'var(--height-for-button-as-medium, 32px)', heightForButtonAsSmall: 'var(--height-for-button-as-small, 16px)', diff --git a/packages/components/avatar/src/avatar.styles.ts b/packages/components/avatar/src/avatar.styles.ts index b4464d8321..a94e3a25ee 100644 --- a/packages/components/avatar/src/avatar.styles.ts +++ b/packages/components/avatar/src/avatar.styles.ts @@ -60,11 +60,16 @@ export const getBackgroundColor = ( ) => colorsMap[avatarColor][isHighlighted ? 'highlighted' : 'normal']; export const getForegroundColor = (avatarColor: TAvatarProps['color']) => { - return avatarColor === 'accent' - ? designTokens.colorAccent40 - : designTokens[ + switch (avatarColor) { + case 'accent': + return designTokens.colorAccent40; + case 'turquoise': + return designTokens.fontColorForAvatarAsTurquoise; + default: + return designTokens[ `color${startCase(avatarColor)}50` as keyof typeof designTokens ]; + } }; export const getAvatarStyles = (avatarProps: TAvatarProps) => { diff --git a/packages/components/data-table/src/data-table.styles.tsx b/packages/components/data-table/src/data-table.styles.tsx index dde7b24669..5488f5af26 100644 --- a/packages/components/data-table/src/data-table.styles.tsx +++ b/packages/components/data-table/src/data-table.styles.tsx @@ -15,7 +15,7 @@ const getClickableRowStyle = (props: TGetClickableRowStyleProps) => { return css` cursor: pointer; &:hover td { - background: ${designTokens.colorNeutral98}; + background: ${designTokens.backgroundColorForInputWhenHovered}; } `; } diff --git a/packages/components/icons/src/leading-icon/leading-icon.styles.ts b/packages/components/icons/src/leading-icon/leading-icon.styles.ts index 4eb0910923..226aa12e8f 100644 --- a/packages/components/icons/src/leading-icon/leading-icon.styles.ts +++ b/packages/components/icons/src/leading-icon/leading-icon.styles.ts @@ -70,7 +70,7 @@ const colorThemeMap = { turquoise: { light: { background: designTokens.colorTurquoise90, - fill: designTokens.colorTurquoise50, + fill: designTokens.fontColorForLeadingIconAsTurquoise, }, dark: { background: designTokens.colorTurquoise50, diff --git a/packages/components/inputs/checkbox-input/src/checkbox-input.tsx b/packages/components/inputs/checkbox-input/src/checkbox-input.tsx index 3f7d70be75..54a4d7f07d 100644 --- a/packages/components/inputs/checkbox-input/src/checkbox-input.tsx +++ b/packages/components/inputs/checkbox-input/src/checkbox-input.tsx @@ -1,7 +1,7 @@ import type { ChangeEventHandler, ReactNode } from 'react'; import styled from '@emotion/styled'; import { css } from '@emotion/react'; -import { designTokens } from '@commercetools-uikit/design-system'; +import { designTokens, useTheme } from '@commercetools-uikit/design-system'; import { createSequentialId } from '@commercetools-uikit/utils'; import { IndeterminateIcon, CheckedIcon } from './icons'; import Checkbox from './checkbox'; @@ -78,7 +78,7 @@ const defaultProps: Pick< hasError: false, }; -const getBorderColor = (props: TLabelProps) => { +const getBorderColor = (props: TLabelProps, isRecolouringTheme: boolean) => { if (props.hasError) { return designTokens.colorError; } @@ -88,7 +88,10 @@ const getBorderColor = (props: TLabelProps) => { if (props.isReadOnly) { return designTokens.colorNeutral60; } - return designTokens.colorPrimary; + if ((props.isChecked || props.isIndeterminate) && isRecolouringTheme) { + return designTokens.borderColorForCheckboxInputWhenActive; + } + return designTokens.borderColorForCheckboxInput; }; const getBackgroundColor = (props: TLabelProps) => { @@ -148,12 +151,13 @@ const CheckboxIconWrapper = styled.div` ${(props) => props.isHovered ? css` - background-color: ${designTokens.colorNeutral90}; + background-color: ${designTokens.backgroundColorForCheckboxInputWhenHovered}; ` : ''} `; const CheckboxIcon = (props: TLabelProps) => { + const { isRecolouringTheme } = useTheme(); const isDisabledOrReadOnlyState = props.isDisabled || props.isReadOnly; const canForcedHoverEffect = Boolean( props.isHovered && !isDisabledOrReadOnlyState @@ -169,7 +173,7 @@ const CheckboxIcon = (props: TLabelProps) => { css` border-width: ${designTokens.borderWidth2}; border-radius: ${designTokens.borderRadius2}; - border-color: ${getBorderColor(props)}; + border-color: ${getBorderColor(props, isRecolouringTheme)}; border-style: solid; background-color: ${getBackgroundColor(props)}; padding: 1px; @@ -215,7 +219,7 @@ const Label = styled.label` background-color: ${(props) => props.isDisabled || props.isReadOnly ? 'unset' - : designTokens.colorNeutral90}; + : designTokens.backgroundColorForCheckboxInputWhenHovered}; } `; diff --git a/packages/components/inputs/checkbox-input/src/checkbox-input.visualroute.jsx b/packages/components/inputs/checkbox-input/src/checkbox-input.visualroute.jsx index 0fac1c027a..d531408072 100644 --- a/packages/components/inputs/checkbox-input/src/checkbox-input.visualroute.jsx +++ b/packages/components/inputs/checkbox-input/src/checkbox-input.visualroute.jsx @@ -15,7 +15,7 @@ export const component = () => ( I want pizza - + {}} value="value" isIndeterminate={true}> I want kale pizza diff --git a/packages/components/inputs/radio-input/src/radio-option.styles.ts b/packages/components/inputs/radio-input/src/radio-option.styles.ts index b016b06cb4..1b05aa8025 100644 --- a/packages/components/inputs/radio-input/src/radio-option.styles.ts +++ b/packages/components/inputs/radio-input/src/radio-option.styles.ts @@ -132,7 +132,7 @@ const RadioOptionContainer = styled.div` const getHoverStyles = (props: TStylesProps) => { const hoverStyles = css` ${RadioOptionContainer} { - border-color: ${designTokens.colorNeutral90}; + border-color: ${designTokens.backgroundColorForRadioOptionWhenHovered}; } `; diff --git a/packages/components/inputs/select-utils/src/create-select-styles.ts b/packages/components/inputs/select-utils/src/create-select-styles.ts index 4567dab2e9..a847678a36 100644 --- a/packages/components/inputs/select-utils/src/create-select-styles.ts +++ b/packages/components/inputs/select-utils/src/create-select-styles.ts @@ -313,7 +313,8 @@ const optionStyles = () => (base: TBase, state: TState) => { backgroundColor: (() => { if (state.isSelected) return designTokens.backgroundColorForInputWhenSelected; - if (state.isFocused) return designTokens.colorNeutral98; + if (state.isFocused) + return designTokens.backgroundColorForInputWhenHovered; return base.backgroundColor; })(), diff --git a/packages/components/inputs/toggle-input/src/toggle-input.styles.ts b/packages/components/inputs/toggle-input/src/toggle-input.styles.ts index 55e46d5587..5a018c0184 100644 --- a/packages/components/inputs/toggle-input/src/toggle-input.styles.ts +++ b/packages/components/inputs/toggle-input/src/toggle-input.styles.ts @@ -151,11 +151,11 @@ const getInputStyles = (props: TToggleInputProps & SizesProps) => css` /* when disabled */ &:disabled { & + span::before { - background: ${designTokens.colorAccent90}; + background: ${designTokens.backgroundColorForToggleTrackWhenDisabled}; box-shadow: none; } & + span::after { - background: ${designTokens.colorAccent60}; + background: ${designTokens.backgroundColorForToggleThumbWhenDisabled}; box-shadow: 0px 1px 5px rgba(0, 0, 0, 0.2); } } @@ -163,19 +163,19 @@ const getInputStyles = (props: TToggleInputProps & SizesProps) => css` /* when disabled and checked */ &:disabled&:checked { & + span::before { - background: ${designTokens.backgroundColorForToggleTrackWhenDisabled}; + background: ${designTokens.backgroundColorForToggleTrackWhenActiveWhenDisabled}; } & + span::after { - background: ${designTokens.backgroundColorForToggleThumbWhenDisabled}; + background: ${designTokens.backgroundColorForToggleThumbWhenActiveWhenDisabled}; } } :not(:disabled)&:hover + span::after, :not(:disabled)&:focus + span::after { box-shadow: none; - outline: ${`${ - props.thumbSizes[props.size].hoverAreaWidth - } solid rgba(0, 0, 0, 0.1)`} + outline: ${props.thumbSizes[props.size].hoverAreaWidth} solid + ${designTokens.backgroundColorForToggleThumbWhenHovered}; + } `; export { Label, Span, trackSizes, thumbSizes, getInputStyles }; diff --git a/packages/components/primary-action-dropdown/src/primary-action-dropdown.tsx b/packages/components/primary-action-dropdown/src/primary-action-dropdown.tsx index acc2c4e978..c2dc71887d 100644 --- a/packages/components/primary-action-dropdown/src/primary-action-dropdown.tsx +++ b/packages/components/primary-action-dropdown/src/primary-action-dropdown.tsx @@ -14,7 +14,7 @@ import { import { css } from '@emotion/react'; import styled from '@emotion/styled'; import AccessibleButton from '@commercetools-uikit/accessible-button'; -import { designTokens } from '@commercetools-uikit/design-system'; +import { designTokens, useTheme } from '@commercetools-uikit/design-system'; import Text from '@commercetools-uikit/text'; import { warning } from '@commercetools-uikit/utils'; import { CaretUpIcon, CaretDownIcon } from '@commercetools-uikit/icons'; @@ -41,14 +41,14 @@ const getButtonStyles = (isDisabled: boolean) => { css` background-color: ${designTokens.colorSurface}; box-shadow: ${designTokens.shadow0}; - border: ${`1px solid ${designTokens.colorNeutral}`}; + border: 1px solid ${designTokens.borderColorForDropdown}; &:hover { box-shadow: ${designTokens.shadow0}; - background-color: ${designTokens.colorNeutral95}; + background-color: ${designTokens.backgroundColorForDropdownWhenHovered}; } &:active { box-shadow: ${designTokens.shadow0}; - background-color: ${designTokens.colorNeutral90}; + background-color: ${designTokens.backgroundColorForDropdownWhenActive}; } `, ]; @@ -64,55 +64,67 @@ type TDropdownHead = { chevron: ReactElement; }; -const DropdownHead = (props: TDropdownHead) => ( -
- { + const { themedValue } = useTheme(); + return ( +
- - {cloneElement(props.iconLeft, { - size: 'big', - color: props.isDisabled ? 'neutral60' : 'solid', - })} - - - - {props.children} - - - - {props.chevron} -
-); + + {cloneElement(props.iconLeft, { + size: 'big', + color: props.isDisabled + ? 'neutral60' + : themedValue('solid', 'primary'), + })} + + div { + color: ${designTokens.fontColorForButtonAsSecondary} !important; + } + `} + `} + > + + {props.children} + + + + {props.chevron} +
+ ); +}; DropdownHead.displayName = 'DropdownHead'; @@ -135,7 +147,9 @@ const DropdownChevron = forwardRef( padding: 0 ${designTokens.spacing20}; border-radius: 0 ${designTokens.borderRadius4} ${designTokens.borderRadius4} 0; - border-color: ${designTokens.colorNeutral}; + border-color: ${props.isDisabled + ? designTokens.colorNeutral + : designTokens.borderColorForDropdown}; border-width: 1px 1px 1px 0px; border-style: solid; `, @@ -173,7 +187,7 @@ const DropdownChevron = forwardRef( DropdownChevron.displayName = 'DropdownChevron'; -const Options = styled.div` +const Options = styled.div<{ isRecolouringTheme: boolean }>` position: absolute; z-index: 5; width: 100%; @@ -189,8 +203,15 @@ const Options = styled.div` padding-left: ${designTokens.spacing30}; white-space: normal; &:active { - background-color: ${designTokens.colorInfo95}; + background-color: ${designTokens.backgroundColorForDropdownOptionWhenActive}; } + ${(props) => + props.isRecolouringTheme && + css` + &:hover { + background-color: ${designTokens.colorPrimary98}; + } + `} } `; @@ -228,6 +249,7 @@ const PrimaryActionDropdown = (props: TPrimaryActionDropdown) => { }, [ref, toggle] ); + const { isRecolouringTheme } = useTheme(); useEffect(() => { window.addEventListener('click', handleGlobalClick); return () => { @@ -289,7 +311,9 @@ const PrimaryActionDropdown = (props: TPrimaryActionDropdown) => { {primaryOption.props.children} {isOpen && !primaryOption.props.isDisabled && ( - {childrenAsArray} + + {childrenAsArray} + )} ); diff --git a/packages/components/progress-bar/src/progress-bar.styles.tsx b/packages/components/progress-bar/src/progress-bar.styles.tsx index f9d9b994c1..a918099d5c 100644 --- a/packages/components/progress-bar/src/progress-bar.styles.tsx +++ b/packages/components/progress-bar/src/progress-bar.styles.tsx @@ -1,5 +1,8 @@ import { css, keyframes } from '@emotion/react'; -import { designTokens } from '@commercetools-uikit/design-system'; +import { + designTokens, + type TUseThemeResult, +} from '@commercetools-uikit/design-system'; import Constraints from '@commercetools-uikit/constraints'; import { defaultProps, type TProgressBarProps } from './progress-bar'; @@ -36,19 +39,30 @@ export const getBackgroundBarStyles = (props: TProgressBarProps) => css` overflow: hidden; `; -export const getForegroundBarStyles = (props: TProgressBarProps) => css` +export const getForegroundBarStyles = ( + props: TProgressBarProps, + themedValue: TUseThemeResult['themedValue'] +) => css` width: ${props.progress}%; transition: width 500ms ease-in-out; display: block; height: ${heightPerScale[props.height ?? defaultProps.height!]}; background: ${props.isInverted ? designTokens.colorSurface - : `linear-gradient( - to right, - #00E5CB, - ${designTokens.colorPrimary25}, - #00E5CB - )`}; + : themedValue( + `linear-gradient( + to right, + #00E5CB, + ${designTokens.colorPrimary25}, + #00E5CB + )`, + `linear-gradient( + to right, + ${designTokens.colorPrimary85}, + ${designTokens.colorPrimary}, + ${designTokens.colorPrimary85} + )` + )}; background-size: 200% 100%; animation: ${props.isAnimated && !props.isInverted ? css` diff --git a/packages/components/progress-bar/src/progress-bar.tsx b/packages/components/progress-bar/src/progress-bar.tsx index e60a3c711a..d2cb33fe7b 100644 --- a/packages/components/progress-bar/src/progress-bar.tsx +++ b/packages/components/progress-bar/src/progress-bar.tsx @@ -1,4 +1,5 @@ import type { ReactElement, ReactNode } from 'react'; +import { useTheme } from '@commercetools-uikit/design-system'; import { FormattedMessage, type MessageDescriptor } from 'react-intl'; import { filterAriaAttributes } from '@commercetools-uikit/utils'; import Constraints from '@commercetools-uikit/constraints'; @@ -98,6 +99,7 @@ const Bar = ( 'progress' | 'height' | 'barWidth' | 'isInverted' | 'isAnimated' > ) => { + const { themedValue } = useTheme(); return (
-
+
); diff --git a/packages/components/tag/src/tag-body.tsx b/packages/components/tag/src/tag-body.tsx index ce10864746..f33f33c903 100644 --- a/packages/components/tag/src/tag-body.tsx +++ b/packages/components/tag/src/tag-body.tsx @@ -64,7 +64,7 @@ const getContentWrapperStyles = (props: TTagBodyProps) => { border-width: 1px; border-color: ${props.type === 'warning' ? designTokens.colorWarning - : designTokens.colorNeutral}; + : designTokens.borderColorForTag}; color: ${designTokens.colorSolid}; fill: ${designTokens.colorNeutral40}; diff --git a/packages/components/tag/src/tag.tsx b/packages/components/tag/src/tag.tsx index a5de1fd04c..73c39cce24 100644 --- a/packages/components/tag/src/tag.tsx +++ b/packages/components/tag/src/tag.tsx @@ -93,14 +93,14 @@ const Tag = (props: TTagProps) => { display: flex; background-color: ${props.type === 'warning' ? designTokens.colorWarning95 - : designTokens.colorNeutral95}; + : designTokens.backgroundColorForTag}; ${props.onClick && `&:hover { background-color: ${ props.type === 'warning' ? designTokens.colorWarning95 - : designTokens.colorNeutral90 + : designTokens.backgroundColorForTagWhenHovered }; }`} `} @@ -126,7 +126,7 @@ const Tag = (props: TTagProps) => { css` border-color: ${props.type === 'warning' ? designTokens.colorWarning - : designTokens.colorNeutral}; + : designTokens.borderColorForTag}; padding: 0 ${designTokens.spacing25}; border-radius: 0 ${designTokens.borderRadius2} ${designTokens.borderRadius2} 0; @@ -139,7 +139,7 @@ const Tag = (props: TTagProps) => { :not(:disabled)&:focus { border-color: ${props.type === 'warning' ? designTokens.colorWarning - : designTokens.colorNeutral}; + : designTokens.borderColorForTag}; fill: ${designTokens.colorError}; } diff --git a/packages/components/text/src/text.styles.ts b/packages/components/text/src/text.styles.ts index e5e4304869..a7bcfc62fa 100644 --- a/packages/components/text/src/text.styles.ts +++ b/packages/components/text/src/text.styles.ts @@ -43,7 +43,7 @@ const getTone = (tone: string) => { case 'secondary': return `color: ${designTokens.colorNeutral40};`; case 'positive': - return `color: ${designTokens.colorPrimary25};`; + return `color: ${designTokens.fontColorForTextAsPositive};`; case 'primary': return `color: ${designTokens.colorPrimary30};`; case 'negative': diff --git a/packages/components/view-switcher/src/view-switcher.styles.ts b/packages/components/view-switcher/src/view-switcher.styles.ts index e701250e4f..aa4c3faae9 100644 --- a/packages/components/view-switcher/src/view-switcher.styles.ts +++ b/packages/components/view-switcher/src/view-switcher.styles.ts @@ -70,7 +70,7 @@ export const getButtonStyles = ( `, isActive && css` - background-color: ${designTokens.backgroundColorForButtonWhenActive}; + background-color: ${designTokens.backgroundColorForViewSwitcherButtonWhenActive}; box-shadow: ${designTokens.shadow0}; `, ];