Skip to content

fix(button, close-button): update static variant colors #6846

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Open
rise-erpelding wants to merge 4 commits into
base: main
Choose a base branch
from
+99 −66
Open

fix(button, close-button): update static variant colors #6846

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
4 commits
Select commit Hold shift + click to select a range
6854cfd
fix(button, close-button): update static variant colors
rise-erpelding Oct 19, 2026
0410817
test(button): update vrts
rise-erpelding Oct 21, 2026
4bf39b5
test(button): remove newly added global styles vrts
rise-erpelding Oct 22, 2026
a67fab3
fix(button, close-button): replace deprecated white and black tokens
rise-erpelding Oct 22, 2026
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
5 changes: 5 additions & 0 deletions gen2/.changeset/fix-button-static-label-contrast.md
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,5 @@
---
'@adobe/spectrum-wc': patch
---

**fix(button, close-button):** Fixed static-white and static-black secondary and outline `swc-button` labels and `swc-close-button` icons to use opaque white or black in default, hover, pressed, and focus-visible states, improving contrast and keeping their colors consistent. Border, background, focus-indicator, and disabled-state colors are unchanged.
32 changes: 16 additions & 16 deletions gen2/packages/swc/components/button/button.css
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -206,10 +206,10 @@ slot[name="icon"]::slotted(*) {
--swc-button-background-color-hover: token("transparent-static-white-300");
--swc-button-background-color-down: token("transparent-static-white-300");
--swc-button-background-color-focus: token("transparent-static-white-300");
--swc-button-content-color-default: token("transparent-static-white-900");
--swc-button-content-color-hover: token("transparent-static-white-950");
--swc-button-content-color-down: token("transparent-static-white-950");
--swc-button-content-color-focus: token("transparent-static-white-950");
--swc-button-content-color-default: token("transparent-static-white-1000");
--swc-button-content-color-hover: token("transparent-static-white-1000");
--swc-button-content-color-down: token("transparent-static-white-1000");
--swc-button-content-color-focus: token("transparent-static-white-1000");
}

