@primer/primitives 11.4.1-rc.eb8ee149 → 11.4.1-rc.edbe0e39

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 (149) hide show
  1. package/DESIGN_TOKENS_GUIDE.md +185 -0
  2. package/DESIGN_TOKENS_SPEC.md +122 -3
  3. package/dist/build/formats/jsonFigma.js +8 -1
  4. package/dist/build/formats/markdownLlmGuidelines.js +349 -0
  5. package/dist/build/schemas/borderToken.d.ts +17 -3
  6. package/dist/build/schemas/colorToken.d.ts +1 -1
  7. package/dist/build/schemas/cubicBezierToken.d.ts +1 -1
  8. package/dist/build/schemas/dimensionToken.d.ts +9 -2
  9. package/dist/build/schemas/dimensionValue.d.ts +12 -1
  10. package/dist/build/schemas/dimensionValue.js +10 -13
  11. package/dist/build/schemas/durationToken.d.ts +8 -2
  12. package/dist/build/schemas/durationValue.d.ts +11 -1
  13. package/dist/build/schemas/durationValue.js +13 -3
  14. package/dist/build/schemas/fontFamilyToken.d.ts +1 -1
  15. package/dist/build/schemas/fontWeightToken.d.ts +1 -1
  16. package/dist/build/schemas/gradientToken.d.ts +1 -1
  17. package/dist/build/schemas/numberToken.d.ts +1 -1
  18. package/dist/build/schemas/shadowToken.d.ts +673 -85
  19. package/dist/build/schemas/stringToken.d.ts +1 -1
  20. package/dist/build/schemas/stringToken.js +1 -1
  21. package/dist/build/schemas/tokenType.d.ts +1 -1
  22. package/dist/build/schemas/transitionToken.d.ts +15 -3
  23. package/dist/build/schemas/typographyToken.d.ts +19 -5
  24. package/dist/build/schemas/typographyToken.js +1 -1
  25. package/dist/build/schemas/validTokenType.d.ts +1 -1
  26. package/dist/build/schemas/validTokenType.js +1 -1
  27. package/dist/build/schemas/viewportRangeToken.d.ts +1 -1
  28. package/dist/build/transformers/borderToCss.js +17 -1
  29. package/dist/build/transformers/dimensionToPixelUnitless.d.ts +3 -2
  30. package/dist/build/transformers/dimensionToPixelUnitless.js +22 -26
  31. package/dist/build/transformers/dimensionToRem.d.ts +2 -1
  32. package/dist/build/transformers/dimensionToRem.js +21 -22
  33. package/dist/build/transformers/dimensionToRemPxArray.d.ts +2 -1
  34. package/dist/build/transformers/dimensionToRemPxArray.js +21 -22
  35. package/dist/build/transformers/durationToCss.d.ts +2 -1
  36. package/dist/build/transformers/durationToCss.js +18 -11
  37. package/dist/build/transformers/shadowToCss.js +12 -1
  38. package/dist/build/transformers/utilities/parseDimension.d.ts +12 -0
  39. package/dist/build/transformers/utilities/parseDimension.js +31 -0
  40. package/dist/build/types/borderTokenValue.d.ts +3 -1
  41. package/dist/build/types/dimensionTokenValue.d.ts +9 -0
  42. package/dist/build/types/shadowTokenValue.d.ts +6 -4
  43. package/dist/css/functional/themes/dark-colorblind-high-contrast.css +28 -28
  44. package/dist/css/functional/themes/dark-colorblind.css +28 -28
  45. package/dist/css/functional/themes/dark-dimmed-high-contrast.css +28 -28
  46. package/dist/css/functional/themes/dark-dimmed.css +28 -28
  47. package/dist/css/functional/themes/dark-high-contrast.css +28 -28
  48. package/dist/css/functional/themes/dark-tritanopia-high-contrast.css +28 -28
  49. package/dist/css/functional/themes/dark-tritanopia.css +28 -28
  50. package/dist/css/functional/themes/dark.css +28 -28
  51. package/dist/css/functional/themes/light-colorblind-high-contrast.css +28 -28
  52. package/dist/css/functional/themes/light-colorblind.css +28 -28
  53. package/dist/css/functional/themes/light-high-contrast.css +28 -28
  54. package/dist/css/functional/themes/light-tritanopia-high-contrast.css +28 -28
  55. package/dist/css/functional/themes/light-tritanopia.css +28 -28
  56. package/dist/css/functional/themes/light.css +28 -28
  57. package/dist/docs/base/motion/motion.json +96 -24
  58. package/dist/docs/base/size/size.json +76 -19
  59. package/dist/docs/base/typography/typography.json +24 -6
  60. package/dist/docs/functional/size/border.json +26 -11
  61. package/dist/docs/functional/size/breakpoints.json +24 -6
  62. package/dist/docs/functional/size/radius.json +16 -4
  63. package/dist/docs/functional/size/size.json +60 -15
  64. package/dist/docs/functional/themes/dark-colorblind-high-contrast.json +1423 -346
  65. package/dist/docs/functional/themes/dark-colorblind.json +1423 -346
  66. package/dist/docs/functional/themes/dark-dimmed-high-contrast.json +1423 -346
  67. package/dist/docs/functional/themes/dark-dimmed.json +1423 -346
  68. package/dist/docs/functional/themes/dark-high-contrast.json +1423 -346
  69. package/dist/docs/functional/themes/dark-tritanopia-high-contrast.json +1423 -346
  70. package/dist/docs/functional/themes/dark-tritanopia.json +1423 -346
  71. package/dist/docs/functional/themes/dark.json +1423 -346
  72. package/dist/docs/functional/themes/light-colorblind-high-contrast.json +1426 -349
  73. package/dist/docs/functional/themes/light-colorblind.json +1426 -349
  74. package/dist/docs/functional/themes/light-high-contrast.json +1426 -349
  75. package/dist/docs/functional/themes/light-tritanopia-high-contrast.json +1426 -349
  76. package/dist/docs/functional/themes/light-tritanopia.json +1426 -349
  77. package/dist/docs/functional/themes/light.json +1426 -349
  78. package/dist/docs/functional/typography/typography.json +8 -2
  79. package/dist/fallbacks/base/motion/motion.json +48 -12
  80. package/dist/figma/themes/light-colorblind.json +4 -4
  81. package/dist/figma/themes/light-high-contrast.json +4 -4
  82. package/dist/figma/themes/light-tritanopia.json +4 -4
  83. package/dist/figma/themes/light.json +4 -4
  84. package/dist/internalCss/dark-colorblind-high-contrast.css +28 -28
  85. package/dist/internalCss/dark-colorblind.css +28 -28
  86. package/dist/internalCss/dark-dimmed-high-contrast.css +28 -28
  87. package/dist/internalCss/dark-dimmed.css +28 -28
  88. package/dist/internalCss/dark-high-contrast.css +28 -28
  89. package/dist/internalCss/dark-tritanopia-high-contrast.css +28 -28
  90. package/dist/internalCss/dark-tritanopia.css +28 -28
  91. package/dist/internalCss/dark.css +28 -28
  92. package/dist/internalCss/light-colorblind-high-contrast.css +28 -28
  93. package/dist/internalCss/light-colorblind.css +28 -28
  94. package/dist/internalCss/light-high-contrast.css +28 -28
  95. package/dist/internalCss/light-tritanopia-high-contrast.css +28 -28
  96. package/dist/internalCss/light-tritanopia.css +28 -28
  97. package/dist/internalCss/light.css +28 -28
  98. package/dist/styleLint/base/motion/motion.json +96 -24
  99. package/dist/styleLint/base/size/size.json +76 -19
  100. package/dist/styleLint/base/typography/typography.json +30 -12
  101. package/dist/styleLint/functional/size/border.json +27 -12
  102. package/dist/styleLint/functional/size/breakpoints.json +24 -6
  103. package/dist/styleLint/functional/size/radius.json +17 -5
  104. package/dist/styleLint/functional/size/size-coarse.json +3 -3
  105. package/dist/styleLint/functional/size/size-fine.json +3 -3
  106. package/dist/styleLint/functional/size/size.json +111 -66
  107. package/dist/styleLint/functional/themes/dark-colorblind-high-contrast.json +1551 -366
  108. package/dist/styleLint/functional/themes/dark-colorblind.json +1551 -366
  109. package/dist/styleLint/functional/themes/dark-dimmed-high-contrast.json +1551 -366
  110. package/dist/styleLint/functional/themes/dark-dimmed.json +1551 -366
  111. package/dist/styleLint/functional/themes/dark-high-contrast.json +1551 -366
  112. package/dist/styleLint/functional/themes/dark-tritanopia-high-contrast.json +1551 -366
  113. package/dist/styleLint/functional/themes/dark-tritanopia.json +1551 -366
  114. package/dist/styleLint/functional/themes/dark.json +1551 -366
  115. package/dist/styleLint/functional/themes/light-colorblind-high-contrast.json +1554 -369
  116. package/dist/styleLint/functional/themes/light-colorblind.json +1554 -369
  117. package/dist/styleLint/functional/themes/light-high-contrast.json +1554 -369
  118. package/dist/styleLint/functional/themes/light-tritanopia-high-contrast.json +1554 -369
  119. package/dist/styleLint/functional/themes/light-tritanopia.json +1554 -369
  120. package/dist/styleLint/functional/themes/light.json +1554 -369
  121. package/dist/styleLint/functional/typography/typography.json +28 -22
  122. package/package.json +2 -2
  123. package/src/tokens/base/motion/timing.json5 +12 -12
  124. package/src/tokens/base/size/size.json5 +19 -19
  125. package/src/tokens/base/typography/typography.json5 +6 -6
  126. package/src/tokens/component/avatar.json5 +72 -44
  127. package/src/tokens/component/button.json5 +1545 -1193
  128. package/src/tokens/functional/border/border.json5 +4 -1
  129. package/src/tokens/functional/color/bgColor.json5 +8 -0
  130. package/src/tokens/functional/color/display.json5 +7 -0
  131. package/src/tokens/functional/color/fgColor.json5 +8 -0
  132. package/src/tokens/functional/color/syntax.json5 +14 -0
  133. package/src/tokens/functional/shadow/shadow.json5 +678 -163
  134. package/src/tokens/functional/size/border.json5 +8 -8
  135. package/src/tokens/functional/size/breakpoints.json5 +6 -6
  136. package/src/tokens/functional/size/radius.json5 +4 -4
  137. package/src/tokens/functional/size/size.json5 +15 -15
  138. package/src/tokens/functional/typography/typography.json5 +8 -4
  139. package/dist/build/parsers/index.d.ts +0 -1
  140. package/dist/build/parsers/index.js +0 -1
  141. package/dist/build/parsers/w3cJsonParser.d.ts +0 -6
  142. package/dist/build/parsers/w3cJsonParser.js +0 -25
  143. package/dist/removed/testing.json5 +0 -4
  144. package/guidelines/color.llm.md +0 -16
  145. package/guidelines/guidelines.llm.md +0 -34
  146. package/guidelines/motion.llm.md +0 -41
  147. package/guidelines/spacing.llm.md +0 -20
  148. package/guidelines/typography.llm.md +0 -14
  149. package/src/tokens/removed/testing.json5 +0 -4
