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

package/dist/docs/functional/typography/typography.json

@@ -647,7 +647,10 @@
     "filePath": "src/tokens/functional/typography/typography.json5",
     "isSource": true,
     "original": {
-      "$value": "13px",
+      "$value": {
+        "value": 13,
+        "unit": "px"
+      },
       "$type": "dimension",
       "$extensions": {
         "org.primer.figma": {
@@ -734,7 +737,10 @@
     "filePath": "src/tokens/functional/typography/typography.json5",
     "isSource": true,
     "original": {
-      "$value": "0.9285em",
+      "$value": {
+        "value": 0.9285,
+        "unit": "em"
+      },
       "$type": "dimension",
       "$extensions": {
         "org.primer.figma": {

package/dist/fallbacks/base/motion/motion.json

@@ -4,16 +4,52 @@
   "--base-easing-easeIn": [0.7, 0.1, 0.75, 0.9],
   "--base-easing-easeOut": [0.3, 0.8, 0.6, 1],
   "--base-easing-easeInOut": [0.6, 0, 0.2, 1],
-  "--base-duration-0": "0ms",
-  "--base-duration-50": "50ms",
-  "--base-duration-100": "100ms",
-  "--base-duration-200": "200ms",
-  "--base-duration-300": "300ms",
-  "--base-duration-400": "400ms",
-  "--base-duration-500": "500ms",
-  "--base-duration-600": "600ms",
-  "--base-duration-700": "700ms",
-  "--base-duration-800": "800ms",
-  "--base-duration-900": "900ms",
-  "--base-duration-1000": "1000ms"
+  "--base-duration-0": {
+    "value": 0,
+    "unit": "ms"
+  },
+  "--base-duration-50": {
+    "value": 50,
+    "unit": "ms"
+  },
+  "--base-duration-100": {
+    "value": 100,
+    "unit": "ms"
+  },
+  "--base-duration-200": {
+    "value": 200,
+    "unit": "ms"
+  },
+  "--base-duration-300": {
+    "value": 300,
+    "unit": "ms"
+  },
+  "--base-duration-400": {
+    "value": 400,
+    "unit": "ms"
+  },
+  "--base-duration-500": {
+    "value": 500,
+    "unit": "ms"
+  },
+  "--base-duration-600": {
+    "value": 600,
+    "unit": "ms"
+  },
+  "--base-duration-700": {
+    "value": 700,
+    "unit": "ms"
+  },
+  "--base-duration-800": {
+    "value": 800,
+    "unit": "ms"
+  },
+  "--base-duration-900": {
+    "value": 900,
+    "unit": "ms"
+  },
+  "--base-duration-1000": {
+    "value": 1000,
+    "unit": "ms"
+  }
 }

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

@@ -91,7 +91,7 @@
       "r": 0.12156862745098039,
       "g": 0.13725490196078433,
       "b": 0.1568627450980392,
-      "a": 0.06
+      "a": 0.05
     },
     "type": "COLOR",
     "scopes": ["EFFECT_COLOR"],
@@ -141,7 +141,7 @@
       "r": 0.12156862745098039,
       "g": 0.13725490196078433,
       "b": 0.1568627450980392,
-      "a": 0.06
+      "a": 0.04
     },
     "type": "COLOR",
     "scopes": ["EFFECT_COLOR"],
@@ -169,7 +169,7 @@
   },
   {
     "name": "shadow/resting/small/2/blur",
-    "value": 3,
+    "value": 2,
     "type": "FLOAT",
     "scopes": ["EFFECT_FLOAT"],
     "mode": "light protanopia deuteranopia",
@@ -191,7 +191,7 @@
       "r": 0.12156862745098039,
       "g": 0.13725490196078433,
       "b": 0.1568627450980392,
-      "a": 0.06
+      "a": 0.03
     },
     "type": "COLOR",
     "scopes": ["EFFECT_COLOR"],

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

@@ -91,7 +91,7 @@
       "r": 0.00392156862745098,
       "g": 0.01568627450980392,
       "b": 0.03529411764705882,
-      "a": 0.06
+      "a": 0.05
     },
     "type": "COLOR",
     "scopes": ["EFFECT_COLOR"],
@@ -141,7 +141,7 @@
       "r": 0.00392156862745098,
       "g": 0.01568627450980392,
       "b": 0.03529411764705882,
-      "a": 0.06
+      "a": 0.04
     },
     "type": "COLOR",
     "scopes": ["EFFECT_COLOR"],
