@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/dark-dimmed.css CHANGED
@@ -2,6 +2,20 @@
2
2
  [data-color-mode="dark"][data-dark-theme="dark_dimmed"] ::backdrop,
3
3
  [data-color-mode="auto"][data-light-theme="dark_dimmed"],
4
4
  [data-color-mode="auto"][data-light-theme="dark_dimmed"] ::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: #1c2128;
6
20
  --base-color-inset: #1c2128;
7
21
  --base-color-white: #cdd9e5;
@@ -549,10 +563,10 @@
549
563
  --button-invisible-bgColor-rest: #00000000;
550
564
  --button-invisible-bgColor-hover: #656c7626;
551
565
  --button-invisible-bgColor-active: #656c7633;
552
- --button-invisible-bgColor-disabled: #2a313c;
566
+ --button-invisible-bgColor-disabled: #00000000;
553
567
  --button-invisible-borderColor-rest: #00000000;
554
568
  --button-invisible-borderColor-hover: #00000000;
555
- --button-invisible-borderColor-disabled: #656c761a;
569
+ --button-invisible-borderColor-disabled: #00000000;
556
570
  --button-outline-fgColor-rest: #4184e4;
557
571
  --button-outline-fgColor-hover: #539bf5;
558
572
  --button-outline-fgColor-active: #cdd9e5;
@@ -601,6 +615,7 @@
601
615
  --reactionButton-selected-fgColor-rest: #478be6;
602
616
  --reactionButton-selected-fgColor-hover: #6cb6ff;
603
617
  --focus-outlineColor: #316dca;
618
+ --focus-outline: 2px solid #316dca;
604
619
  --menu-bgColor-active: #151b23;
605
620
  --overlay-bgColor: #2a313c;
606
621
  --overlay-borderColor: #3d444db3;
@@ -866,11 +881,51 @@
866
881
  --shadow-floating-large: 0px 0px 0px 1px #3d444d, 0px 24px 48px 0px #1c2128;
867
882
  --shadow-floating-xlarge: 0px 0px 0px 1px #3d444d, 0px 32px 64px 0px #1c2128;
868
883
  --shadow-floating-legacy: 0px 6px 12px -3px #1c212866, 0px 6px 18px 0px #1c212866;
869
- --outline-focus: #316dca solid 2px;
884
+ --border-default: 0.0625rem solid #3d444d;
885
+ --border-muted: 0.0625rem solid #3d444db3;
886
+ --border-emphasis: 0.0625rem solid #656c76;
887
+ --border-disabled: 0.0625rem solid #656c761a;
888
+ --border-transparent: 0.0625rem solid #00000000;
889
+ --border-neutral-emphasis: 0.0625rem solid #656c76;
890
+ --border-neutral-muted: 0.0625rem solid #3d444db3;
891
+ --border-accent-emphasis: 0.0625rem solid #316dca;
892
+ --border-accent-muted: 0.0625rem solid #4184e466;
893
+ --border-success-emphasis: 0.0625rem solid #347d39;
894
+ --border-success-muted: 0.0625rem solid #46954a66;
895
+ --border-open-emphasis: 0.0625rem solid #347d39;
896
+ --border-open-muted: 0.0625rem solid #46954a66;
897
+ --border-danger-emphasis: 0.0625rem solid #c93c37;
898
+ --border-danger-muted: 0.0625rem solid #e5534b66;
899
+ --border-closed-emphasis: 0.0625rem solid #c93c37;
900
+ --border-closed-muted: 0.0625rem solid #e5534b66;
901
+ --border-attention-emphasis: 0.0625rem solid #966600;
902
+ --border-attention-muted: 0.0625rem solid #ae7c1466;
903
+ --border-severe-emphasis: 0.0625rem solid #ae5622;
904
+ --border-severe-muted: 0.0625rem solid #cc6b2c66;
905
+ --border-done-emphasis: 0.0625rem solid #8256d0;
906
+ --border-done-muted: 0.0625rem solid #986ee266;
907
+ --border-upsell-emphasis: 0.0625rem solid #8256d0;
908
+ --border-upsell-muted: 0.0625rem solid #986ee266;
909
+ --border-sponsors-emphasis: 0.0625rem solid #ae4c82;
910
+ --border-sponsors-muted: 0.0625rem solid #c9619866;
870
911
  }
