@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
package/dist/internalCss/light-tritanopia.css CHANGED
@@ -358,14 +358,14 @@
358
358
  --button-danger-bgColor-active: var(--base-color-red-6);
359
359
  --button-danger-fgColor-disabled: #d1242f80;
360
360
  --button-danger-fgColor-rest: var(--fgColor-danger);
361
- --button-danger-shadow-selected: inset 0px 1px 0px 0px #4c001433;
361
+ --button-danger-shadow-selected: inset 0 1px 0 0 #4c001433;
362
362
  --button-inactive-bgColor: var(--base-color-neutral-3);
363
363
  --button-inactive-fgColor: var(--base-color-neutral-9);
364
364
  --button-invisible-bgColor-disabled: var(--base-color-transparent);
365
365
  --button-invisible-borderColor-disabled: var(--base-color-transparent);
366
- --button-outline-shadow-selected: inset 0px 1px 0px 0px #00215533;
366
+ --button-outline-shadow-selected: inset 0 1px 0 0 #00215533;
367
367
  --button-primary-borderColor-disabled: var(--button-primary-bgColor-disabled);
368
- --button-primary-shadow-selected: inset 0px 1px 0px 0px #0021554d;
368
+ --button-primary-shadow-selected: inset 0 1px 0 0 #0021554d;
369
369
  --button-star-iconColor: var(--base-color-yellow-2);
370
370
  --buttonCounter-danger-fgColor-disabled: #d1242f80;
371
371
  --buttonCounter-outline-fgColor-rest: var(--base-color-blue-6);
@@ -937,14 +937,14 @@
937
937
  --reactionButton-selected-fgColor-hover: var(--base-color-blue-6);
938
938
  --selectMenu-bgColor-active: var(--base-color-blue-1);
939
939
  --selectMenu-borderColor: var(--base-color-transparent);
940
- --shadow-floating-legacy: 0px 6px 12px -3px #25292e0a, 0px 6px 18px 0px #25292e1f;
941
- --shadow-resting-medium: 0px 1px 1px 0px #25292e1a, 0px 3px 6px 0px #25292e1f;
940
+ --shadow-floating-legacy: 0 6px 12px -3px #25292e0a, 0 6px 18px 0 #25292e1f; /** Legacy floating shadow for backward compatibility */
941
+ --shadow-resting-medium: 0 1px 1px 0 #25292e1a, 0 3px 6px 0 #25292e1f; /** Medium resting shadow for cards and elevated surfaces */
942
942
  --skeletonLoader-bgColor: #818b981a;
943
943
  --topicTag-borderColor: var(--base-color-transparent);
944
944
  --treeViewItem-leadingVisual-iconColor-rest: var(--base-color-blue-3);
945
945
  --underlineNav-borderColor-active: var(--base-color-coral-3);
946
946
  --avatar-bgColor: var(--base-color-neutral-0);
947
- --avatar-shadow: 0px 0px 0px 2px #ffffffcc;
947
+ --avatar-shadow: 0 0 0 2px #ffffffcc;
948
948
  --base-color-inset: var(--base-color-neutral-0);
949
949
  --bgColor-black: var(--base-color-neutral-13); /** Pure black background */
950
950
  --bgColor-closed-emphasis: var(--bgColor-neutral-emphasis); /** Strong background for closed state badges and labels */
@@ -980,13 +980,14 @@
980
980
  --borderColor-draft-emphasis: var(--borderColor-neutral-emphasis); /** Strong border for draft state badges */
981
981
  --borderColor-draft-muted: #d1d9e066; /** Subtle border for draft state indicators */
982
982
  --borderColor-muted: #d1d9e0b3; /** Subtle border for secondary elements and light separators */
983
- --borderColor-translucent: #1f232826; /** Semi-transparent border for overlays and layered elements */
983
+ --borderColor-translucent: #1f232826; /** Semi-transparent border for overlays and layered elements. Border-specific token — no bgColor-translucent counterpart exists by design. */
984
984
  --borderColor-upsell-emphasis: var(--borderColor-done-emphasis); /** Strong border for prominent upsell elements */
985
985
  --borderColor-upsell-muted: var(--borderColor-done-muted); /** Subtle border for upsell and promotional content */
986
986
  --button-danger-bgColor-hover: var(--bgColor-danger-emphasis);
987
987
  --button-danger-bgColor-rest: var(--control-bgColor-rest);
988
988
  --button-danger-fgColor-active: var(--base-color-neutral-0);
989
989
  --button-danger-fgColor-hover: var(--base-color-neutral-0);
990
+ --button-danger-iconColor-disabled: var(--button-danger-fgColor-disabled);
990
991
  --button-danger-iconColor-hover: var(--base-color-neutral-0);
991
992
  --button-danger-iconColor-rest: var(--button-danger-fgColor-rest);
992
993
  --button-default-bgColor-active: var(--control-bgColor-active);
@@ -994,7 +995,7 @@
994
995
  --button-default-bgColor-rest: var(--control-bgColor-rest);
995
996
  --button-default-bgColor-selected: var(--control-bgColor-active);
996
997
  --button-default-fgColor-rest: var(--control-fgColor-rest);
997
- --button-default-shadow-resting: 0px 1px 0px 0px #1f23280a;
998
+ --button-default-shadow-resting: 0 1px 0 0 #1f23280a;
998
999
  --button-invisible-bgColor-active: var(--control-transparent-bgColor-active);
999
1000
  --button-invisible-bgColor-hover: var(--control-transparent-bgColor-hover);
1000
1001
  --button-invisible-bgColor-rest: var(--control-transparent-bgColor-rest);
@@ -1102,9 +1103,9 @@
1102
1103
  --progressBar-bgColor-success: var(--bgColor-success-emphasis);
1103
1104
  --progressBar-track-bgColor: var(--borderColor-default);
1104
1105
  --selection-bgColor: #0969da33; /** Background color for text selection highlights */
