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

package/dist/figma/themes/light-colorblind.json

@@ -899,23 +899,6 @@
     "collection": "mode",
     "group": "shadow"
   },
-  {
-    "name": "focus/outlineColor",
-    "value": {
-      "r": 0.03529411764705882,
-      "g": 0.4117647058823529,
-      "b": 0.8549019607843137,
-      "a": 1
-    },
-    "type": "COLOR",
-    "description": "Outline color for focus states on interactive elements",
-    "refId": "mode/focus/outlineColor",
-    "reference": "mode/borderColor/accent-emphasis",
-    "collection": "mode",
-    "mode": "light protanopia deuteranopia",
-    "group": "component (internal)",
-    "scopes": ["STROKE_COLOR", "EFFECT_COLOR"]
-  },
   {
     "name": "bgColor/default",
     "value": {
@@ -12388,6 +12371,40 @@
     "group": "component",
     "scopes": ["TEXT_FILL", "SHAPE_FILL"]
   },
+  {
+    "name": "focus/outline-color",
+    "value": {
+      "r": 0.03529411764705882,
+      "g": 0.4117647058823529,
+      "b": 0.8549019607843137,
+      "a": 1
+    },
+    "type": "COLOR",
+    "description": "Outline color for focus states on interactive elements",
+    "refId": "mode/focus/outline-color",
+    "reference": "mode/borderColor/accent-emphasis",
+    "collection": "mode",
+    "mode": "light protanopia deuteranopia",
+    "group": "component (internal)",
+    "scopes": ["STROKE_COLOR", "EFFECT_COLOR"]
+  },
+  {
+    "name": "focus/outlineColor",
+    "value": {
+      "r": 0.03529411764705882,
+      "g": 0.4117647058823529,
+      "b": 0.8549019607843137,
+      "a": 1
+    },
+    "type": "COLOR",
+    "description": "Deprecated. Use focus.outline-color instead.",
+    "refId": "mode/focus/outlineColor",
+    "reference": "mode/focus/outline-color",
+    "collection": "mode",
+    "mode": "light protanopia deuteranopia",
+    "group": "component (internal)",
+    "scopes": ["STROKE_COLOR", "EFFECT_COLOR"]
+  },
   {
     "name": "header/bgColor",
     "value": {

package/dist/figma/themes/light-high-contrast.json

@@ -899,23 +899,6 @@
     "collection": "mode",
     "group": "shadow"
   },
-  {
-    "name": "focus/outlineColor",
-    "value": {
-      "r": 0.011764705882352941,
-      "g": 0.28627450980392155,
-      "b": 0.7058823529411765,
-      "a": 1
-    },
-    "type": "COLOR",
-    "description": "Outline color for focus states on interactive elements",
-    "refId": "mode/focus/outlineColor",
-    "reference": "mode/borderColor/accent-emphasis",
-    "collection": "mode",
-    "mode": "light high contrast",
-    "group": "component (internal)",
-    "scopes": ["STROKE_COLOR", "EFFECT_COLOR"]
-  },
   {
     "name": "bgColor/default",
     "value": {
@@ -12379,6 +12362,40 @@
     "group": "component",
     "scopes": ["TEXT_FILL", "SHAPE_FILL"]
   },
+  {
+    "name": "focus/outline-color",
+    "value": {
+      "r": 0.011764705882352941,
+      "g": 0.28627450980392155,
+      "b": 0.7058823529411765,
+      "a": 1
+    },
+    "type": "COLOR",
+    "description": "Outline color for focus states on interactive elements",
+    "refId": "mode/focus/outline-color",
+    "reference": "mode/borderColor/accent-emphasis",
+    "collection": "mode",
+    "mode": "light high contrast",
+    "group": "component (internal)",
+    "scopes": ["STROKE_COLOR", "EFFECT_COLOR"]
+  },
+  {
+    "name": "focus/outlineColor",
+    "value": {
+      "r": 0.011764705882352941,
+      "g": 0.28627450980392155,
+      "b": 0.7058823529411765,
+      "a": 1
+    },
+    "type": "COLOR",
+    "description": "Deprecated. Use focus.outline-color instead.",
+    "refId": "mode/focus/outlineColor",
+    "reference": "mode/focus/outline-color",
+    "collection": "mode",
+    "mode": "light high contrast",
+    "group": "component (internal)",
+    "scopes": ["STROKE_COLOR", "EFFECT_COLOR"]
+  },
   {
     "name": "header/bgColor",
     "value": {

package/dist/figma/themes/light-tritanopia.json

@@ -899,23 +899,6 @@
     "collection": "mode",
     "group": "shadow"
   },
-  {
-    "name": "focus/outlineColor",
-    "value": {
-      "r": 0.03529411764705882,
-      "g": 0.4117647058823529,
-      "b": 0.8549019607843137,
-      "a": 1
-    },
-    "type": "COLOR",
-    "description": "Outline color for focus states on interactive elements",
-    "refId": "mode/focus/outlineColor",
-    "reference": "mode/borderColor/accent-emphasis",
-    "collection": "mode",
-    "mode": "light tritanopia",
-    "group": "component (internal)",
-    "scopes": ["STROKE_COLOR", "EFFECT_COLOR"]
-  },
   {
     "name": "bgColor/default",
     "value": {
@@ -12386,6 +12369,40 @@
     "group": "component",
     "scopes": ["TEXT_FILL", "SHAPE_FILL"]
   },
+  {
+    "name": "focus/outline-color",
+    "value": {
+      "r": 0.03529411764705882,
+      "g": 0.4117647058823529,
+      "b": 0.8549019607843137,
+      "a": 1
+    },
+    "type": "COLOR",
+    "description": "Outline color for focus states on interactive elements",
+    "refId": "mode/focus/outline-color",
+    "reference": "mode/borderColor/accent-emphasis",
+    "collection": "mode",
+    "mode": "light tritanopia",
+    "group": "component (internal)",
+    "scopes": ["STROKE_COLOR", "EFFECT_COLOR"]
+  },
+  {
+    "name": "focus/outlineColor",
+    "value": {
+      "r": 0.03529411764705882,
+      "g": 0.4117647058823529,
+      "b": 0.8549019607843137,
+      "a": 1
+    },
+    "type": "COLOR",
+    "description": "Deprecated. Use focus.outline-color instead.",
+    "refId": "mode/focus/outlineColor",
+    "reference": "mode/focus/outline-color",
+    "collection": "mode",
+    "mode": "light tritanopia",
+    "group": "component (internal)",
+    "scopes": ["STROKE_COLOR", "EFFECT_COLOR"]
+  },
   {
     "name": "header/bgColor",
     "value": {

package/dist/figma/themes/light.json

@@ -899,23 +899,6 @@
     "collection": "mode",
     "group": "shadow"
   },
-  {
-    "name": "focus/outlineColor",
-    "value": {
-      "r": 0.03529411764705882,
-      "g": 0.4117647058823529,
-      "b": 0.8549019607843137,
-      "a": 1
-    },
-    "type": "COLOR",
-    "description": "Outline color for focus states on interactive elements",
-    "refId": "mode/focus/outlineColor",
-    "reference": "mode/borderColor/accent-emphasis",
-    "collection": "mode",
-    "mode": "light",
-    "group": "component (internal)",
-    "scopes": ["STROKE_COLOR", "EFFECT_COLOR"]
-  },
   {
     "name": "bgColor/default",
     "value": {
@@ -12382,6 +12365,40 @@
     "group": "component",
     "scopes": ["TEXT_FILL", "SHAPE_FILL"]
   },
+  {
+    "name": "focus/outline-color",
+    "value": {
+      "r": 0.03529411764705882,
+      "g": 0.4117647058823529,
+      "b": 0.8549019607843137,
+      "a": 1
+    },
+    "type": "COLOR",
+    "description": "Outline color for focus states on interactive elements",
+    "refId": "mode/focus/outline-color",
+    "reference": "mode/borderColor/accent-emphasis",
+    "collection": "mode",
+    "mode": "light",
+    "group": "component (internal)",
+    "scopes": ["STROKE_COLOR", "EFFECT_COLOR"]
+  },
+  {
+    "name": "focus/outlineColor",
+    "value": {
+      "r": 0.03529411764705882,
+      "g": 0.4117647058823529,
+      "b": 0.8549019607843137,
+      "a": 1
+    },
+    "type": "COLOR",
+    "description": "Deprecated. Use focus.outline-color instead.",
+    "refId": "mode/focus/outlineColor",
+    "reference": "mode/focus/outline-color",
+    "collection": "mode",
+    "mode": "light",
+    "group": "component (internal)",
+    "scopes": ["STROKE_COLOR", "EFFECT_COLOR"]
+  },
   {
     "name": "header/bgColor",
     "value": {

package/dist/internalCss/dark-colorblind-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: #3685f3;
   --button-primary-bgColor-hover: #2a7aef;
   --button-primary-borderColor-disabled: #1158c7;
@@ -300,8 +297,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);
@@ -351,10 +346,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-orange-9);
   --button-danger-borderColor-hover: var(--base-color-orange-2);
   --button-danger-fgColor-rest: var(--base-color-orange-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-primary-bgColor-active: #3685f3;
     --button-primary-bgColor-hover: #2a7aef;
     --button-primary-borderColor-disabled: #1158c7;
@@ -1501,8 +1493,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);
@@ -1552,10 +1542,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-orange-9);
     --button-danger-borderColor-hover: var(--base-color-orange-2);
     --button-danger-fgColor-rest: var(--base-color-orange-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-colorblind.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: #3685f3;
   --button-primary-bgColor-hover: #2a7aef;
   --button-primary-borderColor-disabled: #1158c7;
@@ -298,8 +295,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);
@@ -350,10 +345,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-orange-6);
   --button-danger-shadow-selected: 0 0 0 0 #00000000;
   --button-default-shadow-resting: 0 0 0 0 #00000000;
@@ -1099,7 +1093,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;
@@ -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: #3685f3;
     --button-primary-bgColor-hover: #2a7aef;
     --button-primary-borderColor-disabled: #1158c7;
@@ -1499,8 +1491,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);
@@ -1551,10 +1541,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-orange-6);
     --button-danger-shadow-selected: 0 0 0 0 #00000000;
     --button-default-shadow-resting: 0 0 0 0 #00000000;
@@ -2300,7 +2289,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-dimmed-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-danger-fgColor-active: #ffffff;
   --button-danger-fgColor-hover: #ffffff;
   --button-danger-iconColor-hover: #ffffff;
@@ -303,8 +300,6 @@
   --control-checked-bgColor-hover: #2b64c1;
   --control-danger-bgColor-active: #c51120;
   --fgColor-onEmphasis: #ffffff; /** Text color for use on emphasis backgrounds */
-  --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);
@@ -352,10 +347,9 @@
   --borderColor-success-muted: var(--base-color-green-2); /** 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-7);
   --button-danger-borderColor-hover: var(--base-color-red-1);
   --button-danger-fgColor-rest: var(--base-color-red-1);
@@ -1091,7 +1085,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;
   --label-auburn-borderColor: var(--label-auburn-fgColor-rest);
   --label-blue-borderColor: var(--label-blue-fgColor-rest);
@@ -1173,7 +1167,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 */
@@ -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-iconColor-hover: #ffffff;
@@ -1504,8 +1496,6 @@
     --control-checked-bgColor-hover: #2b64c1;
     --control-danger-bgColor-active: #c51120;
     --fgColor-onEmphasis: #ffffff; /** Text color for use on emphasis backgrounds */
-    --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);
@@ -1553,10 +1543,9 @@
     --borderColor-success-muted: var(--base-color-green-2); /** 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-7);
     --button-danger-borderColor-hover: var(--base-color-red-1);
     --button-danger-fgColor-rest: var(--base-color-red-1);
@@ -2292,7 +2281,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;
     --label-auburn-borderColor: var(--label-auburn-fgColor-rest);
     --label-blue-borderColor: var(--label-blue-fgColor-rest);
@@ -2374,7 +2363,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 */