@primer/primitives 10.1.0-rc.f1589f93 → 10.1.0

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 (119) hide show
  1. package/README.md +0 -21
  2. package/dist/build/filters/index.d.ts +0 -1
  3. package/dist/build/filters/index.js +0 -1
  4. package/dist/build/formats/jsonFigma.js +1 -2
  5. package/dist/build/platforms/css.js +6 -7
  6. package/dist/build/platforms/docJson.js +0 -1
  7. package/dist/build/platforms/fallbacks.js +0 -1
  8. package/dist/build/platforms/javascript.js +0 -1
  9. package/dist/build/platforms/json.js +0 -1
  10. package/dist/build/platforms/styleLint.js +0 -1
  11. package/dist/build/platforms/typescript.js +0 -1
  12. package/dist/build/primerStyleDictionary.js +7 -3
  13. package/dist/build/schemas/colorToken.d.ts +0 -18
  14. package/dist/build/schemas/colorToken.js +0 -7
  15. package/dist/build/transformers/borderToCss.js +2 -2
  16. package/dist/build/transformers/colorToRgbaFloat.js +2 -12
  17. package/dist/build/transformers/index.d.ts +0 -1
  18. package/dist/build/transformers/index.js +0 -1
  19. package/dist/css/functional/size/border.css +7 -6
  20. package/dist/css/functional/themes/dark-colorblind.css +60 -6
  21. package/dist/css/functional/themes/dark-dimmed.css +60 -6
  22. package/dist/css/functional/themes/dark-high-contrast.css +60 -6
  23. package/dist/css/functional/themes/dark-tritanopia.css +60 -6
  24. package/dist/css/functional/themes/dark.css +60 -6
  25. package/dist/css/functional/themes/light-colorblind.css +60 -6
  26. package/dist/css/functional/themes/light-high-contrast.css +60 -6
  27. package/dist/css/functional/themes/light-tritanopia.css +60 -6
  28. package/dist/css/functional/themes/light.css +60 -6
  29. package/dist/css/primitives.css +7 -6
  30. package/dist/docs/base/size/size.json +19 -19
  31. package/dist/docs/base/typography/typography.json +4 -4
  32. package/dist/docs/functional/size/border.json +41 -28
  33. package/dist/docs/functional/size/breakpoints.json +6 -6
  34. package/dist/docs/functional/size/size-coarse.json +3 -3
  35. package/dist/docs/functional/size/size-fine.json +3 -3
  36. package/dist/docs/functional/size/size.json +66 -66
  37. package/dist/docs/functional/size/viewport.json +6 -6
  38. package/dist/docs/functional/themes/dark-colorblind.json +475 -128
  39. package/dist/docs/functional/themes/dark-dimmed.json +519 -444
  40. package/dist/docs/functional/themes/dark-high-contrast.json +490 -241
  41. package/dist/docs/functional/themes/dark-tritanopia.json +485 -200
  42. package/dist/docs/functional/themes/dark.json +469 -102
  43. package/dist/docs/functional/themes/light-colorblind.json +463 -94
  44. package/dist/docs/functional/themes/light-high-contrast.json +487 -274
  45. package/dist/docs/functional/themes/light-tritanopia.json +463 -102
  46. package/dist/docs/functional/themes/light.json +460 -105
  47. package/dist/docs/functional/typography/typography.json +46 -46
  48. package/dist/fallbacks/functional/size/border.json +7 -6
  49. package/dist/figma/themes/dark-colorblind.json +14 -54
  50. package/dist/figma/themes/dark-dimmed.json +15 -356
  51. package/dist/figma/themes/dark-high-contrast.json +10 -129
  52. package/dist/figma/themes/dark-tritanopia.json +14 -111
  53. package/dist/figma/themes/dark.json +14 -34
  54. package/dist/figma/themes/light-colorblind.json +10 -20
  55. package/dist/figma/themes/light-high-contrast.json +10 -177
  56. package/dist/figma/themes/light-tritanopia.json +10 -24
  57. package/dist/figma/themes/light.json +10 -32
  58. package/dist/internalCss/dark-colorblind.css +88 -6
  59. package/dist/internalCss/dark-dimmed.css +88 -6
  60. package/dist/internalCss/dark-high-contrast.css +88 -6
  61. package/dist/internalCss/dark-tritanopia.css +88 -6
  62. package/dist/internalCss/dark.css +88 -6
  63. package/dist/internalCss/light-colorblind.css +88 -6
  64. package/dist/internalCss/light-high-contrast.css +88 -6
  65. package/dist/internalCss/light-tritanopia.css +88 -6
  66. package/dist/internalCss/light.css +88 -6
  67. package/dist/styleLint/base/size/size.json +19 -19
  68. package/dist/styleLint/base/typography/typography.json +4 -4
  69. package/dist/styleLint/functional/size/border.json +41 -28
  70. package/dist/styleLint/functional/size/breakpoints.json +6 -6
  71. package/dist/styleLint/functional/size/size-coarse.json +3 -3
  72. package/dist/styleLint/functional/size/size-fine.json +3 -3
  73. package/dist/styleLint/functional/size/size.json +66 -66
  74. package/dist/styleLint/functional/size/viewport.json +6 -6
  75. package/dist/styleLint/functional/themes/dark-colorblind.json +475 -128
  76. package/dist/styleLint/functional/themes/dark-dimmed.json +519 -444
  77. package/dist/styleLint/functional/themes/dark-high-contrast.json +490 -241
  78. package/dist/styleLint/functional/themes/dark-tritanopia.json +485 -200
  79. package/dist/styleLint/functional/themes/dark.json +469 -102
  80. package/dist/styleLint/functional/themes/light-colorblind.json +463 -94
  81. package/dist/styleLint/functional/themes/light-high-contrast.json +487 -274
  82. package/dist/styleLint/functional/themes/light-tritanopia.json +463 -102
  83. package/dist/styleLint/functional/themes/light.json +460 -105
  84. package/dist/styleLint/functional/typography/typography.json +46 -46
  85. package/package.json +1 -1
  86. package/src/tokens/base/typography/typography.json5 +48 -0
  87. package/src/tokens/functional/border/border.json5 +236 -0
  88. package/src/tokens/functional/color/dark/app-dark.json5 +0 -2
  89. package/src/tokens/functional/color/dark/overrides/dark.dimmed.json5 +120 -6
  90. package/src/tokens/functional/color/dark/overrides/dark.high-contrast.json5 +46 -29
  91. package/src/tokens/functional/color/dark/overrides/dark.protanopia-deuteranopia.json5 +15 -20
  92. package/src/tokens/functional/color/dark/overrides/dark.tritanopia.json5 +32 -18
  93. package/src/tokens/functional/color/dark/patterns-dark.json5 +13 -45
  94. package/src/tokens/functional/color/dark/primitives-dark.json5 +1 -6
  95. package/src/tokens/functional/color/light/overrides/light.high-contrast.json5 +67 -20
  96. package/src/tokens/functional/color/light/overrides/light.protanopia-deuteranopia.json5 +4 -21
  97. package/src/tokens/functional/color/light/overrides/light.tritanopia.json5 +3 -16
  98. package/src/tokens/functional/color/light/patterns-light.json5 +11 -47
  99. package/src/tokens/functional/color/light/primitives-light.json5 +2 -10
  100. package/src/tokens/functional/size/border.json5 +115 -0
  101. package/src/tokens/functional/typography/typography.json5 +527 -0
  102. package/dist/build/filters/isColorWithMix.d.ts +0 -7
  103. package/dist/build/filters/isColorWithMix.js +0 -24
  104. package/dist/build/transformers/colorToHexMix.d.ts +0 -8
  105. package/dist/build/transformers/colorToHexMix.js +0 -20
  106. package/dist/build/transformers/utilities/mix.d.ts +0 -5
  107. package/dist/build/transformers/utilities/mix.js +0 -38
  108. package/src/tokens/base/typography/typography.json +0 -48
  109. package/src/tokens/functional/border/dark.json5 +0 -12
  110. package/src/tokens/functional/border/light.json5 +0 -12
  111. package/src/tokens/functional/color/dark/patterns-dark.json +0 -3963
  112. package/src/tokens/functional/size/border.json +0 -111
  113. package/src/tokens/functional/typography/typography.json +0 -527
  114. /package/src/tokens/base/size/{size.json → size.json5} +0 -0
  115. /package/src/tokens/functional/size/{breakpoints.json → breakpoints.json5} +0 -0
  116. /package/src/tokens/functional/size/{size-coarse.json → size-coarse.json5} +0 -0
  117. /package/src/tokens/functional/size/{size-fine.json → size-fine.json5} +0 -0
  118. /package/src/tokens/functional/size/{size.json → size.json5} +0 -0
  119. /package/src/tokens/functional/size/{viewport.json → viewport.json5} +0 -0
