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

package/dist/docs/functional/size/border.json

@@ -183,40 +183,40 @@
     "type": "custom-string",
     "description": "Thin shadow used instead of a border to prevent layout shift"
   },
-  "outline-focus-offset": {
-    "key": "{outline.focus.offset}",
+  "focus-outline-offset": {
+    "key": "{focus.outline-offset}",
     "$extensions": {
       "org.primer.figma": {
         "collection": "functional/size",
         "scopes": ["borderWidth", "effectFloat"]
       }
     },
-    "filePath": "src/tokens/functional/size/border.json5",
+    "filePath": "src/tokens/component/focus.json5",
     "isSource": true,
     "original": {
       "$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",
+      "$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"]
         }
       },
-      "key": "{outline.focus.offset}"
+      "key": "{focus.outline-offset}"
     },
-    "name": "outline-focus-offset",
+    "name": "focus-outline-offset",
     "attributes": {},
-    "path": ["outline", "focus", "offset"],
+    "path": ["focus", "outline-offset"],
     "value": "-0.125rem",
     "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"
   },
-  "outline-focus-width": {
-    "key": "{outline.focus.width}",
+  "focus-outline-width": {
+    "key": "{focus.outline-width}",
     "$extensions": {
       "org.primer.figma": {
         "collection": "functional/size",
@@ -227,15 +227,15 @@
         "rules": "MUST use for all keyboard focus indicators. Required for WCAG 2.4.7 compliance."
       }
     },
-    "filePath": "src/tokens/functional/size/border.json5",
+    "filePath": "src/tokens/component/focus.json5",
     "isSource": true,
     "original": {
       "$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",
+      "$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",
@@ -246,6 +246,68 @@
           "rules": "MUST use for all keyboard focus indicators. Required for WCAG 2.4.7 compliance."
         }
       },
+      "key": "{focus.outline-width}"
+    },
+    "name": "focus-outline-width",
+    "attributes": {},
+    "path": ["focus", "outline-width"],
+    "value": "0.125rem",
+    "type": "dimension",
+    "description": "Focus outline width (2px). Standard width for keyboard focus indicators to meet WCAG 2.4.7 accessibility requirements"
+  },
+  "outline-focus-offset": {
+    "key": "{outline.focus.offset}",
+    "$deprecated": "-0.125rem",
+    "$extensions": {
+      "org.primer.figma": {
+        "collection": "functional/size",
+        "scopes": ["borderWidth", "effectFloat"]
+      }
+    },
+    "filePath": "src/tokens/component/focus.json5",
+    "isSource": true,
+    "original": {
+      "$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"]
+        }
+      },
+      "key": "{outline.focus.offset}"
+    },
+    "name": "outline-focus-offset",
+    "attributes": {},
+    "path": ["outline", "focus", "offset"],
+    "value": "-0.125rem",
+    "type": "dimension",
+    "description": "Deprecated. Use focus.outline-offset instead."
+  },
+  "outline-focus-width": {
+    "key": "{outline.focus.width}",
+    "$deprecated": "0.125rem",
+    "$extensions": {
+      "org.primer.figma": {
+        "collection": "functional/size",
+        "scopes": ["borderWidth", "effectFloat"]
+      }
+    },
+    "filePath": "src/tokens/component/focus.json5",
+    "isSource": true,
+    "original": {
+      "$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"]
+        }
+      },
       "key": "{outline.focus.width}"
     },
     "name": "outline-focus-width",
@@ -253,6 +315,6 @@
     "path": ["outline", "focus", "width"],
     "value": "0.125rem",
     "type": "dimension",
-    "description": "Focus outline width (2px). Standard width for keyboard focus indicators to meet WCAG 2.4.7 accessibility requirements"
+    "description": "Deprecated. Use focus.outline-width instead."
   }
 }

package/dist/docs/functional/themes/dark-colorblind-high-contrast.json