:host([static-color="white"][fill-style="outline"]) {
Expand All @@ -221,10 +221,10 @@ slot[name="icon"]::slotted(*) {
--swc-button-border-color-hover: token("transparent-static-white-950");
--swc-button-border-color-down: token("transparent-static-white-950");
--swc-button-border-color-focus: token("transparent-static-white-950");
--swc-button-content-color-default: token("transparent-static-white-900");
--swc-button-content-color-hover: token("transparent-static-white-950");
--swc-button-content-color-down: token("transparent-static-white-950");
--swc-button-content-color-focus: token("transparent-static-white-950");
--swc-button-content-color-default: token("transparent-static-white-1000");
--swc-button-content-color-hover: token("transparent-static-white-1000");
--swc-button-content-color-down: token("transparent-static-white-1000");
--swc-button-content-color-focus: token("transparent-static-white-1000");
--swc-button-background-color-disabled: token("transparent-static-white-0");
--swc-button-border-color-disabled: token("disabled-static-white-border-color");
--swc-button-content-color-disabled: token("disabled-static-white-content-color");
Expand Down Expand Up @@ -263,10 +263,10 @@ slot[name="icon"]::slotted(*) {
--swc-button-background-color-hover: token("transparent-static-black-200");
--swc-button-background-color-down: token("transparent-static-black-200");
--swc-button-background-color-focus: token("transparent-static-black-200");
--swc-button-content-color-default: token("transparent-static-black-900");
--swc-button-content-color-hover: token("transparent-static-black-950");
--swc-button-content-color-down: token("transparent-static-black-950");
--swc-button-content-color-focus: token("transparent-static-black-950");
--swc-button-content-color-default: token("transparent-static-black-1000");
--swc-button-content-color-hover: token("transparent-static-black-1000");
--swc-button-content-color-down: token("transparent-static-black-1000");
--swc-button-content-color-focus: token("transparent-static-black-1000");
}

:host([static-color="black"][fill-style="outline"]) {
Expand All @@ -278,10 +278,10 @@ slot[name="icon"]::slotted(*) {
--swc-button-border-color-hover: token("transparent-static-black-950");
--swc-button-border-color-down: token("transparent-static-black-950");
--swc-button-border-color-focus: token("transparent-static-black-950");
--swc-button-content-color-default: token("transparent-static-black-900");
--swc-button-content-color-hover: token("transparent-static-black-950");
--swc-button-content-color-down: token("transparent-static-black-950");
--swc-button-content-color-focus: token("transparent-static-black-950");
--swc-button-content-color-default: token("transparent-static-black-1000");
--swc-button-content-color-hover: token("transparent-static-black-1000");
--swc-button-content-color-down: token("transparent-static-black-1000");
--swc-button-content-color-focus: token("transparent-static-black-1000");
--swc-button-background-color-disabled: token("transparent-static-black-0");
--swc-button-border-color-disabled: token("disabled-static-black-border-color");
--swc-button-content-color-disabled: token("disabled-static-black-content-color");
Expand Down
77 changes: 51 additions & 26 deletions gen2/packages/swc/components/button/test/vrt/button-global-styles.vrt.ts
View file
Open in desktop

@rise-erpelding rise-erpelding Oct 21, 2026

Copy link
Copy Markdown
Collaborator Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

I noticed our button VRTs weren't covering all the variants x treatments x states, so I made a few updates. Looks like the change is a bit more drastic for global button because of the way the VRTs were set up initially.

The combinations that are missing (primary outline disabled, or primary/secondary outline hover/focus/active seem important to include and are in some cases combinations that were touched in this PR, which is why I opted to include them, but I'm also open to leaving them out if we'd rather tackle them separately!

@rise-erpelding rise-erpelding Oct 22, 2026

Copy link
Copy Markdown
Collaborator Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

I did ultimately decide to pare back the global styles a little bit, open to doing more if we think that's needed!

Original file line number Diff line number Diff line change
Expand Up @@ -10,9 +10,11 @@
* governing permissions and limitations under the License.
*/

import { html } from 'lit';
import { html, nothing } from 'lit';
import type { Meta, StoryObj as Story } from '@storybook/web-components';

import { BUTTON_STATIC_COLORS } from '@adobe/spectrum-wc-core/components/button';

import {
FORCED_STATES,
forcePseudoStates,
Expand Down Expand Up @@ -49,14 +51,27 @@ const globalIconSvg = html`

// One <a> and one <button>, both with the same classes. The whole point of
// the global stylesheet is that both element types render identically.
const asLinkAndButton = (classes: string, label: string) => [
const asLinkAndButton = (
classes: string,
label: string,
forceState?: (typeof FORCED_STATES)[number]
) => [
html`
<a href="#" class="swc-Button ${classes}" onclick="return false;">
<a
href="#"
class="swc-Button ${classes}"
data-force-state=${forceState ?? nothing}
onclick="return false;"
>
${label} (link)
</a>
`,
html`
<button type="button" class="swc-Button ${classes}">
<button
type="button"
class="swc-Button ${classes}"
data-force-state=${forceState ?? nothing}
>
${label} (button)
</button>
`,
Expand All @@ -74,6 +89,15 @@ const VARIANT_CASES = [
},
];

const STATIC_TREATMENT_CASES = [
{ classes: 'swc-Button--secondary', label: 'Secondary' },
{ classes: 'swc-Button--outline', label: 'Primary outline' },
{
classes: 'swc-Button--secondary swc-Button--outline',
label: 'Secondary outline',
},
];

const SIZE_CASES = [
{ classes: 'swc-Button--sizeS', label: 'Small' },
{ classes: '', label: 'Medium' },
Expand Down Expand Up @@ -181,32 +205,33 @@ const globalStylesContent = () => html`
],
'Justified'
)}
${staticColorBackground(
row(
${BUTTON_STATIC_COLORS.map((color) => {
const staticClass =
color === 'white' ? 'swc-Button--staticWhite' : 'swc-Button--staticBlack';

return staticColorBackground(
[
...asLinkAndButton('swc-Button--staticWhite', 'White'),
...asLinkAndButton(
'swc-Button--staticWhite swc-Button--secondary',
'White secondary'
row(
[
...asLinkAndButton(staticClass, 'Primary'),
...STATIC_TREATMENT_CASES.flatMap(({ classes, label }) =>
asLinkAndButton(`${staticClass} ${classes}`, label)
),
],
`Static ${color}`
),
],
'Static white'
),
'white'
)}
${staticColorBackground(
row(
[
...asLinkAndButton('swc-Button--staticBlack', 'Black'),
...asLinkAndButton(
'swc-Button--staticBlack swc-Button--secondary',
'Black secondary'
...FORCED_STATES.map((state) =>
row(
STATIC_TREATMENT_CASES.flatMap(({ classes, label }) =>
asLinkAndButton(`${staticClass} ${classes}`, label, state)
),
`Static ${color} · ${state}`
)
),
],
'Static black'
),
'black'
)}
color
);
})}
${row(
FORCED_STATES.flatMap((state) => [
html`
Expand Down
3 changes: 3 additions & 0 deletions gen2/packages/swc/components/button/test/vrt/button.vrt.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -102,17 +102,20 @@ const STATIC_COLOR_PERMUTATION_GROUPS = BUTTON_STATIC_COLORS.map((color) => ({
{
'static-color': [color],
variant: ['primary', 'secondary'],
'fill-style': BUTTON_FILL_STYLES,
'data-force-state': FORCED_STATES,
},
// Disabled and pending static-color states.
{
'static-color': [color],
variant: ['primary', 'secondary'],
'fill-style': BUTTON_FILL_STYLES,
disabled: [true],
},
{
'static-color': [color],
variant: ['primary', 'secondary'],
'fill-style': BUTTON_FILL_STYLES,
pending: [true],
},
]),
Expand Down
16 changes: 8 additions & 8 deletions gen2/packages/swc/components/close-button/close-button.css
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -99,11 +99,11 @@
--swc-close-button-background-color-focus: token("transparent-static-white-200");
--swc-close-button-background-color-hover: token("transparent-static-white-200");
--swc-close-button-focus-indicator-color: token("static-white-focus-indicator-color");
--swc-close-button-icon-color-default: token("transparent-static-white-900");
--swc-close-button-icon-color-default: token("transparent-static-white-1000");
--swc-close-button-icon-color-disabled: token("disabled-static-white-background-color");
--swc-close-button-icon-color-down: token("transparent-static-white-950");
--swc-close-button-icon-color-focus: token("transparent-static-white-950");
--swc-close-button-icon-color-hover: token("transparent-static-white-950");
--swc-close-button-icon-color-down: token("transparent-static-white-1000");
--swc-close-button-icon-color-focus: token("transparent-static-white-1000");
--swc-close-button-icon-color-hover: token("transparent-static-white-1000");
}

:host([static-color="black"]) {
Expand All @@ -112,9 +112,9 @@
--swc-close-button-background-color-focus: token("transparent-static-black-150");
--swc-close-button-background-color-hover: token("transparent-static-black-150");
--swc-close-button-focus-indicator-color: token("static-black-focus-indicator-color");
--swc-close-button-icon-color-default: token("transparent-static-black-900");
--swc-close-button-icon-color-default: token("transparent-static-black-1000");
--swc-close-button-icon-color-disabled: token("disabled-static-black-background-color");
--swc-close-button-icon-color-down: token("transparent-static-black-950");
--swc-close-button-icon-color-focus: token("transparent-static-black-950");
--swc-close-button-icon-color-hover: token("transparent-static-black-950");
--swc-close-button-icon-color-down: token("transparent-static-black-1000");
--swc-close-button-icon-color-focus: token("transparent-static-black-1000");
--swc-close-button-icon-color-hover: token("transparent-static-black-1000");
}
32 changes: 16 additions & 16 deletions gen2/packages/swc/stylesheets/global/global-button.css
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -229,10 +229,10 @@
--swc-button-background-color-hover: token("transparent-static-white-300");
--swc-button-background-color-down: token("transparent-static-white-300");
--swc-button-background-color-focus: token("transparent-static-white-300");
--swc-button-content-color-default: token("transparent-static-white-900");
--swc-button-content-color-hover: token("transparent-static-white-950");
--swc-button-content-color-down: token("transparent-static-white-950");
--swc-button-content-color-focus: token("transparent-static-white-950");
--swc-button-content-color-default: token("transparent-static-white-1000");
--swc-button-content-color-hover: token("transparent-static-white-1000");
--swc-button-content-color-down: token("transparent-static-white-1000");
--swc-button-content-color-focus: token("transparent-static-white-1000");
}

.swc-Button--staticWhite.swc-Button--outline {
Expand All @@ -244,10 +244,10 @@
--swc-button-border-color-hover: token("transparent-static-white-950");
--swc-button-border-color-down: token("transparent-static-white-950");
--swc-button-border-color-focus: token("transparent-static-white-950");
--swc-button-content-color-default: token("transparent-static-white-900");
--swc-button-content-color-hover: token("transparent-static-white-950");
--swc-button-content-color-down: token("transparent-static-white-950");
--swc-button-content-color-focus: token("transparent-static-white-950");
--swc-button-content-color-default: token("transparent-static-white-1000");
--swc-button-content-color-hover: token("transparent-static-white-1000");
--swc-button-content-color-down: token("transparent-static-white-1000");
--swc-button-content-color-focus: token("transparent-static-white-1000");
--swc-button-background-color-disabled: token("transparent-static-white-0");
--swc-button-border-color-disabled: token("disabled-static-white-border-color");
--swc-button-content-color-disabled: token("disabled-static-white-content-color");
Expand Down Expand Up @@ -284,10 +284,10 @@
--swc-button-background-color-hover: token("transparent-static-black-200");
--swc-button-background-color-down: token("transparent-static-black-200");
--swc-button-background-color-focus: token("transparent-static-black-200");
--swc-button-content-color-default: token("transparent-static-black-900");
--swc-button-content-color-hover: token("transparent-static-black-950");
--swc-button-content-color-down: token("transparent-static-black-950");
--swc-button-content-color-focus: token("transparent-static-black-950");
--swc-button-content-color-default: token("transparent-static-black-1000");
--swc-button-content-color-hover: token("transparent-static-black-1000");
--swc-button-content-color-down: token("transparent-static-black-1000");
--swc-button-content-color-focus: token("transparent-static-black-1000");
}

.swc-Button--staticBlack.swc-Button--outline {
Expand All @@ -299,10 +299,10 @@
--swc-button-border-color-hover: token("transparent-static-black-950");
--swc-button-border-color-down: token("transparent-static-black-950");
--swc-button-border-color-focus: token("transparent-static-black-950");
--swc-button-content-color-default: token("transparent-static-black-900");
--swc-button-content-color-hover: token("transparent-static-black-950");
--swc-button-content-color-down: token("transparent-static-black-950");
--swc-button-content-color-focus: token("transparent-static-black-950");
--swc-button-content-color-default: token("transparent-static-black-1000");
--swc-button-content-color-hover: token("transparent-static-black-1000");
--swc-button-content-color-down: token("transparent-static-black-1000");
--swc-button-content-color-focus: token("transparent-static-black-1000");
--swc-button-background-color-disabled: token("transparent-static-black-0");
--swc-button-border-color-disabled: token("disabled-static-black-border-color");
--swc-button-content-color-disabled: token("disabled-static-black-content-color");
Expand Down
Loading