@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-high-contrast.css CHANGED
@@ -348,7 +348,7 @@
348
348
  --borderColor-sponsors-muted: var(--base-color-pink-3); /** Subtle border for GitHub Sponsors content */
349
349
  --borderColor-success-emphasis: var(--base-color-green-5); /** Strong success border for prominent positive elements */
350
350
  --borderColor-success-muted: var(--base-color-green-3); /** Subtle success border for positive feedback elements */
351
- --borderColor-translucent: var(--base-color-neutral-9); /** Semi-transparent border for overlays and layered elements */
351
+ --borderColor-translucent: var(--base-color-neutral-9); /** Semi-transparent border for overlays and layered elements. Border-specific token — no bgColor-translucent counterpart exists by design. */
352
352
  --borderColor-transparent: var(--base-color-transparent); /** Fully transparent border */
353
353
  --borderWidth-default: var(--borderWidth-thin); /** Default border width for most UI elements. Alias of borderWidth.thin (1px) */
354
354
  --boxShadow-thick: inset 0 0 0 var(--borderWidth-thick); /** Thick shadow (2px) used instead of a border for emphasis without layout shift */
@@ -356,17 +356,17 @@
356
356
  --boxShadow-thin: inset 0 0 0 var(--borderWidth-thin); /** Thin shadow used instead of a border to prevent layout shift */
357
357
  --button-danger-bgColor-active: var(--base-color-red-6);
358
358
  --button-danger-borderColor-hover: var(--base-color-red-7);
359
- --button-danger-shadow-selected: inset 0px 1px 0px 0px #43001133;
359
+ --button-danger-shadow-selected: inset 0 1px 0 0 #43001133;
360
360
  --button-inactive-fgColor: var(--base-color-neutral-10);
361
361
  --button-invisible-bgColor-disabled: var(--base-color-transparent);
362
362
  --button-invisible-borderColor-disabled: var(--base-color-transparent);
363
363
  --button-invisible-fgColor-hover: var(--base-color-neutral-11);
364
364
  --button-invisible-iconColor-hover: var(--base-color-neutral-11);
365
365
  --button-outline-borderColor-hover: var(--base-color-blue-7);
366
- --button-outline-shadow-selected: inset 0px 1px 0px 0px #021a4a33;
366
+ --button-outline-shadow-selected: inset 0 1px 0 0 #021a4a33;
367
367
  --button-primary-bgColor-rest: var(--base-color-green-5);
368
368
  --button-primary-borderColor-rest: var(--base-color-green-7);
369
- --button-primary-shadow-selected: inset 0px 1px 0px 0px #00230b4d;
369
+ --button-primary-shadow-selected: inset 0 1px 0 0 #00230b4d;
370
370
  --button-star-iconColor: var(--base-color-yellow-2);
371
371
  --buttonCounter-default-bgColor-rest: var(--base-color-neutral-7);
372
372
  --buttonCounter-outline-fgColor-rest: var(--base-color-blue-6);
@@ -911,13 +911,13 @@
911
911
  --reactionButton-selected-fgColor-hover: var(--base-color-blue-6);
912
912
  --selectMenu-bgColor-active: var(--base-color-blue-1);
913
913
  --selectMenu-borderColor: var(--base-color-transparent);
914
- --shadow-floating-legacy: 0px 6px 12px -3px #25292e0a, 0px 6px 18px 0px #25292e1f;
915
- --shadow-resting-medium: 0px 1px 1px 0px #25292e1a, 0px 3px 6px 0px #25292e1f;
914
+ --shadow-floating-legacy: 0 6px 12px -3px #25292e0a, 0 6px 18px 0 #25292e1f; /** Legacy floating shadow for backward compatibility */
915
+ --shadow-resting-medium: 0 1px 1px 0 #25292e1a, 0 3px 6px 0 #25292e1f; /** Medium resting shadow for cards and elevated surfaces */
916
916
  --skeletonLoader-bgColor: var(--base-color-neutral-5);
917
917
  --treeViewItem-leadingVisual-iconColor-rest: var(--base-color-blue-3);
918
918
  --underlineNav-borderColor-active: var(--base-color-coral-3);
919
919
  --avatar-bgColor: var(--base-color-neutral-0);
920
- --avatar-shadow: 0px 0px 0px 2px #ffffffcc;
920
+ --avatar-shadow: 0 0 0 2px #ffffffcc;
921
921
  --base-color-inset: var(--base-color-neutral-0);
922
922
  --bgColor-black: var(--base-color-neutral-13); /** Pure black background */
923
923
  --bgColor-closed-emphasis: var(--bgColor-danger-emphasis); /** Strong background for closed state badges and labels */
@@ -947,6 +947,7 @@
947
947
  --border-sponsors-muted: 0.0625rem solid #ed4baf;
948
948
  --border-success-emphasis: 0.0625rem solid #055d20;
949
949
  --border-success-muted: 0.0625rem solid #26a148;
950
+ --border-translucent: 0.0625rem solid #59636e; /** Semi-transparent border shorthand for overlays and layered elements. Border-specific token — no bgColor-translucent counterpart exists by design. */
950
951
  --border-transparent: 0.0625rem solid #ffffff00;
951
952
  --borderColor-closed-emphasis: var(--borderColor-danger-emphasis); /** Strong border for closed state badges */
952
953
  --borderColor-closed-muted: var(--borderColor-danger-muted); /** Subtle border for closed state indicators */
@@ -970,7 +971,7 @@
970
971
  --button-default-bgColor-rest: var(--control-bgColor-rest);
971
972
  --button-default-bgColor-selected: var(--control-bgColor-active);
972
973
  --button-default-fgColor-rest: var(--control-fgColor-rest);
973
- --button-default-shadow-resting: 0px 1px 0px 0px #0104090a;
974
+ --button-default-shadow-resting: 0 1px 0 0 #0104090a;
974
975
  --button-inactive-bgColor: var(--control-bgColor-rest);
975
976
  --button-invisible-bgColor-active: var(--control-transparent-bgColor-active);
976
977
  --button-invisible-bgColor-hover: var(--control-transparent-bgColor-hover);
