Skip to content

Repository navigation

Add Metadata for tokens - #1300

Merged
lukasoppermann merged 3 commits into
mainfrom
metadata
Jan 28, 2026
Merged

Add Metadata for tokens#1300
lukasoppermann merged 3 commits into
mainfrom
metadata

Conversation

@lukasoppermann

@lukasoppermann lukasoppermann commented Jan 28, 2026

Copy link
Copy Markdown
Collaborator
  • size tokens
  • control colors
  • borders

@lukasoppermann
lukasoppermann requested review from a team as code owners January 28, 2026 08:13
@lukasoppermann
lukasoppermann requested review from Copilot and jonrohan and removed request for Copilot January 28, 2026 08:13
@changeset-bot

changeset-bot Bot commented Jan 28, 2026

Copy link
Copy Markdown

🦋 Changeset detected

Latest commit: e7b4b4b

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

@github-actions

github-actions Bot commented Jan 28, 2026

Copy link
Copy Markdown
Contributor

Design Token Diff (CSS)

/css/functional/themes/dark-colorblind-high-contrast.css

 
+++ /home/runner/work/primitives/primitives/dist/css/functional/themes/dark-colorblind-high-contrast.css	2026-01-28 08:14:43.359436522 +0000
@@ -868,7 +868,7 @@
 --diffBlob-expander-iconColor: var(--fgColor-default);
 --diffBlob-hunkNum-fgColor-hover: var(--fgColor-onEmphasis);
 --diffBlob-hunkNum-fgColor-rest: var(--fgColor-default);
-  --focus-outline: 2px solid #409eff;
+  --focus-outline: 2px solid #409eff; /** Focus ring outline for keyboard navigation and accessibility. */
 --page-header-bgColor: var(--bgColor-default);
 --progressBar-track-bgColor: var(--bgColor-inverse);
 --shadow-floating-large: 0px 0px 0px 1px #b7bdc8, 0px 24px 48px 0px #010409; /** Large floating shadow for modals and dialogs */
@@ -1765,7 +1765,7 @@
   --diffBlob-expander-iconColor: var(--fgColor-default);
   --diffBlob-hunkNum-fgColor-hover: var(--fgColor-onEmphasis);
   --diffBlob-hunkNum-fgColor-rest: var(--fgColor-default);
-    --focus-outline: 2px solid #409eff;
+    --focus-outline: 2px solid #409eff; /** Focus ring outline for keyboard navigation and accessibility. */
   --page-header-bgColor: var(--bgColor-default);
   --progressBar-track-bgColor: var(--bgColor-inverse);
   --shadow-floating-large: 0px 0px 0px 1px #b7bdc8, 0px 24px 48px 0px #010409; /** Large floating shadow for modals and dialogs */

/css/functional/themes/dark-colorblind.css

 
+++ /home/runner/work/primitives/primitives/dist/css/functional/themes/dark-colorblind.css	2026-01-28 08:14:41.772460142 +0000
@@ -874,7 +874,7 @@
 --controlTrack-fgColor-disabled: var(--fgColor-onEmphasis);
 --dashboard-bgColor: var(--bgColor-inset);
 --diffBlob-hunkNum-fgColor-hover: var(--fgColor-onEmphasis);
-  --focus-outline: 2px solid #1f6feb;
+  --focus-outline: 2px solid #1f6feb; /** Focus ring outline for keyboard navigation and accessibility. */
 --overlay-borderColor: var(--borderColor-muted);
 --tooltip-fgColor: var(--fgColor-onEmphasis);
 --border-neutral-muted: 0.0625rem solid #3d444db3;
@@ -1771,7 +1771,7 @@
   --controlTrack-fgColor-disabled: var(--fgColor-onEmphasis);
   --dashboard-bgColor: var(--bgColor-inset);
   --diffBlob-hunkNum-fgColor-hover: var(--fgColor-onEmphasis);
-    --focus-outline: 2px solid #1f6feb;
+    --focus-outline: 2px solid #1f6feb; /** Focus ring outline for keyboard navigation and accessibility. */
   --overlay-borderColor: var(--borderColor-muted);
   --tooltip-fgColor: var(--fgColor-onEmphasis);
   --border-neutral-muted: 0.0625rem solid #3d444db3;

/css/functional/themes/dark-dimmed-high-contrast.css

 
+++ /home/runner/work/primitives/primitives/dist/css/functional/themes/dark-dimmed-high-contrast.css	2026-01-28 08:14:36.924532266 +0000
@@ -871,7 +871,7 @@
 --controlKnob-borderColor-checked: var(--control-checked-bgColor-rest);
 --controlKnob-borderColor-disabled: var(--control-bgColor-disabled);
 --controlTrack-borderColor-rest: var(--borderColor-emphasis);
-  --focus-outline: 2px solid #6cb6ff;
+  --focus-outline: 2px solid #6cb6ff; /** Focus ring outline for keyboard navigation and accessibility. */
 --progressBar-track-bgColor: var(--bgColor-inverse);
 --reactionButton-selected-fgColor-rest: var(--fgColor-link);
 --shadow-floating-large: 0px 0px 0px 1px #b7bdc8, 0px 24px 48px 0px #010409; /** Large floating shadow for modals and dialogs */
@@ -1768,7 +1768,7 @@
   --controlKnob-borderColor-checked: var(--control-checked-bgColor-rest);
   --controlKnob-borderColor-disabled: var(--control-bgColor-disabled);
   --controlTrack-borderColor-rest: var(--borderColor-emphasis);
