@primer/primitives 11.4.1-rc.eb8ee149 → 11.5.0-rc.14eaeb12

package/dist/internalCss/dark-high-contrast.css

@@ -305,7 +305,7 @@
   --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: 0px 0px 0px 2px #0d1117;
+  --avatar-shadow: 0 0 0 2px #0d1117;
   --avatarStack-fade-bgColor-default: var(--base-color-neutral-7);
   --avatarStack-fade-bgColor-muted: var(--base-color-neutral-5);
   --base-color-inset: var(--base-color-black);
@@ -347,7 +347,7 @@
   --borderColor-sponsors-muted: var(--base-color-pink-4); /** Subtle border for GitHub Sponsors content */
   --borderColor-success-emphasis: var(--base-color-green-5); /** Strong success border for prominent positive elements */
   --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 */
+  --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 */
@@ -357,8 +357,8 @@
   --button-danger-borderColor-active: var(--base-color-red-2);
   --button-danger-borderColor-hover: var(--base-color-red-2);
   --button-danger-fgColor-rest: var(--base-color-red-2);
-  --button-danger-shadow-selected: 0px 0px 0px 0px #000000;
-  --button-default-shadow-resting: 0px 0px 0px 0px #000000;
+  --button-danger-shadow-selected: 0 0 0 0 #00000000;
+  --button-default-shadow-resting: 0 0 0 0 #00000000;
   --button-inactive-fgColor: var(--base-color-neutral-10);
   --button-invisible-bgColor-active: var(--base-color-neutral-3);
   --button-invisible-bgColor-disabled: var(--base-color-transparent);
@@ -371,10 +371,10 @@
   --button-outline-fgColor-disabled: #74b9ff80;
   --button-outline-fgColor-hover: var(--base-color-blue-3);
   --button-outline-fgColor-rest: var(--base-color-blue-4);
-  --button-outline-shadow-selected: 0px 0px 0px 0px #000000;
+  --button-outline-shadow-selected: 0 0 0 0 #00000000;
   --button-primary-borderColor-disabled: #4ae16866;
   --button-primary-borderColor-rest: var(--base-color-green-2);
-  --button-primary-shadow-selected: 0px 0px 0px 0px #000000;
+  --button-primary-shadow-selected: 0 0 0 0 #00000000;
   --button-star-iconColor: var(--base-color-yellow-2);
   --buttonCounter-default-bgColor-rest: var(--base-color-neutral-6);
   --buttonCounter-outline-bgColor-hover: #194fb133;
@@ -959,6 +959,7 @@
   --border-sponsors-muted: 0.0625rem solid #f87cbd;
   --border-success-emphasis: 0.0625rem solid #09b43a;
   --border-success-muted: 0.0625rem solid #0ac740;
+  --border-translucent: 0.0625rem solid #9198a1; /** Semi-transparent border shorthand for overlays and layered elements. Border-specific token — no bgColor-translucent counterpart exists by design. */
   --border-transparent: 0.0625rem solid #00000000;
   --borderColor-closed-emphasis: var(--borderColor-danger-emphasis); /** Strong border for closed state badges */
   --borderColor-closed-muted: var(--borderColor-danger-muted); /** Subtle border for closed state indicators */
@@ -1091,11 +1092,11 @@
   --reactionButton-selected-fgColor-rest: var(--fgColor-link);
   --selectMenu-borderColor: var(--borderColor-default);
   --selection-bgColor: #194fb1b3; /** Background color for text selection highlights */
-  --shadow-floating-legacy: 0px 6px 12px -3px #01040966, 0px 6px 18px 0px #01040966;
-  --shadow-inset: inset 0px 1px 0px 0px #0104093d;
-  --shadow-resting-medium: 0px 1px 1px 0px #01040966, 0px 3px 6px 0px #010409cc;
-  --shadow-resting-small: 0px 1px 1px 0px #01040999, 0px 1px 3px 0px #01040999;
-  --shadow-resting-xsmall: 0px 1px 1px 0px #010409cc;
+  --shadow-floating-legacy: 0 6px 12px -3px #01040966, 0 6px 18px 0 #01040966; /** Legacy floating shadow for backward compatibility */
+  --shadow-inset: inset 0 1px 0 0 #0104093d; /** Inset shadow for recessed elements */
+  --shadow-resting-medium: 0 1px 1px 0 #01040966, 0 3px 6px 0 #010409cc; /** Medium resting shadow for cards and elevated surfaces */
+  --shadow-resting-small: 0 1px 1px 0 #01040999, 0 1px 3px 0 #01040999; /** Small resting shadow for buttons and interactive elements */
+  --shadow-resting-xsmall: 0 1px 1px 0 #010409cc; /** Extra small resting shadow for minimal elevation */
   --topicTag-borderColor: var(--borderColor-accent-emphasis);
   --treeViewItem-leadingVisual-iconColor-rest: var(--fgColor-muted);
   --underlineNav-iconColor-rest: var(--fgColor-muted);