@@ -169,7 +169,7 @@
   },
   {
     "name": "shadow/resting/small/2/blur",
-    "value": 3,
+    "value": 2,
     "type": "FLOAT",
     "scopes": ["EFFECT_FLOAT"],
     "mode": "light high contrast",
@@ -191,7 +191,7 @@
       "r": 0.00392156862745098,
       "g": 0.01568627450980392,
       "b": 0.03529411764705882,
-      "a": 0.06
+      "a": 0.03
     },
     "type": "COLOR",
     "scopes": ["EFFECT_COLOR"],

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

@@ -91,7 +91,7 @@
       "r": 0.12156862745098039,
       "g": 0.13725490196078433,
       "b": 0.1568627450980392,
-      "a": 0.06
+      "a": 0.05
     },
     "type": "COLOR",
     "scopes": ["EFFECT_COLOR"],
@@ -141,7 +141,7 @@
       "r": 0.12156862745098039,
       "g": 0.13725490196078433,
       "b": 0.1568627450980392,
-      "a": 0.06
+      "a": 0.04
     },
     "type": "COLOR",
     "scopes": ["EFFECT_COLOR"],
@@ -169,7 +169,7 @@
   },
   {
     "name": "shadow/resting/small/2/blur",
-    "value": 3,
+    "value": 2,
     "type": "FLOAT",
     "scopes": ["EFFECT_FLOAT"],
     "mode": "light tritanopia",
@@ -191,7 +191,7 @@
       "r": 0.12156862745098039,
       "g": 0.13725490196078433,
       "b": 0.1568627450980392,
-      "a": 0.06
+      "a": 0.03
     },
     "type": "COLOR",
     "scopes": ["EFFECT_COLOR"],

package/dist/figma/themes/light.json

@@ -91,7 +91,7 @@
       "r": 0.12156862745098039,
       "g": 0.13725490196078433,
       "b": 0.1568627450980392,
-      "a": 0.06
+      "a": 0.05
     },
     "type": "COLOR",
     "scopes": ["EFFECT_COLOR"],
@@ -141,7 +141,7 @@
       "r": 0.12156862745098039,
       "g": 0.13725490196078433,
       "b": 0.1568627450980392,
-      "a": 0.06
+      "a": 0.04
     },
     "type": "COLOR",
     "scopes": ["EFFECT_COLOR"],
@@ -169,7 +169,7 @@
   },
   {
     "name": "shadow/resting/small/2/blur",
-    "value": 3,
+    "value": 2,
     "type": "FLOAT",
     "scopes": ["EFFECT_FLOAT"],
     "mode": "light",
@@ -191,7 +191,7 @@
       "r": 0.12156862745098039,
       "g": 0.13725490196078433,
       "b": 0.1568627450980392,
-      "a": 0.06
+      "a": 0.03
     },
     "type": "COLOR",
     "scopes": ["EFFECT_COLOR"],

package/dist/internalCss/dark-colorblind-high-contrast.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);
@@ -358,8 +358,8 @@
   --button-danger-bgColor-hover: var(--base-color-orange-9);
   --button-danger-borderColor-hover: var(--base-color-orange-2);
   --button-danger-fgColor-rest: var(--base-color-orange-2);
-  --button-danger-shadow-selected: 0px 0px 0px 0px #000000;
-  --button-default-shadow-resting: 0px 0px 0px 0px #000000;
+  --button-danger-shadow-selected: 0 0 0 0 #00000000;
+  --button-default-shadow-resting: 0 0 0 0 #00000000;
   --button-inactive-bgColor: var(--base-color-neutral-4);
   --button-inactive-fgColor: var(--base-color-neutral-10);
   --button-invisible-bgColor-active: var(--base-color-neutral-3);
