@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/dark-dimmed.css CHANGED
@@ -311,7 +311,7 @@
311
311
  --outline-focus-offset: -0.125rem; /** Focus outline offset (-2px). Negative value creates an inset outline for keyboard focus indicators, ensuring the focus ring stays within the element bounds */
312
312
  --outline-focus-width: 0.125rem; /** Focus outline width (2px). Standard width for keyboard focus indicators to meet WCAG 2.4.7 accessibility requirements */
313
313
  --reactionButton-selected-bgColor-hover: #4285e55c;
314
- --avatar-shadow: 0px 0px 0px 2px #0d1117;
314
+ --avatar-shadow: 0 0 0 2px #0d1117;
315
315
  --avatarStack-fade-bgColor-default: var(--base-color-neutral-7);
316
316
  --avatarStack-fade-bgColor-muted: var(--base-color-neutral-5);
317
317
  --base-color-inset: var(--base-color-black);
@@ -366,9 +366,9 @@
366
366
  --button-danger-bgColor-hover: var(--base-color-red-6);
367
367
  --button-danger-borderColor-rest: var(--control-borderColor-rest);
368
368
  --button-danger-iconColor-rest: var(--button-danger-fgColor-rest);
369
- --button-danger-shadow-selected: 0px 0px 0px 0px #000000;
369
+ --button-danger-shadow-selected: 0 0 0 0 #00000000;
370
370
  --button-default-borderColor-rest: var(--control-borderColor-rest);
371
- --button-default-shadow-resting: 0px 0px 0px 0px #000000;
371
+ --button-default-shadow-resting: 0 0 0 0 #00000000;
372
372
  --button-inactive-bgColor: var(--base-color-neutral-5);
373
373
  --button-inactive-fgColor: var(--base-color-neutral-8);
374
374
  --button-invisible-bgColor-disabled: var(--base-color-transparent);
@@ -379,8 +379,8 @@
379
379
  --button-outline-bgColor-rest: var(--base-color-neutral-12);
380
380
  --button-outline-fgColor-hover: var(--base-color-blue-3);
381
381
  --button-outline-fgColor-rest: var(--base-color-blue-4);
382
- --button-outline-shadow-selected: 0px 0px 0px 0px #000000;
383
- --button-primary-shadow-selected: 0px 0px 0px 0px #000000;
382
+ --button-outline-shadow-selected: 0 0 0 0 #00000000;
383
+ --button-primary-shadow-selected: 0 0 0 0 #00000000;
384
384
  --button-star-iconColor: var(--base-color-yellow-2);
385
385
  --buttonCounter-danger-bgColor-rest: #5d0f1233;
386
386
  --buttonCounter-default-bgColor-rest: var(--base-color-neutral-6);
@@ -1140,15 +1140,15 @@
1140
1140
  --reactionButton-selected-fgColor-rest: var(--fgColor-link);
1141
1141
  --selectMenu-borderColor: var(--borderColor-default);
1142
1142
  --selection-bgColor: #316dcab3; /** Background color for text selection highlights */
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;
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;
1143
+ --shadow-floating-large: 0 0 0 1px #3d444d, 0 24px 48px 0 #010409; /** Large floating shadow for modals and dialogs */
1144
+ --shadow-floating-legacy: 0 6px 12px -3px #01040966, 0 6px 18px 0 #01040966; /** Legacy floating shadow for backward compatibility */
1145
+ --shadow-floating-medium: 0 0 0 1px #3d444d, 0 8px 16px -4px #01040966, 0 4px 32px -4px #01040966, 0 24px 48px -12px #01040966, 0 48px 96px -24px #01040966; /** Medium floating shadow for popovers and action menus */
1146
+ --shadow-floating-small: 0 0 0 1px #3d444d, 0 6px 12px -3px #01040966, 0 6px 18px 0 #01040966; /** Small floating shadow for dropdowns, tooltips, and small overlays */
1147
+ --shadow-floating-xlarge: 0 0 0 1px #3d444d, 0 32px 64px 0 #010409; /** Extra large floating shadow for full-screen overlays and sheets */
1148
+ --shadow-inset: inset 0 1px 0 0 #0104093d; /** Inset shadow for recessed elements */
1149
+ --shadow-resting-medium: 0 1px 1px 0 #01040966, 0 3px 6px 0 #010409cc; /** Medium resting shadow for cards and elevated surfaces */
1150
+ --shadow-resting-small: 0 1px 1px 0 #01040999, 0 1px 3px 0 #01040999; /** Small resting shadow for buttons and interactive elements */
1151
+ --shadow-resting-xsmall: 0 1px 1px 0 #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);
@@ -1507,7 +1507,7 @@
1507
1507
  --outline-focus-offset: -0.125rem; /** Focus outline offset (-2px). Negative value creates an inset outline for keyboard focus indicators, ensuring the focus ring stays within the element bounds */
