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

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 (131) hide show
  1. package/DESIGN_TOKENS_GUIDE.md +185 -0
  2. package/DESIGN_TOKENS_SPEC.md +565 -0
  3. package/dist/build/formats/markdownLlmGuidelines.d.ts +7 -6
  4. package/dist/build/formats/markdownLlmGuidelines.js +1034 -60
  5. package/dist/build/schemas/borderToken.d.ts +16 -2
  6. package/dist/build/schemas/dimensionToken.d.ts +8 -1
  7. package/dist/build/schemas/dimensionValue.d.ts +24 -1
  8. package/dist/build/schemas/dimensionValue.js +20 -1
  9. package/dist/build/schemas/durationToken.d.ts +7 -1
  10. package/dist/build/schemas/durationValue.d.ts +11 -1
  11. package/dist/build/schemas/durationValue.js +13 -3
  12. package/dist/build/schemas/shadowToken.d.ts +672 -84
  13. package/dist/build/schemas/transitionToken.d.ts +14 -2
  14. package/dist/build/schemas/typographyToken.d.ts +32 -4
  15. package/dist/build/transformers/dimensionToPixelUnitless.d.ts +3 -2
  16. package/dist/build/transformers/dimensionToPixelUnitless.js +22 -26
  17. package/dist/build/transformers/dimensionToRem.d.ts +2 -1
  18. package/dist/build/transformers/dimensionToRem.js +21 -22
  19. package/dist/build/transformers/dimensionToRemPxArray.d.ts +2 -1
  20. package/dist/build/transformers/dimensionToRemPxArray.js +21 -22
  21. package/dist/build/transformers/durationToCss.d.ts +2 -1
  22. package/dist/build/transformers/durationToCss.js +18 -11
  23. package/dist/build/transformers/utilities/parseDimension.d.ts +12 -0
  24. package/dist/build/transformers/utilities/parseDimension.js +31 -0
  25. package/dist/build/types/dimensionTokenValue.d.ts +9 -0
  26. package/dist/css/functional/themes/dark-colorblind-high-contrast.css +18 -14
  27. package/dist/css/functional/themes/dark-colorblind.css +18 -14
  28. package/dist/css/functional/themes/dark-dimmed-high-contrast.css +18 -14
  29. package/dist/css/functional/themes/dark-dimmed.css +18 -14
  30. package/dist/css/functional/themes/dark-high-contrast.css +18 -14
  31. package/dist/css/functional/themes/dark-tritanopia-high-contrast.css +18 -14
  32. package/dist/css/functional/themes/dark-tritanopia.css +18 -14
  33. package/dist/css/functional/themes/dark.css +18 -14
  34. package/dist/css/functional/themes/light-colorblind-high-contrast.css +18 -14
  35. package/dist/css/functional/themes/light-colorblind.css +18 -14
  36. package/dist/css/functional/themes/light-high-contrast.css +18 -14
  37. package/dist/css/functional/themes/light-tritanopia-high-contrast.css +18 -14
  38. package/dist/css/functional/themes/light-tritanopia.css +18 -14
  39. package/dist/css/functional/themes/light.css +18 -14
  40. package/dist/css/primitives.css +4 -0
  41. package/dist/docs/base/motion/motion.json +96 -24
  42. package/dist/docs/base/size/size.json +76 -19
  43. package/dist/docs/base/typography/typography.json +24 -6
  44. package/dist/docs/functional/size/border.json +20 -5
  45. package/dist/docs/functional/size/breakpoints.json +24 -6
  46. package/dist/docs/functional/size/radius.json +16 -4
  47. package/dist/docs/functional/size/size.json +60 -15
  48. package/dist/docs/functional/themes/dark-colorblind-high-contrast.json +109 -7
  49. package/dist/docs/functional/themes/dark-colorblind.json +109 -7
  50. package/dist/docs/functional/themes/dark-dimmed-high-contrast.json +109 -7
  51. package/dist/docs/functional/themes/dark-dimmed.json +109 -7
  52. package/dist/docs/functional/themes/dark-high-contrast.json +109 -7
  53. package/dist/docs/functional/themes/dark-tritanopia-high-contrast.json +109 -7
  54. package/dist/docs/functional/themes/dark-tritanopia.json +109 -7
  55. package/dist/docs/functional/themes/dark.json +109 -7
  56. package/dist/docs/functional/themes/light-colorblind-high-contrast.json +115 -13
  57. package/dist/docs/functional/themes/light-colorblind.json +115 -13
  58. package/dist/docs/functional/themes/light-high-contrast.json +115 -13
  59. package/dist/docs/functional/themes/light-tritanopia-high-contrast.json +115 -13
  60. package/dist/docs/functional/themes/light-tritanopia.json +115 -13
  61. package/dist/docs/functional/themes/light.json +115 -13
  62. package/dist/docs/functional/typography/typography.json +8 -2
  63. package/dist/fallbacks/base/motion/motion.json +48 -12
  64. package/dist/figma/themes/light-colorblind.json +4 -4
  65. package/dist/figma/themes/light-high-contrast.json +4 -4
  66. package/dist/figma/themes/light-tritanopia.json +4 -4
  67. package/dist/figma/themes/light.json +4 -4
  68. package/dist/internalCss/dark-colorblind-high-contrast.css +14 -14
  69. package/dist/internalCss/dark-colorblind.css +14 -14
  70. package/dist/internalCss/dark-dimmed-high-contrast.css +14 -14
  71. package/dist/internalCss/dark-dimmed.css +14 -14
  72. package/dist/internalCss/dark-high-contrast.css +14 -14
  73. package/dist/internalCss/dark-tritanopia-high-contrast.css +14 -14
  74. package/dist/internalCss/dark-tritanopia.css +14 -14
  75. package/dist/internalCss/dark.css +14 -14
  76. package/dist/internalCss/light-colorblind-high-contrast.css +14 -14
  77. package/dist/internalCss/light-colorblind.css +14 -14
  78. package/dist/internalCss/light-high-contrast.css +14 -14
  79. package/dist/internalCss/light-tritanopia-high-contrast.css +14 -14
  80. package/dist/internalCss/light-tritanopia.css +14 -14
  81. package/dist/internalCss/light.css +14 -14
  82. package/dist/styleLint/base/motion/motion.json +96 -24
  83. package/dist/styleLint/base/size/size.json +76 -19
  84. package/dist/styleLint/base/typography/typography.json +30 -12
  85. package/dist/styleLint/functional/size/border.json +21 -6
  86. package/dist/styleLint/functional/size/breakpoints.json +24 -6
  87. package/dist/styleLint/functional/size/radius.json +17 -5
  88. package/dist/styleLint/functional/size/size-coarse.json +3 -3
  89. package/dist/styleLint/functional/size/size-fine.json +3 -3
  90. package/dist/styleLint/functional/size/size.json +111 -66
  91. package/dist/styleLint/functional/themes/dark-colorblind-high-contrast.json +129 -27
  92. package/dist/styleLint/functional/themes/dark-colorblind.json +129 -27
  93. package/dist/styleLint/functional/themes/dark-dimmed-high-contrast.json +129 -27
  94. package/dist/styleLint/functional/themes/dark-dimmed.json +129 -27
  95. package/dist/styleLint/functional/themes/dark-high-contrast.json +129 -27
  96. package/dist/styleLint/functional/themes/dark-tritanopia-high-contrast.json +129 -27
  97. package/dist/styleLint/functional/themes/dark-tritanopia.json +129 -27
  98. package/dist/styleLint/functional/themes/dark.json +129 -27
  99. package/dist/styleLint/functional/themes/light-colorblind-high-contrast.json +135 -33
  100. package/dist/styleLint/functional/themes/light-colorblind.json +135 -33
  101. package/dist/styleLint/functional/themes/light-high-contrast.json +135 -33
  102. package/dist/styleLint/functional/themes/light-tritanopia-high-contrast.json +135 -33
  103. package/dist/styleLint/functional/themes/light-tritanopia.json +135 -33
  104. package/dist/styleLint/functional/themes/light.json +135 -33
  105. package/dist/styleLint/functional/typography/typography.json +28 -22
  106. package/package.json +6 -5
  107. package/src/tokens/base/motion/timing.json5 +12 -12
  108. package/src/tokens/base/size/size.json5 +19 -19
  109. package/src/tokens/base/typography/typography.json5 +6 -6
  110. package/src/tokens/functional/color/bgColor.json5 +8 -0
  111. package/src/tokens/functional/color/display.json5 +7 -0
  112. package/src/tokens/functional/color/fgColor.json5 +8 -0
  113. package/src/tokens/functional/color/syntax.json5 +14 -0
  114. package/src/tokens/functional/shadow/shadow.json5 +39 -4
  115. package/src/tokens/functional/size/border.json5 +5 -5
  116. package/src/tokens/functional/size/breakpoints.json5 +6 -6
  117. package/src/tokens/functional/size/radius.json5 +4 -4
  118. package/src/tokens/functional/size/size.json5 +15 -15
  119. package/src/tokens/functional/typography/typography.json5 +8 -4
  120. package/dist/build/parsers/index.d.ts +0 -1
  121. package/dist/build/parsers/index.js +0 -1
  122. package/dist/build/parsers/w3cJsonParser.d.ts +0 -6
  123. package/dist/build/parsers/w3cJsonParser.js +0 -25
  124. package/dist/removed/testing.json5 +0 -4
  125. package/guidelines/color.llm.md +0 -16
  126. package/guidelines/guidelines.llm.md +0 -34
  127. package/guidelines/motion.llm.md +0 -41
  128. package/guidelines/spacing.llm.md +0 -20
  129. package/guidelines/typography.llm.md +0 -14
  130. package/src/tokens/removed/testing.json5 +0 -4
  131. package/token-guidelines.llm.md +0 -695