@@ -373,10 +373,10 @@
   --button-outline-fgColor-disabled: #74b9ff80;
   --button-outline-fgColor-hover: var(--base-color-blue-3);
   --button-outline-fgColor-rest: var(--base-color-blue-4);
-  --button-outline-shadow-selected: 0px 0px 0px 0px #000000;
+  --button-outline-shadow-selected: 0 0 0 0 #00000000;
   --button-primary-bgColor-disabled: var(--base-color-blue-6);
   --button-primary-borderColor-rest: var(--base-color-blue-2);
-  --button-primary-shadow-selected: 0px 0px 0px 0px #000000;
+  --button-primary-shadow-selected: 0 0 0 0 #00000000;
   --button-star-iconColor: var(--base-color-yellow-2);
   --buttonCounter-default-bgColor-rest: var(--base-color-neutral-6);
   --buttonCounter-outline-bgColor-hover: #194fb133;
@@ -1091,11 +1091,11 @@
   --reactionButton-selected-fgColor-rest: var(--fgColor-link);
   --selectMenu-borderColor: var(--borderColor-default);
   --selection-bgColor: #194fb1b3; /** Background color for text selection highlights */
-  --shadow-floating-legacy: 0px 6px 12px -3px #01040966, 0px 6px 18px 0px #01040966;
-  --shadow-inset: inset 0px 1px 0px 0px #0104093d;
-  --shadow-resting-medium: 0px 1px 1px 0px #01040966, 0px 3px 6px 0px #010409cc;
-  --shadow-resting-small: 0px 1px 1px 0px #01040999, 0px 1px 3px 0px #01040999;
-  --shadow-resting-xsmall: 0px 1px 1px 0px #010409cc;
+  --shadow-floating-legacy: 0 6px 12px -3px #01040966, 0 6px 18px 0 #01040966; /** Legacy floating shadow for backward compatibility */
+  --shadow-inset: inset 0 1px 0 0 #0104093d; /** Inset shadow for recessed elements */
+  --shadow-resting-medium: 0 1px 1px 0 #01040966, 0 3px 6px 0 #010409cc; /** Medium resting shadow for cards and elevated surfaces */
+  --shadow-resting-small: 0 1px 1px 0 #01040999, 0 1px 3px 0 #01040999; /** Small resting shadow for buttons and interactive elements */
+  --shadow-resting-xsmall: 0 1px 1px 0 #010409cc; /** Extra small resting shadow for minimal elevation */
   --topicTag-borderColor: var(--borderColor-accent-emphasis);
   --treeViewItem-leadingVisual-iconColor-rest: var(--fgColor-muted);
   --underlineNav-iconColor-rest: var(--fgColor-muted);
@@ -1170,10 +1170,10 @@
   --focus-outline: 2px solid #409eff; /** Focus ring outline for keyboard navigation and accessibility. */
   --page-header-bgColor: var(--bgColor-default);
   --progressBar-track-bgColor: var(--bgColor-inverse);
-  --shadow-floating-large: 0px 0px 0px 1px #b7bdc8, 0px 24px 48px 0px #010409; /** Large floating shadow for modals and dialogs */
-  --shadow-floating-medium: 0px 0px 0px 1px #b7bdc8, 0px 8px 16px -4px #01040966, 0px 4px 32px -4px #01040966, 0px 24px 48px -12px #01040966, 0px 48px 96px -24px #01040966;
-  --shadow-floating-small: 0px 0px 0px 1px #b7bdc8, 0px 6px 12px -3px #01040966, 0px 6px 18px 0px #01040966; /** Small floating shadow for dropdowns, tooltips, and small overlays */
-  --shadow-floating-xlarge: 0px 0px 0px 1px #b7bdc8, 0px 32px 64px 0px #010409;
+  --shadow-floating-large: 0 0 0 1px #b7bdc8, 0 24px 48px 0 #010409; /** Large floating shadow for modals and dialogs */
+  --shadow-floating-medium: 0 0 0 1px #b7bdc8, 0 8px 16px -4px #01040966, 0 4px 32px -4px #01040966, 0 24px 48px -12px #01040966, 0 48px 96px -24px #01040966; /** Medium floating shadow for popovers and action menus */
+  --shadow-floating-small: 0 0 0 1px #b7bdc8, 0 6px 12px -3px #01040966, 0 6px 18px 0 #01040966; /** Small floating shadow for dropdowns, tooltips, and small overlays */
+  --shadow-floating-xlarge: 0 0 0 1px #b7bdc8, 0 32px 64px 0 #010409; /** Extra large floating shadow for full-screen overlays and sheets */
   --tooltip-bgColor: var(--bgColor-inverse);
   --tooltip-fgColor: var(--fgColor-onInverse);
   --border-neutral-emphasis: 0.0625rem solid #b7bdc8;
