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

package/dist/internalCss/light.css

@@ -288,9 +288,6 @@
   --base-display-color-yellow-8: #5c3d00;
   --base-display-color-yellow-9: #422b00;
   --bgColor-success-emphasis: #1f883d; /** Strong success background for prominent positive actions */
-  --borderWidth-thick: 0.125rem; /** Thick 2px border for emphasis. Use for focus indicators, selected states, or to emphasize important boundaries */
-  --borderWidth-thicker: 0.25rem; /** Extra thick 4px border for maximum emphasis. Use sparingly for high-contrast focus indicators or critical visual separators */
-  --borderWidth-thin: 0.0625rem; /** Standard 1px border width. Use for most borders, dividers, and outlines throughout the interface */
   --button-outline-bgColor-active: #0757ba;
   --button-primary-bgColor-active: #197935;
   --button-primary-bgColor-disabled: #95d8a6;
@@ -301,8 +298,6 @@
   --control-checked-bgColor-active: #0757ba;
   --control-checked-bgColor-hover: #0860ca;
   --fgColor-danger: #d1242f; /** Danger text for errors and destructive actions */
-  --outline-focus-offset: -0.125rem; /** 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: 0.125rem; /** Focus outline width (2px). Standard width for keyboard focus indicators to meet WCAG 2.4.7 accessibility requirements */
   --reactionButton-selected-bgColor-hover: #caecff;
   --avatarStack-fade-bgColor-default: var(--base-color-neutral-7);
   --avatarStack-fade-bgColor-muted: var(--base-color-neutral-5);
@@ -348,10 +343,9 @@
   --borderColor-success-emphasis: var(--base-color-green-5); /** Strong success border for prominent positive elements */
   --borderColor-success-muted: #4ac26b66; /** Subtle success border for positive feedback elements */
   --borderColor-transparent: var(--base-color-transparent); /** Fully transparent border */
-  --borderWidth-default: var(--borderWidth-thin); /** Default border width for most UI elements. Alias of borderWidth.thin (1px) */
-  --boxShadow-thick: inset 0 0 0 var(--borderWidth-thick); /** Thick shadow (2px) used instead of a border for emphasis without layout shift */
-  --boxShadow-thicker: inset 0 0 0 var(--borderWidth-thicker); /** Thickest shadow (4px) used for high emphasis borders without layout shift. Use sparingly for maximum visual impact */
-  --boxShadow-thin: inset 0 0 0 var(--borderWidth-thin); /** Thin shadow used instead of a border to prevent layout shift */
+  --boxShadow-thick: inset 0 0 0 0.125rem; /** Thick shadow (2px) used instead of a border for emphasis without layout shift */
+  --boxShadow-thicker: inset 0 0 0 0.25rem; /** Thickest shadow (4px) used for high emphasis borders without layout shift. Use sparingly for maximum visual impact */
+  --boxShadow-thin: inset 0 0 0 0.0625rem; /** Thin shadow used instead of a border to prevent layout shift */
   --button-danger-bgColor-active: var(--base-color-red-6);
   --button-danger-fgColor-disabled: #d1242f80;
   --button-danger-fgColor-rest: var(--fgColor-danger);
@@ -1087,7 +1081,7 @@
   --fgColor-open: var(--fgColor-success); /** Text color for open state indicators (issues, PRs) */
   --fgColor-upsell: var(--fgColor-done); /** Text color for upsell and promotional content */
   --fgColor-white: var(--base-color-neutral-0); /** Pure white text */
-  --focus-outlineColor: var(--borderColor-accent-emphasis); /** Outline color for focus states on interactive elements */
+  --focus-outline-color: var(--borderColor-accent-emphasis); /** Outline color for focus states on interactive elements */
   --header-fgColor-default: #ffffffb3;
   --header-fgColor-logo: var(--base-color-neutral-0);
   --overlay-bgColor: var(--base-color-neutral-0);
@@ -1175,7 +1169,8 @@
   --diffBlob-deletionWord-fgColor: var(--fgColor-default);
   --diffBlob-hunkNum-fgColor-hover: var(--fgColor-onEmphasis);
   --diffBlob-hunkNum-fgColor-rest: var(--fgColor-default);