1508
1508
  --outline-focus-width: 0.125rem; /** Focus outline width (2px). Standard width for keyboard focus indicators to meet WCAG 2.4.7 accessibility requirements */
1509
1509
  --reactionButton-selected-bgColor-hover: #4285e55c;
1510
- --avatar-shadow: 0px 0px 0px 2px #0d1117;
1510
+ --avatar-shadow: 0 0 0 2px #0d1117;
1511
1511
  --avatarStack-fade-bgColor-default: var(--base-color-neutral-7);
1512
1512
  --avatarStack-fade-bgColor-muted: var(--base-color-neutral-5);
1513
1513
  --base-color-inset: var(--base-color-black);
@@ -1562,9 +1562,9 @@
1562
1562
  --button-danger-bgColor-hover: var(--base-color-red-6);
1563
1563
  --button-danger-borderColor-rest: var(--control-borderColor-rest);
1564
1564
  --button-danger-iconColor-rest: var(--button-danger-fgColor-rest);
1565
- --button-danger-shadow-selected: 0px 0px 0px 0px #000000;
1565
+ --button-danger-shadow-selected: 0 0 0 0 #00000000;
1566
1566
  --button-default-borderColor-rest: var(--control-borderColor-rest);
1567
- --button-default-shadow-resting: 0px 0px 0px 0px #000000;
1567
+ --button-default-shadow-resting: 0 0 0 0 #00000000;
1568
1568
  --button-inactive-bgColor: var(--base-color-neutral-5);
1569
1569
  --button-inactive-fgColor: var(--base-color-neutral-8);
1570
1570
  --button-invisible-bgColor-disabled: var(--base-color-transparent);
@@ -1575,8 +1575,8 @@
1575
1575
  --button-outline-bgColor-rest: var(--base-color-neutral-12);
1576
1576
  --button-outline-fgColor-hover: var(--base-color-blue-3);
1577
1577
  --button-outline-fgColor-rest: var(--base-color-blue-4);
1578
- --button-outline-shadow-selected: 0px 0px 0px 0px #000000;
1579
- --button-primary-shadow-selected: 0px 0px 0px 0px #000000;
1578
+ --button-outline-shadow-selected: 0 0 0 0 #00000000;
1579
+ --button-primary-shadow-selected: 0 0 0 0 #00000000;
1580
1580
  --button-star-iconColor: var(--base-color-yellow-2);
1581
1581
  --buttonCounter-danger-bgColor-rest: #5d0f1233;
1582
1582
  --buttonCounter-default-bgColor-rest: var(--base-color-neutral-6);
@@ -2336,15 +2336,15 @@
2336
2336
  --reactionButton-selected-fgColor-rest: var(--fgColor-link);
2337
2337
  --selectMenu-borderColor: var(--borderColor-default);
2338
2338
  --selection-bgColor: #316dcab3; /** Background color for text selection highlights */
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;
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;
2339
+ --shadow-floating-large: 0 0 0 1px #3d444d, 0 24px 48px 0 #010409; /** Large floating shadow for modals and dialogs */
2340
+ --shadow-floating-legacy: 0 6px 12px -3px #01040966, 0 6px 18px 0 #01040966; /** Legacy floating shadow for backward compatibility */
2341
+ --shadow-floating-medium: 0 0 0 1px #3d444d, 0 8px 16px -4px #01040966, 0 4px 32px -4px #01040966, 0 24px 48px -12px #01040966, 0 48px 96px -24px #01040966; /** Medium floating shadow for popovers and action menus */
2342
+ --shadow-floating-small: 0 0 0 1px #3d444d, 0 6px 12px -3px #01040966, 0 6px 18px 0 #01040966; /** Small floating shadow for dropdowns, tooltips, and small overlays */
2343
+ --shadow-floating-xlarge: 0 0 0 1px #3d444d, 0 32px 64px 0 #010409; /** Extra large floating shadow for full-screen overlays and sheets */
2344
+ --shadow-inset: inset 0 1px 0 0 #0104093d; /** Inset shadow for recessed elements */
2345
+ --shadow-resting-medium: 0 1px 1px 0 #01040966, 0 3px 6px 0 #010409cc; /** Medium resting shadow for cards and elevated surfaces */
2346
+ --shadow-resting-small: 0 1px 1px 0 #01040999, 0 1px 3px 0 #01040999; /** Small resting shadow for buttons and interactive elements */
2347
+ --shadow-resting-xsmall: 0 1px 1px 0 #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
@@ -305,7 +305,7 @@
305
305
  --outline-focus-offset: -0.125rem; /** Focus outline offset (-2px). Negative value creates an inset outline for keyboard focus indicators, ensuring the focus ring stays within the element bounds */
