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

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

@@ -39489,16 +39489,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.",
@@ -39513,12 +39510,12 @@
     "name": "focus-outline",
     "attributes": {},
     "path": ["focus", "outline"],
-    "value": "2px solid #0969da",
+    "value": "0.125rem solid #0969da",
     "type": "border",
     "description": "Focus ring outline for keyboard navigation and accessibility."
   },
-  "focus-outlineColor": {
-    "key": "{focus.outlineColor}",
+  "focus-outline-color": {
+    "key": "{focus.outline-color}",
     "$extensions": {
       "org.primer.figma": {
         "collection": "mode",
@@ -39530,7 +39527,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}",
@@ -39547,6 +39544,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"],
+    "value": "#0969da",
+    "type": "color",
+    "description": "Outline color for focus states on interactive elements"
+  },
+  "focus-outlineColor": {
+    "key": "{focus.outlineColor}",
+    "$deprecated": "#0969da",
+    "$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",
@@ -39554,7 +39584,7 @@
     "path": ["focus", "outlineColor"],
     "value": "#0969da",
     "type": "color",
-    "description": "Outline color for focus states on interactive elements"
+    "description": "Deprecated. Use focus.outline-color instead."
   },
   "header-bgColor": {
     "key": "{header.bgColor}",

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

@@ -39487,16 +39487,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.",
@@ -39511,12 +39508,12 @@
     "name": "focus-outline",
     "attributes": {},
     "path": ["focus", "outline"],
-    "value": "2px solid #0969da",
+    "value": "0.125rem solid #0969da",
     "type": "border",
     "description": "Focus ring outline for keyboard navigation and accessibility."
   },
-  "focus-outlineColor": {
-    "key": "{focus.outlineColor}",
+  "focus-outline-color": {
+    "key": "{focus.outline-color}",
     "$extensions": {
       "org.primer.figma": {
         "collection": "mode",
@@ -39528,7 +39525,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}",
@@ -39545,6 +39542,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"],
+    "value": "#0969da",
+    "type": "color",
+    "description": "Outline color for focus states on interactive elements"
+  },
+  "focus-outlineColor": {
+    "key": "{focus.outlineColor}",
+    "$deprecated": "#0969da",
+    "$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",
@@ -39552,7 +39582,7 @@
     "path": ["focus", "outlineColor"],
     "value": "#0969da",
     "type": "color",
-    "description": "Outline color for focus states on interactive elements"
+    "description": "Deprecated. Use focus.outline-color instead."
   },
   "header-bgColor": {
     "key": "{header.bgColor}",

package/dist/fallbacks/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/dist/fallbacks/functional/size/border.json

@@ -6,6 +6,8 @@
   "--borderWidth-thin": "0.0625rem",
   "--borderWidth-thick": "0.125rem",
   "--borderWidth-thicker": "0.25rem",
+  "--focus-outline-width": "0.125rem",
+  "--focus-outline-offset": "-0.125rem",
   "--outline-focus-offset": "-0.125rem",
   "--outline-focus-width": "0.125rem"
 }

package/dist/figma/dimension/dimension.json

@@ -1013,28 +1013,6 @@
     "group": "functional/size",
     "scopes": ["STROKE_FLOAT", "EFFECT_FLOAT"]
   },
-  {
-    "name": "outline/focus/offset",
-    "value": -2,
-    "type": "FLOAT",
-    "description": "Focus outline offset (-2px). Negative value creates an inset outline for keyboard focus indicators, ensuring the focus ring stays within the element bounds",
-    "refId": "functional/size/outline/focus/offset",
-    "collection": "functional/size",
-    "mode": "default",
-    "group": "functional/size",
-    "scopes": ["STROKE_FLOAT", "EFFECT_FLOAT"]
-  },
-  {
-    "name": "outline/focus/width",
-    "value": 2,
-    "type": "FLOAT",
-    "description": "Focus outline width (2px). Standard width for keyboard focus indicators to meet WCAG 2.4.7 accessibility requirements",
-    "refId": "functional/size/outline/focus/width",
-    "collection": "functional/size",
-    "mode": "default",
-    "group": "functional/size",
-    "scopes": ["STROKE_FLOAT", "EFFECT_FLOAT"]
-  },
   {
     "name": "borderRadius/small",
     "value": 3,
@@ -1105,5 +1083,51 @@
     "codeSyntax": {
       "web": "var(--borderRadius-default) /* utility class: .rounded-2 */"
     }
+  },
+  {
+    "name": "focus/outline-width",
+    "value": 2,
+    "type": "FLOAT",
+    "description": "Focus outline width (2px). Standard width for keyboard focus indicators to meet WCAG 2.4.7 accessibility requirements",
+    "refId": "functional/size/focus/outline-width",
+    "collection": "functional/size",
+    "mode": "default",
+    "group": "functional/size",
+    "scopes": ["STROKE_FLOAT", "EFFECT_FLOAT"]
+  },
+  {
+    "name": "focus/outline-offset",
+    "value": -2,
+    "type": "FLOAT",
+    "description": "Focus outline offset (-2px). Negative value creates an inset outline for keyboard focus indicators, ensuring the focus ring stays within the element bounds",
+    "refId": "functional/size/focus/outline-offset",
+    "collection": "functional/size",
+    "mode": "default",
+    "group": "functional/size",
+    "scopes": ["STROKE_FLOAT", "EFFECT_FLOAT"]
+  },
+  {
+    "name": "outline/focus/offset",
+    "value": -2,
+    "type": "FLOAT",
+    "description": "Deprecated. Use focus.outline-offset instead.",
+    "refId": "functional/size/outline/focus/offset",
+    "reference": "functional/size/focus/outline-offset",
+    "collection": "functional/size",
+    "mode": "default",
+    "group": "functional/size",
+    "scopes": ["STROKE_FLOAT", "EFFECT_FLOAT"]
+  },
+  {
+    "name": "outline/focus/width",
+    "value": 2,
+    "type": "FLOAT",
+    "description": "Deprecated. Use focus.outline-width instead.",
+    "refId": "functional/size/outline/focus/width",
+    "reference": "functional/size/focus/outline-width",
+    "collection": "functional/size",
+    "mode": "default",
+    "group": "functional/size",
+    "scopes": ["STROKE_FLOAT", "EFFECT_FLOAT"]
   }
 ]

package/dist/figma/figma.json

@@ -79,9 +79,9 @@
       ],
       "groups": [
         "shadow",
-        "component (internal)",
         "semantic",
         "component",
+        "component (internal)",
         "syntax",
         "component shadow"
       ]

package/dist/figma/themes/dark-colorblind.json

@@ -899,23 +899,6 @@
     "collection": "mode",
     "group": "shadow"
   },
