Use button CSS vars for border-color to support a feature flag

.changeset/flat-oranges-tease.md

@@ -0,0 +1,5 @@
+---
+"@primer/react": patch
+---
+
+Use `button` CSS vars for border-color to support a feature flag

.storybook/primitives-v8.css

@@ -10,12 +10,14 @@
 @import '@primer/primitives/tokens-next-private/css/functional/typography/typography.css';
 
 /* color */
-@import '@primer/primitives/tokens-next-private/css/functional/themes/light.css';
-@import '@primer/primitives/tokens-next-private/css/functional/themes/light-tritanopia.css';
-@import '@primer/primitives/tokens-next-private/css/functional/themes/light-high-contrast.css';
-@import '@primer/primitives/tokens-next-private/css/functional/themes/light-colorblind.css';
-@import '@primer/primitives/tokens-next-private/css/functional/themes/dark.css';
-@import '@primer/primitives/tokens-next-private/css/functional/themes/dark-colorblind.css';
-@import '@primer/primitives/tokens-next-private/css/functional/themes/dark-dimmed.css';
-@import '@primer/primitives/tokens-next-private/css/functional/themes/dark-high-contrast.css';
-@import '@primer/primitives/tokens-next-private/css/functional/themes/dark-tritanopia.css';
+/* temporarily disabiling these to ensure visual regression tests work on production code
+* @import '@primer/primitives/tokens-next-private/css/functional/themes/light.css';
+* @import '@primer/primitives/tokens-next-private/css/functional/themes/light-tritanopia.css';
+* @import '@primer/primitives/tokens-next-private/css/functional/themes/light-high-contrast.css';
+* @import '@primer/primitives/tokens-next-private/css/functional/themes/light-colorblind.css';
+* @import '@primer/primitives/tokens-next-private/css/functional/themes/dark.css';
+* @import '@primer/primitives/tokens-next-private/css/functional/themes/dark-colorblind.css';
+* @import '@primer/primitives/tokens-next-private/css/functional/themes/dark-dimmed.css';
+* @import '@primer/primitives/tokens-next-private/css/functional/themes/dark-high-contrast.css';
+* @import '@primer/primitives/tokens-next-private/css/functional/themes/dark-tritanopia.css';
+*/

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

@@ -11,7 +11,7 @@ exports[`Button renders consistently 1`] = `
 .c0 {
   border-radius: 6px;
   border: 1px solid;
-  border-color: rgba(31,35,40,0.15);
+  border-color: var(--button-default-borderColor-rest,rgba(31,35,40,0.15));
   font-family: inherit;
   font-weight: 500;
   font-size: 14px;
@@ -196,17 +196,17 @@ exports[`Button renders consistently 1`] = `
 
 .c0:hover:not([disabled]) {
   background-color: #f3f4f6;
-  border-color: rgba(31,35,40,0.15);
+  border-color: var(--button-default-borderColor-hover,rgba(31,35,40,0.15));
 }
 
 .c0:active:not([disabled]) {
   background-color: hsla(220,14%,93%,1);
-  border-color: rgba(31,35,40,0.15);
+  border-color: var(--button-default-borderColor-active,rgba(31,35,40,0.15));
 }
 
 .c0[aria-expanded=true] {
   background-color: hsla(220,14%,93%,1);
-  border-color: rgba(31,35,40,0.15);
+  border-color: var(--button-default-borderColor-active,rgba(31,35,40,0.15));
 }
 
 .c0 [data-component="leadingVisual"],
@@ -246,6 +246,7 @@ exports[`Button respects block prop 1`] = `
 .c0 {
   border-radius: 2;
   border: 1px solid;
+  border-color: var(--button-default-borderColor-rest,undefined);
   font-family: inherit;
   font-weight: semibold;
   font-size: 14px;
@@ -430,17 +431,17 @@ exports[`Button respects block prop 1`] = `
 
 .c0:hover:not([disabled]) {
   background-color: btn.hoverBg;
-  border-color: btn.hoverBorder;
+  border-color: var(--button-default-borderColor-hover,undefined);
 }
 
 .c0:active:not([disabled]) {
   background-color: btn.activeBg;
-  border-color: btn.activeBorder;
+  border-color: var(--button-default-borderColor-active,undefined);
 }
 
 .c0[aria-expanded=true] {
   background-color: btn.activeBg;
-  border-color: btn.activeBorder;
+  border-color: var(--button-default-borderColor-active,undefined);
 }
 
 .c0 [data-component="leadingVisual"],