306
306
  --outline-focus-width: 0.125rem; /** Focus outline width (2px). Standard width for keyboard focus indicators to meet WCAG 2.4.7 accessibility requirements */
307
307
  --reactionButton-selected-bgColor-hover: #5dadff5c;
308
- --avatar-shadow: 0px 0px 0px 2px #0d1117;
308
+ --avatar-shadow: 0 0 0 2px #0d1117;
309
309
  --avatarStack-fade-bgColor-default: var(--base-color-neutral-7);
310
310
  --avatarStack-fade-bgColor-muted: var(--base-color-neutral-5);
311
311
  --base-color-inset: var(--base-color-black);
@@ -357,8 +357,8 @@
357
357
  --button-danger-borderColor-active: var(--base-color-red-2);
358
358
  --button-danger-borderColor-hover: var(--base-color-red-2);
359
359
  --button-danger-fgColor-rest: var(--base-color-red-2);
360
- --button-danger-shadow-selected: 0px 0px 0px 0px #000000;
361
- --button-default-shadow-resting: 0px 0px 0px 0px #000000;
360
+ --button-danger-shadow-selected: 0 0 0 0 #00000000;
361
+ --button-default-shadow-resting: 0 0 0 0 #00000000;
362
362
  --button-inactive-fgColor: var(--base-color-neutral-10);
363
363
  --button-invisible-bgColor-active: var(--base-color-neutral-3);
364
364
  --button-invisible-bgColor-disabled: var(--base-color-transparent);
@@ -371,10 +371,10 @@
371
371
  --button-outline-fgColor-disabled: #74b9ff80;
372
372
  --button-outline-fgColor-hover: var(--base-color-blue-3);
373
373
  --button-outline-fgColor-rest: var(--base-color-blue-4);
374
- --button-outline-shadow-selected: 0px 0px 0px 0px #000000;
374
+ --button-outline-shadow-selected: 0 0 0 0 #00000000;
375
375
  --button-primary-borderColor-disabled: #4ae16866;
376
376
  --button-primary-borderColor-rest: var(--base-color-green-2);
377
- --button-primary-shadow-selected: 0px 0px 0px 0px #000000;
377
+ --button-primary-shadow-selected: 0 0 0 0 #00000000;
378
378
  --button-star-iconColor: var(--base-color-yellow-2);
379
379
  --buttonCounter-default-bgColor-rest: var(--base-color-neutral-6);
380
380
  --buttonCounter-outline-bgColor-hover: #194fb133;
@@ -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: 0 6px 12px -3px #01040966, 0 6px 18px 0 #01040966; /** Legacy floating shadow for backward compatibility */
1095
+ --shadow-inset: inset 0 1px 0 0 #0104093d; /** Inset shadow for recessed elements */
1096
+ --shadow-resting-medium: 0 1px 1px 0 #01040966, 0 3px 6px 0 #010409cc; /** Medium resting shadow for cards and elevated surfaces */
1097
+ --shadow-resting-small: 0 1px 1px 0 #01040999, 0 1px 3px 0 #01040999; /** Small resting shadow for buttons and interactive elements */
1098
+ --shadow-resting-xsmall: 0 1px 1px 0 #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);
@@ -1169,10 +1169,10 @@
1169
1169
  --focus-outline: 2px solid #409eff; /** Focus ring outline for keyboard navigation and accessibility. */
1170
1170
  --page-header-bgColor: var(--bgColor-default);
1171
1171
  --progressBar-track-bgColor: var(--bgColor-inverse);
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;
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;
1172
+ --shadow-floating-large: 0 0 0 1px #b7bdc8, 0 24px 48px 0 #010409; /** Large floating shadow for modals and dialogs */
1173
+ --shadow-floating-medium: 0 0 0 1px #b7bdc8, 0 8px 16px -4px #01040966, 0 4px 32px -4px #01040966, 0 24px 48px -12px #01040966, 0 48px 96px -24px #01040966; /** Medium floating shadow for popovers and action menus */
1174
+ --shadow-floating-small: 0 0 0 1px #b7bdc8, 0 6px 12px -3px #01040966, 0 6px 18px 0 #01040966; /** Small floating shadow for dropdowns, tooltips, and small overlays */
1175
+ --shadow-floating-xlarge: 0 0 0 1px #b7bdc8, 0 32px 64px 0 #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;
@@ -1501,7 +1501,7 @@
1501
1501
  --outline-focus-offset: -0.125rem; /** Focus outline offset (-2px). Negative value creates an inset outline for keyboard focus indicators, ensuring the focus ring stays within the element bounds */
