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

package/DESIGN_TOKENS_SPEC.md

@@ -400,11 +400,16 @@ Focus ring outline for keyboard navigation and accessibility.
 **U:** accessibility-indicator, focus-ring, keyboard-navigation
 **R:** 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.
 
-### focus-outlineColor
+### focus-outline-color
 Outline color for focus states on interactive elements
 **U:** accessibility-indicator, focus-ring, keyboard-navigation
 **R:** 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.
 
+### focus-outline-width
+Focus outline width (2px). Standard width for keyboard focus indicators to meet WCAG 2.4.7 accessibility requirements
+**U:** accessibility, focus-ring, keyboard-focus
+**R:** MUST use for all keyboard focus indicators. Required for WCAG 2.4.7 compliance.
+
 ## Font Stacks
 
 Font family tokens.
@@ -424,15 +429,6 @@ Display font stack for headings and titles. Same as sansSerif but semantically d
 **U:** display-text, heading, title
 **R:** Use for headings and display text. Prefer over sansSerif for titles.
 
-## Outline
-
-Outline tokens for focus indicators.
-
-### outline-focus-width
-Focus outline width (2px). Standard width for keyboard focus indicators to meet WCAG 2.4.7 accessibility requirements
-**U:** accessibility, focus-ring, keyboard-focus
-**R:** MUST use for all keyboard focus indicators. Required for WCAG 2.4.7 compliance.
-
 ## Overlay
 
 Tokens for modals, dialogs, popovers, and dropdown menus.

package/dist/build/platforms/css.js