package/dist/internalCss/light-colorblind.css CHANGED
@@ -2,6 +2,20 @@
2
2
  [data-color-mode="light"][data-light-theme="light_colorblind"] ::backdrop,
3
3
  [data-color-mode="auto"][data-light-theme="light_colorblind"],
4
4
  [data-color-mode="auto"][data-light-theme="light_colorblind"] ::backdrop {
5
+ --boxShadow-thin: inset 0 0 0 0.0625rem; /* Thin shadow for borders */
6
+ --boxShadow-thick: inset 0 0 0 0.125rem;
7
+ --boxShadow-thicker: inset 0 0 0 0.25rem;
8
+ --borderWidth-default: 0.0625rem;
9
+ --borderWidth-thin: 0.0625rem;
10
+ --borderWidth-thick: 0.125rem;
11
+ --borderWidth-thicker: 0.25rem;
12
+ --borderRadius-small: 0.1875rem;
13
+ --borderRadius-medium: 0.375rem;
14
+ --borderRadius-large: 0.75rem;
15
+ --borderRadius-full: 624.9375rem; /* Use this border radius for pill shaped elements */
16
+ --borderRadius-default: 0.375rem;
17
+ --outline-focus-offset: -0.125rem;
18
+ --outline-focus-width: 0.125rem;
5
19
  --base-color-black: #1f2328;
6
20
  --base-color-inset: #ffffff;
7
21
  --base-color-transparent: #ffffff00;
@@ -549,10 +563,10 @@
549
563
  --button-invisible-bgColor-rest: #ffffff00;
550
564
  --button-invisible-bgColor-hover: #818b981a;
551
565
  --button-invisible-bgColor-active: #818b9826;
552
- --button-invisible-bgColor-disabled: #eff2f5;
566
+ --button-invisible-bgColor-disabled: #ffffff00;
553
567
  --button-invisible-borderColor-rest: #ffffff00;
554
568
  --button-invisible-borderColor-hover: #ffffff00;
555
- --button-invisible-borderColor-disabled: #818b981a;
569
+ --button-invisible-borderColor-disabled: #ffffff00;
556
570
  --button-outline-fgColor-rest: #0969da;
557
571
  --button-outline-fgColor-hover: #ffffff;
558
572
  --button-outline-fgColor-active: #ffffff;
@@ -601,7 +615,7 @@
601
615
  --reactionButton-selected-fgColor-rest: #0969da;
602
616
  --reactionButton-selected-fgColor-hover: #0550ae;
603
617
  --focus-outlineColor: #0969da;
604
- --focus-outline: #0969da solid 2px;
618
+ --focus-outline: 2px solid #0969da;
605
619
  --menu-bgColor-active: #ffffff00;
606
620
  --overlay-bgColor: #ffffff;
607
621
  --overlay-borderColor: #d1d9e080;
@@ -867,10 +881,51 @@
867
881
  --shadow-floating-large: 0px 0px 0px 1px #d1d9e0, 0px 40px 80px 0px #25292e3d;
868
882
  --shadow-floating-xlarge: 0px 0px 0px 1px #d1d9e0, 0px 56px 112px 0px #25292e52;
869
883
  --shadow-floating-legacy: 0px 6px 12px -3px #25292e0a, 0px 6px 18px 0px #25292e1f;
884
+ --border-default: 0.0625rem solid #d1d9e0;
885
+ --border-muted: 0.0625rem solid #d1d9e0b3;
886
+ --border-emphasis: 0.0625rem solid #818b98;
887
+ --border-disabled: 0.0625rem solid #818b981a;
888
+ --border-transparent: 0.0625rem solid #ffffff00;
889
+ --border-neutral-emphasis: 0.0625rem solid #59636e;
890
+ --border-neutral-muted: 0.0625rem solid #d1d9e0b3;
891
+ --border-accent-emphasis: 0.0625rem solid #0969da;
892
+ --border-accent-muted: 0.0625rem solid #54aeff66;
893
+ --border-success-emphasis: 0.0625rem solid #0969da;
894
+ --border-success-muted: 0.0625rem solid #54aeff66;
895
+ --border-open-emphasis: 0.0625rem solid #0969da;
896
+ --border-open-muted: 0.0625rem solid #54aeff66;
897
+ --border-danger-emphasis: 0.0625rem solid #bc4c00;
898
+ --border-danger-muted: 0.0625rem solid #fb8f4466;
899
+ --border-closed-emphasis: 0.0625rem solid #bc4c00;
900
+ --border-closed-muted: 0.0625rem solid #fb8f4466;
901
+ --border-attention-emphasis: 0.0625rem solid #9a6700;
902
+ --border-attention-muted: 0.0625rem solid #d4a72c66;
903
+ --border-severe-emphasis: 0.0625rem solid #bc4c00;
904
+ --border-severe-muted: 0.0625rem solid #fb8f4466;
905
+ --border-done-emphasis: 0.0625rem solid #8250df;
906
+ --border-done-muted: 0.0625rem solid #c297ff66;
907
+ --border-upsell-emphasis: 0.0625rem solid #8250df;
908
+ --border-upsell-muted: 0.0625rem solid #c297ff66;
909
+ --border-sponsors-emphasis: 0.0625rem solid #bf3989;
910
+ --border-sponsors-muted: 0.0625rem solid #ff80c866;
870
911
  }
