@primer/primitives 11.4.0 → 11.4.1-rc.0499d5a6

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (165) hide show
  1. package/DESIGN_TOKENS_GUIDE.md +185 -0
  2. package/DESIGN_TOKENS_SPEC.md +565 -0
  3. package/dist/build/formats/jsonFigma.js +8 -1
  4. package/dist/build/formats/markdownLlmGuidelines.d.ts +7 -6
  5. package/dist/build/formats/markdownLlmGuidelines.js +1034 -60
  6. package/dist/build/schemas/borderToken.d.ts +61 -5
  7. package/dist/build/schemas/borderToken.js +2 -1
  8. package/dist/build/schemas/colorToken.d.ts +639 -30
  9. package/dist/build/schemas/colorToken.js +3 -2
  10. package/dist/build/schemas/colorW3cValue.d.ts +28 -0
  11. package/dist/build/schemas/colorW3cValue.js +42 -0
  12. package/dist/build/schemas/cubicBezierToken.d.ts +1 -1
  13. package/dist/build/schemas/dimensionToken.d.ts +9 -2
  14. package/dist/build/schemas/dimensionValue.d.ts +12 -1
  15. package/dist/build/schemas/dimensionValue.js +10 -13
  16. package/dist/build/schemas/durationToken.d.ts +8 -2
  17. package/dist/build/schemas/durationValue.d.ts +11 -1
  18. package/dist/build/schemas/durationValue.js +13 -3
  19. package/dist/build/schemas/fontFamilyToken.d.ts +1 -1
  20. package/dist/build/schemas/fontWeightToken.d.ts +1 -1
  21. package/dist/build/schemas/gradientToken.d.ts +23 -2
  22. package/dist/build/schemas/gradientToken.js +2 -1
  23. package/dist/build/schemas/numberToken.d.ts +1 -1
  24. package/dist/build/schemas/shadowToken.d.ts +1751 -127
  25. package/dist/build/schemas/shadowToken.js +8 -2
  26. package/dist/build/schemas/stringToken.d.ts +1 -1
  27. package/dist/build/schemas/stringToken.js +1 -1
  28. package/dist/build/schemas/tokenType.d.ts +1 -1
  29. package/dist/build/schemas/transitionToken.d.ts +15 -3
  30. package/dist/build/schemas/typographyToken.d.ts +19 -5
  31. package/dist/build/schemas/typographyToken.js +1 -1
  32. package/dist/build/schemas/validTokenType.d.ts +1 -1
  33. package/dist/build/schemas/validTokenType.js +1 -1
  34. package/dist/build/schemas/viewportRangeToken.d.ts +1 -1
  35. package/dist/build/transformers/borderToCss.js +19 -1
  36. package/dist/build/transformers/colorAlphaToCss.js +6 -3
  37. package/dist/build/transformers/colorToHex.js +5 -2
  38. package/dist/build/transformers/colorToRgbAlpha.js +5 -2
  39. package/dist/build/transformers/colorToRgbaFloat.js +5 -0
  40. package/dist/build/transformers/dimensionToPixelUnitless.d.ts +3 -2
  41. package/dist/build/transformers/dimensionToPixelUnitless.js +22 -26
  42. package/dist/build/transformers/dimensionToRem.d.ts +2 -1
  43. package/dist/build/transformers/dimensionToRem.js +21 -22
  44. package/dist/build/transformers/dimensionToRemPxArray.d.ts +2 -1
  45. package/dist/build/transformers/dimensionToRemPxArray.js +21 -22
  46. package/dist/build/transformers/durationToCss.d.ts +2 -1
  47. package/dist/build/transformers/durationToCss.js +18 -11
  48. package/dist/build/transformers/gradientToCss.js +2 -1
  49. package/dist/build/transformers/shadowToCss.js +15 -1
  50. package/dist/build/transformers/utilities/normalizeColorValue.d.ts +23 -0
  51. package/dist/build/transformers/utilities/normalizeColorValue.js +74 -0
  52. package/dist/build/transformers/utilities/parseDimension.d.ts +12 -0
  53. package/dist/build/transformers/utilities/parseDimension.js +31 -0
  54. package/dist/build/types/borderTokenValue.d.ts +5 -2
  55. package/dist/build/types/dimensionTokenValue.d.ts +9 -0
  56. package/dist/build/types/shadowTokenValue.d.ts +8 -5
  57. package/dist/css/functional/themes/dark-colorblind-high-contrast.css +32 -28
  58. package/dist/css/functional/themes/dark-colorblind.css +32 -28
  59. package/dist/css/functional/themes/dark-dimmed-high-contrast.css +32 -28
  60. package/dist/css/functional/themes/dark-dimmed.css +32 -28
  61. package/dist/css/functional/themes/dark-high-contrast.css +32 -28
  62. package/dist/css/functional/themes/dark-tritanopia-high-contrast.css +32 -28
  63. package/dist/css/functional/themes/dark-tritanopia.css +32 -28
  64. package/dist/css/functional/themes/dark.css +32 -28
  65. package/dist/css/functional/themes/light-colorblind-high-contrast.css +32 -28
  66. package/dist/css/functional/themes/light-colorblind.css +32 -28
  67. package/dist/css/functional/themes/light-high-contrast.css +32 -28
  68. package/dist/css/functional/themes/light-tritanopia-high-contrast.css +32 -28
  69. package/dist/css/functional/themes/light-tritanopia.css +32 -28
  70. package/dist/css/functional/themes/light.css +32 -28
  71. package/dist/css/primitives.css +4 -0
  72. package/dist/docs/base/motion/motion.json +96 -24
  73. package/dist/docs/base/size/size.json +76 -19
  74. package/dist/docs/base/typography/typography.json +24 -6
  75. package/dist/docs/functional/size/border.json +26 -11
  76. package/dist/docs/functional/size/breakpoints.json +24 -6
  77. package/dist/docs/functional/size/radius.json +16 -4
  78. package/dist/docs/functional/size/size.json +60 -15
  79. package/dist/docs/functional/themes/dark-colorblind-high-contrast.json +2629 -346
  80. package/dist/docs/functional/themes/dark-colorblind.json +2629 -346
  81. package/dist/docs/functional/themes/dark-dimmed-high-contrast.json +2629 -346
  82. package/dist/docs/functional/themes/dark-dimmed.json +2629 -346
  83. package/dist/docs/functional/themes/dark-high-contrast.json +2629 -346
  84. package/dist/docs/functional/themes/dark-tritanopia-high-contrast.json +2629 -346
  85. package/dist/docs/functional/themes/dark-tritanopia.json +2629 -346
  86. package/dist/docs/functional/themes/dark.json +2629 -346
  87. package/dist/docs/functional/themes/light-colorblind-high-contrast.json +2635 -352
  88. package/dist/docs/functional/themes/light-colorblind.json +2632 -349
  89. package/dist/docs/functional/themes/light-high-contrast.json +2635 -352
  90. package/dist/docs/functional/themes/light-tritanopia-high-contrast.json +2635 -352
  91. package/dist/docs/functional/themes/light-tritanopia.json +2632 -349
  92. package/dist/docs/functional/themes/light.json +2632 -349
  93. package/dist/docs/functional/typography/typography.json +8 -2
  94. package/dist/fallbacks/base/motion/motion.json +48 -12
  95. package/dist/figma/themes/light-colorblind.json +4 -4
  96. package/dist/figma/themes/light-high-contrast.json +4 -4
  97. package/dist/figma/themes/light-tritanopia.json +4 -4
  98. package/dist/figma/themes/light.json +4 -4
  99. package/dist/internalCss/dark-colorblind-high-contrast.css +28 -28
  100. package/dist/internalCss/dark-colorblind.css +28 -28
  101. package/dist/internalCss/dark-dimmed-high-contrast.css +28 -28
  102. package/dist/internalCss/dark-dimmed.css +28 -28
  103. package/dist/internalCss/dark-high-contrast.css +28 -28
  104. package/dist/internalCss/dark-tritanopia-high-contrast.css +28 -28
  105. package/dist/internalCss/dark-tritanopia.css +28 -28
  106. package/dist/internalCss/dark.css +28 -28
  107. package/dist/internalCss/light-colorblind-high-contrast.css +28 -28
  108. package/dist/internalCss/light-colorblind.css +28 -28
  109. package/dist/internalCss/light-high-contrast.css +28 -28
  110. package/dist/internalCss/light-tritanopia-high-contrast.css +28 -28
  111. package/dist/internalCss/light-tritanopia.css +28 -28
  112. package/dist/internalCss/light.css +28 -28
  113. package/dist/styleLint/base/motion/motion.json +96 -24
  114. package/dist/styleLint/base/size/size.json +76 -19
  115. package/dist/styleLint/base/typography/typography.json +30 -12
  116. package/dist/styleLint/functional/size/border.json +27 -12
  117. package/dist/styleLint/functional/size/breakpoints.json +24 -6
  118. package/dist/styleLint/functional/size/radius.json +17 -5
  119. package/dist/styleLint/functional/size/size-coarse.json +3 -3
  120. package/dist/styleLint/functional/size/size-fine.json +3 -3
  121. package/dist/styleLint/functional/size/size.json +111 -66
  122. package/dist/styleLint/functional/themes/dark-colorblind-high-contrast.json +2757 -366
  123. package/dist/styleLint/functional/themes/dark-colorblind.json +2757 -366
  124. package/dist/styleLint/functional/themes/dark-dimmed-high-contrast.json +2757 -366
  125. package/dist/styleLint/functional/themes/dark-dimmed.json +2757 -366
  126. package/dist/styleLint/functional/themes/dark-high-contrast.json +2757 -366
  127. package/dist/styleLint/functional/themes/dark-tritanopia-high-contrast.json +2757 -366
  128. package/dist/styleLint/functional/themes/dark-tritanopia.json +2757 -366
  129. package/dist/styleLint/functional/themes/dark.json +2757 -366
  130. package/dist/styleLint/functional/themes/light-colorblind-high-contrast.json +2763 -372
  131. package/dist/styleLint/functional/themes/light-colorblind.json +2760 -369
  132. package/dist/styleLint/functional/themes/light-high-contrast.json +2763 -372
  133. package/dist/styleLint/functional/themes/light-tritanopia-high-contrast.json +2763 -372
  134. package/dist/styleLint/functional/themes/light-tritanopia.json +2760 -369
  135. package/dist/styleLint/functional/themes/light.json +2760 -369
  136. package/dist/styleLint/functional/typography/typography.json +28 -22
  137. package/package.json +9 -7
  138. package/src/tokens/base/motion/timing.json5 +12 -12
  139. package/src/tokens/base/size/size.json5 +194 -194
  140. package/src/tokens/base/typography/typography.json5 +6 -6
  141. package/src/tokens/component/avatar.json5 +72 -44
  142. package/src/tokens/component/button.json5 +1545 -1193
  143. package/src/tokens/functional/border/border.json5 +4 -1
  144. package/src/tokens/functional/color/bgColor.json5 +8 -0
  145. package/src/tokens/functional/color/display.json5 +7 -0
  146. package/src/tokens/functional/color/fgColor.json5 +8 -0
  147. package/src/tokens/functional/color/syntax.json5 +14 -0
  148. package/src/tokens/functional/shadow/shadow.json5 +1254 -163
  149. package/src/tokens/functional/size/border.json5 +8 -8
  150. package/src/tokens/functional/size/breakpoints.json5 +6 -6
  151. package/src/tokens/functional/size/radius.json5 +4 -4
  152. package/src/tokens/functional/size/size.json5 +15 -15
  153. package/src/tokens/functional/typography/typography.json5 +8 -4
  154. package/dist/build/parsers/index.d.ts +0 -1
  155. package/dist/build/parsers/index.js +0 -1
  156. package/dist/build/parsers/w3cJsonParser.d.ts +0 -6
  157. package/dist/build/parsers/w3cJsonParser.js +0 -25
  158. package/dist/removed/testing.json5 +0 -4
  159. package/guidelines/color.llm.md +0 -16
  160. package/guidelines/guidelines.llm.md +0 -34
  161. package/guidelines/motion.llm.md +0 -41
  162. package/guidelines/spacing.llm.md +0 -20
  163. package/guidelines/typography.llm.md +0 -14
  164. package/src/tokens/removed/testing.json5 +0 -4
  165. package/token-guidelines.llm.md +0 -695
