@primer/primitives 11.4.1-rc.eb8ee149 → 11.4.1-rc.edbe0e39

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 (149) hide show
  1. package/DESIGN_TOKENS_GUIDE.md +185 -0
  2. package/DESIGN_TOKENS_SPEC.md +122 -3
  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 +17 -3
  6. package/dist/build/schemas/colorToken.d.ts +1 -1
  7. package/dist/build/schemas/cubicBezierToken.d.ts +1 -1
  8. package/dist/build/schemas/dimensionToken.d.ts +9 -2
  9. package/dist/build/schemas/dimensionValue.d.ts +12 -1
  10. package/dist/build/schemas/dimensionValue.js +10 -13
  11. package/dist/build/schemas/durationToken.d.ts +8 -2
  12. package/dist/build/schemas/durationValue.d.ts +11 -1
  13. package/dist/build/schemas/durationValue.js +13 -3
  14. package/dist/build/schemas/fontFamilyToken.d.ts +1 -1
  15. package/dist/build/schemas/fontWeightToken.d.ts +1 -1
  16. package/dist/build/schemas/gradientToken.d.ts +1 -1
  17. package/dist/build/schemas/numberToken.d.ts +1 -1
  18. package/dist/build/schemas/shadowToken.d.ts +673 -85
  19. package/dist/build/schemas/stringToken.d.ts +1 -1
  20. package/dist/build/schemas/stringToken.js +1 -1
  21. package/dist/build/schemas/tokenType.d.ts +1 -1
  22. package/dist/build/schemas/transitionToken.d.ts +15 -3
  23. package/dist/build/schemas/typographyToken.d.ts +19 -5
  24. package/dist/build/schemas/typographyToken.js +1 -1
  25. package/dist/build/schemas/validTokenType.d.ts +1 -1
  26. package/dist/build/schemas/validTokenType.js +1 -1
  27. package/dist/build/schemas/viewportRangeToken.d.ts +1 -1
  28. package/dist/build/transformers/borderToCss.js +17 -1
  29. package/dist/build/transformers/dimensionToPixelUnitless.d.ts +3 -2
  30. package/dist/build/transformers/dimensionToPixelUnitless.js +22 -26
  31. package/dist/build/transformers/dimensionToRem.d.ts +2 -1
  32. package/dist/build/transformers/dimensionToRem.js +21 -22
  33. package/dist/build/transformers/dimensionToRemPxArray.d.ts +2 -1
  34. package/dist/build/transformers/dimensionToRemPxArray.js +21 -22
  35. package/dist/build/transformers/durationToCss.d.ts +2 -1
  36. package/dist/build/transformers/durationToCss.js +18 -11
  37. package/dist/build/transformers/shadowToCss.js +12 -1
  38. package/dist/build/transformers/utilities/parseDimension.d.ts +12 -0
  39. package/dist/build/transformers/utilities/parseDimension.js +31 -0
  40. package/dist/build/types/borderTokenValue.d.ts +3 -1
  41. package/dist/build/types/dimensionTokenValue.d.ts +9 -0
  42. package/dist/build/types/shadowTokenValue.d.ts +6 -4
  43. package/dist/css/functional/themes/dark-colorblind-high-contrast.css +28 -28
  44. package/dist/css/functional/themes/dark-colorblind.css +28 -28
  45. package/dist/css/functional/themes/dark-dimmed-high-contrast.css +28 -28
  46. package/dist/css/functional/themes/dark-dimmed.css +28 -28
  47. package/dist/css/functional/themes/dark-high-contrast.css +28 -28
  48. package/dist/css/functional/themes/dark-tritanopia-high-contrast.css +28 -28
  49. package/dist/css/functional/themes/dark-tritanopia.css +28 -28
  50. package/dist/css/functional/themes/dark.css +28 -28
  51. package/dist/css/functional/themes/light-colorblind-high-contrast.css +28 -28
  52. package/dist/css/functional/themes/light-colorblind.css +28 -28
  53. package/dist/css/functional/themes/light-high-contrast.css +28 -28
  54. package/dist/css/functional/themes/light-tritanopia-high-contrast.css +28 -28
  55. package/dist/css/functional/themes/light-tritanopia.css +28 -28
  56. package/dist/css/functional/themes/light.css +28 -28
  57. package/dist/docs/base/motion/motion.json +96 -24
  58. package/dist/docs/base/size/size.json +76 -19
  59. package/dist/docs/base/typography/typography.json +24 -6
  60. package/dist/docs/functional/size/border.json +26 -11
  61. package/dist/docs/functional/size/breakpoints.json +24 -6
  62. package/dist/docs/functional/size/radius.json +16 -4
  63. package/dist/docs/functional/size/size.json +60 -15
  64. package/dist/docs/functional/themes/dark-colorblind-high-contrast.json +1423 -346
  65. package/dist/docs/functional/themes/dark-colorblind.json +1423 -346
  66. package/dist/docs/functional/themes/dark-dimmed-high-contrast.json +1423 -346
  67. package/dist/docs/functional/themes/dark-dimmed.json +1423 -346
  68. package/dist/docs/functional/themes/dark-high-contrast.json +1423 -346
  69. package/dist/docs/functional/themes/dark-tritanopia-high-contrast.json +1423 -346
  70. package/dist/docs/functional/themes/dark-tritanopia.json +1423 -346
  71. package/dist/docs/functional/themes/dark.json +1423 -346
  72. package/dist/docs/functional/themes/light-colorblind-high-contrast.json +1426 -349
  73. package/dist/docs/functional/themes/light-colorblind.json +1426 -349
  74. package/dist/docs/functional/themes/light-high-contrast.json +1426 -349
  75. package/dist/docs/functional/themes/light-tritanopia-high-contrast.json +1426 -349
  76. package/dist/docs/functional/themes/light-tritanopia.json +1426 -349
  77. package/dist/docs/functional/themes/light.json +1426 -349
  78. package/dist/docs/functional/typography/typography.json +8 -2
  79. package/dist/fallbacks/base/motion/motion.json +48 -12
  80. package/dist/figma/themes/light-colorblind.json +4 -4
  81. package/dist/figma/themes/light-high-contrast.json +4 -4
  82. package/dist/figma/themes/light-tritanopia.json +4 -4
  83. package/dist/figma/themes/light.json +4 -4
  84. package/dist/internalCss/dark-colorblind-high-contrast.css +28 -28
  85. package/dist/internalCss/dark-colorblind.css +28 -28
  86. package/dist/internalCss/dark-dimmed-high-contrast.css +28 -28
  87. package/dist/internalCss/dark-dimmed.css +28 -28
  88. package/dist/internalCss/dark-high-contrast.css +28 -28
  89. package/dist/internalCss/dark-tritanopia-high-contrast.css +28 -28
  90. package/dist/internalCss/dark-tritanopia.css +28 -28
  91. package/dist/internalCss/dark.css +28 -28
  92. package/dist/internalCss/light-colorblind-high-contrast.css +28 -28
  93. package/dist/internalCss/light-colorblind.css +28 -28
  94. package/dist/internalCss/light-high-contrast.css +28 -28
  95. package/dist/internalCss/light-tritanopia-high-contrast.css +28 -28
  96. package/dist/internalCss/light-tritanopia.css +28 -28
  97. package/dist/internalCss/light.css +28 -28
  98. package/dist/styleLint/base/motion/motion.json +96 -24
  99. package/dist/styleLint/base/size/size.json +76 -19
  100. package/dist/styleLint/base/typography/typography.json +30 -12
  101. package/dist/styleLint/functional/size/border.json +27 -12
  102. package/dist/styleLint/functional/size/breakpoints.json +24 -6
  103. package/dist/styleLint/functional/size/radius.json +17 -5
  104. package/dist/styleLint/functional/size/size-coarse.json +3 -3
  105. package/dist/styleLint/functional/size/size-fine.json +3 -3
  106. package/dist/styleLint/functional/size/size.json +111 -66
  107. package/dist/styleLint/functional/themes/dark-colorblind-high-contrast.json +1551 -366
  108. package/dist/styleLint/functional/themes/dark-colorblind.json +1551 -366
  109. package/dist/styleLint/functional/themes/dark-dimmed-high-contrast.json +1551 -366
  110. package/dist/styleLint/functional/themes/dark-dimmed.json +1551 -366
  111. package/dist/styleLint/functional/themes/dark-high-contrast.json +1551 -366
  112. package/dist/styleLint/functional/themes/dark-tritanopia-high-contrast.json +1551 -366
  113. package/dist/styleLint/functional/themes/dark-tritanopia.json +1551 -366
  114. package/dist/styleLint/functional/themes/dark.json +1551 -366
  115. package/dist/styleLint/functional/themes/light-colorblind-high-contrast.json +1554 -369
  116. package/dist/styleLint/functional/themes/light-colorblind.json +1554 -369
  117. package/dist/styleLint/functional/themes/light-high-contrast.json +1554 -369
  118. package/dist/styleLint/functional/themes/light-tritanopia-high-contrast.json +1554 -369
  119. package/dist/styleLint/functional/themes/light-tritanopia.json +1554 -369
  120. package/dist/styleLint/functional/themes/light.json +1554 -369
  121. package/dist/styleLint/functional/typography/typography.json +28 -22
  122. package/package.json +2 -2
  123. package/src/tokens/base/motion/timing.json5 +12 -12
  124. package/src/tokens/base/size/size.json5 +19 -19
  125. package/src/tokens/base/typography/typography.json5 +6 -6
  126. package/src/tokens/component/avatar.json5 +72 -44
  127. package/src/tokens/component/button.json5 +1545 -1193
  128. package/src/tokens/functional/border/border.json5 +4 -1
  129. package/src/tokens/functional/color/bgColor.json5 +8 -0
  130. package/src/tokens/functional/color/display.json5 +7 -0
  131. package/src/tokens/functional/color/fgColor.json5 +8 -0
  132. package/src/tokens/functional/color/syntax.json5 +14 -0
  133. package/src/tokens/functional/shadow/shadow.json5 +678 -163
  134. package/src/tokens/functional/size/border.json5 +8 -8
  135. package/src/tokens/functional/size/breakpoints.json5 +6 -6
  136. package/src/tokens/functional/size/radius.json5 +4 -4
  137. package/src/tokens/functional/size/size.json5 +15 -15
  138. package/src/tokens/functional/typography/typography.json5 +8 -4
  139. package/dist/build/parsers/index.d.ts +0 -1
  140. package/dist/build/parsers/index.js +0 -1
  141. package/dist/build/parsers/w3cJsonParser.d.ts +0 -6
  142. package/dist/build/parsers/w3cJsonParser.js +0 -25
  143. package/dist/removed/testing.json5 +0 -4
  144. package/guidelines/color.llm.md +0 -16
  145. package/guidelines/guidelines.llm.md +0 -34
  146. package/guidelines/motion.llm.md +0 -41
  147. package/guidelines/spacing.llm.md +0 -20
  148. package/guidelines/typography.llm.md +0 -14
  149. package/src/tokens/removed/testing.json5 +0 -4
