diff --git a/.changeset/flat-oranges-tease.md b/.changeset/flat-oranges-tease.md new file mode 100644 index 00000000000..6d9740061ba --- /dev/null +++ b/.changeset/flat-oranges-tease.md @@ -0,0 +1,5 @@ +--- +"@primer/react": patch +--- + +Use `button` CSS vars for border-color to support a feature flag diff --git a/.playwright/snapshots/components/FilteredSearch.test.ts-snapshots/FilteredSearch-Default-dark-high-contrast-linux.png b/.playwright/snapshots/components/FilteredSearch.test.ts-snapshots/FilteredSearch-Default-dark-high-contrast-linux.png index 44fb643ff46..21c0be87b1e 100644 Binary files a/.playwright/snapshots/components/FilteredSearch.test.ts-snapshots/FilteredSearch-Default-dark-high-contrast-linux.png and b/.playwright/snapshots/components/FilteredSearch.test.ts-snapshots/FilteredSearch-Default-dark-high-contrast-linux.png differ diff --git a/.playwright/snapshots/components/FilteredSearch.test.ts-snapshots/FilteredSearch-Playground-dark-high-contrast-linux.png b/.playwright/snapshots/components/FilteredSearch.test.ts-snapshots/FilteredSearch-Playground-dark-high-contrast-linux.png index 44fb643ff46..21c0be87b1e 100644 Binary files a/.playwright/snapshots/components/FilteredSearch.test.ts-snapshots/FilteredSearch-Playground-dark-high-contrast-linux.png and b/.playwright/snapshots/components/FilteredSearch.test.ts-snapshots/FilteredSearch-Playground-dark-high-contrast-linux.png differ diff --git a/.playwright/snapshots/components/InlineAutocomplete.test.ts-snapshots/InlineAutocomplete-Custom-Rendering-dark-high-contrast-linux.png b/.playwright/snapshots/components/InlineAutocomplete.test.ts-snapshots/InlineAutocomplete-Custom-Rendering-dark-high-contrast-linux.png index 64865c946c0..4bb20fc23e6 100644 Binary files a/.playwright/snapshots/components/InlineAutocomplete.test.ts-snapshots/InlineAutocomplete-Custom-Rendering-dark-high-contrast-linux.png and b/.playwright/snapshots/components/InlineAutocomplete.test.ts-snapshots/InlineAutocomplete-Custom-Rendering-dark-high-contrast-linux.png differ diff --git a/.playwright/snapshots/components/InlineAutocomplete.test.ts-snapshots/InlineAutocomplete-Default-dark-high-contrast-linux.png b/.playwright/snapshots/components/InlineAutocomplete.test.ts-snapshots/InlineAutocomplete-Default-dark-high-contrast-linux.png index 4d1a36a1c80..6c3cd06a117 100644 Binary files a/.playwright/snapshots/components/InlineAutocomplete.test.ts-snapshots/InlineAutocomplete-Default-dark-high-contrast-linux.png and b/.playwright/snapshots/components/InlineAutocomplete.test.ts-snapshots/InlineAutocomplete-Default-dark-high-contrast-linux.png differ diff --git a/.playwright/snapshots/components/InlineAutocomplete.test.ts-snapshots/InlineAutocomplete-Playground-dark-high-contrast-linux.png b/.playwright/snapshots/components/InlineAutocomplete.test.ts-snapshots/InlineAutocomplete-Playground-dark-high-contrast-linux.png index e0eb9c3a30e..f92076a9d09 100644 Binary files a/.playwright/snapshots/components/InlineAutocomplete.test.ts-snapshots/InlineAutocomplete-Playground-dark-high-contrast-linux.png and b/.playwright/snapshots/components/InlineAutocomplete.test.ts-snapshots/InlineAutocomplete-Playground-dark-high-contrast-linux.png differ diff --git a/.playwright/snapshots/components/InlineAutocomplete.test.ts-snapshots/InlineAutocomplete-Single-Line-dark-high-contrast-linux.png b/.playwright/snapshots/components/InlineAutocomplete.test.ts-snapshots/InlineAutocomplete-Single-Line-dark-high-contrast-linux.png index 9b13ada7339..7a9afe1f35e 100644 Binary files a/.playwright/snapshots/components/InlineAutocomplete.test.ts-snapshots/InlineAutocomplete-Single-Line-dark-high-contrast-linux.png and b/.playwright/snapshots/components/InlineAutocomplete.test.ts-snapshots/InlineAutocomplete-Single-Line-dark-high-contrast-linux.png differ diff --git a/.playwright/snapshots/components/Select.test.ts-snapshots/Select-Block-dark-high-contrast-linux.png b/.playwright/snapshots/components/Select.test.ts-snapshots/Select-Block-dark-high-contrast-linux.png index 9a5fd565acd..9827554a3b5 100644 Binary files a/.playwright/snapshots/components/Select.test.ts-snapshots/Select-Block-dark-high-contrast-linux.png and b/.playwright/snapshots/components/Select.test.ts-snapshots/Select-Block-dark-high-contrast-linux.png differ diff --git a/.playwright/snapshots/components/Select.test.ts-snapshots/Select-Default-dark-high-contrast-linux.png b/.playwright/snapshots/components/Select.test.ts-snapshots/Select-Default-dark-high-contrast-linux.png index 0c753119a0a..26e4c94331c 100644 Binary files a/.playwright/snapshots/components/Select.test.ts-snapshots/Select-Default-dark-high-contrast-linux.png and b/.playwright/snapshots/components/Select.test.ts-snapshots/Select-Default-dark-high-contrast-linux.png differ diff --git a/.playwright/snapshots/components/Select.test.ts-snapshots/Select-Large-dark-high-contrast-linux.png b/.playwright/snapshots/components/Select.test.ts-snapshots/Select-Large-dark-high-contrast-linux.png index 9eb29e7efa3..4c47b5b90e7 100644 Binary files a/.playwright/snapshots/components/Select.test.ts-snapshots/Select-Large-dark-high-contrast-linux.png and b/.playwright/snapshots/components/Select.test.ts-snapshots/Select-Large-dark-high-contrast-linux.png differ diff --git a/.playwright/snapshots/components/Select.test.ts-snapshots/Select-Small-dark-high-contrast-linux.png b/.playwright/snapshots/components/Select.test.ts-snapshots/Select-Small-dark-high-contrast-linux.png index 6f8bcadfb98..4589e3cf00f 100644 Binary files a/.playwright/snapshots/components/Select.test.ts-snapshots/Select-Small-dark-high-contrast-linux.png and b/.playwright/snapshots/components/Select.test.ts-snapshots/Select-Small-dark-high-contrast-linux.png differ diff --git a/.playwright/snapshots/components/Select.test.ts-snapshots/Select-Visually-Hidden-Label-dark-high-contrast-linux.png b/.playwright/snapshots/components/Select.test.ts-snapshots/Select-Visually-Hidden-Label-dark-high-contrast-linux.png index faf832a256c..e01f2185be3 100644 Binary files a/.playwright/snapshots/components/Select.test.ts-snapshots/Select-Visually-Hidden-Label-dark-high-contrast-linux.png and b/.playwright/snapshots/components/Select.test.ts-snapshots/Select-Visually-Hidden-Label-dark-high-contrast-linux.png differ diff --git a/.playwright/snapshots/components/Select.test.ts-snapshots/Select-With-Caption-dark-high-contrast-linux.png b/.playwright/snapshots/components/Select.test.ts-snapshots/Select-With-Caption-dark-high-contrast-linux.png index 7ddb5606ae7..acdc179fe86 100644 Binary files a/.playwright/snapshots/components/Select.test.ts-snapshots/Select-With-Caption-dark-high-contrast-linux.png and b/.playwright/snapshots/components/Select.test.ts-snapshots/Select-With-Caption-dark-high-contrast-linux.png differ diff --git a/.playwright/snapshots/components/Select.test.ts-snapshots/Select-With-Option-Groups-dark-high-contrast-linux.png b/.playwright/snapshots/components/Select.test.ts-snapshots/Select-With-Option-Groups-dark-high-contrast-linux.png index de98c532d5b..f4632469e80 100644 Binary files a/.playwright/snapshots/components/Select.test.ts-snapshots/Select-With-Option-Groups-dark-high-contrast-linux.png and b/.playwright/snapshots/components/Select.test.ts-snapshots/Select-With-Option-Groups-dark-high-contrast-linux.png differ diff --git a/.playwright/snapshots/components/TextInput.test.ts-snapshots/TextInput-Block-dark-high-contrast-linux.png b/.playwright/snapshots/components/TextInput.test.ts-snapshots/TextInput-Block-dark-high-contrast-linux.png index 364b6aea55d..628246b4788 100644 Binary files a/.playwright/snapshots/components/TextInput.test.ts-snapshots/TextInput-Block-dark-high-contrast-linux.png and b/.playwright/snapshots/components/TextInput.test.ts-snapshots/TextInput-Block-dark-high-contrast-linux.png differ diff --git a/.playwright/snapshots/components/TextInput.test.ts-snapshots/TextInput-Default-dark-high-contrast-linux.png b/.playwright/snapshots/components/TextInput.test.ts-snapshots/TextInput-Default-dark-high-contrast-linux.png index e8567e6453c..d5ac3a118e2 100644 Binary files a/.playwright/snapshots/components/TextInput.test.ts-snapshots/TextInput-Default-dark-high-contrast-linux.png and b/.playwright/snapshots/components/TextInput.test.ts-snapshots/TextInput-Default-dark-high-contrast-linux.png differ diff --git a/.playwright/snapshots/components/TextInput.test.ts-snapshots/TextInput-Large-dark-high-contrast-linux.png b/.playwright/snapshots/components/TextInput.test.ts-snapshots/TextInput-Large-dark-high-contrast-linux.png index 34b9c793445..65fedee905e 100644 Binary files a/.playwright/snapshots/components/TextInput.test.ts-snapshots/TextInput-Large-dark-high-contrast-linux.png and b/.playwright/snapshots/components/TextInput.test.ts-snapshots/TextInput-Large-dark-high-contrast-linux.png differ diff --git a/.playwright/snapshots/components/TextInput.test.ts-snapshots/TextInput-Small-dark-high-contrast-linux.png b/.playwright/snapshots/components/TextInput.test.ts-snapshots/TextInput-Small-dark-high-contrast-linux.png index 14b9891f0f8..b27c3988345 100644 Binary files a/.playwright/snapshots/components/TextInput.test.ts-snapshots/TextInput-Small-dark-high-contrast-linux.png and b/.playwright/snapshots/components/TextInput.test.ts-snapshots/TextInput-Small-dark-high-contrast-linux.png differ diff --git a/.playwright/snapshots/components/TextInput.test.ts-snapshots/TextInput-Visually-Hidden-Label-dark-high-contrast-linux.png b/.playwright/snapshots/components/TextInput.test.ts-snapshots/TextInput-Visually-Hidden-Label-dark-high-contrast-linux.png index 64fb9ee75f2..2861126a0be 100644 Binary files a/.playwright/snapshots/components/TextInput.test.ts-snapshots/TextInput-Visually-Hidden-Label-dark-high-contrast-linux.png and b/.playwright/snapshots/components/TextInput.test.ts-snapshots/TextInput-Visually-Hidden-Label-dark-high-contrast-linux.png differ diff --git a/.playwright/snapshots/components/TextInput.test.ts-snapshots/TextInput-With-Caption-dark-high-contrast-linux.png b/.playwright/snapshots/components/TextInput.test.ts-snapshots/TextInput-With-Caption-dark-high-contrast-linux.png index 3d0edba0fa9..ccb3a0be89e 100644 Binary files a/.playwright/snapshots/components/TextInput.test.ts-snapshots/TextInput-With-Caption-dark-high-contrast-linux.png and b/.playwright/snapshots/components/TextInput.test.ts-snapshots/TextInput-With-Caption-dark-high-contrast-linux.png differ diff --git a/.playwright/snapshots/components/TextInput.test.ts-snapshots/TextInput-With-Leading-Visual-dark-high-contrast-linux.png b/.playwright/snapshots/components/TextInput.test.ts-snapshots/TextInput-With-Leading-Visual-dark-high-contrast-linux.png index a0edb67c2cc..362f8a22b99 100644 Binary files a/.playwright/snapshots/components/TextInput.test.ts-snapshots/TextInput-With-Leading-Visual-dark-high-contrast-linux.png and b/.playwright/snapshots/components/TextInput.test.ts-snapshots/TextInput-With-Leading-Visual-dark-high-contrast-linux.png differ diff --git a/.playwright/snapshots/components/TextInput.test.ts-snapshots/TextInput-With-Trailing-Action-dark-high-contrast-linux.png b/.playwright/snapshots/components/TextInput.test.ts-snapshots/TextInput-With-Trailing-Action-dark-high-contrast-linux.png index 545185b6ee9..c93da29c499 100644 Binary files a/.playwright/snapshots/components/TextInput.test.ts-snapshots/TextInput-With-Trailing-Action-dark-high-contrast-linux.png and b/.playwright/snapshots/components/TextInput.test.ts-snapshots/TextInput-With-Trailing-Action-dark-high-contrast-linux.png differ diff --git a/.playwright/snapshots/components/TextInput.test.ts-snapshots/TextInput-With-Trailing-Icon-dark-high-contrast-linux.png b/.playwright/snapshots/components/TextInput.test.ts-snapshots/TextInput-With-Trailing-Icon-dark-high-contrast-linux.png index 1e6dd51a39b..16f6cb29936 100644 Binary files a/.playwright/snapshots/components/TextInput.test.ts-snapshots/TextInput-With-Trailing-Icon-dark-high-contrast-linux.png and b/.playwright/snapshots/components/TextInput.test.ts-snapshots/TextInput-With-Trailing-Icon-dark-high-contrast-linux.png differ diff --git a/.playwright/snapshots/components/TextInputWithTokens.test.ts-snapshots/TextInputWithTokens-Default-dark-high-contrast-linux.png b/.playwright/snapshots/components/TextInputWithTokens.test.ts-snapshots/TextInputWithTokens-Default-dark-high-contrast-linux.png index cd6c9297d17..a8cdca2d77e 100644 Binary files a/.playwright/snapshots/components/TextInputWithTokens.test.ts-snapshots/TextInputWithTokens-Default-dark-high-contrast-linux.png and b/.playwright/snapshots/components/TextInputWithTokens.test.ts-snapshots/TextInputWithTokens-Default-dark-high-contrast-linux.png differ diff --git a/.playwright/snapshots/components/TextInputWithTokens.test.ts-snapshots/TextInputWithTokens-With-Leading-Visual-dark-high-contrast-linux.png b/.playwright/snapshots/components/TextInputWithTokens.test.ts-snapshots/TextInputWithTokens-With-Leading-Visual-dark-high-contrast-linux.png index 96505f91071..6bbb45ddabc 100644 Binary files a/.playwright/snapshots/components/TextInputWithTokens.test.ts-snapshots/TextInputWithTokens-With-Leading-Visual-dark-high-contrast-linux.png and b/.playwright/snapshots/components/TextInputWithTokens.test.ts-snapshots/TextInputWithTokens-With-Leading-Visual-dark-high-contrast-linux.png differ diff --git a/.playwright/snapshots/components/TextInputWithTokens.test.ts-snapshots/TextInputWithTokens-With-Trailing-Visual-dark-high-contrast-linux.png b/.playwright/snapshots/components/TextInputWithTokens.test.ts-snapshots/TextInputWithTokens-With-Trailing-Visual-dark-high-contrast-linux.png index 7d94a79dd56..1ec465c5136 100644 Binary files a/.playwright/snapshots/components/TextInputWithTokens.test.ts-snapshots/TextInputWithTokens-With-Trailing-Visual-dark-high-contrast-linux.png and b/.playwright/snapshots/components/TextInputWithTokens.test.ts-snapshots/TextInputWithTokens-With-Trailing-Visual-dark-high-contrast-linux.png differ diff --git a/.playwright/snapshots/components/Textarea.test.ts-snapshots/Textarea-Block-dark-high-contrast-linux.png b/.playwright/snapshots/components/Textarea.test.ts-snapshots/Textarea-Block-dark-high-contrast-linux.png index acccf92ef5a..48d72407fae 100644 Binary files a/.playwright/snapshots/components/Textarea.test.ts-snapshots/Textarea-Block-dark-high-contrast-linux.png and b/.playwright/snapshots/components/Textarea.test.ts-snapshots/Textarea-Block-dark-high-contrast-linux.png differ diff --git a/.playwright/snapshots/components/Textarea.test.ts-snapshots/Textarea-Default-dark-high-contrast-linux.png b/.playwright/snapshots/components/Textarea.test.ts-snapshots/Textarea-Default-dark-high-contrast-linux.png index 9f01078a3d5..3c1449070c0 100644 Binary files a/.playwright/snapshots/components/Textarea.test.ts-snapshots/Textarea-Default-dark-high-contrast-linux.png and b/.playwright/snapshots/components/Textarea.test.ts-snapshots/Textarea-Default-dark-high-contrast-linux.png differ diff --git a/.playwright/snapshots/components/Textarea.test.ts-snapshots/Textarea-Visually-Hidden-Label-dark-high-contrast-linux.png b/.playwright/snapshots/components/Textarea.test.ts-snapshots/Textarea-Visually-Hidden-Label-dark-high-contrast-linux.png index 66c5e0c920a..527d2d6fb2b 100644 Binary files a/.playwright/snapshots/components/Textarea.test.ts-snapshots/Textarea-Visually-Hidden-Label-dark-high-contrast-linux.png and b/.playwright/snapshots/components/Textarea.test.ts-snapshots/Textarea-Visually-Hidden-Label-dark-high-contrast-linux.png differ diff --git a/.playwright/snapshots/components/Textarea.test.ts-snapshots/Textarea-Warning-dark-high-contrast-linux.png b/.playwright/snapshots/components/Textarea.test.ts-snapshots/Textarea-Warning-dark-high-contrast-linux.png index dbd810a45a4..ccdb73657f6 100644 Binary files a/.playwright/snapshots/components/Textarea.test.ts-snapshots/Textarea-Warning-dark-high-contrast-linux.png and b/.playwright/snapshots/components/Textarea.test.ts-snapshots/Textarea-Warning-dark-high-contrast-linux.png differ diff --git a/.playwright/snapshots/components/Textarea.test.ts-snapshots/Textarea-With-Caption-dark-high-contrast-linux.png b/.playwright/snapshots/components/Textarea.test.ts-snapshots/Textarea-With-Caption-dark-high-contrast-linux.png index 1a5e894fe75..22cce7a5a37 100644 Binary files a/.playwright/snapshots/components/Textarea.test.ts-snapshots/Textarea-With-Caption-dark-high-contrast-linux.png and b/.playwright/snapshots/components/Textarea.test.ts-snapshots/Textarea-With-Caption-dark-high-contrast-linux.png differ diff --git a/.storybook/primitives-v8.css b/.storybook/primitives-v8.css index 391db714f65..2e3e8c55aaf 100644 --- a/.storybook/primitives-v8.css +++ b/.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'; +*/ diff --git a/src/Button/__tests__/__snapshots__/Button.test.tsx.snap b/src/Button/__tests__/__snapshots__/Button.test.tsx.snap index bbaf6d6eba5..036a70189a6 100644 --- a/src/Button/__tests__/__snapshots__/Button.test.tsx.snap +++ b/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; diff --git a/src/Button/styles.ts b/src/Button/styles.ts index 426e5251d52..3d12edfc2e8 100644 --- a/src/Button/styles.ts +++ b/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', diff --git a/src/__tests__/__snapshots__/ActionMenu.test.tsx.snap b/src/__tests__/__snapshots__/ActionMenu.test.tsx.snap index 0927c476249..0893c7502ea 100644 --- a/src/__tests__/__snapshots__/ActionMenu.test.tsx.snap +++ b/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"],