871
912
  @media (prefers-color-scheme: dark) {
872
913
  [data-color-mode="auto"][data-dark-theme="dark_dimmed"],
873
914
  [data-color-mode="auto"][data-dark-theme="dark_dimmed"] ::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: #1c2128;
875
930
  --base-color-inset: #1c2128;
876
931
  --base-color-white: #cdd9e5;
@@ -1418,10 +1473,10 @@
1418
1473
  --button-invisible-bgColor-rest: #00000000;
1419
1474
  --button-invisible-bgColor-hover: #656c7626;
1420
1475
  --button-invisible-bgColor-active: #656c7633;
1421
- --button-invisible-bgColor-disabled: #2a313c;
1476
+ --button-invisible-bgColor-disabled: #00000000;
1422
1477
  --button-invisible-borderColor-rest: #00000000;
1423
1478
  --button-invisible-borderColor-hover: #00000000;
1424
- --button-invisible-borderColor-disabled: #656c761a;
1479
+ --button-invisible-borderColor-disabled: #00000000;
1425
1480
  --button-outline-fgColor-rest: #4184e4;
1426
1481
  --button-outline-fgColor-hover: #539bf5;
1427
1482
  --button-outline-fgColor-active: #cdd9e5;
@@ -1470,6 +1525,7 @@
1470
1525
  --reactionButton-selected-fgColor-rest: #478be6;
1471
1526
  --reactionButton-selected-fgColor-hover: #6cb6ff;
1472
1527
  --focus-outlineColor: #316dca;
1528
+ --focus-outline: 2px solid #316dca;
1473
1529
  --menu-bgColor-active: #151b23;
1474
1530
  --overlay-bgColor: #2a313c;
1475
1531
  --overlay-borderColor: #3d444db3;
@@ -1735,6 +1791,32 @@
1735
1791
  --shadow-floating-large: 0px 0px 0px 1px #3d444d, 0px 24px 48px 0px #1c2128;
1736
1792
  --shadow-floating-xlarge: 0px 0px 0px 1px #3d444d, 0px 32px 64px 0px #1c2128;
1737
1793
  --shadow-floating-legacy: 0px 6px 12px -3px #1c212866, 0px 6px 18px 0px #1c212866;
1738
- --outline-focus: #316dca solid 2px;
1794
+ --border-default: 0.0625rem solid #3d444d;
1795
+ --border-muted: 0.0625rem solid #3d444db3;
1796
+ --border-emphasis: 0.0625rem solid #656c76;
1797
+ --border-disabled: 0.0625rem solid #656c761a;
1798
+ --border-transparent: 0.0625rem solid #00000000;
1799
+ --border-neutral-emphasis: 0.0625rem solid #656c76;
1800
+ --border-neutral-muted: 0.0625rem solid #3d444db3;
1801
+ --border-accent-emphasis: 0.0625rem solid #316dca;
1802
+ --border-accent-muted: 0.0625rem solid #4184e466;
1803
+ --border-success-emphasis: 0.0625rem solid #347d39;
1804
+ --border-success-muted: 0.0625rem solid #46954a66;
1805
+ --border-open-emphasis: 0.0625rem solid #347d39;
1806
+ --border-open-muted: 0.0625rem solid #46954a66;
1807
+ --border-danger-emphasis: 0.0625rem solid #c93c37;
1808
+ --border-danger-muted: 0.0625rem solid #e5534b66;
1809
+ --border-closed-emphasis: 0.0625rem solid #c93c37;
1810
+ --border-closed-muted: 0.0625rem solid #e5534b66;
1811
+ --border-attention-emphasis: 0.0625rem solid #966600;
1812
+ --border-attention-muted: 0.0625rem solid #ae7c1466;
1813
+ --border-severe-emphasis: 0.0625rem solid #ae5622;
1814
+ --border-severe-muted: 0.0625rem solid #cc6b2c66;
1815
+ --border-done-emphasis: 0.0625rem solid #8256d0;
1816
+ --border-done-muted: 0.0625rem solid #986ee266;
1817
+ --border-upsell-emphasis: 0.0625rem solid #8256d0;
1818
+ --border-upsell-muted: 0.0625rem solid #986ee266;
1819
+ --border-sponsors-emphasis: 0.0625rem solid #ae4c82;
1820
+ --border-sponsors-muted: 0.0625rem solid #c9619866;
1739
1821
  }