package/dist/css/functional/themes/dark-high-contrast.css CHANGED
@@ -17,7 +17,7 @@
17
17
  --fgColor-sponsors: #ff90c8; /** Text color for GitHub Sponsors content */
18
18
  --fgColor-success: #2bd853; /** Success text for positive feedback and completed states */
19
19
  --reactionButton-selected-bgColor-hover: #5dadff5c;
20
- --avatar-shadow: 0px 0px 0px 2px #0d1117;
20
+ --avatar-shadow: 0 0 0 2px #0d1117;
21
21
  --avatarStack-fade-bgColor-default: #3d444d;
22
22
  --avatarStack-fade-bgColor-muted: #2a313c;
23
23
  --bgColor-accent-emphasis: #194fb1; /** Strong accent background for active states and focused states */
@@ -62,8 +62,8 @@
62
62
  --button-danger-borderColor-active: #ffb1af;
63
63
  --button-danger-borderColor-hover: #ffb1af;
64
64
  --button-danger-fgColor-rest: #ffb1af;
65
- --button-danger-shadow-selected: 0px 0px 0px 0px #000000;
66
- --button-default-shadow-resting: 0px 0px 0px 0px #000000;
65
+ --button-danger-shadow-selected: 0 0 0 0 #000000;
66
+ --button-default-shadow-resting: 0 0 0 0 #000000;
67
67
  --button-inactive-fgColor: #b7bdc8;
68
68
  --button-invisible-bgColor-active: #212830;
69
69
  --button-invisible-bgColor-disabled: #00000000;
@@ -76,10 +76,10 @@
76
76
  --button-outline-fgColor-disabled: #74b9ff80;
77
77
  --button-outline-fgColor-hover: #71b7ff;
78
78
  --button-outline-fgColor-rest: #5cacff;
79
- --button-outline-shadow-selected: 0px 0px 0px 0px #000000;
79
+ --button-outline-shadow-selected: 0 0 0 0 #000000;
80
80
  --button-primary-borderColor-disabled: #4ae16866;
81
81
  --button-primary-borderColor-rest: #4ae168;
82
- --button-primary-shadow-selected: 0px 0px 0px 0px #000000;
82
+ --button-primary-shadow-selected: 0 0 0 0 #000000;
83
83
  --button-star-iconColor: #f7c843;
84
84
  --buttonCounter-default-bgColor-rest: #2f3742;
85
85
  --buttonCounter-outline-bgColor-hover: #194fb133;
@@ -796,11 +796,11 @@
796
796
  --reactionButton-selected-fgColor-rest: var(--fgColor-link);
