Skip to content

fix(tag): update tag content color to match S2#6020

Open
rubencarvalho wants to merge 4 commits intomainfrom
ruben/tag-colors-s2f
Open

fix(tag): update tag content color to match S2#6020
rubencarvalho wants to merge 4 commits intomainfrom
ruben/tag-colors-s2f

Conversation

@rubencarvalho
Copy link
Contributor

@rubencarvalho rubencarvalho commented Feb 12, 2026

Description

Corrects the tag content color in S2 Foundations by updating the system-theme-bridge token mapping from --spectrum-neutral-subdued-content-color-* to --spectrum-neutral-content-color-* for all interaction states (default, hover, active, focus). I also updated the border-color to match the content color for consistency with the other themes.

Before: Tag text rendered at gray-700 (~rgb 80,80,80) via --spectrum-neutral-subdued-content-color-default
After: Tag text renders at gray-800 (~rgb 41,41,41) via --spectrum-neutral-content-color-default

The change is isolated to 1st-gen/tools/styles/tokens-v2/system-theme-bridge.css, affecting only the S2 Foundations theme.

Motivation and context

It was reported via Slack that the tag content color in S2 Foundations does not match the S2 design spec. The "subdued" variant produces a noticeably lighter text color than intended, reducing contrast and deviating from the Figma token specs.

Related issue(s)

  • fixes SWC-1356

Screenshots (if appropriate)


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.

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

  • Verify tag content color matches S2 spec in default state

    1. Go to the tag component Storybook page with S2 theme enabled
    2. Inspect the tag text color using browser dev tools
    3. Expect the computed color to resolve to gray-800 (rgb 41,41,41) via --spectrum-neutral-content-color-default

@changeset-bot
Copy link

changeset-bot bot commented Feb 12, 2026

🦋 Changeset detected

Latest commit: 1ac3ced

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

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

@rubencarvalho rubencarvalho added the Status: Ready for review PR ready for review or re-review. label Feb 12, 2026
@rubencarvalho rubencarvalho marked this pull request as ready for review February 12, 2026 14:38
@rubencarvalho rubencarvalho requested a review from a team as a code owner February 12, 2026 14:38
@github-actions
Copy link
Contributor

github-actions bot commented Feb 12, 2026

📚 Branch Preview Links

🔍 First Generation 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:

Deployed to Azure Blob Storage: pr-6020

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.

Copy link
Collaborator

@marissahuysentruyt marissahuysentruyt left a comment

Choose a reason for hiding this comment

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

Love a quick fix! VRTs are expected ✅

Just a quick thought- in S1, the border color and the content color of the tags match. The request was just for the content color, so I'm going to approve, but would we want to update the border color to the same neutral-content-color-* tokens as well? I believe all of the other variants and states have matching border & content colors.

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Labels

Status: Ready for review PR ready for review or re-review.

Projects

None yet

Development

Successfully merging this pull request may close these issues.

2 participants