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

package/dist/internalCss/dark-dimmed.css

@@ -287,9 +287,6 @@
   --base-display-color-yellow-7: #df9e11;
   --base-display-color-yellow-8: #edb431;
   --base-display-color-yellow-9: #f0ca6a;
-  --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-danger-fgColor-active: #ffffff;
   --button-danger-fgColor-hover: #ffffff;
   --button-danger-fgColor-rest: #ea5c53;
@@ -308,8 +305,6 @@
   --control-checked-borderColor-active: #3f7fdb;
   --control-checked-borderColor-hover: #3876d3;
   --fgColor-accent: #478be6; /** Accent text for links and interactive elements */
-  --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: #4285e55c;
   --avatar-shadow: 0 0 0 2px #0d1117;
   --avatarStack-fade-bgColor-default: var(--base-color-neutral-7);
@@ -359,10 +354,9 @@
   --borderColor-success-emphasis: var(--base-color-green-5); /** Strong success border for prominent positive elements */
   --borderColor-success-muted: #46954a66; /** 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-hover: var(--base-color-red-6);
   --button-danger-borderColor-rest: var(--control-borderColor-rest);
   --button-danger-iconColor-rest: var(--button-danger-fgColor-rest);
@@ -1125,7 +1119,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-13); /** 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);
@@ -1190,7 +1184,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);
@@ -1488,9 +1483,6 @@
     --base-display-color-yellow-7: #df9e11;
     --base-display-color-yellow-8: #edb431;
     --base-display-color-yellow-9: #f0ca6a;
-    --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-danger-fgColor-active: #ffffff;
     --button-danger-fgColor-hover: #ffffff;
     --button-danger-fgColor-rest: #ea5c53;
@@ -1509,8 +1501,6 @@
     --control-checked-borderColor-active: #3f7fdb;
     --control-checked-borderColor-hover: #3876d3;
     --fgColor-accent: #478be6; /** Accent text for links and interactive elements */
-    --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: #4285e55c;
     --avatar-shadow: 0 0 0 2px #0d1117;
     --avatarStack-fade-bgColor-default: var(--base-color-neutral-7);
@@ -1560,10 +1550,9 @@
     --borderColor-success-emphasis: var(--base-color-green-5); /** Strong success border for prominent positive elements */
     --borderColor-success-muted: #46954a66; /** 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-hover: var(--base-color-red-6);
     --button-danger-borderColor-rest: var(--control-borderColor-rest);
     --button-danger-iconColor-rest: var(--button-danger-fgColor-rest);
@@ -2326,7 +2315,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-13); /** 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);
@@ -2391,7 +2380,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/internalCss/dark-high-contrast.css

@@ -287,9 +287,6 @@
   --base-display-color-yellow-7: #df9e11;
   --base-display-color-yellow-8: #edb431;
   --base-display-color-yellow-9: #f0ca6a;
-  --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-primary-bgColor-active: #109135;
   --button-primary-bgColor-disabled: #048f2f;
   --button-primary-bgColor-hover: #08792b;
@@ -302,8 +299,6 @@
   --fgColor-done: #d3abff; /** Text color for completed/done state indicators */
   --fgColor-sponsors: #ff90c8; /** Text color for GitHub Sponsors content */
   --fgColor-success: #2bd853; /** Success text for positive feedback and completed states */
-  --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: #5dadff5c;
   --avatar-shadow: 0 0 0 2px #0d1117;
   --avatarStack-fade-bgColor-default: var(--base-color-neutral-7);
@@ -349,10 +344,9 @@
   --borderColor-success-muted: var(--base-color-green-4); /** Subtle success border for positive feedback elements */
   --borderColor-translucent: var(--base-color-neutral-9); /** Semi-transparent border for overlays and layered elements. Border-specific token — no bgColor-translucent counterpart exists by design. */
   --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-hover: var(--base-color-red-9);
   --button-danger-borderColor-active: var(--base-color-red-2);
   --button-danger-borderColor-hover: var(--base-color-red-2);
