adjust border/shadows

primer · Sep 18, 2023 · 8931c74 · 8931c74
1 parent 5ebfafe
commit 8931c74
Show file tree

Hide file tree

Showing 8 changed files with 48 additions and 36 deletions.
diff --git a/docs/storybook/stories/Demos/PatternOverrides.css b/docs/storybook/stories/Demos/PatternOverrides.css
@@ -42,6 +42,12 @@
   color: var(--button-invisible-fgColor-rest) !important;
 }
 
+.Button button[id='danger']:hover:not(:disabled) {
+  background-color: var(--button-danger-bgColor-hover) !important;
+  color: var(--button-danger-fgColor-hover) !important;
+  border-color: var(--button-danger-borderColor-hover) !important;
+}
+
 .Button button[id='default']:not(:hover) [data-component='ButtonCounter'] {
   background-color: var(--buttonCounter-default-bgColor-rest) !important;
 }

diff --git a/src/tokens/functional/color/dark/overrides/dark.high-contrast.json5 b/src/tokens/functional/color/dark/overrides/dark.high-contrast.json5
@@ -280,6 +280,11 @@
           $type: 'color',
           alpha: 1,
         },
+        active: {
+          $value: '{base.color.green.2}',
+          $type: 'color',
+          alpha: 1,
+        },
         disabled: {
           $value: '{base.color.green.2}',
           $type: 'color',

diff --git a/src/tokens/functional/color/dark/overrides/dark.protanopia-deuteranopia.json5 b/src/tokens/functional/color/dark/overrides/dark.protanopia-deuteranopia.json5
@@ -205,12 +205,6 @@
           },
         },
       },
-      borderColor: {
-        hover: {
-          $value: '{base.color.orange.6}',
-          $type: 'color',
-        },
-      },
     },
   },
   diffBlob: {

diff --git a/src/tokens/functional/color/dark/patterns-dark.json5 b/src/tokens/functional/color/dark/patterns-dark.json5
@@ -870,7 +870,7 @@
           },
         },
         hover: {
-          $value: '{borderColor.default}',
+          $value: '{button.default.borderColor.rest}',
           $type: 'color',
           $extensions: {
             'org.primer.figma': {
@@ -882,7 +882,7 @@
           },
         },
         active: {
-          $value: '{borderColor.default}',
+          $value: '{button.default.borderColor.rest}',
           $type: 'color',
           $extensions: {
             'org.primer.figma': {
@@ -1037,6 +1037,18 @@
             },
           },
         },
+        active: {
+          $value: '{button.primary.borderColor.rest}',
+          $type: 'color',
+          $extensions: {
+            'org.primer.figma': {
+              collection: 'mode',
+              mode: 'dark',
+              group: 'component',
+              scopes: ['borderColor'],
+            },
+          },
+        },
         disabled: {
           $value: '{button.primary.bgColor.disabled}',
           $type: 'color',
@@ -1454,7 +1466,7 @@
           },
         },
         hover: {
-          $value: '{base.color.red.6}',
+          $value: '{base.color.gray.0}',
           $type: 'color',
           $extensions: {
             'org.primer.figma': {
@@ -1464,9 +1476,10 @@
               scopes: ['borderColor'],
             },
           },
+          alpha: 0.1,
         },
         active: {
-          $value: '{button.danger.bgColor.active}',
+          $value: '{button.danger.borderColor.hover}',
           $type: 'color',
           $extensions: {
             'org.primer.figma': {

diff --git a/src/tokens/functional/color/light/overrides/light.high-contrast.json5 b/src/tokens/functional/color/light/overrides/light.high-contrast.json5
@@ -364,6 +364,11 @@
           $type: 'color',
           alpha: 1,
         },
+        active: {
+          $value: '{base.color.green.7}',
+          $type: 'color',
+          alpha: 1,
+        },
       },
     },
     invisible: {

diff --git a/src/tokens/functional/color/light/patterns-light.json5 b/src/tokens/functional/color/light/patterns-light.json5
@@ -1028,6 +1028,18 @@
             },
           },
         },
+        active: {
+          $value: '{button.primary.borderColor.rest}',
+          $type: 'color',
+          $extensions: {
+            'org.primer.figma': {
+              collection: 'mode',
+              mode: 'light',
+              group: 'component',
+              scopes: ['borderColor'],
+            },
+          },
+        },
         disabled: {
           $value: '{button.primary.bgColor.disabled}',
           $type: 'color',
@@ -1449,7 +1461,7 @@
           },
         },
         hover: {
-          $value: '{borderColor.default}',
+          $value: '{base.color.black}',
           $type: 'color',
           $extensions: {
             'org.primer.figma': {
@@ -1459,9 +1471,10 @@
               scopes: ['borderColor'],
             },
           },
+          alpha: 0.15,
         },
         active: {
-          $value: '{borderColor.default}',
+          $value: '{button.danger.borderColor.hover}',
           $type: 'color',
           $extensions: {
             'org.primer.figma': {

diff --git a/src/tokens/functional/shadow/dark.json5 b/src/tokens/functional/shadow/dark.json5
@@ -31,18 +31,6 @@
           ],
           $type: 'shadow',
         },
-        inset: {
-          $value: {
-            color: '{base.color.transparent}',
-            alpha: 0,
-            offsetX: '0px',
-            offsetY: '0px',
-            blur: '0px',
-            spread: '0px',
-            inset: false,
-          },
-          $type: 'shadow',
-        },
       },
     },
     primary: {

diff --git a/src/tokens/functional/shadow/light.json5 b/src/tokens/functional/shadow/light.json5
@@ -31,18 +31,6 @@
           ],
           $type: 'shadow',
         },
-        inset: {
-          $value: {
-            color: '{base.color.white}',
-            alpha: 0.25,
-            offsetX: '0px',
-            offsetY: '1px',
-            blur: '0px',
-            spread: '0px',
-            inset: true,
-          },
-          $type: 'shadow',
-        },
       },
     },
     primary: {