CodeBlock, CodeEditor, SideNav - Focus ring color contrast fix
#2819
Conversation
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
|
The latest updates on your projects. Learn more about Vercel for Git ↗︎
|
didoo
reviewed
Apr 14, 2025
didoo
reviewed
Apr 14, 2025
dchyun
commented
Apr 14, 2025
dchyun
commented
Apr 14, 2025
|
@dchyun I would add the specific designer you worked with on this as a reviewer so they can comment on/approve the visual changes you implemented. |
LilithJames-HDS
approved these changes
Apr 17, 2025
KristinLBradley
approved these changes
Apr 17, 2025
|
@dchyun If all the visual diffs in Percy are as expected and the designer has approved the implemented visual changes then you can approve the Percy diffs to clear the failing check. |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
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
If merged, this PR would update the colors of focus rings for interactive elements in the following components, and fix color contrast issues with the existing colors.
CodeBlock(Preview)CodeEditor(Preview)SideNav(Preview)🛠️ Detailed description
Currently the
CodeBlock,CodeEditor, andSideNavcomponents leverage our existing focus ring color tokens that are used on light colored backgrounds, but these components all have interactive elements on dark colored backgrounds. This was resulting in a color contrast violation as the focus ring colors had contrast less than 3:1.New dark background focus ring tokens were created in HDS-4640 to fix these issues.
Note: These new token values are being implemented at the component level, not in the tokens package. The organization of global tokens for themes will be implemented in the future, and when that occurs these tokens will be moved from the component level to the global level.
📸 Screenshots
CodeBlock
Before
After
CodeEditor
Before
After
SideNav
Before
After
🔗 External links
Jira ticket: HDS-4767
Figma file: Link
👀 Component checklist
💬 Please consider using conventional comments when reviewing this PR.