@@ -1060,7 +1054,7 @@
   --fgColor-onEmphasis: var(--base-color-neutral-13); /** Text color for use on emphasis backgrounds */
   --fgColor-onInverse: var(--base-color-neutral-0); /** Text color for use on inverse backgrounds */
   --fgColor-white: var(--base-color-neutral-13); /** 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);
@@ -1169,7 +1163,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 */
@@ -1488,9 +1483,6 @@
     --base-display-color-yellow-7: #df9e11;
     --base-display-color-yellow-8: #edb431;
     --base-display-color-yellow-9: #f0ca6a;
-    --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-primary-bgColor-active: #109135;
     --button-primary-bgColor-disabled: #048f2f;
     --button-primary-bgColor-hover: #08792b;
@@ -1503,8 +1495,6 @@
     --fgColor-done: #d3abff; /** Text color for completed/done state indicators */
     --fgColor-sponsors: #ff90c8; /** Text color for GitHub Sponsors content */
     --fgColor-success: #2bd853; /** Success text for positive feedback and completed states */
-    --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: #5dadff5c;
     --avatar-shadow: 0 0 0 2px #0d1117;
     --avatarStack-fade-bgColor-default: var(--base-color-neutral-7);
@@ -1550,10 +1540,9 @@
     --borderColor-success-muted: var(--base-color-green-4); /** Subtle success border for positive feedback elements */
     --borderColor-translucent: var(--base-color-neutral-9); /** Semi-transparent border for overlays and layered elements. Border-specific token — no bgColor-translucent counterpart exists by design. */
     --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-hover: var(--base-color-red-9);
     --button-danger-borderColor-active: var(--base-color-red-2);
     --button-danger-borderColor-hover: var(--base-color-red-2);
@@ -2261,7 +2250,7 @@
     --fgColor-onEmphasis: var(--base-color-neutral-13); /** Text color for use on emphasis backgrounds */
     --fgColor-onInverse: var(--base-color-neutral-0); /** Text color for use on inverse backgrounds */
     --fgColor-white: var(--base-color-neutral-13); /** 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);
@@ -2370,7 +2359,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/internalCss/dark-tritanopia-high-contrast.css

@@ -287,9 +287,6 @@
   --base-display-color-yellow-7: #df9e11;
   --base-display-color-yellow-8: #edb431;
   --base-display-color-yellow-9: #f0ca6a;
-  --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: #0d419d;
   --button-primary-bgColor-active: #3685f3;
   --button-primary-bgColor-disabled: #5fabfe;
@@ -303,8 +300,6 @@
   --fgColor-accent: #74b9ff; /** Accent text for links and interactive elements */
   --fgColor-done: #d3abff; /** Text color for completed/done state indicators */
   --fgColor-sponsors: #ff90c8; /** Text color for GitHub Sponsors content */
-  --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: #3a8cfd5c;
   --avatar-shadow: 0 0 0 2px #0d1117;
   --avatarStack-fade-bgColor-default: var(--base-color-neutral-7);
@@ -354,10 +349,9 @@
   --borderColor-success-muted: var(--base-color-blue-4); /** Subtle success border for positive feedback elements */
   --borderColor-translucent: var(--base-color-neutral-9); /** Semi-transparent border for overlays and layered elements. Border-specific token — no bgColor-translucent counterpart exists by design. */
   --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-hover: var(--base-color-red-9);
   --button-danger-borderColor-hover: var(--base-color-red-2);
   --button-danger-fgColor-rest: var(--base-color-red-2);
@@ -1060,7 +1054,7 @@
   --fgColor-onEmphasis: var(--base-color-neutral-13); /** Text color for use on emphasis backgrounds */
   --fgColor-onInverse: var(--base-color-neutral-0); /** Text color for use on inverse backgrounds */
   --fgColor-white: var(--base-color-neutral-13); /** 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);
@@ -1171,7 +1165,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 */
@@ -1488,9 +1483,6 @@
     --base-display-color-yellow-7: #df9e11;
     --base-display-color-yellow-8: #edb431;
     --base-display-color-yellow-9: #f0ca6a;
