@primer/primitives 11.7.0-rc.9e55ef3b → 11.7.0

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

@@ -39609,7 +39609,11 @@
   },
   "focus-outline": {
     "key": "{focus.outline}",
-    "$value": "2px solid #0349b4",
+    "$value": {
+      "color": "#0349b4",
+      "style": "solid",
+      "width": ["0.125rem", "2px"]
+    },
     "$type": "border",
     "$description": "Focus ring outline for keyboard navigation and accessibility.",
     "$extensions": {
@@ -39618,16 +39622,13 @@
         "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",
+    "filePath": "src/tokens/component/focus.json5",
     "isSource": true,
     "original": {
       "$value": {
-        "color": "{focus.outlineColor}",
+        "color": "{focus.outline-color}",
         "style": "solid",
-        "width": {
-          "value": 2,
-          "unit": "px"
-        }
+        "width": "{focus.outline-width}"
       },
       "$type": "border",
       "$description": "Focus ring outline for keyboard navigation and accessibility.",
@@ -39643,8 +39644,8 @@
     "attributes": {},
     "path": ["focus", "outline"]
   },
-  "focus-outlineColor": {
-    "key": "{focus.outlineColor}",
+  "focus-outline-color": {
+    "key": "{focus.outline-color}",
     "$value": "#0349b4",
     "$type": "color",
     "$description": "Outline color for focus states on interactive elements",
@@ -39659,7 +39660,7 @@
         "rules": "Use for focus outlines on interactive elements like buttons, links, and form controls. MUST be visible for keyboard navigation accessibility. Do NOT use for decorative borders or non-interactive elements."
       }
     },
-    "filePath": "src/tokens/functional/color/focus.json5",
+    "filePath": "src/tokens/component/focus.json5",
     "isSource": true,
     "original": {
       "$value": "{borderColor.accent.emphasis}",
@@ -39676,6 +39677,39 @@
           "rules": "Use for focus outlines on interactive elements like buttons, links, and form controls. MUST be visible for keyboard navigation accessibility. Do NOT use for decorative borders or non-interactive elements."
         }
       },
+      "key": "{focus.outline-color}"
+    },
+    "name": "focus-outline-color",
+    "attributes": {},
+    "path": ["focus", "outline-color"]
+  },
+  "focus-outlineColor": {
+    "key": "{focus.outlineColor}",
+    "$value": "#0349b4",
+    "$type": "color",
+    "$deprecated": "#0349b4",
+    "$description": "Deprecated. Use focus.outline-color instead.",
+    "$extensions": {
+      "org.primer.figma": {
+        "collection": "mode",
+        "group": "component (internal)",
+        "scopes": ["borderColor", "effectColor"]
+      }
+    },
+    "filePath": "src/tokens/component/focus.json5",
+    "isSource": true,
+    "original": {
+      "$value": "{focus.outline-color}",
+      "$type": "color",
+      "$deprecated": "{focus.outline-color}",
+      "$description": "Deprecated. Use focus.outline-color instead.",
+      "$extensions": {
+        "org.primer.figma": {
+          "collection": "mode",
+          "group": "component (internal)",
+          "scopes": ["borderColor", "effectColor"]
+        }
+      },
       "key": "{focus.outlineColor}"
     },
     "name": "focus-outlineColor",

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

@@ -39603,7 +39603,11 @@
   },
   "focus-outline": {
     "key": "{focus.outline}",
-    "$value": "2px solid #0969da",
+    "$value": {
+      "color": "#0969da",
+      "style": "solid",
+      "width": ["0.125rem", "2px"]
+    },
     "$type": "border",
     "$description": "Focus ring outline for keyboard navigation and accessibility.",
     "$extensions": {
@@ -39612,16 +39616,13 @@
         "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",
+    "filePath": "src/tokens/component/focus.json5",
     "isSource": true,
     "original": {
       "$value": {
-        "color": "{focus.outlineColor}",
+        "color": "{focus.outline-color}",
         "style": "solid",
-        "width": {
-          "value": 2,
-          "unit": "px"
-        }
+        "width": "{focus.outline-width}"
       },
       "$type": "border",
       "$description": "Focus ring outline for keyboard navigation and accessibility.",
@@ -39637,8 +39638,8 @@
     "attributes": {},
     "path": ["focus", "outline"]
   },
-  "focus-outlineColor": {
-    "key": "{focus.outlineColor}",
+  "focus-outline-color": {
+    "key": "{focus.outline-color}",
     "$value": "#0969da",
     "$type": "color",
     "$description": "Outline color for focus states on interactive elements",
@@ -39653,7 +39654,7 @@
         "rules": "Use for focus outlines on interactive elements like buttons, links, and form controls. MUST be visible for keyboard navigation accessibility. Do NOT use for decorative borders or non-interactive elements."
       }
     },
-    "filePath": "src/tokens/functional/color/focus.json5",
+    "filePath": "src/tokens/component/focus.json5",
     "isSource": true,
     "original": {
       "$value": "{borderColor.accent.emphasis}",
@@ -39670,6 +39671,39 @@
           "rules": "Use for focus outlines on interactive elements like buttons, links, and form controls. MUST be visible for keyboard navigation accessibility. Do NOT use for decorative borders or non-interactive elements."
         }
       },
+      "key": "{focus.outline-color}"
+    },
+    "name": "focus-outline-color",
+    "attributes": {},
+    "path": ["focus", "outline-color"]
+  },
+  "focus-outlineColor": {
+    "key": "{focus.outlineColor}",
+    "$value": "#0969da",
+    "$type": "color",
+    "$deprecated": "#0969da",
+    "$description": "Deprecated. Use focus.outline-color instead.",
+    "$extensions": {
+      "org.primer.figma": {
+        "collection": "mode",
+        "group": "component (internal)",
+        "scopes": ["borderColor", "effectColor"]
+      }
+    },
+    "filePath": "src/tokens/component/focus.json5",
+    "isSource": true,
+    "original": {
+      "$value": "{focus.outline-color}",
+      "$type": "color",
+      "$deprecated": "{focus.outline-color}",
+      "$description": "Deprecated. Use focus.outline-color instead.",
+      "$extensions": {
+        "org.primer.figma": {
+          "collection": "mode",
+          "group": "component (internal)",
+          "scopes": ["borderColor", "effectColor"]
+        }
+      },
       "key": "{focus.outlineColor}"
     },
     "name": "focus-outlineColor",

package/dist/styleLint/functional/themes/light.json

@@ -39601,7 +39601,11 @@
   },
   "focus-outline": {
     "key": "{focus.outline}",
-    "$value": "2px solid #0969da",
+    "$value": {
+      "color": "#0969da",
+      "style": "solid",
+      "width": ["0.125rem", "2px"]
+    },
     "$type": "border",
     "$description": "Focus ring outline for keyboard navigation and accessibility.",
     "$extensions": {
@@ -39610,16 +39614,13 @@
         "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",
+    "filePath": "src/tokens/component/focus.json5",
     "isSource": true,
     "original": {
       "$value": {
-        "color": "{focus.outlineColor}",
+        "color": "{focus.outline-color}",
         "style": "solid",
-        "width": {
-          "value": 2,
-          "unit": "px"
-        }
+        "width": "{focus.outline-width}"
       },
       "$type": "border",
       "$description": "Focus ring outline for keyboard navigation and accessibility.",
@@ -39635,8 +39636,8 @@
     "attributes": {},
     "path": ["focus", "outline"]
   },
-  "focus-outlineColor": {
-    "key": "{focus.outlineColor}",
+  "focus-outline-color": {
+    "key": "{focus.outline-color}",
     "$value": "#0969da",
     "$type": "color",
     "$description": "Outline color for focus states on interactive elements",
@@ -39651,7 +39652,7 @@
         "rules": "Use for focus outlines on interactive elements like buttons, links, and form controls. MUST be visible for keyboard navigation accessibility. Do NOT use for decorative borders or non-interactive elements."
       }
     },
-    "filePath": "src/tokens/functional/color/focus.json5",
+    "filePath": "src/tokens/component/focus.json5",
     "isSource": true,
     "original": {
       "$value": "{borderColor.accent.emphasis}",
@@ -39668,6 +39669,39 @@
           "rules": "Use for focus outlines on interactive elements like buttons, links, and form controls. MUST be visible for keyboard navigation accessibility. Do NOT use for decorative borders or non-interactive elements."
         }
       },
+      "key": "{focus.outline-color}"
+    },
+    "name": "focus-outline-color",
+    "attributes": {},
+    "path": ["focus", "outline-color"]
+  },
+  "focus-outlineColor": {
+    "key": "{focus.outlineColor}",
+    "$value": "#0969da",
+    "$type": "color",
+    "$deprecated": "#0969da",
+    "$description": "Deprecated. Use focus.outline-color instead.",
+    "$extensions": {
+      "org.primer.figma": {
+        "collection": "mode",
+        "group": "component (internal)",
+        "scopes": ["borderColor", "effectColor"]
+      }
+    },
+    "filePath": "src/tokens/component/focus.json5",
+    "isSource": true,
+    "original": {
+      "$value": "{focus.outline-color}",
+      "$type": "color",
+      "$deprecated": "{focus.outline-color}",
+      "$description": "Deprecated. Use focus.outline-color instead.",
+      "$extensions": {
+        "org.primer.figma": {
+          "collection": "mode",
+          "group": "component (internal)",
+          "scopes": ["borderColor", "effectColor"]
+        }
+      },
       "key": "{focus.outlineColor}"
     },
     "name": "focus-outlineColor",

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@primer/primitives",
-  "version": "11.7.0-rc.9e55ef3b",
+  "version": "11.7.0",
   "description": "Typography, spacing, and color primitives for Primer design system",
   "type": "module",
   "files": [
@@ -81,4 +81,4 @@
     "zod-validation-error": "^4.0.1",
     "colorjs.io": "^0.6.1"
   }
-}
+}