1502
1502
  --outline-focus-width: 0.125rem; /** Focus outline width (2px). Standard width for keyboard focus indicators to meet WCAG 2.4.7 accessibility requirements */
1503
1503
  --reactionButton-selected-bgColor-hover: #5dadff5c;
1504
- --avatar-shadow: 0px 0px 0px 2px #0d1117;
1504
+ --avatar-shadow: 0 0 0 2px #0d1117;
1505
1505
  --avatarStack-fade-bgColor-default: var(--base-color-neutral-7);
1506
1506
  --avatarStack-fade-bgColor-muted: var(--base-color-neutral-5);
1507
1507
  --base-color-inset: var(--base-color-black);
@@ -1553,8 +1553,8 @@
1553
1553
  --button-danger-borderColor-active: var(--base-color-red-2);
1554
1554
  --button-danger-borderColor-hover: var(--base-color-red-2);
1555
1555
  --button-danger-fgColor-rest: var(--base-color-red-2);
1556
- --button-danger-shadow-selected: 0px 0px 0px 0px #000000;
1557
- --button-default-shadow-resting: 0px 0px 0px 0px #000000;
1556
+ --button-danger-shadow-selected: 0 0 0 0 #00000000;
1557
+ --button-default-shadow-resting: 0 0 0 0 #00000000;
1558
1558
  --button-inactive-fgColor: var(--base-color-neutral-10);
1559
1559
  --button-invisible-bgColor-active: var(--base-color-neutral-3);
1560
1560
  --button-invisible-bgColor-disabled: var(--base-color-transparent);
@@ -1567,10 +1567,10 @@
1567
1567
  --button-outline-fgColor-disabled: #74b9ff80;
1568
1568
  --button-outline-fgColor-hover: var(--base-color-blue-3);
1569
1569
  --button-outline-fgColor-rest: var(--base-color-blue-4);
1570
- --button-outline-shadow-selected: 0px 0px 0px 0px #000000;
1570
+ --button-outline-shadow-selected: 0 0 0 0 #00000000;
1571
1571
  --button-primary-borderColor-disabled: #4ae16866;
1572
1572
  --button-primary-borderColor-rest: var(--base-color-green-2);
1573
- --button-primary-shadow-selected: 0px 0px 0px 0px #000000;
1573
+ --button-primary-shadow-selected: 0 0 0 0 #00000000;
1574
1574
  --button-star-iconColor: var(--base-color-yellow-2);
1575
1575
  --buttonCounter-default-bgColor-rest: var(--base-color-neutral-6);
1576
1576
  --buttonCounter-outline-bgColor-hover: #194fb133;
@@ -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: 0 6px 12px -3px #01040966, 0 6px 18px 0 #01040966; /** Legacy floating shadow for backward compatibility */
2291
+ --shadow-inset: inset 0 1px 0 0 #0104093d; /** Inset shadow for recessed elements */
2292
+ --shadow-resting-medium: 0 1px 1px 0 #01040966, 0 3px 6px 0 #010409cc; /** Medium resting shadow for cards and elevated surfaces */
2293
+ --shadow-resting-small: 0 1px 1px 0 #01040999, 0 1px 3px 0 #01040999; /** Small resting shadow for buttons and interactive elements */
2294
+ --shadow-resting-xsmall: 0 1px 1px 0 #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);
@@ -2365,10 +2365,10 @@
2365
2365
  --focus-outline: 2px solid #409eff; /** Focus ring outline for keyboard navigation and accessibility. */
2366
2366
  --page-header-bgColor: var(--bgColor-default);
2367
2367
  --progressBar-track-bgColor: var(--bgColor-inverse);
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;
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;
2368
+ --shadow-floating-large: 0 0 0 1px #b7bdc8, 0 24px 48px 0 #010409; /** Large floating shadow for modals and dialogs */
2369
+ --shadow-floating-medium: 0 0 0 1px #b7bdc8, 0 8px 16px -4px #01040966, 0 4px 32px -4px #01040966, 0 24px 48px -12px #01040966, 0 48px 96px -24px #01040966; /** Medium floating shadow for popovers and action menus */
2370
+ --shadow-floating-small: 0 0 0 1px #b7bdc8, 0 6px 12px -3px #01040966, 0 6px 18px 0 #01040966; /** Small floating shadow for dropdowns, tooltips, and small overlays */
2371
+ --shadow-floating-xlarge: 0 0 0 1px #b7bdc8, 0 32px 64px 0 #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
@@ -306,7 +306,7 @@
306
306
  --outline-focus-offset: -0.125rem; /** Focus outline offset (-2px). Negative value creates an inset outline for keyboard focus indicators, ensuring the focus ring stays within the element bounds */