@@ -1102,9 +1103,9 @@
1102
1103
  --progressBar-bgColor-sponsors: var(--bgColor-sponsors-emphasis);
1103
1104
  --progressBar-bgColor-success: var(--bgColor-success-emphasis);
1104
1105
  --selection-bgColor: #0349b433; /** Background color for text selection highlights */
1105
- --shadow-inset: inset 0px 1px 0px 0px #0104090a;
1106
- --shadow-resting-small: 0px 1px 1px 0px #0104090f, 0px 1px 3px 0px #0104090f;
1107
- --shadow-resting-xsmall: 0px 1px 1px 0px #0104090f;
1106
+ --shadow-inset: inset 0 1px 0 0 #0104090a; /** Inset shadow for recessed elements */
1107
+ --shadow-resting-small: 0 1px 1px 0 #0104090a, 0 1px 2px 0 #01040908; /** Small resting shadow for buttons and interactive elements */
1108
+ --shadow-resting-xsmall: 0 1px 1px 0 #0104090d; /** 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);
@@ -1113,6 +1114,7 @@
1113
1114
  --avatar-borderColor: var(--borderColor-emphasis);
1114
1115
  --border-closed-emphasis: var(--border-danger-emphasis);
1115
1116
  --border-closed-muted: var(--border-danger-muted);
1117
+ --border-draft-emphasis: 0.0625rem solid #59636e;
1116
1118
  --border-emphasis: 0.0625rem solid #454c54;
1117
1119
  --border-muted: 0.0625rem solid #454c54;
1118
1120
  --border-open-emphasis: var(--border-success-emphasis);
@@ -1122,16 +1124,19 @@
1122
1124
  --borderColor-neutral-muted: var(--borderColor-muted); /** Subtle neutral semantic border */
1123
1125
  --button-danger-bgColor-disabled: var(--control-bgColor-disabled);
1124
1126
  --button-danger-borderColor-rest: var(--control-borderColor-rest);
1127
+ --button-danger-iconColor-disabled: var(--button-danger-fgColor-disabled);
1125
1128
  --button-danger-iconColor-rest: var(--button-danger-fgColor-rest);
1126
1129
  --button-default-bgColor-disabled: var(--control-bgColor-disabled);
1127
1130
  --button-default-borderColor-active: var(--control-borderColor-rest);
1128
1131
  --button-default-borderColor-disabled: var(--control-borderColor-disabled);
1129
1132
  --button-default-borderColor-rest: var(--control-borderColor-rest);
1133
+ --button-default-fgColor-disabled: var(--control-fgColor-disabled);
1130
1134
  --button-invisible-borderColor-hover: var(--control-transparent-borderColor-hover);
1131
1135
  --button-invisible-fgColor-disabled: var(--control-fgColor-disabled);
1132
1136
  --button-invisible-iconColor-disabled: var(--control-fgColor-disabled);
1133
1137
  --button-outline-bgColor-disabled: var(--control-bgColor-disabled);
1134
1138
  --button-primary-fgColor-rest: var(--fgColor-white);
1139
+ --button-primary-iconColor-disabled: var(--button-primary-fgColor-disabled);
1135
1140
  --button-primary-iconColor-rest: #ffffffcc;
1136
1141
  --buttonKeybindingHint-danger-bgColor-disabled: var(--buttonKeybindingHint-default-bgColor-disabled);
1137
1142
  --buttonKeybindingHint-danger-fgColor-active: var(--fgColor-onEmphasis);
@@ -1180,10 +1185,10 @@
1180
1185
  --focus-outline: 2px solid #0349b4; /** Focus ring outline for keyboard navigation and accessibility. */
1181
1186
  --progressBar-track-bgColor: var(--bgColor-default);
1182
1187
  --reactionButton-selected-fgColor-rest: var(--fgColor-link);
1183
- --shadow-floating-large: 0px 0px 0px 1px #454c54, 0px 40px 80px 0px #25292e3d; /** Large floating shadow for modals and dialogs */
1184
- --shadow-floating-medium: 0px 0px 0px 1px #454c54, 0px 8px 16px -4px #25292e14, 0px 4px 32px -4px #25292e14, 0px 24px 48px -12px #25292e14, 0px 48px 96px -24px #25292e14;
1185
- --shadow-floating-small: 0px 0px 0px 1px #454c5480, 0px 6px 12px -3px #25292e0a, 0px 6px 18px 0px #25292e1f; /** Small floating shadow for dropdowns, tooltips, and small overlays */
1186
- --shadow-floating-xlarge: 0px 0px 0px 1px #454c54, 0px 56px 112px 0px #25292e52;
1188
+ --shadow-floating-large: 0 0 0 1px #454c54, 0 40px 80px 0 #25292e3d; /** Large floating shadow for modals and dialogs */
1189
+ --shadow-floating-medium: 0 0 0 1px #454c54, 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 */
1190
+ --shadow-floating-small: 0 0 0 1px #454c5480, 0 6px 12px -3px #25292e0a, 0 6px 18px 0 #25292e1f; /** Small floating shadow for dropdowns, tooltips, and small overlays */
1191
+ --shadow-floating-xlarge: 0 0 0 1px #454c54, 0 56px 112px 0 #25292e52; /** Extra large floating shadow for full-screen overlays and sheets */
1187
1192
  --tooltip-fgColor: var(--fgColor-onEmphasis);
1188
1193
  --underlineNav-borderColor-hover: var(--borderColor-muted);
1189
1194
  --border-neutral-muted: 0.0625rem solid #454c54;
@@ -1193,6 +1198,7 @@
1193
1198
  --buttonKeybindingHint-danger-borderColor-rest: var(--buttonKeybindingHint-default-borderColor-rest);
1194
1199
  --buttonKeybindingHint-danger-fgColor-disabled: var(--buttonKeybindingHint-default-fgColor-disabled);
1195
1200
  --controlKnob-borderColor-rest: var(--control-borderColor-emphasis);
1201
+ --border-draft-muted: 0.0625rem solid #454c54;
1196
1202
  }