package/dist/internalCss/light-tritanopia-high-contrast.css CHANGED
@@ -359,7 +359,7 @@
359
359
  --boxShadow-thin: inset 0 0 0 var(--borderWidth-thin); /** Thin shadow used instead of a border to prevent layout shift */
360
360
  --button-danger-bgColor-active: var(--base-color-red-6);
361
361
  --button-danger-borderColor-hover: var(--base-color-red-7);
362
- --button-danger-shadow-selected: inset 0px 1px 0px 0px #43001133;
362
+ --button-danger-shadow-selected: inset 0 1px 0 0 #43001133;
363
363
  --button-inactive-bgColor: var(--base-color-neutral-3);
364
364
  --button-inactive-fgColor: var(--base-color-neutral-10);
365
365
  --button-invisible-bgColor-disabled: var(--base-color-transparent);
@@ -367,10 +367,10 @@
367
367
  --button-invisible-fgColor-hover: var(--base-color-neutral-11);
368
368
  --button-invisible-iconColor-hover: var(--base-color-neutral-11);
369
369
  --button-outline-borderColor-hover: var(--base-color-blue-7);
370
- --button-outline-shadow-selected: inset 0px 1px 0px 0px #021a4a33;
370
+ --button-outline-shadow-selected: inset 0 1px 0 0 #021a4a33;
371
371
  --button-primary-borderColor-disabled: var(--button-primary-bgColor-disabled);