1105
- --shadow-inset: inset 0px 1px 0px 0px #1f23280a;
1106
- --shadow-resting-small: 0px 1px 1px 0px #1f23280f, 0px 1px 3px 0px #1f23280f;
1107
- --shadow-resting-xsmall: 0px 1px 1px 0px #1f23280f;
1106
+ --shadow-inset: inset 0 1px 0 0 #1f23280a; /** Inset shadow for recessed elements */
1107
+ --shadow-resting-small: 0 1px 1px 0 #1f23280a, 0 1px 2px 0 #1f232808; /** Small resting shadow for buttons and interactive elements */
1108
+ --shadow-resting-xsmall: 0 1px 1px 0 #1f23280d; /** Extra small resting shadow for minimal elevation */
1108
1109
  --sideNav-bgColor-selected: var(--base-color-neutral-0);
1109
1110
  --timelineBadge-bgColor: var(--bgColor-muted);
1110
1111
  --tooltip-bgColor: var(--bgColor-emphasis);
@@ -1112,9 +1113,12 @@
1112
1113
  --avatar-borderColor: var(--borderColor-translucent);
1113
1114
  --border-closed-emphasis: var(--border-danger-emphasis);
1114
1115
  --border-closed-muted: var(--border-danger-muted);
1116
+ --border-draft-emphasis: 0.0625rem solid #59636e;
1117
+ --border-draft-muted: 0.0625rem solid #d1d9e066;
1115
1118
  --border-muted: 0.0625rem solid #d1d9e0b3;
1116
1119
  --border-open-emphasis: var(--border-success-emphasis);
1117
1120
  --border-open-muted: var(--border-success-muted);
1121
+ --border-translucent: 0.0625rem solid #1f232826; /** Semi-transparent border shorthand for overlays and layered elements. Border-specific token — no bgColor-translucent counterpart exists by design. */
1118
1122
  --border-upsell-emphasis: 0.0625rem solid #8250df;
1119
1123
  --border-upsell-muted: 0.0625rem solid #c297ff66;
1120
1124
  --borderColor-neutral-muted: var(--borderColor-muted); /** Subtle neutral semantic border */
@@ -1124,11 +1128,13 @@
1124
1128
  --button-default-borderColor-active: var(--control-borderColor-rest);
1125
1129
  --button-default-borderColor-disabled: var(--control-borderColor-disabled);
1126
1130
  --button-default-borderColor-rest: var(--control-borderColor-rest);
1131
+ --button-default-fgColor-disabled: var(--control-fgColor-disabled);
1127
1132
  --button-invisible-fgColor-disabled: var(--control-fgColor-disabled);
1128
1133
  --button-invisible-iconColor-disabled: var(--control-fgColor-disabled);
1129
1134
  --button-outline-bgColor-disabled: var(--control-bgColor-disabled);
1130
1135
  --button-primary-borderColor-rest: var(--borderColor-translucent);
1131
1136
  --button-primary-fgColor-rest: var(--fgColor-white);
1137
+ --button-primary-iconColor-disabled: var(--button-primary-fgColor-disabled);
1132
1138
  --button-primary-iconColor-rest: #ffffffcc;
1133
1139
  --buttonKeybindingHint-danger-bgColor-disabled: var(--buttonKeybindingHint-default-bgColor-disabled);
1134
1140
  --buttonKeybindingHint-danger-borderColor-hover: var(--borderColor-translucent);
@@ -1186,10 +1192,10 @@
1186
1192
  --buttonKeybindingHint-danger-borderColor-disabled: var(--buttonKeybindingHint-default-borderColor-disabled);
1187
1193
  --buttonKeybindingHint-danger-borderColor-rest: var(--buttonKeybindingHint-default-borderColor-rest);
1188
1194
  --buttonKeybindingHint-danger-fgColor-disabled: var(--buttonKeybindingHint-default-fgColor-disabled);
1189
- --shadow-floating-large: 0px 0px 0px 1px #d1d9e0, 0px 40px 80px 0px #25292e3d; /** Large floating shadow for modals and dialogs */
1190
- --shadow-floating-medium: 0px 0px 0px 1px #d1d9e0, 0px 8px 16px -4px #25292e14, 0px 4px 32px -4px #25292e14, 0px 24px 48px -12px #25292e14, 0px 48px 96px -24px #25292e14;
1191
- --shadow-floating-small: 0px 0px 0px 1px #d1d9e080, 0px 6px 12px -3px #25292e0a, 0px 6px 18px 0px #25292e1f; /** Small floating shadow for dropdowns, tooltips, and small overlays */
1192
- --shadow-floating-xlarge: 0px 0px 0px 1px #d1d9e0, 0px 56px 112px 0px #25292e52;
1195
+ --shadow-floating-large: 0 0 0 1px #d1d9e000, 0 40px 80px 0 #25292e3d; /** Large floating shadow for modals and dialogs */
1196
+ --shadow-floating-medium: 0 0 0 1px #d1d9e000, 0 8px 16px -4px #25292e14, 0 4px 32px -4px #25292e14, 0 24px 48px -12px #25292e14, 0 48px 96px -24px #25292e14; /** Medium floating shadow for popovers and action menus */
1197
+ --shadow-floating-small: 0 0 0 1px #d1d9e080, 0 6px 12px -3px #25292e0a, 0 6px 18px 0 #25292e1f; /** Small floating shadow for dropdowns, tooltips, and small overlays */
1198
+ --shadow-floating-xlarge: 0 0 0 1px #d1d9e000, 0 56px 112px 0 #25292e52; /** Extra large floating shadow for full-screen overlays and sheets */
1193
1199
  --button-danger-borderColor-active: var(--button-danger-borderColor-hover);
1194
1200
  --button-outline-borderColor-hover: var(--button-primary-borderColor-hover);
1195
1201
  --button-outline-borderColor-active: var(--button-outline-borderColor-hover);
@@ -1554,14 +1560,14 @@
1554
1560
  --button-danger-bgColor-active: var(--base-color-red-6);