1197
1203
  @media (prefers-color-scheme: dark) {
1198
1204
  [data-color-mode][data-color-mode="auto"][data-dark-theme="light_high_contrast"] {
@@ -1544,7 +1550,7 @@
1544
1550
  --borderColor-sponsors-muted: var(--base-color-pink-3); /** Subtle border for GitHub Sponsors content */
1545
1551
  --borderColor-success-emphasis: var(--base-color-green-5); /** Strong success border for prominent positive elements */
1546
1552
  --borderColor-success-muted: var(--base-color-green-3); /** Subtle success border for positive feedback elements */
1547
- --borderColor-translucent: var(--base-color-neutral-9); /** Semi-transparent border for overlays and layered elements */
1553
+ --borderColor-translucent: var(--base-color-neutral-9); /** Semi-transparent border for overlays and layered elements. Border-specific token — no bgColor-translucent counterpart exists by design. */
1548
1554
  --borderColor-transparent: var(--base-color-transparent); /** Fully transparent border */
1549
1555
  --borderWidth-default: var(--borderWidth-thin); /** Default border width for most UI elements. Alias of borderWidth.thin (1px) */
1550
1556
  --boxShadow-thick: inset 0 0 0 var(--borderWidth-thick); /** Thick shadow (2px) used instead of a border for emphasis without layout shift */
@@ -1552,17 +1558,17 @@
1552
1558
  --boxShadow-thin: inset 0 0 0 var(--borderWidth-thin); /** Thin shadow used instead of a border to prevent layout shift */
1553
1559
  --button-danger-bgColor-active: var(--base-color-red-6);
1554
1560
  --button-danger-borderColor-hover: var(--base-color-red-7);
1555
- --button-danger-shadow-selected: inset 0px 1px 0px 0px #43001133;
1561
+ --button-danger-shadow-selected: inset 0 1px 0 0 #43001133;
1556
1562
  --button-inactive-fgColor: var(--base-color-neutral-10);
1557
1563
  --button-invisible-bgColor-disabled: var(--base-color-transparent);
1558
1564
  --button-invisible-borderColor-disabled: var(--base-color-transparent);
1559
1565
  --button-invisible-fgColor-hover: var(--base-color-neutral-11);
1560
1566
  --button-invisible-iconColor-hover: var(--base-color-neutral-11);
1561
1567
  --button-outline-borderColor-hover: var(--base-color-blue-7);
1562
- --button-outline-shadow-selected: inset 0px 1px 0px 0px #021a4a33;
1568
+ --button-outline-shadow-selected: inset 0 1px 0 0 #021a4a33;
1563
1569
  --button-primary-bgColor-rest: var(--base-color-green-5);
1564
1570
  --button-primary-borderColor-rest: var(--base-color-green-7);
1565
- --button-primary-shadow-selected: inset 0px 1px 0px 0px #00230b4d;
1571
+ --button-primary-shadow-selected: inset 0 1px 0 0 #00230b4d;
1566
1572
  --button-star-iconColor: var(--base-color-yellow-2);
1567
1573
  --buttonCounter-default-bgColor-rest: var(--base-color-neutral-7);
1568
1574
  --buttonCounter-outline-fgColor-rest: var(--base-color-blue-6);
@@ -2107,13 +2113,13 @@
2107
2113
  --reactionButton-selected-fgColor-hover: var(--base-color-blue-6);
2108
2114
  --selectMenu-bgColor-active: var(--base-color-blue-1);
2109
2115
  --selectMenu-borderColor: var(--base-color-transparent);
2110
- --shadow-floating-legacy: 0px 6px 12px -3px #25292e0a, 0px 6px 18px 0px #25292e1f;
2111
- --shadow-resting-medium: 0px 1px 1px 0px #25292e1a, 0px 3px 6px 0px #25292e1f;
2116
+ --shadow-floating-legacy: 0 6px 12px -3px #25292e0a, 0 6px 18px 0 #25292e1f; /** Legacy floating shadow for backward compatibility */
2117
+ --shadow-resting-medium: 0 1px 1px 0 #25292e1a, 0 3px 6px 0 #25292e1f; /** Medium resting shadow for cards and elevated surfaces */
2112
2118
  --skeletonLoader-bgColor: var(--base-color-neutral-5);
2113
2119
  --treeViewItem-leadingVisual-iconColor-rest: var(--base-color-blue-3);
2114
2120
  --underlineNav-borderColor-active: var(--base-color-coral-3);
2115
2121
  --avatar-bgColor: var(--base-color-neutral-0);
2116
- --avatar-shadow: 0px 0px 0px 2px #ffffffcc;
2122
+ --avatar-shadow: 0 0 0 2px #ffffffcc;
2117
2123
  --base-color-inset: var(--base-color-neutral-0);
2118
2124
  --bgColor-black: var(--base-color-neutral-13); /** Pure black background */
2119
2125
  --bgColor-closed-emphasis: var(--bgColor-danger-emphasis); /** Strong background for closed state badges and labels */
@@ -2143,6 +2149,7 @@
2143
2149
  --border-sponsors-muted: 0.0625rem solid #ed4baf;
2144
2150
  --border-success-emphasis: 0.0625rem solid #055d20;
2145
2151
  --border-success-muted: 0.0625rem solid #26a148;
2152
+ --border-translucent: 0.0625rem solid #59636e; /** Semi-transparent border shorthand for overlays and layered elements. Border-specific token — no bgColor-translucent counterpart exists by design. */
2146
2153
  --border-transparent: 0.0625rem solid #ffffff00;
2147
2154
  --borderColor-closed-emphasis: var(--borderColor-danger-emphasis); /** Strong border for closed state badges */
2148
2155
  --borderColor-closed-muted: var(--borderColor-danger-muted); /** Subtle border for closed state indicators */
@@ -2166,7 +2173,7 @@
2166
2173
  --button-default-bgColor-rest: var(--control-bgColor-rest);
2167
2174
  --button-default-bgColor-selected: var(--control-bgColor-active);
2168
2175
  --button-default-fgColor-rest: var(--control-fgColor-rest);
2169
- --button-default-shadow-resting: 0px 1px 0px 0px #0104090a;
2176
+ --button-default-shadow-resting: 0 1px 0 0 #0104090a;
2170
2177
  --button-inactive-bgColor: var(--control-bgColor-rest);
2171
2178
  --button-invisible-bgColor-active: var(--control-transparent-bgColor-active);
2172
2179
  --button-invisible-bgColor-hover: var(--control-transparent-bgColor-hover);
@@ -2298,9 +2305,9 @@
2298
2305
  --progressBar-bgColor-sponsors: var(--bgColor-sponsors-emphasis);
2299
2306
  --progressBar-bgColor-success: var(--bgColor-success-emphasis);
2300
2307
  --selection-bgColor: #0349b433; /** Background color for text selection highlights */
2301
- --shadow-inset: inset 0px 1px 0px 0px #0104090a;
2302
- --shadow-resting-small: 0px 1px 1px 0px #0104090f, 0px 1px 3px 0px #0104090f;
2303
- --shadow-resting-xsmall: 0px 1px 1px 0px #0104090f;
2308
+ --shadow-inset: inset 0 1px 0 0 #0104090a; /** Inset shadow for recessed elements */
2309
+ --shadow-resting-small: 0 1px 1px 0 #0104090a, 0 1px 2px 0 #01040908; /** Small resting shadow for buttons and interactive elements */
2310
+ --shadow-resting-xsmall: 0 1px 1px 0 #0104090d; /** 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);
@@ -2309,6 +2316,7 @@
2309
2316
  --avatar-borderColor: var(--borderColor-emphasis);
2310
2317
  --border-closed-emphasis: var(--border-danger-emphasis);
2311
2318
  --border-closed-muted: var(--border-danger-muted);
2319
+ --border-draft-emphasis: 0.0625rem solid #59636e;
2312
2320
  --border-emphasis: 0.0625rem solid #454c54;
2313
2321
  --border-muted: 0.0625rem solid #454c54;
2314
2322
  --border-open-emphasis: var(--border-success-emphasis);
@@ -2318,16 +2326,19 @@
2318
2326
  --borderColor-neutral-muted: var(--borderColor-muted); /** Subtle neutral semantic border */
2319
2327
  --button-danger-bgColor-disabled: var(--control-bgColor-disabled);
2320
2328
  --button-danger-borderColor-rest: var(--control-borderColor-rest);
2329
+ --button-danger-iconColor-disabled: var(--button-danger-fgColor-disabled);
2321
2330
  --button-danger-iconColor-rest: var(--button-danger-fgColor-rest);
2322
2331
  --button-default-bgColor-disabled: var(--control-bgColor-disabled);
2323
2332
  --button-default-borderColor-active: var(--control-borderColor-rest);
2324
2333
  --button-default-borderColor-disabled: var(--control-borderColor-disabled);
2325
2334
  --button-default-borderColor-rest: var(--control-borderColor-rest);
2335
+ --button-default-fgColor-disabled: var(--control-fgColor-disabled);
2326
2336
  --button-invisible-borderColor-hover: var(--control-transparent-borderColor-hover);
2327
2337
  --button-invisible-fgColor-disabled: var(--control-fgColor-disabled);
2328
2338
  --button-invisible-iconColor-disabled: var(--control-fgColor-disabled);
2329
2339
  --button-outline-bgColor-disabled: var(--control-bgColor-disabled);
2330
2340
  --button-primary-fgColor-rest: var(--fgColor-white);
2341
+ --button-primary-iconColor-disabled: var(--button-primary-fgColor-disabled);
2331
2342
  --button-primary-iconColor-rest: #ffffffcc;
2332
2343
  --buttonKeybindingHint-danger-bgColor-disabled: var(--buttonKeybindingHint-default-bgColor-disabled);
2333
2344
  --buttonKeybindingHint-danger-fgColor-active: var(--fgColor-onEmphasis);
@@ -2376,10 +2387,10 @@
2376
2387
  --focus-outline: 2px solid #0349b4; /** Focus ring outline for keyboard navigation and accessibility. */
2377
2388
  --progressBar-track-bgColor: var(--bgColor-default);
2378
2389
  --reactionButton-selected-fgColor-rest: var(--fgColor-link);
2379
- --shadow-floating-large: 0px 0px 0px 1px #454c54, 0px 40px 80px 0px #25292e3d; /** Large floating shadow for modals and dialogs */
2380
- --shadow-floating-medium: 0px 0px 0px 1px #454c54, 0px 8px 16px -4px #25292e14, 0px 4px 32px -4px #25292e14, 0px 24px 48px -12px #25292e14, 0px 48px 96px -24px #25292e14;
2381
- --shadow-floating-small: 0px 0px 0px 1px #454c5480, 0px 6px 12px -3px #25292e0a, 0px 6px 18px 0px #25292e1f; /** Small floating shadow for dropdowns, tooltips, and small overlays */
2382
- --shadow-floating-xlarge: 0px 0px 0px 1px #454c54, 0px 56px 112px 0px #25292e52;
2390
+ --shadow-floating-large: 0 0 0 1px #454c54, 0 40px 80px 0 #25292e3d; /** Large floating shadow for modals and dialogs */
2391
+ --shadow-floating-medium: 0 0 0 1px #454c54, 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 */
2392
+ --shadow-floating-small: 0 0 0 1px #454c5480, 0 6px 12px -3px #25292e0a, 0 6px 18px 0 #25292e1f; /** Small floating shadow for dropdowns, tooltips, and small overlays */
2393
+ --shadow-floating-xlarge: 0 0 0 1px #454c54, 0 56px 112px 0 #25292e52; /** Extra large floating shadow for full-screen overlays and sheets */
2383
2394
  --tooltip-fgColor: var(--fgColor-onEmphasis);
2384
2395
  --underlineNav-borderColor-hover: var(--borderColor-muted);
2385
2396
  --border-neutral-muted: 0.0625rem solid #454c54;
@@ -2389,5 +2400,6 @@
2389
2400
  --buttonKeybindingHint-danger-borderColor-rest: var(--buttonKeybindingHint-default-borderColor-rest);
2390
2401
  --buttonKeybindingHint-danger-fgColor-disabled: var(--buttonKeybindingHint-default-fgColor-disabled);
2391
2402
  --controlKnob-borderColor-rest: var(--control-borderColor-emphasis);
2403
+ --border-draft-muted: 0.0625rem solid #454c54;
2392
2404
  }
2393
2405
  }
