From e2cc1cbf7b48a820b5513a31323b585419b6d5f3 Mon Sep 17 00:00:00 2001 From: Marcin Sawicki Date: Tue, 7 Mar 2023 13:10:31 +0100 Subject: [PATCH] New design tokens (#506) * new design tokens * view fix * styles fixes related to the new tokens --- .../src/components/Avatar/Avatar.module.scss | 2 +- .../src/components/Badge/Badge.module.scss | 4 +- .../src/components/Button/Button.module.scss | 2 +- .../Progress/ProgressBar.module.scss | 2 +- .../Progress/ProgressCircle.module.scss | 2 +- .../src/components/Switch/Switch.module.scss | 4 +- .../src/stories/components/ColorTokens.tsx | 40 +++- .../react-components/src/themes/dark.scss | 186 +++++++++++++----- .../src/themes/design-token.ts | 178 +++++++++++++---- .../react-components/src/themes/legacy.scss | 184 ++++++++++++----- .../react-components/src/themes/light.scss | 184 ++++++++++++----- 11 files changed, 605 insertions(+), 183 deletions(-) diff --git a/packages/react-components/src/components/Avatar/Avatar.module.scss b/packages/react-components/src/components/Avatar/Avatar.module.scss index 97b5604e0..e389c4468 100644 --- a/packages/react-components/src/components/Avatar/Avatar.module.scss +++ b/packages/react-components/src/components/Avatar/Avatar.module.scss @@ -26,7 +26,7 @@ $base-class: 'avatar'; } &--unknown { - background: var(--surface-secondary-default); + background: var(--surface-moderate-default); } &--xxxsmall#{$circle-class}, diff --git a/packages/react-components/src/components/Badge/Badge.module.scss b/packages/react-components/src/components/Badge/Badge.module.scss index 62f70ffeb..152231966 100644 --- a/packages/react-components/src/components/Badge/Badge.module.scss +++ b/packages/react-components/src/components/Badge/Badge.module.scss @@ -86,11 +86,11 @@ $base-class: 'badge'; } &--tertiary { - background-color: var(--surface-secondary-default); + background-color: var(--surface-tertiary-default); color: var(--content-default); &:hover { - background-color: var(--surface-secondary-hover); + background-color: var(--surface-tertiary-hover); } .#{$base-class}__dot { diff --git a/packages/react-components/src/components/Button/Button.module.scss b/packages/react-components/src/components/Button/Button.module.scss index fbb33e43e..ec09a52f4 100644 --- a/packages/react-components/src/components/Button/Button.module.scss +++ b/packages/react-components/src/components/Button/Button.module.scss @@ -92,7 +92,7 @@ $base-class: 'btn'; } &--secondary { - border-color: var(--surface-secondary-default); + border-color: var(--border-basic-primary); background-color: var(--surface-basic-default); color: var(--content-default); diff --git a/packages/react-components/src/components/Progress/ProgressBar.module.scss b/packages/react-components/src/components/Progress/ProgressBar.module.scss index 53ba5d0db..6a2f21faf 100644 --- a/packages/react-components/src/components/Progress/ProgressBar.module.scss +++ b/packages/react-components/src/components/Progress/ProgressBar.module.scss @@ -27,7 +27,7 @@ } &--normal { - background-color: var(--surface-secondary-default); + background-color: var(--surface-tertiary-default); } &__indicator--success { diff --git a/packages/react-components/src/components/Progress/ProgressCircle.module.scss b/packages/react-components/src/components/Progress/ProgressCircle.module.scss index bf3cd21c2..e11c09325 100644 --- a/packages/react-components/src/components/Progress/ProgressCircle.module.scss +++ b/packages/react-components/src/components/Progress/ProgressCircle.module.scss @@ -19,7 +19,7 @@ } &__bg-line--normal { - stroke: var(--surface-secondary-default); + stroke: var(--surface-tertiary-default); } &__bg-line--success { diff --git a/packages/react-components/src/components/Switch/Switch.module.scss b/packages/react-components/src/components/Switch/Switch.module.scss index 63d270b3d..758ab17ea 100644 --- a/packages/react-components/src/components/Switch/Switch.module.scss +++ b/packages/react-components/src/components/Switch/Switch.module.scss @@ -31,7 +31,7 @@ $medium-move: $medium-width - $medium-size; } .#{$hovered-track}--enabled.#{$hovered-track}--off { - background-color: var(--surface-secondary-hover); + background-color: var(--action-neutral-hover); } } @@ -96,7 +96,7 @@ $medium-move: $medium-width - $medium-size; } &--off#{&}--enabled { - background-color: var(--surface-secondary-default); + background-color: var(--action-neutral-default); } &--off#{&}--disabled { diff --git a/packages/react-components/src/stories/components/ColorTokens.tsx b/packages/react-components/src/stories/components/ColorTokens.tsx index 7ac46f6bb..6a4907111 100644 --- a/packages/react-components/src/stories/components/ColorTokens.tsx +++ b/packages/react-components/src/stories/components/ColorTokens.tsx @@ -7,8 +7,12 @@ interface TokensGroup { surface: string[]; content: string[]; border: string[]; + action: string[]; color: string[]; decor: string[]; + products: string[]; + illustrations: string[]; + tag: string[]; } type TokenGroupName = @@ -16,8 +20,12 @@ type TokenGroupName = | 'surface' | 'content' | 'border' + | 'action' | 'color' - | 'decor'; + | 'decor' + | 'products' + | 'illustrations' + | 'tag'; const Tokens: TokensGroup = Object.values( DesignToken as { [key: string]: string } @@ -28,7 +36,18 @@ const Tokens: TokensGroup = Object.values( return acc; }, - { background: [], surface: [], content: [], border: [], color: [], decor: [] } + { + background: [], + surface: [], + content: [], + border: [], + action: [], + color: [], + decor: [], + products: [], + illustrations: [], + tag: [], + } ); const CONTENT = { @@ -50,6 +69,11 @@ const CONTENT = { heading: 'Border', content: 'Style for components borders', }, + action: { + heading: 'Action colors', + content: + 'All colors that drive attention in the UI - it can be either action, warning, negative or positive', + }, color: { heading: 'Accent colors', content: @@ -60,6 +84,18 @@ const CONTENT = { content: 'Those colors can be used for specific elements of the UI, they were purposely separated from all other tokens, as they are used only for decorative means. Those colors are shared between all three themes — Legacy, Light & Dark. This palette is not yet fully supported in dark mode.', }, + products: { + heading: 'Products', + content: '', + }, + illustrations: { + heading: 'Illustrations', + content: '', + }, + tag: { + heading: 'Tag', + content: '', + }, }; export const ColorTokensPallete: React.FC = () => ( diff --git a/packages/react-components/src/themes/dark.scss b/packages/react-components/src/themes/dark.scss index 496d5df0c..34e6198b7 100644 --- a/packages/react-components/src/themes/dark.scss +++ b/packages/react-components/src/themes/dark.scss @@ -1,53 +1,140 @@ .lc-dark-theme { - --background: #131317; - --surface-basic-default: #202024; - --surface-basic-subtle: #29292f; - --surface-basic-hover: rgb(255 255 255 / 10%); - --surface-basic-active: rgb(255 255 255 / 20%); - --surface-basic-disabled: #2d2d32; - --surface-secondary-default: #767680; - --surface-secondary-subtle: #3b3b43; - --surface-secondary-hover: #ababb1; - --surface-secondary-disabled: #3b3b43; - --surface-feedback-info: #323640; - --surface-feedback-negative: #3a3136; - --surface-feedback-warning: #3a362b; - --surface-feedback-positive: #263532; - --surface-invert-default: #eeeeef; - --surface-invert-subtle: #c9c9cd; + --background: #131317; // deprecated + --background-01: #131317; + --background-02: #202024; + --background-03: #202024; + --surface-basic-default: #202024; // deprecated + --surface-primary-default: #202024; + --surface-basic-subtle: #29292f; // deprecated + --surface-secondary-default: #2d2d33; + --surface-secondary-hover: #343439; + --surface-secondary-active: #3a3a40; + --surface-secondary-disabled: #2d2d32; + --surface-basic-hover: rgb(255 255 255 / 10%); // deprecated + --surface-primary-hover: #2b2b2f; + --surface-basic-active: rgb(255 255 255 / 20%); // deprecated + --surface-primary-active: #323236; + --surface-primary-active-colored: rgb(0 102 255 / 25%); + --surface-basic-disabled: #2d2d32; // deprecated + --surface-primary-disabled: #333338; + --surface-tertiary-default: #3b3b43; + --surface-secondary-subtle: #3b3b43; // deprecated + --surface-moderate-default: #4e4e58; + --surface-moderate-hover: #55555f; + --surface-moderate-active: #5c5c65; + --surface-tertiary-hover: #43434b; + --surface-tertiary-active: #4b4b52; + --surface-tertiary-disabled: #3b3b43; + --surface-feedback-info: #323640; // deprecated + --surface-accent-emphasis-low-info: #20324d; + --surface-feedback-negative: #3a3136; // deprecated + --surface-accent-emphasis-low-negative: #492529; + --surface-feedback-warning: #3a362b; // deprecated + --surface-accent-emphasis-low-warning: #3d361b; + --surface-feedback-positive: #263532; // deprecated + --surface-accent-emphasis-low-positive: #163628; + --surface-accent-emphasis-low-purple: #362c4d; + --surface-accent-emphasis-min-info: #232a36; + --surface-accent-emphasis-min-negative: #32262b; + --surface-accent-emphasis-min-warning: #322e26; + --surface-accent-emphasis-min-positive: #182c26; + --surface-accent-emphasis-min-purple: #2b2836; + --surface-invert-default: #eeeeef; // deprecated + --surface-invert-primary: #e2e2e4; + --surface-invert-subtle: #c9c9cd; // deprecated + --surface-invert-secondary: #c9c9cd; --surface-invert-disabled: #29292f; - --surface-overlay: rgb(19 19 23 / 90%); - --content-default: rgb(255 255 255 / 80%); - --content-subtle: rgb(255 255 255 / 60%); - --content-disabled: rgb(255 255 255 / 40%); - --content-white-locked: #fff; - --content-black-locked: #131317; - --content-invert-default: #131317; - --content-invert-subtle: rgb(19 19 23 / 70%); + --surface-locked-default: #f6f6f7; + --surface-locked-hover: #ffffff; + --surface-locked-active: #36363b; + --surface-locked-disabled: #333338; + --surface-locked-white: #ffffff; + --surface-locked-black: #000000; + --surface-accent-emphasis-high-info: #0066ff; + --surface-accent-emphasis-high-negative: #ca0005; + --surface-accent-emphasis-high-warning: #e8bb00; + --surface-accent-emphasis-high-positive: #00893c; + --surface-accent-emphasis-high-purple: #9146ff; + --surface-overlay: rgb(19 19 23 / 90%); // deprecated + --surface-other-overlay: rgb(19 19 23 / 90%); + --surface-other-agent: #0066ff; + --surface-other-skeleton: #3b3b43; + --content-default: rgb(255 255 255 / 80%); // deprecated + --content-basic-primary: #eeeeef; + --content-subtle: rgb(255 255 255 / 60%); // deprecated + --content-basic-secondary: #ababb1; + --content-disabled: rgb(255 255 255 / 40%); // deprecated + --content-basic-disabled: #767680; + --content-basic-negative: #ff8282; + --content-basic-warning: #e5c155; + --content-basic-positive: #4cbf80; + --content-basic-info: #68afff; + --content-basic-purple: #bf9cff; + --content-white-locked: #fff; // deprecated + --content-locked-white: #ffffff; + --content-black-locked: #131317; // deprecated + --content-locked-black: #000000; + --content-locked-default: #131317; + --content-locked-hover: #131317; + --content-locked-active: #68afff; + --content-locked-disabled: #767680; + --content-invert-default: #131317; // deprecated + --content-invert-primary: #131317; + --content-invert-subtle: rgb(19 19 23 / 70%); // deprecated + --content-invert-secondary: rgb(19 19 23 / 70%); --content-invert-disabled: rgb(19 19 23 / 30%); - --border-default: rgb(255 255 255 / 40%); - --border-subtle: rgb(255 255 255 / 10%); - --border-hover: rgb(255 255 255 / 60%); - --border-disabled: rgb(255 255 255 / 50%); - --border-invert-default: rgb(19 19 23 / 50%); - --border-invert-subtle: rgb(19 19 23 / 10%); - --border-invert-hover: rgb(19 19 23 / 70%); + --border-default: rgb(255 255 255 / 40%); // deprecated + --border-basic-primary: rgb(255 255 255 / 20%); + --border-basic-secondary: rgb(255 255 255 / 10%); + --border-subtle: rgb(255 255 255 / 10%); // deprecated + --border-basic-tertiary: #131317; + --border-hover: rgb(255 255 255 / 60%); // deprecated + --border-basic-hover: rgb(255 255 255 / 60%); + --border-disabled: rgb(255 255 255 / 50%); // deprecated + --border-basic-disabled: rgb(255 255 255 / 10%); + --border-basic-negative: #ff7071; + --border-basic-warning: #e6bb00; + --border-basic-positive: #33b66d; + --border-basic-info: #5ba4ff; + --border-basic-purple: #b58eff; + --border-invert-default: rgb(19 19 23 / 50%); // deprecated + --border-invert-primary: rgb(19 19 23 / 60%); + --border-invert-subtle: rgb(19 19 23 / 10%); // deprecated + --border-invert-secondary: rgb(19 19 23 / 10%); + --border-invert-hover: rgba(19 19 23 / 80%); --border-invert-disabled: rgb(19 19 23 / 30%); - --color-action-active: #b6d5fb; - --color-action-hover: #8abbf9; - --color-action-default: #6daaf8; + --color-action-active: #b6d5fb; // deprecated + --action-primary-active: #b3d7ff; + --color-action-hover: #8abbf9; // deprecated + --action-primary-hover: #86bfff; + --color-action-default: #6daaf8; // deprecated + --action-primary-default: #68afff; --color-action-default-rgb: 157, 206, 255; - --color-action-disabled: #6daaf8; - --color-negative-active: #ffe5e5; - --color-negative-hover: #ffb7b7; - --color-negative-default: #ff4c4d; - --color-negative-disabled: rgb(255 76 77 / 30%); - --color-warning-default: #fed65e; - --color-warning-hover: #fedc89; - --color-positive-default: #00c057; - --color-positive-hover: #00e066; - --color-positive-disabled: #4d735e; - --color-bot: #50009c; + --color-action-disabled: #6daaf8; // deprecated + --action-primary-disabled: rgb(104 175 255 / 30%); + --color-negative-active: #ffe5e5; // deprecated + --action-negative-active: #ffa6a6; + --color-negative-hover: #ffb7b7; // deprecated + --action-negative-hover: #ff7071; + --color-negative-default: #ff4c4d; // deprecated + --action-negative-default: #ff4c4d; + --color-negative-disabled: rgb(255 76 77 / 30%); // deprecated + --action-negative-disabled: rgb(255 76 77 / 30%); + --color-warning-default: #fed65e; // deprecated + --action-warning-default: #e8bb00; + --color-warning-hover: #fedc89; // deprecated + --action-warning-hover: #efcf4c; + --color-positive-default: #00c057; // deprecated + --action-positive-default: #00a449; + --color-positive-hover: #00e066; // deprecated + --action-positive-hover: #4cbf80; + --color-positive-disabled: #4d735e; // deprecated + --action-positive-disabled: rgb(0 164 73 / 20%); + --action-neutral-default: #8d8d95; + --action-neutral-hover: #afafb5; + --action-neutral-disabled: rgb(141 141 149 / 20%); + --color-bot: #50009c; // deprecated + --surface-other-bot: #50009c; --color-black: #131317; --color-white: #fff; --decor-blue900: #003288; @@ -125,4 +212,13 @@ --decor-purple200: #d1c0ff; --decor-purple100: #eee8ff; --decor-purple50: #faf8ff; + --products-livechat: #fe5100; + --products-helpdesk: #00c057; + --products-chatbot: #0066ff; + --products-knowledgebase: #9146ff; + --illustrations-primary: #3b3b43; + --illustrations-secondary: #62626d; + --illustrations-stroke: #c9c9cd; + --tag-surface-01: #3b3b43; + --tag-content-01: #eeeeef; } diff --git a/packages/react-components/src/themes/design-token.ts b/packages/react-components/src/themes/design-token.ts index 3d7e48a70..5fcdf9092 100644 --- a/packages/react-components/src/themes/design-token.ts +++ b/packages/react-components/src/themes/design-token.ts @@ -1,51 +1,140 @@ export const DesignToken = { - Background: '--background', - SurfaceBasicDefault: '--surface-basic-default', - SurfaceBasicSubtle: '--surface-basic-subtle', - SurfaceBasicHover: '--surface-basic-hover', - SurfaceBasicActive: '--surface-basic-active', - SurfaceBasicDisabled: '--surface-basic-disabled', + Background: '--background', // deprecated + Background01: '--background-01', + Background02: '--background-02', + Background03: '--background-03', + SurfaceBasicDefault: '--surface-basic-default', // deprecated + SurfacePrimaryDefault: '--surface-primary-default', + SurfaceBasicSubtle: '--surface-basic-subtle', // deprecated SurfaceSecondaryDefault: '--surface-secondary-default', - SurfaceSecondarySubtle: '--surface-secondary-subtle', SurfaceSecondaryHover: '--surface-secondary-hover', + SurfaceSecondaryActive: '--surface-secondary-active', SurfaceSecondaryDisabled: '--surface-secondary-disabled', - SurfaceFeedbackInfo: '--surface-feedback-info', - SurfaceFeedbackNegative: '--surface-feedback-negative', - SurfaceFeedbackWarning: '--surface-feedback-warning', - SurfaceFeedbackPositive: '--surface-feedback-positive', - SurfaceInvertDefault: '--surface-invert-default', - SurfaceInvertSubtle: '--surface-invert-subtle', + SurfaceBasicHover: '--surface-basic-hover', // deprecated + SurfacePrimaryHover: '--surface-primary-hover', + SurfaceBasicActive: '--surface-basic-active', // deprecated + SurfacePrimaryActive: '--surface-primary-active', + SurfacePrimaryActiveColored: '--surface-primary-active-colored', + SurfaceBasicDisabled: '--surface-basic-disabled', // deprecated + SurfacePrimaryDisabled: '--surface-primary-disabled', + SurfaceTertiaryDefault: '--surface-tertiary-default', + SurfaceSecondarySubtle: '--surface-secondary-subtle', // deprecated + SurfaceModerateDefault: '--surface-moderate-default', + SurfaceModerateHover: '--surface-moderate-hover', + SurfaceModerateActive: '--surface-moderate-active', + SurfaceTertiaryHover: '--surface-tertiary-hover', + SurfaceTertiaryActive: '--surface-tertiary-active', + SurfaceTertiaryDisabled: '--surface-tertiary-disabled', + SurfaceFeedbackInfo: '--surface-feedback-info', // deprecated + SurfaceAccentEmphasisLowInfo: '--surface-accent-emphasis-low-info', + SurfaceFeedbackNegative: '--surface-feedback-negative', // deprecated + SurfaceAccentEmphasisLowNegative: '--surface-accent-emphasis-low-negative', + SurfaceFeedbackWarning: '--surface-feedback-warning', // deprecated + SurfaceAccentEmphasisLowWarning: '--surface-accent-emphasis-low-warning', + SurfaceFeedbackPositive: '--surface-feedback-positive', // deprecated + SurfaceAccentEmphasisLowPositive: '--surface-accent-emphasis-low-positive', + SurfaceAccentEmphasisLowPurple: '--surface-accent-emphasis-low-purple', + SurfaceAccentEmphasisMinInfo: '--surface-accent-emphasis-min-info', + SurfaceAccentEmphasisMinNegative: '--surface-accent-emphasis-min-negative', + SurfaceAccentEmphasisMinWarning: '--surface-accent-emphasis-min-warning', + SurfaceAccentEmphasisMinPositive: '--surface-accent-emphasis-min-positive', + SurfaceAccentEmphasisMinPurple: '--surface-accent-emphasis-min-purple', + SurfaceInvertDefault: '--surface-invert-default', // deprecated + SurfaceInvertPrimary: '--surface-invert-primary', + SurfaceInvertSubtle: '--surface-invert-subtle', // deprecated + SurfaceInvertSecondary: '--surface-invert-secondary', SurfaceInvertDisabled: '--surface-invert-disabled', - SurfaceOverlay: '--surface-overlay', - ContentDefault: '--content-default', - ContentSubtle: '--content-subtle', - ContentDisabled: '--content-disabled', - ContentWhiteLocked: '--content-white-locked', - ContentInvertDefault: '--content-invert-default', - ContentInvertSubtle: '--content-invert-subtle', + SurfaceLockedDefault: '--surface-locked-default', + SurfaceLockedHover: '--surface-locked-hover', + SurfaceLockedActive: '--surface-locked-active', + SurfaceLockedDisabled: '--surface-locked-disabled', + SurfaceLockedWhite: '--surface-locked-white', + SurfaceLockedBlack: '--surface-locked-black', + SurfaceAccentEmphasisHighInfo: '--surface-accent-emphasis-high-info', + SurfaceAccentEmphasisHighNegative: '--surface-accent-emphasis-high-negative', + SurfaceAccentEmphasisHighWarning: '--surface-accent-emphasis-high-warning', + SurfaceAccentEmphasisHighPositive: '--surface-accent-emphasis-high-positive', + SurfaceAccentEmphasisHighPurple: '--surface-accent-emphasis-high-purple', + SurfaceOverlay: '--surface-overlay', // deprecated + SurfaceOtherOverlay: '--surface-other-overlay', + SurfaceOtherAgent: '--surface-other-agent', + SurfaceOtherSkeleton: '--surface-other-skeleton', + ContentDefault: '--content-default', // deprecated + ContentBasicPrimary: '--content-basic-primary', + ContentSubtle: '--content-subtle', // deprecated + ContentBasicSecondary: '--content-basic-secondary', + ContentDisabled: '--content-disabled', // deprecated + ContentBasicDisabled: '--content-basic-disabled', + ContentBasicNegative: '--content-basic-negative', + ContentBasicWarning: '--content-basic-warning', + ContentBasicPositive: '--content-basic-positive', + ContentBasicInfo: '--content-basic-info', + ContentBasicPurple: '--content-basic-purple', + ContentWhiteLocked: '--content-white-locked', // deprecated + ContentLockedWhite: '--content-locked-white', + ContentBlackLocked: '--content-black-locked', // deprecated + ContentLockedBlack: '--content-locked-black', + ContentLockedDefault: '--content-locked-default', + ContentLockedHover: '--content-locked-hover', + ContentLockedActive: '--content-locked-active', + ContentLockedDisabled: '--content-locked-disabled', + ContentInvertDefault: '--content-invert-default', // deprecated + ContentInvertPrimary: '--content-invert-primary', + ContentInvertSubtle: '--content-invert-subtle', // deprecated + ContentInvertSecondary: '--content-invert-secondary', ContentInvertDisabled: '--content-invert-disabled', - BorderDefault: '--border-default', - BorderSubtle: '--border-subtle', - BorderHover: '--border-hover', - BorderDisabled: '--border-disabled', - BorderInvertDefault: '--border-invert-default', - BorderInvertSubtle: '--border-invert-subtle', + BorderDefault: '--border-default', // deprecated + BorderBasicPrimary: '--border-basic-primary', + BorderBasicSecondary: '--border-basic-secondary', + BorderSubtle: '--border-subtle', // deprecated + BorderBasicTertiary: '--border-basic-tertiary', + BorderHover: '--border-hover', // deprecated + BorderBasicHover: '--border-basic-hover', + BorderDisabled: '--border-disabled', // deprecated + BorderBasicDisabled: '--border-basic-disabled', + BorderBasicNegative: '--border-basic-negative', + BorderBasicWarning: '--border-basic-warning', + BorderBasicPositive: '--border-basic-positive', + BorderBasicInfo: '--border-basic-info', + BorderBasicPurple: '--border-basic-purple', + BorderInvertDefault: '--border-invert-default', // deprecated + BorderInvertPrimary: '--border-invert-primary', + BorderInvertSubtle: '--border-invert-subtle', // deprecated + BorderInvertSecondary: '--border-invert-secondary', BorderInvertHover: '--border-invert-hover', BorderInvertDisabled: '--border-invert-disabled', - ColorActionActive: '--color-action-active', - ColorActionHover: '--color-action-hover', - ColorActionDefault: '--color-action-default', - ColorActionDisabled: '--color-action-disabled', - ColorNegativeActive: '--color-negative-active', - ColorNegativeHover: '--color-negative-hover', - ColorNegativeDefault: '--color-negative-default', - ColorNegativeDisabled: '--color-negative-disabled', - ColorWarningDefault: '--color-warning-default', - ColorWarningHover: '--color-warning-hover', - ColorPositiveDefault: '--color-positive-default', - ColorPositiveHover: '--color-positive-hover', - ColorPositiveDisabled: '--color-positive-disabled', - ColorBot: '--color-bot', + ColorActionActive: '--color-action-active', // deprecated + ActionPrimaryActive: '--action-primary-active', + ColorActionHover: '--color-action-hover', // deprecated + ActionPrimaryHover: '--action-primary-hover', + ColorActionDefault: '--color-action-default', // deprecated + ActionPrimaryDefault: '--action-primary-default', + ColorActionDefaultRgb: '--color-action-default-rgb', + ColorActionDisabled: '--color-action-disabled', // deprecated + ActionPrimaryDisabled: '--action-primary-disabled', + ColorNegativeActive: '--color-negative-active', // deprecated + ActionNegativeActive: '--action-negative-active', + ColorNegativeHover: '--color-negative-hover', // deprecated + ActionNegativeHover: '--action-negative-hover', + ColorNegativeDefault: '--color-negative-default', // deprecated + ActionNegativeDefault: '--action-negative-default', + ColorNegativeDisabled: '--color-negative-disabled', // deprecated + ActionNegativeDisabled: '--action-negative-disabled', + ColorWarningDefault: '--color-warning-default', // deprecated + ActionWarningDefault: '--action-warning-default', + ColorWarningHover: '--color-warning-hover', // deprecated + ActionWarningHover: '--action-warning-hover', + ColorPositiveDefault: '--color-positive-default', // deprecated + ActionPositiveDefault: '--action-positive-default', + ColorPositiveHover: '--color-positive-hover', // deprecated + ActionPositiveHover: '--action-positive-hover', + ColorPositiveDisabled: '--color-positive-disabled', // deprecated + ActionPositiveDisabled: '--action-positive-disabled', + ActionNeutralDefault: '--action-neutral-default', + ActionNeutralHover: '--action-neutral-hover', + ActionNeutralDisabled: '--action-neutral-disabled', + ColorBot: '--color-bot', // deprecated + SurfaceOtherBot: '--surface-other-bot', ColorBlack: '--color-black', ColorWhite: '--color-white', DecorBlue900: '--decor-blue900', @@ -123,4 +212,13 @@ export const DesignToken = { DecorPurple200: '--decor-purple200', DecorPurple100: '--decor-purple100', DecorPurple50: '--decor-purple50', + ProductsLivechat: '--products-livechat', + ProductsHelpdesk: '--products-helpdesk', + ProductsChatbot: '--products-chatbot', + ProductsKnowledgebase: '--products-knowledgebase', + IllustrationsPrimary: '--illustrations-primary', + IllustrationsSecondary: '--illustrations-secondary', + IllustrationsStroke: '--illustrations-stroke', + TagSurface01: '--tag-surface-01', + TagContent01: '--tag-content-01', }; diff --git a/packages/react-components/src/themes/legacy.scss b/packages/react-components/src/themes/legacy.scss index 0e544b735..a4348d8a9 100644 --- a/packages/react-components/src/themes/legacy.scss +++ b/packages/react-components/src/themes/legacy.scss @@ -1,54 +1,141 @@ :root, .lc-legacy-theme { - --background: #fff; - --surface-basic-default: #fff; - --surface-basic-subtle: #f1f6f8; - --surface-basic-hover: #e0e8eb; - --surface-basic-active: #dae4eb; - --surface-basic-disabled: #eaedf0; - --surface-secondary-default: #bdc7d1; - --surface-secondary-subtle: #e4e8ec; - --surface-secondary-hover: #a0a6ab; - --surface-secondary-disabled: #dee3e8; - --surface-feedback-info: #e5f3ff; - --surface-feedback-negative: #fbeaed; - --surface-feedback-warning: #fff8e0; - --surface-feedback-positive: #e6f4ec; - --surface-invert-default: #424d57; - --surface-invert-subtle: #677179; + --background: #fff; // deprecated + --background-01: #fff; + --background-02: #fff; + --background-03: #f1f1f2; + --surface-basic-default: #fff; // deprecated + --surface-primary-default: #fff; + --surface-basic-subtle: #f1f6f8; // deprecated + --surface-secondary-default: #f1f6f8; + --surface-secondary-hover: #e0e8eb; + --surface-secondary-active: #dae4eb; + --surface-secondary-disabled: #eaedf0; + --surface-basic-hover: #e0e8eb; // deprecated + --surface-primary-hover: #f3f6f7; + --surface-basic-active: #dae4eb; // deprecated + --surface-primary-active: #ebf1f4; + --surface-primary-active-colored: rgb(66 132 245 / 25%); + --surface-basic-disabled: #eaedf0; // deprecated + --surface-primary-disabled: #f9fafb; + --surface-tertiary-default: #e4e8ec; + --surface-secondary-subtle: #e4e8ec; // deprecated + --surface-moderate-default: #bdc7d1; + --surface-moderate-hover: #b7c2cd; + --surface-moderate-active: #b1bdc9; + --surface-tertiary-hover: #c2c2c6; + --surface-tertiary-active: #bababe; + --surface-tertiary-disabled: #e4e8ec; + --surface-feedback-info: #e5f3ff; // deprecated + --surface-accent-emphasis-low-info: #e6f3ff; + --surface-feedback-negative: #fbeaed; // deprecated + --surface-accent-emphasis-low-negative: #fbeaed; + --surface-feedback-warning: #fff8e0; // deprecated + --surface-accent-emphasis-low-warning: #fff8e0; + --surface-feedback-positive: #e6f4ec; // deprecated + --surface-accent-emphasis-low-positive: #e6f4ec; + --surface-accent-emphasis-low-purple: #eee8ff; + --surface-accent-emphasis-min-info: #f4faff; + --surface-accent-emphasis-min-negative: #fff8f8; + --surface-accent-emphasis-min-warning: #fff9ed; + --surface-accent-emphasis-min-positive: #f3fcf4; + --surface-accent-emphasis-min-purple: #faf8ff; + --surface-invert-default: #424d57; // deprecated + --surface-invert-primary: #424d57; + --surface-invert-subtle: #677179; // deprecated + --surface-invert-secondary: #677179; --surface-invert-disabled: #a0a6ab; - --surface-overlay: rgb(0 0 0 / 70%); - --content-default: #424d57; - --content-subtle: #677179; - --content-disabled: #a0a6ab; - --content-white-locked: #fff; - --content-black-locked: #424d57; - --content-invert-default: #fff; - --content-invert-subtle: rgb(255 255 255 / 70%); + --surface-locked-default: #fff; + --surface-locked-hover: #efeff0; + --surface-locked-active: #daedff; + --surface-locked-disabled: rgb(255 255 255 / 70%); + --surface-locked-white: #fff; + --surface-locked-black: #000; + --surface-accent-emphasis-high-info: #4284f5; + --surface-accent-emphasis-high-negative: #d74747; + --surface-accent-emphasis-high-warning: #fbbd04; + --surface-accent-emphasis-high-positive: #22aa61; + --surface-accent-emphasis-high-purple: #9642f5; + --surface-overlay: rgb(0 0 0 / 70%); // deprecated + --surface-other-overlay: rgb(0 0 0 / 70%); + --surface-other-agent: #4284f5; + --surface-other-skeleton: #e5e8ec; + --content-default: #424d57; // deprecated + --content-basic-primary: #424d57; + --content-subtle: #677179; // deprecated + --content-basic-secondary: #677179; + --content-disabled: #a0a6ab; // deprecated + --content-basic-disabled: #a0a6ab; + --content-basic-negative: #930002; + --content-basic-warning: #755b00; + --content-basic-positive: #005321; + --content-basic-info: #003fa4; + --content-basic-purple: #6100bd; + --content-white-locked: #fff; // deprecated + --content-locked-white: #fff; + --content-black-locked: #424d57; // deprecated + --content-locked-black: #000; + --content-locked-default: #424d57; + --content-locked-hover: #131317; + --content-locked-active: #003fa4; + --content-locked-disabled: #8d8d95; + --content-invert-default: #fff; // deprecated + --content-invert-primary: #fff; + --content-invert-subtle: rgb(255 255 255 / 70%); // deprecated + --content-invert-secondary: rgb(255 255 255 / 70%); --content-invert-disabled: rgb(255 255 255 / 50%); - --border-default: #bdc7d1; - --border-subtle: #e4e8ec; - --border-hover: #a0a6ab; - --border-disabled: #dee3e8; - --border-invert-default: rgb(255 255 255 / 70%); - --border-invert-subtle: rgb(255 255 255 / 30%); + --border-default: #bdc7d1; // deprecated + --border-basic-primary: #bdc7d1; + --border-basic-secondary: #e4e8ec; + --border-subtle: #e4e8ec; // deprecated + --border-basic-tertiary: #e9edf0; + --border-hover: #a0a6ab; // deprecated + --border-basic-hover: #a0a6ab; + --border-disabled: #dee3e8; // deprecated + --border-basic-disabled: #dee3e8; + --border-basic-negative: #930002; + --border-basic-warning: #755b00; + --border-basic-positive: #005321; + --border-basic-info: #4284f5; + --border-basic-purple: #6100bd; + --border-invert-default: rgb(255 255 255 / 70%); // deprecated + --border-invert-primary: rgb(255 255 255 / 70%); + --border-invert-subtle: rgb(255 255 255 / 30%); // deprecated + --border-invert-secondary: rgb(255 255 255 / 30%); --border-invert-hover: #fff; --border-invert-disabled: rgb(255 255 255 / 50%); - --color-action-active: #295fbc; - --color-action-hover: #4379d6; - --color-action-default: #4284f5; + --color-action-active: #295fbc; // deprecated + --action-primary-active: #295fbc; + --color-action-hover: #4379d6; // deprecated + --action-primary-hover: #4379d6; + --color-action-default: #4284f5; // deprecated + --action-primary-default: #4284f5; --color-action-default-rgb: 66, 132, 245; - --color-action-disabled: #a3c3fa; - --color-negative-active: #94383a; - --color-negative-hover: #b94648; - --color-negative-default: #d74747; - --color-negative-disabled: #eba3a3; - --color-warning-default: #fbbd04; - --color-warning-hover: #f99a01; - --color-positive-default: #22aa61; - --color-positive-hover: #0d874a; - --color-positive-disabled: #90d5c4; - --color-bot: #6b5aba; + --color-action-disabled: #a3c3fa; // deprecated + --action-primary-disabled: #a3c3fa; + --color-negative-active: #94383a; // deprecated + --action-negative-active: #94383a; + --color-negative-hover: #b94648; // deprecated + --action-negative-hover: #b94648; + --color-negative-default: #d74747; // deprecated + --action-negative-default: #d74747; + --color-negative-disabled: #eba3a3; // deprecated + --action-negative-disabled: #eba3a3; + --color-warning-default: #fbbd04; // deprecated + --action-warning-default: #fbbd04; + --color-warning-hover: #f99a01; // deprecated + --action-warning-hover: #f99a01; + --color-positive-default: #22aa61; // deprecated + --action-positive-default: #22aa61; + --color-positive-hover: #0d874a; // deprecated + --action-positive-hover: #0d874a; + --color-positive-disabled: #90d5c4; // deprecated + --action-positive-disabled: #90d5c4; + --action-neutral-default: #bdc7d1; + --action-neutral-hover: #a0a6ab; + --action-neutral-disabled: #dee3e8; + --color-bot: #6b5aba; // deprecated + --surface-other-bot: #6b5aba; --color-black: #424d57; --color-white: #fff; --decor-blue900: #003288; @@ -126,4 +213,13 @@ --decor-purple200: #d1c0ff; --decor-purple100: #eee8ff; --decor-purple50: #faf8ff; + --products-livechat: #fe5100; + --products-helpdesk: #00c057; + --products-chatbot: #06f; + --products-knowledgebase: #9146ff; + --illustrations-primary: #ffd000; + --illustrations-secondary: #e2e2e4; + --illustrations-stroke: #1b1b20; + --tag-surface-01: #e4e8ec; + --tag-content-01: #424d57; } diff --git a/packages/react-components/src/themes/light.scss b/packages/react-components/src/themes/light.scss index d81e31fb1..503b6479c 100644 --- a/packages/react-components/src/themes/light.scss +++ b/packages/react-components/src/themes/light.scss @@ -1,53 +1,140 @@ .lc-light-theme { - --background: #fff; - --surface-basic-default: #fff; - --surface-basic-subtle: #f6f6f7; - --surface-basic-hover: #e2e2e4; - --surface-basic-active: #c9c9cd; - --surface-basic-disabled: #f6f6f7; - --surface-secondary-default: #c9c9cd; - --surface-secondary-subtle: #e4e8ec; - --surface-secondary-hover: #ababb1; - --surface-secondary-disabled: #eeeeef; - --surface-feedback-info: #daedff; - --surface-feedback-negative: #ffe5e5; - --surface-feedback-warning: #fff2d6; - --surface-feedback-positive: #e4f4ed; - --surface-invert-default: #1b1b20; - --surface-invert-subtle: #4e4e58; + --background: #fff; // deprecated + --background-01: #fff; + --background-02: #fff; + --background-03: #f1f1f2; + --surface-basic-default: #fff; // deprecated + --surface-primary-default: #fff; + --surface-basic-subtle: #f6f6f7; // deprecated + --surface-secondary-default: #f1f1f2; + --surface-secondary-hover: #e8e8ea; + --surface-secondary-active: #dfdfe1; + --surface-secondary-disabled: #f6f6f7; + --surface-basic-hover: #e2e2e4; // deprecated + --surface-primary-hover: #f6f6f6; + --surface-basic-active: #c9c9cd; // deprecated + --surface-primary-active: #ececec; + --surface-primary-active-colored: rgb(0 102 255 / 25%); + --surface-basic-disabled: #f6f6f7; // deprecated + --surface-primary-disabled: #f6f6f7; + --surface-tertiary-default: #e2e2e4; + --surface-secondary-subtle: #e4e8ec; // deprecated + --surface-moderate-default: #c9c9cd; + --surface-moderate-hover: #c2c2c6; + --surface-moderate-active: #bababe; + --surface-tertiary-hover: #dadadc; + --surface-tertiary-active: #d1d1d4; + --surface-tertiary-disabled: #eeeeef; + --surface-feedback-info: #daedff; // deprecated + --surface-accent-emphasis-low-info: #daedff; + --surface-feedback-negative: #ffe5e5; // deprecated + --surface-accent-emphasis-low-negative: #ffe5e5; + --surface-feedback-warning: #fff2d6; // deprecated + --surface-accent-emphasis-low-warning: #ffe9bc; + --surface-feedback-positive: #e4f4ed; // deprecated + --surface-accent-emphasis-low-positive: #d1f4d5; + --surface-accent-emphasis-low-purple: #eee8ff; + --surface-accent-emphasis-min-info: #f4faff; + --surface-accent-emphasis-min-negative: #fff8f8; + --surface-accent-emphasis-min-warning: #fff9ed; + --surface-accent-emphasis-min-positive: #f3fcf4; + --surface-accent-emphasis-min-purple: #faf8ff; + --surface-invert-default: #1b1b20; // deprecated + --surface-invert-primary: #1b1b20; + --surface-invert-subtle: #4e4e58; // deprecated + --surface-invert-secondary: #3b3b43; --surface-invert-disabled: #8d8d95; - --surface-overlay: rgb(19 19 23 / 70%); - --content-default: #131317; - --content-subtle: #62626d; - --content-disabled: #8d8d95; - --content-white-locked: #fff; - --content-black-locked: #131317; - --content-invert-default: #fff; - --content-invert-subtle: rgb(255 255 255 / 70%); + --surface-locked-default: #fff; + --surface-locked-hover: #eeeeef; + --surface-locked-active: #daedff; + --surface-locked-disabled: rgb(255 255 255 / 70%); + --surface-locked-white: #fff; + --surface-locked-black: #000; + --surface-accent-emphasis-high-info: #06f; + --surface-accent-emphasis-high-negative: #ca0005; + --surface-accent-emphasis-high-warning: #e8bb00; + --surface-accent-emphasis-high-positive: #00893c; + --surface-accent-emphasis-high-purple: #9146ff; + --surface-overlay: rgb(19 19 23 / 70%); // deprecated + --surface-other-overlay: rgb(19 19 23 / 70%); + --surface-other-agent: #06f; + --surface-other-skeleton: #e2e2e4; + --content-default: #131317; // deprecated + --content-basic-primary: #131317; + --content-subtle: #62626d; // deprecated + --content-basic-secondary: #4e4e58; + --content-disabled: #8d8d95; // deprecated + --content-basic-disabled: #8d8d95; + --content-basic-negative: #ca0005; + --content-basic-warning: #755b00; + --content-basic-positive: #005321; + --content-basic-info: #003fa4; + --content-basic-purple: #6100bd; + --content-white-locked: #fff; // deprecated + --content-locked-white: #fff; + --content-black-locked: #131317; // deprecated + --content-locked-black: #000; + --content-locked-default: #131317; + --content-locked-hover: #131317; + --content-locked-active: #003fa4; + --content-locked-disabled: #8d8d95; + --content-invert-default: #fff; // deprecated + --content-invert-primary: #fff; + --content-invert-subtle: rgb(255 255 255 / 70%); // deprecated + --content-invert-secondary: rgb(255 255 255 / 70%); --content-invert-disabled: rgb(255 255 255 / 50%); - --border-default: #c9c9cd; - --border-subtle: #eeeeef; - --border-hover: #ababb1; - --border-disabled: #e2e2e4; - --border-invert-default: rgb(255 255 255 / 70%); - --border-invert-subtle: rgb(255 255 255 / 30%); + --border-default: #c9c9cd; // deprecated + --border-basic-primary: #c9c9cd; + --border-basic-secondary: #e2e2e4; + --border-subtle: #eeeeef; // deprecated + --border-basic-tertiary: #e5e5e6; + --border-hover: #ababb1; // deprecated + --border-basic-hover: #ababb1; + --border-disabled: #e2e2e4; // deprecated + --border-basic-disabled: #e2e2e4; + --border-basic-negative: #ca0005; + --border-basic-warning: #755b00; + --border-basic-positive: #005321; + --border-basic-info: #003fa4; + --border-basic-purple: #6100bd; + --border-invert-default: rgb(255 255 255 / 70%); // deprecated + --border-invert-primary: rgb(255 255 255 / 70%); + --border-invert-subtle: rgb(255 255 255 / 30%); // deprecated + --border-invert-secondary: rgb(255 255 255 / 30%); --border-invert-hover: #fff; --border-invert-disabled: rgb(255 255 255 / 50%); - --color-action-active: #003fa4; - --color-action-hover: #004bc2; - --color-action-default: #06f; + --color-action-active: #003fa4; // deprecated + --action-primary-active: #b7cbea; + --color-action-hover: #004bc2; // deprecated + --action-primary-hover: #064db9; + --color-action-default: #06f; // deprecated + --action-primary-default: #06f; --color-action-default-rgb: 0, 102, 255; - --color-action-disabled: #9dceff; - --color-negative-active: #930002; - --color-negative-hover: #ae0003; - --color-negative-default: #ca0005; - --color-negative-disabled: #eba3a3; - --color-warning-default: #e8bb00; - --color-warning-hover: #c9a100; - --color-positive-default: #00893c; - --color-positive-hover: #006329; - --color-positive-disabled: #d1f4d5; - --color-bot: #50009c; + --color-action-disabled: #9dceff; // deprecated + --action-primary-disabled: rgb(0 102 255 / 20%); + --color-negative-active: #930002; // deprecated + --action-negative-active: #6f090e; + --color-negative-hover: #ae0003; // deprecated + --action-negative-hover: #8d0004; + --color-negative-default: #ca0005; // deprecated + --action-negative-default: #ca0005; + --color-negative-disabled: #eba3a3; // deprecated + --action-negative-disabled: rgb(202 0 5 / 20%); + --color-warning-default: #e8bb00; // deprecated + --action-warning-default: #e8bb00; + --color-warning-hover: #c9a100; // deprecated + --action-warning-hover: #a88907; + --color-positive-default: #00893c; // deprecated + --action-positive-default: #00893c; + --color-positive-hover: #006329; // deprecated + --action-positive-hover: #066631; + --color-positive-disabled: #d1f4d5; // deprecated + --action-positive-disabled: rgb(0 137 60 / 20%); + --action-neutral-default: #8d8d95; + --action-neutral-hover: #68686f; + --action-neutral-disabled: rgb(141 141 149 / 20%); + --color-bot: #50009c; // deprecated + --surface-other-bot: #50009c; --color-black: #131317; --color-white: #fff; --decor-blue900: #003288; @@ -125,4 +212,13 @@ --decor-purple200: #d1c0ff; --decor-purple100: #eee8ff; --decor-purple50: #faf8ff; + --products-livechat: #fe5100; + --products-helpdesk: #00c057; + --products-chatbot: #06f; + --products-knowledgebase: #9146ff; + --illustrations-primary: #ffd000; + --illustrations-secondary: #e2e2e4; + --illustrations-stroke: #1b1b20; + --tag-surface-01: #e2e2e4; + --tag-content-01: #131317; }