1555
1561
  --button-danger-fgColor-disabled: #d1242f80;
1556
1562
  --button-danger-fgColor-rest: var(--fgColor-danger);
1557
- --button-danger-shadow-selected: inset 0px 1px 0px 0px #4c001433;
1563
+ --button-danger-shadow-selected: inset 0 1px 0 0 #4c001433;
1558
1564
  --button-inactive-bgColor: var(--base-color-neutral-3);
1559
1565
  --button-inactive-fgColor: var(--base-color-neutral-9);
1560
1566
  --button-invisible-bgColor-disabled: var(--base-color-transparent);
1561
1567
  --button-invisible-borderColor-disabled: var(--base-color-transparent);
1562
- --button-outline-shadow-selected: inset 0px 1px 0px 0px #00215533;
1568
+ --button-outline-shadow-selected: inset 0 1px 0 0 #00215533;
1563
1569
  --button-primary-borderColor-disabled: var(--button-primary-bgColor-disabled);
1564
- --button-primary-shadow-selected: inset 0px 1px 0px 0px #0021554d;
1570
+ --button-primary-shadow-selected: inset 0 1px 0 0 #0021554d;
1565
1571
  --button-star-iconColor: var(--base-color-yellow-2);
1566
1572
  --buttonCounter-danger-fgColor-disabled: #d1242f80;
1567
1573
  --buttonCounter-outline-fgColor-rest: var(--base-color-blue-6);
@@ -2133,14 +2139,14 @@
2133
2139
  --reactionButton-selected-fgColor-hover: var(--base-color-blue-6);
2134
2140
  --selectMenu-bgColor-active: var(--base-color-blue-1);
2135
2141
  --selectMenu-borderColor: var(--base-color-transparent);
2136
- --shadow-floating-legacy: 0px 6px 12px -3px #25292e0a, 0px 6px 18px 0px #25292e1f;
2137
- --shadow-resting-medium: 0px 1px 1px 0px #25292e1a, 0px 3px 6px 0px #25292e1f;
2142
+ --shadow-floating-legacy: 0 6px 12px -3px #25292e0a, 0 6px 18px 0 #25292e1f; /** Legacy floating shadow for backward compatibility */
2143
+ --shadow-resting-medium: 0 1px 1px 0 #25292e1a, 0 3px 6px 0 #25292e1f; /** Medium resting shadow for cards and elevated surfaces */
2138
2144
  --skeletonLoader-bgColor: #818b981a;
2139
2145
  --topicTag-borderColor: var(--base-color-transparent);
2140
2146
  --treeViewItem-leadingVisual-iconColor-rest: var(--base-color-blue-3);
2141
2147
  --underlineNav-borderColor-active: var(--base-color-coral-3);
2142
2148
  --avatar-bgColor: var(--base-color-neutral-0);
2143
- --avatar-shadow: 0px 0px 0px 2px #ffffffcc;
2149
+ --avatar-shadow: 0 0 0 2px #ffffffcc;
2144
2150
  --base-color-inset: var(--base-color-neutral-0);
2145
2151
  --bgColor-black: var(--base-color-neutral-13); /** Pure black background */
2146
2152
  --bgColor-closed-emphasis: var(--bgColor-neutral-emphasis); /** Strong background for closed state badges and labels */
@@ -2176,13 +2182,14 @@
2176
2182
  --borderColor-draft-emphasis: var(--borderColor-neutral-emphasis); /** Strong border for draft state badges */
2177
2183
  --borderColor-draft-muted: #d1d9e066; /** Subtle border for draft state indicators */
2178
2184
  --borderColor-muted: #d1d9e0b3; /** Subtle border for secondary elements and light separators */
2179
- --borderColor-translucent: #1f232826; /** Semi-transparent border for overlays and layered elements */
2185
+ --borderColor-translucent: #1f232826; /** Semi-transparent border for overlays and layered elements. Border-specific token — no bgColor-translucent counterpart exists by design. */
2180
2186
  --borderColor-upsell-emphasis: var(--borderColor-done-emphasis); /** Strong border for prominent upsell elements */
2181
2187
  --borderColor-upsell-muted: var(--borderColor-done-muted); /** Subtle border for upsell and promotional content */
2182
2188
  --button-danger-bgColor-hover: var(--bgColor-danger-emphasis);
2183
2189
  --button-danger-bgColor-rest: var(--control-bgColor-rest);
2184
2190
  --button-danger-fgColor-active: var(--base-color-neutral-0);
2185
2191
  --button-danger-fgColor-hover: var(--base-color-neutral-0);
2192
+ --button-danger-iconColor-disabled: var(--button-danger-fgColor-disabled);
2186
2193
  --button-danger-iconColor-hover: var(--base-color-neutral-0);
2187
2194
  --button-danger-iconColor-rest: var(--button-danger-fgColor-rest);
2188
2195
  --button-default-bgColor-active: var(--control-bgColor-active);
@@ -2190,7 +2197,7 @@
2190
2197
  --button-default-bgColor-rest: var(--control-bgColor-rest);
2191
2198
  --button-default-bgColor-selected: var(--control-bgColor-active);
2192
2199
  --button-default-fgColor-rest: var(--control-fgColor-rest);
2193
- --button-default-shadow-resting: 0px 1px 0px 0px #1f23280a;
2200
+ --button-default-shadow-resting: 0 1px 0 0 #1f23280a;
2194
2201
  --button-invisible-bgColor-active: var(--control-transparent-bgColor-active);
2195
2202
  --button-invisible-bgColor-hover: var(--control-transparent-bgColor-hover);
2196
2203
  --button-invisible-bgColor-rest: var(--control-transparent-bgColor-rest);
@@ -2298,9 +2305,9 @@
2298
2305
  --progressBar-bgColor-success: var(--bgColor-success-emphasis);
2299
2306
  --progressBar-track-bgColor: var(--borderColor-default);
2300
2307
  --selection-bgColor: #0969da33; /** Background color for text selection highlights */
