chore: add shadow elevation color tokens (#29708)

Fixes: #29702
2023-12-19 10:43:06 +03:00 · 2023-12-19 10:43:06 +03:00 · 862cdded5a
commit 862cdded5a
parent cdfef0c546
11 changed files with 140 additions and 21 deletions
--- 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
   */
--- 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
   */
--- 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;
--- 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
    <tr>
      <td>fg</td>
      <td>neutral</td>
-      <td></td>
+      <td>elevation</td>
      <td>active</td>
    </tr>
    <tr>
@ -46,7 +46,7 @@ Tokens are named using four-part schema. Every part of the name except `type` is
      <td>focus</td>
    </tr>
    <tr>
-      <td></td>
+      <td>shadow</td>
      <td>negative</td>
      <td></td>
      <td></td>
@ -183,3 +183,7 @@ Slightly darker than the resting state to produce the effect of moving further f
 ### Border Tokens

 <ColorTable isExactMatch={false} filter={["bd"]} />
+
+### Shadow Tokens
+
+<ColorTable isExactMatch={false} filter={["shadow"]} />
--- 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",
--- 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;
--- 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"
    }
  },
--- 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);
--- a/app/client/packages/storybook/.storybook/preview-head.html
+++ b/app/client/packages/storybook/.storybook/preview-head.html
@ -1,20 +1,24 @@
 <script defer src="https://cdn.jsdelivr.net/npm/container-query-polyfill@1/dist/container-query-polyfill.modern.js"></script>

 <style>
+  .docs-story [data-theme-provider] {
+    background-color: transparent;
+  }
+
  h1, h2, h3, h4, h5, h6, p, th, td {
    color: var(--color-fg) !important;
    border-color: var(--color-bd) !important;
    font-family: var(--font-family) !important;
  }

-  tr {
-    background-color: var(--color-bg) !important;
-  }
-
  th, td,
  .css-s230ta {
    border-color: var(--color-bd) !important;
-    background-color: var(--color-bg) !important;
+  }
+
+  td,
+  .css-s230ta {
+    background-color: var(--color-bg-elevation-1) !important;
  }

  code,
--- a/app/client/packages/storybook/src/components/StoryThemeProvider.tsx
+++ b/app/client/packages/storybook/src/components/StoryThemeProvider.tsx
@ -8,8 +8,6 @@ const StyledThemeProvider = styled(ThemeProvider)`
  min-width: 100%;
  min-height: 100%;
  padding: 36px;
-  background: var(--color-bg);
-  color: var(--color-fg);
  flex-direction: column;
  align-items: center;
 `;
--- a/app/client/packages/storybook/src/components/TokenTable.tsx
+++ b/app/client/packages/storybook/src/components/TokenTable.tsx
@ -26,6 +26,7 @@ export const StyledTable = styled.table`
  td {
    text-align: left;
    padding: var(--spacing-2);
+    background-color: var(--color-bg-elevation-1);
  }

  td {