@@ -64,7 +64,7 @@
64
64
  --borderColor-transparent: #ffffff00; /** Fully transparent border */
65
65
  --button-danger-bgColor-active: #702c00;
66
66
  --button-danger-borderColor-hover: #5b2300;
67
- --button-danger-shadow-selected: inset 0px 1px 0px 0px #43001133;
67
+ --button-danger-shadow-selected: inset 0 1px 0 0 #43001133;
68
68
  --button-inactive-bgColor: #e6eaef;
69
69
  --button-inactive-fgColor: #454c54;
70
70
  --button-invisible-bgColor-disabled: #ffffff00;
@@ -72,10 +72,10 @@
72
72
  --button-invisible-fgColor-hover: #393f46;
73
73
  --button-invisible-iconColor-hover: #393f46;
74
74
  --button-outline-borderColor-hover: #022f7a;
75
- --button-outline-shadow-selected: inset 0px 1px 0px 0px #021a4a33;
75
+ --button-outline-shadow-selected: inset 0 1px 0 0 #021a4a33;
76
76
  --button-primary-borderColor-disabled: var(--button-primary-bgColor-disabled);
77
77
  --button-primary-borderColor-rest: #022f7a;
78
- --button-primary-shadow-selected: inset 0px 1px 0px 0px #00230b4d;
78
+ --button-primary-shadow-selected: inset 0 1px 0 0 #00230b4d;
79
79
  --button-star-iconColor: #d5a824;
80
80
  --buttonCounter-default-bgColor-rest: #c8d1da;
81
81
  --buttonCounter-outline-fgColor-rest: #023b95;
@@ -624,13 +624,13 @@
624
624
  --reactionButton-selected-fgColor-hover: #023b95;
625
625
  --selectMenu-bgColor-active: #9cd7ff;
626
626
  --selectMenu-borderColor: #ffffff00;
627
- --shadow-floating-legacy: 0px 6px 12px -3px #25292e0a, 0px 6px 18px 0px #25292e1f;
628
- --shadow-resting-medium: 0px 1px 1px 0px #25292e1a, 0px 3px 6px 0px #25292e1f;
627
+ --shadow-floating-legacy: 0 6px 12px -3px #25292e0a, 0 6px 18px 0 #25292e1f; /** Legacy floating shadow for backward compatibility */
628
+ --shadow-resting-medium: 0 1px 1px 0 #25292e1a, 0 3px 6px 0 #25292e1f; /** Medium resting shadow for cards and elevated surfaces */
629
629
  --skeletonLoader-bgColor: #dae0e7;
630
630
  --treeViewItem-leadingVisual-iconColor-rest: #368cf9;
631
631
  --underlineNav-borderColor-active: #cd3425;
632
632
  --avatar-bgColor: #ffffff;
633
- --avatar-shadow: 0px 0px 0px 2px #ffffffcc;
633
+ --avatar-shadow: 0 0 0 2px #ffffffcc;
634
634
  --bgColor-black: #010409; /** Pure black background */
635
635
  --bgColor-closed-emphasis: var(--bgColor-neutral-emphasis); /** Strong background for closed state badges and labels */
636
636
  --bgColor-closed-muted: var(--bgColor-neutral-muted); /** Subtle background for closed state indicators (issues, PRs) */
@@ -678,7 +678,7 @@
678
678
  --button-default-bgColor-rest: var(--control-bgColor-rest);
679
679
  --button-default-bgColor-selected: var(--control-bgColor-active);
680
680
  --button-default-fgColor-rest: var(--control-fgColor-rest);
681
- --button-default-shadow-resting: 0px 1px 0px 0px #0104090a;
681
+ --button-default-shadow-resting: 0 1px 0 0 #0104090a;
682
682
  --button-invisible-bgColor-active: var(--control-transparent-bgColor-active);
683
683
  --button-invisible-bgColor-hover: var(--control-transparent-bgColor-hover);
684
684
  --button-invisible-bgColor-rest: var(--control-transparent-bgColor-rest);
@@ -807,9 +807,9 @@
807
807
  --progressBar-bgColor-sponsors: var(--bgColor-sponsors-emphasis);
808
808
  --progressBar-bgColor-success: var(--bgColor-success-emphasis);
809
809
  --selection-bgColor: #0349b433; /** Background color for text selection highlights */
810
- --shadow-inset: inset 0px 1px 0px 0px #0104090a;
811
- --shadow-resting-small: 0px 1px 1px 0px #0104090f, 0px 1px 3px 0px #0104090f;
812
- --shadow-resting-xsmall: 0px 1px 1px 0px #0104090f;
810
+ --shadow-inset: inset 0 1px 0 0 #0104090a; /** Inset shadow for recessed elements */
811
+ --shadow-resting-small: 0 1px 1px 0 #0104090a, 0 1px 2px 0 #01040908; /** Small resting shadow for buttons and interactive elements */
812
+ --shadow-resting-xsmall: 0 1px 1px 0 #0104090d; /** Extra small resting shadow for minimal elevation */
813
813
  --sideNav-bgColor-selected: #ffffff;