@@ -1112,14 +1113,17 @@
   --borderColor-neutral-muted: var(--borderColor-muted); /** Subtle neutral semantic border */
   --button-danger-bgColor-disabled: var(--control-bgColor-disabled);
   --button-danger-borderColor-rest: var(--control-borderColor-rest);
+  --button-danger-iconColor-disabled: var(--button-danger-fgColor-disabled);
   --button-default-bgColor-disabled: var(--control-bgColor-disabled);
   --button-default-borderColor-disabled: var(--control-borderColor-disabled);
   --button-default-borderColor-rest: var(--control-borderColor-rest);
+  --button-default-fgColor-disabled: var(--control-fgColor-disabled);
   --button-invisible-borderColor-hover: var(--control-transparent-borderColor-hover);
   --button-invisible-fgColor-disabled: var(--control-fgColor-disabled);
   --button-invisible-iconColor-disabled: var(--control-fgColor-disabled);
   --button-outline-bgColor-disabled: var(--control-bgColor-disabled);
   --button-primary-fgColor-rest: var(--fgColor-white);
+  --button-primary-iconColor-disabled: var(--button-primary-fgColor-disabled);
   --button-primary-iconColor-rest: var(--fgColor-white);
   --buttonKeybindingHint-danger-bgColor-disabled: var(--buttonKeybindingHint-default-bgColor-disabled);
   --buttonKeybindingHint-danger-fgColor-active: var(--fgColor-onEmphasis);
@@ -1169,10 +1173,10 @@
   --focus-outline: 2px solid #409eff; /** Focus ring outline for keyboard navigation and accessibility. */
   --page-header-bgColor: var(--bgColor-default);
   --progressBar-track-bgColor: var(--bgColor-inverse);
-  --shadow-floating-large: 0px 0px 0px 1px #b7bdc8, 0px 24px 48px 0px #010409; /** Large floating shadow for modals and dialogs */
-  --shadow-floating-medium: 0px 0px 0px 1px #b7bdc8, 0px 8px 16px -4px #01040966, 0px 4px 32px -4px #01040966, 0px 24px 48px -12px #01040966, 0px 48px 96px -24px #01040966;
-  --shadow-floating-small: 0px 0px 0px 1px #b7bdc8, 0px 6px 12px -3px #01040966, 0px 6px 18px 0px #01040966; /** Small floating shadow for dropdowns, tooltips, and small overlays */
-  --shadow-floating-xlarge: 0px 0px 0px 1px #b7bdc8, 0px 32px 64px 0px #010409;
+  --shadow-floating-large: 0 0 0 1px #b7bdc8, 0 24px 48px 0 #010409; /** Large floating shadow for modals and dialogs */
+  --shadow-floating-medium: 0 0 0 1px #b7bdc8, 0 8px 16px -4px #01040966, 0 4px 32px -4px #01040966, 0 24px 48px -12px #01040966, 0 48px 96px -24px #01040966; /** Medium floating shadow for popovers and action menus */
+  --shadow-floating-small: 0 0 0 1px #b7bdc8, 0 6px 12px -3px #01040966, 0 6px 18px 0 #01040966; /** Small floating shadow for dropdowns, tooltips, and small overlays */
+  --shadow-floating-xlarge: 0 0 0 1px #b7bdc8, 0 32px 64px 0 #010409; /** Extra large floating shadow for full-screen overlays and sheets */
   --tooltip-bgColor: var(--bgColor-inverse);
   --tooltip-fgColor: var(--fgColor-onInverse);
   --border-neutral-emphasis: 0.0625rem solid #b7bdc8;
@@ -1191,6 +1195,8 @@
   --controlKnob-borderColor-rest: var(--control-borderColor-emphasis);
   --progressBar-track-borderColor: var(--progressBar-track-bgColor);
   --underlineNav-borderColor-hover: var(--borderColor-neutral-muted);
+  --border-draft-emphasis: 0.0625rem solid #b7bdc8;
+  --border-draft-muted: 0.0625rem solid #b7bdc8;
   --button-outline-borderColor-hover: var(--button-default-borderColor-hover);
   --button-outline-borderColor-active: var(--button-outline-borderColor-hover);
 }