2301
- --shadow-inset: inset 0px 1px 0px 0px #1f23280a;
2302
- --shadow-resting-small: 0px 1px 1px 0px #1f23280f, 0px 1px 3px 0px #1f23280f;
2303
- --shadow-resting-xsmall: 0px 1px 1px 0px #1f23280f;
2308
+ --shadow-inset: inset 0 1px 0 0 #1f23280a; /** Inset shadow for recessed elements */
2309
+ --shadow-resting-small: 0 1px 1px 0 #1f23280a, 0 1px 2px 0 #1f232808; /** Small resting shadow for buttons and interactive elements */
2310
+ --shadow-resting-xsmall: 0 1px 1px 0 #1f23280d; /** Extra small resting shadow for minimal elevation */
2304
2311
  --sideNav-bgColor-selected: var(--base-color-neutral-0);
2305
2312
  --timelineBadge-bgColor: var(--bgColor-muted);
2306
2313
  --tooltip-bgColor: var(--bgColor-emphasis);
@@ -2308,9 +2315,12 @@
2308
2315
  --avatar-borderColor: var(--borderColor-translucent);
2309
2316
  --border-closed-emphasis: var(--border-danger-emphasis);
2310
2317
  --border-closed-muted: var(--border-danger-muted);
2318
+ --border-draft-emphasis: 0.0625rem solid #59636e;
2319
+ --border-draft-muted: 0.0625rem solid #d1d9e066;
2311
2320
  --border-muted: 0.0625rem solid #d1d9e0b3;
2312
2321
  --border-open-emphasis: var(--border-success-emphasis);
2313
2322
  --border-open-muted: var(--border-success-muted);
2323
+ --border-translucent: 0.0625rem solid #1f232826; /** Semi-transparent border shorthand for overlays and layered elements. Border-specific token — no bgColor-translucent counterpart exists by design. */
2314
2324
  --border-upsell-emphasis: 0.0625rem solid #8250df;
2315
2325
  --border-upsell-muted: 0.0625rem solid #c297ff66;
2316
2326
  --borderColor-neutral-muted: var(--borderColor-muted); /** Subtle neutral semantic border */
@@ -2320,11 +2330,13 @@
2320
2330
  --button-default-borderColor-active: var(--control-borderColor-rest);
2321
2331
  --button-default-borderColor-disabled: var(--control-borderColor-disabled);
2322
2332
  --button-default-borderColor-rest: var(--control-borderColor-rest);
2333
+ --button-default-fgColor-disabled: var(--control-fgColor-disabled);
2323
2334
  --button-invisible-fgColor-disabled: var(--control-fgColor-disabled);
2324
2335
  --button-invisible-iconColor-disabled: var(--control-fgColor-disabled);
2325
2336
  --button-outline-bgColor-disabled: var(--control-bgColor-disabled);
2326
2337
  --button-primary-borderColor-rest: var(--borderColor-translucent);
2327
2338
  --button-primary-fgColor-rest: var(--fgColor-white);
2339
+ --button-primary-iconColor-disabled: var(--button-primary-fgColor-disabled);
2328
2340
  --button-primary-iconColor-rest: #ffffffcc;
2329
2341
  --buttonKeybindingHint-danger-bgColor-disabled: var(--buttonKeybindingHint-default-bgColor-disabled);
2330
2342
  --buttonKeybindingHint-danger-borderColor-hover: var(--borderColor-translucent);
@@ -2382,10 +2394,10 @@
2382
2394
  --buttonKeybindingHint-danger-borderColor-disabled: var(--buttonKeybindingHint-default-borderColor-disabled);
2383
2395
  --buttonKeybindingHint-danger-borderColor-rest: var(--buttonKeybindingHint-default-borderColor-rest);
2384
2396
  --buttonKeybindingHint-danger-fgColor-disabled: var(--buttonKeybindingHint-default-fgColor-disabled);
2385
- --shadow-floating-large: 0px 0px 0px 1px #d1d9e0, 0px 40px 80px 0px #25292e3d; /** Large floating shadow for modals and dialogs */
2386
- --shadow-floating-medium: 0px 0px 0px 1px #d1d9e0, 0px 8px 16px -4px #25292e14, 0px 4px 32px -4px #25292e14, 0px 24px 48px -12px #25292e14, 0px 48px 96px -24px #25292e14;
2387
- --shadow-floating-small: 0px 0px 0px 1px #d1d9e080, 0px 6px 12px -3px #25292e0a, 0px 6px 18px 0px #25292e1f; /** Small floating shadow for dropdowns, tooltips, and small overlays */
2388
- --shadow-floating-xlarge: 0px 0px 0px 1px #d1d9e0, 0px 56px 112px 0px #25292e52;
2397
+ --shadow-floating-large: 0 0 0 1px #d1d9e000, 0 40px 80px 0 #25292e3d; /** Large floating shadow for modals and dialogs */
2398
+ --shadow-floating-medium: 0 0 0 1px #d1d9e000, 0 8px 16px -4px #25292e14, 0 4px 32px -4px #25292e14, 0 24px 48px -12px #25292e14, 0 48px 96px -24px #25292e14; /** Medium floating shadow for popovers and action menus */
2399
+ --shadow-floating-small: 0 0 0 1px #d1d9e080, 0 6px 12px -3px #25292e0a, 0 6px 18px 0 #25292e1f; /** Small floating shadow for dropdowns, tooltips, and small overlays */
2400
+ --shadow-floating-xlarge: 0 0 0 1px #d1d9e000, 0 56px 112px 0 #25292e52; /** Extra large floating shadow for full-screen overlays and sheets */
2389
2401
  --button-danger-borderColor-active: var(--button-danger-borderColor-hover);
2390
2402
  --button-outline-borderColor-hover: var(--button-primary-borderColor-hover);
2391
2403
  --button-outline-borderColor-active: var(--button-outline-borderColor-hover);
package/dist/internalCss/light.css CHANGED
@@ -355,15 +355,15 @@
355
355
  --button-danger-bgColor-active: var(--base-color-red-6);