@@ -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);
@@ -1554,8 +1554,8 @@
     --button-danger-bgColor-hover: var(--base-color-orange-9);
     --button-danger-borderColor-hover: var(--base-color-orange-2);
     --button-danger-fgColor-rest: var(--base-color-orange-2);
-    --button-danger-shadow-selected: 0px 0px 0px 0px #000000;
-    --button-default-shadow-resting: 0px 0px 0px 0px #000000;
+    --button-danger-shadow-selected: 0 0 0 0 #00000000;
+    --button-default-shadow-resting: 0 0 0 0 #00000000;
     --button-inactive-bgColor: var(--base-color-neutral-4);
     --button-inactive-fgColor: var(--base-color-neutral-10);
     --button-invisible-bgColor-active: var(--base-color-neutral-3);
@@ -1569,10 +1569,10 @@
     --button-outline-fgColor-disabled: #74b9ff80;
     --button-outline-fgColor-hover: var(--base-color-blue-3);
     --button-outline-fgColor-rest: var(--base-color-blue-4);
-    --button-outline-shadow-selected: 0px 0px 0px 0px #000000;
+    --button-outline-shadow-selected: 0 0 0 0 #00000000;
     --button-primary-bgColor-disabled: var(--base-color-blue-6);
     --button-primary-borderColor-rest: var(--base-color-blue-2);
-    --button-primary-shadow-selected: 0px 0px 0px 0px #000000;
+    --button-primary-shadow-selected: 0 0 0 0 #00000000;
     --button-star-iconColor: var(--base-color-yellow-2);
     --buttonCounter-default-bgColor-rest: var(--base-color-neutral-6);
     --buttonCounter-outline-bgColor-hover: #194fb133;
@@ -2287,11 +2287,11 @@
     --reactionButton-selected-fgColor-rest: var(--fgColor-link);
     --selectMenu-borderColor: var(--borderColor-default);
     --selection-bgColor: #194fb1b3; /** Background color for text selection highlights */
-    --shadow-floating-legacy: 0px 6px 12px -3px #01040966, 0px 6px 18px 0px #01040966;
-    --shadow-inset: inset 0px 1px 0px 0px #0104093d;
-    --shadow-resting-medium: 0px 1px 1px 0px #01040966, 0px 3px 6px 0px #010409cc;
-    --shadow-resting-small: 0px 1px 1px 0px #01040999, 0px 1px 3px 0px #01040999;
-    --shadow-resting-xsmall: 0px 1px 1px 0px #010409cc;
+    --shadow-floating-legacy: 0 6px 12px -3px #01040966, 0 6px 18px 0 #01040966; /** Legacy floating shadow for backward compatibility */
+    --shadow-inset: inset 0 1px 0 0 #0104093d; /** Inset shadow for recessed elements */
+    --shadow-resting-medium: 0 1px 1px 0 #01040966, 0 3px 6px 0 #010409cc; /** Medium resting shadow for cards and elevated surfaces */
+    --shadow-resting-small: 0 1px 1px 0 #01040999, 0 1px 3px 0 #01040999; /** Small resting shadow for buttons and interactive elements */
+    --shadow-resting-xsmall: 0 1px 1px 0 #010409cc; /** Extra small resting shadow for minimal elevation */
     --topicTag-borderColor: var(--borderColor-accent-emphasis);
     --treeViewItem-leadingVisual-iconColor-rest: var(--fgColor-muted);
     --underlineNav-iconColor-rest: var(--fgColor-muted);