@@ -1501,7 +1507,7 @@
     --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: 0px 0px 0px 2px #0d1117;
+    --avatar-shadow: 0 0 0 2px #0d1117;
     --avatarStack-fade-bgColor-default: var(--base-color-neutral-7);
     --avatarStack-fade-bgColor-muted: var(--base-color-neutral-5);
     --base-color-inset: var(--base-color-black);
@@ -1543,7 +1549,7 @@
     --borderColor-sponsors-muted: var(--base-color-pink-4); /** Subtle border for GitHub Sponsors content */
     --borderColor-success-emphasis: var(--base-color-green-5); /** Strong success border for prominent positive elements */
     --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 */
+    --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 */
@@ -1553,8 +1559,8 @@
     --button-danger-borderColor-active: var(--base-color-red-2);
     --button-danger-borderColor-hover: var(--base-color-red-2);
     --button-danger-fgColor-rest: var(--base-color-red-2);
-    --button-danger-shadow-selected: 0px 0px 0px 0px #000000;
-    --button-default-shadow-resting: 0px 0px 0px 0px #000000;
+    --button-danger-shadow-selected: 0 0 0 0 #00000000;
+    --button-default-shadow-resting: 0 0 0 0 #00000000;
     --button-inactive-fgColor: var(--base-color-neutral-10);
     --button-invisible-bgColor-active: var(--base-color-neutral-3);
     --button-invisible-bgColor-disabled: var(--base-color-transparent);
@@ -1567,10 +1573,10 @@
     --button-outline-fgColor-disabled: #74b9ff80;
     --button-outline-fgColor-hover: var(--base-color-blue-3);
     --button-outline-fgColor-rest: var(--base-color-blue-4);
-    --button-outline-shadow-selected: 0px 0px 0px 0px #000000;
+    --button-outline-shadow-selected: 0 0 0 0 #00000000;
     --button-primary-borderColor-disabled: #4ae16866;
     --button-primary-borderColor-rest: var(--base-color-green-2);
-    --button-primary-shadow-selected: 0px 0px 0px 0px #000000;
+    --button-primary-shadow-selected: 0 0 0 0 #00000000;
     --button-star-iconColor: var(--base-color-yellow-2);
     --buttonCounter-default-bgColor-rest: var(--base-color-neutral-6);
     --buttonCounter-outline-bgColor-hover: #194fb133;
@@ -2155,6 +2161,7 @@
     --border-sponsors-muted: 0.0625rem solid #f87cbd;
     --border-success-emphasis: 0.0625rem solid #09b43a;
     --border-success-muted: 0.0625rem solid #0ac740;
+    --border-translucent: 0.0625rem solid #9198a1; /** Semi-transparent border shorthand for overlays and layered elements. Border-specific token — no bgColor-translucent counterpart exists by design. */
     --border-transparent: 0.0625rem solid #00000000;
     --borderColor-closed-emphasis: var(--borderColor-danger-emphasis); /** Strong border for closed state badges */
     --borderColor-closed-muted: var(--borderColor-danger-muted); /** Subtle border for closed state indicators */
@@ -2287,11 +2294,11 @@
     --reactionButton-selected-fgColor-rest: var(--fgColor-link);
     --selectMenu-borderColor: var(--borderColor-default);
     --selection-bgColor: #194fb1b3; /** Background color for text selection highlights */
-    --shadow-floating-legacy: 0px 6px 12px -3px #01040966, 0px 6px 18px 0px #01040966;
-    --shadow-inset: inset 0px 1px 0px 0px #0104093d;
-    --shadow-resting-medium: 0px 1px 1px 0px #01040966, 0px 3px 6px 0px #010409cc;
-    --shadow-resting-small: 0px 1px 1px 0px #01040999, 0px 1px 3px 0px #01040999;
-    --shadow-resting-xsmall: 0px 1px 1px 0px #010409cc;
+    --shadow-floating-legacy: 0 6px 12px -3px #01040966, 0 6px 18px 0 #01040966; /** Legacy floating shadow for backward compatibility */
+    --shadow-inset: inset 0 1px 0 0 #0104093d; /** Inset shadow for recessed elements */
+    --shadow-resting-medium: 0 1px 1px 0 #01040966, 0 3px 6px 0 #010409cc; /** Medium resting shadow for cards and elevated surfaces */
+    --shadow-resting-small: 0 1px 1px 0 #01040999, 0 1px 3px 0 #01040999; /** Small resting shadow for buttons and interactive elements */
+    --shadow-resting-xsmall: 0 1px 1px 0 #010409cc; /** Extra small resting shadow for minimal elevation */
     --topicTag-borderColor: var(--borderColor-accent-emphasis);
     --treeViewItem-leadingVisual-iconColor-rest: var(--fgColor-muted);
     --underlineNav-iconColor-rest: var(--fgColor-muted);
