@primer/primitives 11.4.0 → 11.4.1-rc.24c79953

package/dist/internalCss/dark.css

@@ -303,7 +303,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);
@@ -354,8 +354,8 @@
   --boxShadow-thin: inset 0 0 0 var(--borderWidth-thin); /** Thin shadow used instead of a border to prevent layout shift */
   --button-danger-bgColor-hover: var(--base-color-red-6);
   --button-danger-iconColor-rest: var(--button-danger-fgColor-rest);
-  --button-danger-shadow-selected: 0px 0px 0px 0px #000000;
-  --button-default-shadow-resting: 0px 0px 0px 0px #000000;
+  --button-danger-shadow-selected: 0 0 0 0 #000000;
+  --button-default-shadow-resting: 0 0 0 0 #000000;
   --button-inactive-bgColor: var(--base-color-neutral-4);
   --button-inactive-fgColor: var(--base-color-neutral-9);
   --button-invisible-bgColor-disabled: var(--base-color-transparent);
@@ -365,8 +365,8 @@
   --button-outline-fgColor-disabled: #4493f880;
   --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-primary-shadow-selected: 0px 0px 0px 0px #000000;
+  --button-outline-shadow-selected: 0 0 0 0 #000000;
+  --button-primary-shadow-selected: 0 0 0 0 #000000;
   --button-star-iconColor: var(--base-color-yellow-2);
   --buttonCounter-danger-bgColor-rest: #49020233;
   --buttonCounter-default-bgColor-rest: var(--base-color-neutral-6);
@@ -1114,11 +1114,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);
@@ -1185,10 +1185,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);
@@ -1499,7 +1499,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);
@@ -1550,8 +1550,8 @@
     --boxShadow-thin: inset 0 0 0 var(--borderWidth-thin); /** Thin shadow used instead of a border to prevent layout shift */
     --button-danger-bgColor-hover: var(--base-color-red-6);
     --button-danger-iconColor-rest: var(--button-danger-fgColor-rest);
-    --button-danger-shadow-selected: 0px 0px 0px 0px #000000;
-    --button-default-shadow-resting: 0px 0px 0px 0px #000000;
+    --button-danger-shadow-selected: 0 0 0 0 #000000;
+    --button-default-shadow-resting: 0 0 0 0 #000000;
     --button-inactive-bgColor: var(--base-color-neutral-4);
     --button-inactive-fgColor: var(--base-color-neutral-9);
     --button-invisible-bgColor-disabled: var(--base-color-transparent);
@@ -1561,8 +1561,8 @@
     --button-outline-fgColor-disabled: #4493f880;
     --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-primary-shadow-selected: 0px 0px 0px 0px #000000;
+    --button-outline-shadow-selected: 0 0 0 0 #000000;
+    --button-primary-shadow-selected: 0 0 0 0 #000000;
     --button-star-iconColor: var(--base-color-yellow-2);
     --buttonCounter-danger-bgColor-rest: #49020233;
     --buttonCounter-default-bgColor-rest: var(--base-color-neutral-6);
@@ -2310,11 +2310,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);
@@ -2381,10 +2381,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/internalCss/light-colorblind-high-contrast.css

@@ -358,7 +358,7 @@
   --boxShadow-thin: inset 0 0 0 var(--borderWidth-thin); /** Thin shadow used instead of a border to prevent layout shift */
   --button-danger-bgColor-active: var(--base-color-orange-6);
   --button-danger-borderColor-hover: var(--base-color-orange-7);
-  --button-danger-shadow-selected: inset 0px 1px 0px 0px #43001133;
+  --button-danger-shadow-selected: inset 0 1px 0 0 #43001133;
   --button-inactive-bgColor: var(--base-color-neutral-3);
   --button-inactive-fgColor: var(--base-color-neutral-10);
   --button-invisible-bgColor-disabled: var(--base-color-transparent);
@@ -366,10 +366,10 @@
   --button-invisible-fgColor-hover: var(--base-color-neutral-11);
   --button-invisible-iconColor-hover: var(--base-color-neutral-11);
   --button-outline-borderColor-hover: var(--base-color-blue-7);
-  --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: var(--base-color-blue-7);
-  --button-primary-shadow-selected: inset 0px 1px 0px 0px #00230b4d;
+  --button-primary-shadow-selected: inset 0 1px 0 0 #00230b4d;
   --button-star-iconColor: var(--base-color-yellow-2);
   --buttonCounter-default-bgColor-rest: var(--base-color-neutral-7);
   --buttonCounter-outline-fgColor-rest: var(--base-color-blue-6);
@@ -918,13 +918,13 @@
   --reactionButton-selected-fgColor-hover: var(--base-color-blue-6);
   --selectMenu-bgColor-active: var(--base-color-blue-1);
   --selectMenu-borderColor: var(--base-color-transparent);