@@ -2366,10 +2366,10 @@
     --focus-outline: 2px solid #409eff; /** Focus ring outline for keyboard navigation and accessibility. */
     --page-header-bgColor: var(--bgColor-default);
     --progressBar-track-bgColor: var(--bgColor-inverse);
-    --shadow-floating-large: 0px 0px 0px 1px #b7bdc8, 0px 24px 48px 0px #010409; /** Large floating shadow for modals and dialogs */
-    --shadow-floating-medium: 0px 0px 0px 1px #b7bdc8, 0px 8px 16px -4px #01040966, 0px 4px 32px -4px #01040966, 0px 24px 48px -12px #01040966, 0px 48px 96px -24px #01040966;
-    --shadow-floating-small: 0px 0px 0px 1px #b7bdc8, 0px 6px 12px -3px #01040966, 0px 6px 18px 0px #01040966; /** Small floating shadow for dropdowns, tooltips, and small overlays */
-    --shadow-floating-xlarge: 0px 0px 0px 1px #b7bdc8, 0px 32px 64px 0px #010409;
+    --shadow-floating-large: 0 0 0 1px #b7bdc8, 0 24px 48px 0 #010409; /** Large floating shadow for modals and dialogs */
+    --shadow-floating-medium: 0 0 0 1px #b7bdc8, 0 8px 16px -4px #01040966, 0 4px 32px -4px #01040966, 0 24px 48px -12px #01040966, 0 48px 96px -24px #01040966; /** Medium floating shadow for popovers and action menus */
+    --shadow-floating-small: 0 0 0 1px #b7bdc8, 0 6px 12px -3px #01040966, 0 6px 18px 0 #01040966; /** Small floating shadow for dropdowns, tooltips, and small overlays */
+    --shadow-floating-xlarge: 0 0 0 1px #b7bdc8, 0 32px 64px 0 #010409; /** Extra large floating shadow for full-screen overlays and sheets */
     --tooltip-bgColor: var(--bgColor-inverse);
     --tooltip-fgColor: var(--fgColor-onInverse);
     --border-neutral-emphasis: 0.0625rem solid #b7bdc8;

package/dist/internalCss/dark-colorblind.css

@@ -301,7 +301,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);
@@ -355,8 +355,8 @@
   --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-hover: var(--base-color-orange-6);
-  --button-danger-shadow-selected: 0px 0px 0px 0px #000000;
-  --button-default-shadow-resting: 0px 0px 0px 0px #000000;
+  --button-danger-shadow-selected: 0 0 0 0 #00000000;
+  --button-default-shadow-resting: 0 0 0 0 #00000000;
   --button-inactive-bgColor: var(--base-color-neutral-4);
   --button-inactive-fgColor: var(--base-color-neutral-9);
   --button-invisible-bgColor-disabled: var(--base-color-transparent);
@@ -366,9 +366,9 @@
   --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-outline-shadow-selected: 0 0 0 0 #00000000;
   --button-primary-bgColor-disabled: var(--base-color-blue-6);
-  --button-primary-shadow-selected: 0px 0px 0px 0px #000000;
+  --button-primary-shadow-selected: 0 0 0 0 #00000000;
   --button-star-iconColor: var(--base-color-yellow-2);
   --buttonCounter-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);
@@ -1497,7 +1497,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);
@@ -1551,8 +1551,8 @@
     --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-hover: var(--base-color-orange-6);
-    --button-danger-shadow-selected: 0px 0px 0px 0px #000000;
-    --button-default-shadow-resting: 0px 0px 0px 0px #000000;
+    --button-danger-shadow-selected: 0 0 0 0 #00000000;
+    --button-default-shadow-resting: 0 0 0 0 #00000000;
     --button-inactive-bgColor: var(--base-color-neutral-4);
     --button-inactive-fgColor: var(--base-color-neutral-9);
     --button-invisible-bgColor-disabled: var(--base-color-transparent);
@@ -1562,9 +1562,9 @@
     --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-outline-shadow-selected: 0 0 0 0 #00000000;
     --button-primary-bgColor-disabled: var(--base-color-blue-6);