-    --focus-outline: 2px solid #6cb6ff;
+    --focus-outline: 2px solid #6cb6ff; /** Focus ring outline for keyboard navigation and accessibility. */
   --progressBar-track-bgColor: var(--bgColor-inverse);
   --reactionButton-selected-fgColor-rest: var(--fgColor-link);
   --shadow-floating-large: 0px 0px 0px 1px #b7bdc8, 0px 24px 48px 0px #010409; /** Large floating shadow for modals and dialogs */

/css/functional/themes/dark-dimmed.css

 
+++ /home/runner/work/primitives/primitives/dist/css/functional/themes/dark-dimmed.css	2026-01-28 08:14:35.156558549 +0000
@@ -887,7 +887,7 @@
 --controlKnob-bgColor-disabled: var(--control-bgColor-disabled);
 --controlKnob-borderColor-checked: var(--control-checked-bgColor-rest);
 --controlKnob-borderColor-disabled: var(--control-bgColor-disabled);
-  --focus-outline: 2px solid #316dca;
+  --focus-outline: 2px solid #316dca; /** Focus ring outline for keyboard navigation and accessibility. */
 --button-danger-borderColor-hover: var(--button-primary-borderColor-rest);
 --button-outline-borderColor-active: var(--button-outline-borderColor-hover);
 --button-primary-borderColor-active: var(--button-primary-borderColor-rest);
@@ -1784,7 +1784,7 @@
   --controlKnob-bgColor-disabled: var(--control-bgColor-disabled);
   --controlKnob-borderColor-checked: var(--control-checked-bgColor-rest);
   --controlKnob-borderColor-disabled: var(--control-bgColor-disabled);
-    --focus-outline: 2px solid #316dca;
+    --focus-outline: 2px solid #316dca; /** Focus ring outline for keyboard navigation and accessibility. */
   --button-danger-borderColor-hover: var(--button-primary-borderColor-rest);
   --button-outline-borderColor-active: var(--button-outline-borderColor-hover);
   --button-primary-borderColor-active: var(--button-primary-borderColor-rest);

/css/functional/themes/dark-high-contrast.css

 
+++ /home/runner/work/primitives/primitives/dist/css/functional/themes/dark-high-contrast.css	2026-01-28 08:14:44.960412694 +0000
@@ -867,7 +867,7 @@
 --diffBlob-expander-iconColor: var(--fgColor-default);
 --diffBlob-hunkNum-fgColor-hover: var(--fgColor-onEmphasis);
 --diffBlob-hunkNum-fgColor-rest: var(--fgColor-default);
-  --focus-outline: 2px solid #409eff;
+  --focus-outline: 2px solid #409eff; /** Focus ring outline for keyboard navigation and accessibility. */
 --page-header-bgColor: var(--bgColor-default);
 --progressBar-track-bgColor: var(--bgColor-inverse);
 --shadow-floating-large: 0px 0px 0px 1px #b7bdc8, 0px 24px 48px 0px #010409; /** Large floating shadow for modals and dialogs */
@@ -1764,7 +1764,7 @@
   --diffBlob-expander-iconColor: var(--fgColor-default);
   --diffBlob-hunkNum-fgColor-hover: var(--fgColor-onEmphasis);
   --diffBlob-hunkNum-fgColor-rest: var(--fgColor-default);
-    --focus-outline: 2px solid #409eff;
+    --focus-outline: 2px solid #409eff; /** Focus ring outline for keyboard navigation and accessibility. */
   --page-header-bgColor: var(--bgColor-default);
   --progressBar-track-bgColor: var(--bgColor-inverse);
   --shadow-floating-large: 0px 0px 0px 1px #b7bdc8, 0px 24px 48px 0px #010409; /** Large floating shadow for modals and dialogs */

/css/functional/themes/dark-tritanopia-high-contrast.css

 
+++ /home/runner/work/primitives/primitives/dist/css/functional/themes/dark-tritanopia-high-contrast.css	2026-01-28 08:14:40.138484461 +0000
@@ -868,7 +868,7 @@
 --diffBlob-expander-iconColor: var(--fgColor-default);
 --diffBlob-hunkNum-fgColor-hover: var(--fgColor-onEmphasis);
 --diffBlob-hunkNum-fgColor-rest: var(--fgColor-default);
-  --focus-outline: 2px solid #409eff;
+  --focus-outline: 2px solid #409eff; /** Focus ring outline for keyboard navigation and accessibility. */
 --page-header-bgColor: var(--bgColor-default);
 --progressBar-track-bgColor: var(--bgColor-inverse);
 --shadow-floating-large: 0px 0px 0px 1px #b7bdc8, 0px 24px 48px 0px #010409; /** Large floating shadow for modals and dialogs */
@@ -1765,7 +1765,7 @@
   --diffBlob-expander-iconColor: var(--fgColor-default);
   --diffBlob-hunkNum-fgColor-hover: var(--fgColor-onEmphasis);
   --diffBlob-hunkNum-fgColor-rest: var(--fgColor-default);
-    --focus-outline: 2px solid #409eff;
+    --focus-outline: 2px solid #409eff; /** Focus ring outline for keyboard navigation and accessibility. */
   --page-header-bgColor: var(--bgColor-default);
   --progressBar-track-bgColor: var(--bgColor-inverse);
   --shadow-floating-large: 0px 0px 0px 1px #b7bdc8, 0px 24px 48px 0px #010409; /** Large floating shadow for modals and dialogs */