-  --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: var(--base-color-neutral-5);
   --treeViewItem-leadingVisual-iconColor-rest: var(--base-color-blue-3);
   --underlineNav-borderColor-active: var(--base-color-coral-3);
   --avatar-bgColor: var(--base-color-neutral-0);
-  --avatar-shadow: 0px 0px 0px 2px #ffffffcc;
+  --avatar-shadow: 0 0 0 2px #ffffffcc;
   --base-color-inset: var(--base-color-neutral-0);
   --bgColor-black: var(--base-color-neutral-13); /** Pure black background */
   --bgColor-closed-emphasis: var(--bgColor-neutral-emphasis); /** Strong background for closed state badges and labels */
@@ -973,7 +973,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);
@@ -1102,9 +1102,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: var(--base-color-neutral-0);
   --timelineBadge-bgColor: var(--bgColor-muted);
   --tooltip-bgColor: var(--bgColor-emphasis);
@@ -1181,10 +1181,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;
@@ -1554,7 +1554,7 @@
     --boxShadow-thin: inset 0 0 0 var(--borderWidth-thin); /** Thin shadow used instead of a border to prevent layout shift */
     --button-danger-bgColor-active: var(--base-color-orange-6);
     --button-danger-borderColor-hover: var(--base-color-orange-7);
-    --button-danger-shadow-selected: inset 0px 1px 0px 0px #43001133;
+    --button-danger-shadow-selected: inset 0 1px 0 0 #43001133;
     --button-inactive-bgColor: var(--base-color-neutral-3);
     --button-inactive-fgColor: var(--base-color-neutral-10);
     --button-invisible-bgColor-disabled: var(--base-color-transparent);
@@ -1562,10 +1562,10 @@
     --button-invisible-fgColor-hover: var(--base-color-neutral-11);
     --button-invisible-iconColor-hover: var(--base-color-neutral-11);
     --button-outline-borderColor-hover: var(--base-color-blue-7);
-    --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: var(--base-color-blue-7);
-    --button-primary-shadow-selected: inset 0px 1px 0px 0px #00230b4d;
+    --button-primary-shadow-selected: inset 0 1px 0 0 #00230b4d;
     --button-star-iconColor: var(--base-color-yellow-2);
     --buttonCounter-default-bgColor-rest: var(--base-color-neutral-7);
     --buttonCounter-outline-fgColor-rest: var(--base-color-blue-6);
@@ -2114,13 +2114,13 @@
     --reactionButton-selected-fgColor-hover: var(--base-color-blue-6);
     --selectMenu-bgColor-active: var(--base-color-blue-1);
     --selectMenu-borderColor: var(--base-color-transparent);
-    --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: var(--base-color-neutral-5);
     --treeViewItem-leadingVisual-iconColor-rest: var(--base-color-blue-3);
     --underlineNav-borderColor-active: var(--base-color-coral-3);
     --avatar-bgColor: var(--base-color-neutral-0);
-    --avatar-shadow: 0px 0px 0px 2px #ffffffcc;
+    --avatar-shadow: 0 0 0 2px #ffffffcc;
     --base-color-inset: var(--base-color-neutral-0);
     --bgColor-black: var(--base-color-neutral-13); /** Pure black background */
     --bgColor-closed-emphasis: var(--bgColor-neutral-emphasis); /** Strong background for closed state badges and labels */
@@ -2169,7 +2169,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);
@@ -2298,9 +2298,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: var(--base-color-neutral-0);
     --timelineBadge-bgColor: var(--bgColor-muted);
     --tooltip-bgColor: var(--bgColor-emphasis);
@@ -2377,10 +2377,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/internalCss/light-colorblind.css

@@ -354,14 +354,14 @@
   --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 */
   --button-danger-bgColor-active: var(--base-color-orange-6);
-  --button-danger-shadow-selected: inset 0px 1px 0px 0px #47170033;
+  --button-danger-shadow-selected: inset 0 1px 0 0 #47170033;
   --button-inactive-bgColor: var(--base-color-neutral-3);
   --button-inactive-fgColor: var(--base-color-neutral-9);
   --button-invisible-bgColor-disabled: var(--base-color-transparent);
   --button-invisible-borderColor-disabled: var(--base-color-transparent);
-  --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: var(--base-color-yellow-2);
   --buttonCounter-danger-fgColor-rest: var(--base-color-orange-6);
   --buttonCounter-outline-fgColor-rest: var(--base-color-blue-6);
@@ -931,14 +931,14 @@
   --reactionButton-selected-fgColor-hover: var(--base-color-blue-6);
   --selectMenu-bgColor-active: var(--base-color-blue-1);
   --selectMenu-borderColor: var(--base-color-transparent);
