@primer/primitives 11.4.0 → 11.4.1-rc.24c79953

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 (152) 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 +17 -3
  7. package/dist/build/schemas/colorToken.d.ts +1 -1
  8. package/dist/build/schemas/cubicBezierToken.d.ts +1 -1
  9. package/dist/build/schemas/dimensionToken.d.ts +9 -2
  10. package/dist/build/schemas/dimensionValue.d.ts +12 -1
  11. package/dist/build/schemas/dimensionValue.js +10 -13
  12. package/dist/build/schemas/durationToken.d.ts +8 -2
  13. package/dist/build/schemas/durationValue.d.ts +11 -1
  14. package/dist/build/schemas/durationValue.js +13 -3
  15. package/dist/build/schemas/fontFamilyToken.d.ts +1 -1
  16. package/dist/build/schemas/fontWeightToken.d.ts +1 -1
  17. package/dist/build/schemas/gradientToken.d.ts +1 -1
  18. package/dist/build/schemas/numberToken.d.ts +1 -1
  19. package/dist/build/schemas/shadowToken.d.ts +673 -85
  20. package/dist/build/schemas/stringToken.d.ts +1 -1
  21. package/dist/build/schemas/stringToken.js +1 -1
  22. package/dist/build/schemas/tokenType.d.ts +1 -1
  23. package/dist/build/schemas/transitionToken.d.ts +15 -3
  24. package/dist/build/schemas/typographyToken.d.ts +19 -5
  25. package/dist/build/schemas/typographyToken.js +1 -1
  26. package/dist/build/schemas/validTokenType.d.ts +1 -1
  27. package/dist/build/schemas/validTokenType.js +1 -1
  28. package/dist/build/schemas/viewportRangeToken.d.ts +1 -1
  29. package/dist/build/transformers/borderToCss.js +17 -1
  30. package/dist/build/transformers/dimensionToPixelUnitless.d.ts +3 -2
  31. package/dist/build/transformers/dimensionToPixelUnitless.js +22 -26
  32. package/dist/build/transformers/dimensionToRem.d.ts +2 -1
  33. package/dist/build/transformers/dimensionToRem.js +21 -22
  34. package/dist/build/transformers/dimensionToRemPxArray.d.ts +2 -1
  35. package/dist/build/transformers/dimensionToRemPxArray.js +21 -22
  36. package/dist/build/transformers/durationToCss.d.ts +2 -1
  37. package/dist/build/transformers/durationToCss.js +18 -11
  38. package/dist/build/transformers/shadowToCss.js +12 -1
  39. package/dist/build/transformers/utilities/parseDimension.d.ts +12 -0
  40. package/dist/build/transformers/utilities/parseDimension.js +31 -0
  41. package/dist/build/types/borderTokenValue.d.ts +3 -1
  42. package/dist/build/types/dimensionTokenValue.d.ts +9 -0
  43. package/dist/build/types/shadowTokenValue.d.ts +6 -4
  44. package/dist/css/functional/themes/dark-colorblind-high-contrast.css +32 -28
  45. package/dist/css/functional/themes/dark-colorblind.css +32 -28
  46. package/dist/css/functional/themes/dark-dimmed-high-contrast.css +32 -28
  47. package/dist/css/functional/themes/dark-dimmed.css +32 -28
  48. package/dist/css/functional/themes/dark-high-contrast.css +32 -28
  49. package/dist/css/functional/themes/dark-tritanopia-high-contrast.css +32 -28
  50. package/dist/css/functional/themes/dark-tritanopia.css +32 -28
  51. package/dist/css/functional/themes/dark.css +32 -28
  52. package/dist/css/functional/themes/light-colorblind-high-contrast.css +32 -28
  53. package/dist/css/functional/themes/light-colorblind.css +32 -28
  54. package/dist/css/functional/themes/light-high-contrast.css +32 -28
  55. package/dist/css/functional/themes/light-tritanopia-high-contrast.css +32 -28
  56. package/dist/css/functional/themes/light-tritanopia.css +32 -28
  57. package/dist/css/functional/themes/light.css +32 -28
  58. package/dist/css/primitives.css +4 -0
  59. package/dist/docs/base/motion/motion.json +96 -24
  60. package/dist/docs/base/size/size.json +76 -19
  61. package/dist/docs/base/typography/typography.json +24 -6
  62. package/dist/docs/functional/size/border.json +26 -11
  63. package/dist/docs/functional/size/breakpoints.json +24 -6
  64. package/dist/docs/functional/size/radius.json +16 -4
  65. package/dist/docs/functional/size/size.json +60 -15
  66. package/dist/docs/functional/themes/dark-colorblind-high-contrast.json +1423 -346
  67. package/dist/docs/functional/themes/dark-colorblind.json +1423 -346
  68. package/dist/docs/functional/themes/dark-dimmed-high-contrast.json +1423 -346
  69. package/dist/docs/functional/themes/dark-dimmed.json +1423 -346
  70. package/dist/docs/functional/themes/dark-high-contrast.json +1423 -346
  71. package/dist/docs/functional/themes/dark-tritanopia-high-contrast.json +1423 -346
  72. package/dist/docs/functional/themes/dark-tritanopia.json +1423 -346
  73. package/dist/docs/functional/themes/dark.json +1423 -346
  74. package/dist/docs/functional/themes/light-colorblind-high-contrast.json +1426 -349
  75. package/dist/docs/functional/themes/light-colorblind.json +1426 -349
  76. package/dist/docs/functional/themes/light-high-contrast.json +1426 -349
  77. package/dist/docs/functional/themes/light-tritanopia-high-contrast.json +1426 -349
  78. package/dist/docs/functional/themes/light-tritanopia.json +1426 -349
  79. package/dist/docs/functional/themes/light.json +1426 -349
  80. package/dist/docs/functional/typography/typography.json +8 -2
  81. package/dist/fallbacks/base/motion/motion.json +48 -12
  82. package/dist/figma/themes/light-colorblind.json +4 -4
  83. package/dist/figma/themes/light-high-contrast.json +4 -4
  84. package/dist/figma/themes/light-tritanopia.json +4 -4
  85. package/dist/figma/themes/light.json +4 -4
  86. package/dist/internalCss/dark-colorblind-high-contrast.css +28 -28
  87. package/dist/internalCss/dark-colorblind.css +28 -28
  88. package/dist/internalCss/dark-dimmed-high-contrast.css +28 -28
  89. package/dist/internalCss/dark-dimmed.css +28 -28
  90. package/dist/internalCss/dark-high-contrast.css +28 -28
  91. package/dist/internalCss/dark-tritanopia-high-contrast.css +28 -28
  92. package/dist/internalCss/dark-tritanopia.css +28 -28
  93. package/dist/internalCss/dark.css +28 -28
  94. package/dist/internalCss/light-colorblind-high-contrast.css +28 -28
  95. package/dist/internalCss/light-colorblind.css +28 -28
  96. package/dist/internalCss/light-high-contrast.css +28 -28
  97. package/dist/internalCss/light-tritanopia-high-contrast.css +28 -28
  98. package/dist/internalCss/light-tritanopia.css +28 -28
  99. package/dist/internalCss/light.css +28 -28
  100. package/dist/styleLint/base/motion/motion.json +96 -24
  101. package/dist/styleLint/base/size/size.json +76 -19
  102. package/dist/styleLint/base/typography/typography.json +30 -12
  103. package/dist/styleLint/functional/size/border.json +27 -12
  104. package/dist/styleLint/functional/size/breakpoints.json +24 -6
  105. package/dist/styleLint/functional/size/radius.json +17 -5
  106. package/dist/styleLint/functional/size/size-coarse.json +3 -3
  107. package/dist/styleLint/functional/size/size-fine.json +3 -3
  108. package/dist/styleLint/functional/size/size.json +111 -66
  109. package/dist/styleLint/functional/themes/dark-colorblind-high-contrast.json +1551 -366
  110. package/dist/styleLint/functional/themes/dark-colorblind.json +1551 -366
  111. package/dist/styleLint/functional/themes/dark-dimmed-high-contrast.json +1551 -366
  112. package/dist/styleLint/functional/themes/dark-dimmed.json +1551 -366
  113. package/dist/styleLint/functional/themes/dark-high-contrast.json +1551 -366
  114. package/dist/styleLint/functional/themes/dark-tritanopia-high-contrast.json +1551 -366
  115. package/dist/styleLint/functional/themes/dark-tritanopia.json +1551 -366
  116. package/dist/styleLint/functional/themes/dark.json +1551 -366
  117. package/dist/styleLint/functional/themes/light-colorblind-high-contrast.json +1554 -369
  118. package/dist/styleLint/functional/themes/light-colorblind.json +1554 -369
  119. package/dist/styleLint/functional/themes/light-high-contrast.json +1554 -369
  120. package/dist/styleLint/functional/themes/light-tritanopia-high-contrast.json +1554 -369
  121. package/dist/styleLint/functional/themes/light-tritanopia.json +1554 -369
  122. package/dist/styleLint/functional/themes/light.json +1554 -369
  123. package/dist/styleLint/functional/typography/typography.json +28 -22
  124. package/package.json +6 -5
  125. package/src/tokens/base/motion/timing.json5 +12 -12
  126. package/src/tokens/base/size/size.json5 +19 -19
  127. package/src/tokens/base/typography/typography.json5 +6 -6
  128. package/src/tokens/component/avatar.json5 +72 -44
  129. package/src/tokens/component/button.json5 +1545 -1193
  130. package/src/tokens/functional/border/border.json5 +4 -1
  131. package/src/tokens/functional/color/bgColor.json5 +8 -0
  132. package/src/tokens/functional/color/display.json5 +7 -0
  133. package/src/tokens/functional/color/fgColor.json5 +8 -0
  134. package/src/tokens/functional/color/syntax.json5 +14 -0
  135. package/src/tokens/functional/shadow/shadow.json5 +678 -163
  136. package/src/tokens/functional/size/border.json5 +8 -8
  137. package/src/tokens/functional/size/breakpoints.json5 +6 -6
  138. package/src/tokens/functional/size/radius.json5 +4 -4
  139. package/src/tokens/functional/size/size.json5 +15 -15
  140. package/src/tokens/functional/typography/typography.json5 +8 -4
  141. package/dist/build/parsers/index.d.ts +0 -1
  142. package/dist/build/parsers/index.js +0 -1
  143. package/dist/build/parsers/w3cJsonParser.d.ts +0 -6
  144. package/dist/build/parsers/w3cJsonParser.js +0 -25
  145. package/dist/removed/testing.json5 +0 -4
  146. package/guidelines/color.llm.md +0 -16
  147. package/guidelines/guidelines.llm.md +0 -34
  148. package/guidelines/motion.llm.md +0 -41
  149. package/guidelines/spacing.llm.md +0 -20
  150. package/guidelines/typography.llm.md +0 -14
  151. package/src/tokens/removed/testing.json5 +0 -4
  152. package/token-guidelines.llm.md +0 -695
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 #000000;
66
+ --button-default-shadow-resting: 0 0 0 0 #000000;
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 #000000;
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 #000000;
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 #000000;
963
+ --button-default-shadow-resting: 0 0 0 0 #000000;
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 #000000;
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 #000000;
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 #000000;
70
+ --button-default-shadow-resting: 0 0 0 0 #000000;
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 #000000;
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 #000000;
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 #000000;
967
+ --button-default-shadow-resting: 0 0 0 0 #000000;
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 #000000;
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 #000000;
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;
package/dist/css/functional/themes/dark-tritanopia.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"],
2
6
  [data-color-mode="auto"][data-light-theme="dark_tritanopia"] {
3
7
  --bgColor-sponsors-muted: #db61a21a; /** Subtle background for GitHub Sponsors content */
@@ -15,7 +19,7 @@
15
19
  --control-checked-bgColor-hover: #2a7aef;
16
20
  --fgColor-accent: #4493f8; /** Accent text for links and interactive elements */
17
21
  --reactionButton-selected-bgColor-hover: #3a8cfd5c;
18
- --avatar-shadow: 0px 0px 0px 2px #0d1117;
22
+ --avatar-shadow: 0 0 0 2px #0d1117;
19
23
  --avatarStack-fade-bgColor-default: #3d444d;
20
24
  --avatarStack-fade-bgColor-muted: #2a313c;
21
25
  --bgColor-accent-emphasis: #1f6feb; /** Strong accent background for active states and focused states */
@@ -62,8 +66,8 @@
62
66
  --borderColor-transparent: #00000000; /** Fully transparent border */
63
67
  --button-danger-bgColor-hover: #b62324;
64
68
  --button-danger-iconColor-rest: var(--button-danger-fgColor-rest);
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 #000000;
70
+ --button-default-shadow-resting: 0 0 0 0 #000000;
67
71
  --button-inactive-bgColor: #262c36;
68
72
  --button-inactive-fgColor: #9198a1;
69
73
  --button-invisible-bgColor-disabled: #00000000;
@@ -72,8 +76,8 @@
72
76
  --button-outline-fgColor-disabled: #4493f880;
73
77
  --button-outline-fgColor-hover: #58a6ff;
74
78
  --button-outline-fgColor-rest: #388bfd;
75
- --button-outline-shadow-selected: 0px 0px 0px 0px #000000;
76
- --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;
77
81
  --button-star-iconColor: #e3b341;
78
82
  --buttonCounter-danger-bgColor-rest: #49020233;
79
83
  --buttonCounter-default-bgColor-rest: #2f3742;
@@ -817,11 +821,11 @@
817
821
  --reactionButton-selected-fgColor-rest: var(--fgColor-link);
818
822
  --selectMenu-borderColor: var(--borderColor-default);
819
823
  --selection-bgColor: #1f6febb3; /** Background color for text selection highlights */
820
- --shadow-floating-legacy: 0px 6px 12px -3px #01040966, 0px 6px 18px 0px #01040966;
821
- --shadow-inset: inset 0px 1px 0px 0px #0104093d;
822
- --shadow-resting-medium: 0px 1px 1px 0px #01040966, 0px 3px 6px 0px #010409cc;
823
- --shadow-resting-small: 0px 1px 1px 0px #01040999, 0px 1px 3px 0px #01040999;
824
- --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 */
825
829
  --tooltip-bgColor: var(--bgColor-emphasis);
826
830
  --treeViewItem-leadingVisual-iconColor-rest: var(--fgColor-muted);
827
831
  --underlineNav-iconColor-rest: var(--fgColor-muted);
@@ -886,10 +890,10 @@
886
890
  --buttonKeybindingHint-danger-borderColor-disabled: var(--buttonKeybindingHint-default-borderColor-disabled);
887
891
  --buttonKeybindingHint-danger-borderColor-rest: var(--buttonKeybindingHint-default-borderColor-rest);
888
892
  --buttonKeybindingHint-danger-fgColor-disabled: var(--buttonKeybindingHint-default-fgColor-disabled);
889
- --shadow-floating-large: 0px 0px 0px 1px #3d444d, 0px 24px 48px 0px #010409; /** Large floating shadow for modals and dialogs */
890
- --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;
891
- --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 */
892
- --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 */
893
897
  --underlineNav-borderColor-hover: var(--borderColor-neutral-muted);
894
898
  --button-danger-borderColor-active: var(--button-danger-borderColor-hover);
895
899
  --button-outline-borderColor-hover: var(--button-default-borderColor-hover);
@@ -912,7 +916,7 @@
912
916
  --control-checked-bgColor-hover: #2a7aef;
913
917
  --fgColor-accent: #4493f8; /** Accent text for links and interactive elements */
914
918
  --reactionButton-selected-bgColor-hover: #3a8cfd5c;
915
- --avatar-shadow: 0px 0px 0px 2px #0d1117;
919
+ --avatar-shadow: 0 0 0 2px #0d1117;
916
920
  --avatarStack-fade-bgColor-default: #3d444d;
917
921
  --avatarStack-fade-bgColor-muted: #2a313c;
918
922
  --bgColor-accent-emphasis: #1f6feb; /** Strong accent background for active states and focused states */
@@ -959,8 +963,8 @@
959
963
  --borderColor-transparent: #00000000; /** Fully transparent border */
960
964
  --button-danger-bgColor-hover: #b62324;
961
965
  --button-danger-iconColor-rest: var(--button-danger-fgColor-rest);
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 #000000;
967
+ --button-default-shadow-resting: 0 0 0 0 #000000;
964
968
  --button-inactive-bgColor: #262c36;
965
969
  --button-inactive-fgColor: #9198a1;
966
970
  --button-invisible-bgColor-disabled: #00000000;
@@ -969,8 +973,8 @@
969
973
  --button-outline-fgColor-disabled: #4493f880;
970
974
  --button-outline-fgColor-hover: #58a6ff;
971
975
  --button-outline-fgColor-rest: #388bfd;
972
- --button-outline-shadow-selected: 0px 0px 0px 0px #000000;
973
- --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;
974
978
  --button-star-iconColor: #e3b341;
975
979
  --buttonCounter-danger-bgColor-rest: #49020233;
976
980
  --buttonCounter-default-bgColor-rest: #2f3742;
@@ -1714,11 +1718,11 @@
1714
1718
  --reactionButton-selected-fgColor-rest: var(--fgColor-link);
1715
1719
  --selectMenu-borderColor: var(--borderColor-default);
1716
1720
  --selection-bgColor: #1f6febb3; /** Background color for text selection highlights */
1717
- --shadow-floating-legacy: 0px 6px 12px -3px #01040966, 0px 6px 18px 0px #01040966;
1718
- --shadow-inset: inset 0px 1px 0px 0px #0104093d;
1719
- --shadow-resting-medium: 0px 1px 1px 0px #01040966, 0px 3px 6px 0px #010409cc;
1720
- --shadow-resting-small: 0px 1px 1px 0px #01040999, 0px 1px 3px 0px #01040999;
1721
- --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 */
1722
1726
  --tooltip-bgColor: var(--bgColor-emphasis);
1723
1727
  --treeViewItem-leadingVisual-iconColor-rest: var(--fgColor-muted);
1724
1728
  --underlineNav-iconColor-rest: var(--fgColor-muted);
@@ -1783,10 +1787,10 @@
1783
1787
  --buttonKeybindingHint-danger-borderColor-disabled: var(--buttonKeybindingHint-default-borderColor-disabled);
1784
1788
  --buttonKeybindingHint-danger-borderColor-rest: var(--buttonKeybindingHint-default-borderColor-rest);
1785
1789
  --buttonKeybindingHint-danger-fgColor-disabled: var(--buttonKeybindingHint-default-fgColor-disabled);
1786
- --shadow-floating-large: 0px 0px 0px 1px #3d444d, 0px 24px 48px 0px #010409; /** Large floating shadow for modals and dialogs */
1787
- --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;
1788
- --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 */
1789
- --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 */
1790
1794
  --underlineNav-borderColor-hover: var(--borderColor-neutral-muted);
1791
1795
  --button-danger-borderColor-active: var(--button-danger-borderColor-hover);
1792
1796
  --button-outline-borderColor-hover: var(--button-default-borderColor-hover);
package/dist/css/functional/themes/dark.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"],
2
6
  [data-color-mode="auto"][data-light-theme="dark"] {
3
7
  --button-danger-fgColor-rest: #fa5e55;
@@ -11,7 +15,7 @@
11
15
  --control-checked-bgColor-hover: #2a7aef;
12
16
  --fgColor-accent: #4493f8; /** Accent text for links and interactive elements */
13
17
  --reactionButton-selected-bgColor-hover: #3a8cfd5c;
14
- --avatar-shadow: 0px 0px 0px 2px #0d1117;
18
+ --avatar-shadow: 0 0 0 2px #0d1117;
15
19
  --avatarStack-fade-bgColor-default: #3d444d;
16
20
  --avatarStack-fade-bgColor-muted: #2a313c;
17
21
  --bgColor-accent-emphasis: #1f6feb; /** Strong accent background for active states and focused states */
@@ -55,8 +59,8 @@
55
59
  --borderColor-transparent: #00000000; /** Fully transparent border */
56
60
  --button-danger-bgColor-hover: #b62324;
57
61
  --button-danger-iconColor-rest: var(--button-danger-fgColor-rest);
58
- --button-danger-shadow-selected: 0px 0px 0px 0px #000000;
59
- --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;
60
64
  --button-inactive-bgColor: #262c36;
61
65
  --button-inactive-fgColor: #9198a1;
62
66
  --button-invisible-bgColor-disabled: #00000000;
@@ -66,8 +70,8 @@
66
70
  --button-outline-fgColor-disabled: #4493f880;
67
71
  --button-outline-fgColor-hover: #58a6ff;
68
72
  --button-outline-fgColor-rest: #388bfd;
69
- --button-outline-shadow-selected: 0px 0px 0px 0px #000000;
70
- --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;
71
75
  --button-star-iconColor: #e3b341;
72
76
  --buttonCounter-danger-bgColor-rest: #49020233;
73
77
  --buttonCounter-default-bgColor-rest: #2f3742;
@@ -815,11 +819,11 @@
815
819
  --reactionButton-selected-fgColor-rest: var(--fgColor-link);
816
820
  --selectMenu-borderColor: var(--borderColor-default);
817
821
  --selection-bgColor: #1f6febb3; /** Background color for text selection highlights */
818
- --shadow-floating-legacy: 0px 6px 12px -3px #01040966, 0px 6px 18px 0px #01040966;
819
- --shadow-inset: inset 0px 1px 0px 0px #0104093d;
820
- --shadow-resting-medium: 0px 1px 1px 0px #01040966, 0px 3px 6px 0px #010409cc;
821
- --shadow-resting-small: 0px 1px 1px 0px #01040999, 0px 1px 3px 0px #01040999;
822
- --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 */
823
827
  --tooltip-bgColor: var(--bgColor-emphasis);
824
828
  --treeViewItem-leadingVisual-iconColor-rest: var(--fgColor-muted);
825
829
  --underlineNav-iconColor-rest: var(--fgColor-muted);
@@ -886,10 +890,10 @@
886
890
  --buttonKeybindingHint-danger-borderColor-disabled: var(--buttonKeybindingHint-default-borderColor-disabled);
887
891
  --buttonKeybindingHint-danger-borderColor-rest: var(--buttonKeybindingHint-default-borderColor-rest);
888
892
  --buttonKeybindingHint-danger-fgColor-disabled: var(--buttonKeybindingHint-default-fgColor-disabled);
889
- --shadow-floating-large: 0px 0px 0px 1px #3d444d, 0px 24px 48px 0px #010409; /** Large floating shadow for modals and dialogs */
890
- --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;
891
- --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 */
892
- --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 */
893
897
  --underlineNav-borderColor-hover: var(--borderColor-neutral-muted);
894
898
  --button-danger-borderColor-active: var(--button-danger-borderColor-hover);
895
899
  --button-outline-borderColor-hover: var(--button-default-borderColor-hover);
@@ -908,7 +912,7 @@
908
912
  --control-checked-bgColor-hover: #2a7aef;
909
913
  --fgColor-accent: #4493f8; /** Accent text for links and interactive elements */
910
914
  --reactionButton-selected-bgColor-hover: #3a8cfd5c;
911
- --avatar-shadow: 0px 0px 0px 2px #0d1117;
915
+ --avatar-shadow: 0 0 0 2px #0d1117;
912
916
  --avatarStack-fade-bgColor-default: #3d444d;
913
917
  --avatarStack-fade-bgColor-muted: #2a313c;
914
918
  --bgColor-accent-emphasis: #1f6feb; /** Strong accent background for active states and focused states */
@@ -952,8 +956,8 @@
952
956
  --borderColor-transparent: #00000000; /** Fully transparent border */
953
957
  --button-danger-bgColor-hover: #b62324;
954
958
  --button-danger-iconColor-rest: var(--button-danger-fgColor-rest);
955
- --button-danger-shadow-selected: 0px 0px 0px 0px #000000;
956
- --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;
957
961
  --button-inactive-bgColor: #262c36;
958
962
  --button-inactive-fgColor: #9198a1;
959
963
  --button-invisible-bgColor-disabled: #00000000;
@@ -963,8 +967,8 @@
963
967
  --button-outline-fgColor-disabled: #4493f880;
964
968
  --button-outline-fgColor-hover: #58a6ff;
965
969
  --button-outline-fgColor-rest: #388bfd;
966
- --button-outline-shadow-selected: 0px 0px 0px 0px #000000;
967
- --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;
968
972
  --button-star-iconColor: #e3b341;
969
973
  --buttonCounter-danger-bgColor-rest: #49020233;
970
974
  --buttonCounter-default-bgColor-rest: #2f3742;
@@ -1712,11 +1716,11 @@
1712
1716
  --reactionButton-selected-fgColor-rest: var(--fgColor-link);
1713
1717
  --selectMenu-borderColor: var(--borderColor-default);
1714
1718
  --selection-bgColor: #1f6febb3; /** Background color for text selection highlights */
1715
- --shadow-floating-legacy: 0px 6px 12px -3px #01040966, 0px 6px 18px 0px #01040966;
1716
- --shadow-inset: inset 0px 1px 0px 0px #0104093d;
1717
- --shadow-resting-medium: 0px 1px 1px 0px #01040966, 0px 3px 6px 0px #010409cc;
1718
- --shadow-resting-small: 0px 1px 1px 0px #01040999, 0px 1px 3px 0px #01040999;
1719
- --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 */
1720
1724
  --tooltip-bgColor: var(--bgColor-emphasis);
1721
1725
  --treeViewItem-leadingVisual-iconColor-rest: var(--fgColor-muted);
1722
1726
  --underlineNav-iconColor-rest: var(--fgColor-muted);
@@ -1783,10 +1787,10 @@
1783
1787
  --buttonKeybindingHint-danger-borderColor-disabled: var(--buttonKeybindingHint-default-borderColor-disabled);
1784
1788
  --buttonKeybindingHint-danger-borderColor-rest: var(--buttonKeybindingHint-default-borderColor-rest);
1785
1789
  --buttonKeybindingHint-danger-fgColor-disabled: var(--buttonKeybindingHint-default-fgColor-disabled);
1786
- --shadow-floating-large: 0px 0px 0px 1px #3d444d, 0px 24px 48px 0px #010409; /** Large floating shadow for modals and dialogs */
1787
- --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;
1788
- --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 */
1789
- --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 */
1790
1794
  --underlineNav-borderColor-hover: var(--borderColor-neutral-muted);
1791
1795
  --button-danger-borderColor-active: var(--button-danger-borderColor-hover);
1792
1796
  --button-outline-borderColor-hover: var(--button-default-borderColor-hover);