871
912
  @media (prefers-color-scheme: dark) {
872
913
  [data-color-mode="auto"][data-dark-theme="light_colorblind"],
873
914
  [data-color-mode="auto"][data-dark-theme="light_colorblind"] ::backdrop {
915
+ --boxShadow-thin: inset 0 0 0 0.0625rem; /* Thin shadow for borders */
916
+ --boxShadow-thick: inset 0 0 0 0.125rem;
917
+ --boxShadow-thicker: inset 0 0 0 0.25rem;
918
+ --borderWidth-default: 0.0625rem;
919
+ --borderWidth-thin: 0.0625rem;
920
+ --borderWidth-thick: 0.125rem;
921
+ --borderWidth-thicker: 0.25rem;
922
+ --borderRadius-small: 0.1875rem;
923
+ --borderRadius-medium: 0.375rem;
924
+ --borderRadius-large: 0.75rem;
925
+ --borderRadius-full: 624.9375rem; /* Use this border radius for pill shaped elements */
926
+ --borderRadius-default: 0.375rem;
927
+ --outline-focus-offset: -0.125rem;
928
+ --outline-focus-width: 0.125rem;
874
929
  --base-color-black: #1f2328;
875
930
  --base-color-inset: #ffffff;
876
931
  --base-color-transparent: #ffffff00;
@@ -1418,10 +1473,10 @@
1418
1473
  --button-invisible-bgColor-rest: #ffffff00;
1419
1474
  --button-invisible-bgColor-hover: #818b981a;
1420
1475
  --button-invisible-bgColor-active: #818b9826;
1421
- --button-invisible-bgColor-disabled: #eff2f5;
1476
+ --button-invisible-bgColor-disabled: #ffffff00;
1422
1477
  --button-invisible-borderColor-rest: #ffffff00;
1423
1478
  --button-invisible-borderColor-hover: #ffffff00;
1424
- --button-invisible-borderColor-disabled: #818b981a;
1479
+ --button-invisible-borderColor-disabled: #ffffff00;
1425
1480
  --button-outline-fgColor-rest: #0969da;
1426
1481
  --button-outline-fgColor-hover: #ffffff;
1427
1482
  --button-outline-fgColor-active: #ffffff;
@@ -1470,7 +1525,7 @@
1470
1525
  --reactionButton-selected-fgColor-rest: #0969da;
1471
1526
  --reactionButton-selected-fgColor-hover: #0550ae;
1472
1527
  --focus-outlineColor: #0969da;
1473
- --focus-outline: #0969da solid 2px;
1528
+ --focus-outline: 2px solid #0969da;
1474
1529
  --menu-bgColor-active: #ffffff00;
1475
1530
  --overlay-bgColor: #ffffff;
1476
1531
  --overlay-borderColor: #d1d9e080;
@@ -1736,5 +1791,32 @@
1736
1791
  --shadow-floating-large: 0px 0px 0px 1px #d1d9e0, 0px 40px 80px 0px #25292e3d;
1737
1792
  --shadow-floating-xlarge: 0px 0px 0px 1px #d1d9e0, 0px 56px 112px 0px #25292e52;
1738
1793
  --shadow-floating-legacy: 0px 6px 12px -3px #25292e0a, 0px 6px 18px 0px #25292e1f;
1794
+ --border-default: 0.0625rem solid #d1d9e0;
1795
+ --border-muted: 0.0625rem solid #d1d9e0b3;
1796
+ --border-emphasis: 0.0625rem solid #818b98;
1797
+ --border-disabled: 0.0625rem solid #818b981a;
1798
+ --border-transparent: 0.0625rem solid #ffffff00;
1799
+ --border-neutral-emphasis: 0.0625rem solid #59636e;
1800
+ --border-neutral-muted: 0.0625rem solid #d1d9e0b3;
1801
+ --border-accent-emphasis: 0.0625rem solid #0969da;
1802
+ --border-accent-muted: 0.0625rem solid #54aeff66;
1803
+ --border-success-emphasis: 0.0625rem solid #0969da;
1804
+ --border-success-muted: 0.0625rem solid #54aeff66;
1805
+ --border-open-emphasis: 0.0625rem solid #0969da;
1806
+ --border-open-muted: 0.0625rem solid #54aeff66;
1807
+ --border-danger-emphasis: 0.0625rem solid #bc4c00;
1808
+ --border-danger-muted: 0.0625rem solid #fb8f4466;
1809
+ --border-closed-emphasis: 0.0625rem solid #bc4c00;
1810
+ --border-closed-muted: 0.0625rem solid #fb8f4466;
1811
+ --border-attention-emphasis: 0.0625rem solid #9a6700;
1812
+ --border-attention-muted: 0.0625rem solid #d4a72c66;
1813
+ --border-severe-emphasis: 0.0625rem solid #bc4c00;
1814
+ --border-severe-muted: 0.0625rem solid #fb8f4466;
1815
+ --border-done-emphasis: 0.0625rem solid #8250df;
1816
+ --border-done-muted: 0.0625rem solid #c297ff66;
1817
+ --border-upsell-emphasis: 0.0625rem solid #8250df;
1818
+ --border-upsell-muted: 0.0625rem solid #c297ff66;
1819
+ --border-sponsors-emphasis: 0.0625rem solid #bf3989;
1820
+ --border-sponsors-muted: 0.0625rem solid #ff80c866;
1739
1821
  }
1740
1822
  }
