diff --git a/.changeset/many-mirrors-pull.md b/.changeset/many-mirrors-pull.md new file mode 100644 index 0000000000..6b428f8cf7 --- /dev/null +++ b/.changeset/many-mirrors-pull.md @@ -0,0 +1,102 @@ +--- +'@commercetools-uikit/localized-multiline-text-field': minor +'@commercetools-uikit/localized-multiline-text-input': minor +'@commercetools-uikit/async-creatable-select-field': minor +'@commercetools-uikit/async-creatable-select-input': minor +'@commercetools-uikit/localized-rich-text-input': minor +'@commercetools-uikit/selectable-search-input': minor +'@commercetools-uikit/spacings-inset-squish': minor +'@commercetools-uikit/secondary-icon-button': minor +'@commercetools-uikit/creatable-select-field': minor +'@commercetools-uikit/creatable-select-input': minor +'@commercetools-uikit/localized-money-input': minor +'@commercetools-uikit/localized-text-field': minor +'@commercetools-uikit/multiline-text-field': minor +'@commercetools-uikit/localized-text-input': minor +'@commercetools-uikit/multiline-text-input': minor +'@commercetools-uikit/search-select-field': minor +'@commercetools-uikit/search-select-input': minor +'@commercetools-uikit/accessible-button': minor +'@commercetools-uikit/async-select-field': minor +'@commercetools-uikit/async-select-input': minor +'@commercetools-uikit/secondary-button': minor +'@commercetools-uikit/search-text-input': minor +'@commercetools-uikit/spacings-inline': minor +'@commercetools-uikit/dropdown-menu': minor +'@commercetools-uikit/date-range-field': minor +'@commercetools-uikit/date-range-input': minor +'@commercetools-uikit/primary-action-dropdown': minor +'@commercetools-uikit/spacings-inset': minor +'@commercetools-uikit/spacings-stack': minor +'@commercetools-uikit/primary-button': minor +'@commercetools-uikit/date-time-field': minor +'@commercetools-uikit/date-time-input': minor +'@commercetools-uikit/rich-text-input': minor +'@commercetools-uikit/rich-text-utils': minor +'@commercetools-uikit/password-field': minor +'@commercetools-uikit/checkbox-input': minor +'@commercetools-uikit/password-input': minor +'@commercetools-uikit/flat-button': minor +'@commercetools-uikit/icon-button': minor +'@commercetools-uikit/link-button': minor +'@commercetools-uikit/number-field': minor +'@commercetools-uikit/select-field': minor +'@commercetools-uikit/number-input': minor +'@commercetools-uikit/select-input': minor +'@commercetools-uikit/select-utils': minor +'@commercetools-uikit/toggle-input': minor +'@commercetools-uikit/collapsible-motion': minor +'@commercetools-uikit/data-table-manager': minor +'@commercetools-uikit/money-field': minor +'@commercetools-uikit/radio-field': minor +'@commercetools-uikit/input-utils': minor +'@commercetools-uikit/money-input': minor +'@commercetools-uikit/radio-input': minor +'@commercetools-uikit/accessible-hidden': minor +'@commercetools-uikit/collapsible-panel': minor +'@commercetools-uikit/date-field': minor +'@commercetools-uikit/text-field': minor +'@commercetools-uikit/time-field': minor +'@commercetools-uikit/date-input': minor +'@commercetools-uikit/text-input': minor +'@commercetools-uikit/time-input': minor +'@commercetools-uikit/loading-spinner': minor +'@commercetools-uikit/field-warnings': minor +'@commercetools-uikit/notifications': minor +'@commercetools-uikit/view-switcher': minor +'@commercetools-uikit/field-errors': minor +'@commercetools-uikit/progress-bar': minor +'@commercetools-uikit/collapsible': minor +'@commercetools-uikit/constraints': minor +'@commercetools-uikit/field-label': minor +'@commercetools-uikit/data-table': minor +'@commercetools-uikit/pagination': minor +'@commercetools-uikit/calendar-time-utils': minor +'@commercetools-uikit/messages': minor +'@commercetools-uikit/tooltip': minor +'@commercetools-uikit/avatar': minor +'@commercetools-uikit/icons': minor +'@commercetools-uikit/label': minor +'@commercetools-uikit/stamp': minor +'@commercetools-uikit/card': minor +'@commercetools-uikit/grid': minor +'@commercetools-uikit/link': minor +'@commercetools-uikit/text': minor +'@commercetools-uikit/localized-utils': minor +'@commercetools-local/generator-package-json': minor +'@commercetools-uikit/calendar-utils': minor +'@commercetools-uikit/tag': minor +'visual-testing-app': minor +'@commercetools-local/generator-readme': minor +'@commercetools-uikit/spacings': minor +'@commercetools-uikit/buttons': minor +'@commercetools-uikit/hooks': minor +'@commercetools-uikit/utils': minor +'@commercetools-uikit/fields': minor +'@commercetools-uikit/inputs': minor +'@commercetools-frontend/ui-kit': minor +'@commercetools-uikit/design-system': minor +'@commercetools-uikit/i18n': minor +--- + +Remove unused old theme and token reference diff --git a/design-system/materials/custom-properties.css b/design-system/materials/custom-properties.css index 0a8966736d..e4e38a0415 100644 --- a/design-system/materials/custom-properties.css +++ b/design-system/materials/custom-properties.css @@ -6,54 +6,54 @@ */ :root { - --color-primary: hsl(175, 55%, 45%); - --color-primary-10: hsl(175, 55%, 10%); - --color-primary-20: hsl(175, 55%, 20%); - --color-primary-25: hsl(175, 55%, 25%); - --color-primary-30: hsl(175, 55%, 30%); - --color-primary-40: hsl(175, 55%, 40%); - --color-primary-85: hsl(175, 70%, 85%); - --color-primary-90: hsl(175, 70%, 90%); - --color-primary-95: hsl(175, 90%, 95%); - --color-primary-98: hsl(175, 100%, 99%); + --color-primary: hsl(240, 64%, 58%); + --color-primary-10: hsl(240, 66%, 19%); + --color-primary-20: hsl(240, 45%, 33%); + --color-primary-25: hsl(240, 46%, 48%); + --color-primary-30: hsl(240, 46%, 53%); + --color-primary-40: hsl(240, 100%, 67%); + --color-primary-85: hsl(244, 100%, 84%); + --color-primary-90: hsl(243, 100%, 93%); + --color-primary-95: hsl(244, 100%, 97%); + --color-primary-98: hsl(244, 100%, 99%); --color-accent: #213c45; - --color-accent-10: hsl(195, 35.2941176471%, 10%); - --color-accent-20: hsl(195, 35.2941176471%, 20%); - --color-accent-30: hsl(195, 35.2941176471%, 30%); - --color-accent-40: hsl(195, 35.2941176471%, 40%); - --color-accent-50: hsl(195, 35%, 50%); - --color-accent-60: hsl(195, 35.2941176471%, 60%); - --color-accent-85: hsl(195, 35%, 85%); - --color-accent-90: hsl(195, 35.2941176471%, 90%); - --color-accent-95: hsl(195, 35.2941176471%, 95%); - --color-accent-98: hsl(195, 35.2941176471%, 98%); - --color-brown-10: hsl(35, 90%, 10%); - --color-brown-20: hsl(35, 50%, 20%); - --color-brown-35: hsl(35, 25%, 35%); - --color-brown-50: hsl(35, 30%, 50%); - --color-brown-70: hsl(35, 40%, 70%); - --color-brown-85: hsl(35, 60%, 85%); - --color-brown-90: hsl(35, 90%, 90%); - --color-brown-95: hsl(35, 80%, 95%); - --color-brown-98: hsl(35, 90%, 98%); - --color-purple-10: hsl(248, 90%, 10%); + --color-accent-10: hsl(195, 100%, 10%); + --color-accent-20: hsl(195, 80%, 20%); + --color-accent-30: hsl(195, 70%, 30%); + --color-accent-40: hsl(195, 70%, 40%); + --color-accent-50: hsl(195, 70%, 50%); + --color-accent-60: hsl(195, 70%, 60%); + --color-accent-85: hsl(195, 85%, 85%); + --color-accent-90: hsl(195, 90%, 90%); + --color-accent-95: hsl(195, 95%, 95%); + --color-accent-98: hsl(195, 100%, 98%); + --color-brown-10: hsl(41, 100%, 10%); + --color-brown-20: hsl(41, 100%, 20%); + --color-brown-35: hsl(41, 96%, 35%); + --color-brown-50: hsl(41, 95%, 44%); + --color-brown-70: hsl(47, 95%, 70%); + --color-brown-85: hsl(47, 100%, 85%); + --color-brown-90: hsl(47, 100%, 90%); + --color-brown-95: hsl(47, 100%, 95%); + --color-brown-98: hsl(48, 100%, 97%); + --color-purple-10: hsl(248, 88%, 10%); --color-purple-20: hsl(248, 50%, 20%); --color-purple-35: hsl(248, 25%, 35%); - --color-purple-50: hsl(248, 30%, 50%); - --color-purple-70: hsl(248, 40%, 70%); - --color-purple-85: hsl(248, 60%, 85%); - --color-purple-90: hsl(248, 50%, 90%); - --color-purple-95: hsl(248, 80%, 95%); - --color-purple-98: hsl(248, 90%, 98%); - --color-turquoise-10: hsl(180, 90%, 10%); - --color-turquoise-20: hsl(180, 50%, 20%); - --color-turquoise-35: hsl(180, 25%, 35%); - --color-turquoise-50: hsl(180, 30%, 45%); - --color-turquoise-70: hsl(180, 40%, 70%); - --color-turquoise-85: hsl(180, 60%, 85%); - --color-turquoise-90: hsl(180, 40%, 90%); - --color-turquoise-95: hsl(180, 80%, 95%); - --color-turquoise-98: hsl(180, 90%, 98%); + --color-purple-50: hsl(248, 64%, 58%); + --color-purple-70: hsl(248, 80%, 70%); + --color-purple-85: hsl(249, 100%, 85%); + --color-purple-90: hsl(248, 100%, 90%); + --color-purple-95: hsl(248, 100%, 95%); + --color-purple-98: hsl(246, 100%, 98%); + --color-turquoise-10: hsl(180, 88%, 10%); + --color-turquoise-20: hsl(180, 90%, 20%); + --color-turquoise-35: hsl(178, 88%, 35%); + --color-turquoise-50: hsl(178, 67%, 50%); + --color-turquoise-70: hsl(180, 75%, 70%); + --color-turquoise-85: hsl(180, 90%, 85%); + --color-turquoise-90: hsl(180, 88%, 90%); + --color-turquoise-95: hsl(180, 88%, 95%); + --color-turquoise-98: hsl(180, 100%, 98%); --color-neutral: hsl(232, 18%, 80%); --color-neutral-05: hsl(0deg 0% 80% / 5%); --color-neutral-10: hsl(0deg 0% 80% / 10%); @@ -69,17 +69,17 @@ --color-info-85: hsl(203.05555555555554, 93.9130434783%, 85%); --color-info-90: #ceebfd; --color-info-95: hsl(203.05555555555554, 93.9130434783%, 95%); - --color-warning: #f16d0e; - --color-warning-25: hsl(25.110132158590307, 89.0196078431%, 25%); - --color-warning-40: hsl(25.110132158590307, 89.0196078431%, 40%); - --color-warning-60: hsl(25.110132158590307, 90%, 60%); - --color-warning-85: hsl(25.110132158590307, 89.0196078431%, 85%); - --color-warning-95: hsl(25.110132158590307, 89.0196078431%, 95%); - --color-error: #e60050; - --color-error-25: hsl(339.1304347826087, 100%, 25%); - --color-error-40: hsl(339.1304347826087, 100%, 40%); - --color-error-85: hsl(339.1304347826087, 100%, 85%); - --color-error-95: hsl(339.1304347826087, 100%, 95%); + --color-warning: hsl(35, 90%, 45%); + --color-warning-25: hsl(33, 83%, 25%); + --color-warning-40: hsl(33, 80%, 34%); + --color-warning-60: hsl(35, 90%, 55%); + --color-warning-85: hsl(33, 90%, 80%); + --color-warning-95: hsl(45, 100%, 92%); + --color-error: hsl(3, 65%, 58%); + --color-error-25: hsl(4, 69%, 37%); + --color-error-40: hsl(3, 60%, 46%); + --color-error-85: hsl(1, 55%, 74%); + --color-error-95: hsl(349, 66%, 92%); --color-solid: #1a1a1a; --color-solid-02: hsl(0deg 0% 10% / 2%); --color-solid-05: hsl(0deg 0% 10% / 5%); @@ -193,27 +193,10 @@ --break-point-biggerdesktop: 1280px; --break-point-giantdesktop: 1680px; --break-point-jumbodesktop: 1920px; - --background-color-for-button-when-active: hsl(232, 18%, 95%); - --background-color-for-button-when-hovered: hsl(232, 18%, 98%); - --background-color-for-button-when-disabled: hsl(195, 35.2941176471%, 95%); - --background-color-for-icon-button-when-disabled: hsl( - 195, - 35.2941176471%, - 95% - ); --background-color-for-input: #fff; - --background-color-for-input-when-selected: hsl(195, 35.2941176471%, 95%); --background-color-for-input-when-disabled: hsl(232, 18%, 95%); - --background-color-for-input-when-hovered: hsl(232, 18%, 98%); - --background-color-for-input-when-focused: #fff; --background-color-for-input-when-readonly: hsl(232, 18%, 95%); - --background-color-for-input-when-active: hsl( - 203.05555555555554, - 93.9130434783%, - 95% - ); - --background-color-for-input-as-quiet: transparent; - --background-color-for-input-as-quiet-when-hovered: hsl(0deg 0% 10% / 2%); + --background-color-for-input-when-hovered: hsl(244, 100%, 99%); --background-color-for-localized-input-label: #fff; --background-color-for-localized-input-label-when-readonly: hsl( 232, @@ -225,102 +208,29 @@ 18%, 95% ); - --background-color-for-button-as-primary: #15a390; - --background-color-for-button-as-primary-when-hovered: hsl(175, 55%, 45%); - --background-color-for-button-as-primary-as-default-when-hovered: #17ab97; - --background-color-for-button-as-primary-as-default-when-active: #15a390; - --background-color-for-button-as-primary-as-urgent: #f16d0e; - --background-color-for-stamp-as-primary: hsl(175, 70%, 90%); - --background-color-for-stamp-as-positive: hsl(175, 70%, 90%); - --background-color-for-toggle-thumb-when-active: hsl(175, 55%, 25%); - --background-color-for-toggle-track-when-active: hsl(175, 55%, 40%); - --background-color-for-toggle-thumb-when-disabled: hsl( - 195, - 35.2941176471%, - 60% - ); - --background-color-for-toggle-track-when-disabled: hsl( - 195, - 35.2941176471%, - 90% - ); - --background-color-for-toggle-thumb-when-active-when-disabled: hsl( - 232, - 18%, - 60% - ); - --background-color-for-toggle-track-when-active-when-disabled: hsl( - 232, - 18%, - 90% - ); - --background-color-for-toggle-thumb-when-hovered: rgba(0, 0, 0, 0.1); - --background-color-for-loading-spinner-track: #213c45; - --background-color-for-loading-spinner-dot: #213c45; - --background-color-for-content-notification-when-success: hsl(175, 90%, 95%); - --background-color-for-view-switcher-button-when-active: hsl(232, 18%, 95%); - --background-color-for-checkbox-input-when-hovered: hsl(232, 18%, 90%); - --background-color-for-radio-option-when-hovered: hsl(232, 18%, 90%); - --background-color-for-tag: hsl(232, 18%, 95%); - --background-color-for-tag-when-hovered: hsl(232, 18%, 90%); - --background-color-for-dropdown-when-hovered: hsl(232, 18%, 95%); - --background-color-for-dropdown-when-active: hsl(232, 18%, 90%); - --background-color-for-dropdown-option-when-active: hsl( - 203.05555555555554, - 93.9130434783%, - 95% - ); + --background-color-for-button-when-active: hsl(243, 100%, 93%); + --background-color-for-button-when-hovered: hsl(244, 100%, 97%); + --background-color-for-button-when-disabled: hsl(232, 18%, 95%); --border-color-for-input: hsl(232, 18%, 80%); - --border-color-for-input-when-focused: hsl(175, 55%, 45%); --border-color-for-input-when-disabled: hsl(232, 18%, 80%); --border-color-for-input-when-readonly: #fff; - --border-color-for-input-when-error: #e60050; - --border-color-for-input-when-warning: #f16d0e; + --border-color-for-input-when-error: hsl(3, 65%, 58%); + --border-color-for-input-when-warning: hsl(35, 90%, 45%); --border-color-for-input-when-hovered: hsl(232, 18%, 80%); - --border-color-for-input-as-quiet: transparent; - --border-color-for-button-as-secondary: hsl(232, 18%, 80%); - --border-color-for-dropdown: hsl(232, 18%, 80%); - --border-color-for-content-notification-when-success: hsl(175, 70%, 85%); - --border-color-for-checkbox-input: hsl(175, 55%, 45%); - --border-color-for-checkbox-input-when-active: hsl(175, 55%, 45%); - --border-color-for-tag: hsl(232, 18%, 85%); - --border-radius-for-button-as-big: 4px; - --border-radius-for-button-as-medium: 4px; + --border-color-for-input-when-focused: hsl(240, 100%, 67%); + --border-color-for-button-as-secondary: hsl(244, 100%, 84%); --border-radius-for-input: 4px; - --border-width-for-input: 1px; - --border-width-for-input-when-warning: 1px; - --border-width-for-input-when-error: 1px; - --border-width-for-input-when-focused: 1px; --font-color-for-input: #1a1a1a; --font-color-for-input-when-disabled: hsl(232, 18%, 60%); - --font-color-for-input-when-error: #e60050; + --font-color-for-input-when-error: hsl(3, 60%, 46%); --font-color-for-input-when-readonly: hsl(232, 18%, 40%); - --font-color-for-input-when-warning: #f16d0e; - --font-color-for-button-as-secondary: #1a1a1a; - --font-color-for-button-as-flat-when-hovered: hsl(175, 55%, 45%); - --font-color-for-button-as-flat-as-critical: #e60050; - --font-color-for-button-as-flat-as-critical-when-hovered: hsl( - 339.1304347826087, - 100%, - 25% - ); - --font-color-for-view-switcher-button: hsl(232, 18%, 40%); - --font-color-for-stamp-as-positive: hsl(175, 55%, 25%); - --font-color-for-content-notification-when-success: hsl(175, 55%, 45%); - --font-color-for-avatar-as-turquoise: hsl(180, 30%, 45%); - --font-color-for-leading-icon-as-turquoise: hsl(180, 30%, 45%); - --font-color-for-text-as-positive: hsl(175, 55%, 25%); + --font-color-for-input-when-warning: hsl(35, 90%, 45%); + --font-color-for-button-as-secondary: hsl(240, 64%, 58%); --height-for-button-as-big: 40px; - --height-for-button-as-medium: 32px; --height-for-button-as-small: 16px; + --height-for-button-as-medium: 32px; --height-for-input: 40px; --height-for-input-as-small: 32px; - --placeholder-font-color-for-input: hsl(232, 18%, 60%); - --font-size-for-button: 0.875rem; - --font-size-for-input: 1rem; - --padding-for-input: 0 var(--spacing-30); - --padding-for-input-as-quiet: 0 var(--spacing-20); - --padding-for-button: 0 var(--spacing-30); --shadow-for-input: none; --shadow-for-input-when-focused: inset 0 0 0 1px var(--color-primary); --shadow-for-input-when-error: inset 0 0 0 1px var(--color-error); diff --git a/design-system/materials/custom-properties.json b/design-system/materials/custom-properties.json index 4d489b55e8..68d93a8c27 100644 --- a/design-system/materials/custom-properties.json +++ b/design-system/materials/custom-properties.json @@ -1,52 +1,52 @@ { - "--color-primary": "hsl(175, 55%, 45%)", - "--color-primary-10": "hsl(175, 55%, 10%)", - "--color-primary-20": "hsl(175, 55%, 20%)", - "--color-primary-25": "hsl(175, 55%, 25%)", - "--color-primary-30": "hsl(175, 55%, 30%)", - "--color-primary-40": "hsl(175, 55%, 40%)", - "--color-primary-85": "hsl(175, 70%, 85%)", - "--color-primary-90": "hsl(175, 70%, 90%)", - "--color-primary-95": "hsl(175, 90%, 95%)", - "--color-primary-98": "hsl(175, 100%, 99%)", + "--color-primary": "hsl(240, 64%, 58%)", + "--color-primary-10": "hsl(240, 66%, 19%)", + "--color-primary-20": "hsl(240, 45%, 33%)", + "--color-primary-25": "hsl(240, 46%, 48%)", + "--color-primary-30": "hsl(240, 46%, 53%)", + "--color-primary-40": "hsl(240, 100%, 67%)", + "--color-primary-85": "hsl(244, 100%, 84%)", + "--color-primary-90": "hsl(243, 100%, 93%)", + "--color-primary-95": "hsl(244, 100%, 97%)", + "--color-primary-98": "hsl(244, 100%, 99%)", "--color-accent": "#213c45", - "--color-accent-10": "hsl(195, 35.2941176471%, 10%)", - "--color-accent-20": "hsl(195, 35.2941176471%, 20%)", - "--color-accent-30": "hsl(195, 35.2941176471%, 30%)", - "--color-accent-40": "hsl(195, 35.2941176471%, 40%)", - "--color-accent-50": "hsl(195, 35%, 50%)", - "--color-accent-60": "hsl(195, 35.2941176471%, 60%)", - "--color-accent-85": "hsl(195, 35%, 85%)", - "--color-accent-90": "hsl(195, 35.2941176471%, 90%)", - "--color-accent-95": "hsl(195, 35.2941176471%, 95%)", - "--color-accent-98": "hsl(195, 35.2941176471%, 98%)", - "--color-brown-10": "hsl(35, 90%, 10%)", - "--color-brown-20": "hsl(35, 50%, 20%)", - "--color-brown-35": "hsl(35, 25%, 35%)", - "--color-brown-50": "hsl(35, 30%, 50%)", - "--color-brown-70": "hsl(35, 40%, 70%)", - "--color-brown-85": "hsl(35, 60%, 85%)", - "--color-brown-90": "hsl(35, 90%, 90%)", - "--color-brown-95": "hsl(35, 80%, 95%)", - "--color-brown-98": "hsl(35, 90%, 98%)", - "--color-purple-10": "hsl(248, 90%, 10%)", + "--color-accent-10": "hsl(195, 100%, 10%)", + "--color-accent-20": "hsl(195, 80%, 20%)", + "--color-accent-30": "hsl(195, 70%, 30%)", + "--color-accent-40": "hsl(195, 70%, 40%)", + "--color-accent-50": "hsl(195, 70%, 50%)", + "--color-accent-60": "hsl(195, 70%, 60%)", + "--color-accent-85": "hsl(195, 85%, 85%)", + "--color-accent-90": "hsl(195, 90%, 90%)", + "--color-accent-95": "hsl(195, 95%, 95%)", + "--color-accent-98": "hsl(195, 100%, 98%)", + "--color-brown-10": "hsl(41, 100%, 10%)", + "--color-brown-20": "hsl(41, 100%, 20%)", + "--color-brown-35": "hsl(41, 96%, 35%)", + "--color-brown-50": "hsl(41, 95%, 44%)", + "--color-brown-70": "hsl(47, 95%, 70%)", + "--color-brown-85": "hsl(47, 100%, 85%)", + "--color-brown-90": "hsl(47, 100%, 90%)", + "--color-brown-95": "hsl(47, 100%, 95%)", + "--color-brown-98": "hsl(48, 100%, 97%)", + "--color-purple-10": "hsl(248, 88%, 10%)", "--color-purple-20": "hsl(248, 50%, 20%)", "--color-purple-35": "hsl(248, 25%, 35%)", - "--color-purple-50": "hsl(248, 30%,50%)", - "--color-purple-70": "hsl(248, 40%, 70%)", - "--color-purple-85": "hsl(248, 60%, 85%)", - "--color-purple-90": "hsl(248, 50%, 90%)", - "--color-purple-95": "hsl(248, 80%, 95%)", - "--color-purple-98": "hsl(248, 90%, 98%)", - "--color-turquoise-10": "hsl(180, 90%, 10%)", - "--color-turquoise-20": "hsl(180, 50%, 20%)", - "--color-turquoise-35": "hsl(180, 25%, 35%)", - "--color-turquoise-50": "hsl(180, 30%, 45%)", - "--color-turquoise-70": "hsl(180, 40%, 70%)", - "--color-turquoise-85": "hsl(180, 60%, 85%)", - "--color-turquoise-90": "hsl(180, 40%, 90%)", - "--color-turquoise-95": "hsl(180, 80%, 95%)", - "--color-turquoise-98": "hsl(180, 90%, 98%)", + "--color-purple-50": "hsl(248, 64%, 58%)", + "--color-purple-70": "hsl(248, 80%, 70%)", + "--color-purple-85": "hsl(249, 100%, 85%)", + "--color-purple-90": "hsl(248, 100%, 90%)", + "--color-purple-95": "hsl(248, 100%, 95%)", + "--color-purple-98": "hsl(246, 100%, 98%)", + "--color-turquoise-10": "hsl(180, 88%, 10%)", + "--color-turquoise-20": "hsl(180, 90%, 20%)", + "--color-turquoise-35": "hsl(178, 88%, 35%)", + "--color-turquoise-50": "hsl(178, 67%, 50%)", + "--color-turquoise-70": "hsl(180, 75%, 70%)", + "--color-turquoise-85": "hsl(180, 90%, 85%)", + "--color-turquoise-90": "hsl(180, 88%, 90%)", + "--color-turquoise-95": "hsl(180, 88%, 95%)", + "--color-turquoise-98": "hsl(180, 100%, 98%)", "--color-neutral": "hsl(232, 18%, 80%)", "--color-neutral-05": "hsl(0deg 0% 80% / 5%)", "--color-neutral-10": "hsl(0deg 0% 80% / 10%)", @@ -62,17 +62,17 @@ "--color-info-85": "hsl(203.05555555555554, 93.9130434783%, 85%)", "--color-info-90": "#CEEBFD", "--color-info-95": "hsl(203.05555555555554, 93.9130434783%, 95%)", - "--color-warning": "#f16d0e", - "--color-warning-25": "hsl(25.110132158590307, 89.0196078431%, 25%)", - "--color-warning-40": "hsl(25.110132158590307, 89.0196078431%, 40%)", - "--color-warning-60": "hsl(25.110132158590307, 90%, 60%)", - "--color-warning-85": "hsl(25.110132158590307, 89.0196078431%, 85%)", - "--color-warning-95": "hsl(25.110132158590307, 89.0196078431%, 95%)", - "--color-error": "#e60050", - "--color-error-25": "hsl(339.1304347826087, 100%, 25%)", - "--color-error-40": "hsl(339.1304347826087, 100%, 40%)", - "--color-error-85": "hsl(339.1304347826087, 100%, 85%)", - "--color-error-95": "hsl(339.1304347826087, 100%, 95%)", + "--color-warning": "hsl(35, 90%, 45%)", + "--color-warning-25": "hsl(33, 83%, 25%)", + "--color-warning-40": "hsl(33, 80%, 34%)", + "--color-warning-60": "hsl(35, 90%, 55%)", + "--color-warning-85": "hsl(33, 90%, 80%)", + "--color-warning-95": "hsl(45, 100%, 92%)", + "--color-error": "hsl(3, 65%, 58%)", + "--color-error-25": "hsl(4, 69%, 37%)", + "--color-error-40": "hsl(3, 60%, 46%)", + "--color-error-85": "hsl(1, 55%, 74%)", + "--color-error-95": "hsl(349, 66%, 92%)", "--color-solid": "#1a1a1a", "--color-solid-02": "hsl(0deg 0% 10% / 2%)", "--color-solid-05": "hsl(0deg 0% 10% / 5%)", @@ -181,94 +181,36 @@ "--break-point-biggerdesktop": "1280px", "--break-point-giantdesktop": "1680px", "--break-point-jumbodesktop": "1920px", - "--background-color-for-button-when-active": "hsl(232, 18%, 95%)", - "--background-color-for-button-when-hovered": "hsl(232, 18%, 98%)", - "--background-color-for-button-when-disabled": "hsl(195, 35.2941176471%, 95%)", - "--background-color-for-icon-button-when-disabled": "hsl(195, 35.2941176471%, 95%)", "--background-color-for-input": "#fff", - "--background-color-for-input-when-selected": "hsl(195, 35.2941176471%, 95%)", "--background-color-for-input-when-disabled": "hsl(232, 18%, 95%)", - "--background-color-for-input-when-hovered": "hsl(232, 18%, 98%)", - "--background-color-for-input-when-focused": "#fff", "--background-color-for-input-when-readonly": "hsl(232, 18%, 95%)", - "--background-color-for-input-when-active": "hsl(203.05555555555554, 93.9130434783%, 95%)", - "--background-color-for-input-as-quiet": "transparent", - "--background-color-for-input-as-quiet-when-hovered": "hsl(0deg 0% 10% / 2%)", + "--background-color-for-input-when-hovered": "hsl(244, 100%, 99%)", "--background-color-for-localized-input-label": "#fff", "--background-color-for-localized-input-label-when-readonly": "hsl(232, 18%, 95%)", "--background-color-for-localized-input-label-when-disabled": "hsl(232, 18%, 95%)", - "--background-color-for-button-as-primary": "#15a390", - "--background-color-for-button-as-primary-when-hovered": "hsl(175, 55%, 45%)", - "--background-color-for-button-as-primary-as-default-when-hovered": "#17ab97", - "--background-color-for-button-as-primary-as-default-when-active": "#15a390", - "--background-color-for-button-as-primary-as-urgent": "#f16d0e", - "--background-color-for-stamp-as-primary": "hsl(175, 70%, 90%)", - "--background-color-for-stamp-as-positive": "hsl(175, 70%, 90%)", - "--background-color-for-toggle-thumb-when-active": "hsl(175, 55%, 25%)", - "--background-color-for-toggle-track-when-active": "hsl(175, 55%, 40%)", - "--background-color-for-toggle-thumb-when-disabled": "hsl(195, 35.2941176471%, 60%)", - "--background-color-for-toggle-track-when-disabled": "hsl(195, 35.2941176471%, 90%)", - "--background-color-for-toggle-thumb-when-active-when-disabled": "hsl(232, 18%, 60%)", - "--background-color-for-toggle-track-when-active-when-disabled": "hsl(232, 18%, 90%)", - "--background-color-for-toggle-thumb-when-hovered": "rgba(0, 0, 0, 0.1)", - "--background-color-for-loading-spinner-track": "#213c45", - "--background-color-for-loading-spinner-dot": "#213c45", - "--background-color-for-content-notification-when-success": "hsl(175, 90%, 95%)", - "--background-color-for-view-switcher-button-when-active": "hsl(232, 18%, 95%)", - "--background-color-for-checkbox-input-when-hovered": "hsl(232, 18%, 90%)", - "--background-color-for-radio-option-when-hovered": "hsl(232, 18%, 90%)", - "--background-color-for-tag": "hsl(232, 18%, 95%)", - "--background-color-for-tag-when-hovered": "hsl(232, 18%, 90%)", - "--background-color-for-dropdown-when-hovered": "hsl(232, 18%, 95%)", - "--background-color-for-dropdown-when-active": "hsl(232, 18%, 90%)", - "--background-color-for-dropdown-option-when-active": "hsl(203.05555555555554, 93.9130434783%, 95%)", + "--background-color-for-button-when-active": "hsl(243, 100%, 93%)", + "--background-color-for-button-when-hovered": "hsl(244, 100%, 97%)", + "--background-color-for-button-when-disabled": "hsl(232, 18%, 95%)", "--border-color-for-input": "hsl(232, 18%, 80%)", - "--border-color-for-input-when-focused": "hsl(175, 55%, 45%)", "--border-color-for-input-when-disabled": "hsl(232, 18%, 80%)", "--border-color-for-input-when-readonly": "#fff", - "--border-color-for-input-when-error": "#e60050", - "--border-color-for-input-when-warning": "#f16d0e", + "--border-color-for-input-when-error": "hsl(3, 65%, 58%)", + "--border-color-for-input-when-warning": "hsl(35, 90%, 45%)", "--border-color-for-input-when-hovered": "hsl(232, 18%, 80%)", - "--border-color-for-input-as-quiet": "transparent", - "--border-color-for-button-as-secondary": "hsl(232, 18%, 80%)", - "--border-color-for-dropdown": "hsl(232, 18%, 80%)", - "--border-color-for-content-notification-when-success": "hsl(175, 70%, 85%)", - "--border-color-for-checkbox-input": "hsl(175, 55%, 45%)", - "--border-color-for-checkbox-input-when-active": "hsl(175, 55%, 45%)", - "--border-color-for-tag": "hsl(232, 18%, 85%)", - "--border-radius-for-button-as-big": "4px", - "--border-radius-for-button-as-medium": "4px", + "--border-color-for-input-when-focused": "hsl(240, 100%, 67%)", + "--border-color-for-button-as-secondary": "hsl(244, 100%, 84%)", "--border-radius-for-input": "4px", - "--border-width-for-input": "1px", - "--border-width-for-input-when-warning": "1px", - "--border-width-for-input-when-error": "1px", - "--border-width-for-input-when-focused": "1px", "--font-color-for-input": "#1a1a1a", "--font-color-for-input-when-disabled": "hsl(232, 18%, 60%)", - "--font-color-for-input-when-error": "#e60050", + "--font-color-for-input-when-error": "hsl(3, 60%, 46%)", "--font-color-for-input-when-readonly": "hsl(232, 18%, 40%)", - "--font-color-for-input-when-warning": "#f16d0e", - "--font-color-for-button-as-secondary": "#1a1a1a", - "--font-color-for-button-as-flat-when-hovered": "hsl(175, 55%, 45%)", - "--font-color-for-button-as-flat-as-critical": "#e60050", - "--font-color-for-button-as-flat-as-critical-when-hovered": "hsl(339.1304347826087, 100%, 25%)", - "--font-color-for-view-switcher-button": "hsl(232, 18%, 40%)", - "--font-color-for-stamp-as-positive": "hsl(175, 55%, 25%)", - "--font-color-for-content-notification-when-success": "hsl(175, 55%, 45%)", - "--font-color-for-avatar-as-turquoise": "hsl(180, 30%, 45%)", - "--font-color-for-leading-icon-as-turquoise": "hsl(180, 30%, 45%)", - "--font-color-for-text-as-positive": "hsl(175, 55%, 25%)", + "--font-color-for-input-when-warning": "hsl(35, 90%, 45%)", + "--font-color-for-button-as-secondary": "hsl(240, 64%, 58%)", "--height-for-button-as-big": "40px", - "--height-for-button-as-medium": "32px", "--height-for-button-as-small": "16px", + "--height-for-button-as-medium": "32px", "--height-for-input": "40px", "--height-for-input-as-small": "32px", - "--placeholder-font-color-for-input": "hsl(232, 18%, 60%)", - "--font-size-for-button": "0.875rem", - "--font-size-for-input": "1rem", - "--padding-for-input": "0 var(--spacing-30)", - "--padding-for-input-as-quiet": "0 var(--spacing-20)", - "--padding-for-button": "0 var(--spacing-30)", "--shadow-for-input": "none", "--shadow-for-input-when-focused": "inset 0 0 0 1px var(--color-primary)", "--shadow-for-input-when-error": "inset 0 0 0 1px var(--color-error)", diff --git a/design-system/materials/custom-properties_default.css b/design-system/materials/custom-properties_default.css index 0a8966736d..e4e38a0415 100644 --- a/design-system/materials/custom-properties_default.css +++ b/design-system/materials/custom-properties_default.css @@ -6,54 +6,54 @@ */ :root { - --color-primary: hsl(175, 55%, 45%); - --color-primary-10: hsl(175, 55%, 10%); - --color-primary-20: hsl(175, 55%, 20%); - --color-primary-25: hsl(175, 55%, 25%); - --color-primary-30: hsl(175, 55%, 30%); - --color-primary-40: hsl(175, 55%, 40%); - --color-primary-85: hsl(175, 70%, 85%); - --color-primary-90: hsl(175, 70%, 90%); - --color-primary-95: hsl(175, 90%, 95%); - --color-primary-98: hsl(175, 100%, 99%); + --color-primary: hsl(240, 64%, 58%); + --color-primary-10: hsl(240, 66%, 19%); + --color-primary-20: hsl(240, 45%, 33%); + --color-primary-25: hsl(240, 46%, 48%); + --color-primary-30: hsl(240, 46%, 53%); + --color-primary-40: hsl(240, 100%, 67%); + --color-primary-85: hsl(244, 100%, 84%); + --color-primary-90: hsl(243, 100%, 93%); + --color-primary-95: hsl(244, 100%, 97%); + --color-primary-98: hsl(244, 100%, 99%); --color-accent: #213c45; - --color-accent-10: hsl(195, 35.2941176471%, 10%); - --color-accent-20: hsl(195, 35.2941176471%, 20%); - --color-accent-30: hsl(195, 35.2941176471%, 30%); - --color-accent-40: hsl(195, 35.2941176471%, 40%); - --color-accent-50: hsl(195, 35%, 50%); - --color-accent-60: hsl(195, 35.2941176471%, 60%); - --color-accent-85: hsl(195, 35%, 85%); - --color-accent-90: hsl(195, 35.2941176471%, 90%); - --color-accent-95: hsl(195, 35.2941176471%, 95%); - --color-accent-98: hsl(195, 35.2941176471%, 98%); - --color-brown-10: hsl(35, 90%, 10%); - --color-brown-20: hsl(35, 50%, 20%); - --color-brown-35: hsl(35, 25%, 35%); - --color-brown-50: hsl(35, 30%, 50%); - --color-brown-70: hsl(35, 40%, 70%); - --color-brown-85: hsl(35, 60%, 85%); - --color-brown-90: hsl(35, 90%, 90%); - --color-brown-95: hsl(35, 80%, 95%); - --color-brown-98: hsl(35, 90%, 98%); - --color-purple-10: hsl(248, 90%, 10%); + --color-accent-10: hsl(195, 100%, 10%); + --color-accent-20: hsl(195, 80%, 20%); + --color-accent-30: hsl(195, 70%, 30%); + --color-accent-40: hsl(195, 70%, 40%); + --color-accent-50: hsl(195, 70%, 50%); + --color-accent-60: hsl(195, 70%, 60%); + --color-accent-85: hsl(195, 85%, 85%); + --color-accent-90: hsl(195, 90%, 90%); + --color-accent-95: hsl(195, 95%, 95%); + --color-accent-98: hsl(195, 100%, 98%); + --color-brown-10: hsl(41, 100%, 10%); + --color-brown-20: hsl(41, 100%, 20%); + --color-brown-35: hsl(41, 96%, 35%); + --color-brown-50: hsl(41, 95%, 44%); + --color-brown-70: hsl(47, 95%, 70%); + --color-brown-85: hsl(47, 100%, 85%); + --color-brown-90: hsl(47, 100%, 90%); + --color-brown-95: hsl(47, 100%, 95%); + --color-brown-98: hsl(48, 100%, 97%); + --color-purple-10: hsl(248, 88%, 10%); --color-purple-20: hsl(248, 50%, 20%); --color-purple-35: hsl(248, 25%, 35%); - --color-purple-50: hsl(248, 30%, 50%); - --color-purple-70: hsl(248, 40%, 70%); - --color-purple-85: hsl(248, 60%, 85%); - --color-purple-90: hsl(248, 50%, 90%); - --color-purple-95: hsl(248, 80%, 95%); - --color-purple-98: hsl(248, 90%, 98%); - --color-turquoise-10: hsl(180, 90%, 10%); - --color-turquoise-20: hsl(180, 50%, 20%); - --color-turquoise-35: hsl(180, 25%, 35%); - --color-turquoise-50: hsl(180, 30%, 45%); - --color-turquoise-70: hsl(180, 40%, 70%); - --color-turquoise-85: hsl(180, 60%, 85%); - --color-turquoise-90: hsl(180, 40%, 90%); - --color-turquoise-95: hsl(180, 80%, 95%); - --color-turquoise-98: hsl(180, 90%, 98%); + --color-purple-50: hsl(248, 64%, 58%); + --color-purple-70: hsl(248, 80%, 70%); + --color-purple-85: hsl(249, 100%, 85%); + --color-purple-90: hsl(248, 100%, 90%); + --color-purple-95: hsl(248, 100%, 95%); + --color-purple-98: hsl(246, 100%, 98%); + --color-turquoise-10: hsl(180, 88%, 10%); + --color-turquoise-20: hsl(180, 90%, 20%); + --color-turquoise-35: hsl(178, 88%, 35%); + --color-turquoise-50: hsl(178, 67%, 50%); + --color-turquoise-70: hsl(180, 75%, 70%); + --color-turquoise-85: hsl(180, 90%, 85%); + --color-turquoise-90: hsl(180, 88%, 90%); + --color-turquoise-95: hsl(180, 88%, 95%); + --color-turquoise-98: hsl(180, 100%, 98%); --color-neutral: hsl(232, 18%, 80%); --color-neutral-05: hsl(0deg 0% 80% / 5%); --color-neutral-10: hsl(0deg 0% 80% / 10%); @@ -69,17 +69,17 @@ --color-info-85: hsl(203.05555555555554, 93.9130434783%, 85%); --color-info-90: #ceebfd; --color-info-95: hsl(203.05555555555554, 93.9130434783%, 95%); - --color-warning: #f16d0e; - --color-warning-25: hsl(25.110132158590307, 89.0196078431%, 25%); - --color-warning-40: hsl(25.110132158590307, 89.0196078431%, 40%); - --color-warning-60: hsl(25.110132158590307, 90%, 60%); - --color-warning-85: hsl(25.110132158590307, 89.0196078431%, 85%); - --color-warning-95: hsl(25.110132158590307, 89.0196078431%, 95%); - --color-error: #e60050; - --color-error-25: hsl(339.1304347826087, 100%, 25%); - --color-error-40: hsl(339.1304347826087, 100%, 40%); - --color-error-85: hsl(339.1304347826087, 100%, 85%); - --color-error-95: hsl(339.1304347826087, 100%, 95%); + --color-warning: hsl(35, 90%, 45%); + --color-warning-25: hsl(33, 83%, 25%); + --color-warning-40: hsl(33, 80%, 34%); + --color-warning-60: hsl(35, 90%, 55%); + --color-warning-85: hsl(33, 90%, 80%); + --color-warning-95: hsl(45, 100%, 92%); + --color-error: hsl(3, 65%, 58%); + --color-error-25: hsl(4, 69%, 37%); + --color-error-40: hsl(3, 60%, 46%); + --color-error-85: hsl(1, 55%, 74%); + --color-error-95: hsl(349, 66%, 92%); --color-solid: #1a1a1a; --color-solid-02: hsl(0deg 0% 10% / 2%); --color-solid-05: hsl(0deg 0% 10% / 5%); @@ -193,27 +193,10 @@ --break-point-biggerdesktop: 1280px; --break-point-giantdesktop: 1680px; --break-point-jumbodesktop: 1920px; - --background-color-for-button-when-active: hsl(232, 18%, 95%); - --background-color-for-button-when-hovered: hsl(232, 18%, 98%); - --background-color-for-button-when-disabled: hsl(195, 35.2941176471%, 95%); - --background-color-for-icon-button-when-disabled: hsl( - 195, - 35.2941176471%, - 95% - ); --background-color-for-input: #fff; - --background-color-for-input-when-selected: hsl(195, 35.2941176471%, 95%); --background-color-for-input-when-disabled: hsl(232, 18%, 95%); - --background-color-for-input-when-hovered: hsl(232, 18%, 98%); - --background-color-for-input-when-focused: #fff; --background-color-for-input-when-readonly: hsl(232, 18%, 95%); - --background-color-for-input-when-active: hsl( - 203.05555555555554, - 93.9130434783%, - 95% - ); - --background-color-for-input-as-quiet: transparent; - --background-color-for-input-as-quiet-when-hovered: hsl(0deg 0% 10% / 2%); + --background-color-for-input-when-hovered: hsl(244, 100%, 99%); --background-color-for-localized-input-label: #fff; --background-color-for-localized-input-label-when-readonly: hsl( 232, @@ -225,102 +208,29 @@ 18%, 95% ); - --background-color-for-button-as-primary: #15a390; - --background-color-for-button-as-primary-when-hovered: hsl(175, 55%, 45%); - --background-color-for-button-as-primary-as-default-when-hovered: #17ab97; - --background-color-for-button-as-primary-as-default-when-active: #15a390; - --background-color-for-button-as-primary-as-urgent: #f16d0e; - --background-color-for-stamp-as-primary: hsl(175, 70%, 90%); - --background-color-for-stamp-as-positive: hsl(175, 70%, 90%); - --background-color-for-toggle-thumb-when-active: hsl(175, 55%, 25%); - --background-color-for-toggle-track-when-active: hsl(175, 55%, 40%); - --background-color-for-toggle-thumb-when-disabled: hsl( - 195, - 35.2941176471%, - 60% - ); - --background-color-for-toggle-track-when-disabled: hsl( - 195, - 35.2941176471%, - 90% - ); - --background-color-for-toggle-thumb-when-active-when-disabled: hsl( - 232, - 18%, - 60% - ); - --background-color-for-toggle-track-when-active-when-disabled: hsl( - 232, - 18%, - 90% - ); - --background-color-for-toggle-thumb-when-hovered: rgba(0, 0, 0, 0.1); - --background-color-for-loading-spinner-track: #213c45; - --background-color-for-loading-spinner-dot: #213c45; - --background-color-for-content-notification-when-success: hsl(175, 90%, 95%); - --background-color-for-view-switcher-button-when-active: hsl(232, 18%, 95%); - --background-color-for-checkbox-input-when-hovered: hsl(232, 18%, 90%); - --background-color-for-radio-option-when-hovered: hsl(232, 18%, 90%); - --background-color-for-tag: hsl(232, 18%, 95%); - --background-color-for-tag-when-hovered: hsl(232, 18%, 90%); - --background-color-for-dropdown-when-hovered: hsl(232, 18%, 95%); - --background-color-for-dropdown-when-active: hsl(232, 18%, 90%); - --background-color-for-dropdown-option-when-active: hsl( - 203.05555555555554, - 93.9130434783%, - 95% - ); + --background-color-for-button-when-active: hsl(243, 100%, 93%); + --background-color-for-button-when-hovered: hsl(244, 100%, 97%); + --background-color-for-button-when-disabled: hsl(232, 18%, 95%); --border-color-for-input: hsl(232, 18%, 80%); - --border-color-for-input-when-focused: hsl(175, 55%, 45%); --border-color-for-input-when-disabled: hsl(232, 18%, 80%); --border-color-for-input-when-readonly: #fff; - --border-color-for-input-when-error: #e60050; - --border-color-for-input-when-warning: #f16d0e; + --border-color-for-input-when-error: hsl(3, 65%, 58%); + --border-color-for-input-when-warning: hsl(35, 90%, 45%); --border-color-for-input-when-hovered: hsl(232, 18%, 80%); - --border-color-for-input-as-quiet: transparent; - --border-color-for-button-as-secondary: hsl(232, 18%, 80%); - --border-color-for-dropdown: hsl(232, 18%, 80%); - --border-color-for-content-notification-when-success: hsl(175, 70%, 85%); - --border-color-for-checkbox-input: hsl(175, 55%, 45%); - --border-color-for-checkbox-input-when-active: hsl(175, 55%, 45%); - --border-color-for-tag: hsl(232, 18%, 85%); - --border-radius-for-button-as-big: 4px; - --border-radius-for-button-as-medium: 4px; + --border-color-for-input-when-focused: hsl(240, 100%, 67%); + --border-color-for-button-as-secondary: hsl(244, 100%, 84%); --border-radius-for-input: 4px; - --border-width-for-input: 1px; - --border-width-for-input-when-warning: 1px; - --border-width-for-input-when-error: 1px; - --border-width-for-input-when-focused: 1px; --font-color-for-input: #1a1a1a; --font-color-for-input-when-disabled: hsl(232, 18%, 60%); - --font-color-for-input-when-error: #e60050; + --font-color-for-input-when-error: hsl(3, 60%, 46%); --font-color-for-input-when-readonly: hsl(232, 18%, 40%); - --font-color-for-input-when-warning: #f16d0e; - --font-color-for-button-as-secondary: #1a1a1a; - --font-color-for-button-as-flat-when-hovered: hsl(175, 55%, 45%); - --font-color-for-button-as-flat-as-critical: #e60050; - --font-color-for-button-as-flat-as-critical-when-hovered: hsl( - 339.1304347826087, - 100%, - 25% - ); - --font-color-for-view-switcher-button: hsl(232, 18%, 40%); - --font-color-for-stamp-as-positive: hsl(175, 55%, 25%); - --font-color-for-content-notification-when-success: hsl(175, 55%, 45%); - --font-color-for-avatar-as-turquoise: hsl(180, 30%, 45%); - --font-color-for-leading-icon-as-turquoise: hsl(180, 30%, 45%); - --font-color-for-text-as-positive: hsl(175, 55%, 25%); + --font-color-for-input-when-warning: hsl(35, 90%, 45%); + --font-color-for-button-as-secondary: hsl(240, 64%, 58%); --height-for-button-as-big: 40px; - --height-for-button-as-medium: 32px; --height-for-button-as-small: 16px; + --height-for-button-as-medium: 32px; --height-for-input: 40px; --height-for-input-as-small: 32px; - --placeholder-font-color-for-input: hsl(232, 18%, 60%); - --font-size-for-button: 0.875rem; - --font-size-for-input: 1rem; - --padding-for-input: 0 var(--spacing-30); - --padding-for-input-as-quiet: 0 var(--spacing-20); - --padding-for-button: 0 var(--spacing-30); --shadow-for-input: none; --shadow-for-input-when-focused: inset 0 0 0 1px var(--color-primary); --shadow-for-input-when-error: inset 0 0 0 1px var(--color-error); diff --git a/design-system/materials/custom-properties_recolouring.css b/design-system/materials/custom-properties_recolouring.css index 1a760a9b25..e4e38a0415 100644 --- a/design-system/materials/custom-properties_recolouring.css +++ b/design-system/materials/custom-properties_recolouring.css @@ -193,19 +193,10 @@ --break-point-biggerdesktop: 1280px; --break-point-giantdesktop: 1680px; --break-point-jumbodesktop: 1920px; - --background-color-for-button-when-active: hsl(243, 100%, 93%); - --background-color-for-button-when-hovered: hsl(244, 100%, 97%); - --background-color-for-button-when-disabled: hsl(195, 35.2941176471%, 95%); - --background-color-for-icon-button-when-disabled: transparent; --background-color-for-input: #fff; - --background-color-for-input-when-selected: hsl(244, 100%, 97%); --background-color-for-input-when-disabled: hsl(232, 18%, 95%); - --background-color-for-input-when-hovered: hsl(244, 100%, 99%); - --background-color-for-input-when-focused: #fff; --background-color-for-input-when-readonly: hsl(232, 18%, 95%); - --background-color-for-input-when-active: hsl(244, 100%, 97%); - --background-color-for-input-as-quiet: transparent; - --background-color-for-input-as-quiet-when-hovered: hsla(240, 64%, 58%, 4%); + --background-color-for-input-when-hovered: hsl(244, 100%, 99%); --background-color-for-localized-input-label: #fff; --background-color-for-localized-input-label-when-readonly: hsl( 232, @@ -217,94 +208,29 @@ 18%, 95% ); - --background-color-for-button-as-primary: hsl(240, 64%, 58%); - --background-color-for-button-as-primary-when-hovered: hsl(240, 100%, 67%); - --background-color-for-button-as-primary-as-default-when-hovered: hsl( - 240, - 100%, - 67% - ); - --background-color-for-button-as-primary-as-default-when-active: hsl( - 240, - 46%, - 48% - ); - --background-color-for-button-as-primary-as-urgent: hsl(35, 90%, 55%); - --background-color-for-stamp-as-primary: hsl(244, 100%, 97%); - --background-color-for-stamp-as-positive: hsl(141, 76%, 92%); - --background-color-for-toggle-thumb-when-active: hsl(240, 100%, 67%); - --background-color-for-toggle-track-when-active: hsl(244, 100%, 84%); - --background-color-for-toggle-thumb-when-disabled: hsl(232, 18%, 60%); - --background-color-for-toggle-track-when-disabled: hsl(232, 18%, 90%); - --background-color-for-toggle-thumb-when-active-when-disabled: hsl( - 244, - 100%, - 84% - ); - --background-color-for-toggle-track-when-active-when-disabled: hsl( - 243, - 100%, - 93% - ); - --background-color-for-toggle-thumb-when-hovered: hsla(240, 64%, 58%, 4%); - --background-color-for-loading-spinner-track: hsl(243, 100%, 93%); - --background-color-for-loading-spinner-dot: hsl(240, 64%, 58%); - --background-color-for-content-notification-when-success: hsl(141, 76%, 92%); - --background-color-for-view-switcher-button-when-active: hsl(244, 100%, 97%); - --background-color-for-checkbox-input-when-hovered: hsl(244, 100%, 97%); - --background-color-for-radio-option-when-hovered: hsl(244, 100%, 97%); - --background-color-for-tag: hsl(244, 100%, 97%); - --background-color-for-tag-when-hovered: hsl(243, 100%, 93%); - --background-color-for-dropdown-when-hovered: hsl(244, 100%, 97%); - --background-color-for-dropdown-when-active: hsl(243, 100%, 93%); - --background-color-for-dropdown-option-when-active: hsl(244, 100%, 97%); + --background-color-for-button-when-active: hsl(243, 100%, 93%); + --background-color-for-button-when-hovered: hsl(244, 100%, 97%); + --background-color-for-button-when-disabled: hsl(232, 18%, 95%); --border-color-for-input: hsl(232, 18%, 80%); - --border-color-for-input-when-focused: hsl(240, 100%, 67%); --border-color-for-input-when-disabled: hsl(232, 18%, 80%); --border-color-for-input-when-readonly: #fff; - --border-color-for-input-when-error: #e60050; - --border-color-for-input-when-warning: #f16d0e; + --border-color-for-input-when-error: hsl(3, 65%, 58%); + --border-color-for-input-when-warning: hsl(35, 90%, 45%); --border-color-for-input-when-hovered: hsl(232, 18%, 80%); - --border-color-for-input-as-quiet: transparent; + --border-color-for-input-when-focused: hsl(240, 100%, 67%); --border-color-for-button-as-secondary: hsl(244, 100%, 84%); - --border-color-for-dropdown: hsl(244, 100%, 84%); - --border-color-for-content-notification-when-success: hsl(144, 69%, 80%); - --border-color-for-checkbox-input: hsl(232, 18%, 60%); - --border-color-for-checkbox-input-when-active: hsl(240, 64%, 58%); - --border-color-for-tag: hsl(243, 100%, 93%); - --border-radius-for-button-as-big: 4px; - --border-radius-for-button-as-medium: 4px; --border-radius-for-input: 4px; - --border-width-for-input: 1px; - --border-width-for-input-when-warning: 1px; - --border-width-for-input-when-error: 1px; - --border-width-for-input-when-focused: 1px; --font-color-for-input: #1a1a1a; --font-color-for-input-when-disabled: hsl(232, 18%, 60%); --font-color-for-input-when-error: hsl(3, 60%, 46%); --font-color-for-input-when-readonly: hsl(232, 18%, 40%); - --font-color-for-input-when-warning: #f16d0e; + --font-color-for-input-when-warning: hsl(35, 90%, 45%); --font-color-for-button-as-secondary: hsl(240, 64%, 58%); - --font-color-for-button-as-flat-when-hovered: hsl(240, 100%, 67%); - --font-color-for-button-as-flat-as-critical: hsl(3, 60%, 46%); - --font-color-for-button-as-flat-as-critical-when-hovered: hsl(3, 65%, 58%); - --font-color-for-view-switcher-button: hsl(240, 64%, 58%); - --font-color-for-stamp-as-positive: hsl(155, 90%, 24%); - --font-color-for-content-notification-when-success: hsl(152, 77%, 39%); - --font-color-for-avatar-as-turquoise: hsl(178, 88%, 35%); - --font-color-for-leading-icon-as-turquoise: hsl(178, 88%, 35%); - --font-color-for-text-as-positive: hsl(155, 90%, 24%); --height-for-button-as-big: 40px; - --height-for-button-as-medium: 32px; --height-for-button-as-small: 16px; + --height-for-button-as-medium: 32px; --height-for-input: 40px; --height-for-input-as-small: 32px; - --placeholder-font-color-for-input: hsl(232, 18%, 60%); - --font-size-for-button: 0.875rem; - --font-size-for-input: 1rem; - --padding-for-input: 0 var(--spacing-30); - --padding-for-input-as-quiet: 0 var(--spacing-20); - --padding-for-button: 0 var(--spacing-30); --shadow-for-input: none; --shadow-for-input-when-focused: inset 0 0 0 1px var(--color-primary); --shadow-for-input-when-error: inset 0 0 0 1px var(--color-error); diff --git a/design-system/materials/internals/definition.yaml b/design-system/materials/internals/definition.yaml index e628307263..343dce6a98 100644 --- a/design-system/materials/internals/definition.yaml +++ b/design-system/materials/internals/definition.yaml @@ -36,54 +36,54 @@ choiceGroupsByTheme: prefix: color description: All colors in the system choices: - color-primary: 'hsl(175, 55%, 45%)' - 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%)' - 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%)' # This design token is not used in the default theme; it's included only for export purposes + color-primary: 'hsl(240, 64%, 58%)' + color-primary-10: 'hsl(240, 66%, 19%)' + color-primary-20: 'hsl(240, 45%, 33%)' + color-primary-25: 'hsl(240, 46%, 48%)' + color-primary-30: 'hsl(240, 46%, 53%)' + color-primary-40: 'hsl(240, 100%, 67%)' + color-primary-85: 'hsl(244, 100%, 84%)' + color-primary-90: 'hsl(243, 100%, 93%)' + color-primary-95: 'hsl(244, 100%, 97%)' + color-primary-98: 'hsl(244, 100%, 99%)' color-accent: '#213c45' - color-accent-10: 'hsl(195, 35.2941176471%, 10%)' - color-accent-20: 'hsl(195, 35.2941176471%, 20%)' - color-accent-30: 'hsl(195, 35.2941176471%, 30%)' - color-accent-40: 'hsl(195, 35.2941176471%, 40%)' - color-accent-50: 'hsl(195, 35%, 50%)' - color-accent-60: 'hsl(195, 35.2941176471%, 60%)' - color-accent-85: 'hsl(195, 35%, 85%)' - color-accent-90: 'hsl(195, 35.2941176471%, 90%)' - color-accent-95: 'hsl(195, 35.2941176471%, 95%)' - color-accent-98: 'hsl(195, 35.2941176471%, 98%)' - color-brown-10: 'hsl(35, 90%, 10%)' - color-brown-20: 'hsl(35, 50%, 20%)' - color-brown-35: 'hsl(35, 25%, 35%)' - color-brown-50: 'hsl(35, 30%, 50%)' - color-brown-70: 'hsl(35, 40%, 70%)' - color-brown-85: 'hsl(35, 60%, 85%)' - color-brown-90: 'hsl(35, 90%, 90%)' - color-brown-95: 'hsl(35, 80%, 95%)' - color-brown-98: 'hsl(35, 90%, 98%)' - color-purple-10: 'hsl(248, 90%, 10%)' + color-accent-10: 'hsl(195, 100%, 10%)' + color-accent-20: 'hsl(195, 80%, 20%)' + color-accent-30: 'hsl(195, 70%, 30%)' + color-accent-40: 'hsl(195, 70%, 40%)' + color-accent-50: 'hsl(195, 70%, 50%)' + color-accent-60: 'hsl(195, 70%, 60%)' + color-accent-85: 'hsl(195, 85%, 85%)' + color-accent-90: 'hsl(195, 90%, 90%)' + color-accent-95: 'hsl(195, 95%, 95%)' + color-accent-98: 'hsl(195, 100%, 98%)' + color-brown-10: 'hsl(41, 100%, 10%)' + color-brown-20: 'hsl(41, 100%, 20%)' + color-brown-35: 'hsl(41, 96%, 35%)' + color-brown-50: 'hsl(41, 95%, 44%)' + color-brown-70: 'hsl(47, 95%, 70%)' + color-brown-85: 'hsl(47, 100%, 85%)' + color-brown-90: 'hsl(47, 100%, 90%)' + color-brown-95: 'hsl(47, 100%, 95%)' + color-brown-98: 'hsl(48, 100%, 97%)' + color-purple-10: 'hsl(248, 88%, 10%)' color-purple-20: 'hsl(248, 50%, 20%)' color-purple-35: 'hsl(248, 25%, 35%)' - color-purple-50: 'hsl(248, 30%,50%)' - color-purple-70: 'hsl(248, 40%, 70%)' - color-purple-85: 'hsl(248, 60%, 85%)' - color-purple-90: 'hsl(248, 50%, 90%)' - color-purple-95: 'hsl(248, 80%, 95%)' - color-purple-98: 'hsl(248, 90%, 98%)' - color-turquoise-10: 'hsl(180, 90%, 10%)' - color-turquoise-20: 'hsl(180, 50%, 20%)' - color-turquoise-35: 'hsl(180, 25%, 35%)' - color-turquoise-50: 'hsl(180, 30%, 45%)' - color-turquoise-70: 'hsl(180, 40%, 70%)' - color-turquoise-85: 'hsl(180, 60%, 85%)' - color-turquoise-90: 'hsl(180, 40%, 90%)' - color-turquoise-95: 'hsl(180, 80%, 95%)' - color-turquoise-98: 'hsl(180, 90%, 98%)' + color-purple-50: 'hsl(248, 64%, 58%)' + color-purple-70: 'hsl(248, 80%, 70%)' + color-purple-85: 'hsl(249, 100%, 85%)' + color-purple-90: 'hsl(248, 100%, 90%)' + color-purple-95: 'hsl(248, 100%, 95%)' + color-purple-98: 'hsl(246, 100%, 98%)' + color-turquoise-10: 'hsl(180, 88%, 10%)' + color-turquoise-20: 'hsl(180, 90%, 20%)' + color-turquoise-35: 'hsl(178, 88%, 35%)' + color-turquoise-50: 'hsl(178, 67%, 50%)' + color-turquoise-70: 'hsl(180, 75%, 70%)' + color-turquoise-85: 'hsl(180, 90%, 85%)' + color-turquoise-90: 'hsl(180, 88%, 90%)' + color-turquoise-95: 'hsl(180, 88%, 95%)' + color-turquoise-98: 'hsl(180, 100%, 98%)' color-neutral: 'hsl(232, 18%, 80%)' color-neutral-05: 'hsl(0deg 0% 80% / 5%)' color-neutral-10: 'hsl(0deg 0% 80% / 10%)' @@ -99,28 +99,28 @@ choiceGroupsByTheme: color-info-85: 'hsl(203.05555555555554, 93.9130434783%, 85%)' color-info-90: '#CEEBFD' color-info-95: 'hsl(203.05555555555554, 93.9130434783%, 95%)' - color-warning: '#f16d0e' - color-warning-25: 'hsl(25.110132158590307, 89.0196078431%, 25%)' - color-warning-40: 'hsl(25.110132158590307, 89.0196078431%, 40%)' - color-warning-60: 'hsl(25.110132158590307, 90%, 60%)' # 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' - color-error-25: 'hsl(339.1304347826087, 100%, 25%)' - color-error-40: 'hsl(339.1304347826087, 100%, 40%)' - color-error-85: 'hsl(339.1304347826087, 100%, 85%)' - color-error-95: 'hsl(339.1304347826087, 100%, 95%)' + color-warning: 'hsl(35, 90%, 45%)' + color-warning-25: 'hsl(33, 83%, 25%)' + color-warning-40: 'hsl(33, 80%, 34%)' + color-warning-60: 'hsl(35, 90%, 55%)' + color-warning-85: 'hsl(33, 90%, 80%)' + color-warning-95: 'hsl(45, 100%, 92%)' + color-error: 'hsl(3, 65%, 58%)' + color-error-25: 'hsl(4, 69%, 37%)' + color-error-40: 'hsl(3, 60%, 46%)' + color-error-85: 'hsl(1, 55%, 74%)' + color-error-95: 'hsl(349, 66%, 92%)' color-solid: '#1a1a1a' color-solid-02: 'hsl(0deg 0% 10% / 2%)' color-solid-05: 'hsl(0deg 0% 10% / 5%)' 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 - 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 + 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%)' borderRadiuses: label: Border Radiuses @@ -273,76 +273,6 @@ choiceGroupsByTheme: break-point-giantdesktop: 1680px break-point-jumbodesktop: 1920px - recolouring: - colors: - label: Colors - prefix: color - description: All colors in the system - choices: - color-primary: 'hsl(240, 64%, 58%)' - color-primary-10: 'hsl(240, 66%, 19%)' - color-primary-20: 'hsl(240, 45%, 33%)' - color-primary-25: 'hsl(240, 46%, 48%)' - color-primary-30: 'hsl(240, 46%, 53%)' - color-primary-40: 'hsl(240, 100%, 67%)' - color-primary-85: 'hsl(244, 100%, 84%)' - color-primary-90: 'hsl(243, 100%, 93%)' - color-primary-95: 'hsl(244, 100%, 97%)' - color-primary-98: 'hsl(244, 100%, 99%)' - color-accent-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%)' - color-success-85: 'hsl(144, 69%, 80%)' - color-success-95: 'hsl(141, 76%, 92%)' - color-warning: 'hsl(35, 90%, 45%)' - color-warning-25: 'hsl(33, 83%, 25%)' - color-warning-40: 'hsl(33, 80%, 34%)' - color-warning-60: 'hsl(35, 90%, 55%)' - color-warning-85: 'hsl(33, 90%, 80%)' - color-warning-95: 'hsl(45, 100%, 92%)' - color-error: 'hsl(3, 65%, 58%)' - color-error-25: 'hsl(4, 69%, 37%)' - color-error-40: 'hsl(3, 60%, 46%)' - color-error-85: 'hsl(1, 55%, 74%)' - color-error-95: 'hsl(349, 66%, 92%)' - states: active: description: 'Trigged while the user is currently interacting with the element' @@ -350,22 +280,16 @@ 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: description: 'When the element can not be modified' - info: - description: 'When the element has an info state' warning: description: 'When the element shows a warning state' success: description: 'When the element has a successful state' error: description: 'When the element has invalid input' - selected: - description: 'When the element is selected' variants: small: @@ -374,66 +298,16 @@ variants: description: 'To differentiate component medium size' big: 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' - turquoise: - description: 'To differentiate component turquoise type' componentGroups: button: description: 'Button elements' - icon-button: - description: 'Icon button elements' input: 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' - 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: @@ -441,91 +315,26 @@ decisionGroupsByTheme: label: Background Colors prefix: background-color decisions: - background-color-for-button-when-active: - choice: color-neutral-95 - background-color-for-button-when-hovered: - choice: color-neutral-98 - background-color-for-button-when-disabled: - choice: color-accent-95 - background-color-for-icon-button-when-disabled: - choice: color-accent-95 background-color-for-input: choice: color-surface - background-color-for-input-when-selected: - choice: color-accent-95 background-color-for-input-when-disabled: choice: color-neutral-95 - background-color-for-input-when-hovered: - choice: color-neutral-98 - background-color-for-input-when-focused: - choice: color-surface background-color-for-input-when-readonly: choice: color-neutral-95 - background-color-for-input-when-active: - choice: color-info-95 - background-color-for-input-as-quiet: - choice: color-transparent - background-color-for-input-as-quiet-when-hovered: - choice: color-solid-02 + background-color-for-input-when-hovered: + choice: color-primary-98 background-color-for-localized-input-label: choice: color-surface background-color-for-localized-input-label-when-readonly: 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: + background-color-for-button-when-active: 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-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: + background-color-for-button-when-hovered: 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: + background-color-for-button-when-disabled: 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 @@ -533,8 +342,6 @@ decisionGroupsByTheme: decisions: border-color-for-input: choice: color-neutral - border-color-for-input-when-focused: - choice: color-primary border-color-for-input-when-disabled: choice: color-neutral border-color-for-input-when-readonly: @@ -545,46 +352,18 @@ decisionGroupsByTheme: choice: color-warning border-color-for-input-when-hovered: choice: color-neutral - border-color-for-input-as-quiet: - choice: color-transparent - # recolouring rollout + border-color-for-input-when-focused: + choice: color-primary-40 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 prefix: border-radius decisions: - border-radius-for-button-as-big: - choice: border-radius-4 - border-radius-for-button-as-medium: - choice: border-radius-4 border-radius-for-input: choice: border-radius-4 - borderWidths: - label: Border width - prefix: border-width - decisions: - border-width-for-input: - choice: border-width-1 - border-width-for-input-when-warning: - choice: border-width-1 - border-width-for-input-when-error: - choice: border-width-1 - border-width-for-input-when-focused: - choice: border-width-1 - fontColors: label: Font Colors prefix: font-color @@ -594,32 +373,13 @@ decisionGroupsByTheme: font-color-for-input-when-disabled: choice: color-neutral-60 font-color-for-input-when-error: - choice: color-error + choice: color-error-40 font-color-for-input-when-readonly: 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 - 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 @@ -627,10 +387,10 @@ decisionGroupsByTheme: decisions: height-for-button-as-big: choice: '40px' - height-for-button-as-medium: - choice: '32px' height-for-button-as-small: choice: '16px' + height-for-button-as-medium: + choice: '32px' height-for-input: choice: '40px' # This is a temporary one to be able to remove the legay 'size-height-for-input' @@ -638,34 +398,6 @@ decisionGroupsByTheme: choice: '32px' description: 'Legacy token to be removed' - placeholderFontColors: - label: Placeholder font colors - prefix: placeholder-font-color - decisions: - placeholder-font-color-for-input: - description: '' - choice: color-neutral-60 - - fontSizes: - label: Font Sizes - prefix: font-size - decisions: - font-size-for-button: - choice: font-size-20 - font-size-for-input: - choice: font-size-30 - - paddings: - label: Paddings - prefix: padding - decisions: - padding-for-input: - choice: '0 var(--spacing-30)' - padding-for-input-as-quiet: - choice: '0 var(--spacing-20)' - padding-for-button: - choice: '0 var(--spacing-30)' - shadows: label: Shadows prefix: shadow @@ -678,121 +410,3 @@ 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-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 - 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-icon-button-when-disabled: - choice: 'color-transparent' - 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-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 - 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 - 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/src/design-tokens.ts b/design-system/src/design-tokens.ts index 546333245a..1a2408f630 100644 --- a/design-system/src/design-tokens.ts +++ b/design-system/src/design-tokens.ts @@ -5,54 +5,54 @@ */ export const themes = { default: { - colorPrimary: 'hsl(175, 55%, 45%)', - colorPrimary10: 'hsl(175, 55%, 10%)', - colorPrimary20: 'hsl(175, 55%, 20%)', - colorPrimary25: 'hsl(175, 55%, 25%)', - colorPrimary30: 'hsl(175, 55%, 30%)', - colorPrimary40: 'hsl(175, 55%, 40%)', - colorPrimary85: 'hsl(175, 70%, 85%)', - colorPrimary90: 'hsl(175, 70%, 90%)', - colorPrimary95: 'hsl(175, 90%, 95%)', - colorPrimary98: 'hsl(175, 100%, 99%)', + colorPrimary: 'hsl(240, 64%, 58%)', + colorPrimary10: 'hsl(240, 66%, 19%)', + colorPrimary20: 'hsl(240, 45%, 33%)', + colorPrimary25: 'hsl(240, 46%, 48%)', + colorPrimary30: 'hsl(240, 46%, 53%)', + colorPrimary40: 'hsl(240, 100%, 67%)', + colorPrimary85: 'hsl(244, 100%, 84%)', + colorPrimary90: 'hsl(243, 100%, 93%)', + colorPrimary95: 'hsl(244, 100%, 97%)', + colorPrimary98: 'hsl(244, 100%, 99%)', colorAccent: '#213c45', - colorAccent10: 'hsl(195, 35.2941176471%, 10%)', - colorAccent20: 'hsl(195, 35.2941176471%, 20%)', - colorAccent30: 'hsl(195, 35.2941176471%, 30%)', - colorAccent40: 'hsl(195, 35.2941176471%, 40%)', - colorAccent50: 'hsl(195, 35%, 50%)', - colorAccent60: 'hsl(195, 35.2941176471%, 60%)', - colorAccent85: 'hsl(195, 35%, 85%)', - colorAccent90: 'hsl(195, 35.2941176471%, 90%)', - colorAccent95: 'hsl(195, 35.2941176471%, 95%)', - colorAccent98: 'hsl(195, 35.2941176471%, 98%)', - colorBrown10: 'hsl(35, 90%, 10%)', - colorBrown20: 'hsl(35, 50%, 20%)', - colorBrown35: 'hsl(35, 25%, 35%)', - colorBrown50: 'hsl(35, 30%, 50%)', - colorBrown70: 'hsl(35, 40%, 70%)', - colorBrown85: 'hsl(35, 60%, 85%)', - colorBrown90: 'hsl(35, 90%, 90%)', - colorBrown95: 'hsl(35, 80%, 95%)', - colorBrown98: 'hsl(35, 90%, 98%)', - colorPurple10: 'hsl(248, 90%, 10%)', + 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, 30%,50%)', - colorPurple70: 'hsl(248, 40%, 70%)', - colorPurple85: 'hsl(248, 60%, 85%)', - colorPurple90: 'hsl(248, 50%, 90%)', - colorPurple95: 'hsl(248, 80%, 95%)', - colorPurple98: 'hsl(248, 90%, 98%)', - colorTurquoise10: 'hsl(180, 90%, 10%)', - colorTurquoise20: 'hsl(180, 50%, 20%)', - colorTurquoise35: 'hsl(180, 25%, 35%)', - colorTurquoise50: 'hsl(180, 30%, 45%)', - colorTurquoise70: 'hsl(180, 40%, 70%)', - colorTurquoise85: 'hsl(180, 60%, 85%)', - colorTurquoise90: 'hsl(180, 40%, 90%)', - colorTurquoise95: 'hsl(180, 80%, 95%)', - colorTurquoise98: 'hsl(180, 90%, 98%)', + 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%)', colorNeutral: 'hsl(232, 18%, 80%)', colorNeutral05: 'hsl(0deg 0% 80% / 5%)', colorNeutral10: 'hsl(0deg 0% 80% / 10%)', @@ -68,17 +68,17 @@ export const themes = { colorInfo85: 'hsl(203.05555555555554, 93.9130434783%, 85%)', colorInfo90: '#CEEBFD', colorInfo95: 'hsl(203.05555555555554, 93.9130434783%, 95%)', - colorWarning: '#f16d0e', - colorWarning25: 'hsl(25.110132158590307, 89.0196078431%, 25%)', - colorWarning40: 'hsl(25.110132158590307, 89.0196078431%, 40%)', - colorWarning60: 'hsl(25.110132158590307, 90%, 60%)', - colorWarning85: 'hsl(25.110132158590307, 89.0196078431%, 85%)', - colorWarning95: 'hsl(25.110132158590307, 89.0196078431%, 95%)', - colorError: '#e60050', - colorError25: 'hsl(339.1304347826087, 100%, 25%)', - colorError40: 'hsl(339.1304347826087, 100%, 40%)', - colorError85: 'hsl(339.1304347826087, 100%, 85%)', - colorError95: 'hsl(339.1304347826087, 100%, 95%)', + colorWarning: 'hsl(35, 90%, 45%)', + colorWarning25: 'hsl(33, 83%, 25%)', + colorWarning40: 'hsl(33, 80%, 34%)', + colorWarning60: 'hsl(35, 90%, 55%)', + colorWarning85: 'hsl(33, 90%, 80%)', + colorWarning95: 'hsl(45, 100%, 92%)', + colorError: 'hsl(3, 65%, 58%)', + colorError25: 'hsl(4, 69%, 37%)', + colorError40: 'hsl(3, 60%, 46%)', + colorError85: 'hsl(1, 55%, 74%)', + colorError95: 'hsl(349, 66%, 92%)', colorSolid: '#1a1a1a', colorSolid02: 'hsl(0deg 0% 10% / 2%)', colorSolid05: 'hsl(0deg 0% 10% / 5%)', @@ -192,269 +192,92 @@ export const themes = { breakPointBiggerdesktop: '1280px', breakPointGiantdesktop: '1680px', breakPointJumbodesktop: '1920px', - backgroundColorForButtonWhenActive: 'hsl(232, 18%, 95%)', - backgroundColorForButtonWhenHovered: 'hsl(232, 18%, 98%)', - backgroundColorForButtonWhenDisabled: 'hsl(195, 35.2941176471%, 95%)', - backgroundColorForIconButtonWhenDisabled: 'hsl(195, 35.2941176471%, 95%)', backgroundColorForInput: '#fff', - backgroundColorForInputWhenSelected: 'hsl(195, 35.2941176471%, 95%)', backgroundColorForInputWhenDisabled: 'hsl(232, 18%, 95%)', - backgroundColorForInputWhenHovered: 'hsl(232, 18%, 98%)', - backgroundColorForInputWhenFocused: '#fff', backgroundColorForInputWhenReadonly: 'hsl(232, 18%, 95%)', - backgroundColorForInputWhenActive: - 'hsl(203.05555555555554, 93.9130434783%, 95%)', - backgroundColorForInputAsQuiet: 'transparent', - backgroundColorForInputAsQuietWhenHovered: 'hsl(0deg 0% 10% / 2%)', + backgroundColorForInputWhenHovered: 'hsl(244, 100%, 99%)', backgroundColorForLocalizedInputLabel: '#fff', backgroundColorForLocalizedInputLabelWhenReadonly: 'hsl(232, 18%, 95%)', backgroundColorForLocalizedInputLabelWhenDisabled: 'hsl(232, 18%, 95%)', - backgroundColorForButtonAsPrimary: '#15a390', - backgroundColorForButtonAsPrimaryWhenHovered: 'hsl(175, 55%, 45%)', - backgroundColorForButtonAsPrimaryAsDefaultWhenHovered: '#17ab97', - backgroundColorForButtonAsPrimaryAsDefaultWhenActive: '#15a390', - backgroundColorForButtonAsPrimaryAsUrgent: '#f16d0e', - backgroundColorForStampAsPrimary: 'hsl(175, 70%, 90%)', - backgroundColorForStampAsPositive: 'hsl(175, 70%, 90%)', - backgroundColorForToggleThumbWhenActive: 'hsl(175, 55%, 25%)', - backgroundColorForToggleTrackWhenActive: 'hsl(175, 55%, 40%)', - 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%)', + backgroundColorForButtonWhenActive: 'hsl(243, 100%, 93%)', + backgroundColorForButtonWhenHovered: 'hsl(244, 100%, 97%)', + backgroundColorForButtonWhenDisabled: 'hsl(232, 18%, 95%)', borderColorForInput: 'hsl(232, 18%, 80%)', - borderColorForInputWhenFocused: 'hsl(175, 55%, 45%)', borderColorForInputWhenDisabled: 'hsl(232, 18%, 80%)', borderColorForInputWhenReadonly: '#fff', - borderColorForInputWhenError: '#e60050', - borderColorForInputWhenWarning: '#f16d0e', + borderColorForInputWhenError: 'hsl(3, 65%, 58%)', + borderColorForInputWhenWarning: 'hsl(35, 90%, 45%)', 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', + borderColorForInputWhenFocused: 'hsl(240, 100%, 67%)', + borderColorForButtonAsSecondary: 'hsl(244, 100%, 84%)', borderRadiusForInput: '4px', - borderWidthForInput: '1px', - borderWidthForInputWhenWarning: '1px', - borderWidthForInputWhenError: '1px', - borderWidthForInputWhenFocused: '1px', fontColorForInput: '#1a1a1a', fontColorForInputWhenDisabled: 'hsl(232, 18%, 60%)', - fontColorForInputWhenError: '#e60050', + fontColorForInputWhenError: 'hsl(3, 60%, 46%)', fontColorForInputWhenReadonly: 'hsl(232, 18%, 40%)', - fontColorForInputWhenWarning: '#f16d0e', - fontColorForButtonAsSecondary: '#1a1a1a', - fontColorForButtonAsFlatWhenHovered: 'hsl(175, 55%, 45%)', - fontColorForButtonAsFlatAsCritical: '#e60050', - fontColorForButtonAsFlatAsCriticalWhenHovered: - 'hsl(339.1304347826087, 100%, 25%)', - 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%)', + fontColorForInputWhenWarning: 'hsl(35, 90%, 45%)', + fontColorForButtonAsSecondary: 'hsl(240, 64%, 58%)', heightForButtonAsBig: '40px', - heightForButtonAsMedium: '32px', heightForButtonAsSmall: '16px', + heightForButtonAsMedium: '32px', heightForInput: '40px', heightForInputAsSmall: '32px', - placeholderFontColorForInput: 'hsl(232, 18%, 60%)', - fontSizeForButton: '0.875rem', - fontSizeForInput: '1rem', - paddingForInput: '0 var(--spacing-30)', - paddingForInputAsQuiet: '0 var(--spacing-20)', - paddingForButton: '0 var(--spacing-30)', shadowForInput: 'none', shadowForInputWhenFocused: 'inset 0 0 0 1px var(--color-primary)', shadowForInputWhenError: 'inset 0 0 0 1px var(--color-error)', shadowForInputWhenWarning: 'inset 0 0 0 1px var(--color-warning)', }, - recolouring: { - colorPrimary: 'hsl(240, 64%, 58%)', - colorPrimary10: 'hsl(240, 66%, 19%)', - colorPrimary20: 'hsl(240, 45%, 33%)', - colorPrimary25: 'hsl(240, 46%, 48%)', - colorPrimary30: 'hsl(240, 46%, 53%)', - colorPrimary40: 'hsl(240, 100%, 67%)', - 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%)', - colorSuccess85: 'hsl(144, 69%, 80%)', - colorSuccess95: 'hsl(141, 76%, 92%)', - colorWarning: 'hsl(35, 90%, 45%)', - colorWarning25: 'hsl(33, 83%, 25%)', - colorWarning40: 'hsl(33, 80%, 34%)', - colorWarning60: 'hsl(35, 90%, 55%)', - colorWarning85: 'hsl(33, 90%, 80%)', - colorWarning95: 'hsl(45, 100%, 92%)', - colorError: 'hsl(3, 65%, 58%)', - colorError25: 'hsl(4, 69%, 37%)', - colorError40: 'hsl(3, 60%, 46%)', - 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%)', - backgroundColorForIconButtonWhenDisabled: 'transparent', - backgroundColorForButtonAsPrimary: 'hsl(240, 64%, 58%)', - backgroundColorForButtonAsPrimaryWhenHovered: 'hsl(240, 100%, 67%)', - backgroundColorForButtonAsPrimaryAsDefaultWhenHovered: - 'hsl(240, 100%, 67%)', - backgroundColorForButtonAsPrimaryAsDefaultWhenActive: 'hsl(240, 46%, 48%)', - backgroundColorForButtonAsPrimaryAsUrgent: 'hsl(35, 90%, 55%)', - backgroundColorForInputWhenSelected: 'hsl(244, 100%, 97%)', - backgroundColorForStampAsPrimary: 'hsl(244, 100%, 97%)', - backgroundColorForStampAsPositive: 'hsl(141, 76%, 92%)', - backgroundColorForToggleThumbWhenActive: 'hsl(240, 100%, 67%)', - backgroundColorForToggleTrackWhenActive: 'hsl(244, 100%, 84%)', - 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%)', - fontColorForButtonAsFlatAsCriticalWhenHovered: 'hsl(3, 65%, 58%)', - fontColorForViewSwitcherButton: 'hsl(240, 64%, 58%)', - 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(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%))', - colorPrimary40: 'var(--color-primary-40, hsl(175, 55%, 40%))', - 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%))', + colorPrimary: 'var(--color-primary, hsl(240, 64%, 58%))', + colorPrimary10: 'var(--color-primary-10, hsl(240, 66%, 19%))', + colorPrimary20: 'var(--color-primary-20, hsl(240, 45%, 33%))', + colorPrimary25: 'var(--color-primary-25, hsl(240, 46%, 48%))', + colorPrimary30: 'var(--color-primary-30, hsl(240, 46%, 53%))', + colorPrimary40: 'var(--color-primary-40, hsl(240, 100%, 67%))', + colorPrimary85: 'var(--color-primary-85, hsl(244, 100%, 84%))', + colorPrimary90: 'var(--color-primary-90, hsl(243, 100%, 93%))', + colorPrimary95: 'var(--color-primary-95, hsl(244, 100%, 97%))', + colorPrimary98: 'var(--color-primary-98, hsl(244, 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%))', - colorAccent30: 'var(--color-accent-30, hsl(195, 35.2941176471%, 30%))', - colorAccent40: 'var(--color-accent-40, hsl(195, 35.2941176471%, 40%))', - colorAccent50: 'var(--color-accent-50, hsl(195, 35%, 50%))', - colorAccent60: 'var(--color-accent-60, hsl(195, 35.2941176471%, 60%))', - colorAccent85: 'var(--color-accent-85, hsl(195, 35%, 85%))', - colorAccent90: 'var(--color-accent-90, hsl(195, 35.2941176471%, 90%))', - colorAccent95: 'var(--color-accent-95, hsl(195, 35.2941176471%, 95%))', - colorAccent98: 'var(--color-accent-98, hsl(195, 35.2941176471%, 98%))', - colorBrown10: 'var(--color-brown-10, hsl(35, 90%, 10%))', - colorBrown20: 'var(--color-brown-20, hsl(35, 50%, 20%))', - colorBrown35: 'var(--color-brown-35, hsl(35, 25%, 35%))', - colorBrown50: 'var(--color-brown-50, hsl(35, 30%, 50%))', - colorBrown70: 'var(--color-brown-70, hsl(35, 40%, 70%))', - colorBrown85: 'var(--color-brown-85, hsl(35, 60%, 85%))', - colorBrown90: 'var(--color-brown-90, hsl(35, 90%, 90%))', - colorBrown95: 'var(--color-brown-95, hsl(35, 80%, 95%))', - colorBrown98: 'var(--color-brown-98, hsl(35, 90%, 98%))', - colorPurple10: 'var(--color-purple-10, hsl(248, 90%, 10%))', + colorAccent10: 'var(--color-accent-10, hsl(195, 100%, 10%))', + colorAccent20: 'var(--color-accent-20, hsl(195, 80%, 20%))', + colorAccent30: 'var(--color-accent-30, hsl(195, 70%, 30%))', + colorAccent40: 'var(--color-accent-40, hsl(195, 70%, 40%))', + colorAccent50: 'var(--color-accent-50, hsl(195, 70%, 50%))', + colorAccent60: 'var(--color-accent-60, hsl(195, 70%, 60%))', + colorAccent85: 'var(--color-accent-85, hsl(195, 85%, 85%))', + colorAccent90: 'var(--color-accent-90, hsl(195, 90%, 90%))', + colorAccent95: 'var(--color-accent-95, hsl(195, 95%, 95%))', + colorAccent98: 'var(--color-accent-98, hsl(195, 100%, 98%))', + colorBrown10: 'var(--color-brown-10, hsl(41, 100%, 10%))', + colorBrown20: 'var(--color-brown-20, hsl(41, 100%, 20%))', + colorBrown35: 'var(--color-brown-35, hsl(41, 96%, 35%))', + colorBrown50: 'var(--color-brown-50, hsl(41, 95%, 44%))', + colorBrown70: 'var(--color-brown-70, hsl(47, 95%, 70%))', + colorBrown85: 'var(--color-brown-85, hsl(47, 100%, 85%))', + colorBrown90: 'var(--color-brown-90, hsl(47, 100%, 90%))', + colorBrown95: 'var(--color-brown-95, hsl(47, 100%, 95%))', + colorBrown98: 'var(--color-brown-98, hsl(48, 100%, 97%))', + colorPurple10: 'var(--color-purple-10, hsl(248, 88%, 10%))', colorPurple20: 'var(--color-purple-20, hsl(248, 50%, 20%))', colorPurple35: 'var(--color-purple-35, hsl(248, 25%, 35%))', - colorPurple50: 'var(--color-purple-50, hsl(248, 30%,50%))', - colorPurple70: 'var(--color-purple-70, hsl(248, 40%, 70%))', - colorPurple85: 'var(--color-purple-85, hsl(248, 60%, 85%))', - colorPurple90: 'var(--color-purple-90, hsl(248, 50%, 90%))', - colorPurple95: 'var(--color-purple-95, hsl(248, 80%, 95%))', - colorPurple98: 'var(--color-purple-98, hsl(248, 90%, 98%))', - colorTurquoise10: 'var(--color-turquoise-10, hsl(180, 90%, 10%))', - colorTurquoise20: 'var(--color-turquoise-20, hsl(180, 50%, 20%))', - colorTurquoise35: 'var(--color-turquoise-35, hsl(180, 25%, 35%))', - colorTurquoise50: 'var(--color-turquoise-50, hsl(180, 30%, 45%))', - colorTurquoise70: 'var(--color-turquoise-70, hsl(180, 40%, 70%))', - colorTurquoise85: 'var(--color-turquoise-85, hsl(180, 60%, 85%))', - colorTurquoise90: 'var(--color-turquoise-90, hsl(180, 40%, 90%))', - colorTurquoise95: 'var(--color-turquoise-95, hsl(180, 80%, 95%))', - colorTurquoise98: 'var(--color-turquoise-98, hsl(180, 90%, 98%))', + colorPurple50: 'var(--color-purple-50, hsl(248, 64%, 58%))', + colorPurple70: 'var(--color-purple-70, hsl(248, 80%, 70%))', + colorPurple85: 'var(--color-purple-85, hsl(249, 100%, 85%))', + colorPurple90: 'var(--color-purple-90, hsl(248, 100%, 90%))', + colorPurple95: 'var(--color-purple-95, hsl(248, 100%, 95%))', + colorPurple98: 'var(--color-purple-98, hsl(246, 100%, 98%))', + colorTurquoise10: 'var(--color-turquoise-10, hsl(180, 88%, 10%))', + colorTurquoise20: 'var(--color-turquoise-20, hsl(180, 90%, 20%))', + colorTurquoise35: 'var(--color-turquoise-35, hsl(178, 88%, 35%))', + colorTurquoise50: 'var(--color-turquoise-50, hsl(178, 67%, 50%))', + colorTurquoise70: 'var(--color-turquoise-70, hsl(180, 75%, 70%))', + colorTurquoise85: 'var(--color-turquoise-85, hsl(180, 90%, 85%))', + colorTurquoise90: 'var(--color-turquoise-90, hsl(180, 88%, 90%))', + colorTurquoise95: 'var(--color-turquoise-95, hsl(180, 88%, 95%))', + colorTurquoise98: 'var(--color-turquoise-98, hsl(180, 100%, 98%))', colorNeutral: 'var(--color-neutral, hsl(232, 18%, 80%))', colorNeutral05: 'var(--color-neutral-05, hsl(0deg 0% 80% / 5%))', colorNeutral10: 'var(--color-neutral-10, hsl(0deg 0% 80% / 10%))', @@ -474,21 +297,17 @@ const designTokens = { colorInfo90: 'var(--color-info-90, #CEEBFD)', colorInfo95: 'var(--color-info-95, hsl(203.05555555555554, 93.9130434783%, 95%))', - colorWarning: 'var(--color-warning, #f16d0e)', - colorWarning25: - '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(25.110132158590307, 90%, 60%))', - colorWarning85: - 'var(--color-warning-85, hsl(25.110132158590307, 89.0196078431%, 85%))', - colorWarning95: - 'var(--color-warning-95, hsl(25.110132158590307, 89.0196078431%, 95%))', - colorError: 'var(--color-error, #e60050)', - colorError25: 'var(--color-error-25, hsl(339.1304347826087, 100%, 25%))', - colorError40: 'var(--color-error-40, hsl(339.1304347826087, 100%, 40%))', - colorError85: 'var(--color-error-85, hsl(339.1304347826087, 100%, 85%))', - colorError95: 'var(--color-error-95, hsl(339.1304347826087, 100%, 95%))', + colorWarning: 'var(--color-warning, hsl(35, 90%, 45%))', + colorWarning25: 'var(--color-warning-25, hsl(33, 83%, 25%))', + colorWarning40: 'var(--color-warning-40, hsl(33, 80%, 34%))', + colorWarning60: 'var(--color-warning-60, hsl(35, 90%, 55%))', + colorWarning85: 'var(--color-warning-85, hsl(33, 90%, 80%))', + colorWarning95: 'var(--color-warning-95, hsl(45, 100%, 92%))', + colorError: 'var(--color-error, hsl(3, 65%, 58%))', + colorError25: 'var(--color-error-25, hsl(4, 69%, 37%))', + colorError40: 'var(--color-error-40, hsl(3, 60%, 46%))', + colorError85: 'var(--color-error-85, hsl(1, 55%, 74%))', + colorError95: 'var(--color-error-95, hsl(349, 66%, 92%))', colorSolid: 'var(--color-solid, #1a1a1a)', colorSolid02: 'var(--color-solid-02, hsl(0deg 0% 10% / 2%))', colorSolid05: 'var(--color-solid-05, hsl(0deg 0% 10% / 5%))', @@ -609,163 +428,57 @@ const designTokens = { breakPointBiggerdesktop: 'var(--break-point-biggerdesktop, 1280px)', breakPointGiantdesktop: 'var(--break-point-giantdesktop, 1680px)', breakPointJumbodesktop: 'var(--break-point-jumbodesktop, 1920px)', - backgroundColorForButtonWhenActive: - 'var(--background-color-for-button-when-active, hsl(232, 18%, 95%))', - backgroundColorForButtonWhenHovered: - 'var(--background-color-for-button-when-hovered, hsl(232, 18%, 98%))', - backgroundColorForButtonWhenDisabled: - 'var(--background-color-for-button-when-disabled, hsl(195, 35.2941176471%, 95%))', - backgroundColorForIconButtonWhenDisabled: - 'var(--background-color-for-icon-button-when-disabled, hsl(195, 35.2941176471%, 95%))', backgroundColorForInput: 'var(--background-color-for-input, #fff)', - backgroundColorForInputWhenSelected: - 'var(--background-color-for-input-when-selected, hsl(195, 35.2941176471%, 95%))', backgroundColorForInputWhenDisabled: 'var(--background-color-for-input-when-disabled, hsl(232, 18%, 95%))', - backgroundColorForInputWhenHovered: - 'var(--background-color-for-input-when-hovered, hsl(232, 18%, 98%))', - backgroundColorForInputWhenFocused: - 'var(--background-color-for-input-when-focused, #fff)', backgroundColorForInputWhenReadonly: 'var(--background-color-for-input-when-readonly, hsl(232, 18%, 95%))', - backgroundColorForInputWhenActive: - 'var(--background-color-for-input-when-active, hsl(203.05555555555554, 93.9130434783%, 95%))', - backgroundColorForInputAsQuiet: - 'var(--background-color-for-input-as-quiet, transparent)', - backgroundColorForInputAsQuietWhenHovered: - 'var(--background-color-for-input-as-quiet-when-hovered, hsl(0deg 0% 10% / 2%))', + backgroundColorForInputWhenHovered: + 'var(--background-color-for-input-when-hovered, hsl(244, 100%, 99%))', backgroundColorForLocalizedInputLabel: 'var(--background-color-for-localized-input-label, #fff)', backgroundColorForLocalizedInputLabelWhenReadonly: 'var(--background-color-for-localized-input-label-when-readonly, hsl(232, 18%, 95%))', backgroundColorForLocalizedInputLabelWhenDisabled: 'var(--background-color-for-localized-input-label-when-disabled, hsl(232, 18%, 95%))', - backgroundColorForButtonAsPrimary: - 'var(--background-color-for-button-as-primary, #15a390)', - backgroundColorForButtonAsPrimaryWhenHovered: - 'var(--background-color-for-button-as-primary-when-hovered, hsl(175, 55%, 45%))', - backgroundColorForButtonAsPrimaryAsDefaultWhenHovered: - 'var(--background-color-for-button-as-primary-as-default-when-hovered, #17ab97)', - backgroundColorForButtonAsPrimaryAsDefaultWhenActive: - 'var(--background-color-for-button-as-primary-as-default-when-active, #15a390)', - backgroundColorForButtonAsPrimaryAsUrgent: - 'var(--background-color-for-button-as-primary-as-urgent, #f16d0e)', - backgroundColorForStampAsPrimary: - 'var(--background-color-for-stamp-as-primary, hsl(175, 70%, 90%))', - backgroundColorForStampAsPositive: - 'var(--background-color-for-stamp-as-positive, hsl(175, 70%, 90%))', - backgroundColorForToggleThumbWhenActive: - 'var(--background-color-for-toggle-thumb-when-active, hsl(175, 55%, 25%))', - backgroundColorForToggleTrackWhenActive: - 'var(--background-color-for-toggle-track-when-active, hsl(175, 55%, 40%))', - backgroundColorForToggleThumbWhenDisabled: - 'var(--background-color-for-toggle-thumb-when-disabled, hsl(195, 35.2941176471%, 60%))', - backgroundColorForToggleTrackWhenDisabled: - '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%))', + backgroundColorForButtonWhenActive: + 'var(--background-color-for-button-when-active, hsl(243, 100%, 93%))', + backgroundColorForButtonWhenHovered: + 'var(--background-color-for-button-when-hovered, hsl(244, 100%, 97%))', + backgroundColorForButtonWhenDisabled: + 'var(--background-color-for-button-when-disabled, hsl(232, 18%, 95%))', borderColorForInput: 'var(--border-color-for-input, hsl(232, 18%, 80%))', - borderColorForInputWhenFocused: - 'var(--border-color-for-input-when-focused, hsl(175, 55%, 45%))', borderColorForInputWhenDisabled: 'var(--border-color-for-input-when-disabled, hsl(232, 18%, 80%))', borderColorForInputWhenReadonly: 'var(--border-color-for-input-when-readonly, #fff)', borderColorForInputWhenError: - 'var(--border-color-for-input-when-error, #e60050)', + 'var(--border-color-for-input-when-error, hsl(3, 65%, 58%))', borderColorForInputWhenWarning: - 'var(--border-color-for-input-when-warning, #f16d0e)', + 'var(--border-color-for-input-when-warning, hsl(35, 90%, 45%))', borderColorForInputWhenHovered: 'var(--border-color-for-input-when-hovered, hsl(232, 18%, 80%))', - borderColorForInputAsQuiet: - 'var(--border-color-for-input-as-quiet, transparent)', + borderColorForInputWhenFocused: + 'var(--border-color-for-input-when-focused, hsl(240, 100%, 67%))', 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)', + 'var(--border-color-for-button-as-secondary, hsl(244, 100%, 84%))', borderRadiusForInput: 'var(--border-radius-for-input, 4px)', - borderWidthForInput: 'var(--border-width-for-input, 1px)', - borderWidthForInputWhenWarning: - 'var(--border-width-for-input-when-warning, 1px)', - borderWidthForInputWhenError: 'var(--border-width-for-input-when-error, 1px)', - borderWidthForInputWhenFocused: - 'var(--border-width-for-input-when-focused, 1px)', fontColorForInput: 'var(--font-color-for-input, #1a1a1a)', fontColorForInputWhenDisabled: 'var(--font-color-for-input-when-disabled, hsl(232, 18%, 60%))', - fontColorForInputWhenError: 'var(--font-color-for-input-when-error, #e60050)', + fontColorForInputWhenError: + 'var(--font-color-for-input-when-error, hsl(3, 60%, 46%))', fontColorForInputWhenReadonly: 'var(--font-color-for-input-when-readonly, hsl(232, 18%, 40%))', fontColorForInputWhenWarning: - 'var(--font-color-for-input-when-warning, #f16d0e)', + 'var(--font-color-for-input-when-warning, hsl(35, 90%, 45%))', fontColorForButtonAsSecondary: - 'var(--font-color-for-button-as-secondary, #1a1a1a)', - fontColorForButtonAsFlatWhenHovered: - 'var(--font-color-for-button-as-flat-when-hovered, hsl(175, 55%, 45%))', - fontColorForButtonAsFlatAsCritical: - 'var(--font-color-for-button-as-flat-as-critical, #e60050)', - fontColorForButtonAsFlatAsCriticalWhenHovered: - 'var(--font-color-for-button-as-flat-as-critical-when-hovered, hsl(339.1304347826087, 100%, 25%))', - fontColorForViewSwitcherButton: - 'var(--font-color-for-view-switcher-button, hsl(232, 18%, 40%))', - fontColorForStampAsPositive: - '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%))', + 'var(--font-color-for-button-as-secondary, hsl(240, 64%, 58%))', heightForButtonAsBig: 'var(--height-for-button-as-big, 40px)', - heightForButtonAsMedium: 'var(--height-for-button-as-medium, 32px)', heightForButtonAsSmall: 'var(--height-for-button-as-small, 16px)', + heightForButtonAsMedium: 'var(--height-for-button-as-medium, 32px)', heightForInput: 'var(--height-for-input, 40px)', heightForInputAsSmall: 'var(--height-for-input-as-small, 32px)', - placeholderFontColorForInput: - 'var(--placeholder-font-color-for-input, hsl(232, 18%, 60%))', - fontSizeForButton: 'var(--font-size-for-button, 0.875rem)', - fontSizeForInput: 'var(--font-size-for-input, 1rem)', - paddingForInput: 'var(--padding-for-input, 0 var(--spacing-30))', - paddingForInputAsQuiet: - 'var(--padding-for-input-as-quiet, 0 var(--spacing-20))', - paddingForButton: 'var(--padding-for-button, 0 var(--spacing-30))', shadowForInput: 'var(--shadow-for-input, none)', shadowForInputWhenFocused: 'var(--shadow-for-input-when-focused, inset 0 0 0 1px var(--color-primary))', diff --git a/design-system/src/theme-provider.tsx b/design-system/src/theme-provider.tsx index a295835720..cf96ba5e7c 100644 --- a/design-system/src/theme-provider.tsx +++ b/design-system/src/theme-provider.tsx @@ -130,10 +130,11 @@ const useTheme = (parentSelector = defaultParentSelector): TUseThemeResult => { attributeFilter: ['data-theme'], }); + // TODO - make sure old and new theme return same value as new defaultThemeValue + // At least for the remaining places that we still use this function const themedValue: TUseThemeResult['themedValue'] = useCallback( - (defaultThemeValue, newThemeValue) => - theme === 'default' ? defaultThemeValue : newThemeValue, - [theme] + (defaultThemeValue, _newThemeValue) => defaultThemeValue, + [] ); // If we use 'useLayoutEffect' here, we would be trying to read the @@ -149,10 +150,10 @@ const useTheme = (parentSelector = defaultParentSelector): TUseThemeResult => { }, []); return { - theme: 'default', + theme, themedValue, isNewTheme: false, - isRecolouringTheme: theme === 'recolouring', + isRecolouringTheme: true, }; }; diff --git a/design-system/src/theme-provider.visualroute.jsx b/design-system/src/theme-provider.visualroute.jsx index 94cdab0226..f0f5061b9c 100644 --- a/design-system/src/theme-provider.visualroute.jsx +++ b/design-system/src/theme-provider.visualroute.jsx @@ -152,7 +152,7 @@ const InteractiveRoute = () => {