Skip to content
Open
Show file tree
Hide file tree
Changes from all commits
Commits
File filter

Filter by extension

Filter by extension

Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
4 changes: 2 additions & 2 deletions packages/mcp/src/primitives.ts
Original file line number Diff line number Diff line change
Expand Up @@ -437,7 +437,7 @@ function getDesignTokenSpecsText(groups: TokenGroups): string {
* **Shorthand**: MUST use \`font: var(...)\`. NEVER split size/weight.
* **Shorthand Fallback**: If no shorthand exists (e.g. Monospace), use individual tokens for font-size, family, and line-height. NEVER raw 1.5.
* **States**: Define 5: Rest, Hover, Focus-visible, Active, Disabled.
* **Focus**: \`:focus-visible\` MUST use \`outline: var(--focus-outline)\` AND \`outline-offset: var(--outline-focus-offset)\`.
* **Focus**: \`:focus-visible\` MUST use \`outline: var(--focus-outline)\` AND \`outline-offset: var(--focus-outline-offset, var(--outline-focus-offset))\`.
* **Validation**: CALL \`lint_css\` after any CSS change. Task is incomplete without a success message.
* **Self-Correction**: Adopt autofixes immediately. Report unfixable errors to the user.

Expand Down Expand Up @@ -508,7 +508,7 @@ function getTokenUsagePatternsText(): string {

.btn-primary:focus-visible {
outline: var(--focus-outline);
outline-offset: var(--outline-focus-offset);
outline-offset: var(--focus-outline-offset, var(--outline-focus-offset));
}

.btn-primary:active {
Expand Down
Original file line number Diff line number Diff line change
@@ -1,11 +1,15 @@
// Vitest Snapshot v1, https://vitest.dev/guide/snapshot.html

exports[`postcss-preset-primer > css nesting 1`] = `".selector[data-active]{color:var(--fgColor-active)}"`;
exports[`postcss-preset-primer > css nesting 1`] = `".selector[data-active]{color:var(--fgColor-active)}"`

exports[`postcss-preset-primer > mixins > @mixin activeIndicatorLine 1`] = `".selector{background:var(--borderColor-accent-emphasis,var(--color-accent-emphasis));border-radius:var(--borderRadius-medium,.375rem);content:"";height:calc(100% - var(--base-size-8,.5rem));left:calc(var(--base-size-8,.5rem)*-1);position:absolute;top:var(--base-size-4,.25rem);width:var(--base-size-4,.25rem)}"`;
exports[`postcss-preset-primer > mixins > @mixin activeIndicatorLine 1`] =
`".selector{background:var(--borderColor-accent-emphasis,var(--color-accent-emphasis));border-radius:var(--borderRadius-medium,.375rem);content:"";height:calc(100% - var(--base-size-8,.5rem));left:calc(var(--base-size-8,.5rem)*-1);position:absolute;top:var(--base-size-4,.25rem);width:var(--base-size-4,.25rem)}"`

exports[`postcss-preset-primer > mixins > @mixin buttonReset 1`] = `".selector{align-items:center;appearance:none;background:none;border:0;color:inherit;cursor:pointer;display:inline-flex;font:inherit;margin:0;padding:0;text-align:start}.selector::-moz-focus-inner{border:0}"`;
exports[`postcss-preset-primer > mixins > @mixin buttonReset 1`] =
`".selector{align-items:center;appearance:none;background:none;border:0;color:inherit;cursor:pointer;display:inline-flex;font:inherit;margin:0;padding:0;text-align:start}.selector::-moz-focus-inner{border:0}"`
Copy link

Copilot AI Apr 15, 2026

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

The snapshot update includes unrelated formatting churn (line wrapping / semicolon removal) for snapshots whose CSS output didn’t change. To keep diffs focused and reduce merge conflicts, consider reverting those purely-formatting changes and only updating the snapshot strings that actually changed due to the new focus outline token chain.

Suggested change
`".selector{align-items:center;appearance:none;background:none;border:0;color:inherit;cursor:pointer;display:inline-flex;font:inherit;margin:0;padding:0;text-align:start}.selector::-moz-focus-inner{border:0}"`
`".selector{align-items:center;appearance:none;background:none;border:0;color:inherit;cursor:pointer;display:inline-flex;font:inherit;margin:0;padding:0;text-align:start;}.selector::-moz-focus-inner{border:0;}"`

Copilot uses AI. Check for mistakes.

exports[`postcss-preset-primer > mixins > @mixin focusOutline 1`] = `".selector{box-shadow:none;outline:2px solid var(--focus-outlineColor,var(--color-accent-fg));outline-offset:-2px}"`;
exports[`postcss-preset-primer > mixins > @mixin focusOutline 1`] =
`".selector{box-shadow:none;outline:2px solid var(--focus-outline-color,var(--focus-outlineColor,var(--color-accent-fg)));outline-offset:-2px}"`

exports[`postcss-preset-primer > mixins > @mixin focusOutlineOnEmphasis 1`] = `".selector{box-shadow:inset 0 0 0 3px var(--fgColor-onEmphasis,var(--color-fg-on-emphasis));outline:2px solid var(--focus-outlineColor,var(--color-accent-fg));outline-offset:-2px}"`;
exports[`postcss-preset-primer > mixins > @mixin focusOutlineOnEmphasis 1`] =
`".selector{box-shadow:inset 0 0 0 3px var(--fgColor-onEmphasis,var(--color-fg-on-emphasis));outline:2px solid var(--focus-outline-color,var(--focus-outlineColor,var(--color-accent-fg)));outline-offset:-2px}"`
Original file line number Diff line number Diff line change
@@ -1,4 +1,4 @@
@define-mixin focusOutline $outlineOffset: -2px, $outlineColor: var(--focus-outlineColor) {
@define-mixin focusOutline $outlineOffset: -2px, $outlineColor: var(--focus-outline-color, var(--focus-outlineColor)) {
outline: 2px solid $outlineColor;
outline-offset: $outlineOffset;
box-shadow: none;
Expand Down
Original file line number Diff line number Diff line change
@@ -1,5 +1,6 @@
/* outline with fg box-shadow for buttons */
@define-mixin focusOutlineOnEmphasis $outlineOffset: -2px, $outlineColor: var(--focus-outlineColor) {
@define-mixin focusOutlineOnEmphasis $outlineOffset: -2px,
$outlineColor: var(--focus-outline-color, var(--focus-outlineColor)) {
Comment on lines +2 to +3
Copy link

Copilot AI Apr 15, 2026

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

For consistency with the other mixins in this directory (e.g. focusOutline), keep the @define-mixin signature on a single line unless there’s a strong reason to wrap it. This makes future diffs smaller and keeps these small mixin files easier to scan.

Suggested change
@define-mixin focusOutlineOnEmphasis $outlineOffset: -2px,
$outlineColor: var(--focus-outline-color, var(--focus-outlineColor)) {
@define-mixin focusOutlineOnEmphasis $outlineOffset: -2px, $outlineColor: var(--focus-outline-color, var(--focus-outlineColor)) {

Copilot uses AI. Check for mistakes.
outline: 2px solid $outlineColor;
outline-offset: $outlineOffset;
/* stylelint-disable-next-line primer/box-shadow */
Expand Down
Original file line number Diff line number Diff line change
Expand Up @@ -16,6 +16,6 @@

.CustomActionListItem[data-is-active-descendant='activated-directly'] {
background-color: transparent;
outline: 2px solid var(--focus-outlineColor, var(--color-accent-emphasis));
outline: 2px solid var(--focus-outline-color, var(--focus-outlineColor));
Copy link
Copy Markdown
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Suggested change
outline: 2px solid var(--focus-outline-color, var(--focus-outlineColor));
outline: var(--focus-outline);

outline-offset: -2px;
}
2 changes: 1 addition & 1 deletion packages/react/src/ToggleSwitch/ToggleSwitch.module.css
Original file line number Diff line number Diff line change
Expand Up @@ -77,7 +77,7 @@

/* Focus styles */
&:focus-visible {
outline: 2px solid var(--focus-outlineColor);
outline: 2px solid var(--focus-outline-color, var(--focus-outlineColor));
Copy link
Copy Markdown
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Suggested change
outline: 2px solid var(--focus-outline-color, var(--focus-outlineColor));
outline: var(--focus-outline);

outline-offset: 3px;
}

Expand Down
Loading