@@ -49,6 +49,7 @@ export const css = (outputFile, prefix, buildPath, options) => {
                 filter: token => isSource(token) &&
                     (options === null || options === void 0 ? void 0 : options.themed) === true &&
                     token.$type !== 'custom-viewportRange' &&
+                    token.$type !== 'dimension' &&
                     !isFromFile(token, [
                         'src/tokens/functional/size/size-coarse.json5',
                         'src/tokens/functional/size/size-fine.json5',

package/dist/css/functional/size/border.css

@@ -2,10 +2,12 @@
   --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 */
-  --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 */
+  --focus-outline-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 */
+  --focus-outline-width: 0.125rem; /** Focus outline width (2px). Standard width for keyboard focus indicators to meet WCAG 2.4.7 accessibility requirements */
   --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 */
+  --outline-focus-offset: var(--focus-outline-offset); /** Deprecated. Use focus.outline-offset instead. */
+  --outline-focus-width: var(--focus-outline-width); /** Deprecated. Use focus.outline-width instead. */
 }

package/dist/css/functional/themes/dark-colorblind-high-contrast.css

@@ -765,7 +765,7 @@
   --fgColor-onEmphasis: #ffffff; /** Text color for use on emphasis backgrounds */
   --fgColor-onInverse: #010409; /** Text color for use on inverse backgrounds */
   --fgColor-white: #ffffff; /** 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;
   --label-auburn-borderColor: var(--label-auburn-fgColor-rest);
   --label-blue-borderColor: var(--label-blue-fgColor-rest);
@@ -876,7 +876,8 @@
   --diffBlob-expander-iconColor: var(--fgColor-default);
   --diffBlob-hunkNum-fgColor-hover: var(--fgColor-onEmphasis);
   --diffBlob-hunkNum-fgColor-rest: var(--fgColor-default);
-  --focus-outline: 2px solid #409eff; /** Focus ring outline for keyboard navigation and accessibility. */
+  --focus-outline: 0.125rem solid #409eff; /** Focus ring outline for keyboard navigation and accessibility. */
+  --focus-outlineColor: var(--focus-outline-color); /** Deprecated. Use focus.outline-color instead. */
   --page-header-bgColor: var(--bgColor-default);
   --progressBar-track-bgColor: var(--bgColor-inverse);
   --shadow-floating-large: 0 0 0 1px #b7bdc8, 0 24px 48px 0 #010409; /** Large floating shadow for modals and dialogs */
@@ -1667,7 +1668,7 @@
     --fgColor-onEmphasis: #ffffff; /** Text color for use on emphasis backgrounds */
     --fgColor-onInverse: #010409; /** Text color for use on inverse backgrounds */
     --fgColor-white: #ffffff; /** 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;
     --label-auburn-borderColor: var(--label-auburn-fgColor-rest);
     --label-blue-borderColor: var(--label-blue-fgColor-rest);
@@ -1778,7 +1779,8 @@
     --diffBlob-expander-iconColor: var(--fgColor-default);
     --diffBlob-hunkNum-fgColor-hover: var(--fgColor-onEmphasis);
     --diffBlob-hunkNum-fgColor-rest: var(--fgColor-default);
-    --focus-outline: 2px solid #409eff; /** Focus ring outline for keyboard navigation and accessibility. */
+    --focus-outline: 0.125rem solid #409eff; /** Focus ring outline for keyboard navigation and accessibility. */
+    --focus-outlineColor: var(--focus-outline-color); /** Deprecated. Use focus.outline-color instead. */
     --page-header-bgColor: var(--bgColor-default);
     --progressBar-track-bgColor: var(--bgColor-inverse);
     --shadow-floating-large: 0 0 0 1px #b7bdc8, 0 24px 48px 0 #010409; /** Large floating shadow for modals and dialogs */

package/dist/css/functional/themes/dark-colorblind.css

@@ -804,7 +804,7 @@
   --fgColor-onInverse: #010409; /** Text color for use on inverse backgrounds */
   --fgColor-upsell: var(--fgColor-done); /** Text color for upsell and promotional content */
   --fgColor-white: #ffffff; /** 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;
   --overlay-bgColor: #010409;
   --page-header-bgColor: var(--bgColor-default);
@@ -882,7 +882,8 @@
   --controlTrack-fgColor-disabled: var(--fgColor-onEmphasis);
   --dashboard-bgColor: var(--bgColor-inset);
   --diffBlob-hunkNum-fgColor-hover: var(--fgColor-onEmphasis);
-  --focus-outline: 2px solid #1f6feb; /** Focus ring outline for keyboard navigation and accessibility. */
+  --focus-outline: 0.125rem solid #1f6feb; /** Focus ring outline for keyboard navigation and accessibility. */
+  --focus-outlineColor: var(--focus-outline-color); /** Deprecated. Use focus.outline-color instead. */
   --overlay-borderColor: var(--borderColor-muted);
   --tooltip-fgColor: var(--fgColor-onEmphasis);
   --border-draft-emphasis: 0.0625rem solid #656c76;
@@ -1706,7 +1707,7 @@
     --fgColor-onInverse: #010409; /** Text color for use on inverse backgrounds */
     --fgColor-upsell: var(--fgColor-done); /** Text color for upsell and promotional content */
     --fgColor-white: #ffffff; /** 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;
     --overlay-bgColor: #010409;
     --page-header-bgColor: var(--bgColor-default);
@@ -1784,7 +1785,8 @@
     --controlTrack-fgColor-disabled: var(--fgColor-onEmphasis);
     --dashboard-bgColor: var(--bgColor-inset);
     --diffBlob-hunkNum-fgColor-hover: var(--fgColor-onEmphasis);
-    --focus-outline: 2px solid #1f6feb; /** Focus ring outline for keyboard navigation and accessibility. */
+    --focus-outline: 0.125rem solid #1f6feb; /** Focus ring outline for keyboard navigation and accessibility. */
+    --focus-outlineColor: var(--focus-outline-color); /** Deprecated. Use focus.outline-color instead. */
     --overlay-borderColor: var(--borderColor-muted);
     --tooltip-fgColor: var(--fgColor-onEmphasis);
     --border-draft-emphasis: 0.0625rem solid #656c76;

package/dist/css/functional/themes/dark-dimmed-high-contrast.css

@@ -796,7 +796,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: #cdd9e5; /** 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: #cdd9e5b3;
   --label-auburn-borderColor: var(--label-auburn-fgColor-rest);
   --label-blue-borderColor: var(--label-blue-fgColor-rest);
@@ -878,7 +878,8 @@
   --controlKnob-borderColor-checked: var(--control-checked-bgColor-rest);
   --controlKnob-borderColor-disabled: var(--control-bgColor-disabled);
   --controlTrack-borderColor-rest: var(--borderColor-emphasis);
-  --focus-outline: 2px solid #6cb6ff; /** Focus ring outline for keyboard navigation and accessibility. */
+  --focus-outline: 0.125rem solid #6cb6ff; /** Focus ring outline for keyboard navigation and accessibility. */
+  --focus-outlineColor: var(--focus-outline-color); /** Deprecated. Use focus.outline-color instead. */
   --progressBar-track-bgColor: var(--bgColor-inverse);
   --reactionButton-selected-fgColor-rest: var(--fgColor-link);
   --shadow-floating-large: 0 0 0 1px #b7bdc8, 0 24px 48px 0 #010409; /** Large floating shadow for modals and dialogs */
@@ -1698,7 +1699,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: #cdd9e5; /** 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: #cdd9e5b3;
     --label-auburn-borderColor: var(--label-auburn-fgColor-rest);
     --label-blue-borderColor: var(--label-blue-fgColor-rest);
@@ -1780,7 +1781,8 @@
     --controlKnob-borderColor-checked: var(--control-checked-bgColor-rest);
     --controlKnob-borderColor-disabled: var(--control-bgColor-disabled);
     --controlTrack-borderColor-rest: var(--borderColor-emphasis);
-    --focus-outline: 2px solid #6cb6ff; /** Focus ring outline for keyboard navigation and accessibility. */
+    --focus-outline: 0.125rem solid #6cb6ff; /** Focus ring outline for keyboard navigation and accessibility. */
+    --focus-outlineColor: var(--focus-outline-color); /** Deprecated. Use focus.outline-color instead. */
     --progressBar-track-bgColor: var(--bgColor-inverse);
     --reactionButton-selected-fgColor-rest: var(--fgColor-link);
     --shadow-floating-large: 0 0 0 1px #b7bdc8, 0 24px 48px 0 #010409; /** Large floating shadow for modals and dialogs */

package/dist/css/functional/themes/dark-dimmed.css

@@ -830,7 +830,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: #cdd9e5; /** 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: #cdd9e5b3;
   --page-header-bgColor: var(--bgColor-default);
   --progressBar-bgColor-accent: var(--bgColor-accent-emphasis);
@@ -895,7 +895,8 @@
   --controlKnob-bgColor-disabled: var(--control-bgColor-disabled);
   --controlKnob-borderColor-checked: var(--control-checked-bgColor-rest);
   --controlKnob-borderColor-disabled: var(--control-bgColor-disabled);
-  --focus-outline: 2px solid #316dca; /** Focus ring outline for keyboard navigation and accessibility. */
+  --focus-outline: 0.125rem solid #316dca; /** Focus ring outline for keyboard navigation and accessibility. */
+  --focus-outlineColor: var(--focus-outline-color); /** Deprecated. Use focus.outline-color instead. */
   --border-draft-emphasis: 0.0625rem solid #656c76;
   --button-danger-borderColor-hover: var(--button-primary-borderColor-rest);
   --button-outline-borderColor-active: var(--button-outline-borderColor-hover);
@@ -1732,7 +1733,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: #cdd9e5; /** 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: #cdd9e5b3;
     --page-header-bgColor: var(--bgColor-default);
     --progressBar-bgColor-accent: var(--bgColor-accent-emphasis);
@@ -1797,7 +1798,8 @@
     --controlKnob-bgColor-disabled: var(--control-bgColor-disabled);
     --controlKnob-borderColor-checked: var(--control-checked-bgColor-rest);
     --controlKnob-borderColor-disabled: var(--control-bgColor-disabled);
-    --focus-outline: 2px solid #316dca; /** Focus ring outline for keyboard navigation and accessibility. */
+    --focus-outline: 0.125rem solid #316dca; /** Focus ring outline for keyboard navigation and accessibility. */
+    --focus-outlineColor: var(--focus-outline-color); /** Deprecated. Use focus.outline-color instead. */
     --border-draft-emphasis: 0.0625rem solid #656c76;
     --button-danger-borderColor-hover: var(--button-primary-borderColor-rest);
     --button-outline-borderColor-active: var(--button-outline-borderColor-hover);

package/dist/css/functional/themes/dark-high-contrast.css

@@ -765,7 +765,7 @@
   --fgColor-onEmphasis: #ffffff; /** Text color for use on emphasis backgrounds */
   --fgColor-onInverse: #010409; /** Text color for use on inverse backgrounds */
   --fgColor-white: #ffffff; /** 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;
   --label-auburn-borderColor: var(--label-auburn-fgColor-rest);
   --label-blue-borderColor: var(--label-blue-fgColor-rest);
@@ -874,7 +874,8 @@
   --diffBlob-expander-iconColor: var(--fgColor-default);
   --diffBlob-hunkNum-fgColor-hover: var(--fgColor-onEmphasis);
   --diffBlob-hunkNum-fgColor-rest: var(--fgColor-default);
-  --focus-outline: 2px solid #409eff; /** Focus ring outline for keyboard navigation and accessibility. */
+  --focus-outline: 0.125rem solid #409eff; /** Focus ring outline for keyboard navigation and accessibility. */
+  --focus-outlineColor: var(--focus-outline-color); /** Deprecated. Use focus.outline-color instead. */
   --page-header-bgColor: var(--bgColor-default);
   --progressBar-track-bgColor: var(--bgColor-inverse);
   --shadow-floating-large: 0 0 0 1px #b7bdc8, 0 24px 48px 0 #010409; /** Large floating shadow for modals and dialogs */
@@ -1667,7 +1668,7 @@
     --fgColor-onEmphasis: #ffffff; /** Text color for use on emphasis backgrounds */
     --fgColor-onInverse: #010409; /** Text color for use on inverse backgrounds */
     --fgColor-white: #ffffff; /** 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;
     --label-auburn-borderColor: var(--label-auburn-fgColor-rest);
     --label-blue-borderColor: var(--label-blue-fgColor-rest);
@@ -1776,7 +1777,8 @@
     --diffBlob-expander-iconColor: var(--fgColor-default);
     --diffBlob-hunkNum-fgColor-hover: var(--fgColor-onEmphasis);
     --diffBlob-hunkNum-fgColor-rest: var(--fgColor-default);
-    --focus-outline: 2px solid #409eff; /** Focus ring outline for keyboard navigation and accessibility. */
+    --focus-outline: 0.125rem solid #409eff; /** Focus ring outline for keyboard navigation and accessibility. */
+    --focus-outlineColor: var(--focus-outline-color); /** Deprecated. Use focus.outline-color instead. */
     --page-header-bgColor: var(--bgColor-default);
     --progressBar-track-bgColor: var(--bgColor-inverse);
     --shadow-floating-large: 0 0 0 1px #b7bdc8, 0 24px 48px 0 #010409; /** Large floating shadow for modals and dialogs */

package/dist/css/functional/themes/dark-tritanopia-high-contrast.css

@@ -765,7 +765,7 @@
   --fgColor-onEmphasis: #ffffff; /** Text color for use on emphasis backgrounds */
   --fgColor-onInverse: #010409; /** Text color for use on inverse backgrounds */
   --fgColor-white: #ffffff; /** 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;
   --label-auburn-borderColor: var(--label-auburn-fgColor-rest);
   --label-blue-borderColor: var(--label-blue-fgColor-rest);
@@ -876,7 +876,8 @@
   --diffBlob-expander-iconColor: var(--fgColor-default);
   --diffBlob-hunkNum-fgColor-hover: var(--fgColor-onEmphasis);
   --diffBlob-hunkNum-fgColor-rest: var(--fgColor-default);
-  --focus-outline: 2px solid #409eff; /** Focus ring outline for keyboard navigation and accessibility. */
+  --focus-outline: 0.125rem solid #409eff; /** Focus ring outline for keyboard navigation and accessibility. */
+  --focus-outlineColor: var(--focus-outline-color); /** Deprecated. Use focus.outline-color instead. */
   --page-header-bgColor: var(--bgColor-default);
   --progressBar-track-bgColor: var(--bgColor-inverse);
   --shadow-floating-large: 0 0 0 1px #b7bdc8, 0 24px 48px 0 #010409; /** Large floating shadow for modals and dialogs */
@@ -1667,7 +1668,7 @@
     --fgColor-onEmphasis: #ffffff; /** Text color for use on emphasis backgrounds */
     --fgColor-onInverse: #010409; /** Text color for use on inverse backgrounds */
     --fgColor-white: #ffffff; /** 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;
     --label-auburn-borderColor: var(--label-auburn-fgColor-rest);
     --label-blue-borderColor: var(--label-blue-fgColor-rest);
@@ -1778,7 +1779,8 @@
     --diffBlob-expander-iconColor: var(--fgColor-default);
     --diffBlob-hunkNum-fgColor-hover: var(--fgColor-onEmphasis);
     --diffBlob-hunkNum-fgColor-rest: var(--fgColor-default);
-    --focus-outline: 2px solid #409eff; /** Focus ring outline for keyboard navigation and accessibility. */
+    --focus-outline: 0.125rem solid #409eff; /** Focus ring outline for keyboard navigation and accessibility. */
+    --focus-outlineColor: var(--focus-outline-color); /** Deprecated. Use focus.outline-color instead. */
     --page-header-bgColor: var(--bgColor-default);
     --progressBar-track-bgColor: var(--bgColor-inverse);
     --shadow-floating-large: 0 0 0 1px #b7bdc8, 0 24px 48px 0 #010409; /** Large floating shadow for modals and dialogs */

package/dist/css/functional/themes/dark-tritanopia.css

@@ -806,7 +806,7 @@
   --fgColor-onInverse: #010409; /** Text color for use on inverse backgrounds */
   --fgColor-upsell: var(--fgColor-done); /** Text color for upsell and promotional content */
   --fgColor-white: #ffffff; /** 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;
   --overlay-bgColor: #010409;
   --page-header-bgColor: var(--bgColor-default);
@@ -882,7 +882,8 @@
   --controlTrack-fgColor-disabled: var(--fgColor-onEmphasis);
   --dashboard-bgColor: var(--bgColor-inset);
   --diffBlob-hunkNum-fgColor-hover: var(--fgColor-onEmphasis);
-  --focus-outline: 2px solid #1f6feb; /** Focus ring outline for keyboard navigation and accessibility. */
+  --focus-outline: 0.125rem solid #1f6feb; /** Focus ring outline for keyboard navigation and accessibility. */
+  --focus-outlineColor: var(--focus-outline-color); /** Deprecated. Use focus.outline-color instead. */
   --overlay-borderColor: var(--borderColor-muted);
   --tooltip-fgColor: var(--fgColor-onEmphasis);
   --border-draft-emphasis: 0.0625rem solid #656c76;
@@ -1708,7 +1709,7 @@
     --fgColor-onInverse: #010409; /** Text color for use on inverse backgrounds */
     --fgColor-upsell: var(--fgColor-done); /** Text color for upsell and promotional content */
     --fgColor-white: #ffffff; /** 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;
     --overlay-bgColor: #010409;
     --page-header-bgColor: var(--bgColor-default);
@@ -1784,7 +1785,8 @@
     --controlTrack-fgColor-disabled: var(--fgColor-onEmphasis);
     --dashboard-bgColor: var(--bgColor-inset);
     --diffBlob-hunkNum-fgColor-hover: var(--fgColor-onEmphasis);
-    --focus-outline: 2px solid #1f6feb; /** Focus ring outline for keyboard navigation and accessibility. */
+    --focus-outline: 0.125rem solid #1f6feb; /** Focus ring outline for keyboard navigation and accessibility. */
+    --focus-outlineColor: var(--focus-outline-color); /** Deprecated. Use focus.outline-color instead. */
     --overlay-borderColor: var(--borderColor-muted);
     --tooltip-fgColor: var(--fgColor-onEmphasis);
     --border-draft-emphasis: 0.0625rem solid #656c76;

package/dist/css/functional/themes/dark.css

@@ -804,7 +804,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: #ffffff; /** 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;
   --overlay-bgColor: #010409;
   --page-header-bgColor: var(--bgColor-default);
@@ -880,7 +880,8 @@
   --controlTrack-fgColor-disabled: var(--fgColor-onEmphasis);
   --dashboard-bgColor: var(--bgColor-inset);
   --diffBlob-hunkNum-fgColor-hover: var(--fgColor-onEmphasis);
-  --focus-outline: 2px solid #1f6feb; /** Focus ring outline for keyboard navigation and accessibility. */
+  --focus-outline: 0.125rem solid #1f6feb; /** Focus ring outline for keyboard navigation and accessibility. */
+  --focus-outlineColor: var(--focus-outline-color); /** Deprecated. Use focus.outline-color instead. */
   --overlay-borderColor: var(--borderColor-muted);
   --tooltip-fgColor: var(--fgColor-onEmphasis);
   --border-draft-emphasis: 0.0625rem solid #656c76;
@@ -1706,7 +1707,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: #ffffff; /** 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;
     --overlay-bgColor: #010409;
     --page-header-bgColor: var(--bgColor-default);
@@ -1782,7 +1783,8 @@
     --controlTrack-fgColor-disabled: var(--fgColor-onEmphasis);
     --dashboard-bgColor: var(--bgColor-inset);
     --diffBlob-hunkNum-fgColor-hover: var(--fgColor-onEmphasis);
-    --focus-outline: 2px solid #1f6feb; /** Focus ring outline for keyboard navigation and accessibility. */
+    --focus-outline: 0.125rem solid #1f6feb; /** Focus ring outline for keyboard navigation and accessibility. */
+    --focus-outlineColor: var(--focus-outline-color); /** Deprecated. Use focus.outline-color instead. */
     --overlay-borderColor: var(--borderColor-muted);
     --tooltip-fgColor: var(--fgColor-onEmphasis);
     --border-draft-emphasis: 0.0625rem solid #656c76;

package/dist/css/functional/themes/light-colorblind-high-contrast.css

@@ -774,7 +774,7 @@
   --fgColor-onInverse: #ffffff; /** Text color for use on inverse backgrounds */
   --fgColor-upsell: var(--fgColor-done); /** Text color for upsell and promotional content */
   --fgColor-white: #ffffff; /** 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: #ffffff;
   --label-auburn-borderColor: var(--label-auburn-fgColor-rest);
@@ -888,7 +888,8 @@
   --diffBlob-expander-iconColor: var(--fgColor-default);
   --diffBlob-hunkNum-fgColor-hover: var(--fgColor-default);
   --diffBlob-hunkNum-fgColor-rest: var(--fgColor-default);
-  --focus-outline: 2px solid #0349b4; /** Focus ring outline for keyboard navigation and accessibility. */
+  --focus-outline: 0.125rem solid #0349b4; /** Focus ring outline for keyboard navigation and accessibility. */
+  --focus-outlineColor: var(--focus-outline-color); /** Deprecated. Use focus.outline-color instead. */
   --progressBar-track-bgColor: var(--bgColor-default);
   --reactionButton-selected-fgColor-rest: var(--fgColor-link);
   --shadow-floating-large: 0 0 0 1px #454c54, 0 40px 80px 0 #25292e3d; /** Large floating shadow for modals and dialogs */
@@ -1676,7 +1677,7 @@
     --fgColor-onInverse: #ffffff; /** Text color for use on inverse backgrounds */
     --fgColor-upsell: var(--fgColor-done); /** Text color for upsell and promotional content */
     --fgColor-white: #ffffff; /** 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: #ffffff;
     --label-auburn-borderColor: var(--label-auburn-fgColor-rest);
@@ -1790,7 +1791,8 @@
     --diffBlob-expander-iconColor: var(--fgColor-default);
     --diffBlob-hunkNum-fgColor-hover: var(--fgColor-default);
     --diffBlob-hunkNum-fgColor-rest: var(--fgColor-default);
-    --focus-outline: 2px solid #0349b4; /** Focus ring outline for keyboard navigation and accessibility. */
+    --focus-outline: 0.125rem solid #0349b4; /** Focus ring outline for keyboard navigation and accessibility. */
+    --focus-outlineColor: var(--focus-outline-color); /** Deprecated. Use focus.outline-color instead. */
     --progressBar-track-bgColor: var(--bgColor-default);
     --reactionButton-selected-fgColor-rest: var(--fgColor-link);
     --shadow-floating-large: 0 0 0 1px #454c54, 0 40px 80px 0 #25292e3d; /** Large floating shadow for modals and dialogs */

package/dist/css/functional/themes/light-colorblind.css

@@ -790,7 +790,7 @@
   --fgColor-onInverse: #ffffff; /** Text color for use on inverse backgrounds */
   --fgColor-upsell: var(--fgColor-done); /** Text color for upsell and promotional content */
   --fgColor-white: #ffffff; /** 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: #ffffff;
   --overlay-bgColor: #ffffff;
@@ -882,7 +882,8 @@
   --diffBlob-deletionWord-fgColor: var(--fgColor-default);
   --diffBlob-hunkNum-fgColor-hover: var(--fgColor-default);
   --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);
@@ -1692,7 +1693,7 @@
     --fgColor-onInverse: #ffffff; /** Text color for use on inverse backgrounds */
     --fgColor-upsell: var(--fgColor-done); /** Text color for upsell and promotional content */
     --fgColor-white: #ffffff; /** 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: #ffffff;
     --overlay-bgColor: #ffffff;
@@ -1784,7 +1785,8 @@
     --diffBlob-deletionWord-fgColor: var(--fgColor-default);
     --diffBlob-hunkNum-fgColor-hover: var(--fgColor-default);
     --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/css/functional/themes/light-high-contrast.css

@@ -776,7 +776,7 @@
   --fgColor-onEmphasis: #ffffff; /** Text color for use on emphasis backgrounds */
   --fgColor-onInverse: #ffffff; /** Text color for use on inverse backgrounds */
   --fgColor-white: #ffffff; /** 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: #ffffff;
   --label-auburn-borderColor: var(--label-auburn-fgColor-rest);
@@ -886,7 +886,8 @@
   --diffBlob-expander-iconColor: var(--fgColor-default);
   --diffBlob-hunkNum-fgColor-hover: var(--fgColor-onEmphasis);
   --diffBlob-hunkNum-fgColor-rest: var(--fgColor-default);
-  --focus-outline: 2px solid #0349b4; /** Focus ring outline for keyboard navigation and accessibility. */
+  --focus-outline: 0.125rem solid #0349b4; /** Focus ring outline for keyboard navigation and accessibility. */
+  --focus-outlineColor: var(--focus-outline-color); /** Deprecated. Use focus.outline-color instead. */
   --progressBar-track-bgColor: var(--bgColor-default);
   --reactionButton-selected-fgColor-rest: var(--fgColor-link);
   --shadow-floating-large: 0 0 0 1px #454c54, 0 40px 80px 0 #25292e3d; /** Large floating shadow for modals and dialogs */
@@ -1678,7 +1679,7 @@
     --fgColor-onEmphasis: #ffffff; /** Text color for use on emphasis backgrounds */
     --fgColor-onInverse: #ffffff; /** Text color for use on inverse backgrounds */
     --fgColor-white: #ffffff; /** 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: #ffffff;
     --label-auburn-borderColor: var(--label-auburn-fgColor-rest);
@@ -1788,7 +1789,8 @@
     --diffBlob-expander-iconColor: var(--fgColor-default);
     --diffBlob-hunkNum-fgColor-hover: var(--fgColor-onEmphasis);
     --diffBlob-hunkNum-fgColor-rest: var(--fgColor-default);
-    --focus-outline: 2px solid #0349b4; /** Focus ring outline for keyboard navigation and accessibility. */
+    --focus-outline: 0.125rem solid #0349b4; /** Focus ring outline for keyboard navigation and accessibility. */
+    --focus-outlineColor: var(--focus-outline-color); /** Deprecated. Use focus.outline-color instead. */
     --progressBar-track-bgColor: var(--bgColor-default);
     --reactionButton-selected-fgColor-rest: var(--fgColor-link);
     --shadow-floating-large: 0 0 0 1px #454c54, 0 40px 80px 0 #25292e3d; /** Large floating shadow for modals and dialogs */

package/dist/css/functional/themes/light-tritanopia-high-contrast.css

@@ -774,7 +774,7 @@
   --fgColor-onInverse: #ffffff; /** Text color for use on inverse backgrounds */
   --fgColor-upsell: var(--fgColor-done); /** Text color for upsell and promotional content */
   --fgColor-white: #ffffff; /** 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: #ffffff;
   --label-auburn-borderColor: var(--label-auburn-fgColor-rest);
@@ -888,7 +888,8 @@
   --diffBlob-expander-iconColor: var(--fgColor-default);
   --diffBlob-hunkNum-fgColor-hover: var(--fgColor-default);
   --diffBlob-hunkNum-fgColor-rest: var(--fgColor-default);
-  --focus-outline: 2px solid #0349b4; /** Focus ring outline for keyboard navigation and accessibility. */
+  --focus-outline: 0.125rem solid #0349b4; /** Focus ring outline for keyboard navigation and accessibility. */
+  --focus-outlineColor: var(--focus-outline-color); /** Deprecated. Use focus.outline-color instead. */
   --progressBar-track-bgColor: var(--bgColor-default);
   --reactionButton-selected-fgColor-rest: var(--fgColor-link);
   --shadow-floating-large: 0 0 0 1px #454c54, 0 40px 80px 0 #25292e3d; /** Large floating shadow for modals and dialogs */
@@ -1676,7 +1677,7 @@
     --fgColor-onInverse: #ffffff; /** Text color for use on inverse backgrounds */
     --fgColor-upsell: var(--fgColor-done); /** Text color for upsell and promotional content */
     --fgColor-white: #ffffff; /** 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: #ffffff;
     --label-auburn-borderColor: var(--label-auburn-fgColor-rest);
@@ -1790,7 +1791,8 @@
     --diffBlob-expander-iconColor: var(--fgColor-default);
     --diffBlob-hunkNum-fgColor-hover: var(--fgColor-default);
     --diffBlob-hunkNum-fgColor-rest: var(--fgColor-default);
-    --focus-outline: 2px solid #0349b4; /** Focus ring outline for keyboard navigation and accessibility. */
+    --focus-outline: 0.125rem solid #0349b4; /** Focus ring outline for keyboard navigation and accessibility. */
+    --focus-outlineColor: var(--focus-outline-color); /** Deprecated. Use focus.outline-color instead. */
     --progressBar-track-bgColor: var(--bgColor-default);
     --reactionButton-selected-fgColor-rest: var(--fgColor-link);
     --shadow-floating-large: 0 0 0 1px #454c54, 0 40px 80px 0 #25292e3d; /** Large floating shadow for modals and dialogs */

package/dist/css/functional/themes/light-tritanopia.css

@@ -792,7 +792,7 @@
   --fgColor-onInverse: #ffffff; /** Text color for use on inverse backgrounds */
   --fgColor-upsell: var(--fgColor-done); /** Text color for upsell and promotional content */
   --fgColor-white: #ffffff; /** 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: #ffffff;
   --overlay-bgColor: #ffffff;
@@ -882,7 +882,8 @@
   --diffBlob-deletionWord-fgColor: var(--fgColor-default);
   --diffBlob-hunkNum-fgColor-hover: var(--fgColor-default);
   --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);
@@ -1694,7 +1695,7 @@
     --fgColor-onInverse: #ffffff; /** Text color for use on inverse backgrounds */
     --fgColor-upsell: var(--fgColor-done); /** Text color for upsell and promotional content */
     --fgColor-white: #ffffff; /** 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: #ffffff;
     --overlay-bgColor: #ffffff;
@@ -1784,7 +1785,8 @@
     --diffBlob-deletionWord-fgColor: var(--fgColor-default);
     --diffBlob-hunkNum-fgColor-hover: var(--fgColor-default);
     --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/css/functional/themes/light.css

@@ -792,7 +792,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: #ffffff; /** 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: #ffffff;
   --overlay-bgColor: #ffffff;
@@ -880,7 +880,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);
@@ -1694,7 +1695,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: #ffffff; /** 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: #ffffff;
     --overlay-bgColor: #ffffff;
@@ -1782,7 +1783,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);