package/dist/internalCss/light-high-contrast.css CHANGED
@@ -2,6 +2,20 @@
2
2
  [data-color-mode="light"][data-light-theme="light_high_contrast"] ::backdrop,
3
3
  [data-color-mode="auto"][data-light-theme="light_high_contrast"],
4
4
  [data-color-mode="auto"][data-light-theme="light_high_contrast"] ::backdrop {
5
+ --boxShadow-thin: inset 0 0 0 0.0625rem; /* Thin shadow for borders */
6
+ --boxShadow-thick: inset 0 0 0 0.125rem;
7
+ --boxShadow-thicker: inset 0 0 0 0.25rem;
8
+ --borderWidth-default: 0.0625rem;
9
+ --borderWidth-thin: 0.0625rem;
10
+ --borderWidth-thick: 0.125rem;
11
+ --borderWidth-thicker: 0.25rem;
12
+ --borderRadius-small: 0.1875rem;
13
+ --borderRadius-medium: 0.375rem;
14
+ --borderRadius-large: 0.75rem;
15
+ --borderRadius-full: 624.9375rem; /* Use this border radius for pill shaped elements */
16
+ --borderRadius-default: 0.375rem;
17
+ --outline-focus-offset: -0.125rem;
18
+ --outline-focus-width: 0.125rem;
5
19
  --base-color-black: #010409;
6
20
  --base-color-inset: #ffffff;
7
21
  --base-color-transparent: #ffffff00;
@@ -549,10 +563,10 @@
549
563
  --button-invisible-bgColor-rest: #ffffff00;
550
564
  --button-invisible-bgColor-hover: #dae0e7;
551
565
  --button-invisible-bgColor-active: #d1d9e0;
552
- --button-invisible-bgColor-disabled: #e0e6eb;
566
+ --button-invisible-bgColor-disabled: #ffffff00;
553
567
  --button-invisible-borderColor-rest: #ffffff00;
554
568
  --button-invisible-borderColor-hover: #454c54;
555
- --button-invisible-borderColor-disabled: #59636e1f;
569
+ --button-invisible-borderColor-disabled: #ffffff00;
556
570
  --button-outline-fgColor-rest: #023b95;
557
571
  --button-outline-fgColor-hover: #ffffff;
558
572
  --button-outline-fgColor-active: #ffffff;
@@ -601,7 +615,7 @@
601
615
  --reactionButton-selected-fgColor-rest: #023b95;
602
616
  --reactionButton-selected-fgColor-hover: #023b95;
603
617
  --focus-outlineColor: #0349b4;
604
- --focus-outline: #0349b4 solid 2px;
618
+ --focus-outline: 2px solid #0349b4;
605
619
  --menu-bgColor-active: #ffffff00;
606
620
  --overlay-bgColor: #ffffff;
607
621
  --overlay-borderColor: #454c54;
@@ -867,10 +881,51 @@
867
881
  --shadow-floating-large: 0px 0px 0px 1px #454c54, 0px 40px 80px 0px #25292e3d;
868
882
  --shadow-floating-xlarge: 0px 0px 0px 1px #454c54, 0px 56px 112px 0px #25292e52;
869
883
  --shadow-floating-legacy: 0px 6px 12px -3px #25292e0a, 0px 6px 18px 0px #25292e1f;
884
+ --border-default: 0.0625rem solid #454c54;
885
+ --border-muted: 0.0625rem solid #454c54;
886
+ --border-emphasis: 0.0625rem solid #454c54;
887
+ --border-disabled: 0.0625rem solid #59636e1f;
888
+ --border-transparent: 0.0625rem solid #ffffff00;
889
+ --border-neutral-emphasis: 0.0625rem solid #59636e;
890
+ --border-neutral-muted: 0.0625rem solid #454c54;
891
+ --border-accent-emphasis: 0.0625rem solid #0349b4;
892
+ --border-accent-muted: 0.0625rem solid #368cf9;
893
+ --border-success-emphasis: 0.0625rem solid #055d20;
894
+ --border-success-muted: 0.0625rem solid #26a148;
895
+ --border-open-emphasis: 0.0625rem solid #055d20;
896
+ --border-open-muted: 0.0625rem solid #26a148;
897
+ --border-danger-emphasis: 0.0625rem solid #a0111f;
898
+ --border-danger-muted: 0.0625rem solid #ee5a5d;
899
+ --border-closed-emphasis: 0.0625rem solid #a0111f;
900
+ --border-closed-muted: 0.0625rem solid #ee5a5d;
901
+ --border-attention-emphasis: 0.0625rem solid #744500;
902
+ --border-attention-muted: 0.0625rem solid #b58407;
903
+ --border-severe-emphasis: 0.0625rem solid #873800;
904
+ --border-severe-muted: 0.0625rem solid #dc6d1a;
905
+ --border-done-emphasis: 0.0625rem solid #622cbc;
906
+ --border-done-muted: 0.0625rem solid #a371f7;
907
+ --border-upsell-emphasis: 0.0625rem solid #622cbc;
908
+ --border-upsell-muted: 0.0625rem solid #a371f7;
909
+ --border-sponsors-emphasis: 0.0625rem solid #971368;
910
+ --border-sponsors-muted: 0.0625rem solid #ed4baf;
870
911
  }