1740
1822
  }
package/dist/internalCss/dark-high-contrast.css CHANGED
@@ -2,6 +2,20 @@
2
2
  [data-color-mode="dark"][data-dark-theme="dark_high_contrast"] ::backdrop,
3
3
  [data-color-mode="auto"][data-light-theme="dark_high_contrast"],
4
4
  [data-color-mode="auto"][data-light-theme="dark_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: #010409;
7
21
  --base-color-white: #ffffff;
@@ -549,10 +563,10 @@
549
563
  --button-invisible-bgColor-rest: #00000000;
550
564
  --button-invisible-bgColor-hover: #151b23;
551
565
  --button-invisible-bgColor-active: #212830;
552
- --button-invisible-bgColor-disabled: #262c36;
566
+ --button-invisible-bgColor-disabled: #00000000;
553
567
  --button-invisible-borderColor-rest: #00000000;
554
568
  --button-invisible-borderColor-hover: #b7bdc8;
555
- --button-invisible-borderColor-disabled: #9198a11f;
569
+ --button-invisible-borderColor-disabled: #00000000;
556
570
  --button-outline-fgColor-rest: #5cacff;
557
571
  --button-outline-fgColor-hover: #71b7ff;
558
572
  --button-outline-fgColor-active: #ffffff;
@@ -601,6 +615,7 @@
601
615
  --reactionButton-selected-fgColor-rest: #74b9ff;
602
616
  --reactionButton-selected-fgColor-hover: #91cbff;
603
617
  --focus-outlineColor: #409eff;
618
+ --focus-outline: 2px solid #409eff;
604
619
  --menu-bgColor-active: #151b23;
605
620
  --overlay-bgColor: #151b23;
606
621
  --overlay-borderColor: #b7bdc8;
@@ -866,11 +881,51 @@
866
881
  --shadow-floating-large: 0px 0px 0px 1px #b7bdc8, 0px 24px 48px 0px #010409;
867
882
  --shadow-floating-xlarge: 0px 0px 0px 1px #b7bdc8, 0px 32px 64px 0px #010409;
868
883
  --shadow-floating-legacy: 0px 6px 12px -3px #01040966, 0px 6px 18px 0px #01040966;
869
- --outline-focus: #409eff solid 2px;
884
+ --border-default: 0.0625rem solid #b7bdc8;
885
+ --border-muted: 0.0625rem solid #b7bdc8;
886
+ --border-emphasis: 0.0625rem solid #b7bdc8;
887
+ --border-disabled: 0.0625rem solid #9198a11f;
888
+ --border-transparent: 0.0625rem solid #00000000;
889
+ --border-neutral-emphasis: 0.0625rem solid #b7bdc8;
890
+ --border-neutral-muted: 0.0625rem solid #b7bdc8;
891
+ --border-accent-emphasis: 0.0625rem solid #409eff;
892
+ --border-accent-muted: 0.0625rem solid #5cacff;
893
+ --border-success-emphasis: 0.0625rem solid #09b43a;
894
+ --border-success-muted: 0.0625rem solid #0ac740;
895
+ --border-open-emphasis: 0.0625rem solid #09b43a;
896
+ --border-open-muted: 0.0625rem solid #0ac740;
897
+ --border-danger-emphasis: 0.0625rem solid #ff6a69;
898
+ --border-danger-muted: 0.0625rem solid #ff8080;
899
+ --border-closed-emphasis: 0.0625rem solid #ff6a69;
900
+ --border-closed-muted: 0.0625rem solid #ff8080;
901
+ --border-attention-emphasis: 0.0625rem solid #e09b13;
902
+ --border-attention-muted: 0.0625rem solid #edaa27;
903
+ --border-severe-emphasis: 0.0625rem solid #e7811d;
904
+ --border-severe-muted: 0.0625rem solid #f48b25;
905
+ --border-done-emphasis: 0.0625rem solid #b87fff;
906
+ --border-done-muted: 0.0625rem solid #bf8fff;
907
+ --border-upsell-emphasis: 0.0625rem solid #b87fff;
908
+ --border-upsell-muted: 0.0625rem solid #bf8fff;
909
+ --border-sponsors-emphasis: 0.0625rem solid #ef6eb1;
910
+ --border-sponsors-muted: 0.0625rem solid #f87cbd;
870
911
  }
