Shadow color adjustments (#810)

* adjust box-shadow for dark * add color to respect themes * Create wise-shirts-pull.md * github-actions[bot] Regenerated snapshots --------- Co-authored-by: langermank <langermank@users.noreply.github.com>
primer · Feb 23, 2024 · a607bde · a607bde
1 parent 1e1eb56
commit a607bde
Show file tree

Hide file tree

Showing 29 changed files with 89 additions and 4 deletions.
diff --git a/.changeset/wise-shirts-pull.md b/.changeset/wise-shirts-pull.md
@@ -0,0 +1,5 @@
+---
+"@primer/primitives": patch
+---
+
+Shadow color adjustments
diff --git a/...ybook-color-functional-all--all-all-themes-dark-high-contrast-theme-1-linux.png b/...ybook-color-functional-all--all-all-themes-dark-high-contrast-theme-1-linux.png
diff --git a/...book-color-functional-all--all-all-themes-light-high-contrast-theme-1-linux.png b/...book-color-functional-all--all-all-themes-light-high-contrast-theme-1-linux.png
diff --git a/...lor-functional-shadows--shadows-all-themes-dark-high-contrast-theme-1-linux.png b/...lor-functional-shadows--shadows-all-themes-dark-high-contrast-theme-1-linux.png
diff --git a/...or-functional-shadows--shadows-all-themes-light-high-contrast-theme-1-linux.png b/...or-functional-shadows--shadows-all-themes-light-high-contrast-theme-1-linux.png
diff --git a/...ok-color-functional-tables--shadow-all-themes-dark-colorblind-theme-1-linux.png b/...ok-color-functional-tables--shadow-all-themes-dark-colorblind-theme-1-linux.png
diff --git a/...color-functional-tables--shadow-all-themes-dark-high-contrast-theme-1-linux.png b/...color-functional-tables--shadow-all-themes-dark-high-contrast-theme-1-linux.png
diff --git a/...ots/storybook-color-functional-tables--shadow-all-themes-dark-theme-1-linux.png b/...ots/storybook-color-functional-tables--shadow-all-themes-dark-theme-1-linux.png
diff --git a/...ok-color-functional-tables--shadow-all-themes-dark-tritanopia-theme-1-linux.png b/...ok-color-functional-tables--shadow-all-themes-dark-tritanopia-theme-1-linux.png
diff --git a/...k-color-functional-tables--shadow-all-themes-light-colorblind-theme-1-linux.png b/...k-color-functional-tables--shadow-all-themes-light-colorblind-theme-1-linux.png
diff --git a/...olor-functional-tables--shadow-all-themes-light-high-contrast-theme-1-linux.png b/...olor-functional-tables--shadow-all-themes-light-high-contrast-theme-1-linux.png
diff --git a/...ts/storybook-color-functional-tables--shadow-all-themes-light-theme-1-linux.png b/...ts/storybook-color-functional-tables--shadow-all-themes-light-theme-1-linux.png
diff --git a/...k-color-functional-tables--shadow-all-themes-light-tritanopia-theme-1-linux.png b/...k-color-functional-tables--shadow-all-themes-light-tritanopia-theme-1-linux.png
diff --git a/.../storybook-color-patterns--overlay-all-themes-dark-colorblind-theme-1-linux.png b/.../storybook-color-patterns--overlay-all-themes-dark-colorblind-theme-1-linux.png
diff --git a/...orybook-color-patterns--overlay-all-themes-dark-high-contrast-theme-1-linux.png b/...orybook-color-patterns--overlay-all-themes-dark-high-contrast-theme-1-linux.png
diff --git a/...s-snapshots/storybook-color-patterns--overlay-all-themes-dark-theme-1-linux.png b/...s-snapshots/storybook-color-patterns--overlay-all-themes-dark-theme-1-linux.png
diff --git a/.../storybook-color-patterns--overlay-all-themes-dark-tritanopia-theme-1-linux.png b/.../storybook-color-patterns--overlay-all-themes-dark-tritanopia-theme-1-linux.png
diff --git a/...storybook-color-patterns--overlay-all-themes-light-colorblind-theme-1-linux.png b/...storybook-color-patterns--overlay-all-themes-light-colorblind-theme-1-linux.png
diff --git a/...rybook-color-patterns--overlay-all-themes-light-high-contrast-theme-1-linux.png b/...rybook-color-patterns--overlay-all-themes-light-high-contrast-theme-1-linux.png
diff --git a/...-snapshots/storybook-color-patterns--overlay-all-themes-light-theme-1-linux.png b/...-snapshots/storybook-color-patterns--overlay-all-themes-light-theme-1-linux.png
diff --git a/...storybook-color-patterns--overlay-all-themes-light-tritanopia-theme-1-linux.png b/...storybook-color-patterns--overlay-all-themes-light-tritanopia-theme-1-linux.png
diff --git a/...ybook-migration-tables--shadows-all-themes-dark-high-contrast-theme-1-linux.png b/...ybook-migration-tables--shadows-all-themes-dark-high-contrast-theme-1-linux.png
diff --git a/...book-migration-tables--shadows-all-themes-light-high-contrast-theme-1-linux.png b/...book-migration-tables--shadows-all-themes-light-high-contrast-theme-1-linux.png
diff --git a/src/tokens/functional/color/dark/overrides/dark.high-contrast.json5 b/src/tokens/functional/color/dark/overrides/dark.high-contrast.json5
@@ -368,4 +368,17 @@
       },
     },
   },
