@primer/primitives 11.4.0 → 11.4.1-rc.4e2d1de5

package/dist/internalCss/light-colorblind.css

@@ -931,8 +931,8 @@
   --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: 0px 6px 12px -3px #25292e0a, 0px 6px 18px 0px #25292e1f; /** Legacy floating shadow for backward compatibility */
+  --shadow-resting-medium: 0px 1px 1px 0px #25292e1a, 0px 3px 6px 0px #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);
@@ -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 0px 1px 0px 0px #1f23280a; /** Inset shadow for recessed elements */
+  --shadow-resting-small: 0px 1px 1px 0px #1f23280a, 0px 1px 2px 0px #1f232808; /** Small resting shadow for buttons and interactive elements */
+  --shadow-resting-xsmall: 0px 1px 1px 0px #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);
@@ -1187,9 +1187,9 @@
   --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-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; /** Medium floating shadow for popovers and action menus */
   --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-xlarge: 0px 0px 0px 1px #d1d9e0, 0px 56px 112px 0px #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);
@@ -2127,8 +2127,8 @@
     --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: 0px 6px 12px -3px #25292e0a, 0px 6px 18px 0px #25292e1f; /** Legacy floating shadow for backward compatibility */
+    --shadow-resting-medium: 0px 1px 1px 0px #25292e1a, 0px 3px 6px 0px #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);
@@ -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 0px 1px 0px 0px #1f23280a; /** Inset shadow for recessed elements */
+    --shadow-resting-small: 0px 1px 1px 0px #1f23280a, 0px 1px 2px 0px #1f232808; /** Small resting shadow for buttons and interactive elements */
+    --shadow-resting-xsmall: 0px 1px 1px 0px #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);
@@ -2383,9 +2383,9 @@
     --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-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; /** Medium floating shadow for popovers and action menus */
     --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-xlarge: 0px 0px 0px 1px #d1d9e0, 0px 56px 112px 0px #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

@@ -911,8 +911,8 @@
   --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: 0px 6px 12px -3px #25292e0a, 0px 6px 18px 0px #25292e1f; /** Legacy floating shadow for backward compatibility */
+  --shadow-resting-medium: 0px 1px 1px 0px #25292e1a, 0px 3px 6px 0px #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);
@@ -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 0px 1px 0px 0px #0104090a; /** Inset shadow for recessed elements */
+  --shadow-resting-small: 0px 1px 1px 0px #0104090a, 0px 1px 2px 0px #01040908; /** Small resting shadow for buttons and interactive elements */
+  --shadow-resting-xsmall: 0px 1px 1px 0px #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,9 +1181,9 @@
   --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-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; /** Medium floating shadow for popovers and action menus */
   --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-xlarge: 0px 0px 0px 1px #454c54, 0px 56px 112px 0px #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;
@@ -2107,8 +2107,8 @@
     --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: 0px 6px 12px -3px #25292e0a, 0px 6px 18px 0px #25292e1f; /** Legacy floating shadow for backward compatibility */
+    --shadow-resting-medium: 0px 1px 1px 0px #25292e1a, 0px 3px 6px 0px #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);
@@ -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 0px 1px 0px 0px #0104090a; /** Inset shadow for recessed elements */
+    --shadow-resting-small: 0px 1px 1px 0px #0104090a, 0px 1px 2px 0px #01040908; /** Small resting shadow for buttons and interactive elements */
+    --shadow-resting-xsmall: 0px 1px 1px 0px #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,9 +2377,9 @@
     --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-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; /** Medium floating shadow for popovers and action menus */
     --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-xlarge: 0px 0px 0px 1px #454c54, 0px 56px 112px 0px #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-tritanopia-high-contrast.css

@@ -918,8 +918,8 @@
   --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: 0px 6px 12px -3px #25292e0a, 0px 6px 18px 0px #25292e1f; /** Legacy floating shadow for backward compatibility */