372
372
  --button-primary-borderColor-rest: var(--base-color-blue-7);
373
- --button-primary-shadow-selected: inset 0px 1px 0px 0px #00230b4d;
373
+ --button-primary-shadow-selected: inset 0 1px 0 0 #00230b4d;
374
374
  --button-star-iconColor: var(--base-color-yellow-2);
375
375
  --buttonCounter-default-bgColor-rest: var(--base-color-neutral-7);
376
376
  --buttonCounter-outline-fgColor-rest: var(--base-color-blue-6);
@@ -918,13 +918,13 @@
918
918
  --reactionButton-selected-fgColor-hover: var(--base-color-blue-6);
919
919
  --selectMenu-bgColor-active: var(--base-color-blue-1);
920
920
  --selectMenu-borderColor: var(--base-color-transparent);
921
- --shadow-floating-legacy: 0px 6px 12px -3px #25292e0a, 0px 6px 18px 0px #25292e1f;
922
- --shadow-resting-medium: 0px 1px 1px 0px #25292e1a, 0px 3px 6px 0px #25292e1f;
921
+ --shadow-floating-legacy: 0 6px 12px -3px #25292e0a, 0 6px 18px 0 #25292e1f; /** Legacy floating shadow for backward compatibility */
922
+ --shadow-resting-medium: 0 1px 1px 0 #25292e1a, 0 3px 6px 0 #25292e1f; /** Medium resting shadow for cards and elevated surfaces */
923
923
  --skeletonLoader-bgColor: var(--base-color-neutral-5);
924
924
  --treeViewItem-leadingVisual-iconColor-rest: var(--base-color-blue-3);
925
925
  --underlineNav-borderColor-active: var(--base-color-coral-3);
926
926
  --avatar-bgColor: var(--base-color-neutral-0);
927
- --avatar-shadow: 0px 0px 0px 2px #ffffffcc;
927
+ --avatar-shadow: 0 0 0 2px #ffffffcc;
928
928
  --base-color-inset: var(--base-color-neutral-0);
929
929
  --bgColor-black: var(--base-color-neutral-13); /** Pure black background */
930
930
  --bgColor-closed-emphasis: var(--bgColor-neutral-emphasis); /** Strong background for closed state badges and labels */
@@ -973,7 +973,7 @@
973
973
  --button-default-bgColor-rest: var(--control-bgColor-rest);
974
974
  --button-default-bgColor-selected: var(--control-bgColor-active);
975
975
  --button-default-fgColor-rest: var(--control-fgColor-rest);
976
- --button-default-shadow-resting: 0px 1px 0px 0px #0104090a;
976
+ --button-default-shadow-resting: 0 1px 0 0 #0104090a;
977
977
  --button-invisible-bgColor-active: var(--control-transparent-bgColor-active);
978
978
  --button-invisible-bgColor-hover: var(--control-transparent-bgColor-hover);
979
979
  --button-invisible-bgColor-rest: var(--control-transparent-bgColor-rest);
@@ -1102,9 +1102,9 @@
1102
1102
  --progressBar-bgColor-sponsors: var(--bgColor-sponsors-emphasis);
1103
1103
  --progressBar-bgColor-success: var(--bgColor-success-emphasis);
1104
1104
  --selection-bgColor: #0349b433; /** Background color for text selection highlights */
1105
- --shadow-inset: inset 0px 1px 0px 0px #0104090a;
1106
- --shadow-resting-small: 0px 1px 1px 0px #0104090f, 0px 1px 3px 0px #0104090f;
1107
- --shadow-resting-xsmall: 0px 1px 1px 0px #0104090f;
1105
+ --shadow-inset: inset 0 1px 0 0 #0104090a; /** Inset shadow for recessed elements */
1106
+ --shadow-resting-small: 0 1px 1px 0 #0104090a, 0 1px 2px 0 #01040908; /** Small resting shadow for buttons and interactive elements */
1107
+ --shadow-resting-xsmall: 0 1px 1px 0 #0104090d; /** Extra small resting shadow for minimal elevation */
1108
1108
  --sideNav-bgColor-selected: var(--base-color-neutral-0);
1109
1109
  --timelineBadge-bgColor: var(--bgColor-muted);
1110
1110
  --tooltip-bgColor: var(--bgColor-emphasis);
@@ -1181,10 +1181,10 @@
1181
1181
  --focus-outline: 2px solid #0349b4; /** Focus ring outline for keyboard navigation and accessibility. */
1182
1182
  --progressBar-track-bgColor: var(--bgColor-default);
1183
1183
  --reactionButton-selected-fgColor-rest: var(--fgColor-link);
1184
- --shadow-floating-large: 0px 0px 0px 1px #454c54, 0px 40px 80px 0px #25292e3d; /** Large floating shadow for modals and dialogs */
1185
- --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;
1186
- --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 */
1187
- --shadow-floating-xlarge: 0px 0px 0px 1px #454c54, 0px 56px 112px 0px #25292e52;
1184
+ --shadow-floating-large: 0 0 0 1px #454c54, 0 40px 80px 0 #25292e3d; /** Large floating shadow for modals and dialogs */
1185
+ --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 */
1186
+ --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 */
1187
+ --shadow-floating-xlarge: 0 0 0 1px #454c54, 0 56px 112px 0 #25292e52; /** Extra large floating shadow for full-screen overlays and sheets */
1188
1188
  --tooltip-fgColor: var(--fgColor-onEmphasis);
1189
1189
  --underlineNav-borderColor-hover: var(--borderColor-muted);
1190
1190
  --border-neutral-muted: 0.0625rem solid #454c54;
@@ -1555,7 +1555,7 @@
1555
1555
  --boxShadow-thin: inset 0 0 0 var(--borderWidth-thin); /** Thin shadow used instead of a border to prevent layout shift */
1556
1556
  --button-danger-bgColor-active: var(--base-color-red-6);
1557
1557
  --button-danger-borderColor-hover: var(--base-color-red-7);
1558
- --button-danger-shadow-selected: inset 0px 1px 0px 0px #43001133;
1558
+ --button-danger-shadow-selected: inset 0 1px 0 0 #43001133;
1559
1559
  --button-inactive-bgColor: var(--base-color-neutral-3);
1560
1560
  --button-inactive-fgColor: var(--base-color-neutral-10);
1561
1561
  --button-invisible-bgColor-disabled: var(--base-color-transparent);
@@ -1563,10 +1563,10 @@
1563
1563
  --button-invisible-fgColor-hover: var(--base-color-neutral-11);
1564
1564
  --button-invisible-iconColor-hover: var(--base-color-neutral-11);
1565
1565
  --button-outline-borderColor-hover: var(--base-color-blue-7);
1566
- --button-outline-shadow-selected: inset 0px 1px 0px 0px #021a4a33;
1566
+ --button-outline-shadow-selected: inset 0 1px 0 0 #021a4a33;
1567
1567
  --button-primary-borderColor-disabled: var(--button-primary-bgColor-disabled);