@@ -2308,14 +2315,17 @@
     --borderColor-neutral-muted: var(--borderColor-muted); /** Subtle neutral semantic border */
     --button-danger-bgColor-disabled: var(--control-bgColor-disabled);
     --button-danger-borderColor-rest: var(--control-borderColor-rest);
+    --button-danger-iconColor-disabled: var(--button-danger-fgColor-disabled);
     --button-default-bgColor-disabled: var(--control-bgColor-disabled);
     --button-default-borderColor-disabled: var(--control-borderColor-disabled);
     --button-default-borderColor-rest: var(--control-borderColor-rest);
+    --button-default-fgColor-disabled: var(--control-fgColor-disabled);
     --button-invisible-borderColor-hover: var(--control-transparent-borderColor-hover);
     --button-invisible-fgColor-disabled: var(--control-fgColor-disabled);
     --button-invisible-iconColor-disabled: var(--control-fgColor-disabled);
     --button-outline-bgColor-disabled: var(--control-bgColor-disabled);
     --button-primary-fgColor-rest: var(--fgColor-white);
+    --button-primary-iconColor-disabled: var(--button-primary-fgColor-disabled);
     --button-primary-iconColor-rest: var(--fgColor-white);
     --buttonKeybindingHint-danger-bgColor-disabled: var(--buttonKeybindingHint-default-bgColor-disabled);
     --buttonKeybindingHint-danger-fgColor-active: var(--fgColor-onEmphasis);
@@ -2365,10 +2375,10 @@
     --focus-outline: 2px solid #409eff; /** Focus ring outline for keyboard navigation and accessibility. */
     --page-header-bgColor: var(--bgColor-default);
     --progressBar-track-bgColor: var(--bgColor-inverse);
-    --shadow-floating-large: 0px 0px 0px 1px #b7bdc8, 0px 24px 48px 0px #010409; /** Large floating shadow for modals and dialogs */
-    --shadow-floating-medium: 0px 0px 0px 1px #b7bdc8, 0px 8px 16px -4px #01040966, 0px 4px 32px -4px #01040966, 0px 24px 48px -12px #01040966, 0px 48px 96px -24px #01040966;
-    --shadow-floating-small: 0px 0px 0px 1px #b7bdc8, 0px 6px 12px -3px #01040966, 0px 6px 18px 0px #01040966; /** Small floating shadow for dropdowns, tooltips, and small overlays */
-    --shadow-floating-xlarge: 0px 0px 0px 1px #b7bdc8, 0px 32px 64px 0px #010409;
+    --shadow-floating-large: 0 0 0 1px #b7bdc8, 0 24px 48px 0 #010409; /** Large floating shadow for modals and dialogs */
+    --shadow-floating-medium: 0 0 0 1px #b7bdc8, 0 8px 16px -4px #01040966, 0 4px 32px -4px #01040966, 0 24px 48px -12px #01040966, 0 48px 96px -24px #01040966; /** Medium floating shadow for popovers and action menus */
+    --shadow-floating-small: 0 0 0 1px #b7bdc8, 0 6px 12px -3px #01040966, 0 6px 18px 0 #01040966; /** Small floating shadow for dropdowns, tooltips, and small overlays */
+    --shadow-floating-xlarge: 0 0 0 1px #b7bdc8, 0 32px 64px 0 #010409; /** Extra large floating shadow for full-screen overlays and sheets */
     --tooltip-bgColor: var(--bgColor-inverse);
     --tooltip-fgColor: var(--fgColor-onInverse);
     --border-neutral-emphasis: 0.0625rem solid #b7bdc8;
@@ -2387,6 +2397,8 @@
     --controlKnob-borderColor-rest: var(--control-borderColor-emphasis);
     --progressBar-track-borderColor: var(--progressBar-track-bgColor);
     --underlineNav-borderColor-hover: var(--borderColor-neutral-muted);
+    --border-draft-emphasis: 0.0625rem solid #b7bdc8;
+    --border-draft-muted: 0.0625rem solid #b7bdc8;
     --button-outline-borderColor-hover: var(--button-default-borderColor-hover);
     --button-outline-borderColor-active: var(--button-outline-borderColor-hover);
   }

package/dist/internalCss/dark-tritanopia-high-contrast.css