-    --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: #0d419d;
     --button-primary-bgColor-active: #3685f3;
     --button-primary-bgColor-disabled: #5fabfe;
@@ -1504,8 +1496,6 @@
     --fgColor-accent: #74b9ff; /** Accent text for links and interactive elements */
     --fgColor-done: #d3abff; /** Text color for completed/done state indicators */
     --fgColor-sponsors: #ff90c8; /** Text color for GitHub Sponsors content */
-    --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: #3a8cfd5c;
     --avatar-shadow: 0 0 0 2px #0d1117;
     --avatarStack-fade-bgColor-default: var(--base-color-neutral-7);
@@ -1555,10 +1545,9 @@
     --borderColor-success-muted: var(--base-color-blue-4); /** Subtle success border for positive feedback elements */
     --borderColor-translucent: var(--base-color-neutral-9); /** Semi-transparent border for overlays and layered elements. Border-specific token — no bgColor-translucent counterpart exists by design. */
     --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-hover: var(--base-color-red-9);
     --button-danger-borderColor-hover: var(--base-color-red-2);
     --button-danger-fgColor-rest: var(--base-color-red-2);
@@ -2261,7 +2250,7 @@
     --fgColor-onEmphasis: var(--base-color-neutral-13); /** Text color for use on emphasis backgrounds */
     --fgColor-onInverse: var(--base-color-neutral-0); /** Text color for use on inverse backgrounds */
     --fgColor-white: var(--base-color-neutral-13); /** 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);
@@ -2372,7 +2361,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/internalCss/dark-tritanopia.css

@@ -288,9 +288,6 @@
   --base-display-color-yellow-8: #edb431;
   --base-display-color-yellow-9: #f0ca6a;
   --bgColor-sponsors-muted: #db61a21a; /** Subtle background for GitHub Sponsors content */
-  --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-danger-fgColor-rest: #fa5e55;
   --button-outline-bgColor-active: #0d419d;
   --button-outline-bgColor-disabled: #212830;
@@ -304,8 +301,6 @@
   --control-checked-bgColor-active: #3685f3;
   --control-checked-bgColor-hover: #2a7aef;
   --fgColor-accent: #4493f8; /** Accent text for links and interactive elements */
-  --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: #3a8cfd5c;
   --avatar-shadow: 0 0 0 2px #0d1117;
   --avatarStack-fade-bgColor-default: var(--base-color-neutral-7);
@@ -355,10 +350,9 @@
   --borderColor-success-emphasis: var(--base-color-blue-5); /** Strong success border for prominent positive elements */
   --borderColor-success-muted: #388bfd66; /** 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-hover: var(--base-color-red-6);
   --button-danger-iconColor-rest: var(--button-danger-fgColor-rest);
   --button-danger-shadow-selected: 0 0 0 0 #00000000;
@@ -1101,7 +1095,7 @@
   --fgColor-onInverse: var(--base-color-neutral-0); /** Text color for use on inverse backgrounds */
   --fgColor-upsell: var(--fgColor-done); /** Text color for upsell and promotional content */
   --fgColor-white: var(--base-color-neutral-13); /** 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: var(--base-color-neutral-0);
   --page-header-bgColor: var(--bgColor-default);
@@ -1177,7 +1171,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;
@@ -1489,9 +1484,6 @@
     --base-display-color-yellow-8: #edb431;
     --base-display-color-yellow-9: #f0ca6a;
     --bgColor-sponsors-muted: #db61a21a; /** Subtle background for GitHub Sponsors content */
-    --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-danger-fgColor-rest: #fa5e55;
     --button-outline-bgColor-active: #0d419d;
     --button-outline-bgColor-disabled: #212830;