356
356
  --button-danger-fgColor-disabled: #d1242f80;
357
357
  --button-danger-fgColor-rest: var(--fgColor-danger);
358
- --button-danger-shadow-selected: inset 0px 1px 0px 0px #4c001433;
358
+ --button-danger-shadow-selected: inset 0 1px 0 0 #4c001433;
359
359
  --button-inactive-bgColor: var(--base-color-neutral-3);
360
360
  --button-inactive-fgColor: var(--base-color-neutral-9);
361
361
  --button-invisible-bgColor-disabled: var(--base-color-transparent);
362
362
  --button-invisible-borderColor-disabled: var(--base-color-transparent);
363
- --button-outline-shadow-selected: inset 0px 1px 0px 0px #00215533;
363
+ --button-outline-shadow-selected: inset 0 1px 0 0 #00215533;
364
364
  --button-primary-bgColor-rest: var(--bgColor-success-emphasis);
365
365
  --button-primary-borderColor-disabled: var(--button-primary-bgColor-disabled);
366
- --button-primary-shadow-selected: inset 0px 1px 0px 0px #002d114d;
366
+ --button-primary-shadow-selected: inset 0 1px 0 0 #002d114d;
367
367
  --button-star-iconColor: var(--base-color-yellow-2);
368
368
  --buttonCounter-danger-fgColor-disabled: #d1242f80;
369
369
  --buttonCounter-outline-fgColor-rest: var(--base-color-blue-6);
@@ -934,14 +934,14 @@
934
934
  --reactionButton-selected-fgColor-hover: var(--base-color-blue-6);
935
935
  --selectMenu-bgColor-active: var(--base-color-blue-1);
936
936
  --selectMenu-borderColor: var(--base-color-transparent);
937
- --shadow-floating-legacy: 0px 6px 12px -3px #25292e0a, 0px 6px 18px 0px #25292e1f;
938
- --shadow-resting-medium: 0px 1px 1px 0px #25292e1a, 0px 3px 6px 0px #25292e1f;
937
+ --shadow-floating-legacy: 0 6px 12px -3px #25292e0a, 0 6px 18px 0 #25292e1f; /** Legacy floating shadow for backward compatibility */
938
+ --shadow-resting-medium: 0 1px 1px 0 #25292e1a, 0 3px 6px 0 #25292e1f; /** Medium resting shadow for cards and elevated surfaces */
939
939
  --skeletonLoader-bgColor: #818b981a;
940
940
  --topicTag-borderColor: var(--base-color-transparent);
941
941
  --treeViewItem-leadingVisual-iconColor-rest: var(--base-color-blue-3);
942
942
  --underlineNav-borderColor-active: var(--base-color-coral-3);
943
943
  --avatar-bgColor: var(--base-color-neutral-0);
944
- --avatar-shadow: 0px 0px 0px 2px #ffffffcc;
944
+ --avatar-shadow: 0 0 0 2px #ffffffcc;
945
945
  --base-color-inset: var(--base-color-neutral-0);
946
946
  --bgColor-black: var(--base-color-neutral-13); /** Pure black background */
947
947
  --bgColor-closed-emphasis: var(--bgColor-danger-emphasis); /** Strong background for closed state badges and labels */
@@ -979,13 +979,14 @@
979
979
  --borderColor-muted: #d1d9e0b3; /** Subtle border for secondary elements and light separators */
980
980
  --borderColor-open-emphasis: var(--borderColor-success-emphasis); /** Strong border for open state badges */
981
981
  --borderColor-open-muted: var(--borderColor-success-muted); /** Subtle border for open state indicators */
982
- --borderColor-translucent: #1f232826; /** Semi-transparent border for overlays and layered elements */
982
+ --borderColor-translucent: #1f232826; /** Semi-transparent border for overlays and layered elements. Border-specific token — no bgColor-translucent counterpart exists by design. */
983
983
  --borderColor-upsell-emphasis: var(--borderColor-done-emphasis); /** Strong border for prominent upsell elements */
984
984
  --borderColor-upsell-muted: var(--borderColor-done-muted); /** Subtle border for upsell and promotional content */
985
985
  --button-danger-bgColor-hover: var(--bgColor-danger-emphasis);
986
986
  --button-danger-bgColor-rest: var(--control-bgColor-rest);
987
987
  --button-danger-fgColor-active: var(--base-color-neutral-0);
988
988
  --button-danger-fgColor-hover: var(--base-color-neutral-0);
989
+ --button-danger-iconColor-disabled: var(--button-danger-fgColor-disabled);
989
990
  --button-danger-iconColor-hover: var(--base-color-neutral-0);
990
991
  --button-danger-iconColor-rest: var(--button-danger-fgColor-rest);
991
992
  --button-default-bgColor-active: var(--control-bgColor-active);
@@ -993,7 +994,7 @@
993
994
  --button-default-bgColor-rest: var(--control-bgColor-rest);
994
995
  --button-default-bgColor-selected: var(--control-bgColor-active);
995
996
  --button-default-fgColor-rest: var(--control-fgColor-rest);
996
- --button-default-shadow-resting: 0px 1px 0px 0px #1f23280a;
997
+ --button-default-shadow-resting: 0 1px 0 0 #1f23280a;
997
998
  --button-invisible-bgColor-active: var(--control-transparent-bgColor-active);
998
999
  --button-invisible-bgColor-hover: var(--control-transparent-bgColor-hover);
999
1000
  --button-invisible-bgColor-rest: var(--control-transparent-bgColor-rest);
@@ -1101,9 +1102,9 @@
1101
1102
  --progressBar-bgColor-sponsors: var(--bgColor-sponsors-emphasis);
1102
1103
  --progressBar-track-bgColor: var(--borderColor-default);
1103
1104
  --selection-bgColor: #0969da33; /** Background color for text selection highlights */
