Address a few v8 color bugs

.changeset/khaki-schools-lay.md

@@ -0,0 +1,5 @@
+---
+"@primer/react": patch
+---
+
+Address a few v8 color bugs

packages/react/src/Button/__tests__/__snapshots__/Button.test.tsx.snap

@@ -99,6 +99,7 @@ exports[`Button respects block prop 1`] = `
   cursor: not-allowed;
   box-shadow: none;
   color: primer.fg.disabled;
+  border-color: var(--button-default-borderColor-disabled,undefined);
 }
 
 .c0:disabled [data-component=ButtonCounter] {
@@ -107,6 +108,7 @@ exports[`Button respects block prop 1`] = `
 
 .c0 [data-component=ButtonCounter] {
   font-size: 12px;
+  background-color: btn.counterBg;
 }
 
 .c0[data-component=IconButton] {
@@ -353,6 +355,7 @@ exports[`Button respects the alignContent prop 1`] = `
   cursor: not-allowed;
   box-shadow: none;
   color: primer.fg.disabled;
+  border-color: var(--button-default-borderColor-disabled,undefined);
 }
 
 .c0:disabled [data-component=ButtonCounter] {
@@ -361,6 +364,7 @@ exports[`Button respects the alignContent prop 1`] = `
 
 .c0 [data-component=ButtonCounter] {
   font-size: 12px;
+  background-color: btn.counterBg;
 }
 
 .c0[data-component=IconButton] {
@@ -606,6 +610,7 @@ exports[`Button respects the large size prop 1`] = `
   cursor: not-allowed;
   box-shadow: none;
   color: primer.fg.disabled;
+  border-color: var(--button-default-borderColor-disabled,undefined);
 }
 
 .c0:disabled [data-component=ButtonCounter] {
@@ -614,6 +619,7 @@ exports[`Button respects the large size prop 1`] = `
 
 .c0 [data-component=ButtonCounter] {
   font-size: 12px;
+  background-color: btn.counterBg;
 }
 
 .c0[data-component=IconButton] {
@@ -860,6 +866,7 @@ exports[`Button respects the small size prop 1`] = `
   cursor: not-allowed;
   box-shadow: none;
   color: primer.fg.disabled;
+  border-color: var(--button-default-borderColor-disabled,undefined);
 }
 
 .c0:disabled [data-component=ButtonCounter] {
@@ -868,6 +875,7 @@ exports[`Button respects the small size prop 1`] = `
 
 .c0 [data-component=ButtonCounter] {
   font-size: 12px;
+  background-color: btn.counterBg;
 }
 
 .c0[data-component=IconButton] {
@@ -1115,7 +1123,7 @@ exports[`Button styles danger button appropriately 1`] = `
   box-shadow: none;
   color: btn.danger.disabledText;
   background-color: btn.danger.disabledBg;
-  border-color: btn.danger.disabledBorder;
+  border-color: var(--button-default-borderColor-disabled,undefined);
 }
 
 .c0:disabled [data-component=ButtonCounter] {
@@ -1646,6 +1654,7 @@ exports[`Button styles primary button appropriately 1`] = `
   box-shadow: none;
   color: btn.primary.disabledText;
   background-color: btn.primary.disabledBg;
+  border-color: btn.primary.disabledBorder;
 }
 
 .c0:disabled [data-component=ButtonCounter] {

packages/react/src/Button/styles.ts

@@ -17,6 +17,7 @@ export const getVariantStyles = (variant: VariantType = 'default', theme?: Theme
       },
       '&:disabled': {
         color: 'primer.fg.disabled',
+        borderColor: `var(--button-default-borderColor-disabled, ${theme?.colors.btn.border})`,
         '[data-component=ButtonCounter]': {
           color: 'inherit',
         },
@@ -28,6 +29,9 @@ export const getVariantStyles = (variant: VariantType = 'default', theme?: Theme
       '[data-component="leadingVisual"], [data-component="trailingVisual"], [data-component="trailingAction"]': {
         color: `var(--button-color, ${theme?.colors.fg.muted})`,
       },
+      '[data-component=ButtonCounter]': {
+        backgroundColor: 'btn.counterBg',
+      },
     },
     primary: {
       color: 'btn.primary.text',
@@ -51,6 +55,7 @@ export const getVariantStyles = (variant: VariantType = 'default', theme?: Theme
       '&:disabled': {
         color: 'btn.primary.disabledText',
         backgroundColor: 'btn.primary.disabledBg',
+        borderColor: 'btn.primary.disabledBorder',
         '[data-component=ButtonCounter]': {
           color: 'inherit',
         },
@@ -87,7 +92,7 @@ export const getVariantStyles = (variant: VariantType = 'default', theme?: Theme
       '&:disabled': {
         color: 'btn.danger.disabledText',
         backgroundColor: 'btn.danger.disabledBg',
-        borderColor: 'btn.danger.disabledBorder',
+        borderColor: `var(--button-default-borderColor-disabled, ${theme?.colors.btn.border})`,
         '[data-component=ButtonCounter]': {
           color: 'btn.danger.disabledCounterFg',
           backgroundColor: 'btn.danger.disabledCounterBg',

packages/react/src/CounterLabel/CounterLabel.tsx

@@ -27,6 +27,8 @@ const CounterLabel = forwardRef<HTMLSpanElement, CounterLabelProps>(
               lineHeight: 'condensedUltra',
               borderRadius: '20px',
               backgroundColor: scheme === 'primary' ? 'neutral.emphasis' : 'neutral.muted',
+              border:
+                'var(--borderWidth-thin,max(1px, 0.0625rem)) solid var(--counter-borderColor,var(--color-counter-border))',
               color: scheme === 'primary' ? 'fg.onEmphasis' : 'fg.default',
               '&:empty': {
                 display: 'none',

packages/react/src/CounterLabel/__snapshots__/CounterLabel.test.tsx.snap

@@ -9,6 +9,7 @@ exports[`CounterLabel renders with secondary scheme when no "scheme" prop is pro
   line-height: condensedUltra;
   border-radius: 20px;
   background-color: neutral.muted;
+  border: var(--borderWidth-thin,max(1px,0.0625rem)) solid var(--counter-borderColor,var(--color-counter-border));
   color: fg.default;
 }
 
@@ -55,6 +56,7 @@ exports[`CounterLabel respects the primary "scheme" prop 1`] = `
   line-height: condensedUltra;
   border-radius: 20px;
   background-color: neutral.emphasis;
+  border: var(--borderWidth-thin,max(1px,0.0625rem)) solid var(--counter-borderColor,var(--color-counter-border));
   color: fg.onEmphasis;
 }
 

packages/react/src/Token/__tests__/__snapshots__/Token.test.tsx.snap

@@ -110,7 +110,7 @@ exports[`Token components AvatarToken renders all sizes 1`] = `
 
 .c6:hover,
 .c6:focus {
-  background-color: var(--borderColor-neutral-muted,var(--color-neutral-muted,rgba(175,184,193,0.2)));
+  background-color: var(--bgColor-neutral-muted,var(--color-neutral-muted,rgba(175,184,193,0.2)));
 }
 
 .c6:active {
@@ -336,7 +336,7 @@ exports[`Token components AvatarToken renders all sizes 2`] = `
 
 .c6:hover,
 .c6:focus {
-  background-color: var(--borderColor-neutral-muted,var(--color-neutral-muted,rgba(175,184,193,0.2)));
+  background-color: var(--bgColor-neutral-muted,var(--color-neutral-muted,rgba(175,184,193,0.2)));
 }
 
 .c6:active {
@@ -562,7 +562,7 @@ exports[`Token components AvatarToken renders all sizes 3`] = `
 
 .c6:hover,
 .c6:focus {
-  background-color: var(--borderColor-neutral-muted,var(--color-neutral-muted,rgba(175,184,193,0.2)));
+  background-color: var(--bgColor-neutral-muted,var(--color-neutral-muted,rgba(175,184,193,0.2)));
 }
 
 .c6:active {
@@ -790,7 +790,7 @@ exports[`Token components AvatarToken renders all sizes 4`] = `
 
 .c6:hover,
 .c6:focus {
-  background-color: var(--borderColor-neutral-muted,var(--color-neutral-muted,rgba(175,184,193,0.2)));
+  background-color: var(--bgColor-neutral-muted,var(--color-neutral-muted,rgba(175,184,193,0.2)));
 }
 
 .c6:active {
@@ -1144,7 +1144,7 @@ exports[`Token components AvatarToken renders with a remove button 1`] = `
 
 .c6:hover,
 .c6:focus {
-  background-color: var(--borderColor-neutral-muted,var(--color-neutral-muted,rgba(175,184,193,0.2)));
+  background-color: var(--bgColor-neutral-muted,var(--color-neutral-muted,rgba(175,184,193,0.2)));
 }
 
 .c6:active {
@@ -1345,7 +1345,7 @@ exports[`Token components IssueLabelToken renders all sizes 1`] = `
 
 .c2:hover,
 .c2:focus {
-  background-color: var(--borderColor-neutral-muted,var(--color-neutral-muted,rgba(175,184,193,0.2)));
+  background-color: var(--bgColor-neutral-muted,var(--color-neutral-muted,rgba(175,184,193,0.2)));
 }
 
 .c2:active {
@@ -1518,7 +1518,7 @@ exports[`Token components IssueLabelToken renders all sizes 2`] = `
 
 .c2:hover,
 .c2:focus {
-  background-color: var(--borderColor-neutral-muted,var(--color-neutral-muted,rgba(175,184,193,0.2)));
+  background-color: var(--bgColor-neutral-muted,var(--color-neutral-muted,rgba(175,184,193,0.2)));
 }
 
 .c2:active {
@@ -1691,7 +1691,7 @@ exports[`Token components IssueLabelToken renders all sizes 3`] = `
 
 .c2:hover,
 .c2:focus {
-  background-color: var(--borderColor-neutral-muted,var(--color-neutral-muted,rgba(175,184,193,0.2)));
+  background-color: var(--bgColor-neutral-muted,var(--color-neutral-muted,rgba(175,184,193,0.2)));
 }
 
 .c2:active {
@@ -1866,7 +1866,7 @@ exports[`Token components IssueLabelToken renders all sizes 4`] = `
 
 .c2:hover,
 .c2:focus {
-  background-color: var(--borderColor-neutral-muted,var(--color-neutral-muted,rgba(175,184,193,0.2)));
+  background-color: var(--bgColor-neutral-muted,var(--color-neutral-muted,rgba(175,184,193,0.2)));
 }
 
 .c2:active {
@@ -2039,7 +2039,7 @@ exports[`Token components IssueLabelToken renders custom fill color 1`] = `
 
 .c2:hover,
 .c2:focus {
-  background-color: var(--borderColor-neutral-muted,var(--color-neutral-muted,rgba(175,184,193,0.2)));
+  background-color: var(--bgColor-neutral-muted,var(--color-neutral-muted,rgba(175,184,193,0.2)));
 }
 
 .c2:active {
@@ -2212,7 +2212,7 @@ exports[`Token components IssueLabelToken renders default fill color 1`] = `
 
 .c2:hover,
 .c2:focus {
-  background-color: var(--borderColor-neutral-muted,var(--color-neutral-muted,rgba(175,184,193,0.2)));
+  background-color: var(--bgColor-neutral-muted,var(--color-neutral-muted,rgba(175,184,193,0.2)));
 }
 
 .c2:active {
@@ -2496,7 +2496,7 @@ exports[`Token components IssueLabelToken renders with a remove button 1`] = `
 
 .c2:hover,
 .c2:focus {
-  background-color: var(--borderColor-neutral-muted,var(--color-neutral-muted,rgba(175,184,193,0.2)));
+  background-color: var(--bgColor-neutral-muted,var(--color-neutral-muted,rgba(175,184,193,0.2)));
 }
 
 .c2:active {
@@ -2671,7 +2671,7 @@ exports[`Token components Token renders all sizes 1`] = `
 
 .c3:hover,
 .c3:focus {
-  background-color: var(--borderColor-neutral-muted,var(--color-neutral-muted,rgba(175,184,193,0.2)));
+  background-color: var(--bgColor-neutral-muted,var(--color-neutral-muted,rgba(175,184,193,0.2)));
 }
 
 .c3:active {
@@ -2851,7 +2851,7 @@ exports[`Token components Token renders all sizes 2`] = `
 
 .c3:hover,
 .c3:focus {
-  background-color: var(--borderColor-neutral-muted,var(--color-neutral-muted,rgba(175,184,193,0.2)));
+  background-color: var(--bgColor-neutral-muted,var(--color-neutral-muted,rgba(175,184,193,0.2)));
 }
 
 .c3:active {
@@ -3031,7 +3031,7 @@ exports[`Token components Token renders all sizes 3`] = `
 
 .c3:hover,
 .c3:focus {
-  background-color: var(--borderColor-neutral-muted,var(--color-neutral-muted,rgba(175,184,193,0.2)));
+  background-color: var(--bgColor-neutral-muted,var(--color-neutral-muted,rgba(175,184,193,0.2)));
 }
 
 .c3:active {
@@ -3213,7 +3213,7 @@ exports[`Token components Token renders all sizes 4`] = `
 
 .c3:hover,
 .c3:focus {
-  background-color: var(--borderColor-neutral-muted,var(--color-neutral-muted,rgba(175,184,193,0.2)));
+  background-color: var(--bgColor-neutral-muted,var(--color-neutral-muted,rgba(175,184,193,0.2)));
 }
 
 .c3:active {
@@ -3576,7 +3576,7 @@ exports[`Token components Token renders with a remove button 1`] = `
 
 .c3:hover,
 .c3:focus {
-  background-color: var(--borderColor-neutral-muted,var(--color-neutral-muted,rgba(175,184,193,0.2)));
+  background-color: var(--bgColor-neutral-muted,var(--color-neutral-muted,rgba(175,184,193,0.2)));
 }
 
 .c3:active {