-  --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: var(--base-color-transparent);
   --treeViewItem-leadingVisual-iconColor-rest: var(--base-color-blue-3);
   --underlineNav-borderColor-active: var(--base-color-coral-3);
   --avatar-bgColor: var(--base-color-neutral-0);
-  --avatar-shadow: 0px 0px 0px 2px #ffffffcc;
+  --avatar-shadow: 0 0 0 2px #ffffffcc;
   --base-color-inset: var(--base-color-neutral-0);
   --bgColor-black: var(--base-color-neutral-13); /** Pure black background */
   --bgColor-closed-emphasis: var(--bgColor-neutral-emphasis); /** Strong background for closed state badges and labels */
@@ -989,7 +989,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);
@@ -1101,9 +1101,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: var(--base-color-neutral-0);
   --timelineBadge-bgColor: var(--bgColor-muted);
   --tooltip-bgColor: var(--bgColor-emphasis);
@@ -1186,10 +1186,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 #d1d9e0, 0 40px 80px 0 #25292e3d; /** Large floating shadow for modals and dialogs */
+  --shadow-floating-medium: 0 0 0 1px #d1d9e0, 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 #d1d9e0, 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);
@@ -1550,14 +1550,14 @@
     --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 */
     --button-danger-bgColor-active: var(--base-color-orange-6);
-    --button-danger-shadow-selected: inset 0px 1px 0px 0px #47170033;
+    --button-danger-shadow-selected: inset 0 1px 0 0 #47170033;
     --button-inactive-bgColor: var(--base-color-neutral-3);
     --button-inactive-fgColor: var(--base-color-neutral-9);
     --button-invisible-bgColor-disabled: var(--base-color-transparent);
     --button-invisible-borderColor-disabled: var(--base-color-transparent);
-    --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: var(--base-color-yellow-2);
     --buttonCounter-danger-fgColor-rest: var(--base-color-orange-6);
     --buttonCounter-outline-fgColor-rest: var(--base-color-blue-6);
@@ -2127,14 +2127,14 @@
     --reactionButton-selected-fgColor-hover: var(--base-color-blue-6);
     --selectMenu-bgColor-active: var(--base-color-blue-1);
     --selectMenu-borderColor: var(--base-color-transparent);
-    --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: var(--base-color-transparent);
     --treeViewItem-leadingVisual-iconColor-rest: var(--base-color-blue-3);
     --underlineNav-borderColor-active: var(--base-color-coral-3);
     --avatar-bgColor: var(--base-color-neutral-0);
-    --avatar-shadow: 0px 0px 0px 2px #ffffffcc;
+    --avatar-shadow: 0 0 0 2px #ffffffcc;
     --base-color-inset: var(--base-color-neutral-0);
     --bgColor-black: var(--base-color-neutral-13); /** Pure black background */
     --bgColor-closed-emphasis: var(--bgColor-neutral-emphasis); /** Strong background for closed state badges and labels */
@@ -2185,7 +2185,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);
@@ -2297,9 +2297,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: var(--base-color-neutral-0);
     --timelineBadge-bgColor: var(--bgColor-muted);
     --tooltip-bgColor: var(--bgColor-emphasis);
@@ -2382,10 +2382,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 #d1d9e0, 0 40px 80px 0 #25292e3d; /** Large floating shadow for modals and dialogs */
+    --shadow-floating-medium: 0 0 0 1px #d1d9e0, 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 #d1d9e0, 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);

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

@@ -356,17 +356,17 @@
   --boxShadow-thin: inset 0 0 0 var(--borderWidth-thin); /** Thin shadow used instead of a border to prevent layout shift */
   --button-danger-bgColor-active: var(--base-color-red-6);
   --button-danger-borderColor-hover: var(--base-color-red-7);
-  --button-danger-shadow-selected: inset 0px 1px 0px 0px #43001133;
+  --button-danger-shadow-selected: inset 0 1px 0 0 #43001133;
   --button-inactive-fgColor: var(--base-color-neutral-10);
   --button-invisible-bgColor-disabled: var(--base-color-transparent);
   --button-invisible-borderColor-disabled: var(--base-color-transparent);
   --button-invisible-fgColor-hover: var(--base-color-neutral-11);
   --button-invisible-iconColor-hover: var(--base-color-neutral-11);
   --button-outline-borderColor-hover: var(--base-color-blue-7);
-  --button-outline-shadow-selected: inset 0px 1px 0px 0px #021a4a33;
+  --button-outline-shadow-selected: inset 0 1px 0 0 #021a4a33;
   --button-primary-bgColor-rest: var(--base-color-green-5);
   --button-primary-borderColor-rest: var(--base-color-green-7);