871
912
  @media (prefers-color-scheme: dark) {
872
913
  [data-color-mode="auto"][data-dark-theme="light_high_contrast"],
873
914
  [data-color-mode="auto"][data-dark-theme="light_high_contrast"] ::backdrop {
915
+ --boxShadow-thin: inset 0 0 0 0.0625rem; /* Thin shadow for borders */
916
+ --boxShadow-thick: inset 0 0 0 0.125rem;
917
+ --boxShadow-thicker: inset 0 0 0 0.25rem;
918
+ --borderWidth-default: 0.0625rem;
919
+ --borderWidth-thin: 0.0625rem;
920
+ --borderWidth-thick: 0.125rem;
921
+ --borderWidth-thicker: 0.25rem;
922
+ --borderRadius-small: 0.1875rem;
923
+ --borderRadius-medium: 0.375rem;
924
+ --borderRadius-large: 0.75rem;
925
+ --borderRadius-full: 624.9375rem; /* Use this border radius for pill shaped elements */
926
+ --borderRadius-default: 0.375rem;
927
+ --outline-focus-offset: -0.125rem;
928
+ --outline-focus-width: 0.125rem;
874
929
  --base-color-black: #010409;
875
930
  --base-color-inset: #ffffff;
876
931
  --base-color-transparent: #ffffff00;
@@ -1418,10 +1473,10 @@
1418
1473
  --button-invisible-bgColor-rest: #ffffff00;
1419
1474
  --button-invisible-bgColor-hover: #dae0e7;
1420
1475
  --button-invisible-bgColor-active: #d1d9e0;
1421
- --button-invisible-bgColor-disabled: #e0e6eb;
1476
+ --button-invisible-bgColor-disabled: #ffffff00;
1422
1477
  --button-invisible-borderColor-rest: #ffffff00;
1423
1478
  --button-invisible-borderColor-hover: #454c54;
1424
- --button-invisible-borderColor-disabled: #59636e1f;
1479
+ --button-invisible-borderColor-disabled: #ffffff00;
1425
1480
  --button-outline-fgColor-rest: #023b95;
1426
1481
  --button-outline-fgColor-hover: #ffffff;
1427
1482
  --button-outline-fgColor-active: #ffffff;
@@ -1470,7 +1525,7 @@
1470
1525
  --reactionButton-selected-fgColor-rest: #023b95;
1471
1526
  --reactionButton-selected-fgColor-hover: #023b95;
1472
1527
  --focus-outlineColor: #0349b4;
1473
- --focus-outline: #0349b4 solid 2px;
1528
+ --focus-outline: 2px solid #0349b4;
1474
1529
  --menu-bgColor-active: #ffffff00;
1475
1530
  --overlay-bgColor: #ffffff;
1476
1531
  --overlay-borderColor: #454c54;
@@ -1736,5 +1791,32 @@
1736
1791
  --shadow-floating-large: 0px 0px 0px 1px #454c54, 0px 40px 80px 0px #25292e3d;
1737
1792
  --shadow-floating-xlarge: 0px 0px 0px 1px #454c54, 0px 56px 112px 0px #25292e52;
1738
1793
  --shadow-floating-legacy: 0px 6px 12px -3px #25292e0a, 0px 6px 18px 0px #25292e1f;
1794
+ --border-default: 0.0625rem solid #454c54;
1795
+ --border-muted: 0.0625rem solid #454c54;
1796
+ --border-emphasis: 0.0625rem solid #454c54;
1797
+ --border-disabled: 0.0625rem solid #59636e1f;
1798
+ --border-transparent: 0.0625rem solid #ffffff00;
1799
+ --border-neutral-emphasis: 0.0625rem solid #59636e;
1800
+ --border-neutral-muted: 0.0625rem solid #454c54;
1801
+ --border-accent-emphasis: 0.0625rem solid #0349b4;
1802
+ --border-accent-muted: 0.0625rem solid #368cf9;
1803
+ --border-success-emphasis: 0.0625rem solid #055d20;
1804
+ --border-success-muted: 0.0625rem solid #26a148;
1805
+ --border-open-emphasis: 0.0625rem solid #055d20;
1806
+ --border-open-muted: 0.0625rem solid #26a148;
1807
+ --border-danger-emphasis: 0.0625rem solid #a0111f;
1808
+ --border-danger-muted: 0.0625rem solid #ee5a5d;
1809
+ --border-closed-emphasis: 0.0625rem solid #a0111f;
1810
+ --border-closed-muted: 0.0625rem solid #ee5a5d;
1811
+ --border-attention-emphasis: 0.0625rem solid #744500;
1812
+ --border-attention-muted: 0.0625rem solid #b58407;
1813
+ --border-severe-emphasis: 0.0625rem solid #873800;
1814
+ --border-severe-muted: 0.0625rem solid #dc6d1a;
1815
+ --border-done-emphasis: 0.0625rem solid #622cbc;
1816
+ --border-done-muted: 0.0625rem solid #a371f7;
1817
+ --border-upsell-emphasis: 0.0625rem solid #622cbc;
1818
+ --border-upsell-muted: 0.0625rem solid #a371f7;
1819
+ --border-sponsors-emphasis: 0.0625rem solid #971368;
1820
+ --border-sponsors-muted: 0.0625rem solid #ed4baf;
1739
1821
  }
1740
1822
  }
package/dist/internalCss/light-tritanopia.css CHANGED
@@ -2,6 +2,20 @@
2
2
  [data-color-mode="light"][data-light-theme="light_tritanopia"] ::backdrop,
3
3
  [data-color-mode="auto"][data-light-theme="light_tritanopia"],