package/dist/internalCss/dark-colorblind-high-contrast.css CHANGED
@@ -1091,11 +1091,11 @@
1091
1091
  --reactionButton-selected-fgColor-rest: var(--fgColor-link);
1092
1092
  --selectMenu-borderColor: var(--borderColor-default);
1093
1093
  --selection-bgColor: #194fb1b3; /** Background color for text selection highlights */
1094
- --shadow-floating-legacy: 0px 6px 12px -3px #01040966, 0px 6px 18px 0px #01040966;
1095
- --shadow-inset: inset 0px 1px 0px 0px #0104093d;
1096
- --shadow-resting-medium: 0px 1px 1px 0px #01040966, 0px 3px 6px 0px #010409cc;
1097
- --shadow-resting-small: 0px 1px 1px 0px #01040999, 0px 1px 3px 0px #01040999;
1098
- --shadow-resting-xsmall: 0px 1px 1px 0px #010409cc;
1094
+ --shadow-floating-legacy: 0px 6px 12px -3px #01040966, 0px 6px 18px 0px #01040966; /** Legacy floating shadow for backward compatibility */
1095
+ --shadow-inset: inset 0px 1px 0px 0px #0104093d; /** Inset shadow for recessed elements */
1096
+ --shadow-resting-medium: 0px 1px 1px 0px #01040966, 0px 3px 6px 0px #010409cc; /** Medium resting shadow for cards and elevated surfaces */
1097
+ --shadow-resting-small: 0px 1px 1px 0px #01040999, 0px 1px 3px 0px #01040999; /** Small resting shadow for buttons and interactive elements */
1098
+ --shadow-resting-xsmall: 0px 1px 1px 0px #010409cc; /** Extra small resting shadow for minimal elevation */
1099
1099
  --topicTag-borderColor: var(--borderColor-accent-emphasis);
1100
1100
  --treeViewItem-leadingVisual-iconColor-rest: var(--fgColor-muted);
1101
1101
  --underlineNav-iconColor-rest: var(--fgColor-muted);
@@ -1171,9 +1171,9 @@
1171
1171
  --page-header-bgColor: var(--bgColor-default);
1172
1172
  --progressBar-track-bgColor: var(--bgColor-inverse);
1173
1173
  --shadow-floating-large: 0px 0px 0px 1px #b7bdc8, 0px 24px 48px 0px #010409; /** Large floating shadow for modals and dialogs */
1174
- --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;
1174
+ --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; /** Medium floating shadow for popovers and action menus */
1175
1175
  --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 */
1176
- --shadow-floating-xlarge: 0px 0px 0px 1px #b7bdc8, 0px 32px 64px 0px #010409;
1176
+ --shadow-floating-xlarge: 0px 0px 0px 1px #b7bdc8, 0px 32px 64px 0px #010409; /** Extra large floating shadow for full-screen overlays and sheets */
1177
1177
  --tooltip-bgColor: var(--bgColor-inverse);
1178
1178
  --tooltip-fgColor: var(--fgColor-onInverse);
1179
1179
  --border-neutral-emphasis: 0.0625rem solid #b7bdc8;
@@ -2287,11 +2287,11 @@
2287
2287
  --reactionButton-selected-fgColor-rest: var(--fgColor-link);
2288
2288
  --selectMenu-borderColor: var(--borderColor-default);
2289
2289
  --selection-bgColor: #194fb1b3; /** Background color for text selection highlights */
2290
- --shadow-floating-legacy: 0px 6px 12px -3px #01040966, 0px 6px 18px 0px #01040966;
2291
- --shadow-inset: inset 0px 1px 0px 0px #0104093d;
2292
- --shadow-resting-medium: 0px 1px 1px 0px #01040966, 0px 3px 6px 0px #010409cc;
2293
- --shadow-resting-small: 0px 1px 1px 0px #01040999, 0px 1px 3px 0px #01040999;
2294
- --shadow-resting-xsmall: 0px 1px 1px 0px #010409cc;
2290
+ --shadow-floating-legacy: 0px 6px 12px -3px #01040966, 0px 6px 18px 0px #01040966; /** Legacy floating shadow for backward compatibility */
2291
+ --shadow-inset: inset 0px 1px 0px 0px #0104093d; /** Inset shadow for recessed elements */
2292
+ --shadow-resting-medium: 0px 1px 1px 0px #01040966, 0px 3px 6px 0px #010409cc; /** Medium resting shadow for cards and elevated surfaces */
2293
+ --shadow-resting-small: 0px 1px 1px 0px #01040999, 0px 1px 3px 0px #01040999; /** Small resting shadow for buttons and interactive elements */
2294
+ --shadow-resting-xsmall: 0px 1px 1px 0px #010409cc; /** Extra small resting shadow for minimal elevation */
2295
2295
  --topicTag-borderColor: var(--borderColor-accent-emphasis);
2296
2296
  --treeViewItem-leadingVisual-iconColor-rest: var(--fgColor-muted);
2297
2297
  --underlineNav-iconColor-rest: var(--fgColor-muted);
@@ -2367,9 +2367,9 @@
2367
2367
  --page-header-bgColor: var(--bgColor-default);
2368
2368
  --progressBar-track-bgColor: var(--bgColor-inverse);