797
797
  --selectMenu-borderColor: var(--borderColor-default);
798
798
  --selection-bgColor: #194fb1b3; /** Background color for text selection highlights */
799
- --shadow-floating-legacy: 0px 6px 12px -3px #01040966, 0px 6px 18px 0px #01040966;
800
- --shadow-inset: inset 0px 1px 0px 0px #0104093d;
801
- --shadow-resting-medium: 0px 1px 1px 0px #01040966, 0px 3px 6px 0px #010409cc;
802
- --shadow-resting-small: 0px 1px 1px 0px #01040999, 0px 1px 3px 0px #01040999;
803
- --shadow-resting-xsmall: 0px 1px 1px 0px #010409cc;
799
+ --shadow-floating-legacy: 0 6px 12px -3px #01040966, 0 6px 18px 0 #01040966; /** Legacy floating shadow for backward compatibility */
800
+ --shadow-inset: inset 0 1px 0 0 #0104093d; /** Inset shadow for recessed elements */
801
+ --shadow-resting-medium: 0 1px 1px 0 #01040966, 0 3px 6px 0 #010409cc; /** Medium resting shadow for cards and elevated surfaces */
802
+ --shadow-resting-small: 0 1px 1px 0 #01040999, 0 1px 3px 0 #01040999; /** Small resting shadow for buttons and interactive elements */
803
+ --shadow-resting-xsmall: 0 1px 1px 0 #010409cc; /** Extra small resting shadow for minimal elevation */
804
804
  --topicTag-borderColor: var(--borderColor-accent-emphasis);
805
805
  --treeViewItem-leadingVisual-iconColor-rest: var(--fgColor-muted);
806
806
  --underlineNav-iconColor-rest: var(--fgColor-muted);
@@ -874,10 +874,10 @@
874
874
  --focus-outline: 2px solid #409eff; /** Focus ring outline for keyboard navigation and accessibility. */
875
875
  --page-header-bgColor: var(--bgColor-default);
876
876
  --progressBar-track-bgColor: var(--bgColor-inverse);
877
- --shadow-floating-large: 0px 0px 0px 1px #b7bdc8, 0px 24px 48px 0px #010409; /** Large floating shadow for modals and dialogs */
878
- --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;
879
- --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 */
880
- --shadow-floating-xlarge: 0px 0px 0px 1px #b7bdc8, 0px 32px 64px 0px #010409;
877
+ --shadow-floating-large: 0 0 0 1px #b7bdc8, 0 24px 48px 0 #010409; /** Large floating shadow for modals and dialogs */
878
+ --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 */
879
+ --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 */
880
+ --shadow-floating-xlarge: 0 0 0 1px #b7bdc8, 0 32px 64px 0 #010409; /** Extra large floating shadow for full-screen overlays and sheets */
881
881
  --tooltip-bgColor: var(--bgColor-inverse);
882
882
  --tooltip-fgColor: var(--fgColor-onInverse);
883
883
  --border-neutral-emphasis: 0.0625rem solid #b7bdc8;
@@ -914,7 +914,7 @@
914
914
  --fgColor-sponsors: #ff90c8; /** Text color for GitHub Sponsors content */
915
915
  --fgColor-success: #2bd853; /** Success text for positive feedback and completed states */
916
916
  --reactionButton-selected-bgColor-hover: #5dadff5c;
917
- --avatar-shadow: 0px 0px 0px 2px #0d1117;
917
+ --avatar-shadow: 0 0 0 2px #0d1117;
918
918
  --avatarStack-fade-bgColor-default: #3d444d;
919
919
  --avatarStack-fade-bgColor-muted: #2a313c;
920
920
  --bgColor-accent-emphasis: #194fb1; /** Strong accent background for active states and focused states */
@@ -959,8 +959,8 @@
959
959
  --button-danger-borderColor-active: #ffb1af;
960
960
  --button-danger-borderColor-hover: #ffb1af;
961
961
  --button-danger-fgColor-rest: #ffb1af;
962
- --button-danger-shadow-selected: 0px 0px 0px 0px #000000;
963
- --button-default-shadow-resting: 0px 0px 0px 0px #000000;
962
+ --button-danger-shadow-selected: 0 0 0 0 #000000;
963
+ --button-default-shadow-resting: 0 0 0 0 #000000;
964
964
  --button-inactive-fgColor: #b7bdc8;
965
965
  --button-invisible-bgColor-active: #212830;
966
966
  --button-invisible-bgColor-disabled: #00000000;
@@ -973,10 +973,10 @@
973
973
  --button-outline-fgColor-disabled: #74b9ff80;
974
974
  --button-outline-fgColor-hover: #71b7ff;
975
975
  --button-outline-fgColor-rest: #5cacff;
976
- --button-outline-shadow-selected: 0px 0px 0px 0px #000000;
976
+ --button-outline-shadow-selected: 0 0 0 0 #000000;
977
977
  --button-primary-borderColor-disabled: #4ae16866;
978
978
  --button-primary-borderColor-rest: #4ae168;
979
- --button-primary-shadow-selected: 0px 0px 0px 0px #000000;
979
+ --button-primary-shadow-selected: 0 0 0 0 #000000;
980
980
  --button-star-iconColor: #f7c843;
981
981
  --buttonCounter-default-bgColor-rest: #2f3742;
982
982
  --buttonCounter-outline-bgColor-hover: #194fb133;
@@ -1693,11 +1693,11 @@
1693
1693
  --reactionButton-selected-fgColor-rest: var(--fgColor-link);
1694
1694
  --selectMenu-borderColor: var(--borderColor-default);
1695
1695
  --selection-bgColor: #194fb1b3; /** Background color for text selection highlights */
1696
- --shadow-floating-legacy: 0px 6px 12px -3px #01040966, 0px 6px 18px 0px #01040966;
1697
- --shadow-inset: inset 0px 1px 0px 0px #0104093d;
1698
- --shadow-resting-medium: 0px 1px 1px 0px #01040966, 0px 3px 6px 0px #010409cc;
1699
- --shadow-resting-small: 0px 1px 1px 0px #01040999, 0px 1px 3px 0px #01040999;
1700
- --shadow-resting-xsmall: 0px 1px 1px 0px #010409cc;
1696
+ --shadow-floating-legacy: 0 6px 12px -3px #01040966, 0 6px 18px 0 #01040966; /** Legacy floating shadow for backward compatibility */
1697
+ --shadow-inset: inset 0 1px 0 0 #0104093d; /** Inset shadow for recessed elements */
1698
+ --shadow-resting-medium: 0 1px 1px 0 #01040966, 0 3px 6px 0 #010409cc; /** Medium resting shadow for cards and elevated surfaces */
1699
+ --shadow-resting-small: 0 1px 1px 0 #01040999, 0 1px 3px 0 #01040999; /** Small resting shadow for buttons and interactive elements */
1700
+ --shadow-resting-xsmall: 0 1px 1px 0 #010409cc; /** Extra small resting shadow for minimal elevation */
1701
1701
  --topicTag-borderColor: var(--borderColor-accent-emphasis);