307
307
  --outline-focus-width: 0.125rem; /** Focus outline width (2px). Standard width for keyboard focus indicators to meet WCAG 2.4.7 accessibility requirements */
308
308
  --reactionButton-selected-bgColor-hover: #3a8cfd5c;
309
- --avatar-shadow: 0px 0px 0px 2px #0d1117;
309
+ --avatar-shadow: 0 0 0 2px #0d1117;
310
310
  --avatarStack-fade-bgColor-default: var(--base-color-neutral-7);
311
311
  --avatarStack-fade-bgColor-muted: var(--base-color-neutral-5);
312
312
  --base-color-inset: var(--base-color-black);
@@ -361,8 +361,8 @@
361
361
  --button-danger-bgColor-hover: var(--base-color-red-9);
362
362
  --button-danger-borderColor-hover: var(--base-color-red-2);
363
363
  --button-danger-fgColor-rest: var(--base-color-red-2);
364
- --button-danger-shadow-selected: 0px 0px 0px 0px #000000;
365
- --button-default-shadow-resting: 0px 0px 0px 0px #000000;
364
+ --button-danger-shadow-selected: 0 0 0 0 #00000000;
365
+ --button-default-shadow-resting: 0 0 0 0 #00000000;
366
366
  --button-inactive-bgColor: var(--base-color-neutral-4);
367
367
  --button-inactive-fgColor: var(--base-color-neutral-10);
368
368
  --button-invisible-bgColor-active: var(--base-color-neutral-3);
@@ -375,9 +375,9 @@
375
375
  --button-outline-fgColor-disabled: #74b9ff80;
376
376
  --button-outline-fgColor-hover: var(--base-color-blue-3);
377
377
  --button-outline-fgColor-rest: var(--base-color-blue-4);
378
- --button-outline-shadow-selected: 0px 0px 0px 0px #000000;
378
+ --button-outline-shadow-selected: 0 0 0 0 #00000000;
379
379
  --button-primary-borderColor-rest: var(--base-color-blue-2);
380
- --button-primary-shadow-selected: 0px 0px 0px 0px #000000;
380
+ --button-primary-shadow-selected: 0 0 0 0 #00000000;
381
381
  --button-star-iconColor: var(--base-color-yellow-2);
382
382
  --buttonCounter-default-bgColor-rest: var(--base-color-neutral-6);
383
383
  --buttonCounter-outline-bgColor-hover: #194fb133;
@@ -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: 0 6px 12px -3px #01040966, 0 6px 18px 0 #01040966; /** Legacy floating shadow for backward compatibility */
1095
+ --shadow-inset: inset 0 1px 0 0 #0104093d; /** Inset shadow for recessed elements */
1096
+ --shadow-resting-medium: 0 1px 1px 0 #01040966, 0 3px 6px 0 #010409cc; /** Medium resting shadow for cards and elevated surfaces */
1097
+ --shadow-resting-small: 0 1px 1px 0 #01040999, 0 1px 3px 0 #01040999; /** Small resting shadow for buttons and interactive elements */
1098
+ --shadow-resting-xsmall: 0 1px 1px 0 #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,10 +1170,10 @@
1170
1170
  --focus-outline: 2px solid #409eff; /** Focus ring outline for keyboard navigation and accessibility. */
1171
1171
  --page-header-bgColor: var(--bgColor-default);
1172
1172
  --progressBar-track-bgColor: var(--bgColor-inverse);
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;
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;
1173
+ --shadow-floating-large: 0 0 0 1px #b7bdc8, 0 24px 48px 0 #010409; /** Large floating shadow for modals and dialogs */
1174
+ --shadow-floating-medium: 0 0 0 1px #b7bdc8, 0 8px 16px -4px #01040966, 0 4px 32px -4px #01040966, 0 24px 48px -12px #01040966, 0 48px 96px -24px #01040966; /** Medium floating shadow for popovers and action menus */
1175
+ --shadow-floating-small: 0 0 0 1px #b7bdc8, 0 6px 12px -3px #01040966, 0 6px 18px 0 #01040966; /** Small floating shadow for dropdowns, tooltips, and small overlays */
1176
+ --shadow-floating-xlarge: 0 0 0 1px #b7bdc8, 0 32px 64px 0 #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;
@@ -1502,7 +1502,7 @@
1502
1502
  --outline-focus-offset: -0.125rem; /** Focus outline offset (-2px). Negative value creates an inset outline for keyboard focus indicators, ensuring the focus ring stays within the element bounds */