package/dist/internalCss/light-tritanopia-high-contrast.css CHANGED
@@ -351,7 +351,7 @@
351
351
  --borderColor-sponsors-muted: var(--base-color-pink-3); /** Subtle border for GitHub Sponsors content */
352
352
  --borderColor-success-emphasis: var(--base-color-blue-5); /** Strong success border for prominent positive elements */
353
353
  --borderColor-success-muted: var(--base-color-blue-3); /** Subtle success border for positive feedback elements */
354
- --borderColor-translucent: var(--base-color-neutral-9); /** Semi-transparent border for overlays and layered elements */
354
+ --borderColor-translucent: var(--base-color-neutral-9); /** Semi-transparent border for overlays and layered elements. Border-specific token — no bgColor-translucent counterpart exists by design. */
355
355
  --borderColor-transparent: var(--base-color-transparent); /** Fully transparent border */
356
356
  --borderWidth-default: var(--borderWidth-thin); /** Default border width for most UI elements. Alias of borderWidth.thin (1px) */
357
357
  --boxShadow-thick: inset 0 0 0 var(--borderWidth-thick); /** Thick shadow (2px) used instead of a border for emphasis without layout shift */
@@ -359,7 +359,7 @@
359
359
  --boxShadow-thin: inset 0 0 0 var(--borderWidth-thin); /** Thin shadow used instead of a border to prevent layout shift */