@@ -485,6 +486,7 @@ exports[`Button respects the alignContent prop 1`] = `
 .c0 {
   border-radius: 2;
   border: 1px solid;
+  border-color: var(--button-default-borderColor-rest,undefined);
   font-family: inherit;
   font-weight: semibold;
   font-size: 14px;
@@ -669,17 +671,17 @@ exports[`Button respects the alignContent prop 1`] = `
 
 .c0:hover:not([disabled]) {
   background-color: btn.hoverBg;
-  border-color: btn.hoverBorder;
+  border-color: var(--button-default-borderColor-hover,undefined);
 }
 
 .c0:active:not([disabled]) {
   background-color: btn.activeBg;
-  border-color: btn.activeBorder;
+  border-color: var(--button-default-borderColor-active,undefined);
 }
 
 .c0[aria-expanded=true] {
   background-color: btn.activeBg;
-  border-color: btn.activeBorder;
+  border-color: var(--button-default-borderColor-active,undefined);
 }
 
 .c0 [data-component="leadingVisual"],
@@ -723,6 +725,7 @@ exports[`Button respects the large size prop 1`] = `
 .c0 {
   border-radius: 2;
   border: 1px solid;
+  border-color: var(--button-default-borderColor-rest,undefined);
   font-family: inherit;
   font-weight: semibold;
   font-size: 14px;
@@ -907,17 +910,17 @@ exports[`Button respects the large size prop 1`] = `
 
 .c0:hover:not([disabled]) {
   background-color: btn.hoverBg;
-  border-color: btn.hoverBorder;
+  border-color: var(--button-default-borderColor-hover,undefined);
 }
 
 .c0:active:not([disabled]) {
   background-color: btn.activeBg;
-  border-color: btn.activeBorder;
+  border-color: var(--button-default-borderColor-active,undefined);
 }
 
 .c0[aria-expanded=true] {
   background-color: btn.activeBg;
-  border-color: btn.activeBorder;
+  border-color: var(--button-default-borderColor-active,undefined);
 }
 
 .c0 [data-component="leadingVisual"],
@@ -962,6 +965,7 @@ exports[`Button respects the small size prop 1`] = `
 .c0 {
   border-radius: 2;
   border: 1px solid;
+  border-color: var(--button-default-borderColor-rest,undefined);
   font-family: inherit;
   font-weight: semibold;
   font-size: 14px;
@@ -1146,17 +1150,17 @@ exports[`Button respects the small size prop 1`] = `
 
 .c0:hover:not([disabled]) {
   background-color: btn.hoverBg;
-  border-color: btn.hoverBorder;
+  border-color: var(--button-default-borderColor-hover,undefined);
 }
 
 .c0:active:not([disabled]) {
   background-color: btn.activeBg;
-  border-color: btn.activeBorder;
+  border-color: var(--button-default-borderColor-active,undefined);
 }
 
 .c0[aria-expanded=true] {
   background-color: btn.activeBg;
-  border-color: btn.activeBorder;
+  border-color: var(--button-default-borderColor-active,undefined);
 }
 
 .c0 [data-component="leadingVisual"],
