co-locate component shadows to avatar.json5 and button.json5 (#1185)

* co-locate avatar shadow * add button shadows to button.json5
primer · Feb 6, 2025 · dbee210 · dbee210
1 parent fa5426c
commit dbee210
Show file tree

Hide file tree

Showing 3 changed files with 220 additions and 232 deletions.
diff --git a/src/tokens/component/avatar.json5 b/src/tokens/component/avatar.json5
@@ -38,5 +38,38 @@
         },
       },
     },
+    shadow: {
+      $value: [
+        {
+          color: '{base.color.neutral.0}',
+          alpha: 0.8,
+          offsetX: '0px',
+          offsetY: '0px',
+          blur: '0px',
+          spread: '2px',
+        },
+      ],
+      $type: 'shadow',
+      $extensions: {
+        'org.primer.figma': {
+          collection: 'mode',
+          group: 'component shadow',
+        },
+        'org.primer.overrides': {
+          dark: {
+            $value: [
+              {
+                color: '{base.color.neutral.1}',
+                alpha: 1,
+                offsetX: '0px',
+                offsetY: '0px',
+                blur: '0px',
+                spread: '2px',
+              },
+            ],
+          },
+        },
+      },
+    },
   },
 }
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: {