package/src/tokens/component/focus.json5

@@ -0,0 +1,104 @@
+{
+  focus: {
+    outline: {
+      $value: {
+        color: '{focus.outline-color}',
+        style: 'solid',
+        width: '{focus.outline-width}',
+      },
+      $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.',
+        },
+      },
+    },
+    'outline-color': {
+      $value: '{borderColor.accent.emphasis}',
+      $type: 'color',
+      $description: 'Outline color for focus states on interactive elements',
+      $extensions: {
+        'org.primer.figma': {
+          collection: 'mode',
+          group: 'component (internal)',
+          scopes: ['borderColor', 'effectColor'],
+        },
+        'org.primer.llm': {
+          usage: ['focus-ring', 'keyboard-navigation', 'accessibility-indicator'],
+          rules: 'Use for focus outlines on interactive elements like buttons, links, and form controls. MUST be visible for keyboard navigation accessibility. Do NOT use for decorative borders or non-interactive elements.',
+        },
+      },
+    },
+    'outline-width': {
+      $value: {value: 2, unit: 'px'},
+      $type: 'dimension',
+      $description: 'Focus outline width (2px). Standard width for keyboard focus indicators to meet WCAG 2.4.7 accessibility requirements',
+      $extensions: {
+        'org.primer.figma': {
+          collection: 'functional/size',
+          scopes: ['borderWidth', 'effectFloat'],
+        },
+        'org.primer.llm': {
+          usage: ['focus-ring', 'keyboard-focus', 'accessibility'],
+          rules: 'MUST use for all keyboard focus indicators. Required for WCAG 2.4.7 compliance.',
+        },
+      },
+    },
+    'outline-offset': {
+      $value: {value: -2, unit: 'px'},
+      $type: 'dimension',
+      $description: 'Focus outline offset (-2px). Negative value creates an inset outline for keyboard focus indicators, ensuring the focus ring stays within the element bounds',
+      $extensions: {
+        'org.primer.figma': {
+          collection: 'functional/size',
+          scopes: ['borderWidth', 'effectFloat'],
+        },
+      },
+    },
+    // Deprecated: use focus.outline-color instead
+    outlineColor: {
+      $value: '{focus.outline-color}',
+      $type: 'color',
+      $deprecated: '{focus.outline-color}',
+      $description: 'Deprecated. Use focus.outline-color instead.',
+      $extensions: {
+        'org.primer.figma': {
+          collection: 'mode',
+          group: 'component (internal)',
+          scopes: ['borderColor', 'effectColor'],
+        },
+      },
+    },
+  },
+  // Deprecated: use focus.outline-offset and focus.outline-width instead
+  outline: {
+    focus: {
+      offset: {
+        $value: '{focus.outline-offset}',
+        $type: 'dimension',
+        $deprecated: '{focus.outline-offset}',
+        $description: 'Deprecated. Use focus.outline-offset instead.',
+        $extensions: {
+          'org.primer.figma': {
+            collection: 'functional/size',
+            scopes: ['borderWidth', 'effectFloat'],
+          },
+        },
+      },
+      width: {
+        $value: '{focus.outline-width}',
+        $type: 'dimension',
+        $deprecated: '{focus.outline-width}',
+        $description: 'Deprecated. Use focus.outline-width instead.',
+        $extensions: {
+          'org.primer.figma': {
+            collection: 'functional/size',
+            scopes: ['borderWidth', 'effectFloat'],
+          },
+        },
+      },
+    },
+  },
+}