/css/functional/themes/dark-tritanopia.css

 
+++ /home/runner/work/primitives/primitives/dist/css/functional/themes/dark-tritanopia.css	2026-01-28 08:14:38.548508124 +0000
@@ -874,7 +874,7 @@
 --controlTrack-fgColor-disabled: var(--fgColor-onEmphasis);
 --dashboard-bgColor: var(--bgColor-inset);
 --diffBlob-hunkNum-fgColor-hover: var(--fgColor-onEmphasis);
-  --focus-outline: 2px solid #1f6feb;
+  --focus-outline: 2px solid #1f6feb; /** Focus ring outline for keyboard navigation and accessibility. */
 --overlay-borderColor: var(--borderColor-muted);
 --tooltip-fgColor: var(--fgColor-onEmphasis);
 --border-neutral-muted: 0.0625rem solid #3d444db3;
@@ -1771,7 +1771,7 @@
   --controlTrack-fgColor-disabled: var(--fgColor-onEmphasis);
   --dashboard-bgColor: var(--bgColor-inset);
   --diffBlob-hunkNum-fgColor-hover: var(--fgColor-onEmphasis);
-    --focus-outline: 2px solid #1f6feb;
+    --focus-outline: 2px solid #1f6feb; /** Focus ring outline for keyboard navigation and accessibility. */
   --overlay-borderColor: var(--borderColor-muted);
   --tooltip-fgColor: var(--fgColor-onEmphasis);
   --border-neutral-muted: 0.0625rem solid #3d444db3;

/css/functional/themes/dark.css

 
+++ /home/runner/work/primitives/primitives/dist/css/functional/themes/dark.css	2026-01-28 08:14:33.587586401 +0000
@@ -873,7 +873,7 @@
 --controlTrack-fgColor-disabled: var(--fgColor-onEmphasis);
 --dashboard-bgColor: var(--bgColor-inset);
 --diffBlob-hunkNum-fgColor-hover: var(--fgColor-onEmphasis);
-  --focus-outline: 2px solid #1f6feb;
+  --focus-outline: 2px solid #1f6feb; /** Focus ring outline for keyboard navigation and accessibility. */
 --overlay-borderColor: var(--borderColor-muted);
 --tooltip-fgColor: var(--fgColor-onEmphasis);
 --border-neutral-muted: 0.0625rem solid #3d444db3;
@@ -1770,7 +1770,7 @@
   --controlTrack-fgColor-disabled: var(--fgColor-onEmphasis);
   --dashboard-bgColor: var(--bgColor-inset);
   --diffBlob-hunkNum-fgColor-hover: var(--fgColor-onEmphasis);
-    --focus-outline: 2px solid #1f6feb;
+    --focus-outline: 2px solid #1f6feb; /** Focus ring outline for keyboard navigation and accessibility. */
   --overlay-borderColor: var(--borderColor-muted);
   --tooltip-fgColor: var(--fgColor-onEmphasis);
   --border-neutral-muted: 0.0625rem solid #3d444db3;

/css/functional/themes/light-colorblind-high-contrast.css

 
+++ /home/runner/work/primitives/primitives/dist/css/functional/themes/light-colorblind-high-contrast.css	2026-01-28 08:14:30.367647447 +0000
@@ -879,7 +879,7 @@
 --diffBlob-expander-iconColor: var(--fgColor-default);
 --diffBlob-hunkNum-fgColor-hover: var(--fgColor-default);
 --diffBlob-hunkNum-fgColor-rest: var(--fgColor-default);
-  --focus-outline: 2px solid #0349b4;
+  --focus-outline: 2px solid #0349b4; /** Focus ring outline for keyboard navigation and accessibility. */
 --progressBar-track-bgColor: var(--bgColor-default);
 --reactionButton-selected-fgColor-rest: var(--fgColor-link);
 --shadow-floating-large: 0px 0px 0px 1px #454c54, 0px 40px 80px 0px #25292e3d; /** Large floating shadow for modals and dialogs */
@@ -1776,7 +1776,7 @@
   --diffBlob-expander-iconColor: var(--fgColor-default);
   --diffBlob-hunkNum-fgColor-hover: var(--fgColor-default);
   --diffBlob-hunkNum-fgColor-rest: var(--fgColor-default);
-    --focus-outline: 2px solid #0349b4;
+    --focus-outline: 2px solid #0349b4; /** Focus ring outline for keyboard navigation and accessibility. */
   --progressBar-track-bgColor: var(--bgColor-default);
   --reactionButton-selected-fgColor-rest: var(--fgColor-link);
   --shadow-floating-large: 0px 0px 0px 1px #454c54, 0px 40px 80px 0px #25292e3d; /** Large floating shadow for modals and dialogs */

/css/functional/themes/light-colorblind.css

 
+++ /home/runner/work/primitives/primitives/dist/css/functional/themes/light-colorblind.css	2026-01-28 08:14:28.780669263 +0000
@@ -873,7 +873,7 @@
 --diffBlob-deletionWord-fgColor: var(--fgColor-default);
 --diffBlob-hunkNum-fgColor-hover: var(--fgColor-default);
 --diffBlob-hunkNum-fgColor-rest: var(--fgColor-default);
-  --focus-outline: 2px solid #0969da;
+  --focus-outline: 2px solid #0969da; /** Focus ring outline for keyboard navigation and accessibility. */
 --overlay-borderColor: #d1d9e080;
 --reactionButton-selected-fgColor-rest: var(--fgColor-link);
 --tooltip-fgColor: var(--fgColor-onEmphasis);
@@ -1770,7 +1770,7 @@
   --diffBlob-deletionWord-fgColor: var(--fgColor-default);
   --diffBlob-hunkNum-fgColor-hover: var(--fgColor-default);
   --diffBlob-hunkNum-fgColor-rest: var(--fgColor-default);