2369
2369
  --shadow-floating-large: 0px 0px 0px 1px #b7bdc8, 0px 24px 48px 0px #010409; /** Large floating shadow for modals and dialogs */
2370
- --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;
2370
+ --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; /** Medium floating shadow for popovers and action menus */
2371
2371
  --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 */
2372
- --shadow-floating-xlarge: 0px 0px 0px 1px #b7bdc8, 0px 32px 64px 0px #010409;
2372
+ --shadow-floating-xlarge: 0px 0px 0px 1px #b7bdc8, 0px 32px 64px 0px #010409; /** Extra large floating shadow for full-screen overlays and sheets */
2373
2373
  --tooltip-bgColor: var(--bgColor-inverse);
2374
2374
  --tooltip-fgColor: var(--fgColor-onInverse);
2375
2375
  --border-neutral-emphasis: 0.0625rem solid #b7bdc8;
package/dist/internalCss/dark-colorblind.css CHANGED
@@ -1114,11 +1114,11 @@
1114
1114
  --reactionButton-selected-fgColor-rest: var(--fgColor-link);
1115
1115
  --selectMenu-borderColor: var(--borderColor-default);
1116
1116
  --selection-bgColor: #1f6febb3; /** Background color for text selection highlights */
1117
- --shadow-floating-legacy: 0px 6px 12px -3px #01040966, 0px 6px 18px 0px #01040966;
1118
- --shadow-inset: inset 0px 1px 0px 0px #0104093d;
1119
- --shadow-resting-medium: 0px 1px 1px 0px #01040966, 0px 3px 6px 0px #010409cc;
1120
- --shadow-resting-small: 0px 1px 1px 0px #01040999, 0px 1px 3px 0px #01040999;
1121
- --shadow-resting-xsmall: 0px 1px 1px 0px #010409cc;
1117
+ --shadow-floating-legacy: 0px 6px 12px -3px #01040966, 0px 6px 18px 0px #01040966; /** Legacy floating shadow for backward compatibility */
1118
+ --shadow-inset: inset 0px 1px 0px 0px #0104093d; /** Inset shadow for recessed elements */
1119
+ --shadow-resting-medium: 0px 1px 1px 0px #01040966, 0px 3px 6px 0px #010409cc; /** Medium resting shadow for cards and elevated surfaces */
1120
+ --shadow-resting-small: 0px 1px 1px 0px #01040999, 0px 1px 3px 0px #01040999; /** Small resting shadow for buttons and interactive elements */
1121
+ --shadow-resting-xsmall: 0px 1px 1px 0px #010409cc; /** Extra small resting shadow for minimal elevation */
1122
1122
  --tooltip-bgColor: var(--bgColor-emphasis);
1123
1123
  --treeViewItem-leadingVisual-iconColor-rest: var(--fgColor-muted);
1124
1124
  --underlineNav-iconColor-rest: var(--fgColor-muted);
@@ -1186,9 +1186,9 @@
1186
1186
  --buttonKeybindingHint-danger-borderColor-rest: var(--buttonKeybindingHint-default-borderColor-rest);
1187
1187
  --buttonKeybindingHint-danger-fgColor-disabled: var(--buttonKeybindingHint-default-fgColor-disabled);
1188
1188
  --shadow-floating-large: 0px 0px 0px 1px #3d444d, 0px 24px 48px 0px #010409; /** Large floating shadow for modals and dialogs */
1189
- --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;
1189
+ --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; /** Medium floating shadow for popovers and action menus */
1190
1190
  --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 */
1191
- --shadow-floating-xlarge: 0px 0px 0px 1px #3d444d, 0px 32px 64px 0px #010409;
1191
+ --shadow-floating-xlarge: 0px 0px 0px 1px #3d444d, 0px 32px 64px 0px #010409; /** Extra large floating shadow for full-screen overlays and sheets */
1192
1192
  --underlineNav-borderColor-hover: var(--borderColor-neutral-muted);
1193
1193
  --button-danger-borderColor-active: var(--button-danger-borderColor-hover);
1194
1194
  --button-outline-borderColor-hover: var(--button-default-borderColor-hover);
@@ -2310,11 +2310,11 @@
2310
2310
  --reactionButton-selected-fgColor-rest: var(--fgColor-link);
2311
2311
  --selectMenu-borderColor: var(--borderColor-default);
2312
2312
  --selection-bgColor: #1f6febb3; /** Background color for text selection highlights */
2313
- --shadow-floating-legacy: 0px 6px 12px -3px #01040966, 0px 6px 18px 0px #01040966;
2314
- --shadow-inset: inset 0px 1px 0px 0px #0104093d;
2315
- --shadow-resting-medium: 0px 1px 1px 0px #01040966, 0px 3px 6px 0px #010409cc;
2316
- --shadow-resting-small: 0px 1px 1px 0px #01040999, 0px 1px 3px 0px #01040999;
2317
- --shadow-resting-xsmall: 0px 1px 1px 0px #010409cc;
2313
+ --shadow-floating-legacy: 0px 6px 12px -3px #01040966, 0px 6px 18px 0px #01040966; /** Legacy floating shadow for backward compatibility */
2314
+ --shadow-inset: inset 0px 1px 0px 0px #0104093d; /** Inset shadow for recessed elements */
2315
+ --shadow-resting-medium: 0px 1px 1px 0px #01040966, 0px 3px 6px 0px #010409cc; /** Medium resting shadow for cards and elevated surfaces */
2316
+ --shadow-resting-small: 0px 1px 1px 0px #01040999, 0px 1px 3px 0px #01040999; /** Small resting shadow for buttons and interactive elements */
2317
+ --shadow-resting-xsmall: 0px 1px 1px 0px #010409cc; /** Extra small resting shadow for minimal elevation */
2318
2318
  --tooltip-bgColor: var(--bgColor-emphasis);
2319
2319
  --treeViewItem-leadingVisual-iconColor-rest: var(--fgColor-muted);
2320
2320
  --underlineNav-iconColor-rest: var(--fgColor-muted);
@@ -2382,9 +2382,9 @@
2382
2382
  --buttonKeybindingHint-danger-borderColor-rest: var(--buttonKeybindingHint-default-borderColor-rest);
2383
2383
  --buttonKeybindingHint-danger-fgColor-disabled: var(--buttonKeybindingHint-default-fgColor-disabled);
2384
2384
  --shadow-floating-large: 0px 0px 0px 1px #3d444d, 0px 24px 48px 0px #010409; /** Large floating shadow for modals and dialogs */
2385
- --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;
2385
+ --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; /** Medium floating shadow for popovers and action menus */
2386
2386
  --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 */
2387
- --shadow-floating-xlarge: 0px 0px 0px 1px #3d444d, 0px 32px 64px 0px #010409;
2387
+ --shadow-floating-xlarge: 0px 0px 0px 1px #3d444d, 0px 32px 64px 0px #010409; /** Extra large floating shadow for full-screen overlays and sheets */
2388
2388
  --underlineNav-borderColor-hover: var(--borderColor-neutral-muted);
2389
2389
  --button-danger-borderColor-active: var(--button-danger-borderColor-hover);
2390
2390
  --button-outline-borderColor-hover: var(--button-default-borderColor-hover);
package/dist/internalCss/dark-dimmed-high-contrast.css CHANGED
@@ -1122,11 +1122,11 @@
1122
1122
  --progressBar-bgColor-success: var(--bgColor-success-emphasis);
1123
1123
  --selectMenu-borderColor: var(--borderColor-default);
1124
1124
  --selection-bgColor: #1b4b91b3; /** Background color for text selection highlights */
