@primer/primitives 11.4.1-rc.eb8ee149 → 11.5.0-rc.14eaeb12

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 (190) hide show
  1. package/DESIGN_TOKENS_GUIDE.md +185 -0
  2. package/DESIGN_TOKENS_SPEC.md +136 -8
  3. package/dist/build/formats/jsonFigma.js +8 -1
  4. package/dist/build/formats/markdownLlmGuidelines.js +349 -0
  5. package/dist/build/schemas/borderToken.d.ts +61 -5
  6. package/dist/build/schemas/borderToken.js +2 -1
  7. package/dist/build/schemas/colorToken.d.ts +639 -30
  8. package/dist/build/schemas/colorToken.js +3 -2
  9. package/dist/build/schemas/colorW3cValue.d.ts +28 -0
  10. package/dist/build/schemas/colorW3cValue.js +42 -0
  11. package/dist/build/schemas/cubicBezierToken.d.ts +1 -1
  12. package/dist/build/schemas/dimensionToken.d.ts +9 -2
  13. package/dist/build/schemas/dimensionValue.d.ts +12 -1
  14. package/dist/build/schemas/dimensionValue.js +10 -13
  15. package/dist/build/schemas/durationToken.d.ts +8 -2
  16. package/dist/build/schemas/durationValue.d.ts +11 -1
  17. package/dist/build/schemas/durationValue.js +13 -3
  18. package/dist/build/schemas/fontFamilyToken.d.ts +1 -1
  19. package/dist/build/schemas/fontWeightToken.d.ts +1 -1
  20. package/dist/build/schemas/gradientToken.d.ts +23 -2
  21. package/dist/build/schemas/gradientToken.js +2 -1
  22. package/dist/build/schemas/numberToken.d.ts +1 -1
  23. package/dist/build/schemas/shadowToken.d.ts +1751 -127
  24. package/dist/build/schemas/shadowToken.js +8 -2
  25. package/dist/build/schemas/stringToken.d.ts +1 -1
  26. package/dist/build/schemas/stringToken.js +1 -1
  27. package/dist/build/schemas/tokenType.d.ts +1 -1
  28. package/dist/build/schemas/transitionToken.d.ts +15 -3
  29. package/dist/build/schemas/typographyToken.d.ts +19 -5
  30. package/dist/build/schemas/typographyToken.js +1 -1
  31. package/dist/build/schemas/validTokenType.d.ts +1 -1
  32. package/dist/build/schemas/validTokenType.js +1 -1
  33. package/dist/build/schemas/viewportRangeToken.d.ts +1 -1
  34. package/dist/build/transformers/borderToCss.js +19 -1
  35. package/dist/build/transformers/colorAlphaToCss.js +6 -3
  36. package/dist/build/transformers/colorToHex.js +5 -2
  37. package/dist/build/transformers/colorToRgbAlpha.js +5 -2
  38. package/dist/build/transformers/colorToRgbaFloat.js +5 -0
  39. package/dist/build/transformers/dimensionToPixelUnitless.d.ts +3 -2
  40. package/dist/build/transformers/dimensionToPixelUnitless.js +22 -26
  41. package/dist/build/transformers/dimensionToRem.d.ts +2 -1
  42. package/dist/build/transformers/dimensionToRem.js +21 -22
  43. package/dist/build/transformers/dimensionToRemPxArray.d.ts +2 -1
  44. package/dist/build/transformers/dimensionToRemPxArray.js +21 -22
  45. package/dist/build/transformers/durationToCss.d.ts +2 -1
  46. package/dist/build/transformers/durationToCss.js +19 -12
  47. package/dist/build/transformers/gradientToCss.js +2 -1
  48. package/dist/build/transformers/shadowToCss.js +15 -1
  49. package/dist/build/transformers/utilities/normalizeColorValue.d.ts +23 -0
  50. package/dist/build/transformers/utilities/normalizeColorValue.js +74 -0
  51. package/dist/build/transformers/utilities/parseDimension.d.ts +12 -0
  52. package/dist/build/transformers/utilities/parseDimension.js +31 -0
  53. package/dist/build/types/borderTokenValue.d.ts +5 -2
  54. package/dist/build/types/dimensionTokenValue.d.ts +9 -0
  55. package/dist/build/types/shadowTokenValue.d.ts +8 -5
  56. package/dist/css/base/motion/motion.css +1 -1
  57. package/dist/css/functional/size/radius.css +1 -1
  58. package/dist/css/functional/size/size-coarse.css +1 -0
  59. package/dist/css/functional/size/size-fine.css +1 -0
  60. package/dist/css/functional/size/size.css +5 -0
  61. package/dist/css/functional/themes/dark-colorblind-high-contrast.css +42 -30
  62. package/dist/css/functional/themes/dark-colorblind.css +42 -30
  63. package/dist/css/functional/themes/dark-dimmed-high-contrast.css +42 -30
  64. package/dist/css/functional/themes/dark-dimmed.css +42 -30
  65. package/dist/css/functional/themes/dark-high-contrast.css +42 -30
  66. package/dist/css/functional/themes/dark-tritanopia-high-contrast.css +42 -30
  67. package/dist/css/functional/themes/dark-tritanopia.css +42 -30
  68. package/dist/css/functional/themes/dark.css +42 -30
  69. package/dist/css/functional/themes/light-colorblind-high-contrast.css +42 -30
  70. package/dist/css/functional/themes/light-colorblind.css +42 -30
  71. package/dist/css/functional/themes/light-high-contrast.css +42 -30
  72. package/dist/css/functional/themes/light-tritanopia-high-contrast.css +42 -30
  73. package/dist/css/functional/themes/light-tritanopia.css +42 -30
  74. package/dist/css/functional/themes/light.css +42 -30
  75. package/dist/docs/base/motion/motion.json +96 -24
  76. package/dist/docs/base/size/size.json +76 -19
  77. package/dist/docs/base/typography/typography.json +24 -6
  78. package/dist/docs/functional/size/border.json +26 -11
  79. package/dist/docs/functional/size/breakpoints.json +24 -6
  80. package/dist/docs/functional/size/radius.json +18 -6
  81. package/dist/docs/functional/size/size-coarse.json +55 -2
  82. package/dist/docs/functional/size/size-fine.json +55 -2
  83. package/dist/docs/functional/size/size.json +195 -15
  84. package/dist/docs/functional/themes/dark-colorblind-high-contrast.json +3921 -714
  85. package/dist/docs/functional/themes/dark-colorblind.json +3911 -712
  86. package/dist/docs/functional/themes/dark-dimmed-high-contrast.json +3774 -547
  87. package/dist/docs/functional/themes/dark-dimmed.json +3801 -554
  88. package/dist/docs/functional/themes/dark-high-contrast.json +3926 -715
  89. package/dist/docs/functional/themes/dark-tritanopia-high-contrast.json +3936 -717
  90. package/dist/docs/functional/themes/dark-tritanopia.json +3769 -546
  91. package/dist/docs/functional/themes/dark.json +3920 -713
  92. package/dist/docs/functional/themes/light-colorblind-high-contrast.json +3780 -553
  93. package/dist/docs/functional/themes/light-colorblind.json +3767 -548
  94. package/dist/docs/functional/themes/light-high-contrast.json +3785 -554
  95. package/dist/docs/functional/themes/light-tritanopia-high-contrast.json +3785 -554
  96. package/dist/docs/functional/themes/light-tritanopia.json +3777 -550
  97. package/dist/docs/functional/themes/light.json +3782 -551
  98. package/dist/docs/functional/typography/typography.json +8 -2
  99. package/dist/fallbacks/base/motion/motion.json +48 -12
  100. package/dist/fallbacks/functional/size/size-coarse.json +2 -1
  101. package/dist/fallbacks/functional/size/size-fine.json +2 -1
  102. package/dist/fallbacks/functional/size/size.json +5 -0
  103. package/dist/figma/dimension/dimension.json +56 -1
  104. package/dist/figma/themes/dark-colorblind.json +49 -1
  105. package/dist/figma/themes/dark-dimmed.json +51 -3
  106. package/dist/figma/themes/dark-high-contrast.json +49 -1
  107. package/dist/figma/themes/dark-tritanopia.json +49 -1
  108. package/dist/figma/themes/dark.json +49 -1
  109. package/dist/figma/themes/light-colorblind.json +53 -5
  110. package/dist/figma/themes/light-high-contrast.json +53 -5
  111. package/dist/figma/themes/light-tritanopia.json +53 -5
  112. package/dist/figma/themes/light.json +53 -5
  113. package/dist/internalCss/dark-colorblind-high-contrast.css +42 -30
  114. package/dist/internalCss/dark-colorblind.css +42 -30
  115. package/dist/internalCss/dark-dimmed-high-contrast.css +42 -30
  116. package/dist/internalCss/dark-dimmed.css +42 -30
  117. package/dist/internalCss/dark-high-contrast.css +42 -30
  118. package/dist/internalCss/dark-tritanopia-high-contrast.css +42 -30
  119. package/dist/internalCss/dark-tritanopia.css +42 -30
  120. package/dist/internalCss/dark.css +42 -30
  121. package/dist/internalCss/light-colorblind-high-contrast.css +42 -30
  122. package/dist/internalCss/light-colorblind.css +42 -30
  123. package/dist/internalCss/light-high-contrast.css +42 -30
  124. package/dist/internalCss/light-tritanopia-high-contrast.css +42 -30
  125. package/dist/internalCss/light-tritanopia.css +42 -30
  126. package/dist/internalCss/light.css +42 -30
  127. package/dist/styleLint/base/motion/motion.json +96 -24
  128. package/dist/styleLint/base/size/size.json +76 -19
  129. package/dist/styleLint/base/typography/typography.json +30 -12
  130. package/dist/styleLint/functional/size/border.json +27 -12
  131. package/dist/styleLint/functional/size/breakpoints.json +24 -6
  132. package/dist/styleLint/functional/size/radius.json +19 -7
  133. package/dist/styleLint/functional/size/size-coarse.json +60 -7
  134. package/dist/styleLint/functional/size/size-fine.json +60 -7
  135. package/dist/styleLint/functional/size/size.json +246 -66
  136. package/dist/styleLint/functional/themes/dark-colorblind-high-contrast.json +4060 -733
  137. package/dist/styleLint/functional/themes/dark-colorblind.json +4050 -731
  138. package/dist/styleLint/functional/themes/dark-dimmed-high-contrast.json +3914 -567
  139. package/dist/styleLint/functional/themes/dark-dimmed.json +3941 -574
  140. package/dist/styleLint/functional/themes/dark-high-contrast.json +4065 -734
  141. package/dist/styleLint/functional/themes/dark-tritanopia-high-contrast.json +4075 -736
  142. package/dist/styleLint/functional/themes/dark-tritanopia.json +4079 -736
  143. package/dist/styleLint/functional/themes/dark.json +4059 -732
  144. package/dist/styleLint/functional/themes/light-colorblind-high-contrast.json +4091 -744
  145. package/dist/styleLint/functional/themes/light-colorblind.json +4078 -739
  146. package/dist/styleLint/functional/themes/light-high-contrast.json +4096 -745
  147. package/dist/styleLint/functional/themes/light-tritanopia-high-contrast.json +4096 -745
  148. package/dist/styleLint/functional/themes/light-tritanopia.json +4088 -741
  149. package/dist/styleLint/functional/themes/light.json +4093 -742
  150. package/dist/styleLint/functional/typography/typography.json +28 -22
  151. package/package.json +5 -4
  152. package/src/tokens/base/color/dark/dark.dimmed.json5 +405 -81
  153. package/src/tokens/base/color/dark/dark.high-contrast.json5 +405 -81
  154. package/src/tokens/base/color/dark/dark.json5 +475 -95
  155. package/src/tokens/base/color/dark/display-dark.json5 +960 -192
  156. package/src/tokens/base/color/light/display-light.json5 +960 -192
  157. package/src/tokens/base/color/light/light.high-contrast.json5 +405 -81
  158. package/src/tokens/base/color/light/light.json5 +475 -95
  159. package/src/tokens/base/motion/timing.json5 +12 -12
  160. package/src/tokens/base/size/size.json5 +194 -194
  161. package/src/tokens/base/typography/typography.json5 +6 -6
  162. package/src/tokens/component/avatar.json5 +72 -44
  163. package/src/tokens/component/button.json5 +1846 -1191
  164. package/src/tokens/component/reactionButton.json5 +20 -4
  165. package/src/tokens/functional/border/border.json5 +33 -2
  166. package/src/tokens/functional/color/bgColor.json5 +18 -2
  167. package/src/tokens/functional/color/borderColor.json5 +8 -1
  168. package/src/tokens/functional/color/control.json5 +160 -32
  169. package/src/tokens/functional/color/display.json5 +7 -0
  170. package/src/tokens/functional/color/fgColor.json5 +13 -1
  171. package/src/tokens/functional/color/syntax.json5 +24 -2
  172. package/src/tokens/functional/shadow/shadow.json5 +1254 -163
  173. package/src/tokens/functional/size/border.json5 +8 -8
  174. package/src/tokens/functional/size/breakpoints.json5 +6 -6
  175. package/src/tokens/functional/size/radius.json5 +5 -5
  176. package/src/tokens/functional/size/size-coarse.json5 +15 -0
  177. package/src/tokens/functional/size/size-fine.json5 +15 -0
  178. package/src/tokens/functional/size/size.json5 +65 -15
  179. package/src/tokens/functional/typography/typography.json5 +8 -4
  180. package/dist/build/parsers/index.d.ts +0 -1
  181. package/dist/build/parsers/index.js +0 -1
  182. package/dist/build/parsers/w3cJsonParser.d.ts +0 -6
  183. package/dist/build/parsers/w3cJsonParser.js +0 -25
  184. package/dist/removed/testing.json5 +0 -4
  185. package/guidelines/color.llm.md +0 -16
  186. package/guidelines/guidelines.llm.md +0 -34
  187. package/guidelines/motion.llm.md +0 -41
  188. package/guidelines/spacing.llm.md +0 -20
  189. package/guidelines/typography.llm.md +0 -14
  190. package/src/tokens/removed/testing.json5 +0 -4