1702
1702
  --treeViewItem-leadingVisual-iconColor-rest: var(--fgColor-muted);
1703
1703
  --underlineNav-iconColor-rest: var(--fgColor-muted);
@@ -1771,10 +1771,10 @@
1771
1771
  --focus-outline: 2px solid #409eff; /** Focus ring outline for keyboard navigation and accessibility. */
1772
1772
  --page-header-bgColor: var(--bgColor-default);
1773
1773
  --progressBar-track-bgColor: var(--bgColor-inverse);
1774
- --shadow-floating-large: 0px 0px 0px 1px #b7bdc8, 0px 24px 48px 0px #010409; /** Large floating shadow for modals and dialogs */
1775
- --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;
1776
- --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 */
1777
- --shadow-floating-xlarge: 0px 0px 0px 1px #b7bdc8, 0px 32px 64px 0px #010409;
1774
+ --shadow-floating-large: 0 0 0 1px #b7bdc8, 0 24px 48px 0 #010409; /** Large floating shadow for modals and dialogs */
1775
+ --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 */
1776
+ --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 */
1777
+ --shadow-floating-xlarge: 0 0 0 1px #b7bdc8, 0 32px 64px 0 #010409; /** Extra large floating shadow for full-screen overlays and sheets */
1778
1778
  --tooltip-bgColor: var(--bgColor-inverse);
1779
1779
  --tooltip-fgColor: var(--fgColor-onInverse);
1780
1780
  --border-neutral-emphasis: 0.0625rem solid #b7bdc8;
package/dist/css/functional/themes/dark-tritanopia-high-contrast.css CHANGED
@@ -18,7 +18,7 @@
18
18
  --fgColor-done: #d3abff; /** Text color for completed/done state indicators */
19
19
  --fgColor-sponsors: #ff90c8; /** Text color for GitHub Sponsors content */
20
20
  --reactionButton-selected-bgColor-hover: #3a8cfd5c;
21
- --avatar-shadow: 0px 0px 0px 2px #0d1117;
21
+ --avatar-shadow: 0 0 0 2px #0d1117;
22
22
  --avatarStack-fade-bgColor-default: #3d444d;
23
23
  --avatarStack-fade-bgColor-muted: #2a313c;
24
24
  --bgColor-accent-emphasis: #194fb1; /** Strong accent background for active states and focused states */
@@ -66,8 +66,8 @@
66
66
  --button-danger-bgColor-hover: #ad0116;
67
67
  --button-danger-borderColor-hover: #ffb1af;
68
68
  --button-danger-fgColor-rest: #ffb1af;
69
- --button-danger-shadow-selected: 0px 0px 0px 0px #000000;
70
- --button-default-shadow-resting: 0px 0px 0px 0px #000000;
69
+ --button-danger-shadow-selected: 0 0 0 0 #000000;
70
+ --button-default-shadow-resting: 0 0 0 0 #000000;
71
71
  --button-inactive-bgColor: #262c36;
72
72
  --button-inactive-fgColor: #b7bdc8;
73
73
  --button-invisible-bgColor-active: #212830;
@@ -80,9 +80,9 @@
80
80
  --button-outline-fgColor-disabled: #74b9ff80;
81
81
  --button-outline-fgColor-hover: #71b7ff;
82
82
  --button-outline-fgColor-rest: #5cacff;
83
- --button-outline-shadow-selected: 0px 0px 0px 0px #000000;
83
+ --button-outline-shadow-selected: 0 0 0 0 #000000;
84
84
  --button-primary-borderColor-rest: #91cbff;
85
- --button-primary-shadow-selected: 0px 0px 0px 0px #000000;
85
+ --button-primary-shadow-selected: 0 0 0 0 #000000;
86
86
  --button-star-iconColor: #f7c843;
87
87
  --buttonCounter-default-bgColor-rest: #2f3742;
88
88
  --buttonCounter-outline-bgColor-hover: #194fb133;
@@ -796,11 +796,11 @@
796
796
  --reactionButton-selected-fgColor-rest: var(--fgColor-link);
797
797
  --selectMenu-borderColor: var(--borderColor-default);
798
798
  --selection-bgColor: #194fb1b3; /** Background color for text selection highlights */
799
- --shadow-floating-legacy: 0px 6px 12px -3px #01040966, 0px 6px 18px 0px #01040966;
800
- --shadow-inset: inset 0px 1px 0px 0px #0104093d;
801
- --shadow-resting-medium: 0px 1px 1px 0px #01040966, 0px 3px 6px 0px #010409cc;
802
- --shadow-resting-small: 0px 1px 1px 0px #01040999, 0px 1px 3px 0px #01040999;
803
- --shadow-resting-xsmall: 0px 1px 1px 0px #010409cc;
799
+ --shadow-floating-legacy: 0 6px 12px -3px #01040966, 0 6px 18px 0 #01040966; /** Legacy floating shadow for backward compatibility */
800
+ --shadow-inset: inset 0 1px 0 0 #0104093d; /** Inset shadow for recessed elements */
801
+ --shadow-resting-medium: 0 1px 1px 0 #01040966, 0 3px 6px 0 #010409cc; /** Medium resting shadow for cards and elevated surfaces */
802
+ --shadow-resting-small: 0 1px 1px 0 #01040999, 0 1px 3px 0 #01040999; /** Small resting shadow for buttons and interactive elements */
803
+ --shadow-resting-xsmall: 0 1px 1px 0 #010409cc; /** Extra small resting shadow for minimal elevation */
804
804
  --topicTag-borderColor: var(--borderColor-accent-emphasis);
805
805
  --treeViewItem-leadingVisual-iconColor-rest: var(--fgColor-muted);
806
806
  --underlineNav-iconColor-rest: var(--fgColor-muted);
@@ -875,10 +875,10 @@
875
875
  --focus-outline: 2px solid #409eff; /** Focus ring outline for keyboard navigation and accessibility. */
876
876
  --page-header-bgColor: var(--bgColor-default);
877
877
  --progressBar-track-bgColor: var(--bgColor-inverse);
878
- --shadow-floating-large: 0px 0px 0px 1px #b7bdc8, 0px 24px 48px 0px #010409; /** Large floating shadow for modals and dialogs */
879
- --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;
880
- --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 */
881
- --shadow-floating-xlarge: 0px 0px 0px 1px #b7bdc8, 0px 32px 64px 0px #010409;
878
+ --shadow-floating-large: 0 0 0 1px #b7bdc8, 0 24px 48px 0 #010409; /** Large floating shadow for modals and dialogs */
879
+ --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 */
880
+ --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 */
881
+ --shadow-floating-xlarge: 0 0 0 1px #b7bdc8, 0 32px 64px 0 #010409; /** Extra large floating shadow for full-screen overlays and sheets */
882
882
  --tooltip-bgColor: var(--bgColor-inverse);
883
883
  --tooltip-fgColor: var(--fgColor-onInverse);