4
4
  [data-color-mode="auto"][data-light-theme="light_tritanopia"] ::backdrop {
5
+ --boxShadow-thin: inset 0 0 0 0.0625rem; /* Thin shadow for borders */
6
+ --boxShadow-thick: inset 0 0 0 0.125rem;
7
+ --boxShadow-thicker: inset 0 0 0 0.25rem;
8
+ --borderWidth-default: 0.0625rem;
9
+ --borderWidth-thin: 0.0625rem;
10
+ --borderWidth-thick: 0.125rem;
11
+ --borderWidth-thicker: 0.25rem;
12
+ --borderRadius-small: 0.1875rem;
13
+ --borderRadius-medium: 0.375rem;
14
+ --borderRadius-large: 0.75rem;
15
+ --borderRadius-full: 624.9375rem; /* Use this border radius for pill shaped elements */
16
+ --borderRadius-default: 0.375rem;
17
+ --outline-focus-offset: -0.125rem;
18
+ --outline-focus-width: 0.125rem;
5
19
  --base-color-black: #1f2328;
6
20
  --base-color-inset: #ffffff;
7
21
  --base-color-transparent: #ffffff00;
@@ -549,10 +563,10 @@
549
563
  --button-invisible-bgColor-rest: #ffffff00;
550
564
  --button-invisible-bgColor-hover: #818b981a;
551
565
  --button-invisible-bgColor-active: #818b9826;
552
- --button-invisible-bgColor-disabled: #eff2f5;
566
+ --button-invisible-bgColor-disabled: #ffffff00;
553
567
  --button-invisible-borderColor-rest: #ffffff00;
554
568
  --button-invisible-borderColor-hover: #ffffff00;
555
- --button-invisible-borderColor-disabled: #818b981a;
569
+ --button-invisible-borderColor-disabled: #ffffff00;
556
570
  --button-outline-fgColor-rest: #0969da;
557
571
  --button-outline-fgColor-hover: #ffffff;
558
572
  --button-outline-fgColor-active: #ffffff;
@@ -601,7 +615,7 @@
601
615
  --reactionButton-selected-fgColor-rest: #0969da;
602
616
  --reactionButton-selected-fgColor-hover: #0550ae;
603
617
  --focus-outlineColor: #0969da;
604
- --focus-outline: #0969da solid 2px;
618
+ --focus-outline: 2px solid #0969da;
605
619
  --menu-bgColor-active: #ffffff00;
606
620
  --overlay-bgColor: #ffffff;
607
621
  --overlay-borderColor: #d1d9e080;
@@ -867,10 +881,51 @@
867
881
  --shadow-floating-large: 0px 0px 0px 1px #d1d9e0, 0px 40px 80px 0px #25292e3d;
868
882
  --shadow-floating-xlarge: 0px 0px 0px 1px #d1d9e0, 0px 56px 112px 0px #25292e52;
869
883
  --shadow-floating-legacy: 0px 6px 12px -3px #25292e0a, 0px 6px 18px 0px #25292e1f;
884
+ --border-default: 0.0625rem solid #d1d9e0;
885
+ --border-muted: 0.0625rem solid #d1d9e0b3;
886
+ --border-emphasis: 0.0625rem solid #818b98;
887
+ --border-disabled: 0.0625rem solid #818b981a;
888
+ --border-transparent: 0.0625rem solid #ffffff00;
889
+ --border-neutral-emphasis: 0.0625rem solid #59636e;
890
+ --border-neutral-muted: 0.0625rem solid #d1d9e0b3;
891
+ --border-accent-emphasis: 0.0625rem solid #0969da;
892
+ --border-accent-muted: 0.0625rem solid #54aeff66;
893
+ --border-success-emphasis: 0.0625rem solid #0969da;
894
+ --border-success-muted: 0.0625rem solid #54aeff66;
895
+ --border-open-emphasis: 0.0625rem solid #0969da;
896
+ --border-open-muted: 0.0625rem solid #54aeff66;
897
+ --border-danger-emphasis: 0.0625rem solid #cf222e;
898
+ --border-danger-muted: 0.0625rem solid #ff818266;
899
+ --border-closed-emphasis: 0.0625rem solid #cf222e;
900
+ --border-closed-muted: 0.0625rem solid #ff818266;
901
+ --border-attention-emphasis: 0.0625rem solid #9a6700;
902
+ --border-attention-muted: 0.0625rem solid #d4a72c66;
903
+ --border-severe-emphasis: 0.0625rem solid #cf222e;
904
+ --border-severe-muted: 0.0625rem solid #ff818266;
905
+ --border-done-emphasis: 0.0625rem solid #8250df;
906
+ --border-done-muted: 0.0625rem solid #c297ff66;
907
+ --border-upsell-emphasis: 0.0625rem solid #8250df;
908
+ --border-upsell-muted: 0.0625rem solid #c297ff66;
909
+ --border-sponsors-emphasis: 0.0625rem solid #bf3989;
910
+ --border-sponsors-muted: 0.0625rem solid #ff80c866;
870
911
  }
871
912
  @media (prefers-color-scheme: dark) {
872
913
  [data-color-mode="auto"][data-dark-theme="light_tritanopia"],
873
914
  [data-color-mode="auto"][data-dark-theme="light_tritanopia"] ::backdrop {
915
+ --boxShadow-thin: inset 0 0 0 0.0625rem; /* Thin shadow for borders */
916
+ --boxShadow-thick: inset 0 0 0 0.125rem;
917
+ --boxShadow-thicker: inset 0 0 0 0.25rem;
918
+ --borderWidth-default: 0.0625rem;
919
+ --borderWidth-thin: 0.0625rem;
920
+ --borderWidth-thick: 0.125rem;
921
+ --borderWidth-thicker: 0.25rem;
922
+ --borderRadius-small: 0.1875rem;
923
+ --borderRadius-medium: 0.375rem;
924
+ --borderRadius-large: 0.75rem;
925
+ --borderRadius-full: 624.9375rem; /* Use this border radius for pill shaped elements */
926
+ --borderRadius-default: 0.375rem;
927
+ --outline-focus-offset: -0.125rem;
928
+ --outline-focus-width: 0.125rem;
874
929
  --base-color-black: #1f2328;
875
930
  --base-color-inset: #ffffff;
876
931
  --base-color-transparent: #ffffff00;
@@ -1418,10 +1473,10 @@
1418
1473
  --button-invisible-bgColor-rest: #ffffff00;
1419
1474
  --button-invisible-bgColor-hover: #818b981a;
1420
1475
  --button-invisible-bgColor-active: #818b9826;
1421
- --button-invisible-bgColor-disabled: #eff2f5;
1476
+ --button-invisible-bgColor-disabled: #ffffff00;
1422
1477
  --button-invisible-borderColor-rest: #ffffff00;
1423
1478
  --button-invisible-borderColor-hover: #ffffff00;
1424
- --button-invisible-borderColor-disabled: #818b981a;
1479
+ --button-invisible-borderColor-disabled: #ffffff00;
1425
1480
  --button-outline-fgColor-rest: #0969da;
1426
1481
  --button-outline-fgColor-hover: #ffffff;
1427
1482
  --button-outline-fgColor-active: #ffffff;
@@ -1470,7 +1525,7 @@
1470
1525
  --reactionButton-selected-fgColor-rest: #0969da;
1471
1526
  --reactionButton-selected-fgColor-hover: #0550ae;
1472
1527
  --focus-outlineColor: #0969da;
1473
- --focus-outline: #0969da solid 2px;
1528
+ --focus-outline: 2px solid #0969da;
1474
1529
  --menu-bgColor-active: #ffffff00;
1475
1530
  --overlay-bgColor: #ffffff;
1476
1531
  --overlay-borderColor: #d1d9e080;
@@ -1736,5 +1791,32 @@
1736
1791
  --shadow-floating-large: 0px 0px 0px 1px #d1d9e0, 0px 40px 80px 0px #25292e3d;
1737
1792
  --shadow-floating-xlarge: 0px 0px 0px 1px #d1d9e0, 0px 56px 112px 0px #25292e52;
1738
1793
  --shadow-floating-legacy: 0px 6px 12px -3px #25292e0a, 0px 6px 18px 0px #25292e1f;
1794
+ --border-default: 0.0625rem solid #d1d9e0;
1795
+ --border-muted: 0.0625rem solid #d1d9e0b3;
1796
+ --border-emphasis: 0.0625rem solid #818b98;
1797
+ --border-disabled: 0.0625rem solid #818b981a;
1798
+ --border-transparent: 0.0625rem solid #ffffff00;
1799
+ --border-neutral-emphasis: 0.0625rem solid #59636e;
1800
+ --border-neutral-muted: 0.0625rem solid #d1d9e0b3;
1801
+ --border-accent-emphasis: 0.0625rem solid #0969da;
1802
+ --border-accent-muted: 0.0625rem solid #54aeff66;
1803
+ --border-success-emphasis: 0.0625rem solid #0969da;
1804
+ --border-success-muted: 0.0625rem solid #54aeff66;
1805
+ --border-open-emphasis: 0.0625rem solid #0969da;
1806
+ --border-open-muted: 0.0625rem solid #54aeff66;
1807
+ --border-danger-emphasis: 0.0625rem solid #cf222e;
1808
+ --border-danger-muted: 0.0625rem solid #ff818266;
1809
+ --border-closed-emphasis: 0.0625rem solid #cf222e;
1810
+ --border-closed-muted: 0.0625rem solid #ff818266;
1811
+ --border-attention-emphasis: 0.0625rem solid #9a6700;
1812
+ --border-attention-muted: 0.0625rem solid #d4a72c66;
1813
+ --border-severe-emphasis: 0.0625rem solid #cf222e;
1814
+ --border-severe-muted: 0.0625rem solid #ff818266;
1815
+ --border-done-emphasis: 0.0625rem solid #8250df;
1816
+ --border-done-muted: 0.0625rem solid #c297ff66;
1817
+ --border-upsell-emphasis: 0.0625rem solid #8250df;
1818
+ --border-upsell-muted: 0.0625rem solid #c297ff66;
1819
+ --border-sponsors-emphasis: 0.0625rem solid #bf3989;
1820
+ --border-sponsors-muted: 0.0625rem solid #ff80c866;
1739
1821
  }
1740
1822
  }