@@ -18,7 +18,7 @@
18
18
  --fgColor-done: #d3abff; /** Text color for completed/done state indicators */
19
19
  --fgColor-sponsors: #ff90c8; /** Text color for GitHub Sponsors content */
20
20
  --reactionButton-selected-bgColor-hover: #3a8cfd5c;
21
- --avatar-shadow: 0px 0px 0px 2px #0d1117;
21
+ --avatar-shadow: 0 0 0 2px #0d1117;
22
22
  --avatarStack-fade-bgColor-default: #3d444d;
23
23
  --avatarStack-fade-bgColor-muted: #2a313c;
24
24
  --bgColor-accent-emphasis: #194fb1; /** Strong accent background for active states and focused states */
@@ -61,13 +61,13 @@
61
61
  --borderColor-sponsors-muted: #f87cbd; /** Subtle border for GitHub Sponsors content */
62
62
  --borderColor-success-emphasis: #409eff; /** Strong success border for prominent positive elements */
63
63
  --borderColor-success-muted: #5cacff; /** Subtle success border for positive feedback elements */
64
- --borderColor-translucent: #9198a1; /** Semi-transparent border for overlays and layered elements */
64
+ --borderColor-translucent: #9198a1; /** Semi-transparent border for overlays and layered elements. Border-specific token — no bgColor-translucent counterpart exists by design. */
65
65
  --borderColor-transparent: #00000000; /** Fully transparent border */