1503
1503
  --outline-focus-width: 0.125rem; /** Focus outline width (2px). Standard width for keyboard focus indicators to meet WCAG 2.4.7 accessibility requirements */
1504
1504
  --reactionButton-selected-bgColor-hover: #3a8cfd5c;
1505
- --avatar-shadow: 0px 0px 0px 2px #0d1117;
1505
+ --avatar-shadow: 0 0 0 2px #0d1117;
1506
1506
  --avatarStack-fade-bgColor-default: var(--base-color-neutral-7);
1507
1507
  --avatarStack-fade-bgColor-muted: var(--base-color-neutral-5);
1508
1508
  --base-color-inset: var(--base-color-black);
@@ -1557,8 +1557,8 @@
1557
1557
  --button-danger-bgColor-hover: var(--base-color-red-9);
1558
1558
  --button-danger-borderColor-hover: var(--base-color-red-2);
1559
1559
  --button-danger-fgColor-rest: var(--base-color-red-2);
1560
- --button-danger-shadow-selected: 0px 0px 0px 0px #000000;
1561
- --button-default-shadow-resting: 0px 0px 0px 0px #000000;
1560
+ --button-danger-shadow-selected: 0 0 0 0 #00000000;
1561
+ --button-default-shadow-resting: 0 0 0 0 #00000000;
1562
1562
  --button-inactive-bgColor: var(--base-color-neutral-4);
1563
1563
  --button-inactive-fgColor: var(--base-color-neutral-10);
1564
1564
  --button-invisible-bgColor-active: var(--base-color-neutral-3);
@@ -1571,9 +1571,9 @@
1571
1571
  --button-outline-fgColor-disabled: #74b9ff80;
1572
1572
  --button-outline-fgColor-hover: var(--base-color-blue-3);
1573
1573
  --button-outline-fgColor-rest: var(--base-color-blue-4);
1574
- --button-outline-shadow-selected: 0px 0px 0px 0px #000000;
1574
+ --button-outline-shadow-selected: 0 0 0 0 #00000000;
1575
1575
  --button-primary-borderColor-rest: var(--base-color-blue-2);
1576
- --button-primary-shadow-selected: 0px 0px 0px 0px #000000;
1576
+ --button-primary-shadow-selected: 0 0 0 0 #00000000;
1577
1577
  --button-star-iconColor: var(--base-color-yellow-2);
1578
1578
  --buttonCounter-default-bgColor-rest: var(--base-color-neutral-6);
1579
1579
  --buttonCounter-outline-bgColor-hover: #194fb133;
@@ -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: 0 6px 12px -3px #01040966, 0 6px 18px 0 #01040966; /** Legacy floating shadow for backward compatibility */
2291
+ --shadow-inset: inset 0 1px 0 0 #0104093d; /** Inset shadow for recessed elements */
2292
+ --shadow-resting-medium: 0 1px 1px 0 #01040966, 0 3px 6px 0 #010409cc; /** Medium resting shadow for cards and elevated surfaces */
2293
+ --shadow-resting-small: 0 1px 1px 0 #01040999, 0 1px 3px 0 #01040999; /** Small resting shadow for buttons and interactive elements */
2294
+ --shadow-resting-xsmall: 0 1px 1px 0 #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,10 +2366,10 @@
2366
2366
  --focus-outline: 2px solid #409eff; /** Focus ring outline for keyboard navigation and accessibility. */
2367
2367
  --page-header-bgColor: var(--bgColor-default);
2368
2368
  --progressBar-track-bgColor: var(--bgColor-inverse);
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;
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;
2369
+ --shadow-floating-large: 0 0 0 1px #b7bdc8, 0 24px 48px 0 #010409; /** Large floating shadow for modals and dialogs */
2370
+ --shadow-floating-medium: 0 0 0 1px #b7bdc8, 0 8px 16px -4px #01040966, 0 4px 32px -4px #01040966, 0 24px 48px -12px #01040966, 0 48px 96px -24px #01040966; /** Medium floating shadow for popovers and action menus */
2371
+ --shadow-floating-small: 0 0 0 1px #b7bdc8, 0 6px 12px -3px #01040966, 0 6px 18px 0 #01040966; /** Small floating shadow for dropdowns, tooltips, and small overlays */
2372
+ --shadow-floating-xlarge: 0 0 0 1px #b7bdc8, 0 32px 64px 0 #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
@@ -307,7 +307,7 @@
307
307
  --outline-focus-offset: -0.125rem; /** Focus outline offset (-2px). Negative value creates an inset outline for keyboard focus indicators, ensuring the focus ring stays within the element bounds */