871
912
  @media (prefers-color-scheme: dark) {
872
913
  [data-color-mode="auto"][data-dark-theme="dark_high_contrast"],
873
914
  [data-color-mode="auto"][data-dark-theme="dark_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: #010409;
876
931
  --base-color-white: #ffffff;
@@ -1418,10 +1473,10 @@
1418
1473
  --button-invisible-bgColor-rest: #00000000;
1419
1474
  --button-invisible-bgColor-hover: #151b23;
1420
1475
  --button-invisible-bgColor-active: #212830;
1421
- --button-invisible-bgColor-disabled: #262c36;
1476
+ --button-invisible-bgColor-disabled: #00000000;
1422
1477
  --button-invisible-borderColor-rest: #00000000;
1423
1478
  --button-invisible-borderColor-hover: #b7bdc8;
1424
- --button-invisible-borderColor-disabled: #9198a11f;
1479
+ --button-invisible-borderColor-disabled: #00000000;
1425
1480
  --button-outline-fgColor-rest: #5cacff;
1426
1481
  --button-outline-fgColor-hover: #71b7ff;
1427
1482
  --button-outline-fgColor-active: #ffffff;
@@ -1470,6 +1525,7 @@
1470
1525
  --reactionButton-selected-fgColor-rest: #74b9ff;
1471
1526
  --reactionButton-selected-fgColor-hover: #91cbff;
1472
1527
  --focus-outlineColor: #409eff;
1528
+ --focus-outline: 2px solid #409eff;
1473
1529
  --menu-bgColor-active: #151b23;
1474
1530
  --overlay-bgColor: #151b23;
1475
1531
  --overlay-borderColor: #b7bdc8;
@@ -1735,6 +1791,32 @@
1735
1791
  --shadow-floating-large: 0px 0px 0px 1px #b7bdc8, 0px 24px 48px 0px #010409;
1736
1792
  --shadow-floating-xlarge: 0px 0px 0px 1px #b7bdc8, 0px 32px 64px 0px #010409;
1737
1793
  --shadow-floating-legacy: 0px 6px 12px -3px #01040966, 0px 6px 18px 0px #01040966;
1738
- --outline-focus: #409eff solid 2px;
1794
+ --border-default: 0.0625rem solid #b7bdc8;
1795
+ --border-muted: 0.0625rem solid #b7bdc8;
1796
+ --border-emphasis: 0.0625rem solid #b7bdc8;
1797
+ --border-disabled: 0.0625rem solid #9198a11f;
1798
+ --border-transparent: 0.0625rem solid #00000000;
1799
+ --border-neutral-emphasis: 0.0625rem solid #b7bdc8;
1800
+ --border-neutral-muted: 0.0625rem solid #b7bdc8;
1801
+ --border-accent-emphasis: 0.0625rem solid #409eff;
1802
+ --border-accent-muted: 0.0625rem solid #5cacff;
1803
+ --border-success-emphasis: 0.0625rem solid #09b43a;
1804
+ --border-success-muted: 0.0625rem solid #0ac740;
1805
+ --border-open-emphasis: 0.0625rem solid #09b43a;
1806
+ --border-open-muted: 0.0625rem solid #0ac740;
1807
+ --border-danger-emphasis: 0.0625rem solid #ff6a69;
1808
+ --border-danger-muted: 0.0625rem solid #ff8080;
1809
+ --border-closed-emphasis: 0.0625rem solid #ff6a69;
1810
+ --border-closed-muted: 0.0625rem solid #ff8080;
1811
+ --border-attention-emphasis: 0.0625rem solid #e09b13;
1812
+ --border-attention-muted: 0.0625rem solid #edaa27;
1813
+ --border-severe-emphasis: 0.0625rem solid #e7811d;
1814
+ --border-severe-muted: 0.0625rem solid #f48b25;
1815
+ --border-done-emphasis: 0.0625rem solid #b87fff;
1816
+ --border-done-muted: 0.0625rem solid #bf8fff;
1817
+ --border-upsell-emphasis: 0.0625rem solid #b87fff;
1818
+ --border-upsell-muted: 0.0625rem solid #bf8fff;
1819
+ --border-sponsors-emphasis: 0.0625rem solid #ef6eb1;
1820
+ --border-sponsors-muted: 0.0625rem solid #f87cbd;
1739
1821
  }
1740
1822
  }