1125
- --shadow-floating-legacy: 0px 6px 12px -3px #01040966, 0px 6px 18px 0px #01040966;
1126
- --shadow-inset: inset 0px 1px 0px 0px #0104093d;
1127
- --shadow-resting-medium: 0px 1px 1px 0px #01040966, 0px 3px 6px 0px #010409cc;
1128
- --shadow-resting-small: 0px 1px 1px 0px #01040999, 0px 1px 3px 0px #01040999;
1129
- --shadow-resting-xsmall: 0px 1px 1px 0px #010409cc;
1125
+ --shadow-floating-legacy: 0px 6px 12px -3px #01040966, 0px 6px 18px 0px #01040966; /** Legacy floating shadow for backward compatibility */
1126
+ --shadow-inset: inset 0px 1px 0px 0px #0104093d; /** Inset shadow for recessed elements */
1127
+ --shadow-resting-medium: 0px 1px 1px 0px #01040966, 0px 3px 6px 0px #010409cc; /** Medium resting shadow for cards and elevated surfaces */
1128
+ --shadow-resting-small: 0px 1px 1px 0px #01040999, 0px 1px 3px 0px #01040999; /** Small resting shadow for buttons and interactive elements */
1129
+ --shadow-resting-xsmall: 0px 1px 1px 0px #010409cc; /** Extra small resting shadow for minimal elevation */
1130
1130
  --topicTag-borderColor: var(--borderColor-accent-emphasis);
1131
1131
  --treeViewItem-leadingVisual-iconColor-rest: var(--fgColor-muted);
1132
1132
  --underlineNav-iconColor-rest: var(--fgColor-muted);
@@ -1174,9 +1174,9 @@
1174
1174
  --progressBar-track-bgColor: var(--bgColor-inverse);
1175
1175
  --reactionButton-selected-fgColor-rest: var(--fgColor-link);
1176
1176
  --shadow-floating-large: 0px 0px 0px 1px #b7bdc8, 0px 24px 48px 0px #010409; /** Large floating shadow for modals and dialogs */
1177
- --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;
1177
+ --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; /** Medium floating shadow for popovers and action menus */
1178
1178
  --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 */
1179
- --shadow-floating-xlarge: 0px 0px 0px 1px #b7bdc8, 0px 32px 64px 0px #010409;
1179
+ --shadow-floating-xlarge: 0px 0px 0px 1px #b7bdc8, 0px 32px 64px 0px #010409; /** Extra large floating shadow for full-screen overlays and sheets */
1180
1180
  --tooltip-bgColor: var(--bgColor-inverse);
1181
1181
  --tooltip-fgColor: var(--fgColor-onInverse);
1182
1182
  --border-neutral-emphasis: 0.0625rem solid #b7bdc8;
@@ -2318,11 +2318,11 @@
2318
2318
  --progressBar-bgColor-success: var(--bgColor-success-emphasis);
2319
2319
  --selectMenu-borderColor: var(--borderColor-default);
2320
2320
  --selection-bgColor: #1b4b91b3; /** Background color for text selection highlights */
2321
- --shadow-floating-legacy: 0px 6px 12px -3px #01040966, 0px 6px 18px 0px #01040966;
2322
- --shadow-inset: inset 0px 1px 0px 0px #0104093d;
2323
- --shadow-resting-medium: 0px 1px 1px 0px #01040966, 0px 3px 6px 0px #010409cc;
2324
- --shadow-resting-small: 0px 1px 1px 0px #01040999, 0px 1px 3px 0px #01040999;
2325
- --shadow-resting-xsmall: 0px 1px 1px 0px #010409cc;
2321
+ --shadow-floating-legacy: 0px 6px 12px -3px #01040966, 0px 6px 18px 0px #01040966; /** Legacy floating shadow for backward compatibility */
2322
+ --shadow-inset: inset 0px 1px 0px 0px #0104093d; /** Inset shadow for recessed elements */
2323
+ --shadow-resting-medium: 0px 1px 1px 0px #01040966, 0px 3px 6px 0px #010409cc; /** Medium resting shadow for cards and elevated surfaces */
2324
+ --shadow-resting-small: 0px 1px 1px 0px #01040999, 0px 1px 3px 0px #01040999; /** Small resting shadow for buttons and interactive elements */
2325
+ --shadow-resting-xsmall: 0px 1px 1px 0px #010409cc; /** Extra small resting shadow for minimal elevation */
2326
2326
  --topicTag-borderColor: var(--borderColor-accent-emphasis);
2327
2327
  --treeViewItem-leadingVisual-iconColor-rest: var(--fgColor-muted);
2328
2328
  --underlineNav-iconColor-rest: var(--fgColor-muted);
@@ -2370,9 +2370,9 @@
2370
2370
  --progressBar-track-bgColor: var(--bgColor-inverse);
2371
2371
  --reactionButton-selected-fgColor-rest: var(--fgColor-link);
2372
2372
  --shadow-floating-large: 0px 0px 0px 1px #b7bdc8, 0px 24px 48px 0px #010409; /** Large floating shadow for modals and dialogs */
2373
- --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;
2373
+ --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; /** Medium floating shadow for popovers and action menus */
2374
2374
  --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 */
2375
- --shadow-floating-xlarge: 0px 0px 0px 1px #b7bdc8, 0px 32px 64px 0px #010409;
2375
+ --shadow-floating-xlarge: 0px 0px 0px 1px #b7bdc8, 0px 32px 64px 0px #010409; /** Extra large floating shadow for full-screen overlays and sheets */
2376
2376
  --tooltip-bgColor: var(--bgColor-inverse);
2377
2377
  --tooltip-fgColor: var(--fgColor-onInverse);
2378
2378
  --border-neutral-emphasis: 0.0625rem solid #b7bdc8;
package/dist/internalCss/dark-dimmed.css CHANGED
@@ -1141,14 +1141,14 @@
1141
1141
  --selectMenu-borderColor: var(--borderColor-default);
1142
1142
  --selection-bgColor: #316dcab3; /** Background color for text selection highlights */
1143
1143
  --shadow-floating-large: 0px 0px 0px 1px #3d444d, 0px 24px 48px 0px #010409; /** Large floating shadow for modals and dialogs */
1144
- --shadow-floating-legacy: 0px 6px 12px -3px #01040966, 0px 6px 18px 0px #01040966;
1145
- --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;
1144
+ --shadow-floating-legacy: 0px 6px 12px -3px #01040966, 0px 6px 18px 0px #01040966; /** Legacy floating shadow for backward compatibility */
1145
+ --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; /** Medium floating shadow for popovers and action menus */
1146
1146
  --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 */
1147
- --shadow-floating-xlarge: 0px 0px 0px 1px #3d444d, 0px 32px 64px 0px #010409;
1148
- --shadow-inset: inset 0px 1px 0px 0px #0104093d;
1149
- --shadow-resting-medium: 0px 1px 1px 0px #01040966, 0px 3px 6px 0px #010409cc;
1150
- --shadow-resting-small: 0px 1px 1px 0px #01040999, 0px 1px 3px 0px #01040999;
1151
- --shadow-resting-xsmall: 0px 1px 1px 0px #010409cc;
1147
+ --shadow-floating-xlarge: 0px 0px 0px 1px #3d444d, 0px 32px 64px 0px #010409; /** Extra large floating shadow for full-screen overlays and sheets */
1148
+ --shadow-inset: inset 0px 1px 0px 0px #0104093d; /** Inset shadow for recessed elements */
1149
+ --shadow-resting-medium: 0px 1px 1px 0px #01040966, 0px 3px 6px 0px #010409cc; /** Medium resting shadow for cards and elevated surfaces */
1150
+ --shadow-resting-small: 0px 1px 1px 0px #01040999, 0px 1px 3px 0px #01040999; /** Small resting shadow for buttons and interactive elements */
1151
+ --shadow-resting-xsmall: 0px 1px 1px 0px #010409cc; /** Extra small resting shadow for minimal elevation */
1152
1152
  --tooltip-bgColor: var(--bgColor-emphasis);