1568
1568
  --button-primary-borderColor-rest: var(--base-color-blue-7);
1569
- --button-primary-shadow-selected: inset 0px 1px 0px 0px #00230b4d;
1569
+ --button-primary-shadow-selected: inset 0 1px 0 0 #00230b4d;
1570
1570
  --button-star-iconColor: var(--base-color-yellow-2);
1571
1571
  --buttonCounter-default-bgColor-rest: var(--base-color-neutral-7);
1572
1572
  --buttonCounter-outline-fgColor-rest: var(--base-color-blue-6);
@@ -2114,13 +2114,13 @@
2114
2114
  --reactionButton-selected-fgColor-hover: var(--base-color-blue-6);
2115
2115
  --selectMenu-bgColor-active: var(--base-color-blue-1);
2116
2116
  --selectMenu-borderColor: var(--base-color-transparent);
2117
- --shadow-floating-legacy: 0px 6px 12px -3px #25292e0a, 0px 6px 18px 0px #25292e1f;
2118
- --shadow-resting-medium: 0px 1px 1px 0px #25292e1a, 0px 3px 6px 0px #25292e1f;
2117
+ --shadow-floating-legacy: 0 6px 12px -3px #25292e0a, 0 6px 18px 0 #25292e1f; /** Legacy floating shadow for backward compatibility */
2118
+ --shadow-resting-medium: 0 1px 1px 0 #25292e1a, 0 3px 6px 0 #25292e1f; /** Medium resting shadow for cards and elevated surfaces */
2119
2119
  --skeletonLoader-bgColor: var(--base-color-neutral-5);
2120
2120
  --treeViewItem-leadingVisual-iconColor-rest: var(--base-color-blue-3);
2121
2121
  --underlineNav-borderColor-active: var(--base-color-coral-3);
2122
2122
  --avatar-bgColor: var(--base-color-neutral-0);
2123
- --avatar-shadow: 0px 0px 0px 2px #ffffffcc;
2123
+ --avatar-shadow: 0 0 0 2px #ffffffcc;
2124
2124
  --base-color-inset: var(--base-color-neutral-0);
2125
2125
  --bgColor-black: var(--base-color-neutral-13); /** Pure black background */
2126
2126
  --bgColor-closed-emphasis: var(--bgColor-neutral-emphasis); /** Strong background for closed state badges and labels */
@@ -2169,7 +2169,7 @@
2169
2169
  --button-default-bgColor-rest: var(--control-bgColor-rest);
2170
2170
  --button-default-bgColor-selected: var(--control-bgColor-active);
2171
2171
  --button-default-fgColor-rest: var(--control-fgColor-rest);
2172
- --button-default-shadow-resting: 0px 1px 0px 0px #0104090a;
2172
+ --button-default-shadow-resting: 0 1px 0 0 #0104090a;
2173
2173
  --button-invisible-bgColor-active: var(--control-transparent-bgColor-active);
2174
2174
  --button-invisible-bgColor-hover: var(--control-transparent-bgColor-hover);
2175
2175
  --button-invisible-bgColor-rest: var(--control-transparent-bgColor-rest);
@@ -2298,9 +2298,9 @@
2298
2298
  --progressBar-bgColor-sponsors: var(--bgColor-sponsors-emphasis);
2299
2299
  --progressBar-bgColor-success: var(--bgColor-success-emphasis);
2300
2300
  --selection-bgColor: #0349b433; /** Background color for text selection highlights */
2301
- --shadow-inset: inset 0px 1px 0px 0px #0104090a;
2302
- --shadow-resting-small: 0px 1px 1px 0px #0104090f, 0px 1px 3px 0px #0104090f;
2303
- --shadow-resting-xsmall: 0px 1px 1px 0px #0104090f;
2301
+ --shadow-inset: inset 0 1px 0 0 #0104090a; /** Inset shadow for recessed elements */
2302
+ --shadow-resting-small: 0 1px 1px 0 #0104090a, 0 1px 2px 0 #01040908; /** Small resting shadow for buttons and interactive elements */
2303
+ --shadow-resting-xsmall: 0 1px 1px 0 #0104090d; /** Extra small resting shadow for minimal elevation */
2304
2304
  --sideNav-bgColor-selected: var(--base-color-neutral-0);
2305
2305
  --timelineBadge-bgColor: var(--bgColor-muted);
2306
2306
  --tooltip-bgColor: var(--bgColor-emphasis);
@@ -2377,10 +2377,10 @@
2377
2377
  --focus-outline: 2px solid #0349b4; /** Focus ring outline for keyboard navigation and accessibility. */
2378
2378
  --progressBar-track-bgColor: var(--bgColor-default);
2379
2379
  --reactionButton-selected-fgColor-rest: var(--fgColor-link);
2380
- --shadow-floating-large: 0px 0px 0px 1px #454c54, 0px 40px 80px 0px #25292e3d; /** Large floating shadow for modals and dialogs */
2381
- --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;
2382
- --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 */
2383
- --shadow-floating-xlarge: 0px 0px 0px 1px #454c54, 0px 56px 112px 0px #25292e52;
2380
+ --shadow-floating-large: 0 0 0 1px #454c54, 0 40px 80px 0 #25292e3d; /** Large floating shadow for modals and dialogs */
2381
+ --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 */
2382
+ --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 */
2383
+ --shadow-floating-xlarge: 0 0 0 1px #454c54, 0 56px 112px 0 #25292e52; /** Extra large floating shadow for full-screen overlays and sheets */
2384
2384
  --tooltip-fgColor: var(--fgColor-onEmphasis);
2385
2385
  --underlineNav-borderColor-hover: var(--borderColor-muted);
2386
2386
  --border-neutral-muted: 0.0625rem solid #454c54;
package/dist/internalCss/light-tritanopia.css CHANGED
@@ -358,14 +358,14 @@
358
358
  --button-danger-bgColor-active: var(--base-color-red-6);
359
359
  --button-danger-fgColor-disabled: #d1242f80;
360
360
  --button-danger-fgColor-rest: var(--fgColor-danger);
361
- --button-danger-shadow-selected: inset 0px 1px 0px 0px #4c001433;
361
+ --button-danger-shadow-selected: inset 0 1px 0 0 #4c001433;
362
362
  --button-inactive-bgColor: var(--base-color-neutral-3);
363
363
  --button-inactive-fgColor: var(--base-color-neutral-9);
364
364
  --button-invisible-bgColor-disabled: var(--base-color-transparent);
365
365
  --button-invisible-borderColor-disabled: var(--base-color-transparent);
366
- --button-outline-shadow-selected: inset 0px 1px 0px 0px #00215533;
366
+ --button-outline-shadow-selected: inset 0 1px 0 0 #00215533;
367
367
  --button-primary-borderColor-disabled: var(--button-primary-bgColor-disabled);