+  --shadow-resting-medium: 0px 1px 1px 0px #25292e1a, 0px 3px 6px 0px #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);
@@ -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 0px 1px 0px 0px #0104090a; /** Inset shadow for recessed elements */
+  --shadow-resting-small: 0px 1px 1px 0px #0104090a, 0px 1px 2px 0px #01040908; /** Small resting shadow for buttons and interactive elements */
+  --shadow-resting-xsmall: 0px 1px 1px 0px #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);
@@ -1182,9 +1182,9 @@
   --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-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; /** Medium floating shadow for popovers and action menus */
   --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-xlarge: 0px 0px 0px 1px #454c54, 0px 56px 112px 0px #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;
@@ -2114,8 +2114,8 @@
     --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: 0px 6px 12px -3px #25292e0a, 0px 6px 18px 0px #25292e1f; /** Legacy floating shadow for backward compatibility */
+    --shadow-resting-medium: 0px 1px 1px 0px #25292e1a, 0px 3px 6px 0px #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);
@@ -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 0px 1px 0px 0px #0104090a; /** Inset shadow for recessed elements */
+    --shadow-resting-small: 0px 1px 1px 0px #0104090a, 0px 1px 2px 0px #01040908; /** Small resting shadow for buttons and interactive elements */
+    --shadow-resting-xsmall: 0px 1px 1px 0px #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);
@@ -2378,9 +2378,9 @@
     --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-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; /** Medium floating shadow for popovers and action menus */
     --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-xlarge: 0px 0px 0px 1px #454c54, 0px 56px 112px 0px #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-tritanopia.css

@@ -937,8 +937,8 @@
   --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: 0px 6px 12px -3px #25292e0a, 0px 6px 18px 0px #25292e1f; /** Legacy floating shadow for backward compatibility */
+  --shadow-resting-medium: 0px 1px 1px 0px #25292e1a, 0px 3px 6px 0px #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);
@@ -1102,9 +1102,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 0px 1px 0px 0px #1f23280a; /** Inset shadow for recessed elements */
+  --shadow-resting-small: 0px 1px 1px 0px #1f23280a, 0px 1px 2px 0px #1f232808; /** Small resting shadow for buttons and interactive elements */
+  --shadow-resting-xsmall: 0px 1px 1px 0px #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);
@@ -1187,9 +1187,9 @@
   --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-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; /** Medium floating shadow for popovers and action menus */
   --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-xlarge: 0px 0px 0px 1px #d1d9e0, 0px 56px 112px 0px #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);
@@ -2133,8 +2133,8 @@
     --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: 0px 6px 12px -3px #25292e0a, 0px 6px 18px 0px #25292e1f; /** Legacy floating shadow for backward compatibility */
+    --shadow-resting-medium: 0px 1px 1px 0px #25292e1a, 0px 3px 6px 0px #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);
@@ -2298,9 +2298,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 0px 1px 0px 0px #1f23280a; /** Inset shadow for recessed elements */
+    --shadow-resting-small: 0px 1px 1px 0px #1f23280a, 0px 1px 2px 0px #1f232808; /** Small resting shadow for buttons and interactive elements */
+    --shadow-resting-xsmall: 0px 1px 1px 0px #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);
@@ -2383,9 +2383,9 @@
     --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-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; /** Medium floating shadow for popovers and action menus */
     --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-xlarge: 0px 0px 0px 1px #d1d9e0, 0px 56px 112px 0px #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.css

@@ -934,8 +934,8 @@
   --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: 0px 6px 12px -3px #25292e0a, 0px 6px 18px 0px #25292e1f; /** Legacy floating shadow for backward compatibility */