1153
1153
  --tooltip-fgColor: var(--fgColor-onEmphasis);
1154
1154
  --treeViewItem-leadingVisual-iconColor-rest: var(--fgColor-muted);
@@ -2337,14 +2337,14 @@
2337
2337
  --selectMenu-borderColor: var(--borderColor-default);
2338
2338
  --selection-bgColor: #316dcab3; /** Background color for text selection highlights */
2339
2339
  --shadow-floating-large: 0px 0px 0px 1px #3d444d, 0px 24px 48px 0px #010409; /** Large floating shadow for modals and dialogs */
2340
- --shadow-floating-legacy: 0px 6px 12px -3px #01040966, 0px 6px 18px 0px #01040966;
2341
- --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;
2340
+ --shadow-floating-legacy: 0px 6px 12px -3px #01040966, 0px 6px 18px 0px #01040966; /** Legacy floating shadow for backward compatibility */
2341
+ --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; /** Medium floating shadow for popovers and action menus */
2342
2342
  --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 */
2343
- --shadow-floating-xlarge: 0px 0px 0px 1px #3d444d, 0px 32px 64px 0px #010409;
2344
- --shadow-inset: inset 0px 1px 0px 0px #0104093d;
2345
- --shadow-resting-medium: 0px 1px 1px 0px #01040966, 0px 3px 6px 0px #010409cc;
2346
- --shadow-resting-small: 0px 1px 1px 0px #01040999, 0px 1px 3px 0px #01040999;
2347
- --shadow-resting-xsmall: 0px 1px 1px 0px #010409cc;
2343
+ --shadow-floating-xlarge: 0px 0px 0px 1px #3d444d, 0px 32px 64px 0px #010409; /** Extra large floating shadow for full-screen overlays and sheets */
2344
+ --shadow-inset: inset 0px 1px 0px 0px #0104093d; /** Inset shadow for recessed elements */
2345
+ --shadow-resting-medium: 0px 1px 1px 0px #01040966, 0px 3px 6px 0px #010409cc; /** Medium resting shadow for cards and elevated surfaces */
2346
+ --shadow-resting-small: 0px 1px 1px 0px #01040999, 0px 1px 3px 0px #01040999; /** Small resting shadow for buttons and interactive elements */
2347
+ --shadow-resting-xsmall: 0px 1px 1px 0px #010409cc; /** Extra small resting shadow for minimal elevation */
2348
2348
  --tooltip-bgColor: var(--bgColor-emphasis);
2349
2349
  --tooltip-fgColor: var(--fgColor-onEmphasis);
2350
2350
  --treeViewItem-leadingVisual-iconColor-rest: var(--fgColor-muted);
package/dist/internalCss/dark-high-contrast.css CHANGED
@@ -1091,11 +1091,11 @@
1091
1091
  --reactionButton-selected-fgColor-rest: var(--fgColor-link);
1092
1092
  --selectMenu-borderColor: var(--borderColor-default);
1093
1093
  --selection-bgColor: #194fb1b3; /** Background color for text selection highlights */
1094
- --shadow-floating-legacy: 0px 6px 12px -3px #01040966, 0px 6px 18px 0px #01040966;
1095
- --shadow-inset: inset 0px 1px 0px 0px #0104093d;
1096
- --shadow-resting-medium: 0px 1px 1px 0px #01040966, 0px 3px 6px 0px #010409cc;
1097
- --shadow-resting-small: 0px 1px 1px 0px #01040999, 0px 1px 3px 0px #01040999;
1098
- --shadow-resting-xsmall: 0px 1px 1px 0px #010409cc;
1094
+ --shadow-floating-legacy: 0px 6px 12px -3px #01040966, 0px 6px 18px 0px #01040966; /** Legacy floating shadow for backward compatibility */
1095
+ --shadow-inset: inset 0px 1px 0px 0px #0104093d; /** Inset shadow for recessed elements */
1096
+ --shadow-resting-medium: 0px 1px 1px 0px #01040966, 0px 3px 6px 0px #010409cc; /** Medium resting shadow for cards and elevated surfaces */
1097
+ --shadow-resting-small: 0px 1px 1px 0px #01040999, 0px 1px 3px 0px #01040999; /** Small resting shadow for buttons and interactive elements */
1098
+ --shadow-resting-xsmall: 0px 1px 1px 0px #010409cc; /** Extra small resting shadow for minimal elevation */
1099
1099
  --topicTag-borderColor: var(--borderColor-accent-emphasis);
1100
1100
  --treeViewItem-leadingVisual-iconColor-rest: var(--fgColor-muted);
1101
1101
  --underlineNav-iconColor-rest: var(--fgColor-muted);
@@ -1170,9 +1170,9 @@
1170
1170
  --page-header-bgColor: var(--bgColor-default);
1171
1171
  --progressBar-track-bgColor: var(--bgColor-inverse);
1172
1172
  --shadow-floating-large: 0px 0px 0px 1px #b7bdc8, 0px 24px 48px 0px #010409; /** Large floating shadow for modals and dialogs */
1173
- --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;
1173
+ --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; /** Medium floating shadow for popovers and action menus */
1174
1174
  --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 */
1175
- --shadow-floating-xlarge: 0px 0px 0px 1px #b7bdc8, 0px 32px 64px 0px #010409;
1175
+ --shadow-floating-xlarge: 0px 0px 0px 1px #b7bdc8, 0px 32px 64px 0px #010409; /** Extra large floating shadow for full-screen overlays and sheets */
1176
1176
  --tooltip-bgColor: var(--bgColor-inverse);
1177
1177
  --tooltip-fgColor: var(--fgColor-onInverse);
1178
1178
  --border-neutral-emphasis: 0.0625rem solid #b7bdc8;
@@ -2287,11 +2287,11 @@
2287
2287
  --reactionButton-selected-fgColor-rest: var(--fgColor-link);
2288
2288
  --selectMenu-borderColor: var(--borderColor-default);
2289
2289
  --selection-bgColor: #194fb1b3; /** Background color for text selection highlights */
2290
- --shadow-floating-legacy: 0px 6px 12px -3px #01040966, 0px 6px 18px 0px #01040966;
2291
- --shadow-inset: inset 0px 1px 0px 0px #0104093d;
2292
- --shadow-resting-medium: 0px 1px 1px 0px #01040966, 0px 3px 6px 0px #010409cc;
2293
- --shadow-resting-small: 0px 1px 1px 0px #01040999, 0px 1px 3px 0px #01040999;
2294
- --shadow-resting-xsmall: 0px 1px 1px 0px #010409cc;
2290
+ --shadow-floating-legacy: 0px 6px 12px -3px #01040966, 0px 6px 18px 0px #01040966; /** Legacy floating shadow for backward compatibility */
2291
+ --shadow-inset: inset 0px 1px 0px 0px #0104093d; /** Inset shadow for recessed elements */
2292
+ --shadow-resting-medium: 0px 1px 1px 0px #01040966, 0px 3px 6px 0px #010409cc; /** Medium resting shadow for cards and elevated surfaces */
2293
+ --shadow-resting-small: 0px 1px 1px 0px #01040999, 0px 1px 3px 0px #01040999; /** Small resting shadow for buttons and interactive elements */
2294
+ --shadow-resting-xsmall: 0px 1px 1px 0px #010409cc; /** Extra small resting shadow for minimal elevation */
2295
2295
  --topicTag-borderColor: var(--borderColor-accent-emphasis);