-    --focus-outline: 2px solid #0969da;
+    --focus-outline: 2px solid #0969da; /** Focus ring outline for keyboard navigation and accessibility. */
   --overlay-borderColor: #d1d9e080;
   --reactionButton-selected-fgColor-rest: var(--fgColor-link);
   --tooltip-fgColor: var(--fgColor-onEmphasis);

/css/functional/themes/light-high-contrast.css

 
+++ /home/runner/work/primitives/primitives/dist/css/functional/themes/light-high-contrast.css	2026-01-28 08:14:32.000617294 +0000
@@ -878,7 +878,7 @@
 --diffBlob-expander-iconColor: var(--fgColor-default);
 --diffBlob-hunkNum-fgColor-hover: var(--fgColor-onEmphasis);
 --diffBlob-hunkNum-fgColor-rest: var(--fgColor-default);
-  --focus-outline: 2px solid #0349b4;
+  --focus-outline: 2px solid #0349b4; /** Focus ring outline for keyboard navigation and accessibility. */
 --progressBar-track-bgColor: var(--bgColor-default);
 --reactionButton-selected-fgColor-rest: var(--fgColor-link);
 --shadow-floating-large: 0px 0px 0px 1px #454c54, 0px 40px 80px 0px #25292e3d; /** Large floating shadow for modals and dialogs */
@@ -1775,7 +1775,7 @@
   --diffBlob-expander-iconColor: var(--fgColor-default);
   --diffBlob-hunkNum-fgColor-hover: var(--fgColor-onEmphasis);
   --diffBlob-hunkNum-fgColor-rest: var(--fgColor-default);
-    --focus-outline: 2px solid #0349b4;
+    --focus-outline: 2px solid #0349b4; /** Focus ring outline for keyboard navigation and accessibility. */
   --progressBar-track-bgColor: var(--bgColor-default);
   --reactionButton-selected-fgColor-rest: var(--fgColor-link);
   --shadow-floating-large: 0px 0px 0px 1px #454c54, 0px 40px 80px 0px #25292e3d; /** Large floating shadow for modals and dialogs */

/css/functional/themes/light-tritanopia-high-contrast.css

 
+++ /home/runner/work/primitives/primitives/dist/css/functional/themes/light-tritanopia-high-contrast.css	2026-01-28 08:14:27.101692343 +0000
@@ -879,7 +879,7 @@
 --diffBlob-expander-iconColor: var(--fgColor-default);
 --diffBlob-hunkNum-fgColor-hover: var(--fgColor-default);
 --diffBlob-hunkNum-fgColor-rest: var(--fgColor-default);
-  --focus-outline: 2px solid #0349b4;
+  --focus-outline: 2px solid #0349b4; /** Focus ring outline for keyboard navigation and accessibility. */
 --progressBar-track-bgColor: var(--bgColor-default);
 --reactionButton-selected-fgColor-rest: var(--fgColor-link);
 --shadow-floating-large: 0px 0px 0px 1px #454c54, 0px 40px 80px 0px #25292e3d; /** Large floating shadow for modals and dialogs */
@@ -1776,7 +1776,7 @@
   --diffBlob-expander-iconColor: var(--fgColor-default);
   --diffBlob-hunkNum-fgColor-hover: var(--fgColor-default);
   --diffBlob-hunkNum-fgColor-rest: var(--fgColor-default);
-    --focus-outline: 2px solid #0349b4;
+    --focus-outline: 2px solid #0349b4; /** Focus ring outline for keyboard navigation and accessibility. */
   --progressBar-track-bgColor: var(--bgColor-default);
   --reactionButton-selected-fgColor-rest: var(--fgColor-link);
   --shadow-floating-large: 0px 0px 0px 1px #454c54, 0px 40px 80px 0px #25292e3d; /** Large floating shadow for modals and dialogs */

/css/functional/themes/light-tritanopia.css

 
+++ /home/runner/work/primitives/primitives/dist/css/functional/themes/light-tritanopia.css	2026-01-28 08:14:25.483714584 +0000
@@ -873,7 +873,7 @@
 --diffBlob-deletionWord-fgColor: var(--fgColor-default);
 --diffBlob-hunkNum-fgColor-hover: var(--fgColor-default);
 --diffBlob-hunkNum-fgColor-rest: var(--fgColor-default);
-  --focus-outline: 2px solid #0969da;
+  --focus-outline: 2px solid #0969da; /** Focus ring outline for keyboard navigation and accessibility. */
 --overlay-borderColor: #d1d9e080;
 --reactionButton-selected-fgColor-rest: var(--fgColor-link);
 --tooltip-fgColor: var(--fgColor-onEmphasis);
@@ -1770,7 +1770,7 @@
   --diffBlob-deletionWord-fgColor: var(--fgColor-default);
   --diffBlob-hunkNum-fgColor-hover: var(--fgColor-default);
   --diffBlob-hunkNum-fgColor-rest: var(--fgColor-default);
-    --focus-outline: 2px solid #0969da;
+    --focus-outline: 2px solid #0969da; /** Focus ring outline for keyboard navigation and accessibility. */
   --overlay-borderColor: #d1d9e080;
   --reactionButton-selected-fgColor-rest: var(--fgColor-link);
   --tooltip-fgColor: var(--fgColor-onEmphasis);

