[rise-erpelding]

Description

Use opaque white or black for enabled static-color content in the shared gen2 components:

• Secondary and outline swc-button labels in default, hover, pressed (active), and focus-visible states.
• swc-close-button icons in the same states.
• Update the generated global button stylesheet and include a patch changeset for @adobe/spectrum-wc.

Border, background (including translucent interaction overlays), focus-indicator, and disabled-state colors are unchanged. No API or interaction behavior changes.

Motivation and context

The previous static treatments used translucent white/black content: the 800 tokens (for instance transparent-white-800) by default and the 900 tokens (transparent-white-900) on hover, press, and keyboard focus. This can cause issues with contrast; for instance in toast integration testing, the static-white action label measured approximately 3.91:1 on positive toasts, below the WCAG AA 4.5:1 requirement for its 14px bold text. Opaque white, on the other hand, measured approximately 4.81:1 against those backgrounds.

Related issue(s)

• SWC-2693

Screenshots

Static white button

Static white button, before:

Static white button, after (new VRTs added to help validate hover/focus/active states):

Static black button

Static black button, before:

Static black button, after (new VRTs added to help validate hover/focus/active states):

Static white close button

Static white close button, before:

Static white close button, after:

Static black close button

Static black close button, before:

Static black close button, after:

---

Author's checklist

• I have read the CONTRIBUTING and PULL_REQUESTS documents.
• I have reviewed at the Accessibility Practices for this feature, see: Aria Practices
• I have added automated tests to cover my changes.
• I have included a well-written changeset if my change needs to be published.
• I have included updated documentation if my change required it.

Validation performed:

• A focused PostCSS assertion failed on all eight close-button static enabled-state color declarations before the fix and passed afterward.
• A comparison against the previous CSS confirmed that only those eight values changed; all other close-button CSS is unchanged.
• Focused Stylelint, Prettier, and git diff --check passed.

No committed regression tests were added. No public API documentation changes are required. Browser, screen-reader, forced-colors, and toast integration QA remain outstanding; this description does not claim a full test-suite pass.

---

Reviewer's checklist

• Includes a Github Issue with appropriate flag or Jira ticket number without a link
• Includes thoughtfully written changeset if changes suggested include patch, minor, or major features
• Automated tests cover all use cases and follow best practices for writing
• Validated on all supported browsers
• All VRTs are approved before the author can update Golden Hash

Manual review test cases

• Static button label colors

  1. Open Button and use controls to select static color variants, or use the VRTs; inspect the secondary variant's solid and outline treatments, then inspect outline treatments with the other available variants.
  2. Inspect static-white and static-black label colors at rest, on hover, while pressed, and while keyboard-focused. Test keyboard focus separately from hover.
  3. Expect opaque rgb(255, 255, 255) or rgb(0, 0, 0), respectively, in every enabled state. Verify the global button stylesheet produces the same colors.

• Static close-button icon colors

  1. Open Close button: Static colors or use the VRTs.
  2. Inspect each icon at rest, on hover, while pressed, and while keyboard-focused.
  3. Expect opaque white or black matching its static color. Check icon contrast against its rendered background separately from button-label contrast.

• Unchanged colors, behavior, and forced-colors rendering

  1. Compare the affected examples with the base branch, including disabled examples and Windows forced-colors mode.
  2. Verify backgrounds and intentional translucent overlays, borders, focus indicators, disabled colors, and activation behavior are unchanged. Confirm forced-colors icons, labels, and focus indicators remain visible.
  3. Confirm non-static treatments are unaffected.

[changeset-bot]

⚠️ No Changeset found

Latest commit: a67fab3

Merging this PR will not cause a version bump for any packages. If these changes should not result in a new version, you're good to go. If these changes should result in a version bump, you need to add a changeset.

Click here to learn what changesets are, and how to add one.

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

[github-actions]

📚 Branch Preview Links

• Storybook (Gen2, dev mode)
• Storybook (Gen2, prod mode)
• Documentation Site (Gen1)
• Storybook (Gen1)

🔍 Gen1 Visual Regression Test Results

When a visual regression test fails (or has previously failed while working on this branch), its results can be found in the following URLs:

• Spectrum | Light | Medium | LTR
• Spectrum | Dark | Large | RTL
• Express | Light | Medium | LTR
• Express | Dark | Large | RTL
• Spectrum-two | Light | Medium | LTR
• Spectrum-two | Dark | Large | RTL
• High Contrast Mode | Medium | LTR

Deployed to Azure Blob Storage: pr-6846

If the changes are expected, update the current_golden_images_cache hash in the circleci config to accept the new images. Instructions are included in that file.
If the changes are unexpected, you can investigate the cause of the differences and update the code accordingly.

[rise-erpelding]

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]

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

[cdransf]

Looks good! Do we need to make the same change in action button? ✨

[rise-erpelding]

After looking at #6848's token updates where token("white") turns into token("transparent-static-white-1000"), it looks like a few updates will be necessary here once that PR lands, pausing on this for just a moment in order to address that!

@cdransf It's a good question about action button; I'm not sure where we might consume the static color variants that it could present a problem, but something for us to keep an eye on for sure!