package/dist/internalCss/dark-tritanopia.css CHANGED
@@ -2,6 +2,20 @@
2
2
  [data-color-mode="dark"][data-dark-theme="dark_tritanopia"] ::backdrop,
3
3
  [data-color-mode="auto"][data-light-theme="dark_tritanopia"],
4
4
  [data-color-mode="auto"][data-light-theme="dark_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: #010409;
6
20
  --base-color-inset: #010409;
7
21
  --base-color-white: #ffffff;
@@ -549,10 +563,10 @@
549
563
  --button-invisible-bgColor-rest: #00000000;
550
564
  --button-invisible-bgColor-hover: #656c7633;
551
565
  --button-invisible-bgColor-active: #656c7640;
552
- --button-invisible-bgColor-disabled: #212830;
566
+ --button-invisible-bgColor-disabled: #00000000;
553
567
  --button-invisible-borderColor-rest: #00000000;
554
568
  --button-invisible-borderColor-hover: #00000000;
555
- --button-invisible-borderColor-disabled: #656c761a;
569
+ --button-invisible-borderColor-disabled: #00000000;
556
570
  --button-outline-fgColor-rest: #388bfd;
557
571
  --button-outline-fgColor-hover: #58a6ff;
558
572
  --button-outline-fgColor-active: #ffffff;
@@ -601,6 +615,7 @@
601
615
  --reactionButton-selected-fgColor-rest: #4493f8;
602
616
  --reactionButton-selected-fgColor-hover: #79c0ff;
603
617
  --focus-outlineColor: #1f6feb;
618
+ --focus-outline: 2px solid #1f6feb;
604
619
  --menu-bgColor-active: #151b23;
605
620
  --overlay-bgColor: #151b23;
606
621
  --overlay-borderColor: #3d444db3;
@@ -866,11 +881,51 @@
866
881
  --shadow-floating-large: 0px 0px 0px 1px #3d444d, 0px 24px 48px 0px #010409;
867
882
  --shadow-floating-xlarge: 0px 0px 0px 1px #3d444d, 0px 32px 64px 0px #010409;
868
883
  --shadow-floating-legacy: 0px 6px 12px -3px #01040966, 0px 6px 18px 0px #01040966;
869
- --outline-focus: #1f6feb solid 2px;
884
+ --border-default: 0.0625rem solid #3d444d;
885
+ --border-muted: 0.0625rem solid #3d444db3;
886
+ --border-emphasis: 0.0625rem solid #656c76;
887
+ --border-disabled: 0.0625rem solid #656c761a;
888
+ --border-transparent: 0.0625rem solid #00000000;
889
+ --border-neutral-emphasis: 0.0625rem solid #656c76;
890
+ --border-neutral-muted: 0.0625rem solid #3d444db3;
891
+ --border-accent-emphasis: 0.0625rem solid #1f6feb;
892
+ --border-accent-muted: 0.0625rem solid #388bfd66;
893
+ --border-success-emphasis: 0.0625rem solid #1f6feb;
894
+ --border-success-muted: 0.0625rem solid #388bfd66;
895
+ --border-open-emphasis: 0.0625rem solid #1f6feb;
896
+ --border-open-muted: 0.0625rem solid #388bfd66;
897
+ --border-danger-emphasis: 0.0625rem solid #da3633;
898
+ --border-danger-muted: 0.0625rem solid #f8514966;
899
+ --border-closed-emphasis: 0.0625rem solid #da3633;
900
+ --border-closed-muted: 0.0625rem solid #f8514966;
901
+ --border-attention-emphasis: 0.0625rem solid #9e6a03;
902
+ --border-attention-muted: 0.0625rem solid #bb800966;
903
+ --border-severe-emphasis: 0.0625rem solid #da3633;
904
+ --border-severe-muted: 0.0625rem solid #f8514966;
905
+ --border-done-emphasis: 0.0625rem solid #8957e5;
906
+ --border-done-muted: 0.0625rem solid #ab7df866;
907
+ --border-upsell-emphasis: 0.0625rem solid #8957e5;
908
+ --border-upsell-muted: 0.0625rem solid #ab7df866;
909
+ --border-sponsors-emphasis: 0.0625rem solid #bf4b8a;
910
+ --border-sponsors-muted: 0.0625rem solid #db61a266;
870
911
  }