360
360
  --button-danger-bgColor-active: var(--base-color-red-6);
361
361
  --button-danger-borderColor-hover: var(--base-color-red-7);
362
- --button-danger-shadow-selected: inset 0px 1px 0px 0px #43001133;
362
+ --button-danger-shadow-selected: inset 0 1px 0 0 #43001133;
363
363
  --button-inactive-bgColor: var(--base-color-neutral-3);
364
364
  --button-inactive-fgColor: var(--base-color-neutral-10);
365
365
  --button-invisible-bgColor-disabled: var(--base-color-transparent);
@@ -367,10 +367,10 @@
367
367
  --button-invisible-fgColor-hover: var(--base-color-neutral-11);
368
368
  --button-invisible-iconColor-hover: var(--base-color-neutral-11);
369
369
  --button-outline-borderColor-hover: var(--base-color-blue-7);
370
- --button-outline-shadow-selected: inset 0px 1px 0px 0px #021a4a33;
370
+ --button-outline-shadow-selected: inset 0 1px 0 0 #021a4a33;
371
371
  --button-primary-borderColor-disabled: var(--button-primary-bgColor-disabled);
372
372
  --button-primary-borderColor-rest: var(--base-color-blue-7);
373
- --button-primary-shadow-selected: inset 0px 1px 0px 0px #00230b4d;
373
+ --button-primary-shadow-selected: inset 0 1px 0 0 #00230b4d;
374
374
  --button-star-iconColor: var(--base-color-yellow-2);
375
375
  --buttonCounter-default-bgColor-rest: var(--base-color-neutral-7);
376
376
  --buttonCounter-outline-fgColor-rest: var(--base-color-blue-6);
@@ -918,13 +918,13 @@
918
918
  --reactionButton-selected-fgColor-hover: var(--base-color-blue-6);
919
919
  --selectMenu-bgColor-active: var(--base-color-blue-1);
920
920
  --selectMenu-borderColor: var(--base-color-transparent);
921
- --shadow-floating-legacy: 0px 6px 12px -3px #25292e0a, 0px 6px 18px 0px #25292e1f;
922
- --shadow-resting-medium: 0px 1px 1px 0px #25292e1a, 0px 3px 6px 0px #25292e1f;
921
+ --shadow-floating-legacy: 0 6px 12px -3px #25292e0a, 0 6px 18px 0 #25292e1f; /** Legacy floating shadow for backward compatibility */
922
+ --shadow-resting-medium: 0 1px 1px 0 #25292e1a, 0 3px 6px 0 #25292e1f; /** Medium resting shadow for cards and elevated surfaces */
923
923
  --skeletonLoader-bgColor: var(--base-color-neutral-5);
924
924
  --treeViewItem-leadingVisual-iconColor-rest: var(--base-color-blue-3);
925
925
  --underlineNav-borderColor-active: var(--base-color-coral-3);
926
926
  --avatar-bgColor: var(--base-color-neutral-0);
927
- --avatar-shadow: 0px 0px 0px 2px #ffffffcc;
927
+ --avatar-shadow: 0 0 0 2px #ffffffcc;
928
928
  --base-color-inset: var(--base-color-neutral-0);
929
929
  --bgColor-black: var(--base-color-neutral-13); /** Pure black background */
930
930
  --bgColor-closed-emphasis: var(--bgColor-neutral-emphasis); /** Strong background for closed state badges and labels */
@@ -952,6 +952,7 @@
952
952
  --border-sponsors-muted: 0.0625rem solid #ed4baf;
953
953
  --border-success-emphasis: 0.0625rem solid #0349b4;
954
954
  --border-success-muted: 0.0625rem solid #368cf9;
955
+ --border-translucent: 0.0625rem solid #59636e; /** Semi-transparent border shorthand for overlays and layered elements. Border-specific token — no bgColor-translucent counterpart exists by design. */
955
956
  --border-transparent: 0.0625rem solid #ffffff00;
956
957
  --borderColor-closed-muted: var(--borderColor-default); /** Subtle border for closed state indicators */
957
958
  --borderColor-draft-emphasis: var(--borderColor-neutral-emphasis); /** Strong border for draft state badges */
@@ -973,7 +974,7 @@
973
974
  --button-default-bgColor-rest: var(--control-bgColor-rest);
