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

package/dist/internalCss/light-colorblind-high-contrast.css

@@ -287,9 +287,6 @@
   --base-display-color-yellow-7: #704d00;
   --base-display-color-yellow-8: #5c3d00;
   --base-display-color-yellow-9: #422b00;
-  --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: #033f9d;
   --button-primary-bgColor-active: #075fc8;
   --button-primary-bgColor-disabled: #92caff;
@@ -300,8 +297,6 @@
   --control-checked-bgColor-hover: #0344a8;
   --control-checked-borderColor-active: #033f9d;
   --control-checked-borderColor-hover: #0344a8;
-  --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);
@@ -352,10 +347,9 @@
   --borderColor-success-muted: var(--base-color-blue-3); /** 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-active: var(--base-color-orange-6);
   --button-danger-borderColor-hover: var(--base-color-orange-7);
   --button-danger-shadow-selected: inset 0 1px 0 0 #43001133;
@@ -1069,7 +1063,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-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);
   --label-auburn-borderColor: var(--label-auburn-fgColor-rest);
@@ -1183,7 +1177,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 */
@@ -1488,9 +1483,6 @@
     --base-display-color-yellow-7: #704d00;
     --base-display-color-yellow-8: #5c3d00;
     --base-display-color-yellow-9: #422b00;
-    --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: #033f9d;
     --button-primary-bgColor-active: #075fc8;
     --button-primary-bgColor-disabled: #92caff;
@@ -1501,8 +1493,6 @@
     --control-checked-bgColor-hover: #0344a8;
     --control-checked-borderColor-active: #033f9d;
     --control-checked-borderColor-hover: #0344a8;
-    --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);
@@ -1553,10 +1543,9 @@
     --borderColor-success-muted: var(--base-color-blue-3); /** 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-active: var(--base-color-orange-6);
     --button-danger-borderColor-hover: var(--base-color-orange-7);
     --button-danger-shadow-selected: inset 0 1px 0 0 #43001133;
@@ -2270,7 +2259,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-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);
     --label-auburn-borderColor: var(--label-auburn-fgColor-rest);
@@ -2384,7 +2373,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/internalCss/light-colorblind.css

@@ -287,9 +287,6 @@
   --base-display-color-yellow-7: #704d00;
   --base-display-color-yellow-8: #5c3d00;
   --base-display-color-yellow-9: #422b00;
-  --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: #075fc8;
   --button-primary-bgColor-disabled: #92caff;
@@ -298,8 +295,6 @@
   --color-ansi-cyan-bright: #3192aa;
   --control-checked-bgColor-active: #0757ba;
   --control-checked-bgColor-hover: #0860ca;
-  --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);
@@ -349,10 +344,9 @@
   --borderColor-success-emphasis: var(--base-color-blue-5); /** Strong success border for prominent positive elements */
   --borderColor-success-muted: var(--base-color-blue-0); /** 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-orange-6);
   --button-danger-shadow-selected: inset 0 1px 0 0 #47170033;
   --button-inactive-bgColor: var(--base-color-neutral-3);
@@ -1085,7 +1079,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-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);
@@ -1177,7 +1171,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);
@@ -1488,9 +1483,6 @@
     --base-display-color-yellow-7: #704d00;
     --base-display-color-yellow-8: #5c3d00;
     --base-display-color-yellow-9: #422b00;
-    --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: #075fc8;
     --button-primary-bgColor-disabled: #92caff;
@@ -1499,8 +1491,6 @@
     --color-ansi-cyan-bright: #3192aa;
     --control-checked-bgColor-active: #0757ba;
     --control-checked-bgColor-hover: #0860ca;
-    --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);
@@ -1550,10 +1540,9 @@
     --borderColor-success-emphasis: var(--base-color-blue-5); /** Strong success border for prominent positive elements */
     --borderColor-success-muted: var(--base-color-blue-0); /** 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-orange-6);
     --button-danger-shadow-selected: inset 0 1px 0 0 #47170033;
     --button-inactive-bgColor: var(--base-color-neutral-3);
@@ -2286,7 +2275,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-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);
@@ -2378,7 +2367,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/internalCss/light-high-contrast.css

@@ -287,9 +287,6 @@
   --base-display-color-yellow-7: #704d00;
   --base-display-color-yellow-8: #5c3d00;
   --base-display-color-yellow-9: #422b00;
-  --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: #033f9d;
   --button-primary-bgColor-active: #03501b;
   --button-primary-bgColor-disabled: #85cb97;
@@ -305,8 +302,6 @@
   --fgColor-danger: #960d1e; /** Danger text for errors and destructive actions */
   --fgColor-done: #5e2bb4; /** Text color for completed/done state indicators */
   --fgColor-success: #04591f; /** 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: #c7e9ff;
   --avatarStack-fade-bgColor-default: var(--base-color-neutral-7);
   --avatarStack-fade-bgColor-muted: var(--base-color-neutral-5);
