Shadow improvements for resting shadows (#1187)

* update buttons * Update resting shadows * improve resting med
primer · Feb 19, 2025 · 4266174 · 4266174
1 parent 9802c5b
commit 4266174
Show file tree

Hide file tree

Showing 3 changed files with 52 additions and 14 deletions.
diff --git a/.changeset/tasty-games-love.md b/.changeset/tasty-games-love.md
@@ -0,0 +1,5 @@
+---
+'@primer/primitives': patch
+---
+
+Update resting shadow values
diff --git a/src/tokens/component/button.json5 b/src/tokens/component/button.json5
@@ -136,7 +136,7 @@
           },
         },
       },
-            shadow: {
+      shadow: {
         resting: {
           $value: [
             {
@@ -479,7 +479,7 @@
           },
         },
       },
-            shadow: {
+      shadow: {
         selected: {
           $value: [
             {
@@ -982,7 +982,7 @@
           },
         },
       },
-            shadow: {
+      shadow: {
         selected: {
           $value: [
             {
@@ -1289,7 +1289,7 @@
           },
         },
       },
-            shadow: {
+      shadow: {
         selected: {
           $value: [
             {

diff --git a/src/tokens/functional/shadow/shadow.json5 b/src/tokens/functional/shadow/shadow.json5
@@ -35,10 +35,10 @@
       xsmall: {
         $value: {
           color: '{base.color.neutral.13}',
-          alpha: 0.1,
+          alpha: 0.06,
           offsetX: '0px',
           offsetY: '1px',
-          blur: '0px',
+          blur: '1px',
           spread: '0px',
           inset: false,
         },
@@ -55,7 +55,7 @@
                 alpha: 0.8,
                 offsetX: '0px',
                 offsetY: '1px',
-                blur: '0px',
+                blur: '1px',
                 spread: '0px',
                 inset: false,
               },
@@ -67,10 +67,19 @@
         $value: [
           {
             color: '{base.color.neutral.13}',
-            alpha: 0.04,
+            alpha: 0.06,
             offsetX: '0px',
             offsetY: '1px',
-            blur: '0px',
+            blur: '1px',
+            spread: '0px',
+            inset: false,
+          },
+          {
+            color: '{base.color.neutral.13}',
+            alpha: 0.06,
+            offsetX: '0px',
+            offsetY: '1px',
+            blur: '3px',
             spread: '0px',
             inset: false,
           },
@@ -86,10 +95,19 @@
               $value: [
                 {
                   color: '{base.color.neutral.0}',
-                  alpha: 0.4,
+                  alpha: 0.6,
                   offsetX: '0px',
                   offsetY: '1px',
-                  blur: '0px',
+                  blur: '1px',
+                  spread: '0px',
+                  inset: false,
+                },
+                {
+                  color: '{base.color.neutral.0}',
+                  alpha: 0.6,
+                  offsetX: '0px',
+                  offsetY: '1px',
+                  blur: '3px',
                   spread: '0px',
                   inset: false,
                 },
@@ -100,6 +118,14 @@
       },
       medium: {
         $value: [
+          {
+            color: '{base.color.neutral.12}',
+            alpha: 0.1,
+            offsetX: '0px',
+            offsetY: '1px',
+            blur: '1px',
+            spread: '0px',
+          },
           {
             color: '{base.color.neutral.12}',
             alpha: 0.12,
@@ -118,6 +144,14 @@
           'org.primer.overrides': {
             dark: {
               $value: [
+                {
+                  color: '{base.color.neutral.0}',
+                  alpha: 0.4,
+                  offsetX: '0px',
+                  offsetY: '1px',
+                  blur: '1px',
+                  spread: '0px',
+                },
                 {
                   color: '{base.color.neutral.0}',
                   alpha: 0.8,
@@ -414,8 +448,7 @@
         ],
         $type: 'shadow',
         $extensions: {
-          'org.primer.figma': {
-          },
+          'org.primer.figma': {},
           'org.primer.overrides': {
             dark: {
               $value: [
@@ -442,4 +475,4 @@
       },
     },
   },
-}
+}