814
814
  --timelineBadge-bgColor: var(--bgColor-muted);
815
815
  --tooltip-bgColor: var(--bgColor-emphasis);
@@ -886,10 +886,10 @@
886
886
  --focus-outline: 2px solid #0349b4; /** Focus ring outline for keyboard navigation and accessibility. */
887
887
  --progressBar-track-bgColor: var(--bgColor-default);
888
888
  --reactionButton-selected-fgColor-rest: var(--fgColor-link);
889
- --shadow-floating-large: 0px 0px 0px 1px #454c54, 0px 40px 80px 0px #25292e3d; /** Large floating shadow for modals and dialogs */
890
- --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;
891
- --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 */
892
- --shadow-floating-xlarge: 0px 0px 0px 1px #454c54, 0px 56px 112px 0px #25292e52;
889
+ --shadow-floating-large: 0 0 0 1px #454c54, 0 40px 80px 0 #25292e3d; /** Large floating shadow for modals and dialogs */
890
+ --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 */
891
+ --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 */
892
+ --shadow-floating-xlarge: 0 0 0 1px #454c54, 0 56px 112px 0 #25292e52; /** Extra large floating shadow for full-screen overlays and sheets */
893
893
  --tooltip-fgColor: var(--fgColor-onEmphasis);
894
894
  --underlineNav-borderColor-hover: var(--borderColor-muted);
895
895
  --border-neutral-muted: 0.0625rem solid #454c54;
@@ -961,7 +961,7 @@
961
961
  --borderColor-transparent: #ffffff00; /** Fully transparent border */
962
962
  --button-danger-bgColor-active: #702c00;
963
963
  --button-danger-borderColor-hover: #5b2300;
964
- --button-danger-shadow-selected: inset 0px 1px 0px 0px #43001133;
964
+ --button-danger-shadow-selected: inset 0 1px 0 0 #43001133;
965
965
  --button-inactive-bgColor: #e6eaef;
966
966
  --button-inactive-fgColor: #454c54;
967
967
  --button-invisible-bgColor-disabled: #ffffff00;
@@ -969,10 +969,10 @@
969
969
  --button-invisible-fgColor-hover: #393f46;
970
970
  --button-invisible-iconColor-hover: #393f46;
971
971
  --button-outline-borderColor-hover: #022f7a;
972
- --button-outline-shadow-selected: inset 0px 1px 0px 0px #021a4a33;
972
+ --button-outline-shadow-selected: inset 0 1px 0 0 #021a4a33;
973
973
  --button-primary-borderColor-disabled: var(--button-primary-bgColor-disabled);
974
974
  --button-primary-borderColor-rest: #022f7a;
975
- --button-primary-shadow-selected: inset 0px 1px 0px 0px #00230b4d;
975
+ --button-primary-shadow-selected: inset 0 1px 0 0 #00230b4d;
976
976
  --button-star-iconColor: #d5a824;
977
977
  --buttonCounter-default-bgColor-rest: #c8d1da;
978
978
  --buttonCounter-outline-fgColor-rest: #023b95;
@@ -1521,13 +1521,13 @@
1521
1521
  --reactionButton-selected-fgColor-hover: #023b95;
1522
1522
  --selectMenu-bgColor-active: #9cd7ff;
1523
1523
  --selectMenu-borderColor: #ffffff00;
1524
- --shadow-floating-legacy: 0px 6px 12px -3px #25292e0a, 0px 6px 18px 0px #25292e1f;
1525
- --shadow-resting-medium: 0px 1px 1px 0px #25292e1a, 0px 3px 6px 0px #25292e1f;
1524
+ --shadow-floating-legacy: 0 6px 12px -3px #25292e0a, 0 6px 18px 0 #25292e1f; /** Legacy floating shadow for backward compatibility */
1525
+ --shadow-resting-medium: 0 1px 1px 0 #25292e1a, 0 3px 6px 0 #25292e1f; /** Medium resting shadow for cards and elevated surfaces */
1526
1526
  --skeletonLoader-bgColor: #dae0e7;
1527
1527
  --treeViewItem-leadingVisual-iconColor-rest: #368cf9;
1528
1528
  --underlineNav-borderColor-active: #cd3425;
1529
1529
  --avatar-bgColor: #ffffff;
1530
- --avatar-shadow: 0px 0px 0px 2px #ffffffcc;
1530
+ --avatar-shadow: 0 0 0 2px #ffffffcc;
1531
1531
  --bgColor-black: #010409; /** Pure black background */
1532
1532
  --bgColor-closed-emphasis: var(--bgColor-neutral-emphasis); /** Strong background for closed state badges and labels */
1533
1533
  --bgColor-closed-muted: var(--bgColor-neutral-muted); /** Subtle background for closed state indicators (issues, PRs) */
@@ -1575,7 +1575,7 @@
1575
1575
  --button-default-bgColor-rest: var(--control-bgColor-rest);
1576
1576
  --button-default-bgColor-selected: var(--control-bgColor-active);
1577
1577
  --button-default-fgColor-rest: var(--control-fgColor-rest);
1578
- --button-default-shadow-resting: 0px 1px 0px 0px #0104090a;
1578
+ --button-default-shadow-resting: 0 1px 0 0 #0104090a;
1579
1579
  --button-invisible-bgColor-active: var(--control-transparent-bgColor-active);
1580
1580
  --button-invisible-bgColor-hover: var(--control-transparent-bgColor-hover);
1581
1581
  --button-invisible-bgColor-rest: var(--control-transparent-bgColor-rest);
@@ -1704,9 +1704,9 @@
1704
1704
  --progressBar-bgColor-sponsors: var(--bgColor-sponsors-emphasis);
1705
1705
  --progressBar-bgColor-success: var(--bgColor-success-emphasis);
1706
1706
  --selection-bgColor: #0349b433; /** Background color for text selection highlights */
1707
- --shadow-inset: inset 0px 1px 0px 0px #0104090a;
1708
- --shadow-resting-small: 0px 1px 1px 0px #0104090f, 0px 1px 3px 0px #0104090f;
1709
- --shadow-resting-xsmall: 0px 1px 1px 0px #0104090f;
1707
+ --shadow-inset: inset 0 1px 0 0 #0104090a; /** Inset shadow for recessed elements */
1708
+ --shadow-resting-small: 0 1px 1px 0 #0104090a, 0 1px 2px 0 #01040908; /** Small resting shadow for buttons and interactive elements */
1709
+ --shadow-resting-xsmall: 0 1px 1px 0 #0104090d; /** Extra small resting shadow for minimal elevation */
1710
1710
  --sideNav-bgColor-selected: #ffffff;
1711
1711
  --timelineBadge-bgColor: var(--bgColor-muted);
1712
1712
  --tooltip-bgColor: var(--bgColor-emphasis);
@@ -1783,10 +1783,10 @@
1783
1783
  --focus-outline: 2px solid #0349b4; /** Focus ring outline for keyboard navigation and accessibility. */
1784
1784
  --progressBar-track-bgColor: var(--bgColor-default);
1785
1785
  --reactionButton-selected-fgColor-rest: var(--fgColor-link);
1786
- --shadow-floating-large: 0px 0px 0px 1px #454c54, 0px 40px 80px 0px #25292e3d; /** Large floating shadow for modals and dialogs */
1787
- --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;
1788
- --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 */
1789
- --shadow-floating-xlarge: 0px 0px 0px 1px #454c54, 0px 56px 112px 0px #25292e52;
1786
+ --shadow-floating-large: 0 0 0 1px #454c54, 0 40px 80px 0 #25292e3d; /** Large floating shadow for modals and dialogs */
1787
+ --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 */
1788
+ --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 */
1789
+ --shadow-floating-xlarge: 0 0 0 1px #454c54, 0 56px 112px 0 #25292e52; /** Extra large floating shadow for full-screen overlays and sheets */
1790
1790
  --tooltip-fgColor: var(--fgColor-onEmphasis);