-    --button-primary-shadow-selected: 0px 0px 0px 0px #000000;
+    --button-primary-shadow-selected: 0 0 0 0 #00000000;
     --button-star-iconColor: var(--base-color-yellow-2);
     --buttonCounter-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/dark-dimmed-high-contrast.css

@@ -306,7 +306,7 @@
   --outline-focus-offset: -0.125rem; /** Focus outline offset (-2px). Negative value creates an inset outline for keyboard focus indicators, ensuring the focus ring stays within the element bounds */
   --outline-focus-width: 0.125rem; /** Focus outline width (2px). Standard width for keyboard focus indicators to meet WCAG 2.4.7 accessibility requirements */
   --reactionButton-selected-bgColor-hover: #3a8cfd5c;
-  --avatar-shadow: 0px 0px 0px 2px #0d1117;
+  --avatar-shadow: 0 0 0 2px #0d1117;
   --avatarStack-fade-bgColor-default: var(--base-color-neutral-7);
   --avatarStack-fade-bgColor-muted: var(--base-color-neutral-5);
   --base-color-inset: var(--base-color-black);
@@ -359,8 +359,8 @@
   --button-danger-bgColor-hover: var(--base-color-red-7);
   --button-danger-borderColor-hover: var(--base-color-red-1);
   --button-danger-fgColor-rest: var(--base-color-red-1);
-  --button-danger-shadow-selected: 0px 0px 0px 0px #000000;
-  --button-default-shadow-resting: 0px 0px 0px 0px #000000;
+  --button-danger-shadow-selected: 0 0 0 0 #00000000;
+  --button-default-shadow-resting: 0 0 0 0 #00000000;
   --button-inactive-bgColor: var(--base-color-neutral-4);
   --button-inactive-fgColor: var(--base-color-neutral-9);
   --button-invisible-bgColor-disabled: var(--base-color-transparent);
@@ -371,11 +371,11 @@
   --button-outline-bgColor-rest: var(--base-color-neutral-12);
   --button-outline-fgColor-hover: var(--base-color-blue-3);
   --button-outline-fgColor-rest: var(--base-color-blue-4);
-  --button-outline-shadow-selected: 0px 0px 0px 0px #000000;
+  --button-outline-shadow-selected: 0 0 0 0 #00000000;
   --button-primary-bgColor-active: var(--base-color-green-5);
   --button-primary-bgColor-hover: var(--base-color-green-6);
   --button-primary-borderColor-rest: var(--base-color-green-2);
-  --button-primary-shadow-selected: 0px 0px 0px 0px #000000;
+  --button-primary-shadow-selected: 0 0 0 0 #00000000;
   --button-star-iconColor: var(--base-color-yellow-2);
   --buttonCounter-danger-bgColor-rest: #5d0f1233;
   --buttonCounter-default-bgColor-rest: var(--base-color-neutral-6);
@@ -1122,11 +1122,11 @@
   --progressBar-bgColor-success: var(--bgColor-success-emphasis);
   --selectMenu-borderColor: var(--borderColor-default);
   --selection-bgColor: #1b4b91b3; /** Background color for text selection highlights */
-  --shadow-floating-legacy: 0px 6px 12px -3px #01040966, 0px 6px 18px 0px #01040966;
-  --shadow-inset: inset 0px 1px 0px 0px #0104093d;
-  --shadow-resting-medium: 0px 1px 1px 0px #01040966, 0px 3px 6px 0px #010409cc;
-  --shadow-resting-small: 0px 1px 1px 0px #01040999, 0px 1px 3px 0px #01040999;
-  --shadow-resting-xsmall: 0px 1px 1px 0px #010409cc;
+  --shadow-floating-legacy: 0 6px 12px -3px #01040966, 0 6px 18px 0 #01040966; /** Legacy floating shadow for backward compatibility */
+  --shadow-inset: inset 0 1px 0 0 #0104093d; /** Inset shadow for recessed elements */
+  --shadow-resting-medium: 0 1px 1px 0 #01040966, 0 3px 6px 0 #010409cc; /** Medium resting shadow for cards and elevated surfaces */
+  --shadow-resting-small: 0 1px 1px 0 #01040999, 0 1px 3px 0 #01040999; /** Small resting shadow for buttons and interactive elements */
+  --shadow-resting-xsmall: 0 1px 1px 0 #010409cc; /** Extra small resting shadow for minimal elevation */
   --topicTag-borderColor: var(--borderColor-accent-emphasis);
   --treeViewItem-leadingVisual-iconColor-rest: var(--fgColor-muted);
   --underlineNav-iconColor-rest: var(--fgColor-muted);
