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

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

@@ -39513,16 +39513,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.",
@@ -39537,12 +39534,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",
@@ -39554,7 +39551,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}",
@@ -39571,6 +39568,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",
@@ -39578,7 +39608,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-tritanopia.json

@@ -39519,16 +39519,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.",
@@ -39543,12 +39540,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",
@@ -39560,7 +39557,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}",
@@ -39577,6 +39574,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",
@@ -39584,7 +39614,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.json

@@ -39491,16 +39491,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.",
@@ -39515,12 +39512,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",
@@ -39532,7 +39529,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}",
@@ -39549,6 +39546,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",
@@ -39556,7 +39586,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/light-colorblind-high-contrast.json

@@ -39491,16 +39491,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.",
@@ -39515,12 +39512,12 @@
     "name": "focus-outline",
     "attributes": {},
     "path": ["focus", "outline"],
-    "value": "2px solid #0349b4",
+    "value": "0.125rem solid #0349b4",
     "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",
@@ -39532,7 +39529,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}",
@@ -39549,6 +39546,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": "#0349b4",
+    "type": "color",
+    "description": "Outline color for focus states on interactive elements"
+  },
+  "focus-outlineColor": {
+    "key": "{focus.outlineColor}",
+    "$deprecated": "#0349b4",
+    "$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",
@@ -39556,7 +39586,7 @@
     "path": ["focus", "outlineColor"],
     "value": "#0349b4",
     "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-colorblind.json

@@ -39481,16 +39481,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.",
@@ -39505,12 +39502,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",
@@ -39522,7 +39519,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}",
@@ -39539,6 +39536,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",
@@ -39546,7 +39576,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-high-contrast.json

@@ -39493,16 +39493,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.",
@@ -39517,12 +39514,12 @@
     "name": "focus-outline",
     "attributes": {},
     "path": ["focus", "outline"],
-    "value": "2px solid #0349b4",
+    "value": "0.125rem solid #0349b4",
     "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",
@@ -39534,7 +39531,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}",
@@ -39551,6 +39548,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": "#0349b4",
+    "type": "color",
+    "description": "Outline color for focus states on interactive elements"
+  },
+  "focus-outlineColor": {
+    "key": "{focus.outlineColor}",
+    "$deprecated": "#0349b4",
+    "$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",
@@ -39558,7 +39588,7 @@
     "path": ["focus", "outlineColor"],
     "value": "#0349b4",
     "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-tritanopia-high-contrast.json

@@ -39495,16 +39495,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.",
@@ -39519,12 +39516,12 @@
     "name": "focus-outline",
     "attributes": {},
     "path": ["focus", "outline"],
-    "value": "2px solid #0349b4",
+    "value": "0.125rem solid #0349b4",
     "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",
@@ -39536,7 +39533,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}",
@@ -39553,6 +39550,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": "#0349b4",
+    "type": "color",
+    "description": "Outline color for focus states on interactive elements"
+  },
+  "focus-outlineColor": {
+    "key": "{focus.outlineColor}",
+    "$deprecated": "#0349b4",
+    "$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",
@@ -39560,7 +39590,7 @@
     "path": ["focus", "outlineColor"],
     "value": "#0349b4",
     "type": "color",
-    "description": "Outline color for focus states on interactive elements"
+    "description": "Deprecated. Use focus.outline-color instead."
   },
   "header-bgColor": {
     "key": "{header.bgColor}",