2296
2296
  --treeViewItem-leadingVisual-iconColor-rest: var(--fgColor-muted);
2297
2297
  --underlineNav-iconColor-rest: var(--fgColor-muted);
@@ -2366,9 +2366,9 @@
2366
2366
  --page-header-bgColor: var(--bgColor-default);
2367
2367
  --progressBar-track-bgColor: var(--bgColor-inverse);
2368
2368
  --shadow-floating-large: 0px 0px 0px 1px #b7bdc8, 0px 24px 48px 0px #010409; /** Large floating shadow for modals and dialogs */
2369
- --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;
2369
+ --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; /** Medium floating shadow for popovers and action menus */
2370
2370
  --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 */
2371
- --shadow-floating-xlarge: 0px 0px 0px 1px #b7bdc8, 0px 32px 64px 0px #010409;
2371
+ --shadow-floating-xlarge: 0px 0px 0px 1px #b7bdc8, 0px 32px 64px 0px #010409; /** Extra large floating shadow for full-screen overlays and sheets */
2372
2372
  --tooltip-bgColor: var(--bgColor-inverse);
2373
2373
  --tooltip-fgColor: var(--fgColor-onInverse);
2374
2374
  --border-neutral-emphasis: 0.0625rem solid #b7bdc8;
package/dist/internalCss/dark-tritanopia-high-contrast.css CHANGED
@@ -1091,11 +1091,11 @@
1091
1091
  --reactionButton-selected-fgColor-rest: var(--fgColor-link);
1092
1092
  --selectMenu-borderColor: var(--borderColor-default);
1093
1093
  --selection-bgColor: #194fb1b3; /** Background color for text selection highlights */
1094
- --shadow-floating-legacy: 0px 6px 12px -3px #01040966, 0px 6px 18px 0px #01040966;
1095
- --shadow-inset: inset 0px 1px 0px 0px #0104093d;
1096
- --shadow-resting-medium: 0px 1px 1px 0px #01040966, 0px 3px 6px 0px #010409cc;
1097
- --shadow-resting-small: 0px 1px 1px 0px #01040999, 0px 1px 3px 0px #01040999;
1098
- --shadow-resting-xsmall: 0px 1px 1px 0px #010409cc;
1094
+ --shadow-floating-legacy: 0px 6px 12px -3px #01040966, 0px 6px 18px 0px #01040966; /** Legacy floating shadow for backward compatibility */
1095
+ --shadow-inset: inset 0px 1px 0px 0px #0104093d; /** Inset shadow for recessed elements */
1096
+ --shadow-resting-medium: 0px 1px 1px 0px #01040966, 0px 3px 6px 0px #010409cc; /** Medium resting shadow for cards and elevated surfaces */
1097
+ --shadow-resting-small: 0px 1px 1px 0px #01040999, 0px 1px 3px 0px #01040999; /** Small resting shadow for buttons and interactive elements */
1098
+ --shadow-resting-xsmall: 0px 1px 1px 0px #010409cc; /** Extra small resting shadow for minimal elevation */
1099
1099
  --topicTag-borderColor: var(--borderColor-accent-emphasis);
1100
1100
  --treeViewItem-leadingVisual-iconColor-rest: var(--fgColor-muted);
1101
1101
  --underlineNav-iconColor-rest: var(--fgColor-muted);
@@ -1171,9 +1171,9 @@
1171
1171
  --page-header-bgColor: var(--bgColor-default);
1172
1172
  --progressBar-track-bgColor: var(--bgColor-inverse);
1173
1173
  --shadow-floating-large: 0px 0px 0px 1px #b7bdc8, 0px 24px 48px 0px #010409; /** Large floating shadow for modals and dialogs */
1174
- --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;
1174
+ --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; /** Medium floating shadow for popovers and action menus */
1175
1175
  --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 */
1176
- --shadow-floating-xlarge: 0px 0px 0px 1px #b7bdc8, 0px 32px 64px 0px #010409;
1176
+ --shadow-floating-xlarge: 0px 0px 0px 1px #b7bdc8, 0px 32px 64px 0px #010409; /** Extra large floating shadow for full-screen overlays and sheets */
1177
1177
  --tooltip-bgColor: var(--bgColor-inverse);
1178
1178
  --tooltip-fgColor: var(--fgColor-onInverse);
1179
1179
  --border-neutral-emphasis: 0.0625rem solid #b7bdc8;
@@ -2287,11 +2287,11 @@
2287
2287
  --reactionButton-selected-fgColor-rest: var(--fgColor-link);
2288
2288
  --selectMenu-borderColor: var(--borderColor-default);
2289
2289
  --selection-bgColor: #194fb1b3; /** Background color for text selection highlights */
2290
- --shadow-floating-legacy: 0px 6px 12px -3px #01040966, 0px 6px 18px 0px #01040966;
2291
- --shadow-inset: inset 0px 1px 0px 0px #0104093d;
2292
- --shadow-resting-medium: 0px 1px 1px 0px #01040966, 0px 3px 6px 0px #010409cc;
2293
- --shadow-resting-small: 0px 1px 1px 0px #01040999, 0px 1px 3px 0px #01040999;
2294
- --shadow-resting-xsmall: 0px 1px 1px 0px #010409cc;
2290
+ --shadow-floating-legacy: 0px 6px 12px -3px #01040966, 0px 6px 18px 0px #01040966; /** Legacy floating shadow for backward compatibility */
2291
+ --shadow-inset: inset 0px 1px 0px 0px #0104093d; /** Inset shadow for recessed elements */
2292
+ --shadow-resting-medium: 0px 1px 1px 0px #01040966, 0px 3px 6px 0px #010409cc; /** Medium resting shadow for cards and elevated surfaces */
2293
+ --shadow-resting-small: 0px 1px 1px 0px #01040999, 0px 1px 3px 0px #01040999; /** Small resting shadow for buttons and interactive elements */
2294
+ --shadow-resting-xsmall: 0px 1px 1px 0px #010409cc; /** Extra small resting shadow for minimal elevation */
2295
2295
  --topicTag-borderColor: var(--borderColor-accent-emphasis);
2296
2296
  --treeViewItem-leadingVisual-iconColor-rest: var(--fgColor-muted);
2297
2297
  --underlineNav-iconColor-rest: var(--fgColor-muted);
@@ -2367,9 +2367,9 @@
2367
2367
  --page-header-bgColor: var(--bgColor-default);
2368
2368
  --progressBar-track-bgColor: var(--bgColor-inverse);
2369
2369
  --shadow-floating-large: 0px 0px 0px 1px #b7bdc8, 0px 24px 48px 0px #010409; /** Large floating shadow for modals and dialogs */
2370
- --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;
2370
+ --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; /** Medium floating shadow for popovers and action menus */
2371
2371
  --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 */
2372
- --shadow-floating-xlarge: 0px 0px 0px 1px #b7bdc8, 0px 32px 64px 0px #010409;
2372
+ --shadow-floating-xlarge: 0px 0px 0px 1px #b7bdc8, 0px 32px 64px 0px #010409; /** Extra large floating shadow for full-screen overlays and sheets */
2373
2373
  --tooltip-bgColor: var(--bgColor-inverse);
