Improve contrast for Buttons with counters (#641)

* button counters * hover states * add to old tokens * use scale colors * test disabled state * Create weak-wasps-drop.md * fix button border colors
primer · Jun 1, 2023 · 002617c · 002617c
1 parent 1b0cffb
commit 002617c
Show file tree

Hide file tree

Showing 7 changed files with 157 additions and 30 deletions.
diff --git a/.changeset/weak-wasps-drop.md b/.changeset/weak-wasps-drop.md
@@ -0,0 +1,5 @@
+---
+"@primer/primitives": patch
+---
+
+Improve contrast for Buttons with counters
diff --git a/data/colors/vars/component_dark.ts b/data/colors/vars/component_dark.ts
@@ -99,25 +99,28 @@ export default {
       disabledBg: alpha(get('scale.green.5'), 0.6),
       disabledBorder: get('border.subtle'),
       icon: get('scale.white'),
-      counterBg: alpha(get('scale.white'), 0.2)
+      counterBg: alpha(get('scale.green.9'), 0.2)
     },
 
     outline: {
-      text: get('scale.blue.3'),
+      text: get('scale.blue.4'),
       hoverText: get('scale.blue.3'),
       hoverBg: get('scale.gray.6'),
       hoverBorder: get('border.subtle'),
       hoverShadow: (theme: any) => `0 1px 0 ${alpha(get('scale.black'), 0.1)(theme)}`,
       hoverInsetShadow: (theme: any) => `inset 0 1px 0 ${alpha(get('scale.white'), 0.03)(theme)}`,
-      hoverCounterBg: alpha(get('scale.white'), 0.2),
+      hoverCounterBg: alpha(get('scale.blue.9'), 0.2),
       selectedText: get('scale.white'),
       selectedBg: get('scale.blue.7'),
       selectedBorder: get('border.subtle'),
       selectedShadow: '0 0 transparent',
       disabledText: alpha(get('scale.blue.3'), 0.5),
       disabledBg: get('scale.gray.9'),
       disabledCounterBg: alpha(get('scale.blue.5'), 0.05),
-      counterBg: alpha(get('scale.blue.5'), 0.1)
+      counterBg: alpha(get('scale.blue.9'), 0.2),
+      hoverCounterFg: get('scale.blue.3'),
+      disabledCounterFg: alpha(get('accent.fg'), 0.5),
+      counterFg: get('scale.blue.4'),
     },
 
     danger: {
@@ -136,8 +139,11 @@ export default {
       disabledText: alpha(get('scale.red.4'), 0.5),
       disabledBg: get('scale.gray.9'),
       disabledCounterBg: alpha(get('scale.red.5'), 0.05),
-      counterBg: alpha(get('scale.red.5'), 0.1),
-      icon: get('scale.red.4')
+      counterBg: alpha(get('scale.red.9'), 0.2),
+      icon: get('scale.red.4'),
+      counterFg: get('danger.fg'),
+      disabledCounterFg: alpha(get('danger.fg'), 0.5),
+      hoverCounterFg: get('scale.white')
     }
   },
   underlinenav: {

diff --git a/data/colors/vars/component_light.ts b/data/colors/vars/component_light.ts
@@ -100,7 +100,7 @@ export default {
       disabledBg: '#94d3a2',
       disabledBorder: get('border.subtle'),
       icon: alpha(get('scale.white'), 0.8),
-      counterBg: alpha(get('scale.white'), 0.2)
+      counterBg: alpha(get('scale.green.9'), 0.2)
     },
 
     outline: {
@@ -118,7 +118,10 @@ export default {
       disabledText: alpha(get('scale.blue.5'), 0.5),
       disabledBg: get('scale.gray.0'),
       disabledCounterBg: alpha(get('scale.blue.5'), 0.05),
-      counterBg: alpha(get('scale.blue.5'), 0.1)
+      counterBg: '#0969da1a',
+      counterFg: get('scale.blue.6'),
+      hoverCounterFg: get('scale.white'),
+      disabledCounterFg: alpha(get('scale.blue.5'), 0.5)
     },
 
     danger: {
@@ -138,7 +141,10 @@ export default {
       disabledCounterBg: alpha(get('scale.red.5'), 0.05),
       counterBg: alpha(get('scale.red.5'), 0.1),
       icon: get('scale.red.5'),
-      hoverIcon: get('scale.white')
+      hoverIcon: get('scale.white'),
+      counterFg: '#c21c2c',
+      hoverCounterFg: get('scale.white'),
+      disabledCounterFg: alpha(get('scale.red.5'), 0.5)
     }
   },
   underlinenav: {

diff --git a/src/tokens/functional/color/dark/patterns-dark.json5 b/src/tokens/functional/color/dark/patterns-dark.json5
@@ -405,19 +405,17 @@
       },
       borderColor: {
         rest: {
-          $value: '{borderColor.default}',
+          $value: '{base.color.gray.0}',
           $type: 'color',
-          alpha: 0.8,
+          alpha: 0.1,
         },
         hover: {
-          $value: '{borderColor.default}',
+          $value: '{button.primary.borderColor.rest}',
           $type: 'color',
-          alpha: 0.8,
         },
         disabled: {
-          $value: '{borderColor.default}',
+          $value: '{button.primary.borderColor.rest}',
           $type: 'color',
-          alpha: 0.8,
         },
       },
     },
@@ -427,6 +425,10 @@
           $value: '{fgColor.accent}',
           $type: 'color',
         },
+        hover: {
+          $value: '{base.color.blue.3}',
+          $type: 'color',
+        },
         disabled: {
           $value: '{control.fgColor.disabled}',
           $type: 'color',
@@ -464,11 +466,11 @@
     outline: {
       fgColor: {
         rest: {
-          $value: '{fgColor.accent}',
+          $value: '{base.color.blue.4}',
           $type: 'color',
         },
         hover: {
-          $value: '{fgColor.accent}',
+          $value: '{base.color.blue.3}',
           $type: 'color',
         },
         active: {
@@ -590,7 +592,7 @@
     primary: {
       bgColor: {
         rest: {
-          $value: '{base.color.white}',
+          $value: '{base.color.green.9}',
           $type: 'color',
           alpha: 0.2,
         },
@@ -599,12 +601,12 @@
     outline: {
       bgColor: {
         rest: {
-          $value: '{bgColor.accent.emphasis}',
+          $value: '{base.color.blue.9}',
           $type: 'color',
-          alpha: 0.1,
+          alpha: 0.2,
         },
         hover: {
-          $value: '{base.color.white}',
+          $value: '{base.color.blue.9}',
           $type: 'color',
           alpha: 0.2,
         },
@@ -614,6 +616,21 @@
           alpha: 0.05,
         },
       },
+      fgColor: {
+        rest: {
+          $value: '{base.color.blue.4}',
+          $type: 'color',
+        },
+        hover: {
+          $value: '{base.color.blue.3}',
+          $type: 'color',
+        },
+        disabled: {
+          $value: '{fgColor.accent}',
+          $type: 'color',
+          alpha: 0.5,
+        },
+      },
     },
     danger: {
       bgColor: {
@@ -628,9 +645,24 @@
           alpha: 0.05,
         },
         rest: {
-          $value: '{bgColor.danger.emphasis}',
+          $value: '{base.color.red.9}',
           $type: 'color',
-          alpha: 0.1,
+          alpha: 0.2,
+        },
+      },
+      fgColor: {
+        rest: {
+          $value: '{fgColor.danger}',
+          $type: 'color',
+        },
+        hover: {
+          $value: '{base.color.white}',
+          $type: 'color',
+        },
+        disabled: {
+          $value: '{fgColor.danger}',
+          $type: 'color',
+          alpha: 0.5,
         },
       },
     },

diff --git a/src/tokens/functional/color/light/patterns-light.json5 b/src/tokens/functional/color/light/patterns-light.json5
@@ -404,19 +404,17 @@
       },
       borderColor: {
         rest: {
-          $value: '{borderColor.muted}',
+          $value: '{base.color.black}',
           $type: 'color',
-          alpha: 0.8,
+          alpha: 0.15,
         },
         hover: {
-          $value: '{borderColor.muted}',
+          $value: '{button.primary.borderColor.rest}',
           $type: 'color',
-          alpha: 0.8,
         },
         disabled: {
-          $value: '{borderColor.muted}',
+          $value: '{button.primary.borderColor.rest}',
           $type: 'color',
-          alpha: 0.8,
         },
       },
     },
@@ -426,6 +424,10 @@
           $value: '{fgColor.accent}',
           $type: 'color',
         },
+        hover: {
+          $value: '{fgColor.accent}',
+          $type: 'color',
+        },
         disabled: {
           $value: '{control.fgColor.disabled}',
           $type: 'color',
@@ -593,7 +595,7 @@
     primary: {
       bgColor: {
         rest: {
-          $value: '{base.color.white}',
+          $value: '{base.color.green.9}',
           $type: 'color',
           alpha: 0.2,
         },
@@ -617,6 +619,21 @@
           alpha: 0.05,
         },
       },
+      fgColor: {
+        rest: {
+          $value: '{base.color.blue.6}',
+          $type: 'color',
+        },
+        hover: {
+          $value: '{base.color.white}',
+          $type: 'color',
+        },
+        disabled: {
+          $value: '{fgColor.accent}',
+          $type: 'color',
+          alpha: 0.5,
+        },
+      },
     },
     danger: {
       bgColor: {
@@ -636,6 +653,25 @@
           alpha: 0.1,
         },
       },
+      fgColor: {
+        rest: {
+          $value: '{base.color.red.5}',
+          $type: 'color',
+          mix: {
+            color: '{base.color.red.6}',
+            weight: 0.3,
+          },
+        },
+        hover: {
+          $value: '{base.color.white}',
+          $type: 'color',
+        },
+        disabled: {
+          $value: '{fgColor.danger}',
+          $type: 'color',
+          alpha: 0.5,
+        },
+      },
     },
   },
   focus: {

diff --git a/storybook/stories/Demos/Control.stories.tsx b/storybook/stories/Demos/Control.stories.tsx
@@ -62,6 +62,10 @@ export const ButtonScheme = () => {
         Default
         <Button.Counter>{count}</Button.Counter>
       </Button>
+      <Button disabled id="default">
+        Default
+        <Button.Counter>{count}</Button.Counter>
+      </Button>
       <Button id="default" leadingIcon={HeartIcon} trailingIcon={EyeIcon}>
         Default
       </Button>
@@ -78,6 +82,10 @@ export const ButtonScheme = () => {
         Invisible
         <Button.Counter>{count}</Button.Counter>
       </Button>
+      <Button disabled id="invisible" variant="invisible">
+        Invisible
+        <Button.Counter>{count}</Button.Counter>
+      </Button>
       <Button id="invisible" variant="invisible" leadingIcon={HeartIcon} trailingIcon={EyeIcon}>
         Invisible
       </Button>
@@ -94,6 +102,10 @@ export const ButtonScheme = () => {
         Primary
         <Button.Counter>{count}</Button.Counter>
       </Button>
+      <Button disabled variant="primary" id="primary">
+        Primary
+        <Button.Counter>{count}</Button.Counter>
+      </Button>
       <Button variant="primary" id="primary" leadingIcon={HeartIcon} trailingIcon={EyeIcon}>
         Primary
       </Button>
@@ -110,6 +122,10 @@ export const ButtonScheme = () => {
         Danger
         <Button.Counter>{count}</Button.Counter>
       </Button>
+      <Button disabled variant="danger" id="danger">
+        Danger
+        <Button.Counter>{count}</Button.Counter>
+      </Button>
       <Button variant="danger" id="danger" leadingIcon={HeartIcon} trailingIcon={EyeIcon}>
         Danger
       </Button>
@@ -126,6 +142,10 @@ export const ButtonScheme = () => {
         Outline
         <Button.Counter>{count}</Button.Counter>
       </Button>
+      <Button disabled variant="outline" id="outline">
+        Outline
+        <Button.Counter>{count}</Button.Counter>
+      </Button>
       <Button variant="outline" id="outline" leadingIcon={HeartIcon} trailingIcon={EyeIcon}>
         Outline
       </Button>

diff --git a/storybook/stories/Demos/PatternOverrides.css b/storybook/stories/Demos/PatternOverrides.css
@@ -24,6 +24,7 @@
 
 .Button button[id='invisible']:hover:not(:disabled) {
   background-color: var(--button-invisible-bgColor-hover);
+  color: var(--button-invisible-fgColor-hover);
 }
 
 .Button button[id='invisible']:disabled {
@@ -40,6 +41,27 @@
   color: var(--button-invisible-fgColor-rest);
 }
 
+.Button button[id='default']:not(:hover) [data-component='ButtonCounter'] {
+  color: var(--buttonCounter-default-fgColor-rest) !important;
+  background-color: var(--buttonCounter-default-bgColor-rest) !important;
+}
+
+.Button button[id='danger']:not(:hover):not(:disabled) [data-component='ButtonCounter'] {
+  color: var(--buttonCounter-danger-fgColor-rest) !important;
+}
+
+.Button button[id='danger']:hover:not(:disabled) [data-component='ButtonCounter'] {
+  color: var(--buttonCounter-danger-fgColor-hover) !important;
+}
+
+.Button button[id='outline']:not(:hover):not(:disabled) [data-component='ButtonCounter'] {
+  color: var(--buttonCounter-outline-fgColor-rest) !important;
+}
+
+.Button button[id='outline']:hover:not(:disabled) [data-component='ButtonCounter'] {
+  color: var(--buttonCounter-outline-fgColor-hover) !important;
+}
+
 .Overlay-backdrop--center {
   background-color: var(--overlay-backdrop-bgColor) !important;
 }