/css/functional/themes/light.css

 
+++ /home/runner/work/primitives/primitives/dist/css/functional/themes/light.css	2026-01-28 08:14:22.314879634 +0000
@@ -872,7 +872,7 @@
 --diffBlob-deletionWord-fgColor: var(--fgColor-default);
 --diffBlob-hunkNum-fgColor-hover: var(--fgColor-onEmphasis);
 --diffBlob-hunkNum-fgColor-rest: var(--fgColor-default);
-  --focus-outline: 2px solid #0969da;
+  --focus-outline: 2px solid #0969da; /** Focus ring outline for keyboard navigation and accessibility. */
 --overlay-borderColor: #d1d9e080;
 --reactionButton-selected-fgColor-rest: var(--fgColor-link);
 --tooltip-fgColor: var(--fgColor-onEmphasis);
@@ -1769,7 +1769,7 @@
   --diffBlob-deletionWord-fgColor: var(--fgColor-default);
   --diffBlob-hunkNum-fgColor-hover: var(--fgColor-onEmphasis);
   --diffBlob-hunkNum-fgColor-rest: var(--fgColor-default);
-    --focus-outline: 2px solid #0969da;
+    --focus-outline: 2px solid #0969da; /** Focus ring outline for keyboard navigation and accessibility. */
   --overlay-borderColor: #d1d9e080;
   --reactionButton-selected-fgColor-rest: var(--fgColor-link);
   --tooltip-fgColor: var(--fgColor-onEmphasis);

@github-actions

github-actions Bot commented Jan 28, 2026

Copy link
Copy Markdown
Contributor

Design Token Diff (StyleLint)

/styleLint/functional/themes/dark-colorblind-high-contrast.json

 
+++ /home/runner/work/primitives/primitives/dist/styleLint/functional/themes/dark-colorblind-high-contrast.json	2026-01-28 08:14:43.361436493 +0000
@@ -38273,6 +38273,13 @@
   "key": "{focus.outline}",
   "$value": "2px solid #409eff",
   "$type": "border",
+    "$description": "Focus ring outline for keyboard navigation and accessibility.",
+    "$extensions": {
+      "org.primer.llm": {
+        "usage": ["focus-ring", "keyboard-navigation", "accessibility-indicator"],
+        "rules": "Always ensure focus states are visible. Do not override with custom focus styles that reduce visibility. Use for interactive elements like buttons, links, and form controls."
+      }
+    },
   "filePath": "src/tokens/functional/border/border.json5",
   "isSource": true,
   "original": {
@@ -38282,6 +38289,13 @@
       "width": "2px"
     },
     "$type": "border",
+      "$description": "Focus ring outline for keyboard navigation and accessibility.",
+      "$extensions": {
+        "org.primer.llm": {
+          "usage": ["focus-ring", "keyboard-navigation", "accessibility-indicator"],
+          "rules": "Always ensure focus states are visible. Do not override with custom focus styles that reduce visibility. Use for interactive elements like buttons, links, and form controls."
+        }
+      },
     "key": "{focus.outline}"
   },
   "name": "focus-outline",

/styleLint/functional/themes/dark-colorblind.json

 
+++ /home/runner/work/primitives/primitives/dist/styleLint/functional/themes/dark-colorblind.json	2026-01-28 08:14:41.774460112 +0000
@@ -38273,6 +38273,13 @@
   "key": "{focus.outline}",
   "$value": "2px solid #1f6feb",
   "$type": "border",
+    "$description": "Focus ring outline for keyboard navigation and accessibility.",
+    "$extensions": {
+      "org.primer.llm": {
+        "usage": ["focus-ring", "keyboard-navigation", "accessibility-indicator"],
+        "rules": "Always ensure focus states are visible. Do not override with custom focus styles that reduce visibility. Use for interactive elements like buttons, links, and form controls."
+      }
+    },
   "filePath": "src/tokens/functional/border/border.json5",
   "isSource": true,
   "original": {
@@ -38282,6 +38289,13 @@
       "width": "2px"
     },
     "$type": "border",
+      "$description": "Focus ring outline for keyboard navigation and accessibility.",
+      "$extensions": {
+        "org.primer.llm": {
+          "usage": ["focus-ring", "keyboard-navigation", "accessibility-indicator"],
+          "rules": "Always ensure focus states are visible. Do not override with custom focus styles that reduce visibility. Use for interactive elements like buttons, links, and form controls."
+        }
+      },
     "key": "{focus.outline}"
   },
   "name": "focus-outline",

/styleLint/functional/themes/dark-dimmed-high-contrast.json

 
+++ /home/runner/work/primitives/primitives/dist/styleLint/functional/themes/dark-dimmed-high-contrast.json	2026-01-28 08:14:36.926532236 +0000
@@ -38263,6 +38263,13 @@
   "key": "{focus.outline}",
   "$value": "2px solid #6cb6ff",
   "$type": "border",
+    "$description": "Focus ring outline for keyboard navigation and accessibility.",
+    "$extensions": {
+      "org.primer.llm": {
+        "usage": ["focus-ring", "keyboard-navigation", "accessibility-indicator"],
+        "rules": "Always ensure focus states are visible. Do not override with custom focus styles that reduce visibility. Use for interactive elements like buttons, links, and form controls."
+      }
+    },
   "filePath": "src/tokens/functional/border/border.json5",
   "isSource": true,
   "original": {
@@ -38272,6 +38279,13 @@
       "width": "2px"
     },
     "$type": "border",
+      "$description": "Focus ring outline for keyboard navigation and accessibility.",
+      "$extensions": {
+        "org.primer.llm": {
+          "usage": ["focus-ring", "keyboard-navigation", "accessibility-indicator"],
+          "rules": "Always ensure focus states are visible. Do not override with custom focus styles that reduce visibility. Use for interactive elements like buttons, links, and form controls."
+        }
+      },
     "key": "{focus.outline}"
   },
   "name": "focus-outline",