66
66
  --button-danger-bgColor-hover: #ad0116;
67
67
  --button-danger-borderColor-hover: #ffb1af;
68
68
  --button-danger-fgColor-rest: #ffb1af;
69
- --button-danger-shadow-selected: 0px 0px 0px 0px #000000;
70
- --button-default-shadow-resting: 0px 0px 0px 0px #000000;
69
+ --button-danger-shadow-selected: 0 0 0 0 #00000000;
70
+ --button-default-shadow-resting: 0 0 0 0 #00000000;
71
71
  --button-inactive-bgColor: #262c36;
72
72
  --button-inactive-fgColor: #b7bdc8;
73
73
  --button-invisible-bgColor-active: #212830;
@@ -80,9 +80,9 @@
80
80
  --button-outline-fgColor-disabled: #74b9ff80;
81
81
  --button-outline-fgColor-hover: #71b7ff;
82
82
  --button-outline-fgColor-rest: #5cacff;
83
- --button-outline-shadow-selected: 0px 0px 0px 0px #000000;
83
+ --button-outline-shadow-selected: 0 0 0 0 #00000000;
84
84
  --button-primary-borderColor-rest: #91cbff;
85
- --button-primary-shadow-selected: 0px 0px 0px 0px #000000;
85
+ --button-primary-shadow-selected: 0 0 0 0 #00000000;
86
86
  --button-star-iconColor: #f7c843;
87
87
  --buttonCounter-default-bgColor-rest: #2f3742;
88
88
  --buttonCounter-outline-bgColor-hover: #194fb133;
@@ -668,6 +668,7 @@
668
668
  --border-sponsors-muted: 0.0625rem solid #f87cbd;
669
669
  --border-success-emphasis: 0.0625rem solid #409eff;
670
670
  --border-success-muted: 0.0625rem solid #5cacff;
671
+ --border-translucent: 0.0625rem solid #9198a1; /** Semi-transparent border shorthand for overlays and layered elements. Border-specific token — no bgColor-translucent counterpart exists by design. */
671
672
  --border-transparent: 0.0625rem solid #00000000;
672
673
  --borderColor-closed-muted: var(--borderColor-default); /** Subtle border for closed state indicators */
673
674
  --borderColor-draft-muted: var(--borderColor-default); /** Subtle border for draft state indicators */
@@ -796,17 +797,18 @@
796
797
  --reactionButton-selected-fgColor-rest: var(--fgColor-link);
797
798
  --selectMenu-borderColor: var(--borderColor-default);
798
799
  --selection-bgColor: #194fb1b3; /** Background color for text selection highlights */
799
- --shadow-floating-legacy: 0px 6px 12px -3px #01040966, 0px 6px 18px 0px #01040966;
800
- --shadow-inset: inset 0px 1px 0px 0px #0104093d;
801
- --shadow-resting-medium: 0px 1px 1px 0px #01040966, 0px 3px 6px 0px #010409cc;
802
- --shadow-resting-small: 0px 1px 1px 0px #01040999, 0px 1px 3px 0px #01040999;
803
- --shadow-resting-xsmall: 0px 1px 1px 0px #010409cc;
800
+ --shadow-floating-legacy: 0 6px 12px -3px #01040966, 0 6px 18px 0 #01040966; /** Legacy floating shadow for backward compatibility */
801
+ --shadow-inset: inset 0 1px 0 0 #0104093d; /** Inset shadow for recessed elements */
802
+ --shadow-resting-medium: 0 1px 1px 0 #01040966, 0 3px 6px 0 #010409cc; /** Medium resting shadow for cards and elevated surfaces */
803
+ --shadow-resting-small: 0 1px 1px 0 #01040999, 0 1px 3px 0 #01040999; /** Small resting shadow for buttons and interactive elements */
804
+ --shadow-resting-xsmall: 0 1px 1px 0 #010409cc; /** Extra small resting shadow for minimal elevation */
804
805
  --topicTag-borderColor: var(--borderColor-accent-emphasis);
805
806
  --treeViewItem-leadingVisual-iconColor-rest: var(--fgColor-muted);
806
807
  --underlineNav-iconColor-rest: var(--fgColor-muted);
807
808
  --avatar-borderColor: var(--borderColor-emphasis);
808
809
  --border-closed-emphasis: var(--border-danger-emphasis);
809
810
  --border-closed-muted: var(--border-danger-muted);
811
+ --border-draft-muted: 0.0625rem solid #b7bdc8;
810
812
  --border-emphasis: 0.0625rem solid #b7bdc8;
811
813
  --border-muted: 0.0625rem solid #b7bdc8;
812
814
  --border-open-emphasis: var(--border-success-emphasis);