1791
1791
  --underlineNav-borderColor-hover: var(--borderColor-muted);
1792
1792
  --border-neutral-muted: 0.0625rem solid #454c54;
@@ -60,14 +60,14 @@
60
60
  --borderColor-success-muted: #ddf4ff; /** Subtle success border for positive feedback elements */
61
61
  --borderColor-transparent: #ffffff00; /** Fully transparent border */
62
62
  --button-danger-bgColor-active: #953800;
63
- --button-danger-shadow-selected: inset 0px 1px 0px 0px #47170033;
63
+ --button-danger-shadow-selected: inset 0 1px 0 0 #47170033;
64
64
  --button-inactive-bgColor: #e6eaef;
65
65
  --button-inactive-fgColor: #59636e;
66
66
  --button-invisible-bgColor-disabled: #ffffff00;
67
67
  --button-invisible-borderColor-disabled: #ffffff00;
68
- --button-outline-shadow-selected: inset 0px 1px 0px 0px #00215533;
68
+ --button-outline-shadow-selected: inset 0 1px 0 0 #00215533;
69
69
  --button-primary-borderColor-disabled: var(--button-primary-bgColor-disabled);
70
- --button-primary-shadow-selected: inset 0px 1px 0px 0px #0021554d;
70
+ --button-primary-shadow-selected: inset 0 1px 0 0 #0021554d;
71
71
  --button-star-iconColor: #eac54f;
72
72
  --buttonCounter-danger-fgColor-rest: #953800;
73
73
  --buttonCounter-outline-fgColor-rest: #0550ae;
@@ -637,14 +637,14 @@
637
637
  --reactionButton-selected-fgColor-hover: #0550ae;
638
638
  --selectMenu-bgColor-active: #b6e3ff;
639
639
  --selectMenu-borderColor: #ffffff00;
640
- --shadow-floating-legacy: 0px 6px 12px -3px #25292e0a, 0px 6px 18px 0px #25292e1f;
641
- --shadow-resting-medium: 0px 1px 1px 0px #25292e1a, 0px 3px 6px 0px #25292e1f;
640
+ --shadow-floating-legacy: 0 6px 12px -3px #25292e0a, 0 6px 18px 0 #25292e1f; /** Legacy floating shadow for backward compatibility */
641
+ --shadow-resting-medium: 0 1px 1px 0 #25292e1a, 0 3px 6px 0 #25292e1f; /** Medium resting shadow for cards and elevated surfaces */
642
642
  --skeletonLoader-bgColor: #818b981a;
643
643
  --topicTag-borderColor: #ffffff00;
644
644
  --treeViewItem-leadingVisual-iconColor-rest: #54aeff;
645
645
  --underlineNav-borderColor-active: #fd8c73;
646
646
  --avatar-bgColor: #ffffff;
647
- --avatar-shadow: 0px 0px 0px 2px #ffffffcc;
647
+ --avatar-shadow: 0 0 0 2px #ffffffcc;
648
648
  --bgColor-black: #1f2328; /** Pure black background */
649
649
  --bgColor-closed-emphasis: var(--bgColor-neutral-emphasis); /** Strong background for closed state badges and labels */
650
650
  --bgColor-closed-muted: var(--bgColor-neutral-muted); /** Subtle background for closed state indicators (issues, PRs) */
@@ -694,7 +694,7 @@
694
694
  --button-default-bgColor-rest: var(--control-bgColor-rest);
695
695
  --button-default-bgColor-selected: var(--control-bgColor-active);
696
696
  --button-default-fgColor-rest: var(--control-fgColor-rest);
697
- --button-default-shadow-resting: 0px 1px 0px 0px #1f23280a;
697
+ --button-default-shadow-resting: 0 1px 0 0 #1f23280a;
698
698
  --button-invisible-bgColor-active: var(--control-transparent-bgColor-active);
699
699
  --button-invisible-bgColor-hover: var(--control-transparent-bgColor-hover);
700
700
  --button-invisible-bgColor-rest: var(--control-transparent-bgColor-rest);
@@ -806,9 +806,9 @@
806
806
  --progressBar-bgColor-success: var(--bgColor-success-emphasis);
807
807
  --progressBar-track-bgColor: var(--borderColor-default);
808
808
  --selection-bgColor: #0969da33; /** Background color for text selection highlights */
809
- --shadow-inset: inset 0px 1px 0px 0px #1f23280a;
810
- --shadow-resting-small: 0px 1px 1px 0px #1f23280f, 0px 1px 3px 0px #1f23280f;
811
- --shadow-resting-xsmall: 0px 1px 1px 0px #1f23280f;
809
+ --shadow-inset: inset 0 1px 0 0 #1f23280a; /** Inset shadow for recessed elements */
810
+ --shadow-resting-small: 0 1px 1px 0 #1f23280a, 0 1px 2px 0 #1f232808; /** Small resting shadow for buttons and interactive elements */
811
+ --shadow-resting-xsmall: 0 1px 1px 0 #1f23280d; /** Extra small resting shadow for minimal elevation */
812
812
  --sideNav-bgColor-selected: #ffffff;
813
813
  --timelineBadge-bgColor: var(--bgColor-muted);
814
814
  --tooltip-bgColor: var(--bgColor-emphasis);
@@ -891,10 +891,10 @@
891
891
  --buttonKeybindingHint-danger-borderColor-disabled: var(--buttonKeybindingHint-default-borderColor-disabled);
892
892
  --buttonKeybindingHint-danger-borderColor-rest: var(--buttonKeybindingHint-default-borderColor-rest);
893
893
  --buttonKeybindingHint-danger-fgColor-disabled: var(--buttonKeybindingHint-default-fgColor-disabled);
894
- --shadow-floating-large: 0px 0px 0px 1px #d1d9e0, 0px 40px 80px 0px #25292e3d; /** Large floating shadow for modals and dialogs */
895
- --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;
896
- --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 */
897
- --shadow-floating-xlarge: 0px 0px 0px 1px #d1d9e0, 0px 56px 112px 0px #25292e52;
894
+ --shadow-floating-large: 0 0 0 1px #d1d9e0, 0 40px 80px 0 #25292e3d; /** Large floating shadow for modals and dialogs */
895
+ --shadow-floating-medium: 0 0 0 1px #d1d9e0, 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 */
896
+ --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 */
897
+ --shadow-floating-xlarge: 0 0 0 1px #d1d9e0, 0 56px 112px 0 #25292e52; /** Extra large floating shadow for full-screen overlays and sheets */
898
898
  --button-danger-borderColor-active: var(--button-danger-borderColor-hover);
899
899
  --button-outline-borderColor-hover: var(--button-primary-borderColor-hover);
900
900
  --button-outline-borderColor-active: var(--button-outline-borderColor-hover);
@@ -957,14 +957,14 @@
957
957
  --borderColor-success-muted: #ddf4ff; /** Subtle success border for positive feedback elements */
958
958
  --borderColor-transparent: #ffffff00; /** Fully transparent border */
959
959
  --button-danger-bgColor-active: #953800;
960
- --button-danger-shadow-selected: inset 0px 1px 0px 0px #47170033;
960
+ --button-danger-shadow-selected: inset 0 1px 0 0 #47170033;
961
961
  --button-inactive-bgColor: #e6eaef;
962
962
  --button-inactive-fgColor: #59636e;
963
963
  --button-invisible-bgColor-disabled: #ffffff00;
964
964
  --button-invisible-borderColor-disabled: #ffffff00;
965
- --button-outline-shadow-selected: inset 0px 1px 0px 0px #00215533;
965
+ --button-outline-shadow-selected: inset 0 1px 0 0 #00215533;
966
966
  --button-primary-borderColor-disabled: var(--button-primary-bgColor-disabled);