@@ -306,7 +306,7 @@
   --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: 0px 0px 0px 2px #0d1117;
+  --avatar-shadow: 0 0 0 2px #0d1117;
   --avatarStack-fade-bgColor-default: var(--base-color-neutral-7);
   --avatarStack-fade-bgColor-muted: var(--base-color-neutral-5);
   --base-color-inset: var(--base-color-black);
@@ -352,7 +352,7 @@
   --borderColor-sponsors-muted: var(--base-color-pink-4); /** Subtle border for GitHub Sponsors content */
   --borderColor-success-emphasis: var(--base-color-blue-5); /** Strong success border for prominent positive elements */
   --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 */
+  --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 */
@@ -361,8 +361,8 @@
   --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);
-  --button-danger-shadow-selected: 0px 0px 0px 0px #000000;
-  --button-default-shadow-resting: 0px 0px 0px 0px #000000;
+  --button-danger-shadow-selected: 0 0 0 0 #00000000;
+  --button-default-shadow-resting: 0 0 0 0 #00000000;
   --button-inactive-bgColor: var(--base-color-neutral-4);
   --button-inactive-fgColor: var(--base-color-neutral-10);
   --button-invisible-bgColor-active: var(--base-color-neutral-3);
@@ -375,9 +375,9 @@
   --button-outline-fgColor-disabled: #74b9ff80;
   --button-outline-fgColor-hover: var(--base-color-blue-3);
   --button-outline-fgColor-rest: var(--base-color-blue-4);
-  --button-outline-shadow-selected: 0px 0px 0px 0px #000000;
+  --button-outline-shadow-selected: 0 0 0 0 #00000000;
   --button-primary-borderColor-rest: var(--base-color-blue-2);
-  --button-primary-shadow-selected: 0px 0px 0px 0px #000000;
+  --button-primary-shadow-selected: 0 0 0 0 #00000000;
   --button-star-iconColor: var(--base-color-yellow-2);
   --buttonCounter-default-bgColor-rest: var(--base-color-neutral-6);
   --buttonCounter-outline-bgColor-hover: #194fb133;
@@ -963,6 +963,7 @@
   --border-sponsors-muted: 0.0625rem solid #f87cbd;
   --border-success-emphasis: 0.0625rem solid #409eff;
   --border-success-muted: 0.0625rem solid #5cacff;
+  --border-translucent: 0.0625rem solid #9198a1; /** Semi-transparent border shorthand for overlays and layered elements. Border-specific token — no bgColor-translucent counterpart exists by design. */
   --border-transparent: 0.0625rem solid #00000000;
   --borderColor-closed-muted: var(--borderColor-default); /** Subtle border for closed state indicators */
   --borderColor-draft-muted: var(--borderColor-default); /** Subtle border for draft state indicators */
@@ -1091,17 +1092,18 @@
   --reactionButton-selected-fgColor-rest: var(--fgColor-link);
   --selectMenu-borderColor: var(--borderColor-default);
   --selection-bgColor: #194fb1b3; /** Background color for text selection highlights */
-  --shadow-floating-legacy: 0px 6px 12px -3px #01040966, 0px 6px 18px 0px #01040966;
-  --shadow-inset: inset 0px 1px 0px 0px #0104093d;
-  --shadow-resting-medium: 0px 1px 1px 0px #01040966, 0px 3px 6px 0px #010409cc;
-  --shadow-resting-small: 0px 1px 1px 0px #01040999, 0px 1px 3px 0px #01040999;
-  --shadow-resting-xsmall: 0px 1px 1px 0px #010409cc;
+  --shadow-floating-legacy: 0 6px 12px -3px #01040966, 0 6px 18px 0 #01040966; /** Legacy floating shadow for backward compatibility */
+  --shadow-inset: inset 0 1px 0 0 #0104093d; /** Inset shadow for recessed elements */
+  --shadow-resting-medium: 0 1px 1px 0 #01040966, 0 3px 6px 0 #010409cc; /** Medium resting shadow for cards and elevated surfaces */
+  --shadow-resting-small: 0 1px 1px 0 #01040999, 0 1px 3px 0 #01040999; /** Small resting shadow for buttons and interactive elements */
+  --shadow-resting-xsmall: 0 1px 1px 0 #010409cc; /** Extra small resting shadow for minimal elevation */
   --topicTag-borderColor: var(--borderColor-accent-emphasis);
   --treeViewItem-leadingVisual-iconColor-rest: var(--fgColor-muted);
   --underlineNav-iconColor-rest: var(--fgColor-muted);
   --avatar-borderColor: var(--borderColor-emphasis);
   --border-closed-emphasis: var(--border-danger-emphasis);
   --border-closed-muted: var(--border-danger-muted);
