@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-colorblind-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_colorblind_high_contrast"],
2
6
  [data-color-mode="auto"][data-light-theme="dark_colorblind_high_contrast"] {
3
7
  --button-primary-bgColor-active: #3685f3;
@@ -11,7 +15,7 @@
11
15
  --fgColor-done: #d3abff; /** Text color for completed/done state indicators */
12
16
  --fgColor-sponsors: #ff90c8; /** Text color for GitHub Sponsors content */
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: #194fb1; /** Strong accent background for active states and focused states */
@@ -59,8 +63,8 @@
59
63
  --button-danger-bgColor-hover: #8f3c00;
60
64
  --button-danger-borderColor-hover: #ffb757;
61
65
  --button-danger-fgColor-rest: #ffb757;
62
- --button-danger-shadow-selected: 0px 0px 0px 0px #000000;
63
- --button-default-shadow-resting: 0px 0px 0px 0px #000000;
66
+ --button-danger-shadow-selected: 0 0 0 0 #000000;
67
+ --button-default-shadow-resting: 0 0 0 0 #000000;
64
68
  --button-inactive-bgColor: #262c36;
65
69
  --button-inactive-fgColor: #b7bdc8;
66
70
  --button-invisible-bgColor-active: #212830;
@@ -74,10 +78,10 @@
74
78
  --button-outline-fgColor-disabled: #74b9ff80;
75
79
  --button-outline-fgColor-hover: #71b7ff;
76
80
  --button-outline-fgColor-rest: #5cacff;
77
- --button-outline-shadow-selected: 0px 0px 0px 0px #000000;
81
+ --button-outline-shadow-selected: 0 0 0 0 #000000;
78
82
  --button-primary-bgColor-disabled: #318bf8;
79
83
  --button-primary-borderColor-rest: #91cbff;
80
- --button-primary-shadow-selected: 0px 0px 0px 0px #000000;
84
+ --button-primary-shadow-selected: 0 0 0 0 #000000;
81
85
  --button-star-iconColor: #f7c843;
82
86
  --buttonCounter-default-bgColor-rest: #2f3742;
83
87
  --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;
@@ -908,7 +912,7 @@
908
912
  --fgColor-done: #d3abff; /** Text color for completed/done state indicators */
909
913
  --fgColor-sponsors: #ff90c8; /** Text color for GitHub Sponsors content */
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: #194fb1; /** Strong accent background for active states and focused states */
@@ -956,8 +960,8 @@
956
960
  --button-danger-bgColor-hover: #8f3c00;
957
961
  --button-danger-borderColor-hover: #ffb757;
958
962
  --button-danger-fgColor-rest: #ffb757;
959
- --button-danger-shadow-selected: 0px 0px 0px 0px #000000;
960
- --button-default-shadow-resting: 0px 0px 0px 0px #000000;
963
+ --button-danger-shadow-selected: 0 0 0 0 #000000;
964
+ --button-default-shadow-resting: 0 0 0 0 #000000;
961
965
  --button-inactive-bgColor: #262c36;
962
966
  --button-inactive-fgColor: #b7bdc8;
963
967
  --button-invisible-bgColor-active: #212830;
@@ -971,10 +975,10 @@
971
975
  --button-outline-fgColor-disabled: #74b9ff80;
972
976
  --button-outline-fgColor-hover: #71b7ff;
973
977
  --button-outline-fgColor-rest: #5cacff;
974
- --button-outline-shadow-selected: 0px 0px 0px 0px #000000;
978
+ --button-outline-shadow-selected: 0 0 0 0 #000000;
975
979
  --button-primary-bgColor-disabled: #318bf8;
976
980
  --button-primary-borderColor-rest: #91cbff;
977
- --button-primary-shadow-selected: 0px 0px 0px 0px #000000;
981
+ --button-primary-shadow-selected: 0 0 0 0 #000000;
978
982
  --button-star-iconColor: #f7c843;
979
983
  --buttonCounter-default-bgColor-rest: #2f3742;
980
984
  --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-colorblind.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_colorblind"],
2
6
  [data-color-mode="auto"][data-light-theme="dark_colorblind"] {
3
7
  --button-primary-bgColor-active: #3685f3;
@@ -9,7 +13,7 @@
9
13
  --control-checked-bgColor-hover: #2a7aef;
10
14
  --fgColor-accent: #4493f8; /** Accent text for links and interactive elements */
11
15
  --reactionButton-selected-bgColor-hover: #3a8cfd5c;
12
- --avatar-shadow: 0px 0px 0px 2px #0d1117;
16
+ --avatar-shadow: 0 0 0 2px #0d1117;
13
17
  --avatarStack-fade-bgColor-default: #3d444d;
14
18
  --avatarStack-fade-bgColor-muted: #2a313c;
15
19
  --bgColor-accent-emphasis: #1f6feb; /** Strong accent background for active states and focused states */
@@ -56,8 +60,8 @@
56
60
  --borderColor-success-muted: #388bfd66; /** Subtle success border for positive feedback elements */
57
61
  --borderColor-transparent: #00000000; /** Fully transparent border */
58
62
  --button-danger-bgColor-hover: #9b4215;
59
- --button-danger-shadow-selected: 0px 0px 0px 0px #000000;
60
- --button-default-shadow-resting: 0px 0px 0px 0px #000000;
63
+ --button-danger-shadow-selected: 0 0 0 0 #000000;
64
+ --button-default-shadow-resting: 0 0 0 0 #000000;
61
65
  --button-inactive-bgColor: #262c36;
62
66
  --button-inactive-fgColor: #9198a1;
63
67
  --button-invisible-bgColor-disabled: #00000000;
@@ -67,9 +71,9 @@
67
71
  --button-outline-fgColor-disabled: #4493f880;
68
72
  --button-outline-fgColor-hover: #58a6ff;
69
73
  --button-outline-fgColor-rest: #388bfd;
70
- --button-outline-shadow-selected: 0px 0px 0px 0px #000000;
74
+ --button-outline-shadow-selected: 0 0 0 0 #000000;
71
75
  --button-primary-bgColor-disabled: #1158c7;
72
- --button-primary-shadow-selected: 0px 0px 0px 0px #000000;
76
+ --button-primary-shadow-selected: 0 0 0 0 #000000;
73
77
  --button-star-iconColor: #e3b341;
74
78
  --buttonCounter-danger-bgColor-rest: #49020233;
75
79
  --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);
@@ -906,7 +910,7 @@
906
910
  --control-checked-bgColor-hover: #2a7aef;
907
911
  --fgColor-accent: #4493f8; /** Accent text for links and interactive elements */
908
912
  --reactionButton-selected-bgColor-hover: #3a8cfd5c;
909
- --avatar-shadow: 0px 0px 0px 2px #0d1117;
913
+ --avatar-shadow: 0 0 0 2px #0d1117;
910
914
  --avatarStack-fade-bgColor-default: #3d444d;
911
915
  --avatarStack-fade-bgColor-muted: #2a313c;
912
916
  --bgColor-accent-emphasis: #1f6feb; /** Strong accent background for active states and focused states */
@@ -953,8 +957,8 @@
953
957
  --borderColor-success-muted: #388bfd66; /** Subtle success border for positive feedback elements */
954
958
  --borderColor-transparent: #00000000; /** Fully transparent border */
955
959
  --button-danger-bgColor-hover: #9b4215;
956
- --button-danger-shadow-selected: 0px 0px 0px 0px #000000;
957
- --button-default-shadow-resting: 0px 0px 0px 0px #000000;
960
+ --button-danger-shadow-selected: 0 0 0 0 #000000;
961
+ --button-default-shadow-resting: 0 0 0 0 #000000;
958
962
  --button-inactive-bgColor: #262c36;
959
963
  --button-inactive-fgColor: #9198a1;
960
964
  --button-invisible-bgColor-disabled: #00000000;
@@ -964,9 +968,9 @@
964
968
  --button-outline-fgColor-disabled: #4493f880;
965
969
  --button-outline-fgColor-hover: #58a6ff;
966
970
  --button-outline-fgColor-rest: #388bfd;
967
- --button-outline-shadow-selected: 0px 0px 0px 0px #000000;
971
+ --button-outline-shadow-selected: 0 0 0 0 #000000;
968
972
  --button-primary-bgColor-disabled: #1158c7;
969
- --button-primary-shadow-selected: 0px 0px 0px 0px #000000;
973
+ --button-primary-shadow-selected: 0 0 0 0 #000000;
970
974
  --button-star-iconColor: #e3b341;
971
975
  --buttonCounter-danger-bgColor-rest: #49020233;
972
976
  --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);
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 #000000;
68
+ --button-default-shadow-resting: 0 0 0 0 #000000;
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 #000000;
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 #000000;
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 #000000;
965
+ --button-default-shadow-resting: 0 0 0 0 #000000;
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 #000000;
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 #000000;
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 #000000;
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 #000000;
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 #000000;
88
+ --button-primary-shadow-selected: 0 0 0 0 #000000;
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 #000000;
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 #000000;
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 #000000;
985
+ --button-primary-shadow-selected: 0 0 0 0 #000000;
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);