-  --focus-outline: 2px solid #0969da; /** Focus ring outline for keyboard navigation and accessibility. */
+  --focus-outline: 0.125rem solid #0969da; /** Focus ring outline for keyboard navigation and accessibility. */
+  --focus-outlineColor: var(--focus-outline-color); /** Deprecated. Use focus.outline-color instead. */
   --overlay-borderColor: #d1d9e080;
   --reactionButton-selected-fgColor-rest: var(--fgColor-link);
   --tooltip-fgColor: var(--fgColor-onEmphasis);
@@ -1489,9 +1484,6 @@
     --base-display-color-yellow-8: #5c3d00;
     --base-display-color-yellow-9: #422b00;
     --bgColor-success-emphasis: #1f883d; /** Strong success background for prominent positive actions */
-    --borderWidth-thick: 0.125rem; /** Thick 2px border for emphasis. Use for focus indicators, selected states, or to emphasize important boundaries */
-    --borderWidth-thicker: 0.25rem; /** Extra thick 4px border for maximum emphasis. Use sparingly for high-contrast focus indicators or critical visual separators */
-    --borderWidth-thin: 0.0625rem; /** Standard 1px border width. Use for most borders, dividers, and outlines throughout the interface */
     --button-outline-bgColor-active: #0757ba;
     --button-primary-bgColor-active: #197935;
     --button-primary-bgColor-disabled: #95d8a6;
@@ -1502,8 +1494,6 @@
     --control-checked-bgColor-active: #0757ba;
     --control-checked-bgColor-hover: #0860ca;
     --fgColor-danger: #d1242f; /** Danger text for errors and destructive actions */
-    --outline-focus-offset: -0.125rem; /** 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: 0.125rem; /** Focus outline width (2px). Standard width for keyboard focus indicators to meet WCAG 2.4.7 accessibility requirements */
     --reactionButton-selected-bgColor-hover: #caecff;
     --avatarStack-fade-bgColor-default: var(--base-color-neutral-7);
     --avatarStack-fade-bgColor-muted: var(--base-color-neutral-5);
@@ -1549,10 +1539,9 @@
     --borderColor-success-emphasis: var(--base-color-green-5); /** Strong success border for prominent positive elements */
     --borderColor-success-muted: #4ac26b66; /** Subtle success border for positive feedback elements */
     --borderColor-transparent: var(--base-color-transparent); /** Fully transparent border */
-    --borderWidth-default: var(--borderWidth-thin); /** Default border width for most UI elements. Alias of borderWidth.thin (1px) */
-    --boxShadow-thick: inset 0 0 0 var(--borderWidth-thick); /** Thick shadow (2px) used instead of a border for emphasis without layout shift */
-    --boxShadow-thicker: inset 0 0 0 var(--borderWidth-thicker); /** Thickest shadow (4px) used for high emphasis borders without layout shift. Use sparingly for maximum visual impact */
-    --boxShadow-thin: inset 0 0 0 var(--borderWidth-thin); /** Thin shadow used instead of a border to prevent layout shift */
+    --boxShadow-thick: inset 0 0 0 0.125rem; /** Thick shadow (2px) used instead of a border for emphasis without layout shift */
+    --boxShadow-thicker: inset 0 0 0 0.25rem; /** Thickest shadow (4px) used for high emphasis borders without layout shift. Use sparingly for maximum visual impact */
+    --boxShadow-thin: inset 0 0 0 0.0625rem; /** Thin shadow used instead of a border to prevent layout shift */
     --button-danger-bgColor-active: var(--base-color-red-6);
     --button-danger-fgColor-disabled: #d1242f80;
     --button-danger-fgColor-rest: var(--fgColor-danger);
@@ -2288,7 +2277,7 @@
     --fgColor-open: var(--fgColor-success); /** Text color for open state indicators (issues, PRs) */
     --fgColor-upsell: var(--fgColor-done); /** Text color for upsell and promotional content */
     --fgColor-white: var(--base-color-neutral-0); /** Pure white text */
-    --focus-outlineColor: var(--borderColor-accent-emphasis); /** Outline color for focus states on interactive elements */
+    --focus-outline-color: var(--borderColor-accent-emphasis); /** Outline color for focus states on interactive elements */
     --header-fgColor-default: #ffffffb3;
     --header-fgColor-logo: var(--base-color-neutral-0);
     --overlay-bgColor: var(--base-color-neutral-0);
@@ -2376,7 +2365,8 @@
     --diffBlob-deletionWord-fgColor: var(--fgColor-default);
     --diffBlob-hunkNum-fgColor-hover: var(--fgColor-onEmphasis);
     --diffBlob-hunkNum-fgColor-rest: var(--fgColor-default);
