feat(actionbutton): use closer to s2 colors in spectrum-two theme #3606

jawinn · 2025-03-05T22:15:24Z

Description

SWC-497 action button color updates

This includes requested colors update for action button, aligning the colors closer to the S2 design, post-foundations.

In the spectrum-two theme:

Removes the border
Changes the default background colors to match s2 specs
Updates the background colors used for static black and static white

High contrast fix

This also includes a bug fix for selected + disabled in forced-colors / high contrast mode. The disabled colors were not being used for this combination in both themes, and previously had a mix of disabled border and selected background in S1.

S2 and S1, Before:
S1 + Quiet, Before
S2 and S1, After:

How and where has this been tested?

Please tag yourself on the tests you've marked complete to confirm the tests have been run by someone other than the author.

Validation steps

Requested updates in Jira issue SWC-497 have been made. spectrum-two version of action button in storybook does not have borders, has the darker grey background, and the updated static color variants look correct by default and on hover and focus. [@rise-erpelding]
No regressions in spectrum 1 theme VRT. There is one expected change in the spectrum 1 VRTs for selected disabled in forced-colors / high contrast. [@rise-erpelding]
VRT diff shows expected changes for S2 theme [@rise-erpelding]

Regression testing

Validate:

The documentation pages for at least two other components are still loading, including:

The pages render correctly, are accessible, and are responsive.

If components have been modified, VRTs have been run on this branch:

VRTs have been run and looked at.
Any VRT changes have been accepted (by reviewer and/or PR author), or there are no changes.

To-do list

I have read the contribution guidelines.
I have tested these changes in Windows High Contrast mode.
✨ This pull request is ready to merge. ✨

changeset-bot · 2025-03-05T22:15:28Z

🦋 Changeset detected

Latest commit: f6d73b2

The changes in this PR will be included in the next version bump.

This PR includes changesets to release 1 package

Name	Type
@spectrum-css/actionbutton	Patch

Not sure what this means? Click here to learn what changesets are.

Click here if you're a maintainer who wants to add another changeset to this PR

github-actions · 2025-03-05T22:20:08Z

File metrics

Summary

Total size: 2.25 MB^*

Package	Size	Minified	Gzipped
actionbutton	25.30 KB	24.21 KB	2.99 KB

actionbutton

Filename	Head	Minified	Gzipped	Compared to base
index-base.css	20.12 KB	19.24 KB	2.71 KB	🟢 ⬇ 0.19 KB
index-theme.css	7.64 KB	7.42 KB	0.89 KB	🔴 ⬆ 0.22 KB
index.css	25.30 KB	24.21 KB	2.99 KB	🔴 ⬆ 0.23 KB
metadata.json	14.21 KB	-	-	🟢 ⬇ 0.26 KB
themes/express.css	5.72 KB	5.55 KB	0.88 KB	🔴 ⬆ 0.22 KB
themes/spectrum-two.css	5.66 KB	5.49 KB	0.88 KB	🟢 ⬇ 0.24 KB
themes/spectrum.css	5.89 KB	5.71 KB	0.90 KB	🔴 ⬆ 0.22 KB

* Size is the sum of all main files for packages in the library.
* An ASCII character in UTF-8 is 8 bits or 1 byte.

github-actions · 2025-03-05T22:21:00Z

🚀 Deployed on https://pr-3606--spectrum-css.netlify.app

rise-erpelding

These look great!

I had a few small, non-blocking comments though:

Corner radius: no changes were made here and this follows the S2 spec beautifully. However the ticket says "Ensure that border radius is pointing to / inheriting the token value 'corner-radius-100'", is it possible (or necessary) to confirm that we do in fact want the corner radius to scale at different sizes?
I raised the question about the down/active color being different than hover and focus, even though the S2 spec has them as all the same color, but this color difference could be due to the fact that we're not implementing the perspective-based down state in Foundations, and I see you've already asked about whether this is accurate. No questions from me on this, I'm sure we'll end up with the colors that everyone's happy with here.
I only checked the Chrome emulation for forced colors, and noticed for dark mode that the quiet selected variants have a border. There's still good contrast here so I'm not all that concerned, but it does feel a little unintentional.

castastrophe

These updates are great; thanks for tackling this. I can see in the baselines how much closer the S2 visuals are now. I approved the VRT changes and I like the update to the disabled+selected in the forced colors mode. I think this is good to merge.

castastrophe · 2025-03-11T15:08:43Z

components/actionbutton/index.css

@@ -45,6 +38,13 @@
 				forced-color-adjust: none;
 			}
 		}
+
+		&:disabled,


This is a great move to ensure disabled styles always take precedence over other states. I can see that this is why the disabled+selected variant is now showing disabled colors in high contrast mode. Great job here.

castastrophe · 2025-03-11T15:10:50Z

@jawinn Oh and this is ready for you to add a changeset once you feel confident in the changes.