@@ -818,14 +820,17 @@
818
820
  --borderColor-neutral-muted: var(--borderColor-muted); /** Subtle neutral semantic border */
819
821
  --button-danger-bgColor-disabled: var(--control-bgColor-disabled);
820
822
  --button-danger-borderColor-rest: var(--control-borderColor-rest);
823
+ --button-danger-iconColor-disabled: var(--button-danger-fgColor-disabled);
821
824
  --button-default-bgColor-disabled: var(--control-bgColor-disabled);
822
825
  --button-default-borderColor-disabled: var(--control-borderColor-disabled);
823
826
  --button-default-borderColor-rest: var(--control-borderColor-rest);
827
+ --button-default-fgColor-disabled: var(--control-fgColor-disabled);
824
828
  --button-invisible-borderColor-hover: var(--control-transparent-borderColor-hover);
825
829
  --button-invisible-fgColor-disabled: var(--control-fgColor-disabled);
826
830
  --button-invisible-iconColor-disabled: var(--control-fgColor-disabled);
827
831
  --button-outline-bgColor-disabled: var(--control-bgColor-disabled);
828
832
  --button-primary-fgColor-rest: var(--fgColor-white);
833
+ --button-primary-iconColor-disabled: var(--button-primary-fgColor-disabled);
829
834
  --button-primary-iconColor-rest: var(--fgColor-white);
830
835
  --buttonKeybindingHint-danger-bgColor-disabled: var(--buttonKeybindingHint-default-bgColor-disabled);
831
836
  --buttonKeybindingHint-danger-fgColor-active: var(--fgColor-onEmphasis);
@@ -875,10 +880,10 @@
875
880
  --focus-outline: 2px solid #409eff; /** Focus ring outline for keyboard navigation and accessibility. */
876
881
  --page-header-bgColor: var(--bgColor-default);
877
882
  --progressBar-track-bgColor: var(--bgColor-inverse);
878
- --shadow-floating-large: 0px 0px 0px 1px #b7bdc8, 0px 24px 48px 0px #010409; /** Large floating shadow for modals and dialogs */
879
- --shadow-floating-medium: 0px 0px 0px 1px #b7bdc8, 0px 8px 16px -4px #01040966, 0px 4px 32px -4px #01040966, 0px 24px 48px -12px #01040966, 0px 48px 96px -24px #01040966;
880
- --shadow-floating-small: 0px 0px 0px 1px #b7bdc8, 0px 6px 12px -3px #01040966, 0px 6px 18px 0px #01040966; /** Small floating shadow for dropdowns, tooltips, and small overlays */
881
- --shadow-floating-xlarge: 0px 0px 0px 1px #b7bdc8, 0px 32px 64px 0px #010409;
883
+ --shadow-floating-large: 0 0 0 1px #b7bdc8, 0 24px 48px 0 #010409; /** Large floating shadow for modals and dialogs */
884
+ --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 */
885
+ --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 */
886
+ --shadow-floating-xlarge: 0 0 0 1px #b7bdc8, 0 32px 64px 0 #010409; /** Extra large floating shadow for full-screen overlays and sheets */
882
887
  --tooltip-bgColor: var(--bgColor-inverse);
883
888
  --tooltip-fgColor: var(--fgColor-onInverse);
884
889
  --border-neutral-emphasis: 0.0625rem solid #b7bdc8;
@@ -896,6 +901,7 @@
896
901
  --controlKnob-borderColor-rest: var(--control-borderColor-emphasis);
897
902
  --progressBar-track-borderColor: var(--progressBar-track-bgColor);
898
903
  --underlineNav-borderColor-hover: var(--borderColor-neutral-muted);
904
+ --border-draft-emphasis: 0.0625rem solid #b7bdc8;
899
905
  --button-outline-borderColor-hover: var(--button-default-borderColor-hover);
900
906
  --button-outline-borderColor-active: var(--button-outline-borderColor-hover);
901
907
  }
@@ -915,7 +921,7 @@
915
921
  --fgColor-done: #d3abff; /** Text color for completed/done state indicators */
916
922
  --fgColor-sponsors: #ff90c8; /** Text color for GitHub Sponsors content */
917
923
  --reactionButton-selected-bgColor-hover: #3a8cfd5c;
918
- --avatar-shadow: 0px 0px 0px 2px #0d1117;
924
+ --avatar-shadow: 0 0 0 2px #0d1117;
919
925
  --avatarStack-fade-bgColor-default: #3d444d;
920
926
  --avatarStack-fade-bgColor-muted: #2a313c;
921
927
  --bgColor-accent-emphasis: #194fb1; /** Strong accent background for active states and focused states */
@@ -958,13 +964,13 @@
958
964
  --borderColor-sponsors-muted: #f87cbd; /** Subtle border for GitHub Sponsors content */
959
965
  --borderColor-success-emphasis: #409eff; /** Strong success border for prominent positive elements */
960
966
  --borderColor-success-muted: #5cacff; /** Subtle success border for positive feedback elements */
961
- --borderColor-translucent: #9198a1; /** Semi-transparent border for overlays and layered elements */
967
+ --borderColor-translucent: #9198a1; /** Semi-transparent border for overlays and layered elements. Border-specific token — no bgColor-translucent counterpart exists by design. */
962
968
  --borderColor-transparent: #00000000; /** Fully transparent border */
963
969
  --button-danger-bgColor-hover: #ad0116;
964
970
  --button-danger-borderColor-hover: #ffb1af;
965
971
  --button-danger-fgColor-rest: #ffb1af;
966
- --button-danger-shadow-selected: 0px 0px 0px 0px #000000;
967
- --button-default-shadow-resting: 0px 0px 0px 0px #000000;
972
+ --button-danger-shadow-selected: 0 0 0 0 #00000000;
973
+ --button-default-shadow-resting: 0 0 0 0 #00000000;
968
974
  --button-inactive-bgColor: #262c36;
969
975
  --button-inactive-fgColor: #b7bdc8;
970
976
  --button-invisible-bgColor-active: #212830;
@@ -977,9 +983,9 @@
977
983
  --button-outline-fgColor-disabled: #74b9ff80;
978
984
  --button-outline-fgColor-hover: #71b7ff;
979
985
  --button-outline-fgColor-rest: #5cacff;
980
- --button-outline-shadow-selected: 0px 0px 0px 0px #000000;
986
+ --button-outline-shadow-selected: 0 0 0 0 #00000000;
981
987
  --button-primary-borderColor-rest: #91cbff;
982
- --button-primary-shadow-selected: 0px 0px 0px 0px #000000;
988
+ --button-primary-shadow-selected: 0 0 0 0 #00000000;
983
989
  --button-star-iconColor: #f7c843;
984
990
  --buttonCounter-default-bgColor-rest: #2f3742;
985
991
  --buttonCounter-outline-bgColor-hover: #194fb133;