@@ -1201,6 +1205,7 @@ exports[`Button styles danger button appropriately 1`] = `
 .c0 {
   border-radius: 2;
   border: 1px solid;
+  border-color: var(--button-default-borderColor-rest,undefined);
   font-family: inherit;
   font-weight: semibold;
   font-size: 14px;

src/Button/styles.ts

@@ -9,11 +9,11 @@ export const getVariantStyles = (variant: VariantType = 'default', theme?: Theme
       boxShadow: `${theme?.shadows.btn.shadow}, ${theme?.shadows.btn.insetShadow}`,
       '&:hover:not([disabled])': {
         backgroundColor: 'btn.hoverBg',
-        borderColor: 'btn.hoverBorder',
+        borderColor: `var(--button-default-borderColor-hover, ${theme?.colors.btn.hoverBorder})`,
       },
       '&:active:not([disabled])': {
         backgroundColor: 'btn.activeBg',
-        borderColor: 'btn.activeBorder',
+        borderColor: `var(--button-default-borderColor-active, ${theme?.colors.btn.activeBorder})`,
       },
       '&:disabled': {
         color: 'primer.fg.disabled',
@@ -23,7 +23,7 @@ export const getVariantStyles = (variant: VariantType = 'default', theme?: Theme
       },
       '&[aria-expanded=true]': {
         backgroundColor: 'btn.activeBg',
-        borderColor: 'btn.activeBorder',
+        borderColor: `var(--button-default-borderColor-active, ${theme?.colors.btn.activeBorder})`,
       },
       '[data-component="leadingVisual"], [data-component="trailingVisual"], [data-component="trailingAction"]': {
         color: `var(--button-color, ${theme?.colors.fg.muted})`,
@@ -149,13 +149,13 @@ export const getVariantStyles = (variant: VariantType = 'default', theme?: Theme
     outline: {
       color: 'btn.outline.text',
       boxShadow: `${theme?.shadows.btn.shadow}`,
-      borderColor: 'btn.border',
+      borderColor: `var(--button-default-borderColor-rest, ${theme?.colors.btn.border})`,
       backgroundColor: 'btn.bg',
 
       '&:hover:not([disabled])': {
         color: 'btn.outline.hoverText',
         backgroundColor: 'btn.outline.hoverBg',
-        borderColor: 'btn.outline.hoverBorder',
+        borderColor: `${theme?.colors.btn.outline.hoverBorder}`,
         boxShadow: `${theme?.shadows.btn.outline.hoverShadow}`,
         '[data-component=ButtonCounter]': {
           backgroundColor: 'btn.outline.hoverCounterBg',
@@ -166,7 +166,7 @@ export const getVariantStyles = (variant: VariantType = 'default', theme?: Theme
         color: 'btn.outline.selectedText',
         backgroundColor: 'btn.outline.selectedBg',
         boxShadow: `${theme?.shadows.btn.outline.selectedShadow}`,
-        borderColor: 'btn.outline.selectedBorder',
+        borderColor: `${theme?.colors.btn.outline.selectedBorder}`,
       },
 
       '&:disabled': {
@@ -186,7 +186,7 @@ export const getVariantStyles = (variant: VariantType = 'default', theme?: Theme
         color: 'btn.outline.selectedText',
         backgroundColor: 'btn.outline.selectedBg',
         boxShadow: `${theme?.shadows.btn.outline.selectedShadow}`,
-        borderColor: 'btn.outline.selectedBorder',
+        borderColor: `var(--button-default-borderColor-active, ${theme?.colors.btn.outline.selectedBorder})`,
       },
     },
   }
@@ -196,7 +196,7 @@ export const getVariantStyles = (variant: VariantType = 'default', theme?: Theme
 export const getBaseStyles = (theme?: Theme) => ({
   borderRadius: '2',
   border: '1px solid',
-  borderColor: theme?.colors.btn.border,
+  borderColor: `var(--button-default-borderColor-rest, ${theme?.colors.btn.border})`,
   fontFamily: 'inherit',
   fontWeight: 'semibold',
   fontSize: '1',

src/__tests__/__snapshots__/ActionMenu.test.tsx.snap

@@ -25,7 +25,7 @@ exports[`ActionMenu renders consistently 1`] = `
 .c1 {
   border-radius: 6px;
   border: 1px solid;
-  border-color: rgba(31,35,40,0.15);
+  border-color: var(--button-default-borderColor-rest,rgba(31,35,40,0.15));
   font-family: inherit;
   font-weight: 500;
   font-size: 14px;
@@ -210,17 +210,17 @@ exports[`ActionMenu renders consistently 1`] = `
 
 .c1:hover:not([disabled]) {
   background-color: #f3f4f6;
-  border-color: rgba(31,35,40,0.15);
+  border-color: var(--button-default-borderColor-hover,rgba(31,35,40,0.15));
 }
 
 .c1:active:not([disabled]) {
   background-color: hsla(220,14%,93%,1);
-  border-color: rgba(31,35,40,0.15);
+  border-color: var(--button-default-borderColor-active,rgba(31,35,40,0.15));
 }
 
 .c1[aria-expanded=true] {
   background-color: hsla(220,14%,93%,1);
-  border-color: rgba(31,35,40,0.15);
+  border-color: var(--button-default-borderColor-active,rgba(31,35,40,0.15));
 }
 
 .c1 [data-component="leadingVisual"],