Uh oh!
There was an error while loading. Please reload this page.
SC-24821 | FEAT - Add gray550 color and accessibility updates - #421
Merged
Conversation
- Add gray550 (#8D93A0) to the color palette - Use gray550 for the default border color of Input, Select, Checkbox, and Radio in light mode - Use gray550 for the Switch (toggle) off-state background in light mode - Increase Tag font-size to 14px - Underline the small link variant of Button/LinkButton - Bump package version to 2.0.56 and update release notes Co-authored-by: Copilot <223556219+Copilot@users.noreply.github.com>
✅ Snyk checks have passed. No issues have been found so far.
💻 Catch issues earlier using the plugins for VS Code, JetBrains IDEs, Visual Studio, and Eclipse. |
Contributor
There was a problem hiding this comment.
Pull request overview
This PR improves Admin UI accessibility by introducing a new mid-gray palette color (gray550) and applying it to light-mode default/resting UI affordances (form borders and switch off-state), plus a couple of text readability/affordance tweaks and a version bump.
Changes:
- Added
c7Colors.gray550(#8D93A0) and applied it as the light-mode default border color for form controls and as the light-mode “off” background forSwitch. - Increased
Tagfont size to14pxand underlined the smalllinkvariant ofButton/LinkButtonfor improved accessibility cues. - Bumped package version to
2.0.56and documented the changes in release notes.
Reviewed changes
Copilot reviewed 9 out of 10 changed files in this pull request and generated no comments.
Show a summary per file
| File | Description |
|---|---|
| src/ui/theme.tsx | Adds gray550 to the shared color palette. |
| src/tag/Tag.styles.tsx | Updates Tag font-size to 14px. |
| src/switchComponent/theme.js | Uses gray550 for light-mode switch off-state background. |
| src/stories/Releases.mdx | Adds release notes entry for 2.0.56. |
| src/radio/theme.js | Uses gray550 as the light-mode default border color. |
| src/common/form/theme.js | Uses gray550 as the light-mode default border color for shared form styling. |
| src/checkbox/theme.js | Uses gray550 as the light-mode default border color. |
| src/button/Button.styles.tsx | Underlines the small link variant to improve link affordance. |
| package.json | Bumps package version to 2.0.56. |
| package-lock.json | Updates lockfile version fields to 2.0.56. |
💡 Add a code-review agent skill or configure MCP servers for context-aware, tailored reviews. Learn more in the docs.
NoahThomlison
approved these changes
Aug 18, 2026
Uh oh!
There was an error while loading. Please reload this page.
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 freeto 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
Add a new accessible gray color to the palette and apply it to form-related components, plus a few other accessibility improvements to the Admin UI library.
gray550(#8D93A0) to the color palettegray550for the default border color ofInput,Select,Checkbox, andRadiogray550for theSwitch(toggle) off-state backgroundTagcomponent font-size to14pxfor accessibility (docs)linkvariant ofButton/LinkButton(<a>) for accessibility2.0.56and update release notesNotes
adminrepo's@commerce7/admin-uidependency is out of scope for this PR - that can only happen once this merges tomainand CI publishes the new npm version.