974
975
  --button-default-bgColor-selected: var(--control-bgColor-active);
975
976
  --button-default-fgColor-rest: var(--control-fgColor-rest);
976
- --button-default-shadow-resting: 0px 1px 0px 0px #0104090a;
977
+ --button-default-shadow-resting: 0 1px 0 0 #0104090a;
977
978
  --button-invisible-bgColor-active: var(--control-transparent-bgColor-active);
978
979
  --button-invisible-bgColor-hover: var(--control-transparent-bgColor-hover);
979
980
  --button-invisible-bgColor-rest: var(--control-transparent-bgColor-rest);
@@ -1102,9 +1103,9 @@
1102
1103
  --progressBar-bgColor-sponsors: var(--bgColor-sponsors-emphasis);
1103
1104
  --progressBar-bgColor-success: var(--bgColor-success-emphasis);
1104
1105
  --selection-bgColor: #0349b433; /** Background color for text selection highlights */
1105
- --shadow-inset: inset 0px 1px 0px 0px #0104090a;
1106
- --shadow-resting-small: 0px 1px 1px 0px #0104090f, 0px 1px 3px 0px #0104090f;
1107
- --shadow-resting-xsmall: 0px 1px 1px 0px #0104090f;
1106
+ --shadow-inset: inset 0 1px 0 0 #0104090a; /** Inset shadow for recessed elements */
1107
+ --shadow-resting-small: 0 1px 1px 0 #0104090a, 0 1px 2px 0 #01040908; /** Small resting shadow for buttons and interactive elements */
1108
+ --shadow-resting-xsmall: 0 1px 1px 0 #0104090d; /** 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);
@@ -1113,6 +1114,8 @@
1113
1114
  --avatar-borderColor: var(--borderColor-emphasis);
1114
1115
  --border-closed-emphasis: var(--border-danger-emphasis);
1115
1116
  --border-closed-muted: var(--border-danger-muted);
1117
+ --border-draft-emphasis: 0.0625rem solid #59636e;
1118
+ --border-draft-muted: 0.0625rem solid #454c54;
1116
1119
  --border-emphasis: 0.0625rem solid #454c54;
1117
1120
  --border-muted: 0.0625rem solid #454c54;
1118
1121
  --border-open-emphasis: var(--border-success-emphasis);
@@ -1123,16 +1126,19 @@
1123
1126
  --borderColor-neutral-muted: var(--borderColor-muted); /** Subtle neutral semantic border */
1124
1127
  --button-danger-bgColor-disabled: var(--control-bgColor-disabled);
1125
1128
  --button-danger-borderColor-rest: var(--control-borderColor-rest);
1129
+ --button-danger-iconColor-disabled: var(--button-danger-fgColor-disabled);
1126
1130
  --button-danger-iconColor-rest: var(--button-danger-fgColor-rest);
1127
1131
  --button-default-bgColor-disabled: var(--control-bgColor-disabled);
1128
1132
  --button-default-borderColor-active: var(--control-borderColor-rest);
1129
1133
  --button-default-borderColor-disabled: var(--control-borderColor-disabled);
1130
1134
  --button-default-borderColor-rest: var(--control-borderColor-rest);
1135
+ --button-default-fgColor-disabled: var(--control-fgColor-disabled);
1131
1136
  --button-invisible-borderColor-hover: var(--control-transparent-borderColor-hover);
1132
1137
  --button-invisible-fgColor-disabled: var(--control-fgColor-disabled);
1133
1138
  --button-invisible-iconColor-disabled: var(--control-fgColor-disabled);
1134
1139
  --button-outline-bgColor-disabled: var(--control-bgColor-disabled);
1135
1140
  --button-primary-fgColor-rest: var(--fgColor-white);
1141
+ --button-primary-iconColor-disabled: var(--button-primary-fgColor-disabled);
1136
1142
  --button-primary-iconColor-rest: #ffffffcc;
1137
1143
  --buttonKeybindingHint-danger-bgColor-disabled: var(--buttonKeybindingHint-default-bgColor-disabled);
1138
1144
  --buttonKeybindingHint-danger-fgColor-active: var(--fgColor-onEmphasis);
@@ -1181,10 +1187,10 @@
1181
1187
  --focus-outline: 2px solid #0349b4; /** Focus ring outline for keyboard navigation and accessibility. */
1182
1188
  --progressBar-track-bgColor: var(--bgColor-default);
1183
1189
  --reactionButton-selected-fgColor-rest: var(--fgColor-link);
1184
- --shadow-floating-large: 0px 0px 0px 1px #454c54, 0px 40px 80px 0px #25292e3d; /** Large floating shadow for modals and dialogs */
1185
- --shadow-floating-medium: 0px 0px 0px 1px #454c54, 0px 8px 16px -4px #25292e14, 0px 4px 32px -4px #25292e14, 0px 24px 48px -12px #25292e14, 0px 48px 96px -24px #25292e14;
1186
- --shadow-floating-small: 0px 0px 0px 1px #454c5480, 0px 6px 12px -3px #25292e0a, 0px 6px 18px 0px #25292e1f; /** Small floating shadow for dropdowns, tooltips, and small overlays */
1187
- --shadow-floating-xlarge: 0px 0px 0px 1px #454c54, 0px 56px 112px 0px #25292e52;
1190
+ --shadow-floating-large: 0 0 0 1px #454c54, 0 40px 80px 0 #25292e3d; /** Large floating shadow for modals and dialogs */
1191
+ --shadow-floating-medium: 0 0 0 1px #454c54, 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 */
1192
+ --shadow-floating-small: 0 0 0 1px #454c5480, 0 6px 12px -3px #25292e0a, 0 6px 18px 0 #25292e1f; /** Small floating shadow for dropdowns, tooltips, and small overlays */
1193
+ --shadow-floating-xlarge: 0 0 0 1px #454c54, 0 56px 112px 0 #25292e52; /** Extra large floating shadow for full-screen overlays and sheets */
1188
1194
  --tooltip-fgColor: var(--fgColor-onEmphasis);
1189
1195
  --underlineNav-borderColor-hover: var(--borderColor-muted);