@@ -1565,6 +1571,7 @@
1565
1571
  --border-sponsors-muted: 0.0625rem solid #f87cbd;
1566
1572
  --border-success-emphasis: 0.0625rem solid #409eff;
1567
1573
  --border-success-muted: 0.0625rem solid #5cacff;
1574
+ --border-translucent: 0.0625rem solid #9198a1; /** Semi-transparent border shorthand for overlays and layered elements. Border-specific token — no bgColor-translucent counterpart exists by design. */
1568
1575
  --border-transparent: 0.0625rem solid #00000000;
1569
1576
  --borderColor-closed-muted: var(--borderColor-default); /** Subtle border for closed state indicators */
1570
1577
  --borderColor-draft-muted: var(--borderColor-default); /** Subtle border for draft state indicators */
@@ -1693,17 +1700,18 @@
1693
1700
  --reactionButton-selected-fgColor-rest: var(--fgColor-link);
1694
1701
  --selectMenu-borderColor: var(--borderColor-default);
1695
1702
  --selection-bgColor: #194fb1b3; /** Background color for text selection highlights */
1696
- --shadow-floating-legacy: 0px 6px 12px -3px #01040966, 0px 6px 18px 0px #01040966;
1697
- --shadow-inset: inset 0px 1px 0px 0px #0104093d;
1698
- --shadow-resting-medium: 0px 1px 1px 0px #01040966, 0px 3px 6px 0px #010409cc;
1699
- --shadow-resting-small: 0px 1px 1px 0px #01040999, 0px 1px 3px 0px #01040999;
1700
- --shadow-resting-xsmall: 0px 1px 1px 0px #010409cc;
1703
+ --shadow-floating-legacy: 0 6px 12px -3px #01040966, 0 6px 18px 0 #01040966; /** Legacy floating shadow for backward compatibility */
1704
+ --shadow-inset: inset 0 1px 0 0 #0104093d; /** Inset shadow for recessed elements */
1705
+ --shadow-resting-medium: 0 1px 1px 0 #01040966, 0 3px 6px 0 #010409cc; /** Medium resting shadow for cards and elevated surfaces */
1706
+ --shadow-resting-small: 0 1px 1px 0 #01040999, 0 1px 3px 0 #01040999; /** Small resting shadow for buttons and interactive elements */
1707
+ --shadow-resting-xsmall: 0 1px 1px 0 #010409cc; /** Extra small resting shadow for minimal elevation */
1701
1708
  --topicTag-borderColor: var(--borderColor-accent-emphasis);
1702
1709
  --treeViewItem-leadingVisual-iconColor-rest: var(--fgColor-muted);
1703
1710
  --underlineNav-iconColor-rest: var(--fgColor-muted);
1704
1711
  --avatar-borderColor: var(--borderColor-emphasis);
1705
1712
  --border-closed-emphasis: var(--border-danger-emphasis);
1706
1713
  --border-closed-muted: var(--border-danger-muted);
1714
+ --border-draft-muted: 0.0625rem solid #b7bdc8;
1707
1715
  --border-emphasis: 0.0625rem solid #b7bdc8;
1708
1716
  --border-muted: 0.0625rem solid #b7bdc8;
1709
1717
  --border-open-emphasis: var(--border-success-emphasis);
@@ -1715,14 +1723,17 @@
1715
1723
  --borderColor-neutral-muted: var(--borderColor-muted); /** Subtle neutral semantic border */
1716
1724
  --button-danger-bgColor-disabled: var(--control-bgColor-disabled);
1717
1725
  --button-danger-borderColor-rest: var(--control-borderColor-rest);
1726
+ --button-danger-iconColor-disabled: var(--button-danger-fgColor-disabled);
1718
1727
  --button-default-bgColor-disabled: var(--control-bgColor-disabled);
1719
1728
  --button-default-borderColor-disabled: var(--control-borderColor-disabled);
1720
1729
  --button-default-borderColor-rest: var(--control-borderColor-rest);
1730
+ --button-default-fgColor-disabled: var(--control-fgColor-disabled);
1721
1731
  --button-invisible-borderColor-hover: var(--control-transparent-borderColor-hover);
1722
1732
  --button-invisible-fgColor-disabled: var(--control-fgColor-disabled);
1723
1733
  --button-invisible-iconColor-disabled: var(--control-fgColor-disabled);
1724
1734
  --button-outline-bgColor-disabled: var(--control-bgColor-disabled);
1725
1735
  --button-primary-fgColor-rest: var(--fgColor-white);
1736
+ --button-primary-iconColor-disabled: var(--button-primary-fgColor-disabled);
1726
1737
  --button-primary-iconColor-rest: var(--fgColor-white);
1727
1738
  --buttonKeybindingHint-danger-bgColor-disabled: var(--buttonKeybindingHint-default-bgColor-disabled);
1728
1739
  --buttonKeybindingHint-danger-fgColor-active: var(--fgColor-onEmphasis);
@@ -1772,10 +1783,10 @@
1772
1783
  --focus-outline: 2px solid #409eff; /** Focus ring outline for keyboard navigation and accessibility. */
1773
1784
  --page-header-bgColor: var(--bgColor-default);
1774
1785
  --progressBar-track-bgColor: var(--bgColor-inverse);
1775
- --shadow-floating-large: 0px 0px 0px 1px #b7bdc8, 0px 24px 48px 0px #010409; /** Large floating shadow for modals and dialogs */
1776
- --shadow-floating-medium: 0px 0px 0px 1px #b7bdc8, 0px 8px 16px -4px #01040966, 0px 4px 32px -4px #01040966, 0px 24px 48px -12px #01040966, 0px 48px 96px -24px #01040966;
1777
- --shadow-floating-small: 0px 0px 0px 1px #b7bdc8, 0px 6px 12px -3px #01040966, 0px 6px 18px 0px #01040966; /** Small floating shadow for dropdowns, tooltips, and small overlays */
1778
- --shadow-floating-xlarge: 0px 0px 0px 1px #b7bdc8, 0px 32px 64px 0px #010409;
1786
+ --shadow-floating-large: 0 0 0 1px #b7bdc8, 0 24px 48px 0 #010409; /** Large floating shadow for modals and dialogs */
1787
+ --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 */
1788
+ --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 */
1789
+ --shadow-floating-xlarge: 0 0 0 1px #b7bdc8, 0 32px 64px 0 #010409; /** Extra large floating shadow for full-screen overlays and sheets */
1779
1790
  --tooltip-bgColor: var(--bgColor-inverse);
1780
1791
  --tooltip-fgColor: var(--fgColor-onInverse);
1781
1792
  --border-neutral-emphasis: 0.0625rem solid #b7bdc8;
@@ -1793,6 +1804,7 @@
1793
1804
  --controlKnob-borderColor-rest: var(--control-borderColor-emphasis);