967
- --button-primary-shadow-selected: inset 0px 1px 0px 0px #0021554d;
967
+ --button-primary-shadow-selected: inset 0 1px 0 0 #0021554d;
968
968
  --button-star-iconColor: #eac54f;
969
969
  --buttonCounter-danger-fgColor-rest: #953800;
970
970
  --buttonCounter-outline-fgColor-rest: #0550ae;
@@ -1534,14 +1534,14 @@
1534
1534
  --reactionButton-selected-fgColor-hover: #0550ae;
1535
1535
  --selectMenu-bgColor-active: #b6e3ff;
1536
1536
  --selectMenu-borderColor: #ffffff00;
1537
- --shadow-floating-legacy: 0px 6px 12px -3px #25292e0a, 0px 6px 18px 0px #25292e1f;
1538
- --shadow-resting-medium: 0px 1px 1px 0px #25292e1a, 0px 3px 6px 0px #25292e1f;
1537
+ --shadow-floating-legacy: 0 6px 12px -3px #25292e0a, 0 6px 18px 0 #25292e1f; /** Legacy floating shadow for backward compatibility */
1538
+ --shadow-resting-medium: 0 1px 1px 0 #25292e1a, 0 3px 6px 0 #25292e1f; /** Medium resting shadow for cards and elevated surfaces */
1539
1539
  --skeletonLoader-bgColor: #818b981a;
1540
1540
  --topicTag-borderColor: #ffffff00;
1541
1541
  --treeViewItem-leadingVisual-iconColor-rest: #54aeff;
1542
1542
  --underlineNav-borderColor-active: #fd8c73;
1543
1543
  --avatar-bgColor: #ffffff;
1544
- --avatar-shadow: 0px 0px 0px 2px #ffffffcc;
1544
+ --avatar-shadow: 0 0 0 2px #ffffffcc;
1545
1545
  --bgColor-black: #1f2328; /** Pure black background */
1546
1546
  --bgColor-closed-emphasis: var(--bgColor-neutral-emphasis); /** Strong background for closed state badges and labels */
1547
1547
  --bgColor-closed-muted: var(--bgColor-neutral-muted); /** Subtle background for closed state indicators (issues, PRs) */
@@ -1591,7 +1591,7 @@
1591
1591
  --button-default-bgColor-rest: var(--control-bgColor-rest);
1592
1592
  --button-default-bgColor-selected: var(--control-bgColor-active);
1593
1593
  --button-default-fgColor-rest: var(--control-fgColor-rest);
1594
- --button-default-shadow-resting: 0px 1px 0px 0px #1f23280a;
1594
+ --button-default-shadow-resting: 0 1px 0 0 #1f23280a;
1595
1595
  --button-invisible-bgColor-active: var(--control-transparent-bgColor-active);
1596
1596
  --button-invisible-bgColor-hover: var(--control-transparent-bgColor-hover);
1597
1597
  --button-invisible-bgColor-rest: var(--control-transparent-bgColor-rest);
@@ -1703,9 +1703,9 @@
1703
1703
  --progressBar-bgColor-success: var(--bgColor-success-emphasis);
1704
1704
  --progressBar-track-bgColor: var(--borderColor-default);
1705
1705
  --selection-bgColor: #0969da33; /** Background color for text selection highlights */
1706
- --shadow-inset: inset 0px 1px 0px 0px #1f23280a;
1707
- --shadow-resting-small: 0px 1px 1px 0px #1f23280f, 0px 1px 3px 0px #1f23280f;
1708
- --shadow-resting-xsmall: 0px 1px 1px 0px #1f23280f;
1706
+ --shadow-inset: inset 0 1px 0 0 #1f23280a; /** Inset shadow for recessed elements */
1707
+ --shadow-resting-small: 0 1px 1px 0 #1f23280a, 0 1px 2px 0 #1f232808; /** Small resting shadow for buttons and interactive elements */
1708
+ --shadow-resting-xsmall: 0 1px 1px 0 #1f23280d; /** Extra small resting shadow for minimal elevation */
1709
1709
  --sideNav-bgColor-selected: #ffffff;
1710
1710
  --timelineBadge-bgColor: var(--bgColor-muted);
1711
1711
  --tooltip-bgColor: var(--bgColor-emphasis);
@@ -1788,10 +1788,10 @@
1788
1788
  --buttonKeybindingHint-danger-borderColor-disabled: var(--buttonKeybindingHint-default-borderColor-disabled);
1789
1789
  --buttonKeybindingHint-danger-borderColor-rest: var(--buttonKeybindingHint-default-borderColor-rest);
1790
1790
  --buttonKeybindingHint-danger-fgColor-disabled: var(--buttonKeybindingHint-default-fgColor-disabled);
1791
- --shadow-floating-large: 0px 0px 0px 1px #d1d9e0, 0px 40px 80px 0px #25292e3d; /** Large floating shadow for modals and dialogs */
1792
- --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;
1793
- --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 */
1794
- --shadow-floating-xlarge: 0px 0px 0px 1px #d1d9e0, 0px 56px 112px 0px #25292e52;
1791
+ --shadow-floating-large: 0 0 0 1px #d1d9e0, 0 40px 80px 0 #25292e3d; /** Large floating shadow for modals and dialogs */
1792
+ --shadow-floating-medium: 0 0 0 1px #d1d9e0, 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 */
1793
+ --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 */
1794
+ --shadow-floating-xlarge: 0 0 0 1px #d1d9e0, 0 56px 112px 0 #25292e52; /** Extra large floating shadow for full-screen overlays and sheets */
1795
1795
  --button-danger-borderColor-active: var(--button-danger-borderColor-hover);
1796
1796
  --button-outline-borderColor-hover: var(--button-primary-borderColor-hover);
1797
1797
  --button-outline-borderColor-active: var(--button-outline-borderColor-hover);
@@ -62,17 +62,17 @@
62
62
  --borderColor-transparent: #ffffff00; /** Fully transparent border */
63
63
  --button-danger-bgColor-active: #86061d;
64
64
  --button-danger-borderColor-hover: #6e011a;
65
- --button-danger-shadow-selected: inset 0px 1px 0px 0px #43001133;
65
+ --button-danger-shadow-selected: inset 0 1px 0 0 #43001133;
66
66
  --button-inactive-fgColor: #454c54;
67
67
  --button-invisible-bgColor-disabled: #ffffff00;
68
68
  --button-invisible-borderColor-disabled: #ffffff00;
69
69
  --button-invisible-fgColor-hover: #393f46;
70
70
  --button-invisible-iconColor-hover: #393f46;
71
71
  --button-outline-borderColor-hover: #022f7a;
72
- --button-outline-shadow-selected: inset 0px 1px 0px 0px #021a4a33;
72
+ --button-outline-shadow-selected: inset 0 1px 0 0 #021a4a33;
73
73
  --button-primary-bgColor-rest: #055d20;
74
74
  --button-primary-borderColor-rest: #013d14;
75
- --button-primary-shadow-selected: inset 0px 1px 0px 0px #00230b4d;
75
+ --button-primary-shadow-selected: inset 0 1px 0 0 #00230b4d;
76
76
  --button-star-iconColor: #d5a824;
77
77
  --buttonCounter-default-bgColor-rest: #c8d1da;
78
78
  --buttonCounter-outline-fgColor-rest: #023b95;
@@ -617,13 +617,13 @@
617
617
  --reactionButton-selected-fgColor-hover: #023b95;
618
618
  --selectMenu-bgColor-active: #9cd7ff;
619
619
  --selectMenu-borderColor: #ffffff00;
620
- --shadow-floating-legacy: 0px 6px 12px -3px #25292e0a, 0px 6px 18px 0px #25292e1f;
621
- --shadow-resting-medium: 0px 1px 1px 0px #25292e1a, 0px 3px 6px 0px #25292e1f;
620
+ --shadow-floating-legacy: 0 6px 12px -3px #25292e0a, 0 6px 18px 0 #25292e1f; /** Legacy floating shadow for backward compatibility */
621
+ --shadow-resting-medium: 0 1px 1px 0 #25292e1a, 0 3px 6px 0 #25292e1f; /** Medium resting shadow for cards and elevated surfaces */
622
622
  --skeletonLoader-bgColor: #dae0e7;
