Add label border-color tokens
#1237
Conversation
🦋 Changeset detectedLatest commit: f5488d5 The changes in this PR will be included in the next version bump. This PR includes changesets to release 1 package
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 |
There was a problem hiding this comment.
Pull Request Overview
This PR adds border-color token support to label components to enhance accessibility for high contrast themes. The changes systematically add borderColor properties to all label color variants, ensuring consistent border styling across different theme modes.
- Adds borderColor tokens for all 21 label color variants (green, orange, purple, red, yellow, gray, auburn, brown, lemon, olive, lime, pine, teal, cyan, indigo, blue, plum, pink, coral, etc.)
- Sets transparent borders for standard and dark themes while enabling foreground color borders for all high contrast theme variants
- Maintains consistency with existing token structure and Figma integration patterns
src/tokens/component/label.json5
Outdated
| borderColor: { | ||
| $value: 'transparent', | ||
| $type: 'color', | ||
| $extensions: { | ||
| 'org.primer.figma': { | ||
| collection: 'mode', | ||
| group: 'component', | ||
| scopes: ['borderColor'], | ||
| }, | ||
| 'org.primer.overrides': { | ||
| dark: { | ||
| $value: 'transparent', | ||
| }, | ||
| 'dark-dimmed': { | ||
| $value: 'transparent', | ||
| }, | ||
| 'light-high-contrast': { | ||
| $value: '{label.green.fgColor}', | ||
| }, | ||
| 'dark-high-contrast': { | ||
| $value: '{label.green.fgColor}', | ||
| }, | ||
| 'dark-dimmed-high-contrast': { | ||
| $value: '{label.green.fgColor}', | ||
| }, | ||
| 'dark-tritanopia-high-contrast': { | ||
| $value: '{label.green.fgColor}', | ||
| }, | ||
| 'dark-protanopia-deuteranopia-high-contrast': { | ||
| $value: '{label.green.fgColor}', | ||
| }, | ||
| 'light-tritanopia-high-contrast': { | ||
| $value: '{label.green.fgColor}', | ||
| }, | ||
| 'light-protanopia-deuteranopia-high-contrast': { | ||
| $value: '{label.green.fgColor}', | ||
| }, | ||
| }, | ||
| }, | ||
| }, |
There was a problem hiding this comment.
The borderColor configuration is duplicated across all 21 label color variants with identical structure. Consider extracting this repetitive configuration into a shared template or mixin to reduce code duplication and improve maintainability.
| borderColor: { | |
| $value: 'transparent', | |
| $type: 'color', | |
| $extensions: { | |
| 'org.primer.figma': { | |
| collection: 'mode', | |
| group: 'component', | |
| scopes: ['borderColor'], | |
| }, | |
| 'org.primer.overrides': { | |
| dark: { | |
| $value: 'transparent', | |
| }, | |
| 'dark-dimmed': { | |
| $value: 'transparent', | |
| }, | |
| 'light-high-contrast': { | |
| $value: '{label.green.fgColor}', | |
| }, | |
| 'dark-high-contrast': { | |
| $value: '{label.green.fgColor}', | |
| }, | |
| 'dark-dimmed-high-contrast': { | |
| $value: '{label.green.fgColor}', | |
| }, | |
| 'dark-tritanopia-high-contrast': { | |
| $value: '{label.green.fgColor}', | |
| }, | |
| 'dark-protanopia-deuteranopia-high-contrast': { | |
| $value: '{label.green.fgColor}', | |
| }, | |
| 'light-tritanopia-high-contrast': { | |
| $value: '{label.green.fgColor}', | |
| }, | |
| 'light-protanopia-deuteranopia-high-contrast': { | |
| $value: '{label.green.fgColor}', | |
| }, | |
| }, | |
| }, | |
| }, | |
| borderColor: '{shared.borderColor}', |
Copilot uses AI. Check for mistakes.
Design Token Diff (CSS)The message is too long to be displayed here. For more details, please check the job summary. |
Design Token Diff (StyleLint)The message is too long to be displayed here. For more details, please check the job summary. |
Design Token Diff (Figma)The message is too long to be displayed here. For more details, please check the job summary. |
github-actions
bot
removed
the
update snapshots
|
It would be nice if we had a test like: https://primer.style/primitives/storybook/?path=/story/testing-colors--display-demo&globals=theme:light_high_contrast Sadly I can not add copilot to your PR to do work which I guess is a good security thing. Also why don't we use: |
Add border-color tokens to support high contrast themes.