Requested colors update for action button, aligning the colors closer to the S2 design, post-foundations. In the foundations spectrum-two theme: - Removes the border - Changes the default background colors to match s2 specs - Updates the background colors used for static black and static white SWC-497

The selected + disabled button was not showing up as the disabled colors in high contrast mode. Fixed by adjusting the source order slightly in the high contrast media query so disabled is after selected and takes precedence.

jawinn · 2025-03-11T16:30:40Z

I've updated this with the revised down state color after confirmation from design that the Jira requested value was incorrect. It's now matching the S2 spec.

Use updated background colors to match the s2 spec. Originally requested tokens for down state in fast follow were incorrect.

rise-erpelding

Took one more quick glance at it, this is still looking great! Thanks for making those updates!

* feat(actionbutton): use s2 colors in spectrum-two theme (#3606) * feat(actionbutton): use closer to s2 colors in spectrum-two theme Requested colors update for action button, aligning the colors closer to the S2 design, post-foundations. In the foundations spectrum-two theme: - Removes the border - Changes the default background colors to match s2 specs - Updates the background colors used for static black and static white SWC-497 * fix(actionbutton): fix high contrast styles for selected disabled The selected + disabled button was not showing up as the disabled colors in high contrast mode. Fixed by adjusting the source order slightly in the high contrast media query so disabled is after selected and takes precedence. * fix(search): update disabled state in spectrum two (#3593) Co-authored-by: rise-erpelding <54716846+rise-erpelding@users.noreply.github.com> Co-authored-by: [ Cassondra ] <castastrophe@users.noreply.github.com> * chore(deps): bump the npm_and_yarn group with 2 updates (#3618) Bumps the npm_and_yarn group with 2 updates: [@babel/helpers](https://github.com/babel/babel/tree/HEAD/packages/babel-helpers) and [@babel/runtime](https://github.com/babel/babel/tree/HEAD/packages/babel-runtime). Updates `@babel/helpers` from 7.26.0 to 7.26.10 - [Release notes](https://github.com/babel/babel/releases) - [Changelog](https://github.com/babel/babel/blob/main/CHANGELOG.md) - [Commits](https://github.com/babel/babel/commits/v7.26.10/packages/babel-helpers) Updates `@babel/runtime` from 7.24.4 to 7.26.10 - [Release notes](https://github.com/babel/babel/releases) - [Changelog](https://github.com/babel/babel/blob/main/CHANGELOG.md) - [Commits](https://github.com/babel/babel/commits/v7.26.10/packages/babel-runtime) --- updated-dependencies: - dependency-name: "@babel/helpers" dependency-type: indirect dependency-group: npm_and_yarn - dependency-name: "@babel/runtime" dependency-type: indirect dependency-group: npm_and_yarn ... Signed-off-by: dependabot[bot] <support@github.com> Co-authored-by: dependabot[bot] <49699333+dependabot[bot]@users.noreply.github.com> * chore: update release script install settings * fix(button): adjust s2 static colors [SWC-496] (#3613) * chore: release (#3619) Co-authored-by: github-actions[bot] <41898282+github-actions[bot]@users.noreply.github.com> * fix(slider): corrects contrast bug caused by template default arg (#3614) * fix(stepper): fast follows for focus/focus+hover/keyboardFocus borders (#3621) * fix(stepper): focus/focus+hover/keyboardFocus border colors * chore(stepper): add changeset * fix(slider): offset variant border radius bug fix (#3611) * feat(slider): offset variant border radius bug fix * feat(slider): fix range slider * fix(combobox): border color fast follows swc-582 (#3609) * fix(combobox): correct s1/legacy container variable * fix(combobox): fast follow border color remapping - add mods for s2 foundations disabled picker button BG/border colors - correct disabled+read-only border color - add read-only border custom property - fixes express read-only border from gray-500 to gray-400 - update metadata.json * chore(combobox): create changeset * chore: release (#3623) Co-authored-by: github-actions[bot] <41898282+github-actions[bot]@users.noreply.github.com> * chore: patch tj-actions vulnerability (#3626) * fix(alertbanner): change system variable from spectrum to legacy (#3624) * fix(alertbanner): change system: spectrum to legacy * chore(alertbanner): create changeset * test(checkbox): add more coverage for checkbox (#3625) * chore(checkbox): add isHovered state to checkbox - adds isHovered shared type and control to checkbox stories - adds several isHovered test cases - updates checkbox template to include isHovered arg * chore(form): fix the fieldgroup component input and labels * chore: release (#3631) Co-authored-by: github-actions[bot] <41898282+github-actions[bot]@users.noreply.github.com> * fix(checkbox): add invalid+checked+hover checkbox styles (#3617) - add missing ::before pseudo to target the before element in the invalid/checked/hover state - update metadata.json - create changeset * chore: release (#3632) * chore: release --------- Co-authored-by: github-actions[bot] <41898282+github-actions[bot]@users.noreply.github.com> * fix: undefined and duplicated variable after merging main fix(slider): remove duplicated values Remove a large number of duplicate values causing stylelint "Unexpected duplicate" warnings. It looks like things got doubled up somehow in a previous rebase or merge. This included duplicate t-shirt size classes. Also moves root styles block under the custom property definitions to be consistent with other components. fix(combobox): fixes undefined and duplicated values --------- Signed-off-by: dependabot[bot] <support@github.com> Co-authored-by: TaraT <ttomar@adobe.com> Co-authored-by: rise-erpelding <54716846+rise-erpelding@users.noreply.github.com> Co-authored-by: [ Cassondra ] <castastrophe@users.noreply.github.com> Co-authored-by: dependabot[bot] <49699333+dependabot[bot]@users.noreply.github.com> Co-authored-by: github-actions[bot] <41898282+github-actions[bot]@users.noreply.github.com> Co-authored-by: Cory Dransfeldt <cdransfeldt@adobe.com> Co-authored-by: Marissa Huysentruyt <69602589+marissahuysentruyt@users.noreply.github.com> Co-authored-by: aramos-adobe <abdulr@adobe.com>

jawinn marked this pull request as ready for review March 6, 2025 20:28

jawinn force-pushed the jawinn/swc-497-action-button-fast-follow branch from 932d496 to 2da7092 Compare March 6, 2025 20:29

jawinn added the ready-for-review label Mar 6, 2025

rise-erpelding self-requested a review March 10, 2025 13:29

rise-erpelding added the fast-follows An issue or PR that quickly follows a release label Mar 10, 2025

rise-erpelding approved these changes Mar 10, 2025

View reviewed changes

castastrophe force-pushed the main branch from 0d5bdfb to 8637d39 Compare March 11, 2025 14:54

castastrophe force-pushed the jawinn/swc-497-action-button-fast-follow branch from 2da7092 to 91898a9 Compare March 11, 2025 15:07

castastrophe approved these changes Mar 11, 2025

View reviewed changes

jawinn added 2 commits March 11, 2025 12:26

jawinn force-pushed the jawinn/swc-497-action-button-fast-follow branch from 91898a9 to 6984ffd Compare March 11, 2025 16:27

fix(actionbutton): use s2 background colors per updated request

66c8e5b

Use updated background colors to match the s2 spec. Originally requested tokens for down state in fast follow were incorrect.

jawinn force-pushed the jawinn/swc-497-action-button-fast-follow branch from 6984ffd to 66c8e5b Compare March 11, 2025 16:51

chore(actionbutton): add changeset for colors update

f6d73b2

jawinn added run_vrt For use on PRs looking to kick off VRT and removed run_vrt For use on PRs looking to kick off VRT labels Mar 11, 2025

rise-erpelding approved these changes Mar 11, 2025

View reviewed changes

jawinn merged commit 3ec3b46 into main Mar 11, 2025
34 checks passed

jawinn deleted the jawinn/swc-497-action-button-fast-follow branch March 11, 2025 20:18

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

feat(actionbutton): use closer to s2 colors in spectrum-two theme #3606

feat(actionbutton): use closer to s2 colors in spectrum-two theme #3606

jawinn commented Mar 5, 2025 •

edited

Loading

changeset-bot bot commented Mar 5, 2025 •

edited

Loading

github-actions bot commented Mar 5, 2025 •

edited

Loading

github-actions bot commented Mar 5, 2025 •

edited

Loading

rise-erpelding left a comment

castastrophe left a comment

castastrophe Mar 11, 2025

castastrophe commented Mar 11, 2025

jawinn commented Mar 11, 2025

rise-erpelding left a comment

feat(actionbutton): use closer to s2 colors in spectrum-two theme #3606

feat(actionbutton): use closer to s2 colors in spectrum-two theme #3606

Conversation

jawinn commented Mar 5, 2025 • edited Loading

Description

SWC-497 action button color updates

High contrast fix

How and where has this been tested?

Validation steps

Regression testing

To-do list

changeset-bot bot commented Mar 5, 2025 • edited Loading

🦋 Changeset detected

github-actions bot commented Mar 5, 2025 • edited Loading

File metrics

Summary

actionbutton

github-actions bot commented Mar 5, 2025 • edited Loading

rise-erpelding left a comment

Choose a reason for hiding this comment

castastrophe left a comment

Choose a reason for hiding this comment

castastrophe Mar 11, 2025

Choose a reason for hiding this comment

castastrophe commented Mar 11, 2025

jawinn commented Mar 11, 2025

rise-erpelding left a comment

Choose a reason for hiding this comment

jawinn commented Mar 5, 2025 •

edited

Loading

changeset-bot bot commented Mar 5, 2025 •

edited

Loading

github-actions bot commented Mar 5, 2025 •

edited

Loading

github-actions bot commented Mar 5, 2025 •

edited

Loading