623
623
  --treeViewItem-leadingVisual-iconColor-rest: #368cf9;
624
624
  --underlineNav-borderColor-active: #cd3425;
625
625
  --avatar-bgColor: #ffffff;
626
- --avatar-shadow: 0px 0px 0px 2px #ffffffcc;
626
+ --avatar-shadow: 0 0 0 2px #ffffffcc;
627
627
  --bgColor-black: #010409; /** Pure black background */
628
628
  --bgColor-closed-emphasis: var(--bgColor-danger-emphasis); /** Strong background for closed state badges and labels */
629
629
  --bgColor-closed-muted: var(--bgColor-danger-muted); /** Subtle background for closed state indicators (issues, PRs) */
@@ -675,7 +675,7 @@
675
675
  --button-default-bgColor-rest: var(--control-bgColor-rest);
676
676
  --button-default-bgColor-selected: var(--control-bgColor-active);
677
677
  --button-default-fgColor-rest: var(--control-fgColor-rest);
678
- --button-default-shadow-resting: 0px 1px 0px 0px #0104090a;
678
+ --button-default-shadow-resting: 0 1px 0 0 #0104090a;
679
679
  --button-inactive-bgColor: var(--control-bgColor-rest);
680
680
  --button-invisible-bgColor-active: var(--control-transparent-bgColor-active);
681
681
  --button-invisible-bgColor-hover: var(--control-transparent-bgColor-hover);
@@ -807,9 +807,9 @@
807
807
  --progressBar-bgColor-sponsors: var(--bgColor-sponsors-emphasis);
808
808
  --progressBar-bgColor-success: var(--bgColor-success-emphasis);
809
809
  --selection-bgColor: #0349b433; /** Background color for text selection highlights */
810
- --shadow-inset: inset 0px 1px 0px 0px #0104090a;
811
- --shadow-resting-small: 0px 1px 1px 0px #0104090f, 0px 1px 3px 0px #0104090f;
812
- --shadow-resting-xsmall: 0px 1px 1px 0px #0104090f;
810
+ --shadow-inset: inset 0 1px 0 0 #0104090a; /** Inset shadow for recessed elements */
811
+ --shadow-resting-small: 0 1px 1px 0 #0104090a, 0 1px 2px 0 #01040908; /** Small resting shadow for buttons and interactive elements */
812
+ --shadow-resting-xsmall: 0 1px 1px 0 #0104090d; /** Extra small resting shadow for minimal elevation */
813
813
  --sideNav-bgColor-selected: #ffffff;
814
814
  --timelineBadge-bgColor: var(--bgColor-muted);
815
815
  --tooltip-bgColor: var(--bgColor-emphasis);
@@ -885,10 +885,10 @@
885
885
  --focus-outline: 2px solid #0349b4; /** Focus ring outline for keyboard navigation and accessibility. */
886
886
  --progressBar-track-bgColor: var(--bgColor-default);
887
887
  --reactionButton-selected-fgColor-rest: var(--fgColor-link);
888
- --shadow-floating-large: 0px 0px 0px 1px #454c54, 0px 40px 80px 0px #25292e3d; /** Large floating shadow for modals and dialogs */
889
- --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;
890
- --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 */
891
- --shadow-floating-xlarge: 0px 0px 0px 1px #454c54, 0px 56px 112px 0px #25292e52;
888
+ --shadow-floating-large: 0 0 0 1px #454c54, 0 40px 80px 0 #25292e3d; /** Large floating shadow for modals and dialogs */
889
+ --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 */
890
+ --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 */
891
+ --shadow-floating-xlarge: 0 0 0 1px #454c54, 0 56px 112px 0 #25292e52; /** Extra large floating shadow for full-screen overlays and sheets */
892
892
  --tooltip-fgColor: var(--fgColor-onEmphasis);
893
893
  --underlineNav-borderColor-hover: var(--borderColor-muted);
894
894
  --border-neutral-muted: 0.0625rem solid #454c54;
@@ -959,17 +959,17 @@
959
959
  --borderColor-transparent: #ffffff00; /** Fully transparent border */
960
960
  --button-danger-bgColor-active: #86061d;
961
961
  --button-danger-borderColor-hover: #6e011a;
962
- --button-danger-shadow-selected: inset 0px 1px 0px 0px #43001133;
962
+ --button-danger-shadow-selected: inset 0 1px 0 0 #43001133;
963
963
  --button-inactive-fgColor: #454c54;
964
964
  --button-invisible-bgColor-disabled: #ffffff00;
965
965
  --button-invisible-borderColor-disabled: #ffffff00;
966
966
  --button-invisible-fgColor-hover: #393f46;
967
967
  --button-invisible-iconColor-hover: #393f46;
968
968
  --button-outline-borderColor-hover: #022f7a;
969
- --button-outline-shadow-selected: inset 0px 1px 0px 0px #021a4a33;
969
+ --button-outline-shadow-selected: inset 0 1px 0 0 #021a4a33;
970
970
  --button-primary-bgColor-rest: #055d20;
971
971
  --button-primary-borderColor-rest: #013d14;
972
- --button-primary-shadow-selected: inset 0px 1px 0px 0px #00230b4d;
972
+ --button-primary-shadow-selected: inset 0 1px 0 0 #00230b4d;
973
973
  --button-star-iconColor: #d5a824;
974
974
  --buttonCounter-default-bgColor-rest: #c8d1da;
975
975
  --buttonCounter-outline-fgColor-rest: #023b95;
@@ -1514,13 +1514,13 @@
1514
1514
  --reactionButton-selected-fgColor-hover: #023b95;
1515
1515
  --selectMenu-bgColor-active: #9cd7ff;
1516
1516
  --selectMenu-borderColor: #ffffff00;
1517
- --shadow-floating-legacy: 0px 6px 12px -3px #25292e0a, 0px 6px 18px 0px #25292e1f;
1518
- --shadow-resting-medium: 0px 1px 1px 0px #25292e1a, 0px 3px 6px 0px #25292e1f;
1517
+ --shadow-floating-legacy: 0 6px 12px -3px #25292e0a, 0 6px 18px 0 #25292e1f; /** Legacy floating shadow for backward compatibility */
1518
+ --shadow-resting-medium: 0 1px 1px 0 #25292e1a, 0 3px 6px 0 #25292e1f; /** Medium resting shadow for cards and elevated surfaces */
1519
1519
  --skeletonLoader-bgColor: #dae0e7;
1520
1520
  --treeViewItem-leadingVisual-iconColor-rest: #368cf9;
1521
1521
  --underlineNav-borderColor-active: #cd3425;
1522
1522
  --avatar-bgColor: #ffffff;
1523
- --avatar-shadow: 0px 0px 0px 2px #ffffffcc;
1523
+ --avatar-shadow: 0 0 0 2px #ffffffcc;
1524
1524
  --bgColor-black: #010409; /** Pure black background */
1525
1525
  --bgColor-closed-emphasis: var(--bgColor-danger-emphasis); /** Strong background for closed state badges and labels */
1526
1526
  --bgColor-closed-muted: var(--bgColor-danger-muted); /** Subtle background for closed state indicators (issues, PRs) */
@@ -1572,7 +1572,7 @@
1572
1572
  --button-default-bgColor-rest: var(--control-bgColor-rest);
1573
1573
  --button-default-bgColor-selected: var(--control-bgColor-active);
1574
1574
  --button-default-fgColor-rest: var(--control-fgColor-rest);
1575
- --button-default-shadow-resting: 0px 1px 0px 0px #0104090a;
1575
+ --button-default-shadow-resting: 0 1px 0 0 #0104090a;
1576
1576
  --button-inactive-bgColor: var(--control-bgColor-rest);
