@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/css/functional/themes/dark-dimmed-high-contrast.css CHANGED
@@ -1,3 +1,7 @@
1
+ /**
2
+ * @spec See /DESIGN_TOKENS_SPEC.md for naming logic and semantic pairings.
3
+ * @rule Never use raw values (hex/px). Use semantic tokens ONLY.
4
+ */
1
5
  [data-color-mode="dark"][data-dark-theme="dark_dimmed_high_contrast"],
2
6
  [data-color-mode="auto"][data-light-theme="dark_dimmed_high_contrast"] {
3
7
  --button-danger-fgColor-active: #ffffff;
@@ -14,7 +18,7 @@
14
18
  --control-danger-bgColor-active: #c51120;
15
19
  --fgColor-onEmphasis: #ffffff; /** Text color for use on emphasis backgrounds */
16
20
  --reactionButton-selected-bgColor-hover: #3a8cfd5c;
17
- --avatar-shadow: 0px 0px 0px 2px #0d1117;
21
+ --avatar-shadow: 0 0 0 2px #0d1117;
18
22
  --avatarStack-fade-bgColor-default: #3d444d;
19
23
  --avatarStack-fade-bgColor-muted: #2a313c;
20
24
  --bgColor-accent-emphasis: #1b4b91; /** Strong accent background for active states and focused states */
@@ -60,8 +64,8 @@
60
64
  --button-danger-bgColor-hover: #922323;
61
65
  --button-danger-borderColor-hover: #ffb8b0;
62
66
  --button-danger-fgColor-rest: #ffb8b0;
63
- --button-danger-shadow-selected: 0px 0px 0px 0px #000000;
64
- --button-default-shadow-resting: 0px 0px 0px 0px #000000;
67
+ --button-danger-shadow-selected: 0 0 0 0 #00000000;
68
+ --button-default-shadow-resting: 0 0 0 0 #00000000;
65
69
  --button-inactive-bgColor: #262c36;
66
70
  --button-inactive-fgColor: #9198a1;
67
71
  --button-invisible-bgColor-disabled: #00000000;
@@ -72,11 +76,11 @@
72
76
  --button-outline-bgColor-rest: #f0f6fc;
73
77
  --button-outline-fgColor-hover: #539bf5;
74
78
  --button-outline-fgColor-rest: #4184e4;
75
- --button-outline-shadow-selected: 0px 0px 0px 0px #000000;
79
+ --button-outline-shadow-selected: 0 0 0 0 #00000000;
76
80
  --button-primary-bgColor-active: #347d39;
77
81
  --button-primary-bgColor-hover: #2b6a30;
78
82
  --button-primary-borderColor-rest: #6bc46d;
79
- --button-primary-shadow-selected: 0px 0px 0px 0px #000000;
83
+ --button-primary-shadow-selected: 0 0 0 0 #00000000;
80
84
  --button-star-iconColor: #daaa3f;
81
85
  --buttonCounter-danger-bgColor-rest: #5d0f1233;
82
86
  --buttonCounter-default-bgColor-rest: #2f3742;
@@ -823,11 +827,11 @@
823
827
  --progressBar-bgColor-success: var(--bgColor-success-emphasis);
824
828
  --selectMenu-borderColor: var(--borderColor-default);
825
829
  --selection-bgColor: #1b4b91b3; /** Background color for text selection highlights */
826
- --shadow-floating-legacy: 0px 6px 12px -3px #01040966, 0px 6px 18px 0px #01040966;
827
- --shadow-inset: inset 0px 1px 0px 0px #0104093d;
828
- --shadow-resting-medium: 0px 1px 1px 0px #01040966, 0px 3px 6px 0px #010409cc;
829
- --shadow-resting-small: 0px 1px 1px 0px #01040999, 0px 1px 3px 0px #01040999;
830
- --shadow-resting-xsmall: 0px 1px 1px 0px #010409cc;
830
+ --shadow-floating-legacy: 0 6px 12px -3px #01040966, 0 6px 18px 0 #01040966; /** Legacy floating shadow for backward compatibility */
831
+ --shadow-inset: inset 0 1px 0 0 #0104093d; /** Inset shadow for recessed elements */
832
+ --shadow-resting-medium: 0 1px 1px 0 #01040966, 0 3px 6px 0 #010409cc; /** Medium resting shadow for cards and elevated surfaces */
833
+ --shadow-resting-small: 0 1px 1px 0 #01040999, 0 1px 3px 0 #01040999; /** Small resting shadow for buttons and interactive elements */
834
+ --shadow-resting-xsmall: 0 1px 1px 0 #010409cc; /** Extra small resting shadow for minimal elevation */
831
835
  --topicTag-borderColor: var(--borderColor-accent-emphasis);
832
836
  --treeViewItem-leadingVisual-iconColor-rest: var(--fgColor-muted);
833
837
  --underlineNav-iconColor-rest: var(--fgColor-muted);
@@ -874,10 +878,10 @@
874
878
  --focus-outline: 2px solid #6cb6ff; /** Focus ring outline for keyboard navigation and accessibility. */
875
879
  --progressBar-track-bgColor: var(--bgColor-inverse);
876
880
  --reactionButton-selected-fgColor-rest: var(--fgColor-link);
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;
881
+ --shadow-floating-large: 0 0 0 1px #b7bdc8, 0 24px 48px 0 #010409; /** Large floating shadow for modals and dialogs */
882
+ --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 */
883
+ --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 */
884
+ --shadow-floating-xlarge: 0 0 0 1px #b7bdc8, 0 32px 64px 0 #010409; /** Extra large floating shadow for full-screen overlays and sheets */
881
885
  --tooltip-bgColor: var(--bgColor-inverse);
882
886
  --tooltip-fgColor: var(--fgColor-onInverse);
883
887
  --border-neutral-emphasis: 0.0625rem solid #b7bdc8;
@@ -911,7 +915,7 @@
911
915
  --control-danger-bgColor-active: #c51120;
912
916
  --fgColor-onEmphasis: #ffffff; /** Text color for use on emphasis backgrounds */
913
917
  --reactionButton-selected-bgColor-hover: #3a8cfd5c;
914
- --avatar-shadow: 0px 0px 0px 2px #0d1117;
918
+ --avatar-shadow: 0 0 0 2px #0d1117;
915
919
  --avatarStack-fade-bgColor-default: #3d444d;
916
920
  --avatarStack-fade-bgColor-muted: #2a313c;
917
921
  --bgColor-accent-emphasis: #1b4b91; /** Strong accent background for active states and focused states */
@@ -957,8 +961,8 @@
957
961
  --button-danger-bgColor-hover: #922323;
958
962
  --button-danger-borderColor-hover: #ffb8b0;
959
963
  --button-danger-fgColor-rest: #ffb8b0;
960
- --button-danger-shadow-selected: 0px 0px 0px 0px #000000;
961
- --button-default-shadow-resting: 0px 0px 0px 0px #000000;
964
+ --button-danger-shadow-selected: 0 0 0 0 #00000000;
965
+ --button-default-shadow-resting: 0 0 0 0 #00000000;
962
966
  --button-inactive-bgColor: #262c36;
963
967
  --button-inactive-fgColor: #9198a1;
964
968
  --button-invisible-bgColor-disabled: #00000000;
@@ -969,11 +973,11 @@
969
973
  --button-outline-bgColor-rest: #f0f6fc;
970
974
  --button-outline-fgColor-hover: #539bf5;
971
975
  --button-outline-fgColor-rest: #4184e4;
972
- --button-outline-shadow-selected: 0px 0px 0px 0px #000000;
976
+ --button-outline-shadow-selected: 0 0 0 0 #00000000;
973
977
  --button-primary-bgColor-active: #347d39;
974
978
  --button-primary-bgColor-hover: #2b6a30;
975
979
  --button-primary-borderColor-rest: #6bc46d;
976
- --button-primary-shadow-selected: 0px 0px 0px 0px #000000;
980
+ --button-primary-shadow-selected: 0 0 0 0 #00000000;
977
981
  --button-star-iconColor: #daaa3f;
978
982
  --buttonCounter-danger-bgColor-rest: #5d0f1233;
979
983
  --buttonCounter-default-bgColor-rest: #2f3742;
@@ -1720,11 +1724,11 @@
1720
1724
  --progressBar-bgColor-success: var(--bgColor-success-emphasis);
1721
1725
  --selectMenu-borderColor: var(--borderColor-default);
1722
1726
  --selection-bgColor: #1b4b91b3; /** Background color for text selection highlights */
1723
- --shadow-floating-legacy: 0px 6px 12px -3px #01040966, 0px 6px 18px 0px #01040966;
1724
- --shadow-inset: inset 0px 1px 0px 0px #0104093d;
1725
- --shadow-resting-medium: 0px 1px 1px 0px #01040966, 0px 3px 6px 0px #010409cc;
1726
- --shadow-resting-small: 0px 1px 1px 0px #01040999, 0px 1px 3px 0px #01040999;
1727
- --shadow-resting-xsmall: 0px 1px 1px 0px #010409cc;
1727
+ --shadow-floating-legacy: 0 6px 12px -3px #01040966, 0 6px 18px 0 #01040966; /** Legacy floating shadow for backward compatibility */
1728
+ --shadow-inset: inset 0 1px 0 0 #0104093d; /** Inset shadow for recessed elements */
1729
+ --shadow-resting-medium: 0 1px 1px 0 #01040966, 0 3px 6px 0 #010409cc; /** Medium resting shadow for cards and elevated surfaces */
1730
+ --shadow-resting-small: 0 1px 1px 0 #01040999, 0 1px 3px 0 #01040999; /** Small resting shadow for buttons and interactive elements */
1731
+ --shadow-resting-xsmall: 0 1px 1px 0 #010409cc; /** Extra small resting shadow for minimal elevation */
1728
1732
  --topicTag-borderColor: var(--borderColor-accent-emphasis);
1729
1733
  --treeViewItem-leadingVisual-iconColor-rest: var(--fgColor-muted);
1730
1734
  --underlineNav-iconColor-rest: var(--fgColor-muted);
@@ -1771,10 +1775,10 @@
1771
1775
  --focus-outline: 2px solid #6cb6ff; /** Focus ring outline for keyboard navigation and accessibility. */
1772
1776
  --progressBar-track-bgColor: var(--bgColor-inverse);
1773
1777
  --reactionButton-selected-fgColor-rest: var(--fgColor-link);
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;
1778
+ --shadow-floating-large: 0 0 0 1px #b7bdc8, 0 24px 48px 0 #010409; /** Large floating shadow for modals and dialogs */
1779
+ --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 */
1780
+ --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 */
1781
+ --shadow-floating-xlarge: 0 0 0 1px #b7bdc8, 0 32px 64px 0 #010409; /** Extra large floating shadow for full-screen overlays and sheets */
1778
1782
  --tooltip-bgColor: var(--bgColor-inverse);
1779
1783
  --tooltip-fgColor: var(--fgColor-onInverse);
1780
1784
  --border-neutral-emphasis: 0.0625rem solid #b7bdc8;
package/dist/css/functional/themes/dark-dimmed.css CHANGED
@@ -1,3 +1,7 @@
1
+ /**
2
+ * @spec See /DESIGN_TOKENS_SPEC.md for naming logic and semantic pairings.
3
+ * @rule Never use raw values (hex/px). Use semantic tokens ONLY.
4
+ */
1
5
  [data-color-mode="dark"][data-dark-theme="dark_dimmed"],
2
6
  [data-color-mode="auto"][data-light-theme="dark_dimmed"] {
3
7
  --button-danger-fgColor-active: #ffffff;
@@ -19,7 +23,7 @@
19
23
  --control-checked-borderColor-hover: #3876d3;
20
24
  --fgColor-accent: #478be6; /** Accent text for links and interactive elements */
21
25
  --reactionButton-selected-bgColor-hover: #4285e55c;
22
- --avatar-shadow: 0px 0px 0px 2px #0d1117;
26
+ --avatar-shadow: 0 0 0 2px #0d1117;
23
27
  --avatarStack-fade-bgColor-default: #3d444d;
24
28
  --avatarStack-fade-bgColor-muted: #2a313c;
25
29
  --bgColor-accent-emphasis: #316dca; /** Strong accent background for active states and focused states */
@@ -67,9 +71,9 @@
67
71
  --button-danger-bgColor-hover: #ad2e2c;
68
72
  --button-danger-borderColor-rest: var(--control-borderColor-rest);
69
73
  --button-danger-iconColor-rest: var(--button-danger-fgColor-rest);
70
- --button-danger-shadow-selected: 0px 0px 0px 0px #000000;
74
+ --button-danger-shadow-selected: 0 0 0 0 #00000000;
71
75
  --button-default-borderColor-rest: var(--control-borderColor-rest);
72
- --button-default-shadow-resting: 0px 0px 0px 0px #000000;
76
+ --button-default-shadow-resting: 0 0 0 0 #00000000;
73
77
  --button-inactive-bgColor: #2a313c;
74
78
  --button-inactive-fgColor: #656c76;
75
79
  --button-invisible-bgColor-disabled: #00000000;
@@ -80,8 +84,8 @@
80
84
  --button-outline-bgColor-rest: #f0f6fc;
81
85
  --button-outline-fgColor-hover: #539bf5;
82
86
  --button-outline-fgColor-rest: #4184e4;
83
- --button-outline-shadow-selected: 0px 0px 0px 0px #000000;
84
- --button-primary-shadow-selected: 0px 0px 0px 0px #000000;
87
+ --button-outline-shadow-selected: 0 0 0 0 #00000000;
88
+ --button-primary-shadow-selected: 0 0 0 0 #00000000;
85
89
  --button-star-iconColor: #daaa3f;
86
90
  --buttonCounter-danger-bgColor-rest: #5d0f1233;
87
91
  --buttonCounter-default-bgColor-rest: #2f3742;
@@ -841,15 +845,15 @@
841
845
  --reactionButton-selected-fgColor-rest: var(--fgColor-link);
842
846
  --selectMenu-borderColor: var(--borderColor-default);
843
847
  --selection-bgColor: #316dcab3; /** Background color for text selection highlights */
844
- --shadow-floating-large: 0px 0px 0px 1px #3d444d, 0px 24px 48px 0px #010409; /** Large floating shadow for modals and dialogs */
845
- --shadow-floating-legacy: 0px 6px 12px -3px #01040966, 0px 6px 18px 0px #01040966;
846
- --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;
847
- --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 */
848
- --shadow-floating-xlarge: 0px 0px 0px 1px #3d444d, 0px 32px 64px 0px #010409;
849
- --shadow-inset: inset 0px 1px 0px 0px #0104093d;
850
- --shadow-resting-medium: 0px 1px 1px 0px #01040966, 0px 3px 6px 0px #010409cc;
851
- --shadow-resting-small: 0px 1px 1px 0px #01040999, 0px 1px 3px 0px #01040999;
852
- --shadow-resting-xsmall: 0px 1px 1px 0px #010409cc;
848
+ --shadow-floating-large: 0 0 0 1px #3d444d, 0 24px 48px 0 #010409; /** Large floating shadow for modals and dialogs */
849
+ --shadow-floating-legacy: 0 6px 12px -3px #01040966, 0 6px 18px 0 #01040966; /** Legacy floating shadow for backward compatibility */
850
+ --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 */
851
+ --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 */
852
+ --shadow-floating-xlarge: 0 0 0 1px #3d444d, 0 32px 64px 0 #010409; /** Extra large floating shadow for full-screen overlays and sheets */
853
+ --shadow-inset: inset 0 1px 0 0 #0104093d; /** Inset shadow for recessed elements */
854
+ --shadow-resting-medium: 0 1px 1px 0 #01040966, 0 3px 6px 0 #010409cc; /** Medium resting shadow for cards and elevated surfaces */
855
+ --shadow-resting-small: 0 1px 1px 0 #01040999, 0 1px 3px 0 #01040999; /** Small resting shadow for buttons and interactive elements */
856
+ --shadow-resting-xsmall: 0 1px 1px 0 #010409cc; /** Extra small resting shadow for minimal elevation */
853
857
  --tooltip-bgColor: var(--bgColor-emphasis);
854
858
  --tooltip-fgColor: var(--fgColor-onEmphasis);
855
859
  --treeViewItem-leadingVisual-iconColor-rest: var(--fgColor-muted);
@@ -916,7 +920,7 @@
916
920
  --control-checked-borderColor-hover: #3876d3;
917
921
  --fgColor-accent: #478be6; /** Accent text for links and interactive elements */
918
922
  --reactionButton-selected-bgColor-hover: #4285e55c;
919
- --avatar-shadow: 0px 0px 0px 2px #0d1117;
923
+ --avatar-shadow: 0 0 0 2px #0d1117;
920
924
  --avatarStack-fade-bgColor-default: #3d444d;
921
925
  --avatarStack-fade-bgColor-muted: #2a313c;
922
926
  --bgColor-accent-emphasis: #316dca; /** Strong accent background for active states and focused states */
@@ -964,9 +968,9 @@
964
968
  --button-danger-bgColor-hover: #ad2e2c;
965
969
  --button-danger-borderColor-rest: var(--control-borderColor-rest);
966
970
  --button-danger-iconColor-rest: var(--button-danger-fgColor-rest);
967
- --button-danger-shadow-selected: 0px 0px 0px 0px #000000;
971
+ --button-danger-shadow-selected: 0 0 0 0 #00000000;
968
972
  --button-default-borderColor-rest: var(--control-borderColor-rest);
969
- --button-default-shadow-resting: 0px 0px 0px 0px #000000;
973
+ --button-default-shadow-resting: 0 0 0 0 #00000000;
970
974
  --button-inactive-bgColor: #2a313c;
971
975
  --button-inactive-fgColor: #656c76;
972
976
  --button-invisible-bgColor-disabled: #00000000;
@@ -977,8 +981,8 @@
977
981
  --button-outline-bgColor-rest: #f0f6fc;
978
982
  --button-outline-fgColor-hover: #539bf5;
979
983
  --button-outline-fgColor-rest: #4184e4;
980
- --button-outline-shadow-selected: 0px 0px 0px 0px #000000;
981
- --button-primary-shadow-selected: 0px 0px 0px 0px #000000;
984
+ --button-outline-shadow-selected: 0 0 0 0 #00000000;
985
+ --button-primary-shadow-selected: 0 0 0 0 #00000000;
982
986
  --button-star-iconColor: #daaa3f;
983
987
  --buttonCounter-danger-bgColor-rest: #5d0f1233;
984
988
  --buttonCounter-default-bgColor-rest: #2f3742;
@@ -1738,15 +1742,15 @@
1738
1742
  --reactionButton-selected-fgColor-rest: var(--fgColor-link);
1739
1743
  --selectMenu-borderColor: var(--borderColor-default);
1740
1744
  --selection-bgColor: #316dcab3; /** Background color for text selection highlights */
1741
- --shadow-floating-large: 0px 0px 0px 1px #3d444d, 0px 24px 48px 0px #010409; /** Large floating shadow for modals and dialogs */
1742
- --shadow-floating-legacy: 0px 6px 12px -3px #01040966, 0px 6px 18px 0px #01040966;
1743
- --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;
1744
- --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 */
1745
- --shadow-floating-xlarge: 0px 0px 0px 1px #3d444d, 0px 32px 64px 0px #010409;
1746
- --shadow-inset: inset 0px 1px 0px 0px #0104093d;
1747
- --shadow-resting-medium: 0px 1px 1px 0px #01040966, 0px 3px 6px 0px #010409cc;
1748
- --shadow-resting-small: 0px 1px 1px 0px #01040999, 0px 1px 3px 0px #01040999;
1749
- --shadow-resting-xsmall: 0px 1px 1px 0px #010409cc;
1745
+ --shadow-floating-large: 0 0 0 1px #3d444d, 0 24px 48px 0 #010409; /** Large floating shadow for modals and dialogs */
1746
+ --shadow-floating-legacy: 0 6px 12px -3px #01040966, 0 6px 18px 0 #01040966; /** Legacy floating shadow for backward compatibility */
1747
+ --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 */
1748
+ --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 */
1749
+ --shadow-floating-xlarge: 0 0 0 1px #3d444d, 0 32px 64px 0 #010409; /** Extra large floating shadow for full-screen overlays and sheets */
1750
+ --shadow-inset: inset 0 1px 0 0 #0104093d; /** Inset shadow for recessed elements */
1751
+ --shadow-resting-medium: 0 1px 1px 0 #01040966, 0 3px 6px 0 #010409cc; /** Medium resting shadow for cards and elevated surfaces */
1752
+ --shadow-resting-small: 0 1px 1px 0 #01040999, 0 1px 3px 0 #01040999; /** Small resting shadow for buttons and interactive elements */
1753
+ --shadow-resting-xsmall: 0 1px 1px 0 #010409cc; /** Extra small resting shadow for minimal elevation */
1750
1754
  --tooltip-bgColor: var(--bgColor-emphasis);
1751
1755
  --tooltip-fgColor: var(--fgColor-onEmphasis);
1752
1756
  --treeViewItem-leadingVisual-iconColor-rest: var(--fgColor-muted);
package/dist/css/functional/themes/dark-high-contrast.css CHANGED
@@ -1,3 +1,7 @@
1
+ /**
2
+ * @spec See /DESIGN_TOKENS_SPEC.md for naming logic and semantic pairings.
3
+ * @rule Never use raw values (hex/px). Use semantic tokens ONLY.
4
+ */
1
5
  [data-color-mode="dark"][data-dark-theme="dark_high_contrast"],
2
6
  [data-color-mode="auto"][data-light-theme="dark_high_contrast"] {
3
7
  --button-primary-bgColor-active: #109135;
@@ -13,7 +17,7 @@
13
17
  --fgColor-sponsors: #ff90c8; /** Text color for GitHub Sponsors content */
14
18
  --fgColor-success: #2bd853; /** Success text for positive feedback and completed states */
15
19
  --reactionButton-selected-bgColor-hover: #5dadff5c;
16
- --avatar-shadow: 0px 0px 0px 2px #0d1117;
20
+ --avatar-shadow: 0 0 0 2px #0d1117;
17
21
  --avatarStack-fade-bgColor-default: #3d444d;
18
22
  --avatarStack-fade-bgColor-muted: #2a313c;
19
23
  --bgColor-accent-emphasis: #194fb1; /** Strong accent background for active states and focused states */
@@ -58,8 +62,8 @@
58
62
  --button-danger-borderColor-active: #ffb1af;
59
63
  --button-danger-borderColor-hover: #ffb1af;
60
64
  --button-danger-fgColor-rest: #ffb1af;
61
- --button-danger-shadow-selected: 0px 0px 0px 0px #000000;
62
- --button-default-shadow-resting: 0px 0px 0px 0px #000000;
65
+ --button-danger-shadow-selected: 0 0 0 0 #00000000;
66
+ --button-default-shadow-resting: 0 0 0 0 #00000000;
63
67
  --button-inactive-fgColor: #b7bdc8;
64
68
  --button-invisible-bgColor-active: #212830;
65
69
  --button-invisible-bgColor-disabled: #00000000;
@@ -72,10 +76,10 @@
72
76
  --button-outline-fgColor-disabled: #74b9ff80;
73
77
  --button-outline-fgColor-hover: #71b7ff;
74
78
  --button-outline-fgColor-rest: #5cacff;
75
- --button-outline-shadow-selected: 0px 0px 0px 0px #000000;
79
+ --button-outline-shadow-selected: 0 0 0 0 #00000000;
76
80
  --button-primary-borderColor-disabled: #4ae16866;
77
81
  --button-primary-borderColor-rest: #4ae168;
78
- --button-primary-shadow-selected: 0px 0px 0px 0px #000000;
82
+ --button-primary-shadow-selected: 0 0 0 0 #00000000;
79
83
  --button-star-iconColor: #f7c843;
80
84
  --buttonCounter-default-bgColor-rest: #2f3742;
81
85
  --buttonCounter-outline-bgColor-hover: #194fb133;
@@ -792,11 +796,11 @@
792
796
  --reactionButton-selected-fgColor-rest: var(--fgColor-link);
793
797
  --selectMenu-borderColor: var(--borderColor-default);
794
798
  --selection-bgColor: #194fb1b3; /** Background color for text selection highlights */
795
- --shadow-floating-legacy: 0px 6px 12px -3px #01040966, 0px 6px 18px 0px #01040966;
796
- --shadow-inset: inset 0px 1px 0px 0px #0104093d;
797
- --shadow-resting-medium: 0px 1px 1px 0px #01040966, 0px 3px 6px 0px #010409cc;
798
- --shadow-resting-small: 0px 1px 1px 0px #01040999, 0px 1px 3px 0px #01040999;
799
- --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 */
800
804
  --topicTag-borderColor: var(--borderColor-accent-emphasis);
801
805
  --treeViewItem-leadingVisual-iconColor-rest: var(--fgColor-muted);
802
806
  --underlineNav-iconColor-rest: var(--fgColor-muted);
@@ -870,10 +874,10 @@
870
874
  --focus-outline: 2px solid #409eff; /** Focus ring outline for keyboard navigation and accessibility. */
871
875
  --page-header-bgColor: var(--bgColor-default);
872
876
  --progressBar-track-bgColor: var(--bgColor-inverse);
873
- --shadow-floating-large: 0px 0px 0px 1px #b7bdc8, 0px 24px 48px 0px #010409; /** Large floating shadow for modals and dialogs */
874
- --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;
875
- --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 */
876
- --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 */
877
881
  --tooltip-bgColor: var(--bgColor-inverse);
878
882
  --tooltip-fgColor: var(--fgColor-onInverse);
879
883
  --border-neutral-emphasis: 0.0625rem solid #b7bdc8;
@@ -910,7 +914,7 @@
910
914
  --fgColor-sponsors: #ff90c8; /** Text color for GitHub Sponsors content */
911
915
  --fgColor-success: #2bd853; /** Success text for positive feedback and completed states */
912
916
  --reactionButton-selected-bgColor-hover: #5dadff5c;
913
- --avatar-shadow: 0px 0px 0px 2px #0d1117;
917
+ --avatar-shadow: 0 0 0 2px #0d1117;
914
918
  --avatarStack-fade-bgColor-default: #3d444d;
915
919
  --avatarStack-fade-bgColor-muted: #2a313c;
916
920
  --bgColor-accent-emphasis: #194fb1; /** Strong accent background for active states and focused states */
@@ -955,8 +959,8 @@
955
959
  --button-danger-borderColor-active: #ffb1af;
956
960
  --button-danger-borderColor-hover: #ffb1af;
957
961
  --button-danger-fgColor-rest: #ffb1af;
958
- --button-danger-shadow-selected: 0px 0px 0px 0px #000000;
959
- --button-default-shadow-resting: 0px 0px 0px 0px #000000;
962
+ --button-danger-shadow-selected: 0 0 0 0 #00000000;
963
+ --button-default-shadow-resting: 0 0 0 0 #00000000;
960
964
  --button-inactive-fgColor: #b7bdc8;
961
965
  --button-invisible-bgColor-active: #212830;
962
966
  --button-invisible-bgColor-disabled: #00000000;
@@ -969,10 +973,10 @@
969
973
  --button-outline-fgColor-disabled: #74b9ff80;
970
974
  --button-outline-fgColor-hover: #71b7ff;
971
975
  --button-outline-fgColor-rest: #5cacff;
972
- --button-outline-shadow-selected: 0px 0px 0px 0px #000000;
976
+ --button-outline-shadow-selected: 0 0 0 0 #00000000;
973
977
  --button-primary-borderColor-disabled: #4ae16866;
974
978
  --button-primary-borderColor-rest: #4ae168;
975
- --button-primary-shadow-selected: 0px 0px 0px 0px #000000;
979
+ --button-primary-shadow-selected: 0 0 0 0 #00000000;
976
980
  --button-star-iconColor: #f7c843;
977
981
  --buttonCounter-default-bgColor-rest: #2f3742;
978
982
  --buttonCounter-outline-bgColor-hover: #194fb133;
@@ -1689,11 +1693,11 @@
1689
1693
  --reactionButton-selected-fgColor-rest: var(--fgColor-link);
1690
1694
  --selectMenu-borderColor: var(--borderColor-default);
1691
1695
  --selection-bgColor: #194fb1b3; /** Background color for text selection highlights */
1692
- --shadow-floating-legacy: 0px 6px 12px -3px #01040966, 0px 6px 18px 0px #01040966;
1693
- --shadow-inset: inset 0px 1px 0px 0px #0104093d;
1694
- --shadow-resting-medium: 0px 1px 1px 0px #01040966, 0px 3px 6px 0px #010409cc;
1695
- --shadow-resting-small: 0px 1px 1px 0px #01040999, 0px 1px 3px 0px #01040999;
1696
- --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 */
1697
1701
  --topicTag-borderColor: var(--borderColor-accent-emphasis);
1698
1702
  --treeViewItem-leadingVisual-iconColor-rest: var(--fgColor-muted);
1699
1703
  --underlineNav-iconColor-rest: var(--fgColor-muted);
@@ -1767,10 +1771,10 @@
1767
1771
  --focus-outline: 2px solid #409eff; /** Focus ring outline for keyboard navigation and accessibility. */
1768
1772
  --page-header-bgColor: var(--bgColor-default);
1769
1773
  --progressBar-track-bgColor: var(--bgColor-inverse);
1770
- --shadow-floating-large: 0px 0px 0px 1px #b7bdc8, 0px 24px 48px 0px #010409; /** Large floating shadow for modals and dialogs */
1771
- --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;
1772
- --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 */
1773
- --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 */
1774
1778
  --tooltip-bgColor: var(--bgColor-inverse);
1775
1779
  --tooltip-fgColor: var(--fgColor-onInverse);
1776
1780
  --border-neutral-emphasis: 0.0625rem solid #b7bdc8;
package/dist/css/functional/themes/dark-tritanopia-high-contrast.css CHANGED
@@ -1,3 +1,7 @@
1
+ /**
2
+ * @spec See /DESIGN_TOKENS_SPEC.md for naming logic and semantic pairings.
3
+ * @rule Never use raw values (hex/px). Use semantic tokens ONLY.
4
+ */
1
5
  [data-color-mode="dark"][data-dark-theme="dark_tritanopia_high_contrast"],
2
6
  [data-color-mode="auto"][data-light-theme="dark_tritanopia_high_contrast"] {
3
7
  --button-outline-bgColor-active: #0d419d;
@@ -14,7 +18,7 @@
14
18
  --fgColor-done: #d3abff; /** Text color for completed/done state indicators */
15
19
  --fgColor-sponsors: #ff90c8; /** Text color for GitHub Sponsors content */
16
20
  --reactionButton-selected-bgColor-hover: #3a8cfd5c;
17
- --avatar-shadow: 0px 0px 0px 2px #0d1117;
21
+ --avatar-shadow: 0 0 0 2px #0d1117;
18
22
  --avatarStack-fade-bgColor-default: #3d444d;
19
23
  --avatarStack-fade-bgColor-muted: #2a313c;
20
24
  --bgColor-accent-emphasis: #194fb1; /** Strong accent background for active states and focused states */
@@ -62,8 +66,8 @@
62
66
  --button-danger-bgColor-hover: #ad0116;
63
67
  --button-danger-borderColor-hover: #ffb1af;
64
68
  --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;
69
+ --button-danger-shadow-selected: 0 0 0 0 #00000000;
70
+ --button-default-shadow-resting: 0 0 0 0 #00000000;
67
71
  --button-inactive-bgColor: #262c36;
68
72
  --button-inactive-fgColor: #b7bdc8;
69
73
  --button-invisible-bgColor-active: #212830;
@@ -76,9 +80,9 @@
76
80
  --button-outline-fgColor-disabled: #74b9ff80;
77
81
  --button-outline-fgColor-hover: #71b7ff;
78
82
  --button-outline-fgColor-rest: #5cacff;
79
- --button-outline-shadow-selected: 0px 0px 0px 0px #000000;
83
+ --button-outline-shadow-selected: 0 0 0 0 #00000000;
80
84
  --button-primary-borderColor-rest: #91cbff;
81
- --button-primary-shadow-selected: 0px 0px 0px 0px #000000;
85
+ --button-primary-shadow-selected: 0 0 0 0 #00000000;
82
86
  --button-star-iconColor: #f7c843;
83
87
  --buttonCounter-default-bgColor-rest: #2f3742;
84
88
  --buttonCounter-outline-bgColor-hover: #194fb133;
@@ -792,11 +796,11 @@
792
796
  --reactionButton-selected-fgColor-rest: var(--fgColor-link);
793
797
  --selectMenu-borderColor: var(--borderColor-default);
794
798
  --selection-bgColor: #194fb1b3; /** Background color for text selection highlights */
795
- --shadow-floating-legacy: 0px 6px 12px -3px #01040966, 0px 6px 18px 0px #01040966;
796
- --shadow-inset: inset 0px 1px 0px 0px #0104093d;
797
- --shadow-resting-medium: 0px 1px 1px 0px #01040966, 0px 3px 6px 0px #010409cc;
798
- --shadow-resting-small: 0px 1px 1px 0px #01040999, 0px 1px 3px 0px #01040999;
799
- --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 */
800
804
  --topicTag-borderColor: var(--borderColor-accent-emphasis);
801
805
  --treeViewItem-leadingVisual-iconColor-rest: var(--fgColor-muted);
802
806
  --underlineNav-iconColor-rest: var(--fgColor-muted);
@@ -871,10 +875,10 @@
871
875
  --focus-outline: 2px solid #409eff; /** Focus ring outline for keyboard navigation and accessibility. */
872
876
  --page-header-bgColor: var(--bgColor-default);
873
877
  --progressBar-track-bgColor: var(--bgColor-inverse);
874
- --shadow-floating-large: 0px 0px 0px 1px #b7bdc8, 0px 24px 48px 0px #010409; /** Large floating shadow for modals and dialogs */
875
- --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;
876
- --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 */
877
- --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 */
878
882
  --tooltip-bgColor: var(--bgColor-inverse);
879
883
  --tooltip-fgColor: var(--fgColor-onInverse);
880
884
  --border-neutral-emphasis: 0.0625rem solid #b7bdc8;
@@ -911,7 +915,7 @@
911
915
  --fgColor-done: #d3abff; /** Text color for completed/done state indicators */
912
916
  --fgColor-sponsors: #ff90c8; /** Text color for GitHub Sponsors content */
913
917
  --reactionButton-selected-bgColor-hover: #3a8cfd5c;
914
- --avatar-shadow: 0px 0px 0px 2px #0d1117;
918
+ --avatar-shadow: 0 0 0 2px #0d1117;
915
919
  --avatarStack-fade-bgColor-default: #3d444d;
916
920
  --avatarStack-fade-bgColor-muted: #2a313c;
917
921
  --bgColor-accent-emphasis: #194fb1; /** Strong accent background for active states and focused states */
@@ -959,8 +963,8 @@
959
963
  --button-danger-bgColor-hover: #ad0116;
960
964
  --button-danger-borderColor-hover: #ffb1af;
961
965
  --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;
966
+ --button-danger-shadow-selected: 0 0 0 0 #00000000;
967
+ --button-default-shadow-resting: 0 0 0 0 #00000000;
964
968
  --button-inactive-bgColor: #262c36;
965
969
  --button-inactive-fgColor: #b7bdc8;
966
970
  --button-invisible-bgColor-active: #212830;
@@ -973,9 +977,9 @@
973
977
  --button-outline-fgColor-disabled: #74b9ff80;
974
978
  --button-outline-fgColor-hover: #71b7ff;
975
979
  --button-outline-fgColor-rest: #5cacff;
976
- --button-outline-shadow-selected: 0px 0px 0px 0px #000000;
980
+ --button-outline-shadow-selected: 0 0 0 0 #00000000;
977
981
  --button-primary-borderColor-rest: #91cbff;
978
- --button-primary-shadow-selected: 0px 0px 0px 0px #000000;
982
+ --button-primary-shadow-selected: 0 0 0 0 #00000000;
979
983
  --button-star-iconColor: #f7c843;
980
984
  --buttonCounter-default-bgColor-rest: #2f3742;
981
985
  --buttonCounter-outline-bgColor-hover: #194fb133;
@@ -1689,11 +1693,11 @@
1689
1693
  --reactionButton-selected-fgColor-rest: var(--fgColor-link);
1690
1694
  --selectMenu-borderColor: var(--borderColor-default);
1691
1695
  --selection-bgColor: #194fb1b3; /** Background color for text selection highlights */
1692
- --shadow-floating-legacy: 0px 6px 12px -3px #01040966, 0px 6px 18px 0px #01040966;
1693
- --shadow-inset: inset 0px 1px 0px 0px #0104093d;
1694
- --shadow-resting-medium: 0px 1px 1px 0px #01040966, 0px 3px 6px 0px #010409cc;
1695
- --shadow-resting-small: 0px 1px 1px 0px #01040999, 0px 1px 3px 0px #01040999;
1696
- --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 */
1697
1701
  --topicTag-borderColor: var(--borderColor-accent-emphasis);
1698
1702
  --treeViewItem-leadingVisual-iconColor-rest: var(--fgColor-muted);
1699
1703
  --underlineNav-iconColor-rest: var(--fgColor-muted);
@@ -1768,10 +1772,10 @@
1768
1772
  --focus-outline: 2px solid #409eff; /** Focus ring outline for keyboard navigation and accessibility. */
1769
1773
  --page-header-bgColor: var(--bgColor-default);
1770
1774
  --progressBar-track-bgColor: var(--bgColor-inverse);
1771
- --shadow-floating-large: 0px 0px 0px 1px #b7bdc8, 0px 24px 48px 0px #010409; /** Large floating shadow for modals and dialogs */
1772
- --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;
1773
- --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 */
1774
- --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 */
1775
1779
  --tooltip-bgColor: var(--bgColor-inverse);
1776
1780
  --tooltip-fgColor: var(--fgColor-onInverse);
1777
1781
  --border-neutral-emphasis: 0.0625rem solid #b7bdc8;