+  --border-draft-muted: 0.0625rem solid #b7bdc8;
   --border-emphasis: 0.0625rem solid #b7bdc8;
   --border-muted: 0.0625rem solid #b7bdc8;
   --border-open-emphasis: var(--border-success-emphasis);
@@ -1113,14 +1115,17 @@
   --borderColor-neutral-muted: var(--borderColor-muted); /** Subtle neutral semantic border */
   --button-danger-bgColor-disabled: var(--control-bgColor-disabled);
   --button-danger-borderColor-rest: var(--control-borderColor-rest);
+  --button-danger-iconColor-disabled: var(--button-danger-fgColor-disabled);
   --button-default-bgColor-disabled: var(--control-bgColor-disabled);
   --button-default-borderColor-disabled: var(--control-borderColor-disabled);
   --button-default-borderColor-rest: var(--control-borderColor-rest);
+  --button-default-fgColor-disabled: var(--control-fgColor-disabled);
   --button-invisible-borderColor-hover: var(--control-transparent-borderColor-hover);
   --button-invisible-fgColor-disabled: var(--control-fgColor-disabled);
   --button-invisible-iconColor-disabled: var(--control-fgColor-disabled);
   --button-outline-bgColor-disabled: var(--control-bgColor-disabled);
   --button-primary-fgColor-rest: var(--fgColor-white);
+  --button-primary-iconColor-disabled: var(--button-primary-fgColor-disabled);
   --button-primary-iconColor-rest: var(--fgColor-white);
   --buttonKeybindingHint-danger-bgColor-disabled: var(--buttonKeybindingHint-default-bgColor-disabled);
   --buttonKeybindingHint-danger-fgColor-active: var(--fgColor-onEmphasis);
@@ -1170,10 +1175,10 @@
   --focus-outline: 2px solid #409eff; /** Focus ring outline for keyboard navigation and accessibility. */
   --page-header-bgColor: var(--bgColor-default);
   --progressBar-track-bgColor: var(--bgColor-inverse);
-  --shadow-floating-large: 0px 0px 0px 1px #b7bdc8, 0px 24px 48px 0px #010409; /** Large floating shadow for modals and dialogs */
-  --shadow-floating-medium: 0px 0px 0px 1px #b7bdc8, 0px 8px 16px -4px #01040966, 0px 4px 32px -4px #01040966, 0px 24px 48px -12px #01040966, 0px 48px 96px -24px #01040966;
-  --shadow-floating-small: 0px 0px 0px 1px #b7bdc8, 0px 6px 12px -3px #01040966, 0px 6px 18px 0px #01040966; /** Small floating shadow for dropdowns, tooltips, and small overlays */
-  --shadow-floating-xlarge: 0px 0px 0px 1px #b7bdc8, 0px 32px 64px 0px #010409;
+  --shadow-floating-large: 0 0 0 1px #b7bdc8, 0 24px 48px 0 #010409; /** Large floating shadow for modals and dialogs */
+  --shadow-floating-medium: 0 0 0 1px #b7bdc8, 0 8px 16px -4px #01040966, 0 4px 32px -4px #01040966, 0 24px 48px -12px #01040966, 0 48px 96px -24px #01040966; /** Medium floating shadow for popovers and action menus */
+  --shadow-floating-small: 0 0 0 1px #b7bdc8, 0 6px 12px -3px #01040966, 0 6px 18px 0 #01040966; /** Small floating shadow for dropdowns, tooltips, and small overlays */
+  --shadow-floating-xlarge: 0 0 0 1px #b7bdc8, 0 32px 64px 0 #010409; /** Extra large floating shadow for full-screen overlays and sheets */
   --tooltip-bgColor: var(--bgColor-inverse);
   --tooltip-fgColor: var(--fgColor-onInverse);
   --border-neutral-emphasis: 0.0625rem solid #b7bdc8;
@@ -1191,6 +1196,7 @@
   --controlKnob-borderColor-rest: var(--control-borderColor-emphasis);
   --progressBar-track-borderColor: var(--progressBar-track-bgColor);
   --underlineNav-borderColor-hover: var(--borderColor-neutral-muted);
+  --border-draft-emphasis: 0.0625rem solid #b7bdc8;
   --button-outline-borderColor-hover: var(--button-default-borderColor-hover);
   --button-outline-borderColor-active: var(--button-outline-borderColor-hover);
 }