@@ -353,10 +348,9 @@
   --borderColor-success-muted: var(--base-color-green-3); /** 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-active: var(--base-color-red-6);
   --button-danger-borderColor-hover: var(--base-color-red-7);
   --button-danger-fgColor-disabled: #960d1e80;
@@ -1071,7 +1065,7 @@
   --fgColor-onEmphasis: var(--base-color-neutral-0); /** 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-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);
   --label-auburn-borderColor: var(--label-auburn-fgColor-rest);
@@ -1181,7 +1175,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 */
@@ -1488,9 +1483,6 @@
     --base-display-color-yellow-7: #704d00;
     --base-display-color-yellow-8: #5c3d00;
     --base-display-color-yellow-9: #422b00;
-    --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: #033f9d;
     --button-primary-bgColor-active: #03501b;
     --button-primary-bgColor-disabled: #85cb97;
@@ -1506,8 +1498,6 @@
     --fgColor-danger: #960d1e; /** Danger text for errors and destructive actions */
     --fgColor-done: #5e2bb4; /** Text color for completed/done state indicators */
     --fgColor-success: #04591f; /** 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: #c7e9ff;
     --avatarStack-fade-bgColor-default: var(--base-color-neutral-7);
     --avatarStack-fade-bgColor-muted: var(--base-color-neutral-5);
@@ -1554,10 +1544,9 @@
     --borderColor-success-muted: var(--base-color-green-3); /** 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-active: var(--base-color-red-6);
     --button-danger-borderColor-hover: var(--base-color-red-7);
     --button-danger-fgColor-disabled: #960d1e80;
@@ -2272,7 +2261,7 @@
     --fgColor-onEmphasis: var(--base-color-neutral-0); /** 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-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);
     --label-auburn-borderColor: var(--label-auburn-fgColor-rest);
@@ -2382,7 +2371,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/internalCss/light-tritanopia-high-contrast.css

@@ -287,9 +287,6 @@
   --base-display-color-yellow-7: #704d00;
   --base-display-color-yellow-8: #5c3d00;
   --base-display-color-yellow-9: #422b00;
-  --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: #033f9d;
   --button-primary-bgColor-active: #075fc8;
   --button-primary-bgColor-disabled: #92caff;
@@ -301,8 +298,6 @@
   --control-checked-borderColor-active: #033f9d;
   --control-checked-borderColor-hover: #0344a8;
   --control-danger-bgColor-active: #8c0b1d;
-  --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);
@@ -353,10 +348,9 @@
   --borderColor-success-muted: var(--base-color-blue-3); /** 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-active: var(--base-color-red-6);
   --button-danger-borderColor-hover: var(--base-color-red-7);
   --button-danger-shadow-selected: inset 0 1px 0 0 #43001133;
@@ -1069,7 +1063,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-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);
   --label-auburn-borderColor: var(--label-auburn-fgColor-rest);
@@ -1183,7 +1177,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 */
@@ -1488,9 +1483,6 @@
     --base-display-color-yellow-7: #704d00;
     --base-display-color-yellow-8: #5c3d00;
     --base-display-color-yellow-9: #422b00;
-    --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: #033f9d;
     --button-primary-bgColor-active: #075fc8;
     --button-primary-bgColor-disabled: #92caff;
@@ -1502,8 +1494,6 @@
     --control-checked-borderColor-active: #033f9d;
     --control-checked-borderColor-hover: #0344a8;
     --control-danger-bgColor-active: #8c0b1d;
-    --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);
@@ -1554,10 +1544,9 @@
     --borderColor-success-muted: var(--base-color-blue-3); /** 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-active: var(--base-color-red-6);
     --button-danger-borderColor-hover: var(--base-color-red-7);
     --button-danger-shadow-selected: inset 0 1px 0 0 #43001133;
@@ -2270,7 +2259,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-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);
     --label-auburn-borderColor: var(--label-auburn-fgColor-rest);
@@ -2384,7 +2373,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/internalCss/light-tritanopia.css

@@ -287,9 +287,6 @@
   --base-display-color-yellow-7: #704d00;
   --base-display-color-yellow-8: #5c3d00;
   --base-display-color-yellow-9: #422b00;
-  --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: #075fc8;
   --button-primary-bgColor-disabled: #92caff;
@@ -300,8 +297,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);
@@ -351,10 +346,9 @@
   --borderColor-success-emphasis: var(--base-color-blue-5); /** Strong success border for prominent positive elements */
   --borderColor-success-muted: #54aeff66; /** 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-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-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);
@@ -1177,7 +1171,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);
@@ -1488,9 +1483,6 @@
     --base-display-color-yellow-7: #704d00;
     --base-display-color-yellow-8: #5c3d00;
     --base-display-color-yellow-9: #422b00;
-    --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: #075fc8;
     --button-primary-bgColor-disabled: #92caff;
@@ -1501,8 +1493,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);
@@ -1552,10 +1542,9 @@
     --borderColor-success-emphasis: var(--base-color-blue-5); /** Strong success border for prominent positive elements */
     --borderColor-success-muted: #54aeff66; /** 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-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-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);
@@ -2378,7 +2367,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);