1104
- --shadow-inset: inset 0px 1px 0px 0px #1f23280a;
1105
- --shadow-resting-small: 0px 1px 1px 0px #1f23280f, 0px 1px 3px 0px #1f23280f;
1106
- --shadow-resting-xsmall: 0px 1px 1px 0px #1f23280f;
1105
+ --shadow-inset: inset 0 1px 0 0 #1f23280a; /** Inset shadow for recessed elements */
1106
+ --shadow-resting-small: 0 1px 1px 0 #1f23280a, 0 1px 2px 0 #1f232808; /** Small resting shadow for buttons and interactive elements */
1107
+ --shadow-resting-xsmall: 0 1px 1px 0 #1f23280d; /** Extra small resting shadow for minimal elevation */
1107
1108
  --sideNav-bgColor-selected: var(--base-color-neutral-0);
1108
1109
  --timelineBadge-bgColor: var(--bgColor-muted);
1109
1110
  --tooltip-bgColor: var(--bgColor-emphasis);
@@ -1111,9 +1112,11 @@
1111
1112
  --avatar-borderColor: var(--borderColor-translucent);
1112
1113
  --border-closed-emphasis: var(--border-danger-emphasis);
1113
1114
  --border-closed-muted: var(--border-danger-muted);
1115
+ --border-draft-emphasis: 0.0625rem solid #59636e;
1114
1116
  --border-muted: 0.0625rem solid #d1d9e0b3;
1115
1117
  --border-open-emphasis: var(--border-success-emphasis);
1116
1118
  --border-open-muted: var(--border-success-muted);
1119
+ --border-translucent: 0.0625rem solid #1f232826; /** Semi-transparent border shorthand for overlays and layered elements. Border-specific token — no bgColor-translucent counterpart exists by design. */
1117
1120
  --border-upsell-emphasis: 0.0625rem solid #8250df;
1118
1121
  --border-upsell-muted: 0.0625rem solid #c297ff66;
1119
1122
  --borderColor-neutral-muted: var(--borderColor-muted); /** Subtle neutral semantic border */
@@ -1123,11 +1126,13 @@
1123
1126
  --button-default-borderColor-active: var(--control-borderColor-rest);
1124
1127
  --button-default-borderColor-disabled: var(--control-borderColor-disabled);
1125
1128
  --button-default-borderColor-rest: var(--control-borderColor-rest);
1129
+ --button-default-fgColor-disabled: var(--control-fgColor-disabled);
1126
1130
  --button-invisible-fgColor-disabled: var(--control-fgColor-disabled);
1127
1131
  --button-invisible-iconColor-disabled: var(--control-fgColor-disabled);
1128
1132
  --button-outline-bgColor-disabled: var(--control-bgColor-disabled);
1129
1133
  --button-primary-borderColor-rest: var(--borderColor-translucent);
1130
1134
  --button-primary-fgColor-rest: var(--fgColor-white);
1135
+ --button-primary-iconColor-disabled: var(--button-primary-fgColor-disabled);
1131
1136
  --button-primary-iconColor-rest: #ffffffcc;
1132
1137
  --buttonKeybindingHint-danger-bgColor-disabled: var(--buttonKeybindingHint-default-bgColor-disabled);
1133
1138
  --buttonKeybindingHint-danger-borderColor-hover: var(--borderColor-translucent);
@@ -1186,10 +1191,11 @@
1186
1191
  --buttonKeybindingHint-danger-borderColor-disabled: var(--buttonKeybindingHint-default-borderColor-disabled);
1187
1192
  --buttonKeybindingHint-danger-borderColor-rest: var(--buttonKeybindingHint-default-borderColor-rest);
1188
1193
  --buttonKeybindingHint-danger-fgColor-disabled: var(--buttonKeybindingHint-default-fgColor-disabled);
1189
- --shadow-floating-large: 0px 0px 0px 1px #d1d9e0, 0px 40px 80px 0px #25292e3d; /** Large floating shadow for modals and dialogs */
1190
- --shadow-floating-medium: 0px 0px 0px 1px #d1d9e0, 0px 8px 16px -4px #25292e14, 0px 4px 32px -4px #25292e14, 0px 24px 48px -12px #25292e14, 0px 48px 96px -24px #25292e14;
1191
- --shadow-floating-small: 0px 0px 0px 1px #d1d9e080, 0px 6px 12px -3px #25292e0a, 0px 6px 18px 0px #25292e1f; /** Small floating shadow for dropdowns, tooltips, and small overlays */
1192
- --shadow-floating-xlarge: 0px 0px 0px 1px #d1d9e0, 0px 56px 112px 0px #25292e52;
1194
+ --shadow-floating-large: 0 0 0 1px #d1d9e000, 0 40px 80px 0 #25292e3d; /** Large floating shadow for modals and dialogs */
1195
+ --shadow-floating-medium: 0 0 0 1px #d1d9e000, 0 8px 16px -4px #25292e14, 0 4px 32px -4px #25292e14, 0 24px 48px -12px #25292e14, 0 48px 96px -24px #25292e14; /** Medium floating shadow for popovers and action menus */
1196
+ --shadow-floating-small: 0 0 0 1px #d1d9e080, 0 6px 12px -3px #25292e0a, 0 6px 18px 0 #25292e1f; /** Small floating shadow for dropdowns, tooltips, and small overlays */
1197
+ --shadow-floating-xlarge: 0 0 0 1px #d1d9e000, 0 56px 112px 0 #25292e52; /** Extra large floating shadow for full-screen overlays and sheets */
1198
+ --border-draft-muted: 0.0625rem solid #d1d9e0b3;
1193
1199
  --button-danger-borderColor-active: var(--button-danger-borderColor-hover);
1194
1200
  --button-outline-borderColor-hover: var(--button-primary-borderColor-hover);
1195
1201
  --button-outline-borderColor-active: var(--button-outline-borderColor-hover);
@@ -1551,15 +1557,15 @@
1551
1557
  --button-danger-bgColor-active: var(--base-color-red-6);