2374
2374
  --tooltip-fgColor: var(--fgColor-onInverse);
2375
2375
  --border-neutral-emphasis: 0.0625rem solid #b7bdc8;
package/dist/internalCss/dark-tritanopia.css CHANGED
@@ -1116,11 +1116,11 @@
1116
1116
  --reactionButton-selected-fgColor-rest: var(--fgColor-link);
1117
1117
  --selectMenu-borderColor: var(--borderColor-default);
1118
1118
  --selection-bgColor: #1f6febb3; /** Background color for text selection highlights */
1119
- --shadow-floating-legacy: 0px 6px 12px -3px #01040966, 0px 6px 18px 0px #01040966;
1120
- --shadow-inset: inset 0px 1px 0px 0px #0104093d;
1121
- --shadow-resting-medium: 0px 1px 1px 0px #01040966, 0px 3px 6px 0px #010409cc;
1122
- --shadow-resting-small: 0px 1px 1px 0px #01040999, 0px 1px 3px 0px #01040999;
1123
- --shadow-resting-xsmall: 0px 1px 1px 0px #010409cc;
1119
+ --shadow-floating-legacy: 0px 6px 12px -3px #01040966, 0px 6px 18px 0px #01040966; /** Legacy floating shadow for backward compatibility */
1120
+ --shadow-inset: inset 0px 1px 0px 0px #0104093d; /** Inset shadow for recessed elements */
1121
+ --shadow-resting-medium: 0px 1px 1px 0px #01040966, 0px 3px 6px 0px #010409cc; /** Medium resting shadow for cards and elevated surfaces */
1122
+ --shadow-resting-small: 0px 1px 1px 0px #01040999, 0px 1px 3px 0px #01040999; /** Small resting shadow for buttons and interactive elements */
1123
+ --shadow-resting-xsmall: 0px 1px 1px 0px #010409cc; /** Extra small resting shadow for minimal elevation */
1124
1124
  --tooltip-bgColor: var(--bgColor-emphasis);
1125
1125
  --treeViewItem-leadingVisual-iconColor-rest: var(--fgColor-muted);
1126
1126
  --underlineNav-iconColor-rest: var(--fgColor-muted);
@@ -1186,9 +1186,9 @@
1186
1186
  --buttonKeybindingHint-danger-borderColor-rest: var(--buttonKeybindingHint-default-borderColor-rest);
1187
1187
  --buttonKeybindingHint-danger-fgColor-disabled: var(--buttonKeybindingHint-default-fgColor-disabled);
1188
1188
  --shadow-floating-large: 0px 0px 0px 1px #3d444d, 0px 24px 48px 0px #010409; /** Large floating shadow for modals and dialogs */
1189
- --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;
1189
+ --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; /** Medium floating shadow for popovers and action menus */
1190
1190
  --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 */
1191
- --shadow-floating-xlarge: 0px 0px 0px 1px #3d444d, 0px 32px 64px 0px #010409;
1191
+ --shadow-floating-xlarge: 0px 0px 0px 1px #3d444d, 0px 32px 64px 0px #010409; /** Extra large floating shadow for full-screen overlays and sheets */
1192
1192
  --underlineNav-borderColor-hover: var(--borderColor-neutral-muted);
1193
1193
  --button-danger-borderColor-active: var(--button-danger-borderColor-hover);
1194
1194
  --button-outline-borderColor-hover: var(--button-default-borderColor-hover);
@@ -2312,11 +2312,11 @@
2312
2312
  --reactionButton-selected-fgColor-rest: var(--fgColor-link);
2313
2313
  --selectMenu-borderColor: var(--borderColor-default);
2314
2314
  --selection-bgColor: #1f6febb3; /** Background color for text selection highlights */
2315
- --shadow-floating-legacy: 0px 6px 12px -3px #01040966, 0px 6px 18px 0px #01040966;
2316
- --shadow-inset: inset 0px 1px 0px 0px #0104093d;
2317
- --shadow-resting-medium: 0px 1px 1px 0px #01040966, 0px 3px 6px 0px #010409cc;
2318
- --shadow-resting-small: 0px 1px 1px 0px #01040999, 0px 1px 3px 0px #01040999;
2319
- --shadow-resting-xsmall: 0px 1px 1px 0px #010409cc;
2315
+ --shadow-floating-legacy: 0px 6px 12px -3px #01040966, 0px 6px 18px 0px #01040966; /** Legacy floating shadow for backward compatibility */
2316
+ --shadow-inset: inset 0px 1px 0px 0px #0104093d; /** Inset shadow for recessed elements */
2317
+ --shadow-resting-medium: 0px 1px 1px 0px #01040966, 0px 3px 6px 0px #010409cc; /** Medium resting shadow for cards and elevated surfaces */
2318
+ --shadow-resting-small: 0px 1px 1px 0px #01040999, 0px 1px 3px 0px #01040999; /** Small resting shadow for buttons and interactive elements */
2319
+ --shadow-resting-xsmall: 0px 1px 1px 0px #010409cc; /** Extra small resting shadow for minimal elevation */
2320
2320
  --tooltip-bgColor: var(--bgColor-emphasis);
2321
2321
  --treeViewItem-leadingVisual-iconColor-rest: var(--fgColor-muted);
2322
2322
  --underlineNav-iconColor-rest: var(--fgColor-muted);
@@ -2382,9 +2382,9 @@
2382
2382
  --buttonKeybindingHint-danger-borderColor-rest: var(--buttonKeybindingHint-default-borderColor-rest);
2383
2383
  --buttonKeybindingHint-danger-fgColor-disabled: var(--buttonKeybindingHint-default-fgColor-disabled);
2384
2384
  --shadow-floating-large: 0px 0px 0px 1px #3d444d, 0px 24px 48px 0px #010409; /** Large floating shadow for modals and dialogs */
2385
- --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;
2385
+ --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; /** Medium floating shadow for popovers and action menus */
2386
2386
  --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 */
2387
- --shadow-floating-xlarge: 0px 0px 0px 1px #3d444d, 0px 32px 64px 0px #010409;
2387
+ --shadow-floating-xlarge: 0px 0px 0px 1px #3d444d, 0px 32px 64px 0px #010409; /** Extra large floating shadow for full-screen overlays and sheets */
2388
2388
  --underlineNav-borderColor-hover: var(--borderColor-neutral-muted);
2389
2389
  --button-danger-borderColor-active: var(--button-danger-borderColor-hover);
2390
2390
  --button-outline-borderColor-hover: var(--button-default-borderColor-hover);
package/dist/internalCss/dark.css CHANGED
@@ -1114,11 +1114,11 @@
1114
1114
  --reactionButton-selected-fgColor-rest: var(--fgColor-link);
1115
1115
  --selectMenu-borderColor: var(--borderColor-default);
1116
1116
  --selection-bgColor: #1f6febb3; /** Background color for text selection highlights */
