Adjust borders/shadows for Button component (#733)

* adjust border/shadows * Create nice-penguins-doubt.md * github-actions[bot] Regenerated snapshots * Update nice-penguins-doubt.md * adjust outline button hover border * github-actions[bot] Regenerated snapshots --------- Co-authored-by: langermank <langermank@users.noreply.github.com>
primer · Sep 19, 2023 · f431e7e · f431e7e
1 parent 5ebfafe
commit f431e7e
Show file tree

Hide file tree

Showing 41 changed files with 61 additions and 40 deletions.
diff --git a/.changeset/nice-penguins-doubt.md b/.changeset/nice-penguins-doubt.md
@@ -0,0 +1,7 @@
+---
+"@primer/primitives": patch
+---
+
+- Remove the default button inset shadow (its basically invisible)
+- Switch danger button to use the same border strategy as primary for hover/active
+
diff --git a/...s/storybook-color-patterns--button-all-themes-dark-colorblind-theme-1-linux.png b/...s/storybook-color-patterns--button-all-themes-dark-colorblind-theme-1-linux.png
diff --git a/...torybook-color-patterns--button-all-themes-dark-high-contrast-theme-1-linux.png b/...torybook-color-patterns--button-all-themes-dark-high-contrast-theme-1-linux.png
diff --git a/...ts-snapshots/storybook-color-patterns--button-all-themes-dark-theme-1-linux.png b/...ts-snapshots/storybook-color-patterns--button-all-themes-dark-theme-1-linux.png
diff --git a/...s/storybook-color-patterns--button-all-themes-dark-tritanopia-theme-1-linux.png b/...s/storybook-color-patterns--button-all-themes-dark-tritanopia-theme-1-linux.png
diff --git a/.../storybook-color-patterns--button-all-themes-light-colorblind-theme-1-linux.png b/.../storybook-color-patterns--button-all-themes-light-colorblind-theme-1-linux.png
diff --git a/...orybook-color-patterns--button-all-themes-light-high-contrast-theme-1-linux.png b/...orybook-color-patterns--button-all-themes-light-high-contrast-theme-1-linux.png
diff --git a/...s-snapshots/storybook-color-patterns--button-all-themes-light-theme-1-linux.png b/...s-snapshots/storybook-color-patterns--button-all-themes-light-theme-1-linux.png
diff --git a/.../storybook-color-patterns--button-all-themes-light-tritanopia-theme-1-linux.png b/.../storybook-color-patterns--button-all-themes-light-tritanopia-theme-1-linux.png
diff --git a/...rybook-migration-tables--fallbacks-all-themes-dark-colorblind-theme-1-linux.png b/...rybook-migration-tables--fallbacks-all-themes-dark-colorblind-theme-1-linux.png
diff --git a/...ook-migration-tables--fallbacks-all-themes-dark-high-contrast-theme-1-linux.png b/...ook-migration-tables--fallbacks-all-themes-dark-high-contrast-theme-1-linux.png
diff --git a/...apshots/storybook-migration-tables--fallbacks-all-themes-dark-theme-1-linux.png b/...apshots/storybook-migration-tables--fallbacks-all-themes-dark-theme-1-linux.png
diff --git a/...rybook-migration-tables--fallbacks-all-themes-dark-tritanopia-theme-1-linux.png b/...rybook-migration-tables--fallbacks-all-themes-dark-tritanopia-theme-1-linux.png
diff --git a/...ybook-migration-tables--fallbacks-all-themes-light-colorblind-theme-1-linux.png b/...ybook-migration-tables--fallbacks-all-themes-light-colorblind-theme-1-linux.png
diff --git a/...ok-migration-tables--fallbacks-all-themes-light-high-contrast-theme-1-linux.png b/...ok-migration-tables--fallbacks-all-themes-light-high-contrast-theme-1-linux.png
diff --git a/...pshots/storybook-migration-tables--fallbacks-all-themes-light-theme-1-linux.png b/...pshots/storybook-migration-tables--fallbacks-all-themes-light-theme-1-linux.png
diff --git a/...ybook-migration-tables--fallbacks-all-themes-light-tritanopia-theme-1-linux.png b/...ybook-migration-tables--fallbacks-all-themes-light-tritanopia-theme-1-linux.png
diff --git a/...k-migration-tables--pattern-tokens-all-themes-dark-colorblind-theme-1-linux.png b/...k-migration-tables--pattern-tokens-all-themes-dark-colorblind-theme-1-linux.png
diff --git a/...igration-tables--pattern-tokens-all-themes-dark-high-contrast-theme-1-linux.png b/...igration-tables--pattern-tokens-all-themes-dark-high-contrast-theme-1-linux.png
diff --git a/...ts/storybook-migration-tables--pattern-tokens-all-themes-dark-theme-1-linux.png b/...ts/storybook-migration-tables--pattern-tokens-all-themes-dark-theme-1-linux.png
diff --git a/...k-migration-tables--pattern-tokens-all-themes-dark-tritanopia-theme-1-linux.png b/...k-migration-tables--pattern-tokens-all-themes-dark-tritanopia-theme-1-linux.png
diff --git a/...-migration-tables--pattern-tokens-all-themes-light-colorblind-theme-1-linux.png b/...-migration-tables--pattern-tokens-all-themes-light-colorblind-theme-1-linux.png
diff --git a/...gration-tables--pattern-tokens-all-themes-light-high-contrast-theme-1-linux.png b/...gration-tables--pattern-tokens-all-themes-light-high-contrast-theme-1-linux.png
diff --git a/...s/storybook-migration-tables--pattern-tokens-all-themes-light-theme-1-linux.png b/...s/storybook-migration-tables--pattern-tokens-all-themes-light-theme-1-linux.png
diff --git a/...-migration-tables--pattern-tokens-all-themes-light-tritanopia-theme-1-linux.png b/...-migration-tables--pattern-tokens-all-themes-light-tritanopia-theme-1-linux.png
diff --git a/...torybook-migration-tables--shadows-all-themes-dark-colorblind-theme-1-linux.png b/...torybook-migration-tables--shadows-all-themes-dark-colorblind-theme-1-linux.png
diff --git a/...ybook-migration-tables--shadows-all-themes-dark-high-contrast-theme-1-linux.png b/...ybook-migration-tables--shadows-all-themes-dark-high-contrast-theme-1-linux.png
diff --git a/...snapshots/storybook-migration-tables--shadows-all-themes-dark-theme-1-linux.png b/...snapshots/storybook-migration-tables--shadows-all-themes-dark-theme-1-linux.png
diff --git a/...torybook-migration-tables--shadows-all-themes-dark-tritanopia-theme-1-linux.png b/...torybook-migration-tables--shadows-all-themes-dark-tritanopia-theme-1-linux.png
diff --git a/...orybook-migration-tables--shadows-all-themes-light-colorblind-theme-1-linux.png b/...orybook-migration-tables--shadows-all-themes-light-colorblind-theme-1-linux.png
diff --git a/...book-migration-tables--shadows-all-themes-light-high-contrast-theme-1-linux.png b/...book-migration-tables--shadows-all-themes-light-high-contrast-theme-1-linux.png
diff --git a/...napshots/storybook-migration-tables--shadows-all-themes-light-theme-1-linux.png b/...napshots/storybook-migration-tables--shadows-all-themes-light-theme-1-linux.png
diff --git a/...orybook-migration-tables--shadows-all-themes-light-tritanopia-theme-1-linux.png b/...orybook-migration-tables--shadows-all-themes-light-tritanopia-theme-1-linux.png
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',
@@ -1283,7 +1295,7 @@
       },
       borderColor: {
         hover: {
-          $value: '{borderColor.muted}',
+          $value: '{base.color.gray.0}',
           $type: 'color',
           $extensions: {
             'org.primer.figma': {
@@ -1293,9 +1305,10 @@
               scopes: ['borderColor'],
             },
           },
+          alpha: 0.1,
         },
         selected: {
-          $value: '{borderColor.muted}',
+          $value: '{button.outline.borderColor.hover}',
           $type: 'color',
           $extensions: {
             'org.primer.figma': {
@@ -1454,7 +1467,7 @@
           },
         },
         hover: {
-          $value: '{base.color.red.6}',
+          $value: '{base.color.gray.0}',
           $type: 'color',
           $extensions: {
             'org.primer.figma': {
@@ -1464,9 +1477,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',
@@ -1278,7 +1290,7 @@
       },
       borderColor: {
         hover: {
-          $value: '{borderColor.default}',
+          $value: '{base.color.black}',
           $type: 'color',
           $extensions: {
             'org.primer.figma': {
@@ -1288,9 +1300,10 @@
               scopes: ['borderColor'],
             },
           },
+          alpha: 0.15,
         },
         active: {
-          $value: '{borderColor.default}',
+          $value: '{button.outline.borderColor.hover}',
           $type: 'color',
           $extensions: {
             'org.primer.figma': {
@@ -1449,7 +1462,7 @@
           },
         },
         hover: {
-          $value: '{borderColor.default}',
+          $value: '{base.color.black}',
           $type: 'color',
           $extensions: {
             'org.primer.figma': {
@@ -1459,9 +1472,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: {