@@ -1173,10 +1173,10 @@
   --focus-outline: 2px solid #6cb6ff; /** Focus ring outline for keyboard navigation and accessibility. */
   --progressBar-track-bgColor: var(--bgColor-inverse);
   --reactionButton-selected-fgColor-rest: var(--fgColor-link);
-  --shadow-floating-large: 0px 0px 0px 1px #b7bdc8, 0px 24px 48px 0px #010409; /** Large floating shadow for modals and dialogs */
-  --shadow-floating-medium: 0px 0px 0px 1px #b7bdc8, 0px 8px 16px -4px #01040966, 0px 4px 32px -4px #01040966, 0px 24px 48px -12px #01040966, 0px 48px 96px -24px #01040966;
-  --shadow-floating-small: 0px 0px 0px 1px #b7bdc8, 0px 6px 12px -3px #01040966, 0px 6px 18px 0px #01040966; /** Small floating shadow for dropdowns, tooltips, and small overlays */
-  --shadow-floating-xlarge: 0px 0px 0px 1px #b7bdc8, 0px 32px 64px 0px #010409;
+  --shadow-floating-large: 0 0 0 1px #b7bdc8, 0 24px 48px 0 #010409; /** Large floating shadow for modals and dialogs */
+  --shadow-floating-medium: 0 0 0 1px #b7bdc8, 0 8px 16px -4px #01040966, 0 4px 32px -4px #01040966, 0 24px 48px -12px #01040966, 0 48px 96px -24px #01040966; /** Medium floating shadow for popovers and action menus */
+  --shadow-floating-small: 0 0 0 1px #b7bdc8, 0 6px 12px -3px #01040966, 0 6px 18px 0 #01040966; /** Small floating shadow for dropdowns, tooltips, and small overlays */
+  --shadow-floating-xlarge: 0 0 0 1px #b7bdc8, 0 32px 64px 0 #010409; /** Extra large floating shadow for full-screen overlays and sheets */
   --tooltip-bgColor: var(--bgColor-inverse);
   --tooltip-fgColor: var(--fgColor-onInverse);
   --border-neutral-emphasis: 0.0625rem solid #b7bdc8;
@@ -1502,7 +1502,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);
@@ -1555,8 +1555,8 @@
     --button-danger-bgColor-hover: var(--base-color-red-7);
     --button-danger-borderColor-hover: var(--base-color-red-1);
     --button-danger-fgColor-rest: var(--base-color-red-1);
-    --button-danger-shadow-selected: 0px 0px 0px 0px #000000;
-    --button-default-shadow-resting: 0px 0px 0px 0px #000000;
+    --button-danger-shadow-selected: 0 0 0 0 #00000000;
+    --button-default-shadow-resting: 0 0 0 0 #00000000;
     --button-inactive-bgColor: var(--base-color-neutral-4);
     --button-inactive-fgColor: var(--base-color-neutral-9);
     --button-invisible-bgColor-disabled: var(--base-color-transparent);
@@ -1567,11 +1567,11 @@
     --button-outline-bgColor-rest: var(--base-color-neutral-12);
     --button-outline-fgColor-hover: var(--base-color-blue-3);
     --button-outline-fgColor-rest: var(--base-color-blue-4);
-    --button-outline-shadow-selected: 0px 0px 0px 0px #000000;
+    --button-outline-shadow-selected: 0 0 0 0 #00000000;
     --button-primary-bgColor-active: var(--base-color-green-5);
     --button-primary-bgColor-hover: var(--base-color-green-6);
     --button-primary-borderColor-rest: var(--base-color-green-2);