308
308
  --outline-focus-width: 0.125rem; /** Focus outline width (2px). Standard width for keyboard focus indicators to meet WCAG 2.4.7 accessibility requirements */
309
309
  --reactionButton-selected-bgColor-hover: #3a8cfd5c;
310
- --avatar-shadow: 0px 0px 0px 2px #0d1117;
310
+ --avatar-shadow: 0 0 0 2px #0d1117;
311
311
  --avatarStack-fade-bgColor-default: var(--base-color-neutral-7);
312
312
  --avatarStack-fade-bgColor-muted: var(--base-color-neutral-5);
313
313
  --base-color-inset: var(--base-color-black);
@@ -361,8 +361,8 @@
361
361
  --boxShadow-thin: inset 0 0 0 var(--borderWidth-thin); /** Thin shadow used instead of a border to prevent layout shift */
362
362
  --button-danger-bgColor-hover: var(--base-color-red-6);
363
363
  --button-danger-iconColor-rest: var(--button-danger-fgColor-rest);
364
- --button-danger-shadow-selected: 0px 0px 0px 0px #000000;
365
- --button-default-shadow-resting: 0px 0px 0px 0px #000000;
364
+ --button-danger-shadow-selected: 0 0 0 0 #00000000;
365
+ --button-default-shadow-resting: 0 0 0 0 #00000000;
366
366
  --button-inactive-bgColor: var(--base-color-neutral-4);
367
367
  --button-inactive-fgColor: var(--base-color-neutral-9);
368
368
  --button-invisible-bgColor-disabled: var(--base-color-transparent);
@@ -371,8 +371,8 @@
371
371
  --button-outline-fgColor-disabled: #4493f880;
372
372
  --button-outline-fgColor-hover: var(--base-color-blue-3);
373
373
  --button-outline-fgColor-rest: var(--base-color-blue-4);
374
- --button-outline-shadow-selected: 0px 0px 0px 0px #000000;
375
- --button-primary-shadow-selected: 0px 0px 0px 0px #000000;
374
+ --button-outline-shadow-selected: 0 0 0 0 #00000000;
375
+ --button-primary-shadow-selected: 0 0 0 0 #00000000;
376
376
  --button-star-iconColor: var(--base-color-yellow-2);
377
377
  --buttonCounter-danger-bgColor-rest: #49020233;
378
378
  --buttonCounter-default-bgColor-rest: var(--base-color-neutral-6);
@@ -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: 0 6px 12px -3px #01040966, 0 6px 18px 0 #01040966; /** Legacy floating shadow for backward compatibility */
1120
+ --shadow-inset: inset 0 1px 0 0 #0104093d; /** Inset shadow for recessed elements */
1121
+ --shadow-resting-medium: 0 1px 1px 0 #01040966, 0 3px 6px 0 #010409cc; /** Medium resting shadow for cards and elevated surfaces */
1122
+ --shadow-resting-small: 0 1px 1px 0 #01040999, 0 1px 3px 0 #01040999; /** Small resting shadow for buttons and interactive elements */
1123
+ --shadow-resting-xsmall: 0 1px 1px 0 #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);
@@ -1185,10 +1185,10 @@
1185
1185
  --buttonKeybindingHint-danger-borderColor-disabled: var(--buttonKeybindingHint-default-borderColor-disabled);
1186
1186
  --buttonKeybindingHint-danger-borderColor-rest: var(--buttonKeybindingHint-default-borderColor-rest);
1187
1187
  --buttonKeybindingHint-danger-fgColor-disabled: var(--buttonKeybindingHint-default-fgColor-disabled);
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;
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;
1188
+ --shadow-floating-large: 0 0 0 1px #3d444d, 0 24px 48px 0 #010409; /** Large floating shadow for modals and dialogs */
1189
+ --shadow-floating-medium: 0 0 0 1px #3d444d, 0 8px 16px -4px #01040966, 0 4px 32px -4px #01040966, 0 24px 48px -12px #01040966, 0 48px 96px -24px #01040966; /** Medium floating shadow for popovers and action menus */
1190
+ --shadow-floating-small: 0 0 0 1px #3d444d, 0 6px 12px -3px #01040966, 0 6px 18px 0 #01040966; /** Small floating shadow for dropdowns, tooltips, and small overlays */
1191
+ --shadow-floating-xlarge: 0 0 0 1px #3d444d, 0 32px 64px 0 #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);
@@ -1503,7 +1503,7 @@
1503
1503
  --outline-focus-offset: -0.125rem; /** Focus outline offset (-2px). Negative value creates an inset outline for keyboard focus indicators, ensuring the focus ring stays within the element bounds */