-  {
-    "name": "focus/outlineColor",
-    "value": {
-      "r": 0.12156862745098039,
-      "g": 0.43529411764705883,
-      "b": 0.9215686274509803,
-      "a": 1
-    },
-    "type": "COLOR",
-    "description": "Outline color for focus states on interactive elements",
-    "refId": "mode/focus/outlineColor",
-    "reference": "mode/borderColor/accent-emphasis",
-    "collection": "mode",
-    "mode": "dark protanopia deuteranopia",
-    "group": "component (internal)",
-    "scopes": ["STROKE_COLOR", "EFFECT_COLOR"]
-  },
   {
     "name": "bgColor/default",
     "value": {
@@ -12406,6 +12389,40 @@
     "group": "component",
     "scopes": ["TEXT_FILL", "SHAPE_FILL"]
   },
+  {
+    "name": "focus/outline-color",
+    "value": {
+      "r": 0.12156862745098039,
+      "g": 0.43529411764705883,
+      "b": 0.9215686274509803,
+      "a": 1
+    },
+    "type": "COLOR",
+    "description": "Outline color for focus states on interactive elements",
+    "refId": "mode/focus/outline-color",
+    "reference": "mode/borderColor/accent-emphasis",
+    "collection": "mode",
+    "mode": "dark protanopia deuteranopia",
+    "group": "component (internal)",
+    "scopes": ["STROKE_COLOR", "EFFECT_COLOR"]
+  },
+  {
+    "name": "focus/outlineColor",
+    "value": {
+      "r": 0.12156862745098039,
+      "g": 0.43529411764705883,
+      "b": 0.9215686274509803,
+      "a": 1
+    },
+    "type": "COLOR",
+    "description": "Deprecated. Use focus.outline-color instead.",
+    "refId": "mode/focus/outlineColor",
+    "reference": "mode/focus/outline-color",
+    "collection": "mode",
+    "mode": "dark protanopia deuteranopia",
+    "group": "component (internal)",
+    "scopes": ["STROKE_COLOR", "EFFECT_COLOR"]
+  },
   {
     "name": "header/bgColor",
     "value": {

package/dist/figma/themes/dark-dimmed.json

@@ -899,23 +899,6 @@
     "collection": "mode",
     "group": "shadow"
   },
-  {
-    "name": "focus/outlineColor",
-    "value": {
-      "r": 0.19215686274509805,
-      "g": 0.42745098039215684,
-      "b": 0.792156862745098,
-      "a": 1
-    },
-    "type": "COLOR",
-    "description": "Outline color for focus states on interactive elements",
-    "refId": "mode/focus/outlineColor",
-    "reference": "mode/borderColor/accent-emphasis",
-    "collection": "mode",
-    "mode": "dark dimmed",
-    "group": "component (internal)",
-    "scopes": ["STROKE_COLOR", "EFFECT_COLOR"]
-  },
   {
     "name": "bgColor/default",
     "value": {
@@ -12391,6 +12374,40 @@
     "group": "component",
     "scopes": ["TEXT_FILL", "SHAPE_FILL"]
   },
+  {
+    "name": "focus/outline-color",
+    "value": {
+      "r": 0.19215686274509805,
+      "g": 0.42745098039215684,
+      "b": 0.792156862745098,
+      "a": 1
+    },
+    "type": "COLOR",
+    "description": "Outline color for focus states on interactive elements",
+    "refId": "mode/focus/outline-color",
+    "reference": "mode/borderColor/accent-emphasis",
+    "collection": "mode",
+    "mode": "dark dimmed",
+    "group": "component (internal)",
+    "scopes": ["STROKE_COLOR", "EFFECT_COLOR"]
+  },
+  {
+    "name": "focus/outlineColor",
+    "value": {
+      "r": 0.19215686274509805,
+      "g": 0.42745098039215684,
+      "b": 0.792156862745098,
+      "a": 1
+    },
+    "type": "COLOR",
+    "description": "Deprecated. Use focus.outline-color instead.",
+    "refId": "mode/focus/outlineColor",
+    "reference": "mode/focus/outline-color",
+    "collection": "mode",
+    "mode": "dark dimmed",
+    "group": "component (internal)",
+    "scopes": ["STROKE_COLOR", "EFFECT_COLOR"]
+  },
   {
     "name": "header/bgColor",
     "value": {

package/dist/figma/themes/dark-high-contrast.json

@@ -899,23 +899,6 @@
     "collection": "mode",
     "group": "shadow"
   },
-  {
-    "name": "focus/outlineColor",
-    "value": {
-      "r": 0.25098039215686274,
-      "g": 0.6196078431372549,
-      "b": 1,
-      "a": 1
-    },
-    "type": "COLOR",
-    "description": "Outline color for focus states on interactive elements",
-    "refId": "mode/focus/outlineColor",
-    "reference": "mode/borderColor/accent-emphasis",
-    "collection": "mode",
-    "mode": "dark high contrast",
-    "group": "component (internal)",
-    "scopes": ["STROKE_COLOR", "EFFECT_COLOR"]
-  },
   {
     "name": "bgColor/default",
     "value": {
@@ -12400,6 +12383,40 @@
     "group": "component",
     "scopes": ["TEXT_FILL", "SHAPE_FILL"]
   },
+  {
+    "name": "focus/outline-color",
+    "value": {
+      "r": 0.25098039215686274,
+      "g": 0.6196078431372549,
+      "b": 1,
+      "a": 1
+    },
+    "type": "COLOR",
+    "description": "Outline color for focus states on interactive elements",
+    "refId": "mode/focus/outline-color",
+    "reference": "mode/borderColor/accent-emphasis",
+    "collection": "mode",
+    "mode": "dark high contrast",
+    "group": "component (internal)",
+    "scopes": ["STROKE_COLOR", "EFFECT_COLOR"]
+  },
+  {
+    "name": "focus/outlineColor",
+    "value": {
+      "r": 0.25098039215686274,
+      "g": 0.6196078431372549,
+      "b": 1,
+      "a": 1
+    },
+    "type": "COLOR",
+    "description": "Deprecated. Use focus.outline-color instead.",
+    "refId": "mode/focus/outlineColor",
+    "reference": "mode/focus/outline-color",
+    "collection": "mode",
+    "mode": "dark high contrast",
+    "group": "component (internal)",
+    "scopes": ["STROKE_COLOR", "EFFECT_COLOR"]
+  },
   {
     "name": "header/bgColor",
     "value": {

package/dist/figma/themes/dark-tritanopia.json

@@ -899,23 +899,6 @@
     "collection": "mode",
     "group": "shadow"
   },
-  {
-    "name": "focus/outlineColor",
-    "value": {
-      "r": 0.12156862745098039,
-      "g": 0.43529411764705883,
-      "b": 0.9215686274509803,
-      "a": 1
-    },
-    "type": "COLOR",
-    "description": "Outline color for focus states on interactive elements",
-    "refId": "mode/focus/outlineColor",
-    "reference": "mode/borderColor/accent-emphasis",
-    "collection": "mode",
-    "mode": "dark tritanopia",
-    "group": "component (internal)",
-    "scopes": ["STROKE_COLOR", "EFFECT_COLOR"]
-  },
   {
     "name": "bgColor/default",
     "value": {
@@ -12399,6 +12382,40 @@
     "group": "component",
     "scopes": ["TEXT_FILL", "SHAPE_FILL"]
   },
+  {
+    "name": "focus/outline-color",
+    "value": {
+      "r": 0.12156862745098039,
+      "g": 0.43529411764705883,
+      "b": 0.9215686274509803,
+      "a": 1
+    },
+    "type": "COLOR",
+    "description": "Outline color for focus states on interactive elements",
+    "refId": "mode/focus/outline-color",
+    "reference": "mode/borderColor/accent-emphasis",
+    "collection": "mode",
+    "mode": "dark tritanopia",
+    "group": "component (internal)",
+    "scopes": ["STROKE_COLOR", "EFFECT_COLOR"]
+  },
+  {
+    "name": "focus/outlineColor",
+    "value": {
+      "r": 0.12156862745098039,
+      "g": 0.43529411764705883,
+      "b": 0.9215686274509803,
+      "a": 1
+    },
+    "type": "COLOR",
+    "description": "Deprecated. Use focus.outline-color instead.",
+    "refId": "mode/focus/outlineColor",
+    "reference": "mode/focus/outline-color",
+    "collection": "mode",
+    "mode": "dark tritanopia",
+    "group": "component (internal)",
+    "scopes": ["STROKE_COLOR", "EFFECT_COLOR"]
+  },
   {
     "name": "header/bgColor",
     "value": {

package/dist/figma/themes/dark.json

@@ -899,23 +899,6 @@
     "collection": "mode",
     "group": "shadow"
   },
-  {
-    "name": "focus/outlineColor",
-    "value": {
-      "r": 0.12156862745098039,
-      "g": 0.43529411764705883,
-      "b": 0.9215686274509803,
-      "a": 1
-    },
-    "type": "COLOR",
-    "description": "Outline color for focus states on interactive elements",
-    "refId": "mode/focus/outlineColor",
-    "reference": "mode/borderColor/accent-emphasis",
-    "collection": "mode",
-    "mode": "dark",
-    "group": "component (internal)",
-    "scopes": ["STROKE_COLOR", "EFFECT_COLOR"]
-  },
   {
     "name": "bgColor/default",
     "value": {
@@ -12397,6 +12380,40 @@
     "group": "component",
     "scopes": ["TEXT_FILL", "SHAPE_FILL"]
   },
+  {
+    "name": "focus/outline-color",
+    "value": {
+      "r": 0.12156862745098039,
+      "g": 0.43529411764705883,
+      "b": 0.9215686274509803,
+      "a": 1
+    },
+    "type": "COLOR",
+    "description": "Outline color for focus states on interactive elements",
+    "refId": "mode/focus/outline-color",
+    "reference": "mode/borderColor/accent-emphasis",
+    "collection": "mode",
+    "mode": "dark",
+    "group": "component (internal)",
+    "scopes": ["STROKE_COLOR", "EFFECT_COLOR"]
+  },
+  {
+    "name": "focus/outlineColor",
+    "value": {
+      "r": 0.12156862745098039,
+      "g": 0.43529411764705883,
+      "b": 0.9215686274509803,
+      "a": 1
+    },
+    "type": "COLOR",
+    "description": "Deprecated. Use focus.outline-color instead.",
+    "refId": "mode/focus/outlineColor",
+    "reference": "mode/focus/outline-color",
+    "collection": "mode",
+    "mode": "dark",
+    "group": "component (internal)",
+    "scopes": ["STROKE_COLOR", "EFFECT_COLOR"]
+  },
   {
     "name": "header/bgColor",
     "value": {