Add label border-color tokens

[langermank]

Add border-color tokens to support high contrast themes.

[changeset-bot]

🦋 Changeset detected

Latest commit: f5488d5

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

This PR includes changesets to release 1 package

Name	Type
@primer/primitives	Patch

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

[Copilot]

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

[Copilot]

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.

Suggested change

	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}',

[github-actions]

Design Token Diff (CSS)

The message is too long to be displayed here. For more details, please check the job summary.

[github-actions]

Design Token Diff (StyleLint)

The message is too long to be displayed here. For more details, please check the job summary.

[github-actions]

Design Token Diff (Figma)

The message is too long to be displayed here. For more details, please check the job summary.

[lukasoppermann]

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: --display-[color]-borderColor-emphasis instead of fgColor? And I am also wondering if we even need label colors if display colors doe exactly the same?

[lukasoppermann]

LGTM. It would be best if we had a demo like