1794
1805
  --progressBar-track-borderColor: var(--progressBar-track-bgColor);
1795
1806
  --underlineNav-borderColor-hover: var(--borderColor-neutral-muted);
1807
+ --border-draft-emphasis: 0.0625rem solid #b7bdc8;
1796
1808
  --button-outline-borderColor-hover: var(--button-default-borderColor-hover);
1797
1809
  --button-outline-borderColor-active: var(--button-outline-borderColor-hover);
1798
1810
  }
@@ -19,7 +19,7 @@
19
19
  --control-checked-bgColor-hover: #2a7aef;
20
20
  --fgColor-accent: #4493f8; /** Accent text for links and interactive elements */
21
21
  --reactionButton-selected-bgColor-hover: #3a8cfd5c;
22
- --avatar-shadow: 0px 0px 0px 2px #0d1117;
22
+ --avatar-shadow: 0 0 0 2px #0d1117;
23
23
  --avatarStack-fade-bgColor-default: #3d444d;
24
24
  --avatarStack-fade-bgColor-muted: #2a313c;
25
25
  --bgColor-accent-emphasis: #1f6feb; /** Strong accent background for active states and focused states */
@@ -66,8 +66,8 @@
66
66
  --borderColor-transparent: #00000000; /** Fully transparent border */
67
67
  --button-danger-bgColor-hover: #b62324;
68
68
  --button-danger-iconColor-rest: var(--button-danger-fgColor-rest);
69
- --button-danger-shadow-selected: 0px 0px 0px 0px #000000;
70
- --button-default-shadow-resting: 0px 0px 0px 0px #000000;
69
+ --button-danger-shadow-selected: 0 0 0 0 #00000000;
70
+ --button-default-shadow-resting: 0 0 0 0 #00000000;
71
71
  --button-inactive-bgColor: #262c36;
72
72
  --button-inactive-fgColor: #9198a1;
73
73
  --button-invisible-bgColor-disabled: #00000000;
@@ -76,8 +76,8 @@
76
76
  --button-outline-fgColor-disabled: #4493f880;
77
77
  --button-outline-fgColor-hover: #58a6ff;
78
78
  --button-outline-fgColor-rest: #388bfd;
79
- --button-outline-shadow-selected: 0px 0px 0px 0px #000000;
80
- --button-primary-shadow-selected: 0px 0px 0px 0px #000000;
79
+ --button-outline-shadow-selected: 0 0 0 0 #00000000;
80
+ --button-primary-shadow-selected: 0 0 0 0 #00000000;
81
81
  --button-star-iconColor: #e3b341;
82
82
  --buttonCounter-danger-bgColor-rest: #49020233;
83
83
  --buttonCounter-default-bgColor-rest: #2f3742;
@@ -697,7 +697,7 @@
697
697
  --borderColor-draft-muted: #3d444d66; /** Subtle border for draft state indicators */
698
698
  --borderColor-muted: #3d444db3; /** Subtle border for secondary elements and light separators */
699
699
  --borderColor-neutral-emphasis: var(--borderColor-emphasis); /** Strong neutral semantic border */
700
- --borderColor-translucent: #ffffff26; /** Semi-transparent border for overlays and layered elements */
700
+ --borderColor-translucent: #ffffff26; /** Semi-transparent border for overlays and layered elements. Border-specific token — no bgColor-translucent counterpart exists by design. */
701
701
  --borderColor-upsell-emphasis: var(--borderColor-done-emphasis); /** Strong border for prominent upsell elements */
702
702
  --borderColor-upsell-muted: var(--borderColor-done-muted); /** Subtle border for upsell and promotional content */
703
703
  --button-danger-bgColor-active: var(--bgColor-danger-emphasis);
@@ -821,30 +821,34 @@
821
821
  --reactionButton-selected-fgColor-rest: var(--fgColor-link);
822
822
  --selectMenu-borderColor: var(--borderColor-default);
823
823
  --selection-bgColor: #1f6febb3; /** Background color for text selection highlights */
824
- --shadow-floating-legacy: 0px 6px 12px -3px #01040966, 0px 6px 18px 0px #01040966;
825
- --shadow-inset: inset 0px 1px 0px 0px #0104093d;
826
- --shadow-resting-medium: 0px 1px 1px 0px #01040966, 0px 3px 6px 0px #010409cc;
827
- --shadow-resting-small: 0px 1px 1px 0px #01040999, 0px 1px 3px 0px #01040999;
828
- --shadow-resting-xsmall: 0px 1px 1px 0px #010409cc;
824
+ --shadow-floating-legacy: 0 6px 12px -3px #01040966, 0 6px 18px 0 #01040966; /** Legacy floating shadow for backward compatibility */
825
+ --shadow-inset: inset 0 1px 0 0 #0104093d; /** Inset shadow for recessed elements */
826
+ --shadow-resting-medium: 0 1px 1px 0 #01040966, 0 3px 6px 0 #010409cc; /** Medium resting shadow for cards and elevated surfaces */
827
+ --shadow-resting-small: 0 1px 1px 0 #01040999, 0 1px 3px 0 #01040999; /** Small resting shadow for buttons and interactive elements */
828
+ --shadow-resting-xsmall: 0 1px 1px 0 #010409cc; /** Extra small resting shadow for minimal elevation */
829
829
  --tooltip-bgColor: var(--bgColor-emphasis);
830
830
  --treeViewItem-leadingVisual-iconColor-rest: var(--fgColor-muted);
831
831
  --underlineNav-iconColor-rest: var(--fgColor-muted);
832
832
  --avatar-borderColor: var(--borderColor-translucent);
833
833
  --border-closed-emphasis: var(--border-danger-emphasis);
834
834
  --border-closed-muted: var(--border-danger-muted);
835
+ --border-draft-muted: 0.0625rem solid #3d444d66;
835
836
  --border-muted: 0.0625rem solid #3d444db3;
836
837
  --border-neutral-emphasis: 0.0625rem solid #656c76;
837
838
  --border-open-emphasis: var(--border-success-emphasis);
838
839
  --border-open-muted: var(--border-success-muted);
840
+ --border-translucent: 0.0625rem solid #ffffff26; /** Semi-transparent border shorthand for overlays and layered elements. Border-specific token — no bgColor-translucent counterpart exists by design. */
839
841
  --border-upsell-emphasis: 0.0625rem solid #8957e5;
840
842
  --border-upsell-muted: 0.0625rem solid #ab7df866;
841
843
  --borderColor-draft-emphasis: var(--borderColor-neutral-emphasis); /** Strong border for draft state badges */
842
844
  --borderColor-neutral-muted: var(--borderColor-muted); /** Subtle neutral semantic border */
843
845
  --button-danger-bgColor-disabled: var(--control-bgColor-disabled);
844
846
  --button-danger-borderColor-rest: var(--control-borderColor-rest);