package/dist/internalCss/light.css CHANGED
@@ -2,6 +2,20 @@
2
2
  [data-color-mode="light"][data-light-theme="light"] ::backdrop,
3
3
  [data-color-mode="auto"][data-light-theme="light"],
4
4
  [data-color-mode="auto"][data-light-theme="light"] ::backdrop {
5
+ --boxShadow-thin: inset 0 0 0 0.0625rem; /* Thin shadow for borders */
6
+ --boxShadow-thick: inset 0 0 0 0.125rem;
7
+ --boxShadow-thicker: inset 0 0 0 0.25rem;
8
+ --borderWidth-default: 0.0625rem;
9
+ --borderWidth-thin: 0.0625rem;
10
+ --borderWidth-thick: 0.125rem;
11
+ --borderWidth-thicker: 0.25rem;
12
+ --borderRadius-small: 0.1875rem;
13
+ --borderRadius-medium: 0.375rem;
14
+ --borderRadius-large: 0.75rem;
15
+ --borderRadius-full: 624.9375rem; /* Use this border radius for pill shaped elements */
16
+ --borderRadius-default: 0.375rem;
17
+ --outline-focus-offset: -0.125rem;
18
+ --outline-focus-width: 0.125rem;
5
19
  --base-color-black: #1f2328;
6
20
  --base-color-inset: #ffffff;
7
21
  --base-color-transparent: #ffffff00;
@@ -549,10 +563,10 @@
549
563
  --button-invisible-bgColor-rest: #ffffff00;
550
564
  --button-invisible-bgColor-hover: #818b981a;
551
565
  --button-invisible-bgColor-active: #818b9826;
552
- --button-invisible-bgColor-disabled: #eff2f5;
566
+ --button-invisible-bgColor-disabled: #ffffff00;
553
567
  --button-invisible-borderColor-rest: #ffffff00;
554
568
  --button-invisible-borderColor-hover: #ffffff00;
555
- --button-invisible-borderColor-disabled: #818b981a;
569
+ --button-invisible-borderColor-disabled: #ffffff00;
556
570
  --button-outline-fgColor-rest: #0969da;
557
571
  --button-outline-fgColor-hover: #ffffff;
558
572
  --button-outline-fgColor-active: #ffffff;
@@ -601,7 +615,7 @@
601
615
  --reactionButton-selected-fgColor-rest: #0969da;
602
616
  --reactionButton-selected-fgColor-hover: #0550ae;
603
617
  --focus-outlineColor: #0969da;
604
- --focus-outline: #0969da solid 2px;
618
+ --focus-outline: 2px solid #0969da;
605
619
  --menu-bgColor-active: #ffffff00;
606
620
  --overlay-bgColor: #ffffff;
607
621
  --overlay-borderColor: #d1d9e080;
@@ -867,10 +881,51 @@
867
881
  --shadow-floating-large: 0px 0px 0px 1px #d1d9e0, 0px 40px 80px 0px #25292e3d;
868
882
  --shadow-floating-xlarge: 0px 0px 0px 1px #d1d9e0, 0px 56px 112px 0px #25292e52;
869
883
  --shadow-floating-legacy: 0px 6px 12px -3px #25292e0a, 0px 6px 18px 0px #25292e1f;
884
+ --border-default: 0.0625rem solid #d1d9e0;
885
+ --border-muted: 0.0625rem solid #d1d9e0b3;
886
+ --border-emphasis: 0.0625rem solid #818b98;
887
+ --border-disabled: 0.0625rem solid #818b981a;
888
+ --border-transparent: 0.0625rem solid #ffffff00;
889
+ --border-neutral-emphasis: 0.0625rem solid #59636e;
890
+ --border-neutral-muted: 0.0625rem solid #d1d9e0b3;
891
+ --border-accent-emphasis: 0.0625rem solid #0969da;
892
+ --border-accent-muted: 0.0625rem solid #54aeff66;
893
+ --border-success-emphasis: 0.0625rem solid #1a7f37;
894
+ --border-success-muted: 0.0625rem solid #4ac26b66;
895
+ --border-open-emphasis: 0.0625rem solid #1a7f37;
896
+ --border-open-muted: 0.0625rem solid #4ac26b66;
897
+ --border-danger-emphasis: 0.0625rem solid #cf222e;
898
+ --border-danger-muted: 0.0625rem solid #ff818266;
899
+ --border-closed-emphasis: 0.0625rem solid #cf222e;
900
+ --border-closed-muted: 0.0625rem solid #ff818266;
901
+ --border-attention-emphasis: 0.0625rem solid #9a6700;
902
+ --border-attention-muted: 0.0625rem solid #d4a72c66;
903
+ --border-severe-emphasis: 0.0625rem solid #bc4c00;
904
+ --border-severe-muted: 0.0625rem solid #fb8f4466;
905
+ --border-done-emphasis: 0.0625rem solid #8250df;
906
+ --border-done-muted: 0.0625rem solid #c297ff66;
907
+ --border-upsell-emphasis: 0.0625rem solid #8250df;
908
+ --border-upsell-muted: 0.0625rem solid #c297ff66;
909
+ --border-sponsors-emphasis: 0.0625rem solid #bf3989;
910
+ --border-sponsors-muted: 0.0625rem solid #ff80c866;
870
911
  }