1190
1196
  --border-neutral-muted: 0.0625rem solid #454c54;
@@ -1547,7 +1553,7 @@
1547
1553
  --borderColor-sponsors-muted: var(--base-color-pink-3); /** Subtle border for GitHub Sponsors content */
1548
1554
  --borderColor-success-emphasis: var(--base-color-blue-5); /** Strong success border for prominent positive elements */
1549
1555
  --borderColor-success-muted: var(--base-color-blue-3); /** Subtle success border for positive feedback elements */
1550
- --borderColor-translucent: var(--base-color-neutral-9); /** Semi-transparent border for overlays and layered elements */
1556
+ --borderColor-translucent: var(--base-color-neutral-9); /** Semi-transparent border for overlays and layered elements. Border-specific token — no bgColor-translucent counterpart exists by design. */
1551
1557
  --borderColor-transparent: var(--base-color-transparent); /** Fully transparent border */
1552
1558
  --borderWidth-default: var(--borderWidth-thin); /** Default border width for most UI elements. Alias of borderWidth.thin (1px) */
1553
1559
  --boxShadow-thick: inset 0 0 0 var(--borderWidth-thick); /** Thick shadow (2px) used instead of a border for emphasis without layout shift */
@@ -1555,7 +1561,7 @@
1555
1561
  --boxShadow-thin: inset 0 0 0 var(--borderWidth-thin); /** Thin shadow used instead of a border to prevent layout shift */
1556
1562
  --button-danger-bgColor-active: var(--base-color-red-6);
1557
1563
  --button-danger-borderColor-hover: var(--base-color-red-7);
1558
- --button-danger-shadow-selected: inset 0px 1px 0px 0px #43001133;
1564
+ --button-danger-shadow-selected: inset 0 1px 0 0 #43001133;
1559
1565
  --button-inactive-bgColor: var(--base-color-neutral-3);
1560
1566
  --button-inactive-fgColor: var(--base-color-neutral-10);
1561
1567
  --button-invisible-bgColor-disabled: var(--base-color-transparent);
@@ -1563,10 +1569,10 @@
1563
1569
  --button-invisible-fgColor-hover: var(--base-color-neutral-11);
1564
1570
  --button-invisible-iconColor-hover: var(--base-color-neutral-11);
1565
1571
  --button-outline-borderColor-hover: var(--base-color-blue-7);
1566
- --button-outline-shadow-selected: inset 0px 1px 0px 0px #021a4a33;
1572
+ --button-outline-shadow-selected: inset 0 1px 0 0 #021a4a33;
1567
1573
  --button-primary-borderColor-disabled: var(--button-primary-bgColor-disabled);
1568
1574
  --button-primary-borderColor-rest: var(--base-color-blue-7);
1569
- --button-primary-shadow-selected: inset 0px 1px 0px 0px #00230b4d;
1575
+ --button-primary-shadow-selected: inset 0 1px 0 0 #00230b4d;
1570
1576
  --button-star-iconColor: var(--base-color-yellow-2);
1571
1577
  --buttonCounter-default-bgColor-rest: var(--base-color-neutral-7);
1572
1578
  --buttonCounter-outline-fgColor-rest: var(--base-color-blue-6);
@@ -2114,13 +2120,13 @@
2114
2120
  --reactionButton-selected-fgColor-hover: var(--base-color-blue-6);
2115
2121
  --selectMenu-bgColor-active: var(--base-color-blue-1);
2116
2122
  --selectMenu-borderColor: var(--base-color-transparent);
2117
- --shadow-floating-legacy: 0px 6px 12px -3px #25292e0a, 0px 6px 18px 0px #25292e1f;
2118
- --shadow-resting-medium: 0px 1px 1px 0px #25292e1a, 0px 3px 6px 0px #25292e1f;
2123
+ --shadow-floating-legacy: 0 6px 12px -3px #25292e0a, 0 6px 18px 0 #25292e1f; /** Legacy floating shadow for backward compatibility */
2124
+ --shadow-resting-medium: 0 1px 1px 0 #25292e1a, 0 3px 6px 0 #25292e1f; /** Medium resting shadow for cards and elevated surfaces */
2119
2125
  --skeletonLoader-bgColor: var(--base-color-neutral-5);
2120
2126
  --treeViewItem-leadingVisual-iconColor-rest: var(--base-color-blue-3);
2121
2127
  --underlineNav-borderColor-active: var(--base-color-coral-3);
2122
2128
  --avatar-bgColor: var(--base-color-neutral-0);
2123
- --avatar-shadow: 0px 0px 0px 2px #ffffffcc;
2129
+ --avatar-shadow: 0 0 0 2px #ffffffcc;
2124
2130
  --base-color-inset: var(--base-color-neutral-0);
2125
2131
  --bgColor-black: var(--base-color-neutral-13); /** Pure black background */
2126
2132
  --bgColor-closed-emphasis: var(--bgColor-neutral-emphasis); /** Strong background for closed state badges and labels */
@@ -2148,6 +2154,7 @@
2148
2154
  --border-sponsors-muted: 0.0625rem solid #ed4baf;
2149
2155
  --border-success-emphasis: 0.0625rem solid #0349b4;
2150
2156
  --border-success-muted: 0.0625rem solid #368cf9;
2157
+ --border-translucent: 0.0625rem solid #59636e; /** Semi-transparent border shorthand for overlays and layered elements. Border-specific token — no bgColor-translucent counterpart exists by design. */
2151
2158
  --border-transparent: 0.0625rem solid #ffffff00;
2152
2159
  --borderColor-closed-muted: var(--borderColor-default); /** Subtle border for closed state indicators */
2153
2160
  --borderColor-draft-emphasis: var(--borderColor-neutral-emphasis); /** Strong border for draft state badges */
@@ -2169,7 +2176,7 @@
2169
2176
  --button-default-bgColor-rest: var(--control-bgColor-rest);
2170
2177
  --button-default-bgColor-selected: var(--control-bgColor-active);
2171
2178
  --button-default-fgColor-rest: var(--control-fgColor-rest);