871
912
  @media (prefers-color-scheme: dark) {
872
913
  [data-color-mode="auto"][data-dark-theme="dark_tritanopia"],
873
914
  [data-color-mode="auto"][data-dark-theme="dark_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: #010409;
875
930
  --base-color-inset: #010409;
876
931
  --base-color-white: #ffffff;
@@ -1418,10 +1473,10 @@
1418
1473
  --button-invisible-bgColor-rest: #00000000;
1419
1474
  --button-invisible-bgColor-hover: #656c7633;
1420
1475
  --button-invisible-bgColor-active: #656c7640;
1421
- --button-invisible-bgColor-disabled: #212830;
1476
+ --button-invisible-bgColor-disabled: #00000000;
1422
1477
  --button-invisible-borderColor-rest: #00000000;
1423
1478
  --button-invisible-borderColor-hover: #00000000;
1424
- --button-invisible-borderColor-disabled: #656c761a;
1479
+ --button-invisible-borderColor-disabled: #00000000;
1425
1480
  --button-outline-fgColor-rest: #388bfd;
1426
1481
  --button-outline-fgColor-hover: #58a6ff;
1427
1482
  --button-outline-fgColor-active: #ffffff;
@@ -1470,6 +1525,7 @@
1470
1525
  --reactionButton-selected-fgColor-rest: #4493f8;
1471
1526
  --reactionButton-selected-fgColor-hover: #79c0ff;
1472
1527
  --focus-outlineColor: #1f6feb;
1528
+ --focus-outline: 2px solid #1f6feb;
1473
1529
  --menu-bgColor-active: #151b23;
1474
1530
  --overlay-bgColor: #151b23;
1475
1531
  --overlay-borderColor: #3d444db3;
@@ -1735,6 +1791,32 @@
1735
1791
  --shadow-floating-large: 0px 0px 0px 1px #3d444d, 0px 24px 48px 0px #010409;
1736
1792
  --shadow-floating-xlarge: 0px 0px 0px 1px #3d444d, 0px 32px 64px 0px #010409;
1737
1793
  --shadow-floating-legacy: 0px 6px 12px -3px #01040966, 0px 6px 18px 0px #01040966;
1738
- --outline-focus: #1f6feb solid 2px;
1794
+ --border-default: 0.0625rem solid #3d444d;
1795
+ --border-muted: 0.0625rem solid #3d444db3;
1796
+ --border-emphasis: 0.0625rem solid #656c76;
1797
+ --border-disabled: 0.0625rem solid #656c761a;
1798
+ --border-transparent: 0.0625rem solid #00000000;
1799
+ --border-neutral-emphasis: 0.0625rem solid #656c76;
1800
+ --border-neutral-muted: 0.0625rem solid #3d444db3;
1801
+ --border-accent-emphasis: 0.0625rem solid #1f6feb;
1802
+ --border-accent-muted: 0.0625rem solid #388bfd66;
1803
+ --border-success-emphasis: 0.0625rem solid #1f6feb;
1804
+ --border-success-muted: 0.0625rem solid #388bfd66;
1805
+ --border-open-emphasis: 0.0625rem solid #1f6feb;
1806
+ --border-open-muted: 0.0625rem solid #388bfd66;
1807
+ --border-danger-emphasis: 0.0625rem solid #da3633;
1808
+ --border-danger-muted: 0.0625rem solid #f8514966;
1809
+ --border-closed-emphasis: 0.0625rem solid #da3633;
1810
+ --border-closed-muted: 0.0625rem solid #f8514966;
1811
+ --border-attention-emphasis: 0.0625rem solid #9e6a03;
1812
+ --border-attention-muted: 0.0625rem solid #bb800966;
1813
+ --border-severe-emphasis: 0.0625rem solid #da3633;
1814
+ --border-severe-muted: 0.0625rem solid #f8514966;
1815
+ --border-done-emphasis: 0.0625rem solid #8957e5;
1816
+ --border-done-muted: 0.0625rem solid #ab7df866;
1817
+ --border-upsell-emphasis: 0.0625rem solid #8957e5;
1818
+ --border-upsell-muted: 0.0625rem solid #ab7df866;
1819
+ --border-sponsors-emphasis: 0.0625rem solid #bf4b8a;
1820
+ --border-sponsors-muted: 0.0625rem solid #db61a266;
1739
1821
  }
1740
1822
  }