package/src/tokens/fallback/color-fallbacks.json

@@ -172,6 +172,7 @@
   "--buttonCounter-danger-fgColor-hover": "var(--color-btn-danger-hover-counter-fg)",
   "--buttonCounter-danger-fgColor-disabled": "var(--color-btn-danger-disabled-counter-fg)",
   "--focus-outlineColor": "var(--color-accent-fg)",
+  "--focus-outline-color": "var(--color-accent-fg)",
   "--focus-outline": "var(--color-accent-fg solid 2px)",
   "--menu-bgColor-active": "var(--color-menu-bg-active)",
   "--overlay-bgColor": "var(--color-canvas-overlay)",

package/src/tokens/functional/border/border.json5

@@ -1,24 +1,4 @@
 {
-  focus: {
-    outline: {
-      $value: {
-        color: '{focus.outlineColor}',
-        style: 'solid',
-        width: {
-          value: 2,
-          unit: 'px',
-        },
-      },
-      $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.',
-        },
-      },
-    },
-  },
   border: {
     $description: 'Semantic border tokens combining color, style, and width for consistent UI boundaries.',
     $extensions: {

package/src/tokens/functional/size/border.json5

@@ -66,34 +66,4 @@
       },
     },
   },
-  outline: {
-    focus: {
-      offset: {
-        $value: {value: -2, unit: 'px'},
-        $description: 'Focus outline offset (-2px). Negative value creates an inset outline for keyboard focus indicators, ensuring the focus ring stays within the element bounds',
-        $type: 'dimension',
-        $extensions: {
-          'org.primer.figma': {
-            collection: 'functional/size',
-            scopes: ['borderWidth', 'effectFloat'],
-          },
-        },
-      },
-      width: {
-        $value: {value: 2, unit: 'px'},
-        $description: 'Focus outline width (2px). Standard width for keyboard focus indicators to meet WCAG 2.4.7 accessibility requirements',
-        $type: 'dimension',
-        $extensions: {
-          'org.primer.figma': {
-            collection: 'functional/size',
-            scopes: ['borderWidth', 'effectFloat'],
-          },
-          'org.primer.llm': {
-            usage: ['focus-ring', 'keyboard-focus', 'accessibility'],
-            rules: 'MUST use for all keyboard focus indicators. Required for WCAG 2.4.7 compliance.',
-          },
-        },
-      },
-    },
-  },
 }

package/src/tokens/functional/color/focus.json5

@@ -1,20 +0,0 @@
-{
-  focus: {
-    outlineColor: {
-      $value: '{borderColor.accent.emphasis}',
-      $type: 'color',
-      $description: 'Outline color for focus states on interactive elements',
-      $extensions: {
-        'org.primer.figma': {
-          collection: 'mode',
-          group: 'component (internal)',
-          scopes: ['borderColor', 'effectColor'],
-        },
-        'org.primer.llm': {
-          usage: ['focus-ring', 'keyboard-navigation', 'accessibility-indicator'],
-          rules: 'Use for focus outlines on interactive elements like buttons, links, and form controls. MUST be visible for keyboard navigation accessibility. Do NOT use for decorative borders or non-interactive elements.',
-        },
-      },
-    },
-  },
-}