368
- --button-primary-shadow-selected: inset 0px 1px 0px 0px #0021554d;
368
+ --button-primary-shadow-selected: inset 0 1px 0 0 #0021554d;
369
369
  --button-star-iconColor: var(--base-color-yellow-2);
370
370
  --buttonCounter-danger-fgColor-disabled: #d1242f80;
371
371
  --buttonCounter-outline-fgColor-rest: var(--base-color-blue-6);
@@ -937,14 +937,14 @@
937
937
  --reactionButton-selected-fgColor-hover: var(--base-color-blue-6);
938
938
  --selectMenu-bgColor-active: var(--base-color-blue-1);
939
939
  --selectMenu-borderColor: var(--base-color-transparent);
940
- --shadow-floating-legacy: 0px 6px 12px -3px #25292e0a, 0px 6px 18px 0px #25292e1f;
941
- --shadow-resting-medium: 0px 1px 1px 0px #25292e1a, 0px 3px 6px 0px #25292e1f;
940
+ --shadow-floating-legacy: 0 6px 12px -3px #25292e0a, 0 6px 18px 0 #25292e1f; /** Legacy floating shadow for backward compatibility */
941
+ --shadow-resting-medium: 0 1px 1px 0 #25292e1a, 0 3px 6px 0 #25292e1f; /** Medium resting shadow for cards and elevated surfaces */
942
942
  --skeletonLoader-bgColor: #818b981a;
943
943
  --topicTag-borderColor: var(--base-color-transparent);
944
944
  --treeViewItem-leadingVisual-iconColor-rest: var(--base-color-blue-3);
945
945
  --underlineNav-borderColor-active: var(--base-color-coral-3);
946
946
  --avatar-bgColor: var(--base-color-neutral-0);
947
- --avatar-shadow: 0px 0px 0px 2px #ffffffcc;
947
+ --avatar-shadow: 0 0 0 2px #ffffffcc;
948
948
  --base-color-inset: var(--base-color-neutral-0);
949
949
  --bgColor-black: var(--base-color-neutral-13); /** Pure black background */
950
950
  --bgColor-closed-emphasis: var(--bgColor-neutral-emphasis); /** Strong background for closed state badges and labels */
@@ -994,7 +994,7 @@
994
994
  --button-default-bgColor-rest: var(--control-bgColor-rest);
995
995
  --button-default-bgColor-selected: var(--control-bgColor-active);
996
996
  --button-default-fgColor-rest: var(--control-fgColor-rest);
997
- --button-default-shadow-resting: 0px 1px 0px 0px #1f23280a;
997
+ --button-default-shadow-resting: 0 1px 0 0 #1f23280a;
998
998
  --button-invisible-bgColor-active: var(--control-transparent-bgColor-active);
999
999
  --button-invisible-bgColor-hover: var(--control-transparent-bgColor-hover);
1000
1000
  --button-invisible-bgColor-rest: var(--control-transparent-bgColor-rest);
@@ -1102,9 +1102,9 @@
1102
1102
  --progressBar-bgColor-success: var(--bgColor-success-emphasis);
1103
1103
  --progressBar-track-bgColor: var(--borderColor-default);
1104
1104
  --selection-bgColor: #0969da33; /** Background color for text selection highlights */
1105
- --shadow-inset: inset 0px 1px 0px 0px #1f23280a;
1106
- --shadow-resting-small: 0px 1px 1px 0px #1f23280f, 0px 1px 3px 0px #1f23280f;
1107
- --shadow-resting-xsmall: 0px 1px 1px 0px #1f23280f;
1105
+ --shadow-inset: inset 0 1px 0 0 #1f23280a; /** Inset shadow for recessed elements */
1106
+ --shadow-resting-small: 0 1px 1px 0 #1f23280a, 0 1px 2px 0 #1f232808; /** Small resting shadow for buttons and interactive elements */
1107
+ --shadow-resting-xsmall: 0 1px 1px 0 #1f23280d; /** Extra small resting shadow for minimal elevation */
1108
1108
  --sideNav-bgColor-selected: var(--base-color-neutral-0);
1109
1109
  --timelineBadge-bgColor: var(--bgColor-muted);
1110
1110
  --tooltip-bgColor: var(--bgColor-emphasis);
@@ -1186,10 +1186,10 @@
1186
1186
  --buttonKeybindingHint-danger-borderColor-disabled: var(--buttonKeybindingHint-default-borderColor-disabled);
1187
1187
  --buttonKeybindingHint-danger-borderColor-rest: var(--buttonKeybindingHint-default-borderColor-rest);
1188
1188
  --buttonKeybindingHint-danger-fgColor-disabled: var(--buttonKeybindingHint-default-fgColor-disabled);
1189
- --shadow-floating-large: 0px 0px 0px 1px #d1d9e0, 0px 40px 80px 0px #25292e3d; /** Large floating shadow for modals and dialogs */
1190
- --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;
1191
- --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 */
1192
- --shadow-floating-xlarge: 0px 0px 0px 1px #d1d9e0, 0px 56px 112px 0px #25292e52;
1189
+ --shadow-floating-large: 0 0 0 1px #d1d9e000, 0 40px 80px 0 #25292e3d; /** Large floating shadow for modals and dialogs */
1190
+ --shadow-floating-medium: 0 0 0 1px #d1d9e000, 0 8px 16px -4px #25292e14, 0 4px 32px -4px #25292e14, 0 24px 48px -12px #25292e14, 0 48px 96px -24px #25292e14; /** Medium floating shadow for popovers and action menus */
1191
+ --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 */
1192
+ --shadow-floating-xlarge: 0 0 0 1px #d1d9e000, 0 56px 112px 0 #25292e52; /** Extra large floating shadow for full-screen overlays and sheets */
1193
1193
  --button-danger-borderColor-active: var(--button-danger-borderColor-hover);
1194
1194
  --button-outline-borderColor-hover: var(--button-primary-borderColor-hover);
1195
1195
  --button-outline-borderColor-active: var(--button-outline-borderColor-hover);
@@ -1554,14 +1554,14 @@
1554
1554
  --button-danger-bgColor-active: var(--base-color-red-6);
1555
1555
  --button-danger-fgColor-disabled: #d1242f80;
1556
1556
  --button-danger-fgColor-rest: var(--fgColor-danger);
1557
- --button-danger-shadow-selected: inset 0px 1px 0px 0px #4c001433;
1557
+ --button-danger-shadow-selected: inset 0 1px 0 0 #4c001433;
1558
1558
  --button-inactive-bgColor: var(--base-color-neutral-3);
1559
1559
  --button-inactive-fgColor: var(--base-color-neutral-9);
1560
1560
  --button-invisible-bgColor-disabled: var(--base-color-transparent);
1561
1561
  --button-invisible-borderColor-disabled: var(--base-color-transparent);
1562
- --button-outline-shadow-selected: inset 0px 1px 0px 0px #00215533;
1562
+ --button-outline-shadow-selected: inset 0 1px 0 0 #00215533;
1563
1563
  --button-primary-borderColor-disabled: var(--button-primary-bgColor-disabled);