+  --shadow-resting-medium: 0px 1px 1px 0px #25292e1a, 0px 3px 6px 0px #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);
@@ -1101,9 +1101,9 @@
   --progressBar-bgColor-sponsors: var(--bgColor-sponsors-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 0px 1px 0px 0px #1f23280a; /** Inset shadow for recessed elements */
+  --shadow-resting-small: 0px 1px 1px 0px #1f23280a, 0px 1px 2px 0px #1f232808; /** Small resting shadow for buttons and interactive elements */
+  --shadow-resting-xsmall: 0px 1px 1px 0px #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);
@@ -1187,9 +1187,9 @@
   --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-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; /** Medium floating shadow for popovers and action menus */
   --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-xlarge: 0px 0px 0px 1px #d1d9e0, 0px 56px 112px 0px #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);
@@ -2130,8 +2130,8 @@
     --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: 0px 6px 12px -3px #25292e0a, 0px 6px 18px 0px #25292e1f; /** Legacy floating shadow for backward compatibility */
+    --shadow-resting-medium: 0px 1px 1px 0px #25292e1a, 0px 3px 6px 0px #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);
@@ -2297,9 +2297,9 @@
     --progressBar-bgColor-sponsors: var(--bgColor-sponsors-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 0px 1px 0px 0px #1f23280a; /** Inset shadow for recessed elements */
+    --shadow-resting-small: 0px 1px 1px 0px #1f23280a, 0px 1px 2px 0px #1f232808; /** Small resting shadow for buttons and interactive elements */
+    --shadow-resting-xsmall: 0px 1px 1px 0px #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);
@@ -2383,9 +2383,9 @@
     --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-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; /** Medium floating shadow for popovers and action menus */
     --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-xlarge: 0px 0px 0px 1px #d1d9e0, 0px 56px 112px 0px #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/styleLint/base/motion/motion.json

@@ -1,12 +1,18 @@
 {
   "base-duration-0": {
     "key": "{base.duration.0}",
-    "$value": "0ms",
+    "$value": {
+      "value": 0,
+      "unit": "ms"
+    },
     "$type": "duration",
     "filePath": "src/tokens/base/motion/timing.json5",
     "isSource": true,
     "original": {
-      "$value": "0ms",
+      "$value": {
+        "value": 0,
+        "unit": "ms"
+      },
       "$type": "duration",
       "key": "{base.duration.0}"
     },
@@ -16,12 +22,18 @@
   },
   "base-duration-100": {
     "key": "{base.duration.100}",
-    "$value": "100ms",
+    "$value": {
+      "value": 100,
+      "unit": "ms"
+    },
     "$type": "duration",
     "filePath": "src/tokens/base/motion/timing.json5",
     "isSource": true,
     "original": {
-      "$value": "100ms",
+      "$value": {
+        "value": 100,
+        "unit": "ms"
+      },
       "$type": "duration",
       "key": "{base.duration.100}"
     },
@@ -31,12 +43,18 @@
   },
   "base-duration-1000": {
     "key": "{base.duration.1000}",
-    "$value": "1000ms",
+    "$value": {
+      "value": 1000,
+      "unit": "ms"
+    },
     "$type": "duration",
     "filePath": "src/tokens/base/motion/timing.json5",
     "isSource": true,
     "original": {
-      "$value": "1000ms",
+      "$value": {
+        "value": 1000,
+        "unit": "ms"
+      },
       "$type": "duration",
       "key": "{base.duration.1000}"
     },
@@ -46,12 +64,18 @@
   },
   "base-duration-200": {
     "key": "{base.duration.200}",
-    "$value": "200ms",
+    "$value": {
+      "value": 200,
+      "unit": "ms"
+    },
     "$type": "duration",
     "filePath": "src/tokens/base/motion/timing.json5",
     "isSource": true,
     "original": {
-      "$value": "200ms",
+      "$value": {
+        "value": 200,
+        "unit": "ms"
+      },
       "$type": "duration",
       "key": "{base.duration.200}"
     },
@@ -61,12 +85,18 @@
   },
   "base-duration-300": {
     "key": "{base.duration.300}",
-    "$value": "300ms",
+    "$value": {
+      "value": 300,
+      "unit": "ms"
+    },
     "$type": "duration",
     "filePath": "src/tokens/base/motion/timing.json5",
     "isSource": true,
     "original": {
-      "$value": "300ms",
+      "$value": {
+        "value": 300,
+        "unit": "ms"
+      },
       "$type": "duration",
       "key": "{base.duration.300}"
     },
@@ -76,12 +106,18 @@
   },
   "base-duration-400": {
     "key": "{base.duration.400}",
-    "$value": "400ms",
+    "$value": {
+      "value": 400,
+      "unit": "ms"
+    },
     "$type": "duration",
     "filePath": "src/tokens/base/motion/timing.json5",
     "isSource": true,
     "original": {
-      "$value": "400ms",
+      "$value": {
+        "value": 400,
+        "unit": "ms"
+      },
       "$type": "duration",
       "key": "{base.duration.400}"
     },
@@ -91,12 +127,18 @@
   },
   "base-duration-50": {
     "key": "{base.duration.50}",
-    "$value": "50ms",
+    "$value": {
+      "value": 50,
+      "unit": "ms"
+    },
     "$type": "duration",
     "filePath": "src/tokens/base/motion/timing.json5",
     "isSource": true,
     "original": {
-      "$value": "50ms",
+      "$value": {
+        "value": 50,
+        "unit": "ms"
+      },
       "$type": "duration",
       "key": "{base.duration.50}"
     },
@@ -106,12 +148,18 @@
   },
   "base-duration-500": {
     "key": "{base.duration.500}",
-    "$value": "500ms",
+    "$value": {
+      "value": 500,
+      "unit": "ms"
+    },
     "$type": "duration",
     "filePath": "src/tokens/base/motion/timing.json5",
     "isSource": true,
     "original": {
-      "$value": "500ms",
+      "$value": {
+        "value": 500,
+        "unit": "ms"
+      },
       "$type": "duration",
       "key": "{base.duration.500}"
     },
@@ -121,12 +169,18 @@
   },
   "base-duration-600": {
     "key": "{base.duration.600}",
-    "$value": "600ms",
+    "$value": {
+      "value": 600,
+      "unit": "ms"
+    },
     "$type": "duration",
     "filePath": "src/tokens/base/motion/timing.json5",
     "isSource": true,
     "original": {
-      "$value": "600ms",
+      "$value": {
+        "value": 600,
+        "unit": "ms"
+      },
       "$type": "duration",
       "key": "{base.duration.600}"
     },
@@ -136,12 +190,18 @@
   },
   "base-duration-700": {
     "key": "{base.duration.700}",
-    "$value": "700ms",
+    "$value": {
+      "value": 700,
+      "unit": "ms"
+    },
     "$type": "duration",
     "filePath": "src/tokens/base/motion/timing.json5",
     "isSource": true,
     "original": {
-      "$value": "700ms",
+      "$value": {
+        "value": 700,
+        "unit": "ms"
+      },
       "$type": "duration",
       "key": "{base.duration.700}"
     },
@@ -151,12 +211,18 @@
   },
   "base-duration-800": {
     "key": "{base.duration.800}",
-    "$value": "800ms",
+    "$value": {
+      "value": 800,
+      "unit": "ms"
+    },
     "$type": "duration",
     "filePath": "src/tokens/base/motion/timing.json5",
     "isSource": true,
     "original": {
-      "$value": "800ms",
+      "$value": {
+        "value": 800,
+        "unit": "ms"
+      },
       "$type": "duration",
       "key": "{base.duration.800}"
     },
@@ -166,12 +232,18 @@
   },
   "base-duration-900": {
     "key": "{base.duration.900}",
-    "$value": "900ms",
+    "$value": {
+      "value": 900,
+      "unit": "ms"
+    },
     "$type": "duration",
     "filePath": "src/tokens/base/motion/timing.json5",
     "isSource": true,
     "original": {
-      "$value": "900ms",
+      "$value": {
+        "value": 900,
+        "unit": "ms"
+      },
       "$type": "duration",
       "key": "{base.duration.900}"
     },