-  --button-primary-shadow-selected: inset 0px 1px 0px 0px #00230b4d;
+  --button-primary-shadow-selected: inset 0 1px 0 0 #00230b4d;
   --button-star-iconColor: var(--base-color-yellow-2);
   --buttonCounter-default-bgColor-rest: var(--base-color-neutral-7);
   --buttonCounter-outline-fgColor-rest: var(--base-color-blue-6);
@@ -911,13 +911,13 @@
   --reactionButton-selected-fgColor-hover: var(--base-color-blue-6);
   --selectMenu-bgColor-active: var(--base-color-blue-1);
   --selectMenu-borderColor: var(--base-color-transparent);
-  --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: var(--base-color-neutral-5);
   --treeViewItem-leadingVisual-iconColor-rest: var(--base-color-blue-3);
   --underlineNav-borderColor-active: var(--base-color-coral-3);
   --avatar-bgColor: var(--base-color-neutral-0);
-  --avatar-shadow: 0px 0px 0px 2px #ffffffcc;
+  --avatar-shadow: 0 0 0 2px #ffffffcc;
   --base-color-inset: var(--base-color-neutral-0);
   --bgColor-black: var(--base-color-neutral-13); /** Pure black background */
   --bgColor-closed-emphasis: var(--bgColor-danger-emphasis); /** Strong background for closed state badges and labels */
@@ -970,7 +970,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-inactive-bgColor: var(--control-bgColor-rest);
   --button-invisible-bgColor-active: var(--control-transparent-bgColor-active);
   --button-invisible-bgColor-hover: var(--control-transparent-bgColor-hover);
@@ -1102,9 +1102,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: var(--base-color-neutral-0);
   --timelineBadge-bgColor: var(--bgColor-muted);
   --tooltip-bgColor: var(--bgColor-emphasis);
@@ -1180,10 +1180,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;
@@ -1552,17 +1552,17 @@
     --boxShadow-thin: inset 0 0 0 var(--borderWidth-thin); /** Thin shadow used instead of a border to prevent layout shift */
     --button-danger-bgColor-active: var(--base-color-red-6);
     --button-danger-borderColor-hover: var(--base-color-red-7);
-    --button-danger-shadow-selected: inset 0px 1px 0px 0px #43001133;
+    --button-danger-shadow-selected: inset 0 1px 0 0 #43001133;
     --button-inactive-fgColor: var(--base-color-neutral-10);
     --button-invisible-bgColor-disabled: var(--base-color-transparent);
     --button-invisible-borderColor-disabled: var(--base-color-transparent);
     --button-invisible-fgColor-hover: var(--base-color-neutral-11);
     --button-invisible-iconColor-hover: var(--base-color-neutral-11);
     --button-outline-borderColor-hover: var(--base-color-blue-7);
-    --button-outline-shadow-selected: inset 0px 1px 0px 0px #021a4a33;
+    --button-outline-shadow-selected: inset 0 1px 0 0 #021a4a33;
     --button-primary-bgColor-rest: var(--base-color-green-5);
     --button-primary-borderColor-rest: var(--base-color-green-7);
-    --button-primary-shadow-selected: inset 0px 1px 0px 0px #00230b4d;
+    --button-primary-shadow-selected: inset 0 1px 0 0 #00230b4d;
     --button-star-iconColor: var(--base-color-yellow-2);
     --buttonCounter-default-bgColor-rest: var(--base-color-neutral-7);
     --buttonCounter-outline-fgColor-rest: var(--base-color-blue-6);
@@ -2107,13 +2107,13 @@
     --reactionButton-selected-fgColor-hover: var(--base-color-blue-6);
     --selectMenu-bgColor-active: var(--base-color-blue-1);
     --selectMenu-borderColor: var(--base-color-transparent);
-    --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: var(--base-color-neutral-5);
     --treeViewItem-leadingVisual-iconColor-rest: var(--base-color-blue-3);
     --underlineNav-borderColor-active: var(--base-color-coral-3);
     --avatar-bgColor: var(--base-color-neutral-0);
-    --avatar-shadow: 0px 0px 0px 2px #ffffffcc;
+    --avatar-shadow: 0 0 0 2px #ffffffcc;
     --base-color-inset: var(--base-color-neutral-0);
     --bgColor-black: var(--base-color-neutral-13); /** Pure black background */
     --bgColor-closed-emphasis: var(--bgColor-danger-emphasis); /** Strong background for closed state badges and labels */
@@ -2166,7 +2166,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-inactive-bgColor: var(--control-bgColor-rest);
     --button-invisible-bgColor-active: var(--control-transparent-bgColor-active);
     --button-invisible-bgColor-hover: var(--control-transparent-bgColor-hover);
@@ -2298,9 +2298,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: var(--base-color-neutral-0);
     --timelineBadge-bgColor: var(--bgColor-muted);
     --tooltip-bgColor: var(--bgColor-emphasis);
@@ -2376,10 +2376,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;