+  overlay: {
+    borderColor: {
+      $value: '{base.color.gray.5}',
+      $type: 'color',
+      $extensions: {
+        'org.primer.figma': {
+          collection: 'mode',
+          mode: 'dark',
+          group: 'component (internal)',
+        },
+      },
+    },
+  },
 }
diff --git a/src/tokens/functional/color/dark/patterns-dark.json5 b/src/tokens/functional/color/dark/patterns-dark.json5
@@ -1903,6 +1903,17 @@
         },
       },
     },
+    borderColor: {
+      $value: '{base.color.gray.6}',
+      $type: 'color',
+      $extensions: {
+        'org.primer.figma': {
+          collection: 'mode',
+          mode: 'dark',
+          group: 'component (internal)',
+        },
+      },
+    },
     backdrop: {
       bgColor: {
         $value: '{base.color.gray.8}',

diff --git a/src/tokens/functional/color/light/overrides/light.high-contrast.json5 b/src/tokens/functional/color/light/overrides/light.high-contrast.json5
@@ -423,4 +423,17 @@
       },
     },
   },
+  overlay: {
+    borderColor: {
+      $value: '{base.color.gray.8}',
+      $type: 'color',
+      $extensions: {
+        'org.primer.figma': {
+          collection: 'mode',
+          mode: 'light',
+          group: 'component (internal)',
+        },
+      },
+    },
+  },
 }
diff --git a/src/tokens/functional/color/light/patterns-light.json5 b/src/tokens/functional/color/light/patterns-light.json5
@@ -1901,6 +1901,17 @@
         },
       },
     },
+    borderColor: {
+      $value: '{base.color.transparent}',
+      $type: 'color',
+      $extensions: {
+        'org.primer.figma': {
+          collection: 'mode',
+          mode: 'light',
+          group: 'component (internal)',
+        },
+      },
+    },
     backdrop: {
       bgColor: {
         $value: '{base.color.gray.4}',

diff --git a/src/tokens/functional/shadow/dark.json5 b/src/tokens/functional/shadow/dark.json5
@@ -155,7 +155,7 @@
       small: {
         $value: [
           {
-            color: '{base.color.gray.8}',
+            color: '{overlay.borderColor}',
             alpha: 1,
             offsetX: '0px',
             offsetY: '0px',
@@ -184,7 +184,7 @@
       medium: {
         $value: [
           {
-            color: '{base.color.gray.8}',
+            color: '{overlay.borderColor}',
             alpha: 1,
             offsetX: '0px',
             offsetY: '0px',
@@ -229,7 +229,7 @@
       large: {
         $value: [
           {
-            color: '{base.color.gray.8}',
+            color: '{overlay.borderColor}',
             alpha: 1,
             offsetX: '0px',
             offsetY: '0px',
@@ -250,7 +250,7 @@
       xlarge: {
         $value: [
           {
-            color: '{base.color.gray.8}',
+            color: '{overlay.borderColor}',
             alpha: 1,
             offsetX: '0px',
             offsetY: '0px',

diff --git a/src/tokens/functional/shadow/light.json5 b/src/tokens/functional/shadow/light.json5
@@ -154,6 +154,14 @@
     floating: {
       small: {
         $value: [
+          {
+            color: '{overlay.borderColor}',
+            alpha: 1,
+            offsetX: '0px',
+            offsetY: '0px',
+            blur: '0px',
+            spread: '1px',
+          },
           {
             color: '{base.color.gray.7}',
             alpha: 0.04,
@@ -175,6 +183,14 @@
       },
       medium: {
         $value: [
+          {
+            color: '{overlay.borderColor}',
+            alpha: 1,
+            offsetX: '0px',
+            offsetY: '0px',
+            blur: '0px',
+            spread: '1px',
+          },
           {
             color: '{base.color.gray.7}',
             alpha: 0.08,
@@ -212,6 +228,14 @@
       },
       large: {
         $value: [
+          {
+            color: '{overlay.borderColor}',
+            alpha: 1,
+            offsetX: '0px',
+            offsetY: '0px',
+            blur: '0px',
+            spread: '1px',
+          },
           {
             color: '{base.color.gray.7}',
             alpha: 0.24,
@@ -225,6 +249,14 @@
       },
       xlarge: {
         $value: [
+          {
+            color: '{overlay.borderColor}',
+            alpha: 1,
+            offsetX: '0px',
+            offsetY: '0px',
+            blur: '0px',
+            spread: '1px',
+          },
           {
             color: '{base.color.gray.7}',
             alpha: 0.32,