1552
1558
  --button-danger-fgColor-disabled: #d1242f80;
1553
1559
  --button-danger-fgColor-rest: var(--fgColor-danger);
1554
- --button-danger-shadow-selected: inset 0px 1px 0px 0px #4c001433;
1560
+ --button-danger-shadow-selected: inset 0 1px 0 0 #4c001433;
1555
1561
  --button-inactive-bgColor: var(--base-color-neutral-3);
1556
1562
  --button-inactive-fgColor: var(--base-color-neutral-9);
1557
1563
  --button-invisible-bgColor-disabled: var(--base-color-transparent);
1558
1564
  --button-invisible-borderColor-disabled: var(--base-color-transparent);
1559
- --button-outline-shadow-selected: inset 0px 1px 0px 0px #00215533;
1565
+ --button-outline-shadow-selected: inset 0 1px 0 0 #00215533;
1560
1566
  --button-primary-bgColor-rest: var(--bgColor-success-emphasis);
1561
1567
  --button-primary-borderColor-disabled: var(--button-primary-bgColor-disabled);
1562
- --button-primary-shadow-selected: inset 0px 1px 0px 0px #002d114d;
1568
+ --button-primary-shadow-selected: inset 0 1px 0 0 #002d114d;
1563
1569
  --button-star-iconColor: var(--base-color-yellow-2);
1564
1570
  --buttonCounter-danger-fgColor-disabled: #d1242f80;
1565
1571
  --buttonCounter-outline-fgColor-rest: var(--base-color-blue-6);
@@ -2130,14 +2136,14 @@
2130
2136
  --reactionButton-selected-fgColor-hover: var(--base-color-blue-6);
2131
2137
  --selectMenu-bgColor-active: var(--base-color-blue-1);
2132
2138
  --selectMenu-borderColor: var(--base-color-transparent);
2133
- --shadow-floating-legacy: 0px 6px 12px -3px #25292e0a, 0px 6px 18px 0px #25292e1f;
2134
- --shadow-resting-medium: 0px 1px 1px 0px #25292e1a, 0px 3px 6px 0px #25292e1f;
2139
+ --shadow-floating-legacy: 0 6px 12px -3px #25292e0a, 0 6px 18px 0 #25292e1f; /** Legacy floating shadow for backward compatibility */
2140
+ --shadow-resting-medium: 0 1px 1px 0 #25292e1a, 0 3px 6px 0 #25292e1f; /** Medium resting shadow for cards and elevated surfaces */
2135
2141
  --skeletonLoader-bgColor: #818b981a;
2136
2142
  --topicTag-borderColor: var(--base-color-transparent);
2137
2143
  --treeViewItem-leadingVisual-iconColor-rest: var(--base-color-blue-3);
2138
2144
  --underlineNav-borderColor-active: var(--base-color-coral-3);
2139
2145
  --avatar-bgColor: var(--base-color-neutral-0);
2140
- --avatar-shadow: 0px 0px 0px 2px #ffffffcc;
2146
+ --avatar-shadow: 0 0 0 2px #ffffffcc;
2141
2147
  --base-color-inset: var(--base-color-neutral-0);
2142
2148
  --bgColor-black: var(--base-color-neutral-13); /** Pure black background */
2143
2149
  --bgColor-closed-emphasis: var(--bgColor-danger-emphasis); /** Strong background for closed state badges and labels */
@@ -2175,13 +2181,14 @@
2175
2181
  --borderColor-muted: #d1d9e0b3; /** Subtle border for secondary elements and light separators */
2176
2182
  --borderColor-open-emphasis: var(--borderColor-success-emphasis); /** Strong border for open state badges */
2177
2183
  --borderColor-open-muted: var(--borderColor-success-muted); /** Subtle border for open state indicators */
2178
- --borderColor-translucent: #1f232826; /** Semi-transparent border for overlays and layered elements */
2184
+ --borderColor-translucent: #1f232826; /** Semi-transparent border for overlays and layered elements. Border-specific token — no bgColor-translucent counterpart exists by design. */
2179
2185
  --borderColor-upsell-emphasis: var(--borderColor-done-emphasis); /** Strong border for prominent upsell elements */
2180
2186
  --borderColor-upsell-muted: var(--borderColor-done-muted); /** Subtle border for upsell and promotional content */
2181
2187
  --button-danger-bgColor-hover: var(--bgColor-danger-emphasis);
2182
2188
  --button-danger-bgColor-rest: var(--control-bgColor-rest);
2183
2189
  --button-danger-fgColor-active: var(--base-color-neutral-0);
2184
2190
  --button-danger-fgColor-hover: var(--base-color-neutral-0);
2191
+ --button-danger-iconColor-disabled: var(--button-danger-fgColor-disabled);
2185
2192
  --button-danger-iconColor-hover: var(--base-color-neutral-0);
2186
2193
  --button-danger-iconColor-rest: var(--button-danger-fgColor-rest);
2187
2194
  --button-default-bgColor-active: var(--control-bgColor-active);
@@ -2189,7 +2196,7 @@
2189
2196
  --button-default-bgColor-rest: var(--control-bgColor-rest);
2190
2197
  --button-default-bgColor-selected: var(--control-bgColor-active);
2191
2198
  --button-default-fgColor-rest: var(--control-fgColor-rest);
2192
- --button-default-shadow-resting: 0px 1px 0px 0px #1f23280a;
2199
+ --button-default-shadow-resting: 0 1px 0 0 #1f23280a;
2193
2200
  --button-invisible-bgColor-active: var(--control-transparent-bgColor-active);
2194
2201
  --button-invisible-bgColor-hover: var(--control-transparent-bgColor-hover);
2195
2202
  --button-invisible-bgColor-rest: var(--control-transparent-bgColor-rest);
@@ -2297,9 +2304,9 @@
2297
2304
  --progressBar-bgColor-sponsors: var(--bgColor-sponsors-emphasis);
2298
2305
  --progressBar-track-bgColor: var(--borderColor-default);
