@primer/primitives 11.4.0 → 11.4.1-rc.14fb4bb1

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

@@ -1,3 +1,7 @@
+/**
+ * @spec See /DESIGN_TOKENS_SPEC.md for naming logic and semantic pairings.
+ * @rule Never use raw values (hex/px). Use semantic tokens ONLY.
+ */
 [data-color-mode="dark"][data-dark-theme="dark_tritanopia"],
 [data-color-mode="auto"][data-light-theme="dark_tritanopia"] {
   --bgColor-sponsors-muted: #db61a21a; /** Subtle background for GitHub Sponsors content */
@@ -15,7 +19,7 @@
   --control-checked-bgColor-hover: #2a7aef;
   --fgColor-accent: #4493f8; /** Accent text for links and interactive elements */
   --reactionButton-selected-bgColor-hover: #3a8cfd5c;
-  --avatar-shadow: 0px 0px 0px 2px #0d1117;
+  --avatar-shadow: 0 0 0 2px #0d1117;
   --avatarStack-fade-bgColor-default: #3d444d;
   --avatarStack-fade-bgColor-muted: #2a313c;
   --bgColor-accent-emphasis: #1f6feb; /** Strong accent background for active states and focused states */
@@ -62,8 +66,8 @@
   --borderColor-transparent: #00000000; /** Fully transparent border */
   --button-danger-bgColor-hover: #b62324;
   --button-danger-iconColor-rest: var(--button-danger-fgColor-rest);
-  --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: #262c36;
   --button-inactive-fgColor: #9198a1;
   --button-invisible-bgColor-disabled: #00000000;
@@ -72,8 +76,8 @@
   --button-outline-fgColor-disabled: #4493f880;
   --button-outline-fgColor-hover: #58a6ff;
   --button-outline-fgColor-rest: #388bfd;
-  --button-outline-shadow-selected: 0px 0px 0px 0px #000000;
-  --button-primary-shadow-selected: 0px 0px 0px 0px #000000;
+  --button-outline-shadow-selected: 0 0 0 0 #00000000;
+  --button-primary-shadow-selected: 0 0 0 0 #00000000;
   --button-star-iconColor: #e3b341;
   --buttonCounter-danger-bgColor-rest: #49020233;
   --buttonCounter-default-bgColor-rest: #2f3742;
@@ -817,11 +821,11 @@
   --reactionButton-selected-fgColor-rest: var(--fgColor-link);
   --selectMenu-borderColor: var(--borderColor-default);
   --selection-bgColor: #1f6febb3; /** 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 */
   --tooltip-bgColor: var(--bgColor-emphasis);
   --treeViewItem-leadingVisual-iconColor-rest: var(--fgColor-muted);
   --underlineNav-iconColor-rest: var(--fgColor-muted);
@@ -886,10 +890,10 @@
   --buttonKeybindingHint-danger-borderColor-disabled: var(--buttonKeybindingHint-default-borderColor-disabled);
   --buttonKeybindingHint-danger-borderColor-rest: var(--buttonKeybindingHint-default-borderColor-rest);
   --buttonKeybindingHint-danger-fgColor-disabled: var(--buttonKeybindingHint-default-fgColor-disabled);
-  --shadow-floating-large: 0px 0px 0px 1px #3d444d, 0px 24px 48px 0px #010409; /** Large floating shadow for modals and dialogs */
-  --shadow-floating-medium: 0px 0px 0px 1px #3d444d, 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 #3d444d, 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 #3d444d, 0px 32px 64px 0px #010409;
+  --shadow-floating-large: 0 0 0 1px #3d444d, 0 24px 48px 0 #010409; /** Large floating shadow for modals and dialogs */
+  --shadow-floating-medium: 0 0 0 1px #3d444d, 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 #3d444d, 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 #3d444d, 0 32px 64px 0 #010409; /** Extra large floating shadow for full-screen overlays and sheets */
   --underlineNav-borderColor-hover: var(--borderColor-neutral-muted);
   --button-danger-borderColor-active: var(--button-danger-borderColor-hover);
   --button-outline-borderColor-hover: var(--button-default-borderColor-hover);
@@ -912,7 +916,7 @@
     --control-checked-bgColor-hover: #2a7aef;
     --fgColor-accent: #4493f8; /** Accent text for links and interactive elements */
     --reactionButton-selected-bgColor-hover: #3a8cfd5c;
-    --avatar-shadow: 0px 0px 0px 2px #0d1117;
+    --avatar-shadow: 0 0 0 2px #0d1117;
     --avatarStack-fade-bgColor-default: #3d444d;
     --avatarStack-fade-bgColor-muted: #2a313c;
     --bgColor-accent-emphasis: #1f6feb; /** Strong accent background for active states and focused states */
@@ -959,8 +963,8 @@
     --borderColor-transparent: #00000000; /** Fully transparent border */
     --button-danger-bgColor-hover: #b62324;
     --button-danger-iconColor-rest: var(--button-danger-fgColor-rest);
-    --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: #262c36;
     --button-inactive-fgColor: #9198a1;
     --button-invisible-bgColor-disabled: #00000000;
@@ -969,8 +973,8 @@
     --button-outline-fgColor-disabled: #4493f880;
     --button-outline-fgColor-hover: #58a6ff;
     --button-outline-fgColor-rest: #388bfd;
-    --button-outline-shadow-selected: 0px 0px 0px 0px #000000;
-    --button-primary-shadow-selected: 0px 0px 0px 0px #000000;
+    --button-outline-shadow-selected: 0 0 0 0 #00000000;
+    --button-primary-shadow-selected: 0 0 0 0 #00000000;
     --button-star-iconColor: #e3b341;
     --buttonCounter-danger-bgColor-rest: #49020233;
     --buttonCounter-default-bgColor-rest: #2f3742;
@@ -1714,11 +1718,11 @@
     --reactionButton-selected-fgColor-rest: var(--fgColor-link);
     --selectMenu-borderColor: var(--borderColor-default);
     --selection-bgColor: #1f6febb3; /** 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 */
     --tooltip-bgColor: var(--bgColor-emphasis);
     --treeViewItem-leadingVisual-iconColor-rest: var(--fgColor-muted);
     --underlineNav-iconColor-rest: var(--fgColor-muted);
@@ -1783,10 +1787,10 @@
     --buttonKeybindingHint-danger-borderColor-disabled: var(--buttonKeybindingHint-default-borderColor-disabled);
     --buttonKeybindingHint-danger-borderColor-rest: var(--buttonKeybindingHint-default-borderColor-rest);
     --buttonKeybindingHint-danger-fgColor-disabled: var(--buttonKeybindingHint-default-fgColor-disabled);
-    --shadow-floating-large: 0px 0px 0px 1px #3d444d, 0px 24px 48px 0px #010409; /** Large floating shadow for modals and dialogs */
-    --shadow-floating-medium: 0px 0px 0px 1px #3d444d, 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 #3d444d, 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 #3d444d, 0px 32px 64px 0px #010409;
+    --shadow-floating-large: 0 0 0 1px #3d444d, 0 24px 48px 0 #010409; /** Large floating shadow for modals and dialogs */
+    --shadow-floating-medium: 0 0 0 1px #3d444d, 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 #3d444d, 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 #3d444d, 0 32px 64px 0 #010409; /** Extra large floating shadow for full-screen overlays and sheets */
     --underlineNav-borderColor-hover: var(--borderColor-neutral-muted);
     --button-danger-borderColor-active: var(--button-danger-borderColor-hover);
     --button-outline-borderColor-hover: var(--button-default-borderColor-hover);

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

@@ -1,3 +1,7 @@
+/**
+ * @spec See /DESIGN_TOKENS_SPEC.md for naming logic and semantic pairings.
+ * @rule Never use raw values (hex/px). Use semantic tokens ONLY.
+ */
 [data-color-mode="dark"][data-dark-theme="dark"],
 [data-color-mode="auto"][data-light-theme="dark"] {
   --button-danger-fgColor-rest: #fa5e55;
@@ -11,7 +15,7 @@
   --control-checked-bgColor-hover: #2a7aef;
   --fgColor-accent: #4493f8; /** Accent text for links and interactive elements */
   --reactionButton-selected-bgColor-hover: #3a8cfd5c;
-  --avatar-shadow: 0px 0px 0px 2px #0d1117;
+  --avatar-shadow: 0 0 0 2px #0d1117;
   --avatarStack-fade-bgColor-default: #3d444d;
   --avatarStack-fade-bgColor-muted: #2a313c;
   --bgColor-accent-emphasis: #1f6feb; /** Strong accent background for active states and focused states */
@@ -55,8 +59,8 @@
   --borderColor-transparent: #00000000; /** Fully transparent border */
   --button-danger-bgColor-hover: #b62324;
   --button-danger-iconColor-rest: var(--button-danger-fgColor-rest);
-  --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: #262c36;
   --button-inactive-fgColor: #9198a1;
   --button-invisible-bgColor-disabled: #00000000;
@@ -66,8 +70,8 @@
   --button-outline-fgColor-disabled: #4493f880;
   --button-outline-fgColor-hover: #58a6ff;
   --button-outline-fgColor-rest: #388bfd;
-  --button-outline-shadow-selected: 0px 0px 0px 0px #000000;
-  --button-primary-shadow-selected: 0px 0px 0px 0px #000000;
+  --button-outline-shadow-selected: 0 0 0 0 #00000000;
+  --button-primary-shadow-selected: 0 0 0 0 #00000000;
   --button-star-iconColor: #e3b341;
   --buttonCounter-danger-bgColor-rest: #49020233;
   --buttonCounter-default-bgColor-rest: #2f3742;
@@ -815,11 +819,11 @@
   --reactionButton-selected-fgColor-rest: var(--fgColor-link);
   --selectMenu-borderColor: var(--borderColor-default);
   --selection-bgColor: #1f6febb3; /** 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 */
   --tooltip-bgColor: var(--bgColor-emphasis);
   --treeViewItem-leadingVisual-iconColor-rest: var(--fgColor-muted);
   --underlineNav-iconColor-rest: var(--fgColor-muted);
@@ -886,10 +890,10 @@
   --buttonKeybindingHint-danger-borderColor-disabled: var(--buttonKeybindingHint-default-borderColor-disabled);
   --buttonKeybindingHint-danger-borderColor-rest: var(--buttonKeybindingHint-default-borderColor-rest);
   --buttonKeybindingHint-danger-fgColor-disabled: var(--buttonKeybindingHint-default-fgColor-disabled);
-  --shadow-floating-large: 0px 0px 0px 1px #3d444d, 0px 24px 48px 0px #010409; /** Large floating shadow for modals and dialogs */
-  --shadow-floating-medium: 0px 0px 0px 1px #3d444d, 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 #3d444d, 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 #3d444d, 0px 32px 64px 0px #010409;
+  --shadow-floating-large: 0 0 0 1px #3d444d, 0 24px 48px 0 #010409; /** Large floating shadow for modals and dialogs */
+  --shadow-floating-medium: 0 0 0 1px #3d444d, 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 #3d444d, 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 #3d444d, 0 32px 64px 0 #010409; /** Extra large floating shadow for full-screen overlays and sheets */
   --underlineNav-borderColor-hover: var(--borderColor-neutral-muted);
   --button-danger-borderColor-active: var(--button-danger-borderColor-hover);
   --button-outline-borderColor-hover: var(--button-default-borderColor-hover);
@@ -908,7 +912,7 @@
     --control-checked-bgColor-hover: #2a7aef;
     --fgColor-accent: #4493f8; /** Accent text for links and interactive elements */
     --reactionButton-selected-bgColor-hover: #3a8cfd5c;
-    --avatar-shadow: 0px 0px 0px 2px #0d1117;
+    --avatar-shadow: 0 0 0 2px #0d1117;
     --avatarStack-fade-bgColor-default: #3d444d;
     --avatarStack-fade-bgColor-muted: #2a313c;
     --bgColor-accent-emphasis: #1f6feb; /** Strong accent background for active states and focused states */
@@ -952,8 +956,8 @@
     --borderColor-transparent: #00000000; /** Fully transparent border */
     --button-danger-bgColor-hover: #b62324;
     --button-danger-iconColor-rest: var(--button-danger-fgColor-rest);
-    --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: #262c36;
     --button-inactive-fgColor: #9198a1;
     --button-invisible-bgColor-disabled: #00000000;
@@ -963,8 +967,8 @@
     --button-outline-fgColor-disabled: #4493f880;
     --button-outline-fgColor-hover: #58a6ff;
     --button-outline-fgColor-rest: #388bfd;
-    --button-outline-shadow-selected: 0px 0px 0px 0px #000000;
-    --button-primary-shadow-selected: 0px 0px 0px 0px #000000;
+    --button-outline-shadow-selected: 0 0 0 0 #00000000;
+    --button-primary-shadow-selected: 0 0 0 0 #00000000;
     --button-star-iconColor: #e3b341;
     --buttonCounter-danger-bgColor-rest: #49020233;
     --buttonCounter-default-bgColor-rest: #2f3742;
@@ -1712,11 +1716,11 @@
     --reactionButton-selected-fgColor-rest: var(--fgColor-link);
     --selectMenu-borderColor: var(--borderColor-default);
     --selection-bgColor: #1f6febb3; /** 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 */
     --tooltip-bgColor: var(--bgColor-emphasis);
     --treeViewItem-leadingVisual-iconColor-rest: var(--fgColor-muted);
     --underlineNav-iconColor-rest: var(--fgColor-muted);
@@ -1783,10 +1787,10 @@
     --buttonKeybindingHint-danger-borderColor-disabled: var(--buttonKeybindingHint-default-borderColor-disabled);
     --buttonKeybindingHint-danger-borderColor-rest: var(--buttonKeybindingHint-default-borderColor-rest);
     --buttonKeybindingHint-danger-fgColor-disabled: var(--buttonKeybindingHint-default-fgColor-disabled);
-    --shadow-floating-large: 0px 0px 0px 1px #3d444d, 0px 24px 48px 0px #010409; /** Large floating shadow for modals and dialogs */
-    --shadow-floating-medium: 0px 0px 0px 1px #3d444d, 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 #3d444d, 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 #3d444d, 0px 32px 64px 0px #010409;
+    --shadow-floating-large: 0 0 0 1px #3d444d, 0 24px 48px 0 #010409; /** Large floating shadow for modals and dialogs */
+    --shadow-floating-medium: 0 0 0 1px #3d444d, 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 #3d444d, 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 #3d444d, 0 32px 64px 0 #010409; /** Extra large floating shadow for full-screen overlays and sheets */
     --underlineNav-borderColor-hover: var(--borderColor-neutral-muted);
     --button-danger-borderColor-active: var(--button-danger-borderColor-hover);
     --button-outline-borderColor-hover: var(--button-default-borderColor-hover);

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

@@ -1,3 +1,7 @@
+/**
+ * @spec See /DESIGN_TOKENS_SPEC.md for naming logic and semantic pairings.
+ * @rule Never use raw values (hex/px). Use semantic tokens ONLY.
+ */
 [data-color-mode="light"][data-light-theme="light_colorblind_high_contrast"],
 [data-color-mode="auto"][data-light-theme="light_colorblind_high_contrast"] {
   --button-outline-bgColor-active: #033f9d;
@@ -60,7 +64,7 @@
   --borderColor-transparent: #ffffff00; /** Fully transparent border */
   --button-danger-bgColor-active: #702c00;
   --button-danger-borderColor-hover: #5b2300;
-  --button-danger-shadow-selected: inset 0px 1px 0px 0px #43001133;
+  --button-danger-shadow-selected: inset 0 1px 0 0 #43001133;
   --button-inactive-bgColor: #e6eaef;
   --button-inactive-fgColor: #454c54;
   --button-invisible-bgColor-disabled: #ffffff00;
@@ -68,10 +72,10 @@
   --button-invisible-fgColor-hover: #393f46;
   --button-invisible-iconColor-hover: #393f46;
   --button-outline-borderColor-hover: #022f7a;
-  --button-outline-shadow-selected: inset 0px 1px 0px 0px #021a4a33;
+  --button-outline-shadow-selected: inset 0 1px 0 0 #021a4a33;
   --button-primary-borderColor-disabled: var(--button-primary-bgColor-disabled);
   --button-primary-borderColor-rest: #022f7a;
-  --button-primary-shadow-selected: inset 0px 1px 0px 0px #00230b4d;
+  --button-primary-shadow-selected: inset 0 1px 0 0 #00230b4d;
   --button-star-iconColor: #d5a824;
   --buttonCounter-default-bgColor-rest: #c8d1da;
   --buttonCounter-outline-fgColor-rest: #023b95;
@@ -620,13 +624,13 @@
   --reactionButton-selected-fgColor-hover: #023b95;
   --selectMenu-bgColor-active: #9cd7ff;
   --selectMenu-borderColor: #ffffff00;
-  --shadow-floating-legacy: 0px 6px 12px -3px #25292e0a, 0px 6px 18px 0px #25292e1f;
-  --shadow-resting-medium: 0px 1px 1px 0px #25292e1a, 0px 3px 6px 0px #25292e1f;
+  --shadow-floating-legacy: 0 6px 12px -3px #25292e0a, 0 6px 18px 0 #25292e1f; /** Legacy floating shadow for backward compatibility */
+  --shadow-resting-medium: 0 1px 1px 0 #25292e1a, 0 3px 6px 0 #25292e1f; /** Medium resting shadow for cards and elevated surfaces */
   --skeletonLoader-bgColor: #dae0e7;
   --treeViewItem-leadingVisual-iconColor-rest: #368cf9;
   --underlineNav-borderColor-active: #cd3425;
   --avatar-bgColor: #ffffff;
-  --avatar-shadow: 0px 0px 0px 2px #ffffffcc;
+  --avatar-shadow: 0 0 0 2px #ffffffcc;
   --bgColor-black: #010409; /** Pure black background */
   --bgColor-closed-emphasis: var(--bgColor-neutral-emphasis); /** Strong background for closed state badges and labels */
   --bgColor-closed-muted: var(--bgColor-neutral-muted); /** Subtle background for closed state indicators (issues, PRs) */
@@ -674,7 +678,7 @@
   --button-default-bgColor-rest: var(--control-bgColor-rest);
   --button-default-bgColor-selected: var(--control-bgColor-active);
   --button-default-fgColor-rest: var(--control-fgColor-rest);
-  --button-default-shadow-resting: 0px 1px 0px 0px #0104090a;
+  --button-default-shadow-resting: 0 1px 0 0 #0104090a;
   --button-invisible-bgColor-active: var(--control-transparent-bgColor-active);
   --button-invisible-bgColor-hover: var(--control-transparent-bgColor-hover);
   --button-invisible-bgColor-rest: var(--control-transparent-bgColor-rest);
@@ -803,9 +807,9 @@
   --progressBar-bgColor-sponsors: var(--bgColor-sponsors-emphasis);
   --progressBar-bgColor-success: var(--bgColor-success-emphasis);
   --selection-bgColor: #0349b433; /** Background color for text selection highlights */
-  --shadow-inset: inset 0px 1px 0px 0px #0104090a;
-  --shadow-resting-small: 0px 1px 1px 0px #0104090f, 0px 1px 3px 0px #0104090f;
-  --shadow-resting-xsmall: 0px 1px 1px 0px #0104090f;
+  --shadow-inset: inset 0 1px 0 0 #0104090a; /** Inset shadow for recessed elements */
+  --shadow-resting-small: 0 1px 1px 0 #0104090a, 0 1px 2px 0 #01040908; /** Small resting shadow for buttons and interactive elements */
+  --shadow-resting-xsmall: 0 1px 1px 0 #0104090d; /** Extra small resting shadow for minimal elevation */
   --sideNav-bgColor-selected: #ffffff;
   --timelineBadge-bgColor: var(--bgColor-muted);
   --tooltip-bgColor: var(--bgColor-emphasis);
@@ -882,10 +886,10 @@
   --focus-outline: 2px solid #0349b4; /** Focus ring outline for keyboard navigation and accessibility. */
   --progressBar-track-bgColor: var(--bgColor-default);
   --reactionButton-selected-fgColor-rest: var(--fgColor-link);
-  --shadow-floating-large: 0px 0px 0px 1px #454c54, 0px 40px 80px 0px #25292e3d; /** Large floating shadow for modals and dialogs */
-  --shadow-floating-medium: 0px 0px 0px 1px #454c54, 0px 8px 16px -4px #25292e14, 0px 4px 32px -4px #25292e14, 0px 24px 48px -12px #25292e14, 0px 48px 96px -24px #25292e14;
-  --shadow-floating-small: 0px 0px 0px 1px #454c5480, 0px 6px 12px -3px #25292e0a, 0px 6px 18px 0px #25292e1f; /** Small floating shadow for dropdowns, tooltips, and small overlays */
-  --shadow-floating-xlarge: 0px 0px 0px 1px #454c54, 0px 56px 112px 0px #25292e52;
+  --shadow-floating-large: 0 0 0 1px #454c54, 0 40px 80px 0 #25292e3d; /** Large floating shadow for modals and dialogs */
+  --shadow-floating-medium: 0 0 0 1px #454c54, 0 8px 16px -4px #25292e14, 0 4px 32px -4px #25292e14, 0 24px 48px -12px #25292e14, 0 48px 96px -24px #25292e14; /** Medium floating shadow for popovers and action menus */
+  --shadow-floating-small: 0 0 0 1px #454c5480, 0 6px 12px -3px #25292e0a, 0 6px 18px 0 #25292e1f; /** Small floating shadow for dropdowns, tooltips, and small overlays */
+  --shadow-floating-xlarge: 0 0 0 1px #454c54, 0 56px 112px 0 #25292e52; /** Extra large floating shadow for full-screen overlays and sheets */
   --tooltip-fgColor: var(--fgColor-onEmphasis);
   --underlineNav-borderColor-hover: var(--borderColor-muted);
   --border-neutral-muted: 0.0625rem solid #454c54;
@@ -957,7 +961,7 @@
     --borderColor-transparent: #ffffff00; /** Fully transparent border */
     --button-danger-bgColor-active: #702c00;
     --button-danger-borderColor-hover: #5b2300;
-    --button-danger-shadow-selected: inset 0px 1px 0px 0px #43001133;
+    --button-danger-shadow-selected: inset 0 1px 0 0 #43001133;
     --button-inactive-bgColor: #e6eaef;
     --button-inactive-fgColor: #454c54;
     --button-invisible-bgColor-disabled: #ffffff00;
@@ -965,10 +969,10 @@
     --button-invisible-fgColor-hover: #393f46;
     --button-invisible-iconColor-hover: #393f46;
     --button-outline-borderColor-hover: #022f7a;
-    --button-outline-shadow-selected: inset 0px 1px 0px 0px #021a4a33;
+    --button-outline-shadow-selected: inset 0 1px 0 0 #021a4a33;
     --button-primary-borderColor-disabled: var(--button-primary-bgColor-disabled);
     --button-primary-borderColor-rest: #022f7a;
-    --button-primary-shadow-selected: inset 0px 1px 0px 0px #00230b4d;
+    --button-primary-shadow-selected: inset 0 1px 0 0 #00230b4d;
     --button-star-iconColor: #d5a824;
     --buttonCounter-default-bgColor-rest: #c8d1da;
     --buttonCounter-outline-fgColor-rest: #023b95;
@@ -1517,13 +1521,13 @@
     --reactionButton-selected-fgColor-hover: #023b95;
     --selectMenu-bgColor-active: #9cd7ff;
     --selectMenu-borderColor: #ffffff00;
-    --shadow-floating-legacy: 0px 6px 12px -3px #25292e0a, 0px 6px 18px 0px #25292e1f;
-    --shadow-resting-medium: 0px 1px 1px 0px #25292e1a, 0px 3px 6px 0px #25292e1f;
+    --shadow-floating-legacy: 0 6px 12px -3px #25292e0a, 0 6px 18px 0 #25292e1f; /** Legacy floating shadow for backward compatibility */
+    --shadow-resting-medium: 0 1px 1px 0 #25292e1a, 0 3px 6px 0 #25292e1f; /** Medium resting shadow for cards and elevated surfaces */
     --skeletonLoader-bgColor: #dae0e7;
     --treeViewItem-leadingVisual-iconColor-rest: #368cf9;
     --underlineNav-borderColor-active: #cd3425;
     --avatar-bgColor: #ffffff;
-    --avatar-shadow: 0px 0px 0px 2px #ffffffcc;
+    --avatar-shadow: 0 0 0 2px #ffffffcc;
     --bgColor-black: #010409; /** Pure black background */
     --bgColor-closed-emphasis: var(--bgColor-neutral-emphasis); /** Strong background for closed state badges and labels */
     --bgColor-closed-muted: var(--bgColor-neutral-muted); /** Subtle background for closed state indicators (issues, PRs) */
@@ -1571,7 +1575,7 @@
     --button-default-bgColor-rest: var(--control-bgColor-rest);
     --button-default-bgColor-selected: var(--control-bgColor-active);
     --button-default-fgColor-rest: var(--control-fgColor-rest);
-    --button-default-shadow-resting: 0px 1px 0px 0px #0104090a;
+    --button-default-shadow-resting: 0 1px 0 0 #0104090a;
     --button-invisible-bgColor-active: var(--control-transparent-bgColor-active);
     --button-invisible-bgColor-hover: var(--control-transparent-bgColor-hover);
     --button-invisible-bgColor-rest: var(--control-transparent-bgColor-rest);
@@ -1700,9 +1704,9 @@
     --progressBar-bgColor-sponsors: var(--bgColor-sponsors-emphasis);
     --progressBar-bgColor-success: var(--bgColor-success-emphasis);
     --selection-bgColor: #0349b433; /** Background color for text selection highlights */
-    --shadow-inset: inset 0px 1px 0px 0px #0104090a;
-    --shadow-resting-small: 0px 1px 1px 0px #0104090f, 0px 1px 3px 0px #0104090f;
-    --shadow-resting-xsmall: 0px 1px 1px 0px #0104090f;
+    --shadow-inset: inset 0 1px 0 0 #0104090a; /** Inset shadow for recessed elements */
+    --shadow-resting-small: 0 1px 1px 0 #0104090a, 0 1px 2px 0 #01040908; /** Small resting shadow for buttons and interactive elements */
+    --shadow-resting-xsmall: 0 1px 1px 0 #0104090d; /** Extra small resting shadow for minimal elevation */
     --sideNav-bgColor-selected: #ffffff;
     --timelineBadge-bgColor: var(--bgColor-muted);
     --tooltip-bgColor: var(--bgColor-emphasis);
@@ -1779,10 +1783,10 @@
     --focus-outline: 2px solid #0349b4; /** Focus ring outline for keyboard navigation and accessibility. */
     --progressBar-track-bgColor: var(--bgColor-default);
     --reactionButton-selected-fgColor-rest: var(--fgColor-link);
-    --shadow-floating-large: 0px 0px 0px 1px #454c54, 0px 40px 80px 0px #25292e3d; /** Large floating shadow for modals and dialogs */
-    --shadow-floating-medium: 0px 0px 0px 1px #454c54, 0px 8px 16px -4px #25292e14, 0px 4px 32px -4px #25292e14, 0px 24px 48px -12px #25292e14, 0px 48px 96px -24px #25292e14;
-    --shadow-floating-small: 0px 0px 0px 1px #454c5480, 0px 6px 12px -3px #25292e0a, 0px 6px 18px 0px #25292e1f; /** Small floating shadow for dropdowns, tooltips, and small overlays */
-    --shadow-floating-xlarge: 0px 0px 0px 1px #454c54, 0px 56px 112px 0px #25292e52;
+    --shadow-floating-large: 0 0 0 1px #454c54, 0 40px 80px 0 #25292e3d; /** Large floating shadow for modals and dialogs */
+    --shadow-floating-medium: 0 0 0 1px #454c54, 0 8px 16px -4px #25292e14, 0 4px 32px -4px #25292e14, 0 24px 48px -12px #25292e14, 0 48px 96px -24px #25292e14; /** Medium floating shadow for popovers and action menus */
+    --shadow-floating-small: 0 0 0 1px #454c5480, 0 6px 12px -3px #25292e0a, 0 6px 18px 0 #25292e1f; /** Small floating shadow for dropdowns, tooltips, and small overlays */
+    --shadow-floating-xlarge: 0 0 0 1px #454c54, 0 56px 112px 0 #25292e52; /** Extra large floating shadow for full-screen overlays and sheets */
     --tooltip-fgColor: var(--fgColor-onEmphasis);
     --underlineNav-borderColor-hover: var(--borderColor-muted);
     --border-neutral-muted: 0.0625rem solid #454c54;

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

@@ -1,3 +1,7 @@
+/**
+ * @spec See /DESIGN_TOKENS_SPEC.md for naming logic and semantic pairings.
+ * @rule Never use raw values (hex/px). Use semantic tokens ONLY.
+ */
 [data-color-mode="light"][data-light-theme="light_colorblind"],
 [data-color-mode="auto"][data-light-theme="light_colorblind"] {
   --button-outline-bgColor-active: #0757ba;
@@ -56,14 +60,14 @@
   --borderColor-success-muted: #ddf4ff; /** Subtle success border for positive feedback elements */
   --borderColor-transparent: #ffffff00; /** Fully transparent border */
   --button-danger-bgColor-active: #953800;
-  --button-danger-shadow-selected: inset 0px 1px 0px 0px #47170033;
+  --button-danger-shadow-selected: inset 0 1px 0 0 #47170033;
   --button-inactive-bgColor: #e6eaef;
   --button-inactive-fgColor: #59636e;
   --button-invisible-bgColor-disabled: #ffffff00;
   --button-invisible-borderColor-disabled: #ffffff00;
-  --button-outline-shadow-selected: inset 0px 1px 0px 0px #00215533;
+  --button-outline-shadow-selected: inset 0 1px 0 0 #00215533;
   --button-primary-borderColor-disabled: var(--button-primary-bgColor-disabled);
-  --button-primary-shadow-selected: inset 0px 1px 0px 0px #0021554d;
+  --button-primary-shadow-selected: inset 0 1px 0 0 #0021554d;
   --button-star-iconColor: #eac54f;
   --buttonCounter-danger-fgColor-rest: #953800;
   --buttonCounter-outline-fgColor-rest: #0550ae;
@@ -633,14 +637,14 @@
   --reactionButton-selected-fgColor-hover: #0550ae;
   --selectMenu-bgColor-active: #b6e3ff;
   --selectMenu-borderColor: #ffffff00;
-  --shadow-floating-legacy: 0px 6px 12px -3px #25292e0a, 0px 6px 18px 0px #25292e1f;
-  --shadow-resting-medium: 0px 1px 1px 0px #25292e1a, 0px 3px 6px 0px #25292e1f;
+  --shadow-floating-legacy: 0 6px 12px -3px #25292e0a, 0 6px 18px 0 #25292e1f; /** Legacy floating shadow for backward compatibility */
+  --shadow-resting-medium: 0 1px 1px 0 #25292e1a, 0 3px 6px 0 #25292e1f; /** Medium resting shadow for cards and elevated surfaces */
   --skeletonLoader-bgColor: #818b981a;
   --topicTag-borderColor: #ffffff00;
   --treeViewItem-leadingVisual-iconColor-rest: #54aeff;
   --underlineNav-borderColor-active: #fd8c73;
   --avatar-bgColor: #ffffff;
-  --avatar-shadow: 0px 0px 0px 2px #ffffffcc;
+  --avatar-shadow: 0 0 0 2px #ffffffcc;
   --bgColor-black: #1f2328; /** Pure black background */
   --bgColor-closed-emphasis: var(--bgColor-neutral-emphasis); /** Strong background for closed state badges and labels */
   --bgColor-closed-muted: var(--bgColor-neutral-muted); /** Subtle background for closed state indicators (issues, PRs) */
@@ -690,7 +694,7 @@
   --button-default-bgColor-rest: var(--control-bgColor-rest);
   --button-default-bgColor-selected: var(--control-bgColor-active);
   --button-default-fgColor-rest: var(--control-fgColor-rest);
-  --button-default-shadow-resting: 0px 1px 0px 0px #1f23280a;
+  --button-default-shadow-resting: 0 1px 0 0 #1f23280a;
   --button-invisible-bgColor-active: var(--control-transparent-bgColor-active);
   --button-invisible-bgColor-hover: var(--control-transparent-bgColor-hover);
   --button-invisible-bgColor-rest: var(--control-transparent-bgColor-rest);
@@ -802,9 +806,9 @@
   --progressBar-bgColor-success: var(--bgColor-success-emphasis);
   --progressBar-track-bgColor: var(--borderColor-default);
   --selection-bgColor: #0969da33; /** Background color for text selection highlights */
-  --shadow-inset: inset 0px 1px 0px 0px #1f23280a;
-  --shadow-resting-small: 0px 1px 1px 0px #1f23280f, 0px 1px 3px 0px #1f23280f;
-  --shadow-resting-xsmall: 0px 1px 1px 0px #1f23280f;
+  --shadow-inset: inset 0 1px 0 0 #1f23280a; /** Inset shadow for recessed elements */
+  --shadow-resting-small: 0 1px 1px 0 #1f23280a, 0 1px 2px 0 #1f232808; /** Small resting shadow for buttons and interactive elements */
+  --shadow-resting-xsmall: 0 1px 1px 0 #1f23280d; /** Extra small resting shadow for minimal elevation */
   --sideNav-bgColor-selected: #ffffff;
   --timelineBadge-bgColor: var(--bgColor-muted);
   --tooltip-bgColor: var(--bgColor-emphasis);
@@ -887,10 +891,10 @@
   --buttonKeybindingHint-danger-borderColor-disabled: var(--buttonKeybindingHint-default-borderColor-disabled);
   --buttonKeybindingHint-danger-borderColor-rest: var(--buttonKeybindingHint-default-borderColor-rest);
   --buttonKeybindingHint-danger-fgColor-disabled: var(--buttonKeybindingHint-default-fgColor-disabled);
-  --shadow-floating-large: 0px 0px 0px 1px #d1d9e0, 0px 40px 80px 0px #25292e3d; /** Large floating shadow for modals and dialogs */
-  --shadow-floating-medium: 0px 0px 0px 1px #d1d9e0, 0px 8px 16px -4px #25292e14, 0px 4px 32px -4px #25292e14, 0px 24px 48px -12px #25292e14, 0px 48px 96px -24px #25292e14;
-  --shadow-floating-small: 0px 0px 0px 1px #d1d9e080, 0px 6px 12px -3px #25292e0a, 0px 6px 18px 0px #25292e1f; /** Small floating shadow for dropdowns, tooltips, and small overlays */
-  --shadow-floating-xlarge: 0px 0px 0px 1px #d1d9e0, 0px 56px 112px 0px #25292e52;
+  --shadow-floating-large: 0 0 0 1px #d1d9e000, 0 40px 80px 0 #25292e3d; /** Large floating shadow for modals and dialogs */
+  --shadow-floating-medium: 0 0 0 1px #d1d9e000, 0 8px 16px -4px #25292e14, 0 4px 32px -4px #25292e14, 0 24px 48px -12px #25292e14, 0 48px 96px -24px #25292e14; /** Medium floating shadow for popovers and action menus */
+  --shadow-floating-small: 0 0 0 1px #d1d9e080, 0 6px 12px -3px #25292e0a, 0 6px 18px 0 #25292e1f; /** Small floating shadow for dropdowns, tooltips, and small overlays */
+  --shadow-floating-xlarge: 0 0 0 1px #d1d9e000, 0 56px 112px 0 #25292e52; /** Extra large floating shadow for full-screen overlays and sheets */
   --button-danger-borderColor-active: var(--button-danger-borderColor-hover);
   --button-outline-borderColor-hover: var(--button-primary-borderColor-hover);
   --button-outline-borderColor-active: var(--button-outline-borderColor-hover);
@@ -953,14 +957,14 @@
     --borderColor-success-muted: #ddf4ff; /** Subtle success border for positive feedback elements */
     --borderColor-transparent: #ffffff00; /** Fully transparent border */
     --button-danger-bgColor-active: #953800;
-    --button-danger-shadow-selected: inset 0px 1px 0px 0px #47170033;
+    --button-danger-shadow-selected: inset 0 1px 0 0 #47170033;
     --button-inactive-bgColor: #e6eaef;
     --button-inactive-fgColor: #59636e;
     --button-invisible-bgColor-disabled: #ffffff00;
     --button-invisible-borderColor-disabled: #ffffff00;
-    --button-outline-shadow-selected: inset 0px 1px 0px 0px #00215533;
+    --button-outline-shadow-selected: inset 0 1px 0 0 #00215533;
     --button-primary-borderColor-disabled: var(--button-primary-bgColor-disabled);
-    --button-primary-shadow-selected: inset 0px 1px 0px 0px #0021554d;
+    --button-primary-shadow-selected: inset 0 1px 0 0 #0021554d;
     --button-star-iconColor: #eac54f;
     --buttonCounter-danger-fgColor-rest: #953800;
     --buttonCounter-outline-fgColor-rest: #0550ae;
@@ -1530,14 +1534,14 @@
     --reactionButton-selected-fgColor-hover: #0550ae;
     --selectMenu-bgColor-active: #b6e3ff;
     --selectMenu-borderColor: #ffffff00;
-    --shadow-floating-legacy: 0px 6px 12px -3px #25292e0a, 0px 6px 18px 0px #25292e1f;
-    --shadow-resting-medium: 0px 1px 1px 0px #25292e1a, 0px 3px 6px 0px #25292e1f;
+    --shadow-floating-legacy: 0 6px 12px -3px #25292e0a, 0 6px 18px 0 #25292e1f; /** Legacy floating shadow for backward compatibility */
+    --shadow-resting-medium: 0 1px 1px 0 #25292e1a, 0 3px 6px 0 #25292e1f; /** Medium resting shadow for cards and elevated surfaces */
     --skeletonLoader-bgColor: #818b981a;
     --topicTag-borderColor: #ffffff00;
     --treeViewItem-leadingVisual-iconColor-rest: #54aeff;
     --underlineNav-borderColor-active: #fd8c73;
     --avatar-bgColor: #ffffff;
-    --avatar-shadow: 0px 0px 0px 2px #ffffffcc;
+    --avatar-shadow: 0 0 0 2px #ffffffcc;
     --bgColor-black: #1f2328; /** Pure black background */
     --bgColor-closed-emphasis: var(--bgColor-neutral-emphasis); /** Strong background for closed state badges and labels */
     --bgColor-closed-muted: var(--bgColor-neutral-muted); /** Subtle background for closed state indicators (issues, PRs) */
@@ -1587,7 +1591,7 @@
     --button-default-bgColor-rest: var(--control-bgColor-rest);
     --button-default-bgColor-selected: var(--control-bgColor-active);
     --button-default-fgColor-rest: var(--control-fgColor-rest);
-    --button-default-shadow-resting: 0px 1px 0px 0px #1f23280a;
+    --button-default-shadow-resting: 0 1px 0 0 #1f23280a;
     --button-invisible-bgColor-active: var(--control-transparent-bgColor-active);
     --button-invisible-bgColor-hover: var(--control-transparent-bgColor-hover);
     --button-invisible-bgColor-rest: var(--control-transparent-bgColor-rest);
@@ -1699,9 +1703,9 @@
     --progressBar-bgColor-success: var(--bgColor-success-emphasis);
     --progressBar-track-bgColor: var(--borderColor-default);
     --selection-bgColor: #0969da33; /** Background color for text selection highlights */
-    --shadow-inset: inset 0px 1px 0px 0px #1f23280a;
-    --shadow-resting-small: 0px 1px 1px 0px #1f23280f, 0px 1px 3px 0px #1f23280f;
-    --shadow-resting-xsmall: 0px 1px 1px 0px #1f23280f;
+    --shadow-inset: inset 0 1px 0 0 #1f23280a; /** Inset shadow for recessed elements */
+    --shadow-resting-small: 0 1px 1px 0 #1f23280a, 0 1px 2px 0 #1f232808; /** Small resting shadow for buttons and interactive elements */
+    --shadow-resting-xsmall: 0 1px 1px 0 #1f23280d; /** Extra small resting shadow for minimal elevation */
     --sideNav-bgColor-selected: #ffffff;
     --timelineBadge-bgColor: var(--bgColor-muted);
     --tooltip-bgColor: var(--bgColor-emphasis);
@@ -1784,10 +1788,10 @@
     --buttonKeybindingHint-danger-borderColor-disabled: var(--buttonKeybindingHint-default-borderColor-disabled);
     --buttonKeybindingHint-danger-borderColor-rest: var(--buttonKeybindingHint-default-borderColor-rest);
     --buttonKeybindingHint-danger-fgColor-disabled: var(--buttonKeybindingHint-default-fgColor-disabled);
-    --shadow-floating-large: 0px 0px 0px 1px #d1d9e0, 0px 40px 80px 0px #25292e3d; /** Large floating shadow for modals and dialogs */
-    --shadow-floating-medium: 0px 0px 0px 1px #d1d9e0, 0px 8px 16px -4px #25292e14, 0px 4px 32px -4px #25292e14, 0px 24px 48px -12px #25292e14, 0px 48px 96px -24px #25292e14;
-    --shadow-floating-small: 0px 0px 0px 1px #d1d9e080, 0px 6px 12px -3px #25292e0a, 0px 6px 18px 0px #25292e1f; /** Small floating shadow for dropdowns, tooltips, and small overlays */
-    --shadow-floating-xlarge: 0px 0px 0px 1px #d1d9e0, 0px 56px 112px 0px #25292e52;
+    --shadow-floating-large: 0 0 0 1px #d1d9e000, 0 40px 80px 0 #25292e3d; /** Large floating shadow for modals and dialogs */
+    --shadow-floating-medium: 0 0 0 1px #d1d9e000, 0 8px 16px -4px #25292e14, 0 4px 32px -4px #25292e14, 0 24px 48px -12px #25292e14, 0 48px 96px -24px #25292e14; /** Medium floating shadow for popovers and action menus */
+    --shadow-floating-small: 0 0 0 1px #d1d9e080, 0 6px 12px -3px #25292e0a, 0 6px 18px 0 #25292e1f; /** Small floating shadow for dropdowns, tooltips, and small overlays */
+    --shadow-floating-xlarge: 0 0 0 1px #d1d9e000, 0 56px 112px 0 #25292e52; /** Extra large floating shadow for full-screen overlays and sheets */
     --button-danger-borderColor-active: var(--button-danger-borderColor-hover);
     --button-outline-borderColor-hover: var(--button-primary-borderColor-hover);
     --button-outline-borderColor-active: var(--button-outline-borderColor-hover);