From e6c1e7508d21a6d0e96b6da7ca74268b51fef373 Mon Sep 17 00:00:00 2001 From: "copilot-swe-agent[bot]" <198982749+Copilot@users.noreply.github.com> Date: Wed, 15 Apr 2026 07:06:54 +0000 Subject: [PATCH 1/3] Initial plan From eb5fb02678961702f663b1c58b1806ba4d152e7a Mon Sep 17 00:00:00 2001 From: "copilot-swe-agent[bot]" <198982749+Copilot@users.noreply.github.com> Date: Wed, 15 Apr 2026 07:16:39 +0000 Subject: [PATCH 2/3] fix: replace deprecated CSS custom property names with new equivalents and fallbacks Agent-Logs-Url: https://github.com/primer/react/sessions/de27d8ab-284e-42bb-824a-0320a7dcf3fa Co-authored-by: lukasoppermann <813754+lukasoppermann@users.noreply.github.com> --- package-lock.json | 59 +------------------ packages/mcp/src/primitives.ts | 4 +- .../__snapshots__/preset.test.ts.snap | 14 +++-- .../src/mixins/focusOutline.css | 2 +- .../src/mixins/focusOutlineOnEmphasis.css | 3 +- .../SelectPanel.examples.stories.module.css | 2 +- .../src/ToggleSwitch/ToggleSwitch.module.css | 2 +- 7 files changed, 19 insertions(+), 67 deletions(-) diff --git a/package-lock.json b/package-lock.json index 874612288c0..48c82fbab91 100644 --- a/package-lock.json +++ b/package-lock.json @@ -4906,6 +4906,7 @@ "version": "1.7.4", "resolved": "https://registry.npmjs.org/@floating-ui/core/-/core-1.7.4.tgz", "integrity": "sha512-C3HlIdsBxszvm5McXlB8PeOEWfBhcGBTZGkGlWc2U0KFY5IwG5OQEuQ8rq52DZmcHDlPLd+YFBK+cZcytwIFWg==", + "dev": true, "license": "MIT", "dependencies": { "@floating-ui/utils": "^0.2.10" @@ -4915,6 +4916,7 @@ "version": "1.7.5", "resolved": "https://registry.npmjs.org/@floating-ui/dom/-/dom-1.7.5.tgz", "integrity": "sha512-N0bD2kIPInNHUHehXhMke1rBGs1dwqvC9O9KYMyyjK7iXt7GAhnro7UlcuYcGdS/yYOlq0MAVgrow8IbWJwyqg==", + "dev": true, "license": "MIT", "dependencies": { "@floating-ui/core": "^1.7.4", @@ -4939,6 +4941,7 @@ "version": "0.2.10", "resolved": "https://registry.npmjs.org/@floating-ui/utils/-/utils-0.2.10.tgz", "integrity": "sha512-aGTxbpbg8/b5JfU1HXSrbH3wXZuLPJcNEcZQFMxLs3oSzgtVu6nFPkbbGGUvBcUjKV2YyB9Wxxabo+HEH9tcRQ==", + "dev": true, "license": "MIT" }, "node_modules/@github-ui/storybook-addon-performance-panel": { @@ -6689,55 +6692,6 @@ "node": "^16.13.0 || >=18.0.0" } }, - "node_modules/@oddbird/css-anchor-positioning": { - "version": "0.9.0", - "resolved": "https://registry.npmjs.org/@oddbird/css-anchor-positioning/-/css-anchor-positioning-0.9.0.tgz", - "integrity": "sha512-G5nfb4sU0auxJH7VHafPwVJjr1GhH5uPSkmytGqhNftCpT3QEh8pFtMd4YHt1dRwb4o9qVZxlGSKUIc4TIrysQ==", - "license": "BSD-3-Clause", - "dependencies": { - "@floating-ui/dom": "^1.7.5", - "@types/css-tree": "^2.3.11", - "css-tree": "^3.1.0", - "nanoid": "^5.1.6" - } - }, - "node_modules/@oddbird/css-anchor-positioning/node_modules/css-tree": { - "version": "3.2.1", - "resolved": "https://registry.npmjs.org/css-tree/-/css-tree-3.2.1.tgz", - "integrity": "sha512-X7sjQzceUhu1u7Y/ylrRZFU2FS6LRiFVp6rKLPg23y3x3c3DOKAwuXGDp+PAGjh6CSnCjYeAul8pcT8bAl+lSA==", - "license": "MIT", - "dependencies": { - "mdn-data": "2.27.1", - "source-map-js": "^1.2.1" - }, - "engines": { - "node": "^10 || ^12.20.0 || ^14.13.0 || >=15.0.0" - } - }, - "node_modules/@oddbird/css-anchor-positioning/node_modules/mdn-data": { - "version": "2.27.1", - "resolved": "https://registry.npmjs.org/mdn-data/-/mdn-data-2.27.1.tgz", - "integrity": "sha512-9Yubnt3e8A0OKwxYSXyhLymGW4sCufcLG6VdiDdUGVkPhpqLxlvP5vl1983gQjJl3tqbrM731mjaZaP68AgosQ==", - "license": "CC0-1.0" - }, - "node_modules/@oddbird/css-anchor-positioning/node_modules/nanoid": { - "version": "5.1.7", - "resolved": "https://registry.npmjs.org/nanoid/-/nanoid-5.1.7.tgz", - "integrity": "sha512-ua3NDgISf6jdwezAheMOk4mbE1LXjm1DfMUDMuJf4AqxLFK3ccGpgWizwa5YV7Yz9EpXwEaWoRXSb/BnV0t5dQ==", - "funding": [ - { - "type": "github", - "url": "https://github.com/sponsors/ai" - } - ], - "license": "MIT", - "bin": { - "nanoid": "bin/nanoid.js" - }, - "engines": { - "node": "^18 || >=20" - } - }, "node_modules/@pkgjs/parseargs": { "version": "0.11.0", "dev": true, @@ -9391,12 +9345,6 @@ "@types/node": "*" } }, - "node_modules/@types/css-tree": { - "version": "2.3.11", - "resolved": "https://registry.npmjs.org/@types/css-tree/-/css-tree-2.3.11.tgz", - "integrity": "sha512-aEokibJOI77uIlqoBOkVbaQGC9zII0A+JH1kcTNKW2CwyYWD8KM6qdo+4c77wD3wZOQfJuNWAr9M4hdk+YhDIg==", - "license": "MIT" - }, "node_modules/@types/debug": { "version": "4.1.12", "dev": true, @@ -27750,7 +27698,6 @@ "@github/relative-time-element": "^5.0.0", "@github/tab-container-element": "^4.8.2", "@lit-labs/react": "1.2.1", - "@oddbird/css-anchor-positioning": "^0.9.0", "@oddbird/popover-polyfill": "^0.5.2", "@primer/behaviors": "^1.10.2", "@primer/live-region-element": "^0.7.1", diff --git a/packages/mcp/src/primitives.ts b/packages/mcp/src/primitives.ts index 74c1bb8deae..858a2f32113 100644 --- a/packages/mcp/src/primitives.ts +++ b/packages/mcp/src/primitives.ts @@ -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. @@ -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 { diff --git a/packages/postcss-preset-primer/src/__tests__/__snapshots__/preset.test.ts.snap b/packages/postcss-preset-primer/src/__tests__/__snapshots__/preset.test.ts.snap index 14d61a9d0d1..db598f50e75 100644 --- a/packages/postcss-preset-primer/src/__tests__/__snapshots__/preset.test.ts.snap +++ b/packages/postcss-preset-primer/src/__tests__/__snapshots__/preset.test.ts.snap @@ -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}"` -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}"` diff --git a/packages/postcss-preset-primer/src/mixins/focusOutline.css b/packages/postcss-preset-primer/src/mixins/focusOutline.css index 17dd2a18e48..61a052bdf5f 100644 --- a/packages/postcss-preset-primer/src/mixins/focusOutline.css +++ b/packages/postcss-preset-primer/src/mixins/focusOutline.css @@ -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; diff --git a/packages/postcss-preset-primer/src/mixins/focusOutlineOnEmphasis.css b/packages/postcss-preset-primer/src/mixins/focusOutlineOnEmphasis.css index 516a92c8ae2..898a27aebc2 100644 --- a/packages/postcss-preset-primer/src/mixins/focusOutlineOnEmphasis.css +++ b/packages/postcss-preset-primer/src/mixins/focusOutlineOnEmphasis.css @@ -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)) { outline: 2px solid $outlineColor; outline-offset: $outlineOffset; /* stylelint-disable-next-line primer/box-shadow */ diff --git a/packages/react/src/SelectPanel/SelectPanel.examples.stories.module.css b/packages/react/src/SelectPanel/SelectPanel.examples.stories.module.css index e0d6d11afa3..e9fc3512b17 100644 --- a/packages/react/src/SelectPanel/SelectPanel.examples.stories.module.css +++ b/packages/react/src/SelectPanel/SelectPanel.examples.stories.module.css @@ -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)); outline-offset: -2px; } diff --git a/packages/react/src/ToggleSwitch/ToggleSwitch.module.css b/packages/react/src/ToggleSwitch/ToggleSwitch.module.css index d2e1357c05c..cac39dce200 100644 --- a/packages/react/src/ToggleSwitch/ToggleSwitch.module.css +++ b/packages/react/src/ToggleSwitch/ToggleSwitch.module.css @@ -77,7 +77,7 @@ /* Focus styles */ &:focus-visible { - outline: 2px solid var(--focus-outlineColor); + outline: 2px solid var(--focus-outline-color, var(--focus-outlineColor)); outline-offset: 3px; } From e0dca252eddcbfbc7d21744622644d7938f94d22 Mon Sep 17 00:00:00 2001 From: "copilot-swe-agent[bot]" <198982749+Copilot@users.noreply.github.com> Date: Wed, 15 Apr 2026 07:20:03 +0000 Subject: [PATCH 3/3] chore: revert spurious package-lock.json changes Agent-Logs-Url: https://github.com/primer/react/sessions/de27d8ab-284e-42bb-824a-0320a7dcf3fa Co-authored-by: lukasoppermann <813754+lukasoppermann@users.noreply.github.com> --- package-lock.json | 59 ++++++++++++++++++++++++++++++++++++++++++++--- 1 file changed, 56 insertions(+), 3 deletions(-) diff --git a/package-lock.json b/package-lock.json index 48c82fbab91..874612288c0 100644 --- a/package-lock.json +++ b/package-lock.json @@ -4906,7 +4906,6 @@ "version": "1.7.4", "resolved": "https://registry.npmjs.org/@floating-ui/core/-/core-1.7.4.tgz", "integrity": "sha512-C3HlIdsBxszvm5McXlB8PeOEWfBhcGBTZGkGlWc2U0KFY5IwG5OQEuQ8rq52DZmcHDlPLd+YFBK+cZcytwIFWg==", - "dev": true, "license": "MIT", "dependencies": { "@floating-ui/utils": "^0.2.10" @@ -4916,7 +4915,6 @@ "version": "1.7.5", "resolved": "https://registry.npmjs.org/@floating-ui/dom/-/dom-1.7.5.tgz", "integrity": "sha512-N0bD2kIPInNHUHehXhMke1rBGs1dwqvC9O9KYMyyjK7iXt7GAhnro7UlcuYcGdS/yYOlq0MAVgrow8IbWJwyqg==", - "dev": true, "license": "MIT", "dependencies": { "@floating-ui/core": "^1.7.4", @@ -4941,7 +4939,6 @@ "version": "0.2.10", "resolved": "https://registry.npmjs.org/@floating-ui/utils/-/utils-0.2.10.tgz", "integrity": "sha512-aGTxbpbg8/b5JfU1HXSrbH3wXZuLPJcNEcZQFMxLs3oSzgtVu6nFPkbbGGUvBcUjKV2YyB9Wxxabo+HEH9tcRQ==", - "dev": true, "license": "MIT" }, "node_modules/@github-ui/storybook-addon-performance-panel": { @@ -6692,6 +6689,55 @@ "node": "^16.13.0 || >=18.0.0" } }, + "node_modules/@oddbird/css-anchor-positioning": { + "version": "0.9.0", + "resolved": "https://registry.npmjs.org/@oddbird/css-anchor-positioning/-/css-anchor-positioning-0.9.0.tgz", + "integrity": "sha512-G5nfb4sU0auxJH7VHafPwVJjr1GhH5uPSkmytGqhNftCpT3QEh8pFtMd4YHt1dRwb4o9qVZxlGSKUIc4TIrysQ==", + "license": "BSD-3-Clause", + "dependencies": { + "@floating-ui/dom": "^1.7.5", + "@types/css-tree": "^2.3.11", + "css-tree": "^3.1.0", + "nanoid": "^5.1.6" + } + }, + "node_modules/@oddbird/css-anchor-positioning/node_modules/css-tree": { + "version": "3.2.1", + "resolved": "https://registry.npmjs.org/css-tree/-/css-tree-3.2.1.tgz", + "integrity": "sha512-X7sjQzceUhu1u7Y/ylrRZFU2FS6LRiFVp6rKLPg23y3x3c3DOKAwuXGDp+PAGjh6CSnCjYeAul8pcT8bAl+lSA==", + "license": "MIT", + "dependencies": { + "mdn-data": "2.27.1", + "source-map-js": "^1.2.1" + }, + "engines": { + "node": "^10 || ^12.20.0 || ^14.13.0 || >=15.0.0" + } + }, + "node_modules/@oddbird/css-anchor-positioning/node_modules/mdn-data": { + "version": "2.27.1", + "resolved": "https://registry.npmjs.org/mdn-data/-/mdn-data-2.27.1.tgz", + "integrity": "sha512-9Yubnt3e8A0OKwxYSXyhLymGW4sCufcLG6VdiDdUGVkPhpqLxlvP5vl1983gQjJl3tqbrM731mjaZaP68AgosQ==", + "license": "CC0-1.0" + }, + "node_modules/@oddbird/css-anchor-positioning/node_modules/nanoid": { + "version": "5.1.7", + "resolved": "https://registry.npmjs.org/nanoid/-/nanoid-5.1.7.tgz", + "integrity": "sha512-ua3NDgISf6jdwezAheMOk4mbE1LXjm1DfMUDMuJf4AqxLFK3ccGpgWizwa5YV7Yz9EpXwEaWoRXSb/BnV0t5dQ==", + "funding": [ + { + "type": "github", + "url": "https://github.com/sponsors/ai" + } + ], + "license": "MIT", + "bin": { + "nanoid": "bin/nanoid.js" + }, + "engines": { + "node": "^18 || >=20" + } + }, "node_modules/@pkgjs/parseargs": { "version": "0.11.0", "dev": true, @@ -9345,6 +9391,12 @@ "@types/node": "*" } }, + "node_modules/@types/css-tree": { + "version": "2.3.11", + "resolved": "https://registry.npmjs.org/@types/css-tree/-/css-tree-2.3.11.tgz", + "integrity": "sha512-aEokibJOI77uIlqoBOkVbaQGC9zII0A+JH1kcTNKW2CwyYWD8KM6qdo+4c77wD3wZOQfJuNWAr9M4hdk+YhDIg==", + "license": "MIT" + }, "node_modules/@types/debug": { "version": "4.1.12", "dev": true, @@ -27698,6 +27750,7 @@ "@github/relative-time-element": "^5.0.0", "@github/tab-container-element": "^4.8.2", "@lit-labs/react": "1.2.1", + "@oddbird/css-anchor-positioning": "^0.9.0", "@oddbird/popover-polyfill": "^0.5.2", "@primer/behaviors": "^1.10.2", "@primer/live-region-element": "^0.7.1",