/styleLint/functional/themes/dark-dimmed.json

 
+++ /home/runner/work/primitives/primitives/dist/styleLint/functional/themes/dark-dimmed.json	2026-01-28 08:14:35.157558534 +0000
@@ -38263,6 +38263,13 @@
   "key": "{focus.outline}",
   "$value": "2px solid #316dca",
   "$type": "border",
+    "$description": "Focus ring outline for keyboard navigation and accessibility.",
+    "$extensions": {
+      "org.primer.llm": {
+        "usage": ["focus-ring", "keyboard-navigation", "accessibility-indicator"],
+        "rules": "Always ensure focus states are visible. Do not override with custom focus styles that reduce visibility. Use for interactive elements like buttons, links, and form controls."
+      }
+    },
   "filePath": "src/tokens/functional/border/border.json5",
   "isSource": true,
   "original": {
@@ -38272,6 +38279,13 @@
       "width": "2px"
     },
     "$type": "border",
+      "$description": "Focus ring outline for keyboard navigation and accessibility.",
+      "$extensions": {
+        "org.primer.llm": {
+          "usage": ["focus-ring", "keyboard-navigation", "accessibility-indicator"],
+          "rules": "Always ensure focus states are visible. Do not override with custom focus styles that reduce visibility. Use for interactive elements like buttons, links, and form controls."
+        }
+      },
     "key": "{focus.outline}"
   },
   "name": "focus-outline",

/styleLint/functional/themes/dark-high-contrast.json

 
+++ /home/runner/work/primitives/primitives/dist/styleLint/functional/themes/dark-high-contrast.json	2026-01-28 08:14:44.978412426 +0000
@@ -38269,6 +38269,13 @@
   "key": "{focus.outline}",
   "$value": "2px solid #409eff",
   "$type": "border",
+    "$description": "Focus ring outline for keyboard navigation and accessibility.",
+    "$extensions": {
+      "org.primer.llm": {
+        "usage": ["focus-ring", "keyboard-navigation", "accessibility-indicator"],
+        "rules": "Always ensure focus states are visible. Do not override with custom focus styles that reduce visibility. Use for interactive elements like buttons, links, and form controls."
+      }
+    },
   "filePath": "src/tokens/functional/border/border.json5",
   "isSource": true,
   "original": {
@@ -38278,6 +38285,13 @@
       "width": "2px"
     },
     "$type": "border",
+      "$description": "Focus ring outline for keyboard navigation and accessibility.",
+      "$extensions": {
+        "org.primer.llm": {
+          "usage": ["focus-ring", "keyboard-navigation", "accessibility-indicator"],
+          "rules": "Always ensure focus states are visible. Do not override with custom focus styles that reduce visibility. Use for interactive elements like buttons, links, and form controls."
+        }
+      },
     "key": "{focus.outline}"
   },
   "name": "focus-outline",

/styleLint/functional/themes/dark-tritanopia-high-contrast.json

 
+++ /home/runner/work/primitives/primitives/dist/styleLint/functional/themes/dark-tritanopia-high-contrast.json	2026-01-28 08:14:40.139484446 +0000
@@ -38269,6 +38269,13 @@
   "key": "{focus.outline}",
   "$value": "2px solid #409eff",
   "$type": "border",
+    "$description": "Focus ring outline for keyboard navigation and accessibility.",
+    "$extensions": {
+      "org.primer.llm": {
+        "usage": ["focus-ring", "keyboard-navigation", "accessibility-indicator"],
+        "rules": "Always ensure focus states are visible. Do not override with custom focus styles that reduce visibility. Use for interactive elements like buttons, links, and form controls."
+      }
+    },
   "filePath": "src/tokens/functional/border/border.json5",
   "isSource": true,
   "original": {
@@ -38278,6 +38285,13 @@
       "width": "2px"
     },
     "$type": "border",
+      "$description": "Focus ring outline for keyboard navigation and accessibility.",
+      "$extensions": {
+        "org.primer.llm": {
+          "usage": ["focus-ring", "keyboard-navigation", "accessibility-indicator"],
+          "rules": "Always ensure focus states are visible. Do not override with custom focus styles that reduce visibility. Use for interactive elements like buttons, links, and form controls."
+        }
+      },
     "key": "{focus.outline}"
   },
   "name": "focus-outline",

/styleLint/functional/themes/dark-tritanopia.json

 
+++ /home/runner/work/primitives/primitives/dist/styleLint/functional/themes/dark-tritanopia.json	2026-01-28 08:14:38.550508094 +0000
@@ -38271,6 +38271,13 @@
   "key": "{focus.outline}",
   "$value": "2px solid #1f6feb",
   "$type": "border",
+    "$description": "Focus ring outline for keyboard navigation and accessibility.",
+    "$extensions": {
+      "org.primer.llm": {
+        "usage": ["focus-ring", "keyboard-navigation", "accessibility-indicator"],
+        "rules": "Always ensure focus states are visible. Do not override with custom focus styles that reduce visibility. Use for interactive elements like buttons, links, and form controls."
+      }
+    },
   "filePath": "src/tokens/functional/border/border.json5",
   "isSource": true,
   "original": {
@@ -38280,6 +38287,13 @@
       "width": "2px"
     },
     "$type": "border",