package/dist/internalCss/dark.css CHANGED
@@ -2,6 +2,20 @@
2
2
  [data-color-mode="dark"][data-dark-theme="dark"] ::backdrop,
3
3
  [data-color-mode="auto"][data-light-theme="dark"],
4
4
  [data-color-mode="auto"][data-light-theme="dark"] ::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: #010409;
7
21
  --base-color-white: #ffffff;
@@ -549,10 +563,10 @@
549
563
  --button-invisible-bgColor-rest: #00000000;
550
564
  --button-invisible-bgColor-hover: #656c7633;
551
565
  --button-invisible-bgColor-active: #656c7640;
552
- --button-invisible-bgColor-disabled: #212830;
566
+ --button-invisible-bgColor-disabled: #00000000;
553
567
  --button-invisible-borderColor-rest: #00000000;
554
568
  --button-invisible-borderColor-hover: #00000000;
555
- --button-invisible-borderColor-disabled: #656c761a;
569
+ --button-invisible-borderColor-disabled: #00000000;
556
570
  --button-outline-fgColor-rest: #388bfd;
557
571
  --button-outline-fgColor-hover: #58a6ff;
558
572
  --button-outline-fgColor-active: #ffffff;
@@ -601,6 +615,7 @@
601
615
  --reactionButton-selected-fgColor-rest: #4493f8;
602
616
  --reactionButton-selected-fgColor-hover: #79c0ff;
603
617
  --focus-outlineColor: #1f6feb;
618
+ --focus-outline: 2px solid #1f6feb;
604
619
  --menu-bgColor-active: #151b23;
605
620
  --overlay-bgColor: #151b23;
606
621
  --overlay-borderColor: #3d444db3;
@@ -866,11 +881,51 @@
866
881
  --shadow-floating-large: 0px 0px 0px 1px #3d444d, 0px 24px 48px 0px #010409;
867
882
  --shadow-floating-xlarge: 0px 0px 0px 1px #3d444d, 0px 32px 64px 0px #010409;
868
883
  --shadow-floating-legacy: 0px 6px 12px -3px #01040966, 0px 6px 18px 0px #01040966;
869
- --outline-focus: #1f6feb solid 2px;
884
+ --border-default: 0.0625rem solid #3d444d;
885
+ --border-muted: 0.0625rem solid #3d444db3;
886
+ --border-emphasis: 0.0625rem solid #656c76;
887
+ --border-disabled: 0.0625rem solid #656c761a;
888
+ --border-transparent: 0.0625rem solid #00000000;
889
+ --border-neutral-emphasis: 0.0625rem solid #656c76;
890
+ --border-neutral-muted: 0.0625rem solid #3d444db3;
891
+ --border-accent-emphasis: 0.0625rem solid #1f6feb;
892
+ --border-accent-muted: 0.0625rem solid #388bfd66;
893
+ --border-success-emphasis: 0.0625rem solid #238636;
894
+ --border-success-muted: 0.0625rem solid #2ea04366;
895
+ --border-open-emphasis: 0.0625rem solid #238636;
896
+ --border-open-muted: 0.0625rem solid #2ea04366;
897
+ --border-danger-emphasis: 0.0625rem solid #da3633;
898
+ --border-danger-muted: 0.0625rem solid #f8514966;
899
+ --border-closed-emphasis: 0.0625rem solid #da3633;
900
+ --border-closed-muted: 0.0625rem solid #f8514966;
901
+ --border-attention-emphasis: 0.0625rem solid #9e6a03;
902
+ --border-attention-muted: 0.0625rem solid #bb800966;
903
+ --border-severe-emphasis: 0.0625rem solid #bd561d;
904
+ --border-severe-muted: 0.0625rem solid #db6d2866;
905
+ --border-done-emphasis: 0.0625rem solid #8957e5;
906
+ --border-done-muted: 0.0625rem solid #ab7df866;
907
+ --border-upsell-emphasis: 0.0625rem solid #8957e5;
908
+ --border-upsell-muted: 0.0625rem solid #ab7df866;
909
+ --border-sponsors-emphasis: 0.0625rem solid #bf4b8a;
910
+ --border-sponsors-muted: 0.0625rem solid #db61a266;
870
911
  }