-    --button-primary-shadow-selected: 0px 0px 0px 0px #000000;
+    --button-primary-shadow-selected: 0 0 0 0 #00000000;
     --button-star-iconColor: var(--base-color-yellow-2);
     --buttonCounter-danger-bgColor-rest: #5d0f1233;
     --buttonCounter-default-bgColor-rest: var(--base-color-neutral-6);
@@ -2318,11 +2318,11 @@
     --progressBar-bgColor-success: var(--bgColor-success-emphasis);
     --selectMenu-borderColor: var(--borderColor-default);
     --selection-bgColor: #1b4b91b3; /** Background color for text selection highlights */
-    --shadow-floating-legacy: 0px 6px 12px -3px #01040966, 0px 6px 18px 0px #01040966;
-    --shadow-inset: inset 0px 1px 0px 0px #0104093d;
-    --shadow-resting-medium: 0px 1px 1px 0px #01040966, 0px 3px 6px 0px #010409cc;
-    --shadow-resting-small: 0px 1px 1px 0px #01040999, 0px 1px 3px 0px #01040999;
-    --shadow-resting-xsmall: 0px 1px 1px 0px #010409cc;
+    --shadow-floating-legacy: 0 6px 12px -3px #01040966, 0 6px 18px 0 #01040966; /** Legacy floating shadow for backward compatibility */
+    --shadow-inset: inset 0 1px 0 0 #0104093d; /** Inset shadow for recessed elements */
+    --shadow-resting-medium: 0 1px 1px 0 #01040966, 0 3px 6px 0 #010409cc; /** Medium resting shadow for cards and elevated surfaces */
+    --shadow-resting-small: 0 1px 1px 0 #01040999, 0 1px 3px 0 #01040999; /** Small resting shadow for buttons and interactive elements */
+    --shadow-resting-xsmall: 0 1px 1px 0 #010409cc; /** Extra small resting shadow for minimal elevation */
     --topicTag-borderColor: var(--borderColor-accent-emphasis);
     --treeViewItem-leadingVisual-iconColor-rest: var(--fgColor-muted);
     --underlineNav-iconColor-rest: var(--fgColor-muted);
@@ -2369,10 +2369,10 @@
     --focus-outline: 2px solid #6cb6ff; /** Focus ring outline for keyboard navigation and accessibility. */
     --progressBar-track-bgColor: var(--bgColor-inverse);
     --reactionButton-selected-fgColor-rest: var(--fgColor-link);
-    --shadow-floating-large: 0px 0px 0px 1px #b7bdc8, 0px 24px 48px 0px #010409; /** Large floating shadow for modals and dialogs */
-    --shadow-floating-medium: 0px 0px 0px 1px #b7bdc8, 0px 8px 16px -4px #01040966, 0px 4px 32px -4px #01040966, 0px 24px 48px -12px #01040966, 0px 48px 96px -24px #01040966;
-    --shadow-floating-small: 0px 0px 0px 1px #b7bdc8, 0px 6px 12px -3px #01040966, 0px 6px 18px 0px #01040966; /** Small floating shadow for dropdowns, tooltips, and small overlays */
-    --shadow-floating-xlarge: 0px 0px 0px 1px #b7bdc8, 0px 32px 64px 0px #010409;
+    --shadow-floating-large: 0 0 0 1px #b7bdc8, 0 24px 48px 0 #010409; /** Large floating shadow for modals and dialogs */
+    --shadow-floating-medium: 0 0 0 1px #b7bdc8, 0 8px 16px -4px #01040966, 0 4px 32px -4px #01040966, 0 24px 48px -12px #01040966, 0 48px 96px -24px #01040966; /** Medium floating shadow for popovers and action menus */
+    --shadow-floating-small: 0 0 0 1px #b7bdc8, 0 6px 12px -3px #01040966, 0 6px 18px 0 #01040966; /** Small floating shadow for dropdowns, tooltips, and small overlays */
+    --shadow-floating-xlarge: 0 0 0 1px #b7bdc8, 0 32px 64px 0 #010409; /** Extra large floating shadow for full-screen overlays and sheets */
     --tooltip-bgColor: var(--bgColor-inverse);
     --tooltip-fgColor: var(--fgColor-onInverse);
     --border-neutral-emphasis: 0.0625rem solid #b7bdc8;