884
884
  --border-neutral-emphasis: 0.0625rem solid #b7bdc8;
@@ -915,7 +915,7 @@
915
915
  --fgColor-done: #d3abff; /** Text color for completed/done state indicators */
916
916
  --fgColor-sponsors: #ff90c8; /** Text color for GitHub Sponsors content */
917
917
  --reactionButton-selected-bgColor-hover: #3a8cfd5c;
918
- --avatar-shadow: 0px 0px 0px 2px #0d1117;
918
+ --avatar-shadow: 0 0 0 2px #0d1117;
919
919
  --avatarStack-fade-bgColor-default: #3d444d;
920
920
  --avatarStack-fade-bgColor-muted: #2a313c;
921
921
  --bgColor-accent-emphasis: #194fb1; /** Strong accent background for active states and focused states */
@@ -963,8 +963,8 @@
963
963
  --button-danger-bgColor-hover: #ad0116;
964
964
  --button-danger-borderColor-hover: #ffb1af;
965
965
  --button-danger-fgColor-rest: #ffb1af;
966
- --button-danger-shadow-selected: 0px 0px 0px 0px #000000;
967
- --button-default-shadow-resting: 0px 0px 0px 0px #000000;
966
+ --button-danger-shadow-selected: 0 0 0 0 #000000;
967
+ --button-default-shadow-resting: 0 0 0 0 #000000;
968
968
  --button-inactive-bgColor: #262c36;
969
969
  --button-inactive-fgColor: #b7bdc8;
970
970
  --button-invisible-bgColor-active: #212830;
@@ -977,9 +977,9 @@
977
977
  --button-outline-fgColor-disabled: #74b9ff80;
978
978
  --button-outline-fgColor-hover: #71b7ff;
979
979
  --button-outline-fgColor-rest: #5cacff;
980
- --button-outline-shadow-selected: 0px 0px 0px 0px #000000;
980
+ --button-outline-shadow-selected: 0 0 0 0 #000000;
981
981
  --button-primary-borderColor-rest: #91cbff;
982
- --button-primary-shadow-selected: 0px 0px 0px 0px #000000;
982
+ --button-primary-shadow-selected: 0 0 0 0 #000000;
983
983
  --button-star-iconColor: #f7c843;
984
984
  --buttonCounter-default-bgColor-rest: #2f3742;
985
985
  --buttonCounter-outline-bgColor-hover: #194fb133;
@@ -1693,11 +1693,11 @@
1693
1693
  --reactionButton-selected-fgColor-rest: var(--fgColor-link);
1694
1694
  --selectMenu-borderColor: var(--borderColor-default);
1695
1695
  --selection-bgColor: #194fb1b3; /** Background color for text selection highlights */
1696
- --shadow-floating-legacy: 0px 6px 12px -3px #01040966, 0px 6px 18px 0px #01040966;
1697
- --shadow-inset: inset 0px 1px 0px 0px #0104093d;
1698
- --shadow-resting-medium: 0px 1px 1px 0px #01040966, 0px 3px 6px 0px #010409cc;
1699
- --shadow-resting-small: 0px 1px 1px 0px #01040999, 0px 1px 3px 0px #01040999;
1700
- --shadow-resting-xsmall: 0px 1px 1px 0px #010409cc;
1696
+ --shadow-floating-legacy: 0 6px 12px -3px #01040966, 0 6px 18px 0 #01040966; /** Legacy floating shadow for backward compatibility */
1697
+ --shadow-inset: inset 0 1px 0 0 #0104093d; /** Inset shadow for recessed elements */
1698
+ --shadow-resting-medium: 0 1px 1px 0 #01040966, 0 3px 6px 0 #010409cc; /** Medium resting shadow for cards and elevated surfaces */
1699
+ --shadow-resting-small: 0 1px 1px 0 #01040999, 0 1px 3px 0 #01040999; /** Small resting shadow for buttons and interactive elements */
1700
+ --shadow-resting-xsmall: 0 1px 1px 0 #010409cc; /** Extra small resting shadow for minimal elevation */
1701
1701
  --topicTag-borderColor: var(--borderColor-accent-emphasis);
1702
1702
  --treeViewItem-leadingVisual-iconColor-rest: var(--fgColor-muted);
1703
1703
  --underlineNav-iconColor-rest: var(--fgColor-muted);
@@ -1772,10 +1772,10 @@
1772
1772
  --focus-outline: 2px solid #409eff; /** Focus ring outline for keyboard navigation and accessibility. */
1773
1773
  --page-header-bgColor: var(--bgColor-default);
1774
1774
  --progressBar-track-bgColor: var(--bgColor-inverse);
1775
- --shadow-floating-large: 0px 0px 0px 1px #b7bdc8, 0px 24px 48px 0px #010409; /** Large floating shadow for modals and dialogs */
1776
- --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;
1777
- --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 */
1778
- --shadow-floating-xlarge: 0px 0px 0px 1px #b7bdc8, 0px 32px 64px 0px #010409;
1775
+ --shadow-floating-large: 0 0 0 1px #b7bdc8, 0 24px 48px 0 #010409; /** Large floating shadow for modals and dialogs */
1776
+ --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 */
1777
+ --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 */
1778
+ --shadow-floating-xlarge: 0 0 0 1px #b7bdc8, 0 32px 64px 0 #010409; /** Extra large floating shadow for full-screen overlays and sheets */
1779
1779
  --tooltip-bgColor: var(--bgColor-inverse);
1780
1780
  --tooltip-fgColor: var(--fgColor-onInverse);
1781
1781
  --border-neutral-emphasis: 0.0625rem solid #b7bdc8;
package/dist/css/functional/themes/dark-tritanopia.css CHANGED
@@ -19,7 +19,7 @@
19
19
  --control-checked-bgColor-hover: #2a7aef;
20
20
  --fgColor-accent: #4493f8; /** Accent text for links and interactive elements */
21
21
  --reactionButton-selected-bgColor-hover: #3a8cfd5c;
22
- --avatar-shadow: 0px 0px 0px 2px #0d1117;
22
+ --avatar-shadow: 0 0 0 2px #0d1117;
23
23
  --avatarStack-fade-bgColor-default: #3d444d;
24
24
  --avatarStack-fade-bgColor-muted: #2a313c;
25
25
  --bgColor-accent-emphasis: #1f6feb; /** Strong accent background for active states and focused states */
@@ -66,8 +66,8 @@
66
66
  --borderColor-transparent: #00000000; /** Fully transparent border */
67
67
  --button-danger-bgColor-hover: #b62324;
68
68
  --button-danger-iconColor-rest: var(--button-danger-fgColor-rest);
69
- --button-danger-shadow-selected: 0px 0px 0px 0px #000000;
70
- --button-default-shadow-resting: 0px 0px 0px 0px #000000;
69
+ --button-danger-shadow-selected: 0 0 0 0 #000000;
70
+ --button-default-shadow-resting: 0 0 0 0 #000000;
71
71
  --button-inactive-bgColor: #262c36;