1564
- --button-primary-shadow-selected: inset 0px 1px 0px 0px #0021554d;
1564
+ --button-primary-shadow-selected: inset 0 1px 0 0 #0021554d;
1565
1565
  --button-star-iconColor: var(--base-color-yellow-2);
1566
1566
  --buttonCounter-danger-fgColor-disabled: #d1242f80;
1567
1567
  --buttonCounter-outline-fgColor-rest: var(--base-color-blue-6);
@@ -2133,14 +2133,14 @@
2133
2133
  --reactionButton-selected-fgColor-hover: var(--base-color-blue-6);
2134
2134
  --selectMenu-bgColor-active: var(--base-color-blue-1);
2135
2135
  --selectMenu-borderColor: var(--base-color-transparent);
2136
- --shadow-floating-legacy: 0px 6px 12px -3px #25292e0a, 0px 6px 18px 0px #25292e1f;
2137
- --shadow-resting-medium: 0px 1px 1px 0px #25292e1a, 0px 3px 6px 0px #25292e1f;
2136
+ --shadow-floating-legacy: 0 6px 12px -3px #25292e0a, 0 6px 18px 0 #25292e1f; /** Legacy floating shadow for backward compatibility */
2137
+ --shadow-resting-medium: 0 1px 1px 0 #25292e1a, 0 3px 6px 0 #25292e1f; /** Medium resting shadow for cards and elevated surfaces */
2138
2138
  --skeletonLoader-bgColor: #818b981a;
2139
2139
  --topicTag-borderColor: var(--base-color-transparent);
2140
2140
  --treeViewItem-leadingVisual-iconColor-rest: var(--base-color-blue-3);
2141
2141
  --underlineNav-borderColor-active: var(--base-color-coral-3);
2142
2142
  --avatar-bgColor: var(--base-color-neutral-0);
2143
- --avatar-shadow: 0px 0px 0px 2px #ffffffcc;
2143
+ --avatar-shadow: 0 0 0 2px #ffffffcc;
2144
2144
  --base-color-inset: var(--base-color-neutral-0);
2145
2145
  --bgColor-black: var(--base-color-neutral-13); /** Pure black background */
2146
2146
  --bgColor-closed-emphasis: var(--bgColor-neutral-emphasis); /** Strong background for closed state badges and labels */
@@ -2190,7 +2190,7 @@
2190
2190
  --button-default-bgColor-rest: var(--control-bgColor-rest);
2191
2191
  --button-default-bgColor-selected: var(--control-bgColor-active);
2192
2192
  --button-default-fgColor-rest: var(--control-fgColor-rest);
2193
- --button-default-shadow-resting: 0px 1px 0px 0px #1f23280a;
2193
+ --button-default-shadow-resting: 0 1px 0 0 #1f23280a;
2194
2194
  --button-invisible-bgColor-active: var(--control-transparent-bgColor-active);
2195
2195
  --button-invisible-bgColor-hover: var(--control-transparent-bgColor-hover);
2196
2196
  --button-invisible-bgColor-rest: var(--control-transparent-bgColor-rest);
@@ -2298,9 +2298,9 @@
2298
2298
  --progressBar-bgColor-success: var(--bgColor-success-emphasis);
2299
2299
  --progressBar-track-bgColor: var(--borderColor-default);
2300
2300
  --selection-bgColor: #0969da33; /** Background color for text selection highlights */
2301
- --shadow-inset: inset 0px 1px 0px 0px #1f23280a;
2302
- --shadow-resting-small: 0px 1px 1px 0px #1f23280f, 0px 1px 3px 0px #1f23280f;
2303
- --shadow-resting-xsmall: 0px 1px 1px 0px #1f23280f;
2301
+ --shadow-inset: inset 0 1px 0 0 #1f23280a; /** Inset shadow for recessed elements */
2302
+ --shadow-resting-small: 0 1px 1px 0 #1f23280a, 0 1px 2px 0 #1f232808; /** Small resting shadow for buttons and interactive elements */
2303
+ --shadow-resting-xsmall: 0 1px 1px 0 #1f23280d; /** Extra small resting shadow for minimal elevation */
2304
2304
  --sideNav-bgColor-selected: var(--base-color-neutral-0);
2305
2305
  --timelineBadge-bgColor: var(--bgColor-muted);
2306
2306
  --tooltip-bgColor: var(--bgColor-emphasis);
@@ -2382,10 +2382,10 @@
2382
2382
  --buttonKeybindingHint-danger-borderColor-disabled: var(--buttonKeybindingHint-default-borderColor-disabled);
2383
2383
  --buttonKeybindingHint-danger-borderColor-rest: var(--buttonKeybindingHint-default-borderColor-rest);
2384
2384
  --buttonKeybindingHint-danger-fgColor-disabled: var(--buttonKeybindingHint-default-fgColor-disabled);
2385
- --shadow-floating-large: 0px 0px 0px 1px #d1d9e0, 0px 40px 80px 0px #25292e3d; /** Large floating shadow for modals and dialogs */
2386
- --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;
2387
- --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 */
2388
- --shadow-floating-xlarge: 0px 0px 0px 1px #d1d9e0, 0px 56px 112px 0px #25292e52;
2385
+ --shadow-floating-large: 0 0 0 1px #d1d9e000, 0 40px 80px 0 #25292e3d; /** Large floating shadow for modals and dialogs */
2386
+ --shadow-floating-medium: 0 0 0 1px #d1d9e000, 0 8px 16px -4px #25292e14, 0 4px 32px -4px #25292e14, 0 24px 48px -12px #25292e14, 0 48px 96px -24px #25292e14; /** Medium floating shadow for popovers and action menus */
2387
+ --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 */
2388
+ --shadow-floating-xlarge: 0 0 0 1px #d1d9e000, 0 56px 112px 0 #25292e52; /** Extra large floating shadow for full-screen overlays and sheets */
2389
2389
  --button-danger-borderColor-active: var(--button-danger-borderColor-hover);
2390
2390
  --button-outline-borderColor-hover: var(--button-primary-borderColor-hover);
2391
2391
  --button-outline-borderColor-active: var(--button-outline-borderColor-hover);
package/dist/internalCss/light.css CHANGED
@@ -355,15 +355,15 @@
355
355
  --button-danger-bgColor-active: var(--base-color-red-6);
356
356
  --button-danger-fgColor-disabled: #d1242f80;
357
357
  --button-danger-fgColor-rest: var(--fgColor-danger);
358
- --button-danger-shadow-selected: inset 0px 1px 0px 0px #4c001433;
358
+ --button-danger-shadow-selected: inset 0 1px 0 0 #4c001433;
359
359
  --button-inactive-bgColor: var(--base-color-neutral-3);
360
360
  --button-inactive-fgColor: var(--base-color-neutral-9);