1577
1577
  --button-invisible-bgColor-active: var(--control-transparent-bgColor-active);
1578
1578
  --button-invisible-bgColor-hover: var(--control-transparent-bgColor-hover);
@@ -1704,9 +1704,9 @@
1704
1704
  --progressBar-bgColor-sponsors: var(--bgColor-sponsors-emphasis);
1705
1705
  --progressBar-bgColor-success: var(--bgColor-success-emphasis);
1706
1706
  --selection-bgColor: #0349b433; /** Background color for text selection highlights */
1707
- --shadow-inset: inset 0px 1px 0px 0px #0104090a;
1708
- --shadow-resting-small: 0px 1px 1px 0px #0104090f, 0px 1px 3px 0px #0104090f;
1709
- --shadow-resting-xsmall: 0px 1px 1px 0px #0104090f;
1707
+ --shadow-inset: inset 0 1px 0 0 #0104090a; /** Inset shadow for recessed elements */
1708
+ --shadow-resting-small: 0 1px 1px 0 #0104090a, 0 1px 2px 0 #01040908; /** Small resting shadow for buttons and interactive elements */
1709
+ --shadow-resting-xsmall: 0 1px 1px 0 #0104090d; /** Extra small resting shadow for minimal elevation */
1710
1710
  --sideNav-bgColor-selected: #ffffff;
1711
1711
  --timelineBadge-bgColor: var(--bgColor-muted);
1712
1712
  --tooltip-bgColor: var(--bgColor-emphasis);
@@ -1782,10 +1782,10 @@
1782
1782
  --focus-outline: 2px solid #0349b4; /** Focus ring outline for keyboard navigation and accessibility. */
1783
1783
  --progressBar-track-bgColor: var(--bgColor-default);
1784
1784
  --reactionButton-selected-fgColor-rest: var(--fgColor-link);
1785
- --shadow-floating-large: 0px 0px 0px 1px #454c54, 0px 40px 80px 0px #25292e3d; /** Large floating shadow for modals and dialogs */
1786
- --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;
1787
- --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 */
1788
- --shadow-floating-xlarge: 0px 0px 0px 1px #454c54, 0px 56px 112px 0px #25292e52;
1785
+ --shadow-floating-large: 0 0 0 1px #454c54, 0 40px 80px 0 #25292e3d; /** Large floating shadow for modals and dialogs */
1786
+ --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 */
1787
+ --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 */
1788
+ --shadow-floating-xlarge: 0 0 0 1px #454c54, 0 56px 112px 0 #25292e52; /** Extra large floating shadow for full-screen overlays and sheets */
1789
1789
  --tooltip-fgColor: var(--fgColor-onEmphasis);
1790
1790
  --underlineNav-borderColor-hover: var(--borderColor-muted);
1791
1791
  --border-neutral-muted: 0.0625rem solid #454c54;
@@ -65,7 +65,7 @@
65
65
  --borderColor-transparent: #ffffff00; /** Fully transparent border */
66
66
  --button-danger-bgColor-active: #86061d;
67
67
  --button-danger-borderColor-hover: #6e011a;
68
- --button-danger-shadow-selected: inset 0px 1px 0px 0px #43001133;
68
+ --button-danger-shadow-selected: inset 0 1px 0 0 #43001133;
69
69
  --button-inactive-bgColor: #e6eaef;
70
70
  --button-inactive-fgColor: #454c54;
71
71
  --button-invisible-bgColor-disabled: #ffffff00;
@@ -73,10 +73,10 @@
73
73
  --button-invisible-fgColor-hover: #393f46;
74
74
  --button-invisible-iconColor-hover: #393f46;
75
75
  --button-outline-borderColor-hover: #022f7a;
76
- --button-outline-shadow-selected: inset 0px 1px 0px 0px #021a4a33;
76
+ --button-outline-shadow-selected: inset 0 1px 0 0 #021a4a33;
77
77
  --button-primary-borderColor-disabled: var(--button-primary-bgColor-disabled);
78
78
  --button-primary-borderColor-rest: #022f7a;
79
- --button-primary-shadow-selected: inset 0px 1px 0px 0px #00230b4d;
79
+ --button-primary-shadow-selected: inset 0 1px 0 0 #00230b4d;
80
80
  --button-star-iconColor: #d5a824;
81
81
  --buttonCounter-default-bgColor-rest: #c8d1da;
82
82
  --buttonCounter-outline-fgColor-rest: #023b95;
@@ -624,13 +624,13 @@
624
624
  --reactionButton-selected-fgColor-hover: #023b95;
625
625
  --selectMenu-bgColor-active: #9cd7ff;
626
626
  --selectMenu-borderColor: #ffffff00;
627
- --shadow-floating-legacy: 0px 6px 12px -3px #25292e0a, 0px 6px 18px 0px #25292e1f;
628
- --shadow-resting-medium: 0px 1px 1px 0px #25292e1a, 0px 3px 6px 0px #25292e1f;
627
+ --shadow-floating-legacy: 0 6px 12px -3px #25292e0a, 0 6px 18px 0 #25292e1f; /** Legacy floating shadow for backward compatibility */
628
+ --shadow-resting-medium: 0 1px 1px 0 #25292e1a, 0 3px 6px 0 #25292e1f; /** Medium resting shadow for cards and elevated surfaces */
629
629
  --skeletonLoader-bgColor: #dae0e7;
630
630
  --treeViewItem-leadingVisual-iconColor-rest: #368cf9;
631
631
  --underlineNav-borderColor-active: #cd3425;
632
632
  --avatar-bgColor: #ffffff;
633
- --avatar-shadow: 0px 0px 0px 2px #ffffffcc;
633
+ --avatar-shadow: 0 0 0 2px #ffffffcc;
634
634
  --bgColor-black: #010409; /** Pure black background */
635
635
  --bgColor-closed-emphasis: var(--bgColor-neutral-emphasis); /** Strong background for closed state badges and labels */
636
636
  --bgColor-closed-muted: var(--bgColor-neutral-muted); /** Subtle background for closed state indicators (issues, PRs) */
@@ -678,7 +678,7 @@
678
678
  --button-default-bgColor-rest: var(--control-bgColor-rest);
679
679
  --button-default-bgColor-selected: var(--control-bgColor-active);
680
680
  --button-default-fgColor-rest: var(--control-fgColor-rest);
681
- --button-default-shadow-resting: 0px 1px 0px 0px #0104090a;
681
+ --button-default-shadow-resting: 0 1px 0 0 #0104090a;
682
682
  --button-invisible-bgColor-active: var(--control-transparent-bgColor-active);
683
683
  --button-invisible-bgColor-hover: var(--control-transparent-bgColor-hover);
684
684
  --button-invisible-bgColor-rest: var(--control-transparent-bgColor-rest);
@@ -807,9 +807,9 @@
807
807
  --progressBar-bgColor-sponsors: var(--bgColor-sponsors-emphasis);
808
808
  --progressBar-bgColor-success: var(--bgColor-success-emphasis);
809
809
  --selection-bgColor: #0349b433; /** Background color for text selection highlights */
810
- --shadow-inset: inset 0px 1px 0px 0px #0104090a;
811
- --shadow-resting-small: 0px 1px 1px 0px #0104090f, 0px 1px 3px 0px #0104090f;
812
- --shadow-resting-xsmall: 0px 1px 1px 0px #0104090f;
810
+ --shadow-inset: inset 0 1px 0 0 #0104090a; /** Inset shadow for recessed elements */
811
+ --shadow-resting-small: 0 1px 1px 0 #0104090a, 0 1px 2px 0 #01040908; /** Small resting shadow for buttons and interactive elements */
812
+ --shadow-resting-xsmall: 0 1px 1px 0 #0104090d; /** Extra small resting shadow for minimal elevation */
813
813
  --sideNav-bgColor-selected: #ffffff;
814
814
  --timelineBadge-bgColor: var(--bgColor-muted);
815
815
  --tooltip-bgColor: var(--bgColor-emphasis);