72
72
  --button-inactive-fgColor: #9198a1;
73
73
  --button-invisible-bgColor-disabled: #00000000;
@@ -76,8 +76,8 @@
76
76
  --button-outline-fgColor-disabled: #4493f880;
77
77
  --button-outline-fgColor-hover: #58a6ff;
78
78
  --button-outline-fgColor-rest: #388bfd;
79
- --button-outline-shadow-selected: 0px 0px 0px 0px #000000;
80
- --button-primary-shadow-selected: 0px 0px 0px 0px #000000;
79
+ --button-outline-shadow-selected: 0 0 0 0 #000000;
80
+ --button-primary-shadow-selected: 0 0 0 0 #000000;
81
81
  --button-star-iconColor: #e3b341;
82
82
  --buttonCounter-danger-bgColor-rest: #49020233;
83
83
  --buttonCounter-default-bgColor-rest: #2f3742;
@@ -821,11 +821,11 @@
821
821
  --reactionButton-selected-fgColor-rest: var(--fgColor-link);
822
822
  --selectMenu-borderColor: var(--borderColor-default);
823
823
  --selection-bgColor: #1f6febb3; /** Background color for text selection highlights */
824
- --shadow-floating-legacy: 0px 6px 12px -3px #01040966, 0px 6px 18px 0px #01040966;
825
- --shadow-inset: inset 0px 1px 0px 0px #0104093d;
826
- --shadow-resting-medium: 0px 1px 1px 0px #01040966, 0px 3px 6px 0px #010409cc;
827
- --shadow-resting-small: 0px 1px 1px 0px #01040999, 0px 1px 3px 0px #01040999;
828
- --shadow-resting-xsmall: 0px 1px 1px 0px #010409cc;
824
+ --shadow-floating-legacy: 0 6px 12px -3px #01040966, 0 6px 18px 0 #01040966; /** Legacy floating shadow for backward compatibility */
825
+ --shadow-inset: inset 0 1px 0 0 #0104093d; /** Inset shadow for recessed elements */
826
+ --shadow-resting-medium: 0 1px 1px 0 #01040966, 0 3px 6px 0 #010409cc; /** Medium resting shadow for cards and elevated surfaces */
827
+ --shadow-resting-small: 0 1px 1px 0 #01040999, 0 1px 3px 0 #01040999; /** Small resting shadow for buttons and interactive elements */
828
+ --shadow-resting-xsmall: 0 1px 1px 0 #010409cc; /** Extra small resting shadow for minimal elevation */
829
829
  --tooltip-bgColor: var(--bgColor-emphasis);
830
830
  --treeViewItem-leadingVisual-iconColor-rest: var(--fgColor-muted);
831
831
  --underlineNav-iconColor-rest: var(--fgColor-muted);
@@ -890,10 +890,10 @@
890
890
  --buttonKeybindingHint-danger-borderColor-disabled: var(--buttonKeybindingHint-default-borderColor-disabled);
891
891
  --buttonKeybindingHint-danger-borderColor-rest: var(--buttonKeybindingHint-default-borderColor-rest);
892
892
  --buttonKeybindingHint-danger-fgColor-disabled: var(--buttonKeybindingHint-default-fgColor-disabled);
893
- --shadow-floating-large: 0px 0px 0px 1px #3d444d, 0px 24px 48px 0px #010409; /** Large floating shadow for modals and dialogs */
894
- --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;
895
- --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 */
896
- --shadow-floating-xlarge: 0px 0px 0px 1px #3d444d, 0px 32px 64px 0px #010409;
893
+ --shadow-floating-large: 0 0 0 1px #3d444d, 0 24px 48px 0 #010409; /** Large floating shadow for modals and dialogs */
894
+ --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 */
895
+ --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 */
896
+ --shadow-floating-xlarge: 0 0 0 1px #3d444d, 0 32px 64px 0 #010409; /** Extra large floating shadow for full-screen overlays and sheets */
897
897
  --underlineNav-borderColor-hover: var(--borderColor-neutral-muted);
898
898
  --button-danger-borderColor-active: var(--button-danger-borderColor-hover);
899
899
  --button-outline-borderColor-hover: var(--button-default-borderColor-hover);
@@ -916,7 +916,7 @@
916
916
  --control-checked-bgColor-hover: #2a7aef;
917
917
  --fgColor-accent: #4493f8; /** Accent text for links and interactive elements */
918
918
  --reactionButton-selected-bgColor-hover: #3a8cfd5c;
919
- --avatar-shadow: 0px 0px 0px 2px #0d1117;
919
+ --avatar-shadow: 0 0 0 2px #0d1117;
920
920
  --avatarStack-fade-bgColor-default: #3d444d;
921
921
  --avatarStack-fade-bgColor-muted: #2a313c;
922
922
  --bgColor-accent-emphasis: #1f6feb; /** Strong accent background for active states and focused states */
@@ -963,8 +963,8 @@
963
963
  --borderColor-transparent: #00000000; /** Fully transparent border */
964
964
  --button-danger-bgColor-hover: #b62324;
965
965
  --button-danger-iconColor-rest: var(--button-danger-fgColor-rest);
966
- --button-danger-shadow-selected: 0px 0px 0px 0px #000000;
967
- --button-default-shadow-resting: 0px 0px 0px 0px #000000;
966
+ --button-danger-shadow-selected: 0 0 0 0 #000000;
967
+ --button-default-shadow-resting: 0 0 0 0 #000000;
968
968
  --button-inactive-bgColor: #262c36;
969
969
  --button-inactive-fgColor: #9198a1;
970
970
  --button-invisible-bgColor-disabled: #00000000;
@@ -973,8 +973,8 @@
973
973
  --button-outline-fgColor-disabled: #4493f880;
974
974
  --button-outline-fgColor-hover: #58a6ff;
975
975
  --button-outline-fgColor-rest: #388bfd;
976
- --button-outline-shadow-selected: 0px 0px 0px 0px #000000;
977
- --button-primary-shadow-selected: 0px 0px 0px 0px #000000;
976
+ --button-outline-shadow-selected: 0 0 0 0 #000000;
977
+ --button-primary-shadow-selected: 0 0 0 0 #000000;
978
978
  --button-star-iconColor: #e3b341;
979
979
  --buttonCounter-danger-bgColor-rest: #49020233;
980
980
  --buttonCounter-default-bgColor-rest: #2f3742;
@@ -1718,11 +1718,11 @@
1718
1718
  --reactionButton-selected-fgColor-rest: var(--fgColor-link);
1719
1719
  --selectMenu-borderColor: var(--borderColor-default);
1720
1720
  --selection-bgColor: #1f6febb3; /** Background color for text selection highlights */