871
912
  @media (prefers-color-scheme: dark) {
872
913
  [data-color-mode="auto"][data-dark-theme="light"],
873
914
  [data-color-mode="auto"][data-dark-theme="light"] ::backdrop {
915
+ --boxShadow-thin: inset 0 0 0 0.0625rem; /* Thin shadow for borders */
916
+ --boxShadow-thick: inset 0 0 0 0.125rem;
917
+ --boxShadow-thicker: inset 0 0 0 0.25rem;
918
+ --borderWidth-default: 0.0625rem;
919
+ --borderWidth-thin: 0.0625rem;
920
+ --borderWidth-thick: 0.125rem;
921
+ --borderWidth-thicker: 0.25rem;
922
+ --borderRadius-small: 0.1875rem;
923
+ --borderRadius-medium: 0.375rem;
924
+ --borderRadius-large: 0.75rem;
925
+ --borderRadius-full: 624.9375rem; /* Use this border radius for pill shaped elements */
926
+ --borderRadius-default: 0.375rem;
927
+ --outline-focus-offset: -0.125rem;
928
+ --outline-focus-width: 0.125rem;
874
929
  --base-color-black: #1f2328;
875
930
  --base-color-inset: #ffffff;
876
931
  --base-color-transparent: #ffffff00;
@@ -1418,10 +1473,10 @@
1418
1473
  --button-invisible-bgColor-rest: #ffffff00;
1419
1474
  --button-invisible-bgColor-hover: #818b981a;
1420
1475
  --button-invisible-bgColor-active: #818b9826;
1421
- --button-invisible-bgColor-disabled: #eff2f5;
1476
+ --button-invisible-bgColor-disabled: #ffffff00;
1422
1477
  --button-invisible-borderColor-rest: #ffffff00;
1423
1478
  --button-invisible-borderColor-hover: #ffffff00;
1424
- --button-invisible-borderColor-disabled: #818b981a;
1479
+ --button-invisible-borderColor-disabled: #ffffff00;
1425
1480
  --button-outline-fgColor-rest: #0969da;
1426
1481
  --button-outline-fgColor-hover: #ffffff;
1427
1482
  --button-outline-fgColor-active: #ffffff;
@@ -1470,7 +1525,7 @@
1470
1525
  --reactionButton-selected-fgColor-rest: #0969da;
1471
1526
  --reactionButton-selected-fgColor-hover: #0550ae;
1472
1527
  --focus-outlineColor: #0969da;
1473
- --focus-outline: #0969da solid 2px;
1528
+ --focus-outline: 2px solid #0969da;
1474
1529
  --menu-bgColor-active: #ffffff00;
1475
1530
  --overlay-bgColor: #ffffff;
1476
1531
  --overlay-borderColor: #d1d9e080;
@@ -1736,5 +1791,32 @@
1736
1791
  --shadow-floating-large: 0px 0px 0px 1px #d1d9e0, 0px 40px 80px 0px #25292e3d;
1737
1792
  --shadow-floating-xlarge: 0px 0px 0px 1px #d1d9e0, 0px 56px 112px 0px #25292e52;
1738
1793
  --shadow-floating-legacy: 0px 6px 12px -3px #25292e0a, 0px 6px 18px 0px #25292e1f;
1794
+ --border-default: 0.0625rem solid #d1d9e0;
1795
+ --border-muted: 0.0625rem solid #d1d9e0b3;
1796
+ --border-emphasis: 0.0625rem solid #818b98;
1797
+ --border-disabled: 0.0625rem solid #818b981a;
1798
+ --border-transparent: 0.0625rem solid #ffffff00;
1799
+ --border-neutral-emphasis: 0.0625rem solid #59636e;
1800
+ --border-neutral-muted: 0.0625rem solid #d1d9e0b3;
1801
+ --border-accent-emphasis: 0.0625rem solid #0969da;
1802
+ --border-accent-muted: 0.0625rem solid #54aeff66;
1803
+ --border-success-emphasis: 0.0625rem solid #1a7f37;
1804
+ --border-success-muted: 0.0625rem solid #4ac26b66;
1805
+ --border-open-emphasis: 0.0625rem solid #1a7f37;
1806
+ --border-open-muted: 0.0625rem solid #4ac26b66;
1807
+ --border-danger-emphasis: 0.0625rem solid #cf222e;
1808
+ --border-danger-muted: 0.0625rem solid #ff818266;
1809
+ --border-closed-emphasis: 0.0625rem solid #cf222e;
1810
+ --border-closed-muted: 0.0625rem solid #ff818266;
1811
+ --border-attention-emphasis: 0.0625rem solid #9a6700;
1812
+ --border-attention-muted: 0.0625rem solid #d4a72c66;
1813
+ --border-severe-emphasis: 0.0625rem solid #bc4c00;
1814
+ --border-severe-muted: 0.0625rem solid #fb8f4466;
1815
+ --border-done-emphasis: 0.0625rem solid #8250df;
1816
+ --border-done-muted: 0.0625rem solid #c297ff66;
1817
+ --border-upsell-emphasis: 0.0625rem solid #8250df;
1818
+ --border-upsell-muted: 0.0625rem solid #c297ff66;
1819
+ --border-sponsors-emphasis: 0.0625rem solid #bf3989;
1820
+ --border-sponsors-muted: 0.0625rem solid #ff80c866;
1739
1821
  }
1740
1822
  }