847
+ --button-danger-iconColor-disabled: var(--button-danger-fgColor-disabled);
845
848
  --button-default-bgColor-disabled: var(--control-bgColor-disabled);
846
849
  --button-default-borderColor-disabled: var(--control-borderColor-disabled);
847
850
  --button-default-borderColor-rest: var(--control-borderColor-rest);
851
+ --button-default-fgColor-disabled: var(--control-fgColor-disabled);
848
852
  --button-default-fgColor-rest: var(--control-fgColor-rest);
849
853
  --button-invisible-fgColor-active: var(--control-fgColor-rest);
850
854
  --button-invisible-fgColor-disabled: var(--control-fgColor-disabled);
@@ -853,6 +857,7 @@
853
857
  --button-invisible-iconColor-disabled: var(--control-fgColor-disabled);
854
858
  --button-primary-borderColor-rest: var(--borderColor-translucent);
855
859
  --button-primary-fgColor-rest: var(--fgColor-white);
860
+ --button-primary-iconColor-disabled: var(--button-primary-fgColor-disabled);
856
861
  --button-primary-iconColor-rest: var(--fgColor-white);
857
862
  --buttonKeybindingHint-danger-bgColor-disabled: var(--buttonKeybindingHint-default-bgColor-disabled);
858
863
  --buttonKeybindingHint-danger-fgColor-active: var(--fgColor-onEmphasis);
@@ -881,6 +886,7 @@
881
886
  --focus-outline: 2px solid #1f6feb; /** Focus ring outline for keyboard navigation and accessibility. */
882
887
  --overlay-borderColor: var(--borderColor-muted);
883
888
  --tooltip-fgColor: var(--fgColor-onEmphasis);
889
+ --border-draft-emphasis: 0.0625rem solid #656c76;
884
890
  --border-neutral-muted: 0.0625rem solid #3d444db3;
885
891
  --button-danger-borderColor-hover: var(--button-primary-borderColor-rest);
886
892
  --button-default-borderColor-active: var(--button-default-borderColor-rest);
@@ -890,10 +896,10 @@
890
896
  --buttonKeybindingHint-danger-borderColor-disabled: var(--buttonKeybindingHint-default-borderColor-disabled);
891
897
  --buttonKeybindingHint-danger-borderColor-rest: var(--buttonKeybindingHint-default-borderColor-rest);
892
898
  --buttonKeybindingHint-danger-fgColor-disabled: var(--buttonKeybindingHint-default-fgColor-disabled);
893
- --shadow-floating-large: 0px 0px 0px 1px #3d444d, 0px 24px 48px 0px #010409; /** Large floating shadow for modals and dialogs */
894
- --shadow-floating-medium: 0px 0px 0px 1px #3d444d, 0px 8px 16px -4px #01040966, 0px 4px 32px -4px #01040966, 0px 24px 48px -12px #01040966, 0px 48px 96px -24px #01040966;
895
- --shadow-floating-small: 0px 0px 0px 1px #3d444d, 0px 6px 12px -3px #01040966, 0px 6px 18px 0px #01040966; /** Small floating shadow for dropdowns, tooltips, and small overlays */
896
- --shadow-floating-xlarge: 0px 0px 0px 1px #3d444d, 0px 32px 64px 0px #010409;
899
+ --shadow-floating-large: 0 0 0 1px #3d444d, 0 24px 48px 0 #010409; /** Large floating shadow for modals and dialogs */
900
+ --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 */
901
+ --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 */
902
+ --shadow-floating-xlarge: 0 0 0 1px #3d444d, 0 32px 64px 0 #010409; /** Extra large floating shadow for full-screen overlays and sheets */
897
903
  --underlineNav-borderColor-hover: var(--borderColor-neutral-muted);
898
904
  --button-danger-borderColor-active: var(--button-danger-borderColor-hover);
899
905
  --button-outline-borderColor-hover: var(--button-default-borderColor-hover);
@@ -916,7 +922,7 @@
916
922
  --control-checked-bgColor-hover: #2a7aef;
917
923
  --fgColor-accent: #4493f8; /** Accent text for links and interactive elements */
918
924
  --reactionButton-selected-bgColor-hover: #3a8cfd5c;
919
- --avatar-shadow: 0px 0px 0px 2px #0d1117;
925
+ --avatar-shadow: 0 0 0 2px #0d1117;
920
926
  --avatarStack-fade-bgColor-default: #3d444d;
921
927
  --avatarStack-fade-bgColor-muted: #2a313c;
922
928
  --bgColor-accent-emphasis: #1f6feb; /** Strong accent background for active states and focused states */
@@ -963,8 +969,8 @@
963
969
  --borderColor-transparent: #00000000; /** Fully transparent border */
964
970
  --button-danger-bgColor-hover: #b62324;
965
971
  --button-danger-iconColor-rest: var(--button-danger-fgColor-rest);
966
- --button-danger-shadow-selected: 0px 0px 0px 0px #000000;
967
- --button-default-shadow-resting: 0px 0px 0px 0px #000000;
972
+ --button-danger-shadow-selected: 0 0 0 0 #00000000;
973
+ --button-default-shadow-resting: 0 0 0 0 #00000000;
968
974
  --button-inactive-bgColor: #262c36;
969
975
  --button-inactive-fgColor: #9198a1;
970
976
  --button-invisible-bgColor-disabled: #00000000;
@@ -973,8 +979,8 @@
973
979
  --button-outline-fgColor-disabled: #4493f880;
974
980
  --button-outline-fgColor-hover: #58a6ff;
975
981
  --button-outline-fgColor-rest: #388bfd;
976
- --button-outline-shadow-selected: 0px 0px 0px 0px #000000;
977
- --button-primary-shadow-selected: 0px 0px 0px 0px #000000;
982
+ --button-outline-shadow-selected: 0 0 0 0 #00000000;
983
+ --button-primary-shadow-selected: 0 0 0 0 #00000000;
978
984
  --button-star-iconColor: #e3b341;
979
985
  --buttonCounter-danger-bgColor-rest: #49020233;
980
986
  --buttonCounter-default-bgColor-rest: #2f3742;
@@ -1594,7 +1600,7 @@
1594
1600
  --borderColor-draft-muted: #3d444d66; /** Subtle border for draft state indicators */
1595
1601
  --borderColor-muted: #3d444db3; /** Subtle border for secondary elements and light separators */
1596
1602
  --borderColor-neutral-emphasis: var(--borderColor-emphasis); /** Strong neutral semantic border */
1597
- --borderColor-translucent: #ffffff26; /** Semi-transparent border for overlays and layered elements */
1603
+ --borderColor-translucent: #ffffff26; /** Semi-transparent border for overlays and layered elements. Border-specific token — no bgColor-translucent counterpart exists by design. */
1598
1604
  --borderColor-upsell-emphasis: var(--borderColor-done-emphasis); /** Strong border for prominent upsell elements */
