Shadow color adjustments

.changeset/wise-shirts-pull.md

@@ -0,0 +1,5 @@
+---
+"@primer/primitives": patch
+---
+
+Shadow color adjustments

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)',
+        },
+      },
+    },
+  },
 }

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}',

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)',
+        },
+      },
+    },
+  },
 }

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}',

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',

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,