2299
2306
  --selection-bgColor: #0969da33; /** Background color for text selection highlights */
2300
- --shadow-inset: inset 0px 1px 0px 0px #1f23280a;
2301
- --shadow-resting-small: 0px 1px 1px 0px #1f23280f, 0px 1px 3px 0px #1f23280f;
2302
- --shadow-resting-xsmall: 0px 1px 1px 0px #1f23280f;
2307
+ --shadow-inset: inset 0 1px 0 0 #1f23280a; /** Inset shadow for recessed elements */
2308
+ --shadow-resting-small: 0 1px 1px 0 #1f23280a, 0 1px 2px 0 #1f232808; /** Small resting shadow for buttons and interactive elements */
2309
+ --shadow-resting-xsmall: 0 1px 1px 0 #1f23280d; /** Extra small resting shadow for minimal elevation */
2303
2310
  --sideNav-bgColor-selected: var(--base-color-neutral-0);
2304
2311
  --timelineBadge-bgColor: var(--bgColor-muted);
2305
2312
  --tooltip-bgColor: var(--bgColor-emphasis);
@@ -2307,9 +2314,11 @@
2307
2314
  --avatar-borderColor: var(--borderColor-translucent);
2308
2315
  --border-closed-emphasis: var(--border-danger-emphasis);
2309
2316
  --border-closed-muted: var(--border-danger-muted);
2317
+ --border-draft-emphasis: 0.0625rem solid #59636e;
2310
2318
  --border-muted: 0.0625rem solid #d1d9e0b3;
2311
2319
  --border-open-emphasis: var(--border-success-emphasis);
2312
2320
  --border-open-muted: var(--border-success-muted);
2321
+ --border-translucent: 0.0625rem solid #1f232826; /** Semi-transparent border shorthand for overlays and layered elements. Border-specific token — no bgColor-translucent counterpart exists by design. */
2313
2322
  --border-upsell-emphasis: 0.0625rem solid #8250df;
2314
2323
  --border-upsell-muted: 0.0625rem solid #c297ff66;
2315
2324
  --borderColor-neutral-muted: var(--borderColor-muted); /** Subtle neutral semantic border */
@@ -2319,11 +2328,13 @@
2319
2328
  --button-default-borderColor-active: var(--control-borderColor-rest);
2320
2329
  --button-default-borderColor-disabled: var(--control-borderColor-disabled);
2321
2330
  --button-default-borderColor-rest: var(--control-borderColor-rest);
2331
+ --button-default-fgColor-disabled: var(--control-fgColor-disabled);
2322
2332
  --button-invisible-fgColor-disabled: var(--control-fgColor-disabled);
2323
2333
  --button-invisible-iconColor-disabled: var(--control-fgColor-disabled);
2324
2334
  --button-outline-bgColor-disabled: var(--control-bgColor-disabled);
2325
2335
  --button-primary-borderColor-rest: var(--borderColor-translucent);
2326
2336
  --button-primary-fgColor-rest: var(--fgColor-white);
2337
+ --button-primary-iconColor-disabled: var(--button-primary-fgColor-disabled);
2327
2338
  --button-primary-iconColor-rest: #ffffffcc;
2328
2339
  --buttonKeybindingHint-danger-bgColor-disabled: var(--buttonKeybindingHint-default-bgColor-disabled);
2329
2340
  --buttonKeybindingHint-danger-borderColor-hover: var(--borderColor-translucent);
@@ -2382,10 +2393,11 @@
2382
2393
  --buttonKeybindingHint-danger-borderColor-disabled: var(--buttonKeybindingHint-default-borderColor-disabled);
2383
2394
  --buttonKeybindingHint-danger-borderColor-rest: var(--buttonKeybindingHint-default-borderColor-rest);
2384
2395
  --buttonKeybindingHint-danger-fgColor-disabled: var(--buttonKeybindingHint-default-fgColor-disabled);
2385
- --shadow-floating-large: 0px 0px 0px 1px #d1d9e0, 0px 40px 80px 0px #25292e3d; /** Large floating shadow for modals and dialogs */
2386
- --shadow-floating-medium: 0px 0px 0px 1px #d1d9e0, 0px 8px 16px -4px #25292e14, 0px 4px 32px -4px #25292e14, 0px 24px 48px -12px #25292e14, 0px 48px 96px -24px #25292e14;
2387
- --shadow-floating-small: 0px 0px 0px 1px #d1d9e080, 0px 6px 12px -3px #25292e0a, 0px 6px 18px 0px #25292e1f; /** Small floating shadow for dropdowns, tooltips, and small overlays */
2388
- --shadow-floating-xlarge: 0px 0px 0px 1px #d1d9e0, 0px 56px 112px 0px #25292e52;
2396
+ --shadow-floating-large: 0 0 0 1px #d1d9e000, 0 40px 80px 0 #25292e3d; /** Large floating shadow for modals and dialogs */
2397
+ --shadow-floating-medium: 0 0 0 1px #d1d9e000, 0 8px 16px -4px #25292e14, 0 4px 32px -4px #25292e14, 0 24px 48px -12px #25292e14, 0 48px 96px -24px #25292e14; /** Medium floating shadow for popovers and action menus */
2398
+ --shadow-floating-small: 0 0 0 1px #d1d9e080, 0 6px 12px -3px #25292e0a, 0 6px 18px 0 #25292e1f; /** Small floating shadow for dropdowns, tooltips, and small overlays */
2399
+ --shadow-floating-xlarge: 0 0 0 1px #d1d9e000, 0 56px 112px 0 #25292e52; /** Extra large floating shadow for full-screen overlays and sheets */
2400
+ --border-draft-muted: 0.0625rem solid #d1d9e0b3;
2389
2401
  --button-danger-borderColor-active: var(--button-danger-borderColor-hover);
2390
2402
  --button-outline-borderColor-hover: var(--button-primary-borderColor-hover);
2391
2403
  --button-outline-borderColor-active: var(--button-outline-borderColor-hover);