add button shadows to button.json5

primer · Feb 6, 2025 · 5cfa2f4 · 5cfa2f4
1 parent b42c1bb
commit 5cfa2f4
Show file tree

Hide file tree

Showing 2 changed files with 187 additions and 197 deletions.
diff --git a/src/tokens/component/button.json5 b/src/tokens/component/button.json5
@@ -135,6 +135,43 @@
             },
           },
         },
+      },
+            shadow: {
+        resting: {
+          $value: [
+            {
+              color: '{base.color.neutral.13}',
+              alpha: 0.04,
+              offsetX: '0px',
+              offsetY: '1px',
+              blur: '0px',
+              spread: '0px',
+              inset: false,
+            },
+          ],
+          $type: 'shadow',
+          $extensions: {
+            'org.primer.figma': {
+              collection: 'mode',
+              group: 'component shadow',
+            },
+            'org.primer.overrides': {
+              dark: {
+                $value: [
+                  {
+                    color: '{base.color.transparent}',
+                    alpha: 0,
+                    offsetX: '0px',
+                    offsetY: '0px',
+                    blur: '0px',
+                    spread: '0px',
+                    inset: false,
+                  },
+                ],
+              },
+            },
+          },
+        },
       },
     },
     primary: {
@@ -441,6 +478,69 @@
             },
           },
         },
+      },
+            shadow: {
+        selected: {
+          $value: [
+            {
+              color: '{base.color.green.9}',
+              alpha: 0.3,
+              offsetX: '0px',
+              offsetY: '1px',
+              blur: '0px',
+              spread: '0px',
+              inset: true,
+            },
+          ],
+          $type: 'shadow',
+          $extensions: {
+            'org.primer.figma': {
+              collection: 'mode',
+              group: 'component shadow',
+            },
+            'org.primer.overrides': {
+              'light-tritanopia': {
+                $value: [
+                  {
+                    color: '{base.color.blue.9}',
+                    alpha: 0.3,
+                    offsetX: '0px',
+                    offsetY: '1px',
+                    blur: '0px',
+                    spread: '0px',
+                    inset: true,
+                  },
+                ],
+              },
+              'light-protanopia-deuteranopia': {
+                $value: [
+                  {
+                    color: '{base.color.blue.9}',
+                    alpha: 0.3,
+                    offsetX: '0px',
+                    offsetY: '1px',
+                    blur: '0px',
+                    spread: '0px',
+                    inset: true,
+                  },
+                ],
+              },
+              dark: {
+                $value: [
+                  {
+                    color: '{base.color.transparent}',
+                    alpha: 0,
+                    offsetX: '0px',
+                    offsetY: '0px',
+                    blur: '0px',
+                    spread: '0px',
+                    inset: false,
+                  },
+                ],
+              },
+            },
+          },
+        },
       },
     },
     invisible: {
@@ -881,6 +981,43 @@
             },
           },
         },
+      },
+            shadow: {
+        selected: {
+          $value: [
+            {
+              color: '{base.color.blue.9}',
+              alpha: 0.2,
+              offsetX: '0px',
+              offsetY: '1px',
+              blur: '0px',
+              spread: '0px',
+              inset: true,
+            },
+          ],
+          $type: 'shadow',
+          $extensions: {
+            'org.primer.figma': {
+              collection: 'mode',
+              group: 'component shadow',
+            },
+            'org.primer.overrides': {
+              dark: {
+                $value: [
+                  {
+                    color: '{base.color.transparent}',
+                    alpha: 0,
+                    offsetX: '0px',
+                    offsetY: '0px',
+                    blur: '0px',
+                    spread: '0px',
+                    inset: false,
+                  },
+                ],
+              },
+            },
+          },
+        },
       },
     },
     danger: {
@@ -1151,6 +1288,56 @@
             },
           },
         },
+      },
+            shadow: {
+        selected: {
+          $value: [
+            {
+              color: '{base.color.red.9}',
+              alpha: 0.2,
+              offsetX: '0px',
+              offsetY: '1px',
+              blur: '0px',
+              spread: '0px',
+              inset: true,
+            },
+          ],
+          $type: 'shadow',
+          $extensions: {
+            'org.primer.figma': {
+              collection: 'mode',
+              group: 'component shadow',
+            },
+            'org.primer.overrides': {
+              'light-protanopia-deuteranopia': {
+                $value: [
+                  {
+                    color: '{base.color.orange.9}',
+                    alpha: 0.2,
+                    offsetX: '0px',
+                    offsetY: '1px',
+                    blur: '0px',
+                    spread: '0px',
+                    inset: true,
+                  },
+                ],
+              },
+              dark: {
+                $value: [
+                  {
+                    color: '{base.color.transparent}',
+                    alpha: 0,
+                    offsetX: '0px',
+                    offsetY: '0px',
+                    blur: '0px',
+                    spread: '0px',
+                    inset: false,
+                  },
+                ],
+              },
+            },
+          },
+        },
       },
     },
     inactive: {