@@ -1502,7 +1508,7 @@
     --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: 0px 0px 0px 2px #0d1117;
+    --avatar-shadow: 0 0 0 2px #0d1117;
     --avatarStack-fade-bgColor-default: var(--base-color-neutral-7);
     --avatarStack-fade-bgColor-muted: var(--base-color-neutral-5);
     --base-color-inset: var(--base-color-black);
@@ -1548,7 +1554,7 @@
     --borderColor-sponsors-muted: var(--base-color-pink-4); /** Subtle border for GitHub Sponsors content */
     --borderColor-success-emphasis: var(--base-color-blue-5); /** Strong success border for prominent positive elements */
     --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 */
+    --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 */
@@ -1557,8 +1563,8 @@
     --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);
-    --button-danger-shadow-selected: 0px 0px 0px 0px #000000;
-    --button-default-shadow-resting: 0px 0px 0px 0px #000000;
+    --button-danger-shadow-selected: 0 0 0 0 #00000000;
+    --button-default-shadow-resting: 0 0 0 0 #00000000;
     --button-inactive-bgColor: var(--base-color-neutral-4);
     --button-inactive-fgColor: var(--base-color-neutral-10);
     --button-invisible-bgColor-active: var(--base-color-neutral-3);
@@ -1571,9 +1577,9 @@
     --button-outline-fgColor-disabled: #74b9ff80;
     --button-outline-fgColor-hover: var(--base-color-blue-3);
     --button-outline-fgColor-rest: var(--base-color-blue-4);
-    --button-outline-shadow-selected: 0px 0px 0px 0px #000000;
+    --button-outline-shadow-selected: 0 0 0 0 #00000000;
     --button-primary-borderColor-rest: var(--base-color-blue-2);
-    --button-primary-shadow-selected: 0px 0px 0px 0px #000000;
+    --button-primary-shadow-selected: 0 0 0 0 #00000000;
     --button-star-iconColor: var(--base-color-yellow-2);
     --buttonCounter-default-bgColor-rest: var(--base-color-neutral-6);
     --buttonCounter-outline-bgColor-hover: #194fb133;
@@ -2159,6 +2165,7 @@
     --border-sponsors-muted: 0.0625rem solid #f87cbd;
     --border-success-emphasis: 0.0625rem solid #409eff;
     --border-success-muted: 0.0625rem solid #5cacff;
+    --border-translucent: 0.0625rem solid #9198a1; /** Semi-transparent border shorthand for overlays and layered elements. Border-specific token — no bgColor-translucent counterpart exists by design. */
     --border-transparent: 0.0625rem solid #00000000;
     --borderColor-closed-muted: var(--borderColor-default); /** Subtle border for closed state indicators */
     --borderColor-draft-muted: var(--borderColor-default); /** Subtle border for draft state indicators */
@@ -2287,17 +2294,18 @@
     --reactionButton-selected-fgColor-rest: var(--fgColor-link);
     --selectMenu-borderColor: var(--borderColor-default);
     --selection-bgColor: #194fb1b3; /** Background color for text selection highlights */
-    --shadow-floating-legacy: 0px 6px 12px -3px #01040966, 0px 6px 18px 0px #01040966;
-    --shadow-inset: inset 0px 1px 0px 0px #0104093d;
-    --shadow-resting-medium: 0px 1px 1px 0px #01040966, 0px 3px 6px 0px #010409cc;
-    --shadow-resting-small: 0px 1px 1px 0px #01040999, 0px 1px 3px 0px #01040999;
-    --shadow-resting-xsmall: 0px 1px 1px 0px #010409cc;
+    --shadow-floating-legacy: 0 6px 12px -3px #01040966, 0 6px 18px 0 #01040966; /** Legacy floating shadow for backward compatibility */
+    --shadow-inset: inset 0 1px 0 0 #0104093d; /** Inset shadow for recessed elements */
+    --shadow-resting-medium: 0 1px 1px 0 #01040966, 0 3px 6px 0 #010409cc; /** Medium resting shadow for cards and elevated surfaces */
+    --shadow-resting-small: 0 1px 1px 0 #01040999, 0 1px 3px 0 #01040999; /** Small resting shadow for buttons and interactive elements */
+    --shadow-resting-xsmall: 0 1px 1px 0 #010409cc; /** Extra small resting shadow for minimal elevation */
     --topicTag-borderColor: var(--borderColor-accent-emphasis);
     --treeViewItem-leadingVisual-iconColor-rest: var(--fgColor-muted);
     --underlineNav-iconColor-rest: var(--fgColor-muted);
     --avatar-borderColor: var(--borderColor-emphasis);
     --border-closed-emphasis: var(--border-danger-emphasis);
     --border-closed-muted: var(--border-danger-muted);
