fix(#3847): Use missing container interactive bg-color token#3848
Merged
Conversation
✅ Deploy Preview for benji-docs-previews ready!
To edit notification comments on pull requests, go to your Netlify project configuration. |
twjeffery
force-pushed
the
tom/missing-component-tokens
branch
from
5df82b5 to
33a93cf
Compare
twjeffery
changed the title
twjeffery
changed the title
twjeffery
changed the title
twjeffery
changed the title
vanessatran-ddi
approved these changes
Apr 22, 2026
ArakTaiRoth
approved these changes
Apr 23, 2026
Collaborator
|
🎉 This PR is included in version 2.0.0-dev.5 🎉 The release is available on: Your semantic-release bot 📦🚀 |
Collaborator
|
🎉 This PR is included in version 2.0.0-dev.12 🎉 The release is available on: Your semantic-release bot 📦🚀 |
Collaborator
|
🎉 This PR is included in version 7.0.0-dev.6 🎉 The release is available on: Your semantic-release bot 📦🚀 |
Collaborator
|
🎉 This PR is included in version 5.0.0-dev.6 🎉 The release is available on: Your semantic-release bot 📦🚀 |
twjeffery
added a commit
that referenced
this pull request
Apr 27, 2026
…tent Follow-up to #3848. That PR wired the .goa-container--interactive.accent--filled .content rule to use --goa-container-interactive-border, which resolves to the brand teal token. Every interactive container with accent="filled" (the default) was rendering a brand-teal border at rest, where the intent is greyscale-200. Swap the rule to --goa-container-border, the existing neutral token already used by the base .content rule for non-filled accents. The interactive-border token is intentionally untouched in design-tokens because it remains the correct value for the accent="thick"/"thin" heading element, where teal-on-teal renders as a flush accent bar.
ArakTaiRoth
pushed a commit
that referenced
this pull request
Apr 28, 2026
…tent Follow-up to #3848. That PR wired the .goa-container--interactive.accent--filled .content rule to use --goa-container-interactive-border, which resolves to the brand teal token. Every interactive container with accent="filled" (the default) was rendering a brand-teal border at rest, where the intent is greyscale-200. Swap the rule to --goa-container-border, the existing neutral token already used by the base .content rule for non-filled accents. The interactive-border token is intentionally untouched in design-tokens because it remains the correct value for the accent="thick"/"thin" heading element, where teal-on-teal renders as a flush accent bar.
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
4 participants
Add this suggestion to a batch that can be applied as a single commit.This suggestion is invalid because no changes were made to the code.Suggestions cannot be applied while the pull request is closed.Suggestions cannot be applied while viewing a subset of changes.Only one suggestion per line can be applied in a batch.Add this suggestion to a batch that can be applied as a single commit.Applying suggestions on deleted lines is not supported.You must change the existing code in this line in order to create a valid suggestion.Outdated suggestions cannot be applied.This suggestion has been applied or marked resolved.Suggestions cannot be applied from pending reviews.Suggestions cannot be applied on multi-line comments.Suggestions cannot be applied while the pull request is queued to merge.Suggestion cannot be applied right now. Please check back later.
Summary
--goa-container-interactive-bg-colortoken is defined in the design tokens JSON but the Container component had no CSS rule referencing it.accent--filled .contentselector. The interactive variant was missing.greyscale-white) matches the current browser-rendered appearance.Changes
Container (interactive filled-accent content): Added
.goa-container--interactive.accent--filled .contentrule withbackground-colorandborder, matching the pattern of all other container types.Fixes #3847
Test plan