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

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

@@ -39619,7 +39619,11 @@
   },
   "focus-outline": {
     "key": "{focus.outline}",
-    "$value": "2px solid #409eff",
+    "$value": {
+      "color": "#409eff",
+      "style": "solid",
+      "width": ["0.125rem", "2px"]
+    },
     "$type": "border",
     "$description": "Focus ring outline for keyboard navigation and accessibility.",
     "$extensions": {
@@ -39628,16 +39632,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.",
@@ -39653,8 +39654,8 @@
     "attributes": {},
     "path": ["focus", "outline"]
   },
-  "focus-outlineColor": {
-    "key": "{focus.outlineColor}",
+  "focus-outline-color": {
+    "key": "{focus.outline-color}",
     "$value": "#409eff",
     "$type": "color",
     "$description": "Outline color for focus states on interactive elements",
@@ -39669,7 +39670,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}",
@@ -39686,6 +39687,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": "#409eff",
+    "$type": "color",
+    "$deprecated": "#409eff",
+    "$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/dark-tritanopia-high-contrast.json

@@ -39627,7 +39627,11 @@
   },
   "focus-outline": {
     "key": "{focus.outline}",
-    "$value": "2px solid #409eff",
+    "$value": {
+      "color": "#409eff",
+      "style": "solid",
+      "width": ["0.125rem", "2px"]
+    },
     "$type": "border",
     "$description": "Focus ring outline for keyboard navigation and accessibility.",
     "$extensions": {
@@ -39636,16 +39640,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.",
@@ -39661,8 +39662,8 @@
     "attributes": {},
     "path": ["focus", "outline"]
   },
-  "focus-outlineColor": {
-    "key": "{focus.outlineColor}",
+  "focus-outline-color": {
+    "key": "{focus.outline-color}",
     "$value": "#409eff",
     "$type": "color",
     "$description": "Outline color for focus states on interactive elements",
@@ -39677,7 +39678,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}",
@@ -39694,6 +39695,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": "#409eff",
+    "$type": "color",
+    "$deprecated": "#409eff",
+    "$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/dark-tritanopia.json

@@ -39633,7 +39633,11 @@
   },
   "focus-outline": {
     "key": "{focus.outline}",
-    "$value": "2px solid #1f6feb",
+    "$value": {
+      "color": "#1f6feb",
+      "style": "solid",
+      "width": ["0.125rem", "2px"]
+    },
     "$type": "border",
     "$description": "Focus ring outline for keyboard navigation and accessibility.",
     "$extensions": {
@@ -39642,16 +39646,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.",
@@ -39667,8 +39668,8 @@
     "attributes": {},
     "path": ["focus", "outline"]
   },
-  "focus-outlineColor": {
-    "key": "{focus.outlineColor}",
+  "focus-outline-color": {
+    "key": "{focus.outline-color}",
     "$value": "#1f6feb",
     "$type": "color",
     "$description": "Outline color for focus states on interactive elements",
@@ -39683,7 +39684,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}",
@@ -39700,6 +39701,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": "#1f6feb",
+    "$type": "color",
+    "$deprecated": "#1f6feb",
+    "$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/dark.json

@@ -39605,7 +39605,11 @@
   },
   "focus-outline": {
     "key": "{focus.outline}",
-    "$value": "2px solid #1f6feb",
+    "$value": {
+      "color": "#1f6feb",
+      "style": "solid",
+      "width": ["0.125rem", "2px"]
+    },
     "$type": "border",
     "$description": "Focus ring outline for keyboard navigation and accessibility.",
     "$extensions": {
@@ -39614,16 +39618,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.",
@@ -39639,8 +39640,8 @@
     "attributes": {},
     "path": ["focus", "outline"]
   },
-  "focus-outlineColor": {
-    "key": "{focus.outlineColor}",
+  "focus-outline-color": {
+    "key": "{focus.outline-color}",
     "$value": "#1f6feb",
     "$type": "color",
     "$description": "Outline color for focus states on interactive elements",
@@ -39655,7 +39656,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}",
@@ -39672,6 +39673,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": "#1f6feb",
+    "$type": "color",
+    "$deprecated": "#1f6feb",
+    "$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-colorblind-high-contrast.json

@@ -39605,7 +39605,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": {
@@ -39614,16 +39618,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.",
@@ -39639,8 +39640,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",
@@ -39655,7 +39656,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}",
@@ -39672,6 +39673,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-colorblind.json

@@ -39595,7 +39595,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": {
@@ -39604,16 +39608,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.",
@@ -39629,8 +39630,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",
@@ -39645,7 +39646,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}",
@@ -39662,6 +39663,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-high-contrast.json

@@ -39607,7 +39607,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": {
@@ -39616,16 +39620,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.",
@@ -39641,8 +39642,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",
@@ -39657,7 +39658,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}",
@@ -39674,6 +39675,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",