361
361
  --button-invisible-bgColor-disabled: var(--base-color-transparent);
362
362
  --button-invisible-borderColor-disabled: var(--base-color-transparent);
363
- --button-outline-shadow-selected: inset 0px 1px 0px 0px #00215533;
363
+ --button-outline-shadow-selected: inset 0 1px 0 0 #00215533;
364
364
  --button-primary-bgColor-rest: var(--bgColor-success-emphasis);
365
365
  --button-primary-borderColor-disabled: var(--button-primary-bgColor-disabled);
366
- --button-primary-shadow-selected: inset 0px 1px 0px 0px #002d114d;
366
+ --button-primary-shadow-selected: inset 0 1px 0 0 #002d114d;
367
367
  --button-star-iconColor: var(--base-color-yellow-2);
368
368
  --buttonCounter-danger-fgColor-disabled: #d1242f80;
369
369
  --buttonCounter-outline-fgColor-rest: var(--base-color-blue-6);
@@ -934,14 +934,14 @@
934
934
  --reactionButton-selected-fgColor-hover: var(--base-color-blue-6);
935
935
  --selectMenu-bgColor-active: var(--base-color-blue-1);
936
936
  --selectMenu-borderColor: var(--base-color-transparent);
937
- --shadow-floating-legacy: 0px 6px 12px -3px #25292e0a, 0px 6px 18px 0px #25292e1f;
938
- --shadow-resting-medium: 0px 1px 1px 0px #25292e1a, 0px 3px 6px 0px #25292e1f;
937
+ --shadow-floating-legacy: 0 6px 12px -3px #25292e0a, 0 6px 18px 0 #25292e1f; /** Legacy floating shadow for backward compatibility */
938
+ --shadow-resting-medium: 0 1px 1px 0 #25292e1a, 0 3px 6px 0 #25292e1f; /** Medium resting shadow for cards and elevated surfaces */
939
939
  --skeletonLoader-bgColor: #818b981a;
940
940
  --topicTag-borderColor: var(--base-color-transparent);
941
941
  --treeViewItem-leadingVisual-iconColor-rest: var(--base-color-blue-3);
942
942
  --underlineNav-borderColor-active: var(--base-color-coral-3);
943
943
  --avatar-bgColor: var(--base-color-neutral-0);
944
- --avatar-shadow: 0px 0px 0px 2px #ffffffcc;
944
+ --avatar-shadow: 0 0 0 2px #ffffffcc;
945
945
  --base-color-inset: var(--base-color-neutral-0);
946
946
  --bgColor-black: var(--base-color-neutral-13); /** Pure black background */
947
947
  --bgColor-closed-emphasis: var(--bgColor-danger-emphasis); /** Strong background for closed state badges and labels */
@@ -993,7 +993,7 @@
993
993
  --button-default-bgColor-rest: var(--control-bgColor-rest);
994
994
  --button-default-bgColor-selected: var(--control-bgColor-active);
995
995
  --button-default-fgColor-rest: var(--control-fgColor-rest);
996
- --button-default-shadow-resting: 0px 1px 0px 0px #1f23280a;
996
+ --button-default-shadow-resting: 0 1px 0 0 #1f23280a;
997
997
  --button-invisible-bgColor-active: var(--control-transparent-bgColor-active);
998
998
  --button-invisible-bgColor-hover: var(--control-transparent-bgColor-hover);
999
999
  --button-invisible-bgColor-rest: var(--control-transparent-bgColor-rest);
@@ -1101,9 +1101,9 @@
1101
1101
  --progressBar-bgColor-sponsors: var(--bgColor-sponsors-emphasis);
1102
1102
  --progressBar-track-bgColor: var(--borderColor-default);
1103
1103
  --selection-bgColor: #0969da33; /** Background color for text selection highlights */
1104
- --shadow-inset: inset 0px 1px 0px 0px #1f23280a;
1105
- --shadow-resting-small: 0px 1px 1px 0px #1f23280f, 0px 1px 3px 0px #1f23280f;
1106
- --shadow-resting-xsmall: 0px 1px 1px 0px #1f23280f;
1104
+ --shadow-inset: inset 0 1px 0 0 #1f23280a; /** Inset shadow for recessed elements */
1105
+ --shadow-resting-small: 0 1px 1px 0 #1f23280a, 0 1px 2px 0 #1f232808; /** Small resting shadow for buttons and interactive elements */
1106
+ --shadow-resting-xsmall: 0 1px 1px 0 #1f23280d; /** Extra small resting shadow for minimal elevation */
1107
1107
  --sideNav-bgColor-selected: var(--base-color-neutral-0);
1108
1108
  --timelineBadge-bgColor: var(--bgColor-muted);
1109
1109
  --tooltip-bgColor: var(--bgColor-emphasis);
@@ -1186,10 +1186,10 @@
1186
1186
  --buttonKeybindingHint-danger-borderColor-disabled: var(--buttonKeybindingHint-default-borderColor-disabled);
1187
1187
  --buttonKeybindingHint-danger-borderColor-rest: var(--buttonKeybindingHint-default-borderColor-rest);
1188
1188
  --buttonKeybindingHint-danger-fgColor-disabled: var(--buttonKeybindingHint-default-fgColor-disabled);
1189
- --shadow-floating-large: 0px 0px 0px 1px #d1d9e0, 0px 40px 80px 0px #25292e3d; /** Large floating shadow for modals and dialogs */
1190
- --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;
1191
- --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 */
1192
- --shadow-floating-xlarge: 0px 0px 0px 1px #d1d9e0, 0px 56px 112px 0px #25292e52;
1189
+ --shadow-floating-large: 0 0 0 1px #d1d9e000, 0 40px 80px 0 #25292e3d; /** Large floating shadow for modals and dialogs */
1190
+ --shadow-floating-medium: 0 0 0 1px #d1d9e000, 0 8px 16px -4px #25292e14, 0 4px 32px -4px #25292e14, 0 24px 48px -12px #25292e14, 0 48px 96px -24px #25292e14; /** Medium floating shadow for popovers and action menus */
1191
+ --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 */
1192
+ --shadow-floating-xlarge: 0 0 0 1px #d1d9e000, 0 56px 112px 0 #25292e52; /** Extra large floating shadow for full-screen overlays and sheets */
1193
1193
  --button-danger-borderColor-active: var(--button-danger-borderColor-hover);
1194
1194
  --button-outline-borderColor-hover: var(--button-primary-borderColor-hover);
1195
1195
  --button-outline-borderColor-active: var(--button-outline-borderColor-hover);
@@ -1551,15 +1551,15 @@
1551
1551
  --button-danger-bgColor-active: var(--base-color-red-6);
1552
1552
  --button-danger-fgColor-disabled: #d1242f80;
1553
1553
  --button-danger-fgColor-rest: var(--fgColor-danger);