@@ -39505,16 +39505,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.",
@@ -39529,12 +39526,12 @@
     "name": "focus-outline",
     "attributes": {},
     "path": ["focus", "outline"],
-    "value": "2px solid #409eff",
+    "value": "0.125rem solid #409eff",
     "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",
@@ -39546,7 +39543,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}",
@@ -39563,6 +39560,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": "#409eff",
+    "type": "color",
+    "description": "Outline color for focus states on interactive elements"
+  },
+  "focus-outlineColor": {
+    "key": "{focus.outlineColor}",
+    "$deprecated": "#409eff",
+    "$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",
@@ -39570,7 +39600,7 @@
     "path": ["focus", "outlineColor"],
     "value": "#409eff",
     "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/dark-colorblind.json

@@ -39497,16 +39497,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.",
@@ -39521,12 +39518,12 @@
     "name": "focus-outline",
     "attributes": {},
     "path": ["focus", "outline"],
-    "value": "2px solid #1f6feb",
+    "value": "0.125rem solid #1f6feb",
     "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",
@@ -39538,7 +39535,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}",
@@ -39555,6 +39552,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": "#1f6feb",
+    "type": "color",
+    "description": "Outline color for focus states on interactive elements"
+  },
+  "focus-outlineColor": {
+    "key": "{focus.outlineColor}",
+    "$deprecated": "#1f6feb",
+    "$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",
@@ -39562,7 +39592,7 @@
     "path": ["focus", "outlineColor"],
     "value": "#1f6feb",
     "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/dark-dimmed-high-contrast.json

@@ -39515,16 +39515,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.",
@@ -39539,12 +39536,12 @@
     "name": "focus-outline",
     "attributes": {},
     "path": ["focus", "outline"],
-    "value": "2px solid #6cb6ff",
+    "value": "0.125rem solid #6cb6ff",
     "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",
@@ -39556,7 +39553,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}",
@@ -39573,6 +39570,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": "#6cb6ff",
+    "type": "color",
+    "description": "Outline color for focus states on interactive elements"
+  },
+  "focus-outlineColor": {
+    "key": "{focus.outlineColor}",
+    "$deprecated": "#6cb6ff",
+    "$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",
@@ -39580,7 +39610,7 @@
     "path": ["focus", "outlineColor"],
     "value": "#6cb6ff",
     "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/dark-dimmed.json

@@ -39535,16 +39535,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.",
@@ -39559,12 +39556,12 @@
     "name": "focus-outline",
     "attributes": {},
     "path": ["focus", "outline"],
-    "value": "2px solid #316dca",
+    "value": "0.125rem solid #316dca",
     "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",
@@ -39576,7 +39573,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}",
@@ -39593,6 +39590,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": "#316dca",
+    "type": "color",
+    "description": "Outline color for focus states on interactive elements"
+  },
+  "focus-outlineColor": {
+    "key": "{focus.outlineColor}",
+    "$deprecated": "#316dca",
+    "$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",
@@ -39600,7 +39630,7 @@
     "path": ["focus", "outlineColor"],
     "value": "#316dca",
     "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/dark-high-contrast.json

@@ -39505,16 +39505,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.",
@@ -39529,12 +39526,12 @@
     "name": "focus-outline",
     "attributes": {},
     "path": ["focus", "outline"],
-    "value": "2px solid #409eff",
+    "value": "0.125rem solid #409eff",
     "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",
@@ -39546,7 +39543,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}",
@@ -39563,6 +39560,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": "#409eff",
+    "type": "color",
+    "description": "Outline color for focus states on interactive elements"
+  },
+  "focus-outlineColor": {
+    "key": "{focus.outlineColor}",
+    "$deprecated": "#409eff",
+    "$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",
@@ -39570,7 +39600,7 @@
     "path": ["focus", "outlineColor"],
     "value": "#409eff",
     "type": "color",
-    "description": "Outline color for focus states on interactive elements"
+    "description": "Deprecated. Use focus.outline-color instead."
   },
   "header-bgColor": {
     "key": "{header.bgColor}",