From 862cdded5a90401c1d84f8c9a17675f30e2ae685 Mon Sep 17 00:00:00 2001 From: Valera Melnikov Date: Tue, 19 Dec 2023 10:43:06 +0300 Subject: [PATCH] chore: add shadow elevation color tokens (#29708) Fixes: #29702 --- .../theming/src/color/src/DarkModeTheme.ts | 32 +++++++++++++++ .../theming/src/color/src/LightModeTheme.ts | 32 +++++++++++++++ .../theming/src/color/src/types.ts | 8 ++++ .../src/theme/stories/Color.stories.mdx | 8 +++- .../theming/src/token/src/defaultTokens.json | 6 +-- .../theming/src/token/src/styles.module.css | 16 ++++++-- .../theming/src/token/src/themeTokens.json | 40 +++++++++++++++++-- .../src/components/Menu/src/styles.module.css | 2 +- .../storybook/.storybook/preview-head.html | 14 ++++--- .../src/components/StoryThemeProvider.tsx | 2 - .../storybook/src/components/TokenTable.tsx | 1 + 11 files changed, 140 insertions(+), 21 deletions(-) diff --git a/app/client/packages/design-system/theming/src/color/src/DarkModeTheme.ts b/app/client/packages/design-system/theming/src/color/src/DarkModeTheme.ts index fa94ab86b6..49625a0ec8 100644 --- a/app/client/packages/design-system/theming/src/color/src/DarkModeTheme.ts +++ b/app/client/packages/design-system/theming/src/color/src/DarkModeTheme.ts @@ -81,6 +81,10 @@ export class DarkModeTheme implements ColorModeTheme { bgElevation2: this.bgElevation2.to("sRGB").toString(), bgElevation3: this.bgElevation3.to("sRGB").toString(), + shadowElevation1: this.shadowElevation1.to("sRGB").toString(), + shadowElevation2: this.shadowElevation2.to("sRGB").toString(), + shadowElevation3: this.shadowElevation3.to("sRGB").toString(), + fg: this.fg.to("sRGB").toString(), fgAccent: this.fgAccent.to("sRGB").toString(), fgNeutral: this.fgNeutral.to("sRGB").toString(), @@ -613,6 +617,34 @@ export class DarkModeTheme implements ColorModeTheme { return color; } + /* + * Shadow colors + */ + + private get shadowElevation1() { + const color = this.seedColor.clone(); + + color.oklch.l = 0.2; + + return color; + } + + private get shadowElevation2() { + const color = this.shadowElevation1.clone(); + + color.oklch.l -= 0.05; + + return color; + } + + private get shadowElevation3() { + const color = this.shadowElevation2.clone(); + + color.oklch.l -= 0.05; + + return color; + } + /* * Foreground colors */ diff --git a/app/client/packages/design-system/theming/src/color/src/LightModeTheme.ts b/app/client/packages/design-system/theming/src/color/src/LightModeTheme.ts index 5dd645f49c..f54391fe17 100644 --- a/app/client/packages/design-system/theming/src/color/src/LightModeTheme.ts +++ b/app/client/packages/design-system/theming/src/color/src/LightModeTheme.ts @@ -81,6 +81,10 @@ export class LightModeTheme implements ColorModeTheme { bgElevation2: this.bgElevation2.to("sRGB").toString(), bgElevation3: this.bgElevation3.to("sRGB").toString(), + shadowElevation1: this.shadowElevation1.to("sRGB").toString(), + shadowElevation2: this.shadowElevation2.to("sRGB").toString(), + shadowElevation3: this.shadowElevation3.to("sRGB").toString(), + fg: this.fg.to("sRGB").toString(), fgAccent: this.fgAccent.to("sRGB").toString(), fgNeutral: this.fgNeutral.to("sRGB").toString(), @@ -651,6 +655,34 @@ export class LightModeTheme implements ColorModeTheme { return color; } + /* + * Shadow colors + */ + + private get shadowElevation1() { + const color = this.seedColor.clone(); + + color.oklch.l = 0.2; + + return color; + } + + private get shadowElevation2() { + const color = this.shadowElevation1.clone(); + + color.oklch.l += 0.05; + + return color; + } + + private get shadowElevation3() { + const color = this.shadowElevation2.clone(); + + color.oklch.l += 0.05; + + return color; + } + /* * Foreground colors */ diff --git a/app/client/packages/design-system/theming/src/color/src/types.ts b/app/client/packages/design-system/theming/src/color/src/types.ts index dfa2e471fa..d59c5cec18 100644 --- a/app/client/packages/design-system/theming/src/color/src/types.ts +++ b/app/client/packages/design-system/theming/src/color/src/types.ts @@ -32,6 +32,14 @@ export interface ColorModeTheme { bgWarningActive: string; bgWarningSubtleHover: string; bgWarningSubtleActive: string; + // Elevation + bgElevation1: string; + bgElevation2: string; + bgElevation3: string; + // Shadow + shadowElevation1: string; + shadowElevation2: string; + shadowElevation3: string; // fg fg: string; fgAccent: string; diff --git a/app/client/packages/design-system/theming/src/theme/stories/Color.stories.mdx b/app/client/packages/design-system/theming/src/theme/stories/Color.stories.mdx index 8fa3913970..59418cf8f5 100644 --- a/app/client/packages/design-system/theming/src/theme/stories/Color.stories.mdx +++ b/app/client/packages/design-system/theming/src/theme/stories/Color.stories.mdx @@ -36,7 +36,7 @@ Tokens are named using four-part schema. Every part of the name except `type` is fg neutral - + elevation active @@ -46,7 +46,7 @@ Tokens are named using four-part schema. Every part of the name except `type` is focus - + shadow negative @@ -183,3 +183,7 @@ Slightly darker than the resting state to produce the effect of moving further f ### Border Tokens + +### Shadow Tokens + + diff --git a/app/client/packages/design-system/theming/src/token/src/defaultTokens.json b/app/client/packages/design-system/theming/src/token/src/defaultTokens.json index 316662bcee..331666bf89 100644 --- a/app/client/packages/design-system/theming/src/token/src/defaultTokens.json +++ b/app/client/packages/design-system/theming/src/token/src/defaultTokens.json @@ -57,9 +57,9 @@ "1": "0px" }, "boxShadow": { - "1": "0 8px 8px 0 rgba(0, 0, 0, 0.05)", - "2": "0 4px 4px 0 rgba(0, 0, 0, 0.1)", - "3": "0 2px 2px 0 rgba(0, 0, 0, 0.15)" + "1": "0 4px 6px 0 var(--color-shadow-elevation-1)", + "2": "0 2px 4px 0 var(--color-shadow-elevation-2)", + "3": "0 1px 2px 0 var(--color-shadow-elevation-3)" }, "borderWidth": { "1": "1px", diff --git a/app/client/packages/design-system/theming/src/token/src/styles.module.css b/app/client/packages/design-system/theming/src/token/src/styles.module.css index 1549eeffe7..019d9d48d3 100644 --- a/app/client/packages/design-system/theming/src/token/src/styles.module.css +++ b/app/client/packages/design-system/theming/src/token/src/styles.module.css @@ -683,7 +683,7 @@ --sizing-200: calc( 200 * clamp(3.2px, calc(0.1 * var(--provider-width) / 100 + 2.83px), 4.8px) ); - --color-bg: rgb(97.488% 97.871% 100%); + --color-bg: rgb(94.217% 94.598% 97.227%); --color-bg-accent: rgb(33.333% 23.922% 91.373%); --color-bg-accent-hover: rgb(38.033% 31.188% 98.353%); --color-bg-accent-active: rgb(31.537% 20.805% 88.597%); @@ -716,10 +716,16 @@ --color-bg-warning-subtle: rgb(100% 94.114% 80.142%); --color-bg-warning-subtle-hover: rgb(100% 97.012% 87.859%); --color-bg-warning-subtle-active: rgb(99.63% 92.81% 78.869%); + --color-bg-elevation-1: rgb(96.832% 97.215% 99.857%); + --color-bg-elevation-2: rgb(98.836% 99.192% 100%); + --color-bg-elevation-3: rgb(100% 100% 100%); + --color-shadow-elevation-1: rgb(0% 0% 0%); + --color-shadow-elevation-2: rgb(13.355% 0% 21.478%); + --color-shadow-elevation-3: rgb(19.719% 0% 40.53%); --color-fg: rgb(1.6475% 1.7126% 6.8084%); --color-fg-accent: rgb(33.333% 23.922% 91.373%); - --color-fg-neutral: rgb(37.193% 38.537% 50.855%); - --color-fg-neutral-subtle: rgb(48.439% 49.938% 62.827%); + --color-fg-neutral: rgb(26.531% 27.672% 39.337%); + --color-fg-neutral-subtle: rgb(37.193% 38.537% 50.855%); --color-fg-positive: rgb(6.7435% 63.436% 18.481%); --color-fg-negative: rgb(100% 0% 28.453%); --color-fg-warning: rgb(71.79% 51.231% 0%); @@ -747,7 +753,9 @@ --color-bd-on-negative: rgb(21.923% 0% 2.8118%); --color-bd-on-warning: rgb(39.972% 27.552% 0%); --border-radius-1: 0px; - --box-shadow-1: 0 2px 2px 0 rgba(0, 0, 0, 0.2); + --box-shadow-1: 0 4px 6px 0 var(--color-shadow-elevation-1); + --box-shadow-2: 0 2px 4px 0 var(--color-shadow-elevation-2); + --box-shadow-3: 0 1px 2px 0 var(--color-shadow-elevation-3); --border-width-1: 1px; --border-width-2: 2px; --opacity-disabled: 0.3; diff --git a/app/client/packages/design-system/theming/src/token/src/themeTokens.json b/app/client/packages/design-system/theming/src/token/src/themeTokens.json index 6b6d01dcf6..4593d86c80 100644 --- a/app/client/packages/design-system/theming/src/token/src/themeTokens.json +++ b/app/client/packages/design-system/theming/src/token/src/themeTokens.json @@ -1,7 +1,7 @@ { "color": { "bg": { - "value": "rgb(97.488% 97.871% 100%)", + "value": "rgb(94.217% 94.598% 97.227%)", "type": "color" }, "bg-accent": { @@ -132,6 +132,30 @@ "value": "rgb(99.63% 92.81% 78.869%)", "type": "color" }, + "bg-elevation-1": { + "value": "rgb(96.832% 97.215% 99.857%)", + "type": "color" + }, + "bg-elevation-2": { + "value": "rgb(98.836% 99.192% 100%)", + "type": "color" + }, + "bg-elevation-3": { + "value": "rgb(100% 100% 100%)", + "type": "color" + }, + "shadow-elevation-1": { + "value": "rgb(0% 0% 0%)", + "type": "color" + }, + "shadow-elevation-2": { + "value": "rgb(13.355% 0% 21.478%)", + "type": "color" + }, + "shadow-elevation-3": { + "value": "rgb(19.719% 0% 40.53%)", + "type": "color" + }, "fg": { "value": "rgb(1.6475% 1.7126% 6.8084%)", "type": "color" @@ -141,11 +165,11 @@ "type": "color" }, "fg-neutral": { - "value": "rgb(37.193% 38.537% 50.855%)", + "value": "rgb(26.531% 27.672% 39.337%)", "type": "color" }, "fg-neutral-subtle": { - "value": "rgb(48.439% 49.938% 62.827%)", + "value": "rgb(37.193% 38.537% 50.855%)", "type": "color" }, "fg-positive": { @@ -261,7 +285,15 @@ }, "boxShadow": { "1": { - "value": "0 2px 2px 0 rgba(0, 0, 0, 0.2)", + "value": "0 4px 6px 0 var(--color-shadow-elevation-1)", + "type": "boxShadow" + }, + "2": { + "value": "0 2px 4px 0 var(--color-shadow-elevation-2)", + "type": "boxShadow" + }, + "3": { + "value": "0 1px 2px 0 var(--color-shadow-elevation-3)", "type": "boxShadow" } }, diff --git a/app/client/packages/design-system/widgets/src/components/Menu/src/styles.module.css b/app/client/packages/design-system/widgets/src/components/Menu/src/styles.module.css index d09a2b4a76..9aaa4e8934 100644 --- a/app/client/packages/design-system/widgets/src/components/Menu/src/styles.module.css +++ b/app/client/packages/design-system/widgets/src/components/Menu/src/styles.module.css @@ -1,7 +1,7 @@ @import "../../../shared/colors/colors.module.css"; .menu { - background-color: var(--color-bg); + background-color: var(--color-bg-elevation-3); border-radius: var(--border-radius-1); z-index: var(--z-index-99); box-shadow: var(--box-shadow-1); diff --git a/app/client/packages/storybook/.storybook/preview-head.html b/app/client/packages/storybook/.storybook/preview-head.html index daa0ba4887..a94c41fb8d 100644 --- a/app/client/packages/storybook/.storybook/preview-head.html +++ b/app/client/packages/storybook/.storybook/preview-head.html @@ -1,20 +1,24 @@