1554
- --button-danger-shadow-selected: inset 0px 1px 0px 0px #4c001433;
1554
+ --button-danger-shadow-selected: inset 0 1px 0 0 #4c001433;
1555
1555
  --button-inactive-bgColor: var(--base-color-neutral-3);
1556
1556
  --button-inactive-fgColor: var(--base-color-neutral-9);
1557
1557
  --button-invisible-bgColor-disabled: var(--base-color-transparent);
1558
1558
  --button-invisible-borderColor-disabled: var(--base-color-transparent);
1559
- --button-outline-shadow-selected: inset 0px 1px 0px 0px #00215533;
1559
+ --button-outline-shadow-selected: inset 0 1px 0 0 #00215533;
1560
1560
  --button-primary-bgColor-rest: var(--bgColor-success-emphasis);
1561
1561
  --button-primary-borderColor-disabled: var(--button-primary-bgColor-disabled);
1562
- --button-primary-shadow-selected: inset 0px 1px 0px 0px #002d114d;
1562
+ --button-primary-shadow-selected: inset 0 1px 0 0 #002d114d;
1563
1563
  --button-star-iconColor: var(--base-color-yellow-2);
1564
1564
  --buttonCounter-danger-fgColor-disabled: #d1242f80;
1565
1565
  --buttonCounter-outline-fgColor-rest: var(--base-color-blue-6);
@@ -2130,14 +2130,14 @@
2130
2130
  --reactionButton-selected-fgColor-hover: var(--base-color-blue-6);
2131
2131
  --selectMenu-bgColor-active: var(--base-color-blue-1);
2132
2132
  --selectMenu-borderColor: var(--base-color-transparent);
2133
- --shadow-floating-legacy: 0px 6px 12px -3px #25292e0a, 0px 6px 18px 0px #25292e1f;
2134
- --shadow-resting-medium: 0px 1px 1px 0px #25292e1a, 0px 3px 6px 0px #25292e1f;
2133
+ --shadow-floating-legacy: 0 6px 12px -3px #25292e0a, 0 6px 18px 0 #25292e1f; /** Legacy floating shadow for backward compatibility */
2134
+ --shadow-resting-medium: 0 1px 1px 0 #25292e1a, 0 3px 6px 0 #25292e1f; /** Medium resting shadow for cards and elevated surfaces */
2135
2135
  --skeletonLoader-bgColor: #818b981a;
2136
2136
  --topicTag-borderColor: var(--base-color-transparent);
2137
2137
  --treeViewItem-leadingVisual-iconColor-rest: var(--base-color-blue-3);
2138
2138
  --underlineNav-borderColor-active: var(--base-color-coral-3);
2139
2139
  --avatar-bgColor: var(--base-color-neutral-0);
2140
- --avatar-shadow: 0px 0px 0px 2px #ffffffcc;
2140
+ --avatar-shadow: 0 0 0 2px #ffffffcc;
2141
2141
  --base-color-inset: var(--base-color-neutral-0);
2142
2142
  --bgColor-black: var(--base-color-neutral-13); /** Pure black background */
2143
2143
  --bgColor-closed-emphasis: var(--bgColor-danger-emphasis); /** Strong background for closed state badges and labels */
@@ -2189,7 +2189,7 @@
2189
2189
  --button-default-bgColor-rest: var(--control-bgColor-rest);
2190
2190
  --button-default-bgColor-selected: var(--control-bgColor-active);
2191
2191
  --button-default-fgColor-rest: var(--control-fgColor-rest);
2192
- --button-default-shadow-resting: 0px 1px 0px 0px #1f23280a;
2192
+ --button-default-shadow-resting: 0 1px 0 0 #1f23280a;
2193
2193
  --button-invisible-bgColor-active: var(--control-transparent-bgColor-active);
2194
2194
  --button-invisible-bgColor-hover: var(--control-transparent-bgColor-hover);
2195
2195
  --button-invisible-bgColor-rest: var(--control-transparent-bgColor-rest);
@@ -2297,9 +2297,9 @@
2297
2297
  --progressBar-bgColor-sponsors: var(--bgColor-sponsors-emphasis);
2298
2298
  --progressBar-track-bgColor: var(--borderColor-default);
2299
2299
  --selection-bgColor: #0969da33; /** Background color for text selection highlights */
2300
- --shadow-inset: inset 0px 1px 0px 0px #1f23280a;
2301
- --shadow-resting-small: 0px 1px 1px 0px #1f23280f, 0px 1px 3px 0px #1f23280f;
2302
- --shadow-resting-xsmall: 0px 1px 1px 0px #1f23280f;
2300
+ --shadow-inset: inset 0 1px 0 0 #1f23280a; /** Inset shadow for recessed elements */
2301
+ --shadow-resting-small: 0 1px 1px 0 #1f23280a, 0 1px 2px 0 #1f232808; /** Small resting shadow for buttons and interactive elements */
2302
+ --shadow-resting-xsmall: 0 1px 1px 0 #1f23280d; /** Extra small resting shadow for minimal elevation */
2303
2303
  --sideNav-bgColor-selected: var(--base-color-neutral-0);
2304
2304
  --timelineBadge-bgColor: var(--bgColor-muted);
2305
2305
  --tooltip-bgColor: var(--bgColor-emphasis);
@@ -2382,10 +2382,10 @@
2382
2382
  --buttonKeybindingHint-danger-borderColor-disabled: var(--buttonKeybindingHint-default-borderColor-disabled);
2383
2383
  --buttonKeybindingHint-danger-borderColor-rest: var(--buttonKeybindingHint-default-borderColor-rest);
2384
2384
  --buttonKeybindingHint-danger-fgColor-disabled: var(--buttonKeybindingHint-default-fgColor-disabled);
2385
- --shadow-floating-large: 0px 0px 0px 1px #d1d9e0, 0px 40px 80px 0px #25292e3d; /** Large floating shadow for modals and dialogs */
2386
- --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;
2387
- --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 */
2388
- --shadow-floating-xlarge: 0px 0px 0px 1px #d1d9e0, 0px 56px 112px 0px #25292e52;
2385
+ --shadow-floating-large: 0 0 0 1px #d1d9e000, 0 40px 80px 0 #25292e3d; /** Large floating shadow for modals and dialogs */
2386
+ --shadow-floating-medium: 0 0 0 1px #d1d9e000, 0 8px 16px -4px #25292e14, 0 4px 32px -4px #25292e14, 0 24px 48px -12px #25292e14, 0 48px 96px -24px #25292e14; /** Medium floating shadow for popovers and action menus */
2387
+ --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 */
2388
+ --shadow-floating-xlarge: 0 0 0 1px #d1d9e000, 0 56px 112px 0 #25292e52; /** Extra large floating shadow for full-screen overlays and sheets */
2389
2389
  --button-danger-borderColor-active: var(--button-danger-borderColor-hover);
2390
2390
  --button-outline-borderColor-hover: var(--button-primary-borderColor-hover);
2391
2391
  --button-outline-borderColor-active: var(--button-outline-borderColor-hover);