Merge 8e303f2 into 0bc0855

primer · Feb 23, 2024 · ebaf61e · ebaf61e
2 parents 0bc0855 + 8e303f2
commit ebaf61e
Show file tree

Hide file tree

Showing 7 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/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,