1599
1605
  --borderColor-upsell-muted: var(--borderColor-done-muted); /** Subtle border for upsell and promotional content */
1600
1606
  --button-danger-bgColor-active: var(--bgColor-danger-emphasis);
@@ -1718,30 +1724,34 @@
1718
1724
  --reactionButton-selected-fgColor-rest: var(--fgColor-link);
1719
1725
  --selectMenu-borderColor: var(--borderColor-default);
1720
1726
  --selection-bgColor: #1f6febb3; /** Background color for text selection highlights */
1721
- --shadow-floating-legacy: 0px 6px 12px -3px #01040966, 0px 6px 18px 0px #01040966;
1722
- --shadow-inset: inset 0px 1px 0px 0px #0104093d;
1723
- --shadow-resting-medium: 0px 1px 1px 0px #01040966, 0px 3px 6px 0px #010409cc;
1724
- --shadow-resting-small: 0px 1px 1px 0px #01040999, 0px 1px 3px 0px #01040999;
1725
- --shadow-resting-xsmall: 0px 1px 1px 0px #010409cc;
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 */
1726
1732
  --tooltip-bgColor: var(--bgColor-emphasis);
1727
1733
  --treeViewItem-leadingVisual-iconColor-rest: var(--fgColor-muted);
1728
1734
  --underlineNav-iconColor-rest: var(--fgColor-muted);
1729
1735
  --avatar-borderColor: var(--borderColor-translucent);
1730
1736
  --border-closed-emphasis: var(--border-danger-emphasis);
1731
1737
  --border-closed-muted: var(--border-danger-muted);
1738
+ --border-draft-muted: 0.0625rem solid #3d444d66;
1732
1739
  --border-muted: 0.0625rem solid #3d444db3;
1733
1740
  --border-neutral-emphasis: 0.0625rem solid #656c76;
1734
1741
  --border-open-emphasis: var(--border-success-emphasis);
1735
1742
  --border-open-muted: var(--border-success-muted);
1743
+ --border-translucent: 0.0625rem solid #ffffff26; /** Semi-transparent border shorthand for overlays and layered elements. Border-specific token — no bgColor-translucent counterpart exists by design. */
1736
1744
  --border-upsell-emphasis: 0.0625rem solid #8957e5;
1737
1745
  --border-upsell-muted: 0.0625rem solid #ab7df866;
1738
1746
  --borderColor-draft-emphasis: var(--borderColor-neutral-emphasis); /** Strong border for draft state badges */
1739
1747
  --borderColor-neutral-muted: var(--borderColor-muted); /** Subtle neutral semantic border */
1740
1748
  --button-danger-bgColor-disabled: var(--control-bgColor-disabled);
1741
1749
  --button-danger-borderColor-rest: var(--control-borderColor-rest);
1750
+ --button-danger-iconColor-disabled: var(--button-danger-fgColor-disabled);
1742
1751
  --button-default-bgColor-disabled: var(--control-bgColor-disabled);
1743
1752
  --button-default-borderColor-disabled: var(--control-borderColor-disabled);
1744
1753
  --button-default-borderColor-rest: var(--control-borderColor-rest);
1754
+ --button-default-fgColor-disabled: var(--control-fgColor-disabled);
1745
1755
  --button-default-fgColor-rest: var(--control-fgColor-rest);
1746
1756
  --button-invisible-fgColor-active: var(--control-fgColor-rest);
1747
1757
  --button-invisible-fgColor-disabled: var(--control-fgColor-disabled);
@@ -1750,6 +1760,7 @@
1750
1760
  --button-invisible-iconColor-disabled: var(--control-fgColor-disabled);
1751
1761
  --button-primary-borderColor-rest: var(--borderColor-translucent);
1752
1762
  --button-primary-fgColor-rest: var(--fgColor-white);
1763
+ --button-primary-iconColor-disabled: var(--button-primary-fgColor-disabled);
1753
1764
  --button-primary-iconColor-rest: var(--fgColor-white);
1754
1765
  --buttonKeybindingHint-danger-bgColor-disabled: var(--buttonKeybindingHint-default-bgColor-disabled);
1755
1766
  --buttonKeybindingHint-danger-fgColor-active: var(--fgColor-onEmphasis);
@@ -1778,6 +1789,7 @@
1778
1789
  --focus-outline: 2px solid #1f6feb; /** Focus ring outline for keyboard navigation and accessibility. */
1779
1790
  --overlay-borderColor: var(--borderColor-muted);
1780
1791
  --tooltip-fgColor: var(--fgColor-onEmphasis);
1792
+ --border-draft-emphasis: 0.0625rem solid #656c76;
1781
1793
  --border-neutral-muted: 0.0625rem solid #3d444db3;
1782
1794
  --button-danger-borderColor-hover: var(--button-primary-borderColor-rest);
1783
1795
  --button-default-borderColor-active: var(--button-default-borderColor-rest);
@@ -1787,10 +1799,10 @@
1787
1799
  --buttonKeybindingHint-danger-borderColor-disabled: var(--buttonKeybindingHint-default-borderColor-disabled);
1788
1800
  --buttonKeybindingHint-danger-borderColor-rest: var(--buttonKeybindingHint-default-borderColor-rest);
1789
1801
  --buttonKeybindingHint-danger-fgColor-disabled: var(--buttonKeybindingHint-default-fgColor-disabled);
1790
- --shadow-floating-large: 0px 0px 0px 1px #3d444d, 0px 24px 48px 0px #010409; /** Large floating shadow for modals and dialogs */
1791
- --shadow-floating-medium: 0px 0px 0px 1px #3d444d, 0px 8px 16px -4px #01040966, 0px 4px 32px -4px #01040966, 0px 24px 48px -12px #01040966, 0px 48px 96px -24px #01040966;
1792
- --shadow-floating-small: 0px 0px 0px 1px #3d444d, 0px 6px 12px -3px #01040966, 0px 6px 18px 0px #01040966; /** Small floating shadow for dropdowns, tooltips, and small overlays */
1793
- --shadow-floating-xlarge: 0px 0px 0px 1px #3d444d, 0px 32px 64px 0px #010409;
1802
+ --shadow-floating-large: 0 0 0 1px #3d444d, 0 24px 48px 0 #010409; /** Large floating shadow for modals and dialogs */
1803
+ --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 */
1804
+ --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 */
1805
+ --shadow-floating-xlarge: 0 0 0 1px #3d444d, 0 32px 64px 0 #010409; /** Extra large floating shadow for full-screen overlays and sheets */
1794
1806
  --underlineNav-borderColor-hover: var(--borderColor-neutral-muted);
1795
1807
  --button-danger-borderColor-active: var(--button-danger-borderColor-hover);
1796
1808
  --button-outline-borderColor-hover: var(--button-default-borderColor-hover);