+    --border-draft-muted: 0.0625rem solid #b7bdc8;
     --border-emphasis: 0.0625rem solid #b7bdc8;
     --border-muted: 0.0625rem solid #b7bdc8;
     --border-open-emphasis: var(--border-success-emphasis);
@@ -2309,14 +2317,17 @@
     --borderColor-neutral-muted: var(--borderColor-muted); /** Subtle neutral semantic border */
     --button-danger-bgColor-disabled: var(--control-bgColor-disabled);
     --button-danger-borderColor-rest: var(--control-borderColor-rest);
+    --button-danger-iconColor-disabled: var(--button-danger-fgColor-disabled);
     --button-default-bgColor-disabled: var(--control-bgColor-disabled);
     --button-default-borderColor-disabled: var(--control-borderColor-disabled);
     --button-default-borderColor-rest: var(--control-borderColor-rest);
+    --button-default-fgColor-disabled: var(--control-fgColor-disabled);
     --button-invisible-borderColor-hover: var(--control-transparent-borderColor-hover);
     --button-invisible-fgColor-disabled: var(--control-fgColor-disabled);
     --button-invisible-iconColor-disabled: var(--control-fgColor-disabled);
     --button-outline-bgColor-disabled: var(--control-bgColor-disabled);
     --button-primary-fgColor-rest: var(--fgColor-white);
+    --button-primary-iconColor-disabled: var(--button-primary-fgColor-disabled);
     --button-primary-iconColor-rest: var(--fgColor-white);
     --buttonKeybindingHint-danger-bgColor-disabled: var(--buttonKeybindingHint-default-bgColor-disabled);
     --buttonKeybindingHint-danger-fgColor-active: var(--fgColor-onEmphasis);
@@ -2366,10 +2377,10 @@
     --focus-outline: 2px solid #409eff; /** Focus ring outline for keyboard navigation and accessibility. */
     --page-header-bgColor: var(--bgColor-default);
     --progressBar-track-bgColor: var(--bgColor-inverse);
-    --shadow-floating-large: 0px 0px 0px 1px #b7bdc8, 0px 24px 48px 0px #010409; /** Large floating shadow for modals and dialogs */
-    --shadow-floating-medium: 0px 0px 0px 1px #b7bdc8, 0px 8px 16px -4px #01040966, 0px 4px 32px -4px #01040966, 0px 24px 48px -12px #01040966, 0px 48px 96px -24px #01040966;
-    --shadow-floating-small: 0px 0px 0px 1px #b7bdc8, 0px 6px 12px -3px #01040966, 0px 6px 18px 0px #01040966; /** Small floating shadow for dropdowns, tooltips, and small overlays */
-    --shadow-floating-xlarge: 0px 0px 0px 1px #b7bdc8, 0px 32px 64px 0px #010409;
+    --shadow-floating-large: 0 0 0 1px #b7bdc8, 0 24px 48px 0 #010409; /** Large floating shadow for modals and dialogs */
+    --shadow-floating-medium: 0 0 0 1px #b7bdc8, 0 8px 16px -4px #01040966, 0 4px 32px -4px #01040966, 0 24px 48px -12px #01040966, 0 48px 96px -24px #01040966; /** Medium floating shadow for popovers and action menus */
+    --shadow-floating-small: 0 0 0 1px #b7bdc8, 0 6px 12px -3px #01040966, 0 6px 18px 0 #01040966; /** Small floating shadow for dropdowns, tooltips, and small overlays */
+    --shadow-floating-xlarge: 0 0 0 1px #b7bdc8, 0 32px 64px 0 #010409; /** Extra large floating shadow for full-screen overlays and sheets */
     --tooltip-bgColor: var(--bgColor-inverse);
     --tooltip-fgColor: var(--fgColor-onInverse);
     --border-neutral-emphasis: 0.0625rem solid #b7bdc8;
@@ -2387,6 +2398,7 @@
     --controlKnob-borderColor-rest: var(--control-borderColor-emphasis);
     --progressBar-track-borderColor: var(--progressBar-track-bgColor);
     --underlineNav-borderColor-hover: var(--borderColor-neutral-muted);
+    --border-draft-emphasis: 0.0625rem solid #b7bdc8;
     --button-outline-borderColor-hover: var(--button-default-borderColor-hover);
     --button-outline-borderColor-active: var(--button-outline-borderColor-hover);
   }