1721
- --shadow-floating-legacy: 0px 6px 12px -3px #01040966, 0px 6px 18px 0px #01040966;
1722
- --shadow-inset: inset 0px 1px 0px 0px #0104093d;
1723
- --shadow-resting-medium: 0px 1px 1px 0px #01040966, 0px 3px 6px 0px #010409cc;
1724
- --shadow-resting-small: 0px 1px 1px 0px #01040999, 0px 1px 3px 0px #01040999;
1725
- --shadow-resting-xsmall: 0px 1px 1px 0px #010409cc;
1721
+ --shadow-floating-legacy: 0 6px 12px -3px #01040966, 0 6px 18px 0 #01040966; /** Legacy floating shadow for backward compatibility */
1722
+ --shadow-inset: inset 0 1px 0 0 #0104093d; /** Inset shadow for recessed elements */
1723
+ --shadow-resting-medium: 0 1px 1px 0 #01040966, 0 3px 6px 0 #010409cc; /** Medium resting shadow for cards and elevated surfaces */
1724
+ --shadow-resting-small: 0 1px 1px 0 #01040999, 0 1px 3px 0 #01040999; /** Small resting shadow for buttons and interactive elements */
1725
+ --shadow-resting-xsmall: 0 1px 1px 0 #010409cc; /** Extra small resting shadow for minimal elevation */
1726
1726
  --tooltip-bgColor: var(--bgColor-emphasis);
1727
1727
  --treeViewItem-leadingVisual-iconColor-rest: var(--fgColor-muted);
1728
1728
  --underlineNav-iconColor-rest: var(--fgColor-muted);
@@ -1787,10 +1787,10 @@
1787
1787
  --buttonKeybindingHint-danger-borderColor-disabled: var(--buttonKeybindingHint-default-borderColor-disabled);
1788
1788
  --buttonKeybindingHint-danger-borderColor-rest: var(--buttonKeybindingHint-default-borderColor-rest);
1789
1789
  --buttonKeybindingHint-danger-fgColor-disabled: var(--buttonKeybindingHint-default-fgColor-disabled);
1790
- --shadow-floating-large: 0px 0px 0px 1px #3d444d, 0px 24px 48px 0px #010409; /** Large floating shadow for modals and dialogs */
1791
- --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;
1792
- --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 */
1793
- --shadow-floating-xlarge: 0px 0px 0px 1px #3d444d, 0px 32px 64px 0px #010409;
1790
+ --shadow-floating-large: 0 0 0 1px #3d444d, 0 24px 48px 0 #010409; /** Large floating shadow for modals and dialogs */
1791
+ --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 */
1792
+ --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 */
1793
+ --shadow-floating-xlarge: 0 0 0 1px #3d444d, 0 32px 64px 0 #010409; /** Extra large floating shadow for full-screen overlays and sheets */
1794
1794
  --underlineNav-borderColor-hover: var(--borderColor-neutral-muted);
1795
1795
  --button-danger-borderColor-active: var(--button-danger-borderColor-hover);
1796
1796
  --button-outline-borderColor-hover: var(--button-default-borderColor-hover);
package/dist/css/functional/themes/dark.css CHANGED
@@ -15,7 +15,7 @@
15
15
  --control-checked-bgColor-hover: #2a7aef;
16
16
  --fgColor-accent: #4493f8; /** Accent text for links and interactive elements */
17
17
  --reactionButton-selected-bgColor-hover: #3a8cfd5c;
18
- --avatar-shadow: 0px 0px 0px 2px #0d1117;
18
+ --avatar-shadow: 0 0 0 2px #0d1117;
19
19
  --avatarStack-fade-bgColor-default: #3d444d;
20
20
  --avatarStack-fade-bgColor-muted: #2a313c;
21
21
  --bgColor-accent-emphasis: #1f6feb; /** Strong accent background for active states and focused states */
@@ -59,8 +59,8 @@
59
59
  --borderColor-transparent: #00000000; /** Fully transparent border */
60
60
  --button-danger-bgColor-hover: #b62324;
61
61
  --button-danger-iconColor-rest: var(--button-danger-fgColor-rest);
62
- --button-danger-shadow-selected: 0px 0px 0px 0px #000000;
63
- --button-default-shadow-resting: 0px 0px 0px 0px #000000;
62
+ --button-danger-shadow-selected: 0 0 0 0 #000000;
63
+ --button-default-shadow-resting: 0 0 0 0 #000000;
64
64
  --button-inactive-bgColor: #262c36;
65
65
  --button-inactive-fgColor: #9198a1;
66
66
  --button-invisible-bgColor-disabled: #00000000;
@@ -70,8 +70,8 @@
70
70
  --button-outline-fgColor-disabled: #4493f880;
71
71
  --button-outline-fgColor-hover: #58a6ff;
72
72
  --button-outline-fgColor-rest: #388bfd;
73
- --button-outline-shadow-selected: 0px 0px 0px 0px #000000;
74
- --button-primary-shadow-selected: 0px 0px 0px 0px #000000;
73
+ --button-outline-shadow-selected: 0 0 0 0 #000000;
74
+ --button-primary-shadow-selected: 0 0 0 0 #000000;
75
75
  --button-star-iconColor: #e3b341;
76
76
  --buttonCounter-danger-bgColor-rest: #49020233;
77
77
  --buttonCounter-default-bgColor-rest: #2f3742;
@@ -819,11 +819,11 @@
819
819
  --reactionButton-selected-fgColor-rest: var(--fgColor-link);
820
820
  --selectMenu-borderColor: var(--borderColor-default);
821
821
  --selection-bgColor: #1f6febb3; /** Background color for text selection highlights */
822
- --shadow-floating-legacy: 0px 6px 12px -3px #01040966, 0px 6px 18px 0px #01040966;
823
- --shadow-inset: inset 0px 1px 0px 0px #0104093d;
824
- --shadow-resting-medium: 0px 1px 1px 0px #01040966, 0px 3px 6px 0px #010409cc;
825
- --shadow-resting-small: 0px 1px 1px 0px #01040999, 0px 1px 3px 0px #01040999;
826
- --shadow-resting-xsmall: 0px 1px 1px 0px #010409cc;
822
+ --shadow-floating-legacy: 0 6px 12px -3px #01040966, 0 6px 18px 0 #01040966; /** Legacy floating shadow for backward compatibility */
823
+ --shadow-inset: inset 0 1px 0 0 #0104093d; /** Inset shadow for recessed elements */
824
+ --shadow-resting-medium: 0 1px 1px 0 #01040966, 0 3px 6px 0 #010409cc; /** Medium resting shadow for cards and elevated surfaces */
825
+ --shadow-resting-small: 0 1px 1px 0 #01040999, 0 1px 3px 0 #01040999; /** Small resting shadow for buttons and interactive elements */
826
+ --shadow-resting-xsmall: 0 1px 1px 0 #010409cc; /** Extra small resting shadow for minimal elevation */
827
827
  --tooltip-bgColor: var(--bgColor-emphasis);
828
828
  --treeViewItem-leadingVisual-iconColor-rest: var(--fgColor-muted);
829
829
  --underlineNav-iconColor-rest: var(--fgColor-muted);