1504
1504
  --outline-focus-width: 0.125rem; /** Focus outline width (2px). Standard width for keyboard focus indicators to meet WCAG 2.4.7 accessibility requirements */
1505
1505
  --reactionButton-selected-bgColor-hover: #3a8cfd5c;
1506
- --avatar-shadow: 0px 0px 0px 2px #0d1117;
1506
+ --avatar-shadow: 0 0 0 2px #0d1117;
1507
1507
  --avatarStack-fade-bgColor-default: var(--base-color-neutral-7);
1508
1508
  --avatarStack-fade-bgColor-muted: var(--base-color-neutral-5);
1509
1509
  --base-color-inset: var(--base-color-black);
@@ -1557,8 +1557,8 @@
1557
1557
  --boxShadow-thin: inset 0 0 0 var(--borderWidth-thin); /** Thin shadow used instead of a border to prevent layout shift */
1558
1558
  --button-danger-bgColor-hover: var(--base-color-red-6);
1559
1559
  --button-danger-iconColor-rest: var(--button-danger-fgColor-rest);
1560
- --button-danger-shadow-selected: 0px 0px 0px 0px #000000;
1561
- --button-default-shadow-resting: 0px 0px 0px 0px #000000;
1560
+ --button-danger-shadow-selected: 0 0 0 0 #00000000;
1561
+ --button-default-shadow-resting: 0 0 0 0 #00000000;
1562
1562
  --button-inactive-bgColor: var(--base-color-neutral-4);
1563
1563
  --button-inactive-fgColor: var(--base-color-neutral-9);
1564
1564
  --button-invisible-bgColor-disabled: var(--base-color-transparent);
@@ -1567,8 +1567,8 @@
1567
1567
  --button-outline-fgColor-disabled: #4493f880;
1568
1568
  --button-outline-fgColor-hover: var(--base-color-blue-3);
1569
1569
  --button-outline-fgColor-rest: var(--base-color-blue-4);
1570
- --button-outline-shadow-selected: 0px 0px 0px 0px #000000;
1571
- --button-primary-shadow-selected: 0px 0px 0px 0px #000000;
1570
+ --button-outline-shadow-selected: 0 0 0 0 #00000000;
1571
+ --button-primary-shadow-selected: 0 0 0 0 #00000000;
1572
1572
  --button-star-iconColor: var(--base-color-yellow-2);
1573
1573
  --buttonCounter-danger-bgColor-rest: #49020233;
1574
1574
  --buttonCounter-default-bgColor-rest: var(--base-color-neutral-6);
@@ -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: 0 6px 12px -3px #01040966, 0 6px 18px 0 #01040966; /** Legacy floating shadow for backward compatibility */
2316
+ --shadow-inset: inset 0 1px 0 0 #0104093d; /** Inset shadow for recessed elements */
2317
+ --shadow-resting-medium: 0 1px 1px 0 #01040966, 0 3px 6px 0 #010409cc; /** Medium resting shadow for cards and elevated surfaces */
2318
+ --shadow-resting-small: 0 1px 1px 0 #01040999, 0 1px 3px 0 #01040999; /** Small resting shadow for buttons and interactive elements */
2319
+ --shadow-resting-xsmall: 0 1px 1px 0 #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);
@@ -2381,10 +2381,10 @@
2381
2381
  --buttonKeybindingHint-danger-borderColor-disabled: var(--buttonKeybindingHint-default-borderColor-disabled);
2382
2382
  --buttonKeybindingHint-danger-borderColor-rest: var(--buttonKeybindingHint-default-borderColor-rest);
2383
2383
  --buttonKeybindingHint-danger-fgColor-disabled: var(--buttonKeybindingHint-default-fgColor-disabled);
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;
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;
2384
+ --shadow-floating-large: 0 0 0 1px #3d444d, 0 24px 48px 0 #010409; /** Large floating shadow for modals and dialogs */
2385
+ --shadow-floating-medium: 0 0 0 1px #3d444d, 0 8px 16px -4px #01040966, 0 4px 32px -4px #01040966, 0 24px 48px -12px #01040966, 0 48px 96px -24px #01040966; /** Medium floating shadow for popovers and action menus */
2386
+ --shadow-floating-small: 0 0 0 1px #3d444d, 0 6px 12px -3px #01040966, 0 6px 18px 0 #01040966; /** Small floating shadow for dropdowns, tooltips, and small overlays */
2387
+ --shadow-floating-xlarge: 0 0 0 1px #3d444d, 0 32px 64px 0 #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);