1117
- --shadow-floating-legacy: 0px 6px 12px -3px #01040966, 0px 6px 18px 0px #01040966;
1118
- --shadow-inset: inset 0px 1px 0px 0px #0104093d;
1119
- --shadow-resting-medium: 0px 1px 1px 0px #01040966, 0px 3px 6px 0px #010409cc;
1120
- --shadow-resting-small: 0px 1px 1px 0px #01040999, 0px 1px 3px 0px #01040999;
1121
- --shadow-resting-xsmall: 0px 1px 1px 0px #010409cc;
1117
+ --shadow-floating-legacy: 0px 6px 12px -3px #01040966, 0px 6px 18px 0px #01040966; /** Legacy floating shadow for backward compatibility */
1118
+ --shadow-inset: inset 0px 1px 0px 0px #0104093d; /** Inset shadow for recessed elements */
1119
+ --shadow-resting-medium: 0px 1px 1px 0px #01040966, 0px 3px 6px 0px #010409cc; /** Medium resting shadow for cards and elevated surfaces */
1120
+ --shadow-resting-small: 0px 1px 1px 0px #01040999, 0px 1px 3px 0px #01040999; /** Small resting shadow for buttons and interactive elements */
1121
+ --shadow-resting-xsmall: 0px 1px 1px 0px #010409cc; /** Extra small resting shadow for minimal elevation */
1122
1122
  --tooltip-bgColor: var(--bgColor-emphasis);
1123
1123
  --treeViewItem-leadingVisual-iconColor-rest: var(--fgColor-muted);
1124
1124
  --underlineNav-iconColor-rest: var(--fgColor-muted);
@@ -1186,9 +1186,9 @@
1186
1186
  --buttonKeybindingHint-danger-borderColor-rest: var(--buttonKeybindingHint-default-borderColor-rest);
1187
1187
  --buttonKeybindingHint-danger-fgColor-disabled: var(--buttonKeybindingHint-default-fgColor-disabled);
1188
1188
  --shadow-floating-large: 0px 0px 0px 1px #3d444d, 0px 24px 48px 0px #010409; /** Large floating shadow for modals and dialogs */
1189
- --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;
1189
+ --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; /** Medium floating shadow for popovers and action menus */
1190
1190
  --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 */
1191
- --shadow-floating-xlarge: 0px 0px 0px 1px #3d444d, 0px 32px 64px 0px #010409;
1191
+ --shadow-floating-xlarge: 0px 0px 0px 1px #3d444d, 0px 32px 64px 0px #010409; /** Extra large floating shadow for full-screen overlays and sheets */
1192
1192
  --underlineNav-borderColor-hover: var(--borderColor-neutral-muted);
1193
1193
  --button-danger-borderColor-active: var(--button-danger-borderColor-hover);
1194
1194
  --button-outline-borderColor-hover: var(--button-default-borderColor-hover);
@@ -2310,11 +2310,11 @@
2310
2310
  --reactionButton-selected-fgColor-rest: var(--fgColor-link);
2311
2311
  --selectMenu-borderColor: var(--borderColor-default);
2312
2312
  --selection-bgColor: #1f6febb3; /** Background color for text selection highlights */
2313
- --shadow-floating-legacy: 0px 6px 12px -3px #01040966, 0px 6px 18px 0px #01040966;
2314
- --shadow-inset: inset 0px 1px 0px 0px #0104093d;
2315
- --shadow-resting-medium: 0px 1px 1px 0px #01040966, 0px 3px 6px 0px #010409cc;
2316
- --shadow-resting-small: 0px 1px 1px 0px #01040999, 0px 1px 3px 0px #01040999;
2317
- --shadow-resting-xsmall: 0px 1px 1px 0px #010409cc;
2313
+ --shadow-floating-legacy: 0px 6px 12px -3px #01040966, 0px 6px 18px 0px #01040966; /** Legacy floating shadow for backward compatibility */
2314
+ --shadow-inset: inset 0px 1px 0px 0px #0104093d; /** Inset shadow for recessed elements */
2315
+ --shadow-resting-medium: 0px 1px 1px 0px #01040966, 0px 3px 6px 0px #010409cc; /** Medium resting shadow for cards and elevated surfaces */
2316
+ --shadow-resting-small: 0px 1px 1px 0px #01040999, 0px 1px 3px 0px #01040999; /** Small resting shadow for buttons and interactive elements */
2317
+ --shadow-resting-xsmall: 0px 1px 1px 0px #010409cc; /** Extra small resting shadow for minimal elevation */
2318
2318
  --tooltip-bgColor: var(--bgColor-emphasis);
2319
2319
  --treeViewItem-leadingVisual-iconColor-rest: var(--fgColor-muted);
2320
2320
  --underlineNav-iconColor-rest: var(--fgColor-muted);
@@ -2382,9 +2382,9 @@
2382
2382
  --buttonKeybindingHint-danger-borderColor-rest: var(--buttonKeybindingHint-default-borderColor-rest);
2383
2383
  --buttonKeybindingHint-danger-fgColor-disabled: var(--buttonKeybindingHint-default-fgColor-disabled);
2384
2384
  --shadow-floating-large: 0px 0px 0px 1px #3d444d, 0px 24px 48px 0px #010409; /** Large floating shadow for modals and dialogs */
2385
- --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;
2385
+ --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; /** Medium floating shadow for popovers and action menus */
2386
2386
  --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 */
2387
- --shadow-floating-xlarge: 0px 0px 0px 1px #3d444d, 0px 32px 64px 0px #010409;
2387
+ --shadow-floating-xlarge: 0px 0px 0px 1px #3d444d, 0px 32px 64px 0px #010409; /** Extra large floating shadow for full-screen overlays and sheets */
2388
2388
  --underlineNav-borderColor-hover: var(--borderColor-neutral-muted);
2389
2389
  --button-danger-borderColor-active: var(--button-danger-borderColor-hover);
2390
2390
  --button-outline-borderColor-hover: var(--button-default-borderColor-hover);
package/dist/internalCss/light-colorblind-high-contrast.css CHANGED
@@ -918,8 +918,8 @@
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: 0px 6px 12px -3px #25292e0a, 0px 6px 18px 0px #25292e1f; /** Legacy floating shadow for backward compatibility */
922
+ --shadow-resting-medium: 0px 1px 1px 0px #25292e1a, 0px 3px 6px 0px #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);
@@ -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 0px 1px 0px 0px #0104090a; /** Inset shadow for recessed elements */
1106
+ --shadow-resting-small: 0px 1px 1px 0px #0104090a, 0px 1px 2px 0px #01040908; /** Small resting shadow for buttons and interactive elements */
1107
+ --shadow-resting-xsmall: 0px 1px 1px 0px #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);
@@ -1182,9 +1182,9 @@
1182
1182
  --progressBar-track-bgColor: var(--bgColor-default);
1183
1183
  --reactionButton-selected-fgColor-rest: var(--fgColor-link);
1184
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;
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; /** Medium floating shadow for popovers and action menus */
1186
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;
1187
+ --shadow-floating-xlarge: 0px 0px 0px 1px #454c54, 0px 56px 112px 0px #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;
@@ -2114,8 +2114,8 @@
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: 0px 6px 12px -3px #25292e0a, 0px 6px 18px 0px #25292e1f; /** Legacy floating shadow for backward compatibility */
2118
+ --shadow-resting-medium: 0px 1px 1px 0px #25292e1a, 0px 3px 6px 0px #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);
@@ -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 0px 1px 0px 0px #0104090a; /** Inset shadow for recessed elements */
2302
+ --shadow-resting-small: 0px 1px 1px 0px #0104090a, 0px 1px 2px 0px #01040908; /** Small resting shadow for buttons and interactive elements */
2303
+ --shadow-resting-xsmall: 0px 1px 1px 0px #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);
@@ -2378,9 +2378,9 @@
2378
2378
  --progressBar-track-bgColor: var(--bgColor-default);
2379
2379
  --reactionButton-selected-fgColor-rest: var(--fgColor-link);
2380
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;
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; /** Medium floating shadow for popovers and action menus */
2382
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;
2383
+ --shadow-floating-xlarge: 0px 0px 0px 1px #454c54, 0px 56px 112px 0px #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;