@@ -890,10 +890,10 @@
890
890
  --buttonKeybindingHint-danger-borderColor-disabled: var(--buttonKeybindingHint-default-borderColor-disabled);
891
891
  --buttonKeybindingHint-danger-borderColor-rest: var(--buttonKeybindingHint-default-borderColor-rest);
892
892
  --buttonKeybindingHint-danger-fgColor-disabled: var(--buttonKeybindingHint-default-fgColor-disabled);
893
- --shadow-floating-large: 0px 0px 0px 1px #3d444d, 0px 24px 48px 0px #010409; /** Large floating shadow for modals and dialogs */
894
- --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;
895
- --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 */
896
- --shadow-floating-xlarge: 0px 0px 0px 1px #3d444d, 0px 32px 64px 0px #010409;
893
+ --shadow-floating-large: 0 0 0 1px #3d444d, 0 24px 48px 0 #010409; /** Large floating shadow for modals and dialogs */
894
+ --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 */
895
+ --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 */
896
+ --shadow-floating-xlarge: 0 0 0 1px #3d444d, 0 32px 64px 0 #010409; /** Extra large floating shadow for full-screen overlays and sheets */
897
897
  --underlineNav-borderColor-hover: var(--borderColor-neutral-muted);
898
898
  --button-danger-borderColor-active: var(--button-danger-borderColor-hover);
899
899
  --button-outline-borderColor-hover: var(--button-default-borderColor-hover);
@@ -912,7 +912,7 @@
912
912
  --control-checked-bgColor-hover: #2a7aef;
913
913
  --fgColor-accent: #4493f8; /** Accent text for links and interactive elements */
914
914
  --reactionButton-selected-bgColor-hover: #3a8cfd5c;
915
- --avatar-shadow: 0px 0px 0px 2px #0d1117;
915
+ --avatar-shadow: 0 0 0 2px #0d1117;
916
916
  --avatarStack-fade-bgColor-default: #3d444d;
917
917
  --avatarStack-fade-bgColor-muted: #2a313c;
918
918
  --bgColor-accent-emphasis: #1f6feb; /** Strong accent background for active states and focused states */
@@ -956,8 +956,8 @@
956
956
  --borderColor-transparent: #00000000; /** Fully transparent border */
957
957
  --button-danger-bgColor-hover: #b62324;
958
958
  --button-danger-iconColor-rest: var(--button-danger-fgColor-rest);
959
- --button-danger-shadow-selected: 0px 0px 0px 0px #000000;
960
- --button-default-shadow-resting: 0px 0px 0px 0px #000000;
959
+ --button-danger-shadow-selected: 0 0 0 0 #000000;
960
+ --button-default-shadow-resting: 0 0 0 0 #000000;
961
961
  --button-inactive-bgColor: #262c36;
962
962
  --button-inactive-fgColor: #9198a1;
963
963
  --button-invisible-bgColor-disabled: #00000000;
@@ -967,8 +967,8 @@
967
967
  --button-outline-fgColor-disabled: #4493f880;
968
968
  --button-outline-fgColor-hover: #58a6ff;
969
969
  --button-outline-fgColor-rest: #388bfd;
970
- --button-outline-shadow-selected: 0px 0px 0px 0px #000000;
971
- --button-primary-shadow-selected: 0px 0px 0px 0px #000000;
970
+ --button-outline-shadow-selected: 0 0 0 0 #000000;
971
+ --button-primary-shadow-selected: 0 0 0 0 #000000;
972
972
  --button-star-iconColor: #e3b341;
973
973
  --buttonCounter-danger-bgColor-rest: #49020233;
974
974
  --buttonCounter-default-bgColor-rest: #2f3742;
@@ -1716,11 +1716,11 @@
1716
1716
  --reactionButton-selected-fgColor-rest: var(--fgColor-link);
1717
1717
  --selectMenu-borderColor: var(--borderColor-default);
1718
1718
  --selection-bgColor: #1f6febb3; /** Background color for text selection highlights */
1719
- --shadow-floating-legacy: 0px 6px 12px -3px #01040966, 0px 6px 18px 0px #01040966;
1720
- --shadow-inset: inset 0px 1px 0px 0px #0104093d;
1721
- --shadow-resting-medium: 0px 1px 1px 0px #01040966, 0px 3px 6px 0px #010409cc;
1722
- --shadow-resting-small: 0px 1px 1px 0px #01040999, 0px 1px 3px 0px #01040999;
1723
- --shadow-resting-xsmall: 0px 1px 1px 0px #010409cc;
1719
+ --shadow-floating-legacy: 0 6px 12px -3px #01040966, 0 6px 18px 0 #01040966; /** Legacy floating shadow for backward compatibility */
1720
+ --shadow-inset: inset 0 1px 0 0 #0104093d; /** Inset shadow for recessed elements */
1721
+ --shadow-resting-medium: 0 1px 1px 0 #01040966, 0 3px 6px 0 #010409cc; /** Medium resting shadow for cards and elevated surfaces */
1722
+ --shadow-resting-small: 0 1px 1px 0 #01040999, 0 1px 3px 0 #01040999; /** Small resting shadow for buttons and interactive elements */
1723
+ --shadow-resting-xsmall: 0 1px 1px 0 #010409cc; /** Extra small resting shadow for minimal elevation */
1724
1724
  --tooltip-bgColor: var(--bgColor-emphasis);
1725
1725
  --treeViewItem-leadingVisual-iconColor-rest: var(--fgColor-muted);
1726
1726
  --underlineNav-iconColor-rest: var(--fgColor-muted);
@@ -1787,10 +1787,10 @@
1787
1787
  --buttonKeybindingHint-danger-borderColor-disabled: var(--buttonKeybindingHint-default-borderColor-disabled);
1788
1788
  --buttonKeybindingHint-danger-borderColor-rest: var(--buttonKeybindingHint-default-borderColor-rest);
1789
1789
  --buttonKeybindingHint-danger-fgColor-disabled: var(--buttonKeybindingHint-default-fgColor-disabled);
1790
- --shadow-floating-large: 0px 0px 0px 1px #3d444d, 0px 24px 48px 0px #010409; /** Large floating shadow for modals and dialogs */
1791
- --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;
1792
- --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 */
1793
- --shadow-floating-xlarge: 0px 0px 0px 1px #3d444d, 0px 32px 64px 0px #010409;
1790
+ --shadow-floating-large: 0 0 0 1px #3d444d, 0 24px 48px 0 #010409; /** Large floating shadow for modals and dialogs */
1791
+ --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 */
1792
+ --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 */
1793
+ --shadow-floating-xlarge: 0 0 0 1px #3d444d, 0 32px 64px 0 #010409; /** Extra large floating shadow for full-screen overlays and sheets */
1794
1794
  --underlineNav-borderColor-hover: var(--borderColor-neutral-muted);
1795
1795
  --button-danger-borderColor-active: var(--button-danger-borderColor-hover);
1796
1796
  --button-outline-borderColor-hover: var(--button-default-borderColor-hover);