@@ -1505,8 +1497,6 @@
     --control-checked-bgColor-active: #3685f3;
     --control-checked-bgColor-hover: #2a7aef;
     --fgColor-accent: #4493f8; /** Accent text for links and interactive elements */
-    --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: #3a8cfd5c;
     --avatar-shadow: 0 0 0 2px #0d1117;
     --avatarStack-fade-bgColor-default: var(--base-color-neutral-7);
@@ -1556,10 +1546,9 @@
     --borderColor-success-emphasis: var(--base-color-blue-5); /** Strong success border for prominent positive elements */
     --borderColor-success-muted: #388bfd66; /** 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-hover: var(--base-color-red-6);
     --button-danger-iconColor-rest: var(--button-danger-fgColor-rest);
     --button-danger-shadow-selected: 0 0 0 0 #00000000;
@@ -2302,7 +2291,7 @@
     --fgColor-onInverse: var(--base-color-neutral-0); /** Text color for use on inverse backgrounds */
     --fgColor-upsell: var(--fgColor-done); /** Text color for upsell and promotional content */
     --fgColor-white: var(--base-color-neutral-13); /** 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: var(--base-color-neutral-0);
     --page-header-bgColor: var(--bgColor-default);
@@ -2378,7 +2367,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/internalCss/dark.css

@@ -287,9 +287,6 @@
   --base-display-color-yellow-7: #df9e11;
   --base-display-color-yellow-8: #edb431;
   --base-display-color-yellow-9: #f0ca6a;
-  --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-danger-fgColor-rest: #fa5e55;
   --button-primary-bgColor-active: #2e9a40;
   --button-primary-bgColor-disabled: #105823;
@@ -300,8 +297,6 @@
   --control-checked-bgColor-active: #3685f3;
   --control-checked-bgColor-hover: #2a7aef;
   --fgColor-accent: #4493f8; /** Accent text for links and interactive elements */
-  --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: #3a8cfd5c;
   --avatar-shadow: 0 0 0 2px #0d1117;
   --avatarStack-fade-bgColor-default: var(--base-color-neutral-7);
@@ -348,10 +343,9 @@
   --borderColor-success-emphasis: var(--base-color-green-5); /** Strong success border for prominent positive elements */
   --borderColor-success-muted: #2ea04366; /** 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-hover: var(--base-color-red-6);
   --button-danger-iconColor-rest: var(--button-danger-fgColor-rest);
   --button-danger-shadow-selected: 0 0 0 0 #00000000;
@@ -1099,7 +1093,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-13); /** 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: var(--base-color-neutral-0);
   --page-header-bgColor: var(--bgColor-default);
@@ -1175,7 +1169,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;
@@ -1488,9 +1483,6 @@
     --base-display-color-yellow-7: #df9e11;
     --base-display-color-yellow-8: #edb431;
     --base-display-color-yellow-9: #f0ca6a;
-    --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-danger-fgColor-rest: #fa5e55;
     --button-primary-bgColor-active: #2e9a40;
     --button-primary-bgColor-disabled: #105823;
@@ -1501,8 +1493,6 @@
     --control-checked-bgColor-active: #3685f3;
     --control-checked-bgColor-hover: #2a7aef;
     --fgColor-accent: #4493f8; /** Accent text for links and interactive elements */
-    --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: #3a8cfd5c;
     --avatar-shadow: 0 0 0 2px #0d1117;
     --avatarStack-fade-bgColor-default: var(--base-color-neutral-7);
@@ -1549,10 +1539,9 @@
     --borderColor-success-emphasis: var(--base-color-green-5); /** Strong success border for prominent positive elements */
     --borderColor-success-muted: #2ea04366; /** 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-hover: var(--base-color-red-6);
     --button-danger-iconColor-rest: var(--button-danger-fgColor-rest);
     --button-danger-shadow-selected: 0 0 0 0 #00000000;
@@ -2300,7 +2289,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-13); /** 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: var(--base-color-neutral-0);
     --page-header-bgColor: var(--bgColor-default);
@@ -2376,7 +2365,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;