+      "$description": "Focus ring outline for keyboard navigation and accessibility.",
+      "$extensions": {
+        "org.primer.llm": {
+          "usage": ["focus-ring", "keyboard-navigation", "accessibility-indicator"],
+          "rules": "Always ensure focus states are visible. Do not override with custom focus styles that reduce visibility. Use for interactive elements like buttons, links, and form controls."
+        }
+      },
     "key": "{focus.outline}"
   },
   "name": "focus-outline",

/styleLint/functional/themes/dark.json

 
+++ /home/runner/work/primitives/primitives/dist/styleLint/functional/themes/dark.json	2026-01-28 08:14:33.588586382 +0000
@@ -38259,6 +38259,13 @@
   "key": "{focus.outline}",
   "$value": "2px solid #1f6feb",
   "$type": "border",
+    "$description": "Focus ring outline for keyboard navigation and accessibility.",
+    "$extensions": {
+      "org.primer.llm": {
+        "usage": ["focus-ring", "keyboard-navigation", "accessibility-indicator"],
+        "rules": "Always ensure focus states are visible. Do not override with custom focus styles that reduce visibility. Use for interactive elements like buttons, links, and form controls."
+      }
+    },
   "filePath": "src/tokens/functional/border/border.json5",
   "isSource": true,
   "original": {
@@ -38268,6 +38275,13 @@
       "width": "2px"
     },
     "$type": "border",
+      "$description": "Focus ring outline for keyboard navigation and accessibility.",
+      "$extensions": {
+        "org.primer.llm": {
+          "usage": ["focus-ring", "keyboard-navigation", "accessibility-indicator"],
+          "rules": "Always ensure focus states are visible. Do not override with custom focus styles that reduce visibility. Use for interactive elements like buttons, links, and form controls."
+        }
+      },
     "key": "{focus.outline}"
   },
   "name": "focus-outline",

/styleLint/functional/themes/light-colorblind-high-contrast.json

 
+++ /home/runner/work/primitives/primitives/dist/styleLint/functional/themes/light-colorblind-high-contrast.json	2026-01-28 08:14:30.369647420 +0000
@@ -38239,6 +38239,13 @@
   "key": "{focus.outline}",
   "$value": "2px solid #0349b4",
   "$type": "border",
+    "$description": "Focus ring outline for keyboard navigation and accessibility.",
+    "$extensions": {
+      "org.primer.llm": {
+        "usage": ["focus-ring", "keyboard-navigation", "accessibility-indicator"],
+        "rules": "Always ensure focus states are visible. Do not override with custom focus styles that reduce visibility. Use for interactive elements like buttons, links, and form controls."
+      }
+    },
   "filePath": "src/tokens/functional/border/border.json5",
   "isSource": true,
   "original": {
@@ -38248,6 +38255,13 @@
       "width": "2px"
     },
     "$type": "border",
+      "$description": "Focus ring outline for keyboard navigation and accessibility.",
+      "$extensions": {
+        "org.primer.llm": {
+          "usage": ["focus-ring", "keyboard-navigation", "accessibility-indicator"],
+          "rules": "Always ensure focus states are visible. Do not override with custom focus styles that reduce visibility. Use for interactive elements like buttons, links, and form controls."
+        }
+      },
     "key": "{focus.outline}"
   },
   "name": "focus-outline",

/styleLint/functional/themes/light-colorblind.json

 
+++ /home/runner/work/primitives/primitives/dist/styleLint/functional/themes/light-colorblind.json	2026-01-28 08:14:28.781669249 +0000
@@ -38237,6 +38237,13 @@
   "key": "{focus.outline}",
   "$value": "2px solid #0969da",
   "$type": "border",
+    "$description": "Focus ring outline for keyboard navigation and accessibility.",
+    "$extensions": {
+      "org.primer.llm": {
+        "usage": ["focus-ring", "keyboard-navigation", "accessibility-indicator"],
+        "rules": "Always ensure focus states are visible. Do not override with custom focus styles that reduce visibility. Use for interactive elements like buttons, links, and form controls."
+      }
+    },
   "filePath": "src/tokens/functional/border/border.json5",
   "isSource": true,
   "original": {
@@ -38246,6 +38253,13 @@
       "width": "2px"
     },
     "$type": "border",
+      "$description": "Focus ring outline for keyboard navigation and accessibility.",
+      "$extensions": {
+        "org.primer.llm": {
+          "usage": ["focus-ring", "keyboard-navigation", "accessibility-indicator"],
+          "rules": "Always ensure focus states are visible. Do not override with custom focus styles that reduce visibility. Use for interactive elements like buttons, links, and form controls."
+        }
+      },
     "key": "{focus.outline}"
   },
   "name": "focus-outline",

/styleLint/functional/themes/light-high-contrast.json

 
+++ /home/runner/work/primitives/primitives/dist/styleLint/functional/themes/light-high-contrast.json	2026-01-28 08:14:32.002617255 +0000
@@ -38233,6 +38233,13 @@
   "key": "{focus.outline}",
   "$value": "2px solid #0349b4",
   "$type": "border",
+    "$description": "Focus ring outline for keyboard navigation and accessibility.",
+    "$extensions": {
+      "org.primer.llm": {
+        "usage": ["focus-ring", "keyboard-navigation", "accessibility-indicator"],
+        "rules": "Always ensure focus states are visible. Do not override with custom focus styles that reduce visibility. Use for interactive elements like buttons, links, and form controls."
+      }
+    },
   "filePath": "src/tokens/functional/border/border.json5",
   "isSource": true,
   "original": {
@@ -38242,6 +38249,13 @@
       "width": "2px"
     },
     "$type": "border",