871
912
  @media (prefers-color-scheme: dark) {
872
913
  [data-color-mode="auto"][data-dark-theme="dark"],
873
914
  [data-color-mode="auto"][data-dark-theme="dark"] ::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: #010409;
876
931
  --base-color-white: #ffffff;
@@ -1418,10 +1473,10 @@
1418
1473
  --button-invisible-bgColor-rest: #00000000;
1419
1474
  --button-invisible-bgColor-hover: #656c7633;
1420
1475
  --button-invisible-bgColor-active: #656c7640;
1421
- --button-invisible-bgColor-disabled: #212830;
1476
+ --button-invisible-bgColor-disabled: #00000000;
1422
1477
  --button-invisible-borderColor-rest: #00000000;
1423
1478
  --button-invisible-borderColor-hover: #00000000;
1424
- --button-invisible-borderColor-disabled: #656c761a;
1479
+ --button-invisible-borderColor-disabled: #00000000;
1425
1480
  --button-outline-fgColor-rest: #388bfd;
1426
1481
  --button-outline-fgColor-hover: #58a6ff;
1427
1482
  --button-outline-fgColor-active: #ffffff;
@@ -1470,6 +1525,7 @@
1470
1525
  --reactionButton-selected-fgColor-rest: #4493f8;
1471
1526
  --reactionButton-selected-fgColor-hover: #79c0ff;
1472
1527
  --focus-outlineColor: #1f6feb;
1528
+ --focus-outline: 2px solid #1f6feb;
1473
1529
  --menu-bgColor-active: #151b23;
1474
1530
  --overlay-bgColor: #151b23;
1475
1531
  --overlay-borderColor: #3d444db3;
@@ -1735,6 +1791,32 @@
1735
1791
  --shadow-floating-large: 0px 0px 0px 1px #3d444d, 0px 24px 48px 0px #010409;
1736
1792
  --shadow-floating-xlarge: 0px 0px 0px 1px #3d444d, 0px 32px 64px 0px #010409;
1737
1793
  --shadow-floating-legacy: 0px 6px 12px -3px #01040966, 0px 6px 18px 0px #01040966;
1738
- --outline-focus: #1f6feb solid 2px;
1794
+ --border-default: 0.0625rem solid #3d444d;
1795
+ --border-muted: 0.0625rem solid #3d444db3;
1796
+ --border-emphasis: 0.0625rem solid #656c76;
1797
+ --border-disabled: 0.0625rem solid #656c761a;
1798
+ --border-transparent: 0.0625rem solid #00000000;
1799
+ --border-neutral-emphasis: 0.0625rem solid #656c76;
1800
+ --border-neutral-muted: 0.0625rem solid #3d444db3;
1801
+ --border-accent-emphasis: 0.0625rem solid #1f6feb;
1802
+ --border-accent-muted: 0.0625rem solid #388bfd66;
1803
+ --border-success-emphasis: 0.0625rem solid #238636;
1804
+ --border-success-muted: 0.0625rem solid #2ea04366;
1805
+ --border-open-emphasis: 0.0625rem solid #238636;
1806
+ --border-open-muted: 0.0625rem solid #2ea04366;
1807
+ --border-danger-emphasis: 0.0625rem solid #da3633;
1808
+ --border-danger-muted: 0.0625rem solid #f8514966;
1809
+ --border-closed-emphasis: 0.0625rem solid #da3633;
1810
+ --border-closed-muted: 0.0625rem solid #f8514966;
1811
+ --border-attention-emphasis: 0.0625rem solid #9e6a03;
1812
+ --border-attention-muted: 0.0625rem solid #bb800966;
1813
+ --border-severe-emphasis: 0.0625rem solid #bd561d;
1814
+ --border-severe-muted: 0.0625rem solid #db6d2866;
1815
+ --border-done-emphasis: 0.0625rem solid #8957e5;
1816
+ --border-done-muted: 0.0625rem solid #ab7df866;
1817
+ --border-upsell-emphasis: 0.0625rem solid #8957e5;
1818
+ --border-upsell-muted: 0.0625rem solid #ab7df866;
1819
+ --border-sponsors-emphasis: 0.0625rem solid #bf4b8a;
1820
+ --border-sponsors-muted: 0.0625rem solid #db61a266;
1739
1821
  }
1740
1822
  }