@@ -886,10 +886,10 @@
886
886
  --focus-outline: 2px solid #0349b4; /** Focus ring outline for keyboard navigation and accessibility. */
887
887
  --progressBar-track-bgColor: var(--bgColor-default);
888
888
  --reactionButton-selected-fgColor-rest: var(--fgColor-link);
889
- --shadow-floating-large: 0px 0px 0px 1px #454c54, 0px 40px 80px 0px #25292e3d; /** Large floating shadow for modals and dialogs */
890
- --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;
891
- --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 */
892
- --shadow-floating-xlarge: 0px 0px 0px 1px #454c54, 0px 56px 112px 0px #25292e52;
889
+ --shadow-floating-large: 0 0 0 1px #454c54, 0 40px 80px 0 #25292e3d; /** Large floating shadow for modals and dialogs */
890
+ --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 */
891
+ --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 */
892
+ --shadow-floating-xlarge: 0 0 0 1px #454c54, 0 56px 112px 0 #25292e52; /** Extra large floating shadow for full-screen overlays and sheets */
893
893
  --tooltip-fgColor: var(--fgColor-onEmphasis);
894
894
  --underlineNav-borderColor-hover: var(--borderColor-muted);
895
895
  --border-neutral-muted: 0.0625rem solid #454c54;
@@ -962,7 +962,7 @@
962
962
  --borderColor-transparent: #ffffff00; /** Fully transparent border */
963
963
  --button-danger-bgColor-active: #86061d;
964
964
  --button-danger-borderColor-hover: #6e011a;
965
- --button-danger-shadow-selected: inset 0px 1px 0px 0px #43001133;
965
+ --button-danger-shadow-selected: inset 0 1px 0 0 #43001133;
966
966
  --button-inactive-bgColor: #e6eaef;
967
967
  --button-inactive-fgColor: #454c54;
968
968
  --button-invisible-bgColor-disabled: #ffffff00;
@@ -970,10 +970,10 @@
970
970
  --button-invisible-fgColor-hover: #393f46;
971
971
  --button-invisible-iconColor-hover: #393f46;
972
972
  --button-outline-borderColor-hover: #022f7a;
973
- --button-outline-shadow-selected: inset 0px 1px 0px 0px #021a4a33;
973
+ --button-outline-shadow-selected: inset 0 1px 0 0 #021a4a33;
974
974
  --button-primary-borderColor-disabled: var(--button-primary-bgColor-disabled);
975
975
  --button-primary-borderColor-rest: #022f7a;
976
- --button-primary-shadow-selected: inset 0px 1px 0px 0px #00230b4d;
976
+ --button-primary-shadow-selected: inset 0 1px 0 0 #00230b4d;
977
977
  --button-star-iconColor: #d5a824;
978
978
  --buttonCounter-default-bgColor-rest: #c8d1da;
979
979
  --buttonCounter-outline-fgColor-rest: #023b95;
@@ -1521,13 +1521,13 @@
1521
1521
  --reactionButton-selected-fgColor-hover: #023b95;
1522
1522
  --selectMenu-bgColor-active: #9cd7ff;
1523
1523
  --selectMenu-borderColor: #ffffff00;
1524
- --shadow-floating-legacy: 0px 6px 12px -3px #25292e0a, 0px 6px 18px 0px #25292e1f;
1525
- --shadow-resting-medium: 0px 1px 1px 0px #25292e1a, 0px 3px 6px 0px #25292e1f;
1524
+ --shadow-floating-legacy: 0 6px 12px -3px #25292e0a, 0 6px 18px 0 #25292e1f; /** Legacy floating shadow for backward compatibility */
1525
+ --shadow-resting-medium: 0 1px 1px 0 #25292e1a, 0 3px 6px 0 #25292e1f; /** Medium resting shadow for cards and elevated surfaces */
1526
1526
  --skeletonLoader-bgColor: #dae0e7;
1527
1527
  --treeViewItem-leadingVisual-iconColor-rest: #368cf9;
1528
1528
  --underlineNav-borderColor-active: #cd3425;
1529
1529
  --avatar-bgColor: #ffffff;
1530
- --avatar-shadow: 0px 0px 0px 2px #ffffffcc;
1530
+ --avatar-shadow: 0 0 0 2px #ffffffcc;
1531
1531
  --bgColor-black: #010409; /** Pure black background */
1532
1532
  --bgColor-closed-emphasis: var(--bgColor-neutral-emphasis); /** Strong background for closed state badges and labels */
1533
1533
  --bgColor-closed-muted: var(--bgColor-neutral-muted); /** Subtle background for closed state indicators (issues, PRs) */
@@ -1575,7 +1575,7 @@
1575
1575
  --button-default-bgColor-rest: var(--control-bgColor-rest);
1576
1576
  --button-default-bgColor-selected: var(--control-bgColor-active);
1577
1577
  --button-default-fgColor-rest: var(--control-fgColor-rest);
1578
- --button-default-shadow-resting: 0px 1px 0px 0px #0104090a;
1578
+ --button-default-shadow-resting: 0 1px 0 0 #0104090a;
1579
1579
  --button-invisible-bgColor-active: var(--control-transparent-bgColor-active);
1580
1580
  --button-invisible-bgColor-hover: var(--control-transparent-bgColor-hover);
1581
1581
  --button-invisible-bgColor-rest: var(--control-transparent-bgColor-rest);
@@ -1704,9 +1704,9 @@
1704
1704
  --progressBar-bgColor-sponsors: var(--bgColor-sponsors-emphasis);
1705
1705
  --progressBar-bgColor-success: var(--bgColor-success-emphasis);
1706
1706
  --selection-bgColor: #0349b433; /** Background color for text selection highlights */
1707
- --shadow-inset: inset 0px 1px 0px 0px #0104090a;
1708
- --shadow-resting-small: 0px 1px 1px 0px #0104090f, 0px 1px 3px 0px #0104090f;
1709
- --shadow-resting-xsmall: 0px 1px 1px 0px #0104090f;
1707
+ --shadow-inset: inset 0 1px 0 0 #0104090a; /** Inset shadow for recessed elements */
1708
+ --shadow-resting-small: 0 1px 1px 0 #0104090a, 0 1px 2px 0 #01040908; /** Small resting shadow for buttons and interactive elements */
1709
+ --shadow-resting-xsmall: 0 1px 1px 0 #0104090d; /** Extra small resting shadow for minimal elevation */
1710
1710
  --sideNav-bgColor-selected: #ffffff;
1711
1711
  --timelineBadge-bgColor: var(--bgColor-muted);
1712
1712
  --tooltip-bgColor: var(--bgColor-emphasis);
@@ -1783,10 +1783,10 @@
1783
1783
  --focus-outline: 2px solid #0349b4; /** Focus ring outline for keyboard navigation and accessibility. */
1784
1784
  --progressBar-track-bgColor: var(--bgColor-default);
1785
1785
  --reactionButton-selected-fgColor-rest: var(--fgColor-link);
1786
- --shadow-floating-large: 0px 0px 0px 1px #454c54, 0px 40px 80px 0px #25292e3d; /** Large floating shadow for modals and dialogs */
1787
- --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;
1788
- --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 */
1789
- --shadow-floating-xlarge: 0px 0px 0px 1px #454c54, 0px 56px 112px 0px #25292e52;
1786
+ --shadow-floating-large: 0 0 0 1px #454c54, 0 40px 80px 0 #25292e3d; /** Large floating shadow for modals and dialogs */
1787
+ --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 */
1788
+ --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 */
1789
+ --shadow-floating-xlarge: 0 0 0 1px #454c54, 0 56px 112px 0 #25292e52; /** Extra large floating shadow for full-screen overlays and sheets */
1790
1790
  --tooltip-fgColor: var(--fgColor-onEmphasis);
1791
1791
  --underlineNav-borderColor-hover: var(--borderColor-muted);
1792
1792
  --border-neutral-muted: 0.0625rem solid #454c54;