+      "$description": "Focus ring outline for keyboard navigation and accessibility.",
+      "$extensions": {
+        "org.primer.llm": {
+          "usage": ["focus-ring", "keyboard-navigation", "accessibility-indicator"],
+          "rules": "Always ensure focus states are visible. Do not override with custom focus styles that reduce visibility. Use for interactive elements like buttons, links, and form controls."
+        }
+      },
     "key": "{focus.outline}"
   },
   "name": "focus-outline",

/styleLint/functional/themes/light-tritanopia-high-contrast.json

 
+++ /home/runner/work/primitives/primitives/dist/styleLint/functional/themes/light-tritanopia-high-contrast.json	2026-01-28 08:14:27.103692315 +0000
@@ -38239,6 +38239,13 @@
   "key": "{focus.outline}",
   "$value": "2px solid #0349b4",
   "$type": "border",
+    "$description": "Focus ring outline for keyboard navigation and accessibility.",
+    "$extensions": {
+      "org.primer.llm": {
+        "usage": ["focus-ring", "keyboard-navigation", "accessibility-indicator"],
+        "rules": "Always ensure focus states are visible. Do not override with custom focus styles that reduce visibility. Use for interactive elements like buttons, links, and form controls."
+      }
+    },
   "filePath": "src/tokens/functional/border/border.json5",
   "isSource": true,
   "original": {
@@ -38248,6 +38255,13 @@
       "width": "2px"
     },
     "$type": "border",
+      "$description": "Focus ring outline for keyboard navigation and accessibility.",
+      "$extensions": {
+        "org.primer.llm": {
+          "usage": ["focus-ring", "keyboard-navigation", "accessibility-indicator"],
+          "rules": "Always ensure focus states are visible. Do not override with custom focus styles that reduce visibility. Use for interactive elements like buttons, links, and form controls."
+        }
+      },
     "key": "{focus.outline}"
   },
   "name": "focus-outline",

/styleLint/functional/themes/light-tritanopia.json

 
+++ /home/runner/work/primitives/primitives/dist/styleLint/functional/themes/light-tritanopia.json	2026-01-28 08:14:25.485714557 +0000
@@ -38237,6 +38237,13 @@
   "key": "{focus.outline}",
   "$value": "2px solid #0969da",
   "$type": "border",
+    "$description": "Focus ring outline for keyboard navigation and accessibility.",
+    "$extensions": {
+      "org.primer.llm": {
+        "usage": ["focus-ring", "keyboard-navigation", "accessibility-indicator"],
+        "rules": "Always ensure focus states are visible. Do not override with custom focus styles that reduce visibility. Use for interactive elements like buttons, links, and form controls."
+      }
+    },
   "filePath": "src/tokens/functional/border/border.json5",
   "isSource": true,
   "original": {
@@ -38246,6 +38253,13 @@
       "width": "2px"
     },
     "$type": "border",
+      "$description": "Focus ring outline for keyboard navigation and accessibility.",
+      "$extensions": {
+        "org.primer.llm": {
+          "usage": ["focus-ring", "keyboard-navigation", "accessibility-indicator"],
+          "rules": "Always ensure focus states are visible. Do not override with custom focus styles that reduce visibility. Use for interactive elements like buttons, links, and form controls."
+        }
+      },
     "key": "{focus.outline}"
   },
   "name": "focus-outline",

/styleLint/functional/themes/light.json

 
+++ /home/runner/work/primitives/primitives/dist/styleLint/functional/themes/light.json	2026-01-28 08:14:23.791737843 +0000
@@ -38231,6 +38231,13 @@
   "key": "{focus.outline}",
   "$value": "2px solid #0969da",
   "$type": "border",
+    "$description": "Focus ring outline for keyboard navigation and accessibility.",
+    "$extensions": {
+      "org.primer.llm": {
+        "usage": ["focus-ring", "keyboard-navigation", "accessibility-indicator"],
+        "rules": "Always ensure focus states are visible. Do not override with custom focus styles that reduce visibility. Use for interactive elements like buttons, links, and form controls."
+      }
+    },
   "filePath": "src/tokens/functional/border/border.json5",
   "isSource": true,
   "original": {
@@ -38240,6 +38247,13 @@
       "width": "2px"
     },
     "$type": "border",
+      "$description": "Focus ring outline for keyboard navigation and accessibility.",
+      "$extensions": {
+        "org.primer.llm": {
+          "usage": ["focus-ring", "keyboard-navigation", "accessibility-indicator"],
+          "rules": "Always ensure focus states are visible. Do not override with custom focus styles that reduce visibility. Use for interactive elements like buttons, links, and form controls."
+        }
+      },
     "key": "{focus.outline}"
   },
   "name": "focus-outline",

@github-actions
github-actions Bot temporarily deployed to Preview (Storybook) January 28, 2026 08:16 Inactive
@lukasoppermann
lukasoppermann merged commit dcde6af into main Jan 28, 2026
31 checks passed
@lukasoppermann
lukasoppermann deleted the metadata branch January 28, 2026 10:48
@primer primer Bot mentioned this pull request Jan 27, 2026
Merged

This branch was previously deployed

2 inactive deployments
Preview (Storybook) — e7b4b4bb Deployed Jan 28, 2026 by github-actions[bot]
github-pages — e7b4b4bb Deployed Jan 28, 2026 by lukasoppermann via Build and deploy / Deploy #3879
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Reviewers

@jonrohan jonrohan Awaiting requested review from jonrohan jonrohan was automatically assigned from primer/css-reviewers

Assignees

No one assigned

Labels

None yet

Projects

None yet

Milestone

No milestone

Development

Successfully merging this pull request may close these issues.

1 participant

@lukasoppermann