-    --focus-outline: 2px solid #0969da; /** Focus ring outline for keyboard navigation and accessibility. */
+    --focus-outline: 0.125rem solid #0969da; /** Focus ring outline for keyboard navigation and accessibility. */
+    --focus-outlineColor: var(--focus-outline-color); /** Deprecated. Use focus.outline-color instead. */
     --overlay-borderColor: #d1d9e080;
     --reactionButton-selected-fgColor-rest: var(--fgColor-link);
     --tooltip-fgColor: var(--fgColor-onEmphasis);

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

@@ -183,43 +183,43 @@
     "attributes": {},
     "path": ["boxShadow", "thin"]
   },
-  "outline-focus-offset": {
-    "key": "{outline.focus.offset}",
+  "focus-outline-offset": {
+    "key": "{focus.outline-offset}",
     "$value": ["-0.125rem", "-2px"],
-    "$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"]
       }
     },
-    "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"]
   },
-  "outline-focus-width": {
-    "key": "{outline.focus.width}",
+  "focus-outline-width": {
+    "key": "{focus.outline-width}",
     "$value": ["0.125rem", "2px"],
-    "$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",
@@ -230,15 +230,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",
@@ -249,6 +249,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"]
+  },
+  "outline-focus-offset": {
+    "key": "{outline.focus.offset}",
+    "$value": ["-0.125rem", "-2px"],
+    "$type": "dimension",
+    "$deprecated": ["-0.125rem", "-2px"],
+    "$description": "Deprecated. Use focus.outline-offset instead.",
+    "$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"]
+  },
+  "outline-focus-width": {
+    "key": "{outline.focus.width}",
+    "$value": ["0.125rem", "2px"],
+    "$type": "dimension",
+    "$deprecated": ["0.125rem", "2px"],
+    "$description": "Deprecated. Use focus.outline-width instead.",
+    "$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",

package/dist/styleLint/functional/themes/dark-colorblind-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-colorblind.json

@@ -39611,7 +39611,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": {
@@ -39620,16 +39624,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.",
@@ -39645,8 +39646,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",
@@ -39661,7 +39662,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}",
@@ -39678,6 +39679,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-dimmed-high-contrast.json

@@ -39629,7 +39629,11 @@
   },
   "focus-outline": {
     "key": "{focus.outline}",
-    "$value": "2px solid #6cb6ff",
+    "$value": {
+      "color": "#6cb6ff",
+      "style": "solid",
+      "width": ["0.125rem", "2px"]
+    },
     "$type": "border",
     "$description": "Focus ring outline for keyboard navigation and accessibility.",
     "$extensions": {
@@ -39638,16 +39642,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.",
@@ -39663,8 +39664,8 @@
     "attributes": {},
     "path": ["focus", "outline"]
   },
-  "focus-outlineColor": {
-    "key": "{focus.outlineColor}",
+  "focus-outline-color": {
+    "key": "{focus.outline-color}",
     "$value": "#6cb6ff",
     "$type": "color",
     "$description": "Outline color for focus states on interactive elements",
@@ -39679,7 +39680,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}",
@@ -39696,6 +39697,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": "#6cb6ff",
+    "$type": "color",
+    "$deprecated": "#6cb6ff",
+    "$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-dimmed.json

@@ -39649,7 +39649,11 @@
   },
   "focus-outline": {
     "key": "{focus.outline}",
-    "$value": "2px solid #316dca",
+    "$value": {
+      "color": "#316dca",
+      "style": "solid",
+      "width": ["0.125rem", "2px"]
+    },
     "$type": "border",
     "$description": "Focus ring outline for keyboard navigation and accessibility.",
     "$extensions": {
@@ -39658,16 +39662,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.",
@@ -39683,8 +39684,8 @@
     "attributes": {},
     "path": ["focus", "outline"]
   },
-  "focus-outlineColor": {
-    "key": "{focus.outlineColor}",
+  "focus-outline-color": {
+    "key": "{focus.outline-color}",
     "$value": "#316dca",
     "$type": "color",
     "$description": "Outline color for focus states on interactive elements",
@@ -39699,7 +39700,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}",
@@ -39716,6 +39717,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": "#316dca",
+    "$type": "color",
+    "$deprecated": "#316dca",
+    "$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",