2172
- --button-default-shadow-resting: 0px 1px 0px 0px #0104090a;
2179
+ --button-default-shadow-resting: 0 1px 0 0 #0104090a;
2173
2180
  --button-invisible-bgColor-active: var(--control-transparent-bgColor-active);
2174
2181
  --button-invisible-bgColor-hover: var(--control-transparent-bgColor-hover);
2175
2182
  --button-invisible-bgColor-rest: var(--control-transparent-bgColor-rest);
@@ -2298,9 +2305,9 @@
2298
2305
  --progressBar-bgColor-sponsors: var(--bgColor-sponsors-emphasis);
2299
2306
  --progressBar-bgColor-success: var(--bgColor-success-emphasis);
2300
2307
  --selection-bgColor: #0349b433; /** Background color for text selection highlights */
2301
- --shadow-inset: inset 0px 1px 0px 0px #0104090a;
2302
- --shadow-resting-small: 0px 1px 1px 0px #0104090f, 0px 1px 3px 0px #0104090f;
2303
- --shadow-resting-xsmall: 0px 1px 1px 0px #0104090f;
2308
+ --shadow-inset: inset 0 1px 0 0 #0104090a; /** Inset shadow for recessed elements */
2309
+ --shadow-resting-small: 0 1px 1px 0 #0104090a, 0 1px 2px 0 #01040908; /** Small resting shadow for buttons and interactive elements */
2310
+ --shadow-resting-xsmall: 0 1px 1px 0 #0104090d; /** 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);
@@ -2309,6 +2316,8 @@
2309
2316
  --avatar-borderColor: var(--borderColor-emphasis);
2310
2317
  --border-closed-emphasis: var(--border-danger-emphasis);
2311
2318
  --border-closed-muted: var(--border-danger-muted);
2319
+ --border-draft-emphasis: 0.0625rem solid #59636e;
2320
+ --border-draft-muted: 0.0625rem solid #454c54;
2312
2321
  --border-emphasis: 0.0625rem solid #454c54;
2313
2322
  --border-muted: 0.0625rem solid #454c54;
2314
2323
  --border-open-emphasis: var(--border-success-emphasis);
@@ -2319,16 +2328,19 @@
2319
2328
  --borderColor-neutral-muted: var(--borderColor-muted); /** Subtle neutral semantic border */
2320
2329
  --button-danger-bgColor-disabled: var(--control-bgColor-disabled);
2321
2330
  --button-danger-borderColor-rest: var(--control-borderColor-rest);
2331
+ --button-danger-iconColor-disabled: var(--button-danger-fgColor-disabled);
2322
2332
  --button-danger-iconColor-rest: var(--button-danger-fgColor-rest);
2323
2333
  --button-default-bgColor-disabled: var(--control-bgColor-disabled);
2324
2334
  --button-default-borderColor-active: var(--control-borderColor-rest);
2325
2335
  --button-default-borderColor-disabled: var(--control-borderColor-disabled);
2326
2336
  --button-default-borderColor-rest: var(--control-borderColor-rest);
2337
+ --button-default-fgColor-disabled: var(--control-fgColor-disabled);
2327
2338
  --button-invisible-borderColor-hover: var(--control-transparent-borderColor-hover);
2328
2339
  --button-invisible-fgColor-disabled: var(--control-fgColor-disabled);
2329
2340
  --button-invisible-iconColor-disabled: var(--control-fgColor-disabled);
2330
2341
  --button-outline-bgColor-disabled: var(--control-bgColor-disabled);
2331
2342
  --button-primary-fgColor-rest: var(--fgColor-white);
2343
+ --button-primary-iconColor-disabled: var(--button-primary-fgColor-disabled);
2332
2344
  --button-primary-iconColor-rest: #ffffffcc;
2333
2345
  --buttonKeybindingHint-danger-bgColor-disabled: var(--buttonKeybindingHint-default-bgColor-disabled);
2334
2346
  --buttonKeybindingHint-danger-fgColor-active: var(--fgColor-onEmphasis);
@@ -2377,10 +2389,10 @@
2377
2389
  --focus-outline: 2px solid #0349b4; /** Focus ring outline for keyboard navigation and accessibility. */
2378
2390
  --progressBar-track-bgColor: var(--bgColor-default);
2379
2391
  --reactionButton-selected-fgColor-rest: var(--fgColor-link);
2380
- --shadow-floating-large: 0px 0px 0px 1px #454c54, 0px 40px 80px 0px #25292e3d; /** Large floating shadow for modals and dialogs */
2381
- --shadow-floating-medium: 0px 0px 0px 1px #454c54, 0px 8px 16px -4px #25292e14, 0px 4px 32px -4px #25292e14, 0px 24px 48px -12px #25292e14, 0px 48px 96px -24px #25292e14;
2382
- --shadow-floating-small: 0px 0px 0px 1px #454c5480, 0px 6px 12px -3px #25292e0a, 0px 6px 18px 0px #25292e1f; /** Small floating shadow for dropdowns, tooltips, and small overlays */
2383
- --shadow-floating-xlarge: 0px 0px 0px 1px #454c54, 0px 56px 112px 0px #25292e52;
2392
+ --shadow-floating-large: 0 0 0 1px #454c54, 0 40px 80px 0 #25292e3d; /** Large floating shadow for modals and dialogs */
2393
+ --shadow-floating-medium: 0 0 0 1px #454c54, 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 */
2394
+ --shadow-floating-small: 0 0 0 1px #454c5480, 0 6px 12px -3px #25292e0a, 0 6px 18px 0 #25292e1f; /** Small floating shadow for dropdowns, tooltips, and small overlays */
2395
+ --shadow-floating-xlarge: 0 0 0 1px #454c54, 0 56px 112px 0 #25292e52; /** Extra large floating shadow for full-screen overlays and sheets */
2384
2396
  --tooltip-fgColor: var(--fgColor-onEmphasis);
2385
2397
  --underlineNav-borderColor-hover: var(--borderColor-muted);
2386
2398
  --border-neutral-muted: 0.0625rem solid #454c54;