@primer/primitives 10.4.0-rc.fd8ac4c9 → 10.5.0-rc.2284dc61

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 (121) hide show
  1. package/dist/build/filters/index.d.ts +1 -0
  2. package/dist/build/filters/index.js +1 -0
  3. package/dist/build/filters/isGradient.d.ts +7 -0
  4. package/dist/build/filters/isGradient.js +10 -0
  5. package/dist/build/platforms/css.js +1 -0
  6. package/dist/build/primerStyleDictionary.js +2 -1
  7. package/dist/build/schemas/borderToken.d.ts +3 -3
  8. package/dist/build/schemas/colorToken.d.ts +3 -3
  9. package/dist/build/schemas/cubicBezierToken.d.ts +3 -3
  10. package/dist/build/schemas/designToken.js +2 -0
  11. package/dist/build/schemas/dimensionToken.d.ts +3 -3
  12. package/dist/build/schemas/durationToken.d.ts +3 -3
  13. package/dist/build/schemas/fontFamilyToken.d.ts +3 -3
  14. package/dist/build/schemas/fontWeightToken.d.ts +3 -3
  15. package/dist/build/schemas/gradientToken.d.ts +60 -0
  16. package/dist/build/schemas/gradientToken.js +26 -0
  17. package/dist/build/schemas/numberToken.d.ts +3 -3
  18. package/dist/build/schemas/referenceValue.js +1 -1
  19. package/dist/build/schemas/shadowToken.d.ts +1995 -3
  20. package/dist/build/schemas/shadowToken.js +27 -0
  21. package/dist/build/schemas/stringToken.d.ts +3 -3
  22. package/dist/build/schemas/tokenType.d.ts +1 -1
  23. package/dist/build/schemas/typographyToken.d.ts +3 -3
  24. package/dist/build/schemas/validTokenType.d.ts +1 -1
  25. package/dist/build/schemas/validTokenType.js +1 -0
  26. package/dist/build/schemas/viewportRangeToken.d.ts +3 -3
  27. package/dist/build/transformers/gradientToCss.d.ts +8 -0
  28. package/dist/build/transformers/gradientToCss.js +23 -0
  29. package/dist/build/transformers/index.d.ts +1 -0
  30. package/dist/build/transformers/index.js +1 -0
  31. package/dist/css/functional/themes/dark-colorblind.css +138 -8
  32. package/dist/css/functional/themes/dark-dimmed.css +138 -8
  33. package/dist/css/functional/themes/dark-high-contrast.css +138 -8
  34. package/dist/css/functional/themes/dark-tritanopia.css +138 -8
  35. package/dist/css/functional/themes/dark.css +138 -8
  36. package/dist/css/functional/themes/light-colorblind.css +138 -8
  37. package/dist/css/functional/themes/light-high-contrast.css +138 -8
  38. package/dist/css/functional/themes/light-tritanopia.css +138 -8
  39. package/dist/css/functional/themes/light.css +138 -8
  40. package/dist/css/primitives.css +0 -6
  41. package/dist/docs/functional/themes/dark-colorblind.json +13707 -2770
  42. package/dist/docs/functional/themes/dark-dimmed.json +14003 -2770
  43. package/dist/docs/functional/themes/dark-high-contrast.json +15117 -2906
  44. package/dist/docs/functional/themes/dark-tritanopia.json +13644 -2735
  45. package/dist/docs/functional/themes/dark.json +12045 -1234
  46. package/dist/docs/functional/themes/light-colorblind.json +13645 -2738
  47. package/dist/docs/functional/themes/light-high-contrast.json +15193 -3054
  48. package/dist/docs/functional/themes/light-tritanopia.json +13631 -2752
  49. package/dist/docs/functional/themes/light.json +12062 -1225
  50. package/dist/figma/figma.json +1 -10
  51. package/dist/figma/themes/dark-colorblind.json +6381 -5473
  52. package/dist/figma/themes/dark-dimmed.json +6408 -5169
  53. package/dist/figma/themes/dark-high-contrast.json +6377 -4000
  54. package/dist/figma/themes/dark-tritanopia.json +6367 -5493
  55. package/dist/figma/themes/dark.json +5559 -4790
  56. package/dist/figma/themes/light-colorblind.json +6298 -5337
  57. package/dist/figma/themes/light-high-contrast.json +6343 -3975
  58. package/dist/figma/themes/light-tritanopia.json +6272 -5342
  59. package/dist/figma/themes/light.json +6275 -5390
  60. package/dist/internalCss/dark-colorblind.css +138 -8
  61. package/dist/internalCss/dark-dimmed.css +138 -8
  62. package/dist/internalCss/dark-high-contrast.css +138 -8
  63. package/dist/internalCss/dark-tritanopia.css +138 -8
  64. package/dist/internalCss/dark.css +138 -8
  65. package/dist/internalCss/light-colorblind.css +138 -8
  66. package/dist/internalCss/light-high-contrast.css +138 -8
  67. package/dist/internalCss/light-tritanopia.css +138 -8
  68. package/dist/internalCss/light.css +138 -8
  69. package/dist/styleLint/functional/themes/dark-colorblind.json +13684 -2747
  70. package/dist/styleLint/functional/themes/dark-dimmed.json +14000 -2767
  71. package/dist/styleLint/functional/themes/dark-high-contrast.json +15112 -2901
  72. package/dist/styleLint/functional/themes/dark-tritanopia.json +13673 -2764
  73. package/dist/styleLint/functional/themes/dark.json +12088 -1277
  74. package/dist/styleLint/functional/themes/light-colorblind.json +13559 -2652
  75. package/dist/styleLint/functional/themes/light-high-contrast.json +15236 -3097
  76. package/dist/styleLint/functional/themes/light-tritanopia.json +13563 -2684
  77. package/dist/styleLint/functional/themes/light.json +12044 -1207
  78. package/package.json +1 -1
  79. package/src/tokens/component/avatar.json5 +33 -0
  80. package/src/tokens/component/button.json5 +1714 -0
  81. package/src/tokens/component/header.json5 +3 -0
  82. package/src/tokens/component/label.json5 +1942 -0
  83. package/src/tokens/component/menu.json5 +24 -0
  84. package/src/tokens/component/overlay.json5 +1 -1
  85. package/src/tokens/component/selectMenu.json5 +38 -0
  86. package/src/tokens/component/sideNav.json5 +22 -0
  87. package/src/tokens/component/treeView.json5 +24 -0
  88. package/src/tokens/component/underlineNav.json5 +56 -0
  89. package/src/tokens/functional/color/control.json5 +1087 -0
  90. package/src/tokens/functional/color/data-vis.json5 +911 -41
  91. package/src/tokens/functional/color/display.json5 +2170 -0
  92. package/src/tokens/functional/color/selection.json5 +22 -0
  93. package/src/tokens/functional/shadow/shadow.json5 +478 -0
  94. package/dist/css/functional/motion/motion.css +0 -6
  95. package/dist/docs/functional/motion/motion.json +0 -66
  96. package/dist/fallbacks/functional/motion/motion.json +0 -6
  97. package/dist/figma/shadows/dark-colorblind.json +0 -1152
  98. package/dist/figma/shadows/dark-dimmed.json +0 -1152
  99. package/dist/figma/shadows/dark-high-contrast.json +0 -1152
  100. package/dist/figma/shadows/dark-tritanopia.json +0 -1152
  101. package/dist/figma/shadows/dark.json +0 -1152
  102. package/dist/figma/shadows/light-colorblind.json +0 -1052
  103. package/dist/figma/shadows/light-high-contrast.json +0 -1052
  104. package/dist/figma/shadows/light-tritanopia.json +0 -1052
  105. package/dist/figma/shadows/light.json +0 -1052
  106. package/dist/styleLint/functional/motion/motion.json +0 -66
  107. package/src/tokens/functional/color/dark/display-dark.json5 +0 -1258
  108. package/src/tokens/functional/color/dark/overrides/dark.dimmed.json5 +0 -199
  109. package/src/tokens/functional/color/dark/overrides/dark.high-contrast.json5 +0 -618
  110. package/src/tokens/functional/color/dark/overrides/dark.protanopia-deuteranopia.json5 +0 -65
  111. package/src/tokens/functional/color/dark/overrides/dark.tritanopia.json5 +0 -47
  112. package/src/tokens/functional/color/dark/patterns-dark.json5 +0 -2589
  113. package/src/tokens/functional/color/light/display-light.json5 +0 -1163
  114. package/src/tokens/functional/color/light/overrides/light.high-contrast.json5 +0 -581
  115. package/src/tokens/functional/color/light/overrides/light.protanopia-deuteranopia.json5 +0 -69
  116. package/src/tokens/functional/color/light/overrides/light.tritanopia.json5 +0 -41
  117. package/src/tokens/functional/color/light/patterns-light.json5 +0 -2583
  118. package/src/tokens/functional/motion/loading.json5 +0 -17
  119. package/src/tokens/functional/motion/patterns.json5 +0 -35
  120. package/src/tokens/functional/shadow/dark.json5 +0 -369
  121. package/src/tokens/functional/shadow/light.json5 +0 -363
package/dist/css/functional/themes/dark.css CHANGED
@@ -172,14 +172,28 @@
172
172
  --data-auburn-color-muted: #271817;
173
173
  --data-blue-color-emphasis: #0576ff;
174
174
  --data-blue-color-muted: #001a47;
175
+ --data-brown-color-emphasis: #94774c;
176
+ --data-brown-color-muted: #241c14;
177
+ --data-coral-color-emphasis: #e1430e;
178
+ --data-coral-color-muted: #351008;
175
179
  --data-gray-color-emphasis: #576270;
176
180
  --data-gray-color-muted: #1c1c1c;
177
181
  --data-green-color-emphasis: #2f6f37;
178
182
  --data-green-color-muted: #122117;
183
+ --data-lemon-color-emphasis: #977b0c;
184
+ --data-lemon-color-muted: #291d00;
185
+ --data-lime-color-emphasis: #5f892f;
186
+ --data-lime-color-muted: #141f0f;
187
+ --data-olive-color-emphasis: #7a8321;
188
+ --data-olive-color-muted: #171e0b;
179
189
  --data-orange-color-emphasis: #984b10;
180
190
  --data-orange-color-muted: #311708;
191
+ --data-pine-color-emphasis: #18915e;
192
+ --data-pine-color-muted: #082119;
181
193
  --data-pink-color-emphasis: #d34591;
182
194
  --data-pink-color-muted: #2d1524;
195
+ --data-plum-color-emphasis: #b643ef;
196
+ --data-plum-color-muted: #2a0e3f;
183
197
  --data-purple-color-emphasis: #975bf1;
184
198
  --data-purple-color-muted: #211047;
185
199
  --data-red-color-emphasis: #eb3342;
@@ -534,6 +548,40 @@
534
548
  --controlTrack-fgColor-rest: var(--fgColor-muted);
535
549
  --counter-bgColor-emphasis: var(--bgColor-neutral-emphasis);
536
550
  --counter-bgColor-muted: var(--bgColor-neutral-muted);
551
+ --data-auburn-color-gradientStop-1: var(--data-auburn-color-muted);
552
+ --data-auburn-color-gradientStop-2: #27181700;
553
+ --data-blue-color-gradientStop-1: var(--data-blue-color-muted);
554
+ --data-blue-color-gradientStop-2: #001a4700;
555
+ --data-brown-color-gradientStop-1: var(--data-brown-color-muted);
556
+ --data-brown-color-gradientStop-2: #241c1400;
557
+ --data-coral-color-gradientStop-1: var(--data-coral-color-muted);
558
+ --data-coral-color-gradientStop-2: #35100800;
559
+ --data-gray-color-gradientStop-1: var(--data-gray-color-muted);
560
+ --data-gray-color-gradientStop-2: #1c1c1c00;
561
+ --data-green-color-gradientStop-1: var(--data-green-color-muted);
562
+ --data-green-color-gradientStop-2: #12211700;
563
+ --data-lemon-color-gradientStop-1: var(--data-lemon-color-muted);
564
+ --data-lemon-color-gradientStop-2: #291d0000;
565
+ --data-lime-color-gradientStop-1: var(--data-lime-color-muted);
566
+ --data-lime-color-gradientStop-2: #141f0f00;
567
+ --data-olive-color-gradientStop-1: var(--data-olive-color-muted);
568
+ --data-olive-color-gradientStop-2: #171e0b00;
569
+ --data-orange-color-gradientStop-1: var(--data-orange-color-muted);
570
+ --data-orange-color-gradientStop-2: #31170800;
571
+ --data-pine-color-gradientStop-1: var(--data-pine-color-muted);
572
+ --data-pine-color-gradientStop-2: #08211900;
573
+ --data-pink-color-gradientStop-1: var(--data-pink-color-muted);
574
+ --data-pink-color-gradientStop-2: #2d152400;
575
+ --data-plum-color-gradientStop-1: var(--data-plum-color-muted);
576
+ --data-plum-color-gradientStop-2: #2a0e3f00;
577
+ --data-purple-color-gradientStop-1: var(--data-purple-color-muted);
578
+ --data-purple-color-gradientStop-2: #21104700;
579
+ --data-red-color-gradientStop-1: var(--data-red-color-muted);
580
+ --data-red-color-gradientStop-2: #3c061400;
581
+ --data-teal-color-gradientStop-1: var(--data-teal-color-muted);
582
+ --data-teal-color-gradientStop-2: #041f2500;
583
+ --data-yellow-color-gradientStop-1: var(--data-yellow-color-muted);
584
+ --data-yellow-color-gradientStop-2: #2e1a0000;
537
585
  --diffBlob-additionLine-bgColor: var(--bgColor-success-muted);
538
586
  --diffBlob-additionLine-fgColor: var(--fgColor-default);
539
587
  --diffBlob-additionNum-fgColor: var(--fgColor-default);
@@ -565,9 +613,9 @@
565
613
  --selection-bgColor: #1f6febb3;
566
614
  --shadow-floating-legacy: 0px 6px 12px -3px #01040966, 0px 6px 18px 0px #01040966;
567
615
  --shadow-inset: inset 0px 1px 0px 0px #0104093d;
568
- --shadow-resting-medium: 0px 3px 6px 0px #010409cc;
569
- --shadow-resting-small: 0px 1px 0px 0px #01040966;
570
- --shadow-resting-xsmall: 0px 1px 0px 0px #010409cc;
616
+ --shadow-resting-medium: 0px 1px 1px 0px #01040966, 0px 3px 6px 0px #010409cc;
617
+ --shadow-resting-small: 0px 1px 1px 0px #01040999, 0px 1px 3px 0px #01040999;
618
+ --shadow-resting-xsmall: 0px 1px 1px 0px #010409cc;
571
619
  --tooltip-bgColor: var(--bgColor-emphasis);
572
620
  --treeViewItem-leadingVisual-iconColor-rest: var(--fgColor-muted);
573
621
  --underlineNav-iconColor-rest: var(--fgColor-muted);
@@ -607,6 +655,23 @@
607
655
  --controlKnob-borderColor-disabled: var(--control-bgColor-disabled);
608
656
  --controlKnob-borderColor-rest: var(--control-borderColor-emphasis);
609
657
  --controlTrack-fgColor-disabled: var(--fgColor-onEmphasis);
658
+ --data-auburn-gradient: linear-gradient(180deg, #271817 0%, #27181700 100%);
659
+ --data-blue-gradient: linear-gradient(180deg, #001a47 0%, #001a4700 100%);
660
+ --data-brown-gradient: linear-gradient(180deg, #241c14 0%, #241c1400 100%);
661
+ --data-coral-gradient: linear-gradient(180deg, #351008 0%, #35100800 100%);
662
+ --data-gray-gradient: linear-gradient(180deg, #1c1c1c 0%, #1c1c1c00 100%);
663
+ --data-green-gradient: linear-gradient(180deg, #122117 0%, #12211700 100%);
664
+ --data-lemon-gradient: linear-gradient(180deg, #291d00 0%, #291d0000 100%);
665
+ --data-lime-gradient: linear-gradient(180deg, #141f0f 0%, #141f0f00 100%);
666
+ --data-olive-gradient: linear-gradient(180deg, #171e0b 0%, #171e0b00 100%);
667
+ --data-orange-gradient: linear-gradient(180deg, #311708 0%, #31170800 100%);
668
+ --data-pine-gradient: linear-gradient(180deg, #082119 0%, #08211900 100%);
669
+ --data-pink-gradient: linear-gradient(180deg, #2d1524 0%, #2d152400 100%);
670
+ --data-plum-gradient: linear-gradient(180deg, #2a0e3f 0%, #2a0e3f00 100%);
671
+ --data-purple-gradient: linear-gradient(180deg, #211047 0%, #21104700 100%);
672
+ --data-red-gradient: linear-gradient(180deg, #3c0614 0%, #3c061400 100%);
673
+ --data-teal-gradient: linear-gradient(180deg, #041f25 0%, #041f2500 100%);
674
+ --data-yellow-gradient: linear-gradient(180deg, #2e1a00 0%, #2e1a0000 100%);
610
675
  --diffBlob-hunkNum-fgColor-hover: var(--fgColor-onEmphasis);
611
676
  --focus-outline: 2px solid #1f6feb;
612
677
  --overlay-borderColor: var(--borderColor-muted);
@@ -621,7 +686,7 @@
621
686
  --shadow-floating-xlarge: 0px 0px 0px 1px #3d444d, 0px 32px 64px 0px #010409;
622
687
  --underlineNav-borderColor-hover: var(--borderColor-neutral-muted);
623
688
  --button-outline-borderColor-hover: var(--button-default-borderColor-hover);
624
- --button-outline-borderColor-selected: var(--button-outline-borderColor-hover);
689
+ --button-outline-borderColor-active: var(--button-outline-borderColor-hover);
625
690
  }
626
691
  @media (prefers-color-scheme: dark) {
627
692
  [data-color-mode="auto"][data-dark-theme="dark"],
@@ -796,14 +861,28 @@
796
861
  --data-auburn-color-muted: #271817;
797
862
  --data-blue-color-emphasis: #0576ff;
798
863
  --data-blue-color-muted: #001a47;
864
+ --data-brown-color-emphasis: #94774c;
865
+ --data-brown-color-muted: #241c14;
866
+ --data-coral-color-emphasis: #e1430e;
867
+ --data-coral-color-muted: #351008;
799
868
  --data-gray-color-emphasis: #576270;
800
869
  --data-gray-color-muted: #1c1c1c;
801
870
  --data-green-color-emphasis: #2f6f37;
802
871
  --data-green-color-muted: #122117;
872
+ --data-lemon-color-emphasis: #977b0c;
873
+ --data-lemon-color-muted: #291d00;
874
+ --data-lime-color-emphasis: #5f892f;
875
+ --data-lime-color-muted: #141f0f;
876
+ --data-olive-color-emphasis: #7a8321;
877
+ --data-olive-color-muted: #171e0b;
803
878
  --data-orange-color-emphasis: #984b10;
804
879
  --data-orange-color-muted: #311708;
880
+ --data-pine-color-emphasis: #18915e;
881
+ --data-pine-color-muted: #082119;
805
882
  --data-pink-color-emphasis: #d34591;
806
883
  --data-pink-color-muted: #2d1524;
884
+ --data-plum-color-emphasis: #b643ef;
885
+ --data-plum-color-muted: #2a0e3f;
807
886
  --data-purple-color-emphasis: #975bf1;
808
887
  --data-purple-color-muted: #211047;
809
888
  --data-red-color-emphasis: #eb3342;
@@ -1158,6 +1237,40 @@
1158
1237
  --controlTrack-fgColor-rest: var(--fgColor-muted);
1159
1238
  --counter-bgColor-emphasis: var(--bgColor-neutral-emphasis);
1160
1239
  --counter-bgColor-muted: var(--bgColor-neutral-muted);
1240
+ --data-auburn-color-gradientStop-1: var(--data-auburn-color-muted);
1241
+ --data-auburn-color-gradientStop-2: #27181700;
1242
+ --data-blue-color-gradientStop-1: var(--data-blue-color-muted);
1243
+ --data-blue-color-gradientStop-2: #001a4700;
1244
+ --data-brown-color-gradientStop-1: var(--data-brown-color-muted);
1245
+ --data-brown-color-gradientStop-2: #241c1400;
1246
+ --data-coral-color-gradientStop-1: var(--data-coral-color-muted);
1247
+ --data-coral-color-gradientStop-2: #35100800;
1248
+ --data-gray-color-gradientStop-1: var(--data-gray-color-muted);
1249
+ --data-gray-color-gradientStop-2: #1c1c1c00;
1250
+ --data-green-color-gradientStop-1: var(--data-green-color-muted);
1251
+ --data-green-color-gradientStop-2: #12211700;
1252
+ --data-lemon-color-gradientStop-1: var(--data-lemon-color-muted);
1253
+ --data-lemon-color-gradientStop-2: #291d0000;
1254
+ --data-lime-color-gradientStop-1: var(--data-lime-color-muted);
1255
+ --data-lime-color-gradientStop-2: #141f0f00;
1256
+ --data-olive-color-gradientStop-1: var(--data-olive-color-muted);
1257
+ --data-olive-color-gradientStop-2: #171e0b00;
1258
+ --data-orange-color-gradientStop-1: var(--data-orange-color-muted);
1259
+ --data-orange-color-gradientStop-2: #31170800;
1260
+ --data-pine-color-gradientStop-1: var(--data-pine-color-muted);
1261
+ --data-pine-color-gradientStop-2: #08211900;
1262
+ --data-pink-color-gradientStop-1: var(--data-pink-color-muted);
1263
+ --data-pink-color-gradientStop-2: #2d152400;
1264
+ --data-plum-color-gradientStop-1: var(--data-plum-color-muted);
1265
+ --data-plum-color-gradientStop-2: #2a0e3f00;
1266
+ --data-purple-color-gradientStop-1: var(--data-purple-color-muted);
1267
+ --data-purple-color-gradientStop-2: #21104700;
1268
+ --data-red-color-gradientStop-1: var(--data-red-color-muted);
1269
+ --data-red-color-gradientStop-2: #3c061400;
1270
+ --data-teal-color-gradientStop-1: var(--data-teal-color-muted);
1271
+ --data-teal-color-gradientStop-2: #041f2500;
1272
+ --data-yellow-color-gradientStop-1: var(--data-yellow-color-muted);
1273
+ --data-yellow-color-gradientStop-2: #2e1a0000;
1161
1274
  --diffBlob-additionLine-bgColor: var(--bgColor-success-muted);
1162
1275
  --diffBlob-additionLine-fgColor: var(--fgColor-default);
1163
1276
  --diffBlob-additionNum-fgColor: var(--fgColor-default);
@@ -1189,9 +1302,9 @@
1189
1302
  --selection-bgColor: #1f6febb3;
1190
1303
  --shadow-floating-legacy: 0px 6px 12px -3px #01040966, 0px 6px 18px 0px #01040966;
1191
1304
  --shadow-inset: inset 0px 1px 0px 0px #0104093d;
1192
- --shadow-resting-medium: 0px 3px 6px 0px #010409cc;
1193
- --shadow-resting-small: 0px 1px 0px 0px #01040966;
1194
- --shadow-resting-xsmall: 0px 1px 0px 0px #010409cc;
1305
+ --shadow-resting-medium: 0px 1px 1px 0px #01040966, 0px 3px 6px 0px #010409cc;
1306
+ --shadow-resting-small: 0px 1px 1px 0px #01040999, 0px 1px 3px 0px #01040999;
1307
+ --shadow-resting-xsmall: 0px 1px 1px 0px #010409cc;
1195
1308
  --tooltip-bgColor: var(--bgColor-emphasis);
1196
1309
  --treeViewItem-leadingVisual-iconColor-rest: var(--fgColor-muted);
1197
1310
  --underlineNav-iconColor-rest: var(--fgColor-muted);
@@ -1231,6 +1344,23 @@
1231
1344
  --controlKnob-borderColor-disabled: var(--control-bgColor-disabled);
1232
1345
  --controlKnob-borderColor-rest: var(--control-borderColor-emphasis);
1233
1346
  --controlTrack-fgColor-disabled: var(--fgColor-onEmphasis);
1347
+ --data-auburn-gradient: linear-gradient(180deg, #271817 0%, #27181700 100%);
1348
+ --data-blue-gradient: linear-gradient(180deg, #001a47 0%, #001a4700 100%);
1349
+ --data-brown-gradient: linear-gradient(180deg, #241c14 0%, #241c1400 100%);
1350
+ --data-coral-gradient: linear-gradient(180deg, #351008 0%, #35100800 100%);
1351
+ --data-gray-gradient: linear-gradient(180deg, #1c1c1c 0%, #1c1c1c00 100%);
1352
+ --data-green-gradient: linear-gradient(180deg, #122117 0%, #12211700 100%);
1353
+ --data-lemon-gradient: linear-gradient(180deg, #291d00 0%, #291d0000 100%);
1354
+ --data-lime-gradient: linear-gradient(180deg, #141f0f 0%, #141f0f00 100%);
1355
+ --data-olive-gradient: linear-gradient(180deg, #171e0b 0%, #171e0b00 100%);
1356
+ --data-orange-gradient: linear-gradient(180deg, #311708 0%, #31170800 100%);
1357
+ --data-pine-gradient: linear-gradient(180deg, #082119 0%, #08211900 100%);
1358
+ --data-pink-gradient: linear-gradient(180deg, #2d1524 0%, #2d152400 100%);
1359
+ --data-plum-gradient: linear-gradient(180deg, #2a0e3f 0%, #2a0e3f00 100%);
1360
+ --data-purple-gradient: linear-gradient(180deg, #211047 0%, #21104700 100%);
1361
+ --data-red-gradient: linear-gradient(180deg, #3c0614 0%, #3c061400 100%);
1362
+ --data-teal-gradient: linear-gradient(180deg, #041f25 0%, #041f2500 100%);
1363
+ --data-yellow-gradient: linear-gradient(180deg, #2e1a00 0%, #2e1a0000 100%);
1234
1364
  --diffBlob-hunkNum-fgColor-hover: var(--fgColor-onEmphasis);
1235
1365
  --focus-outline: 2px solid #1f6feb;
1236
1366
  --overlay-borderColor: var(--borderColor-muted);
@@ -1245,6 +1375,6 @@
1245
1375
  --shadow-floating-xlarge: 0px 0px 0px 1px #3d444d, 0px 32px 64px 0px #010409;
1246
1376
  --underlineNav-borderColor-hover: var(--borderColor-neutral-muted);
1247
1377
  --button-outline-borderColor-hover: var(--button-default-borderColor-hover);
1248
- --button-outline-borderColor-selected: var(--button-outline-borderColor-hover);
1378
+ --button-outline-borderColor-active: var(--button-outline-borderColor-hover);
1249
1379
  }
1250
1380
  }
package/dist/css/functional/themes/light-colorblind.css CHANGED
@@ -159,14 +159,28 @@
159
159
  --data-auburn-color-muted: #f2e9e9;
160
160
  --data-blue-color-emphasis: #006edb;
161
161
  --data-blue-color-muted: #d1f0ff;
162
+ --data-brown-color-emphasis: #856d4c;
163
+ --data-brown-color-muted: #eeeae2;
164
+ --data-coral-color-emphasis: #d43511;
165
+ --data-coral-color-muted: #ffe5db;
162
166
  --data-gray-color-emphasis: #808fa3;
163
167
  --data-gray-color-muted: #e8ecf2;
164
168
  --data-green-color-emphasis: #30a147;
165
169
  --data-green-color-muted: #caf7ca;
170
+ --data-lemon-color-emphasis: #866e04;
171
+ --data-lemon-color-muted: #f7eea1;
172
+ --data-lime-color-emphasis: #527a29;
173
+ --data-lime-color-muted: #e3f2b5;
174
+ --data-olive-color-emphasis: #64762d;
175
+ --data-olive-color-muted: #f0f0ad;
166
176
  --data-orange-color-emphasis: #eb670f;
167
177
  --data-orange-color-muted: #ffe7d1;
178
+ --data-pine-color-emphasis: #167e53;
179
+ --data-pine-color-muted: #bff8db;
168
180
  --data-pink-color-emphasis: #ce2c85;
169
181
  --data-pink-color-muted: #ffe5f1;
182
+ --data-plum-color-emphasis: #a830e8;
183
+ --data-plum-color-muted: #f8e5ff;
170
184
  --data-purple-color-emphasis: #894ceb;
171
185
  --data-purple-color-muted: #f1e5ff;
172
186
  --data-red-color-emphasis: #df0c24;
@@ -414,7 +428,7 @@
414
428
  --selectMenu-bgColor-active: #b6e3ff;
415
429
  --selectMenu-borderColor: #ffffff00;
416
430
  --shadow-floating-legacy: 0px 6px 12px -3px #25292e0a, 0px 6px 18px 0px #25292e1f;
417
- --shadow-resting-medium: 0px 3px 6px 0px #25292e1f;
431
+ --shadow-resting-medium: 0px 1px 1px 0px #25292e1a, 0px 3px 6px 0px #25292e1f;
418
432
  --skeletonLoader-bgColor: #818b981a;
419
433
  --topicTag-borderColor: #ffffff00;
420
434
  --treeViewItem-leadingVisual-iconColor-rest: #54aeff;
@@ -532,6 +546,40 @@
532
546
  --controlTrack-borderColor-rest: var(--borderColor-default);
533
547
  --counter-bgColor-emphasis: var(--bgColor-neutral-emphasis);
534
548
  --counter-bgColor-muted: var(--bgColor-neutral-muted);
549
+ --data-auburn-color-gradientStop-1: var(--data-auburn-color-muted);
550
+ --data-auburn-color-gradientStop-2: #f2e9e900;
551
+ --data-blue-color-gradientStop-1: var(--data-blue-color-muted);
552
+ --data-blue-color-gradientStop-2: #d1f0ff00;
553
+ --data-brown-color-gradientStop-1: var(--data-brown-color-muted);
554
+ --data-brown-color-gradientStop-2: #eeeae200;
555
+ --data-coral-color-gradientStop-1: var(--data-coral-color-muted);
556
+ --data-coral-color-gradientStop-2: #ffe5db00;
557
+ --data-gray-color-gradientStop-1: var(--data-gray-color-muted);
558
+ --data-gray-color-gradientStop-2: #e8ecf200;
559
+ --data-green-color-gradientStop-1: var(--data-green-color-muted);
560
+ --data-green-color-gradientStop-2: #caf7ca00;
561
+ --data-lemon-color-gradientStop-1: var(--data-lemon-color-muted);
562
+ --data-lemon-color-gradientStop-2: #f7eea100;
563
+ --data-lime-color-gradientStop-1: var(--data-lime-color-muted);
564
+ --data-lime-color-gradientStop-2: #e3f2b500;
565
+ --data-olive-color-gradientStop-1: var(--data-olive-color-muted);
566
+ --data-olive-color-gradientStop-2: #f0f0ad00;
567
+ --data-orange-color-gradientStop-1: var(--data-orange-color-muted);
568
+ --data-orange-color-gradientStop-2: #ffe7d100;
569
+ --data-pine-color-gradientStop-1: var(--data-pine-color-muted);
570
+ --data-pine-color-gradientStop-2: #bff8db00;
571
+ --data-pink-color-gradientStop-1: var(--data-pink-color-muted);
572
+ --data-pink-color-gradientStop-2: #ffe5f100;
573
+ --data-plum-color-gradientStop-1: var(--data-plum-color-muted);
574
+ --data-plum-color-gradientStop-2: #f8e5ff00;
575
+ --data-purple-color-gradientStop-1: var(--data-purple-color-muted);
576
+ --data-purple-color-gradientStop-2: #f1e5ff00;
577
+ --data-red-color-gradientStop-1: var(--data-red-color-muted);
578
+ --data-red-color-gradientStop-2: #ffe2e000;
579
+ --data-teal-color-gradientStop-1: var(--data-teal-color-muted);
580
+ --data-teal-color-gradientStop-2: #c7f5ef00;
581
+ --data-yellow-color-gradientStop-1: var(--data-yellow-color-muted);
582
+ --data-yellow-color-gradientStop-2: #ffec9e00;
535
583
  --diffBlob-additionLine-bgColor: var(--bgColor-success-muted);
536
584
  --diffBlob-deletionLine-bgColor: var(--bgColor-danger-muted);
537
585
  --diffBlob-emptyLine-bgColor: var(--bgColor-muted);
@@ -553,8 +601,8 @@
553
601
  --page-header-bgColor: var(--bgColor-muted);
554
602
  --selection-bgColor: #0969da33;
555
603
  --shadow-inset: inset 0px 1px 0px 0px #1f23280a;
556
- --shadow-resting-small: 0px 1px 0px 0px #1f23280a;
557
- --shadow-resting-xsmall: 0px 1px 0px 0px #1f23281a;
604
+ --shadow-resting-small: 0px 1px 1px 0px #1f23280f, 0px 1px 3px 0px #1f23280f;
605
+ --shadow-resting-xsmall: 0px 1px 1px 0px #1f23280f;
558
606
  --sideNav-bgColor-selected: #ffffff;
559
607
  --timelineBadge-bgColor: var(--bgColor-muted);
560
608
  --tooltip-bgColor: var(--bgColor-emphasis);
@@ -574,7 +622,6 @@
574
622
  --button-default-bgColor-disabled: var(--control-bgColor-disabled);
575
623
  --button-default-borderColor-active: var(--control-borderColor-rest);
576
624
  --button-default-borderColor-disabled: var(--control-borderColor-disabled);
577
- --button-default-borderColor-hover: var(--control-borderColor-rest);
578
625
  --button-default-borderColor-rest: var(--control-borderColor-rest);
579
626
  --button-invisible-fgColor-disabled: var(--control-fgColor-disabled);
580
627
  --button-invisible-iconColor-disabled: var(--control-fgColor-disabled);
@@ -601,6 +648,23 @@
601
648
  --controlKnob-borderColor-disabled: var(--control-bgColor-disabled);
602
649
  --controlKnob-borderColor-rest: var(--control-borderColor-emphasis);
603
650
  --controlTrack-fgColor-disabled: var(--fgColor-onEmphasis);
651
+ --data-auburn-gradient: linear-gradient(180deg, #f2e9e9 0%, #f2e9e900 100%);
652
+ --data-blue-gradient: linear-gradient(180deg, #d1f0ff 0%, #d1f0ff00 100%);
653
+ --data-brown-gradient: linear-gradient(180deg, #eeeae2 0%, #eeeae200 100%);
654
+ --data-coral-gradient: linear-gradient(180deg, #ffe5db 0%, #ffe5db00 100%);
655
+ --data-gray-gradient: linear-gradient(180deg, #e8ecf2 0%, #e8ecf200 100%);
656
+ --data-green-gradient: linear-gradient(180deg, #caf7ca 0%, #caf7ca00 100%);
657
+ --data-lemon-gradient: linear-gradient(180deg, #f7eea1 0%, #f7eea100 100%);
658
+ --data-lime-gradient: linear-gradient(180deg, #e3f2b5 0%, #e3f2b500 100%);
659
+ --data-olive-gradient: linear-gradient(180deg, #f0f0ad 0%, #f0f0ad00 100%);
660
+ --data-orange-gradient: linear-gradient(180deg, #ffe7d1 0%, #ffe7d100 100%);
661
+ --data-pine-gradient: linear-gradient(180deg, #bff8db 0%, #bff8db00 100%);
662
+ --data-pink-gradient: linear-gradient(180deg, #ffe5f1 0%, #ffe5f100 100%);
663
+ --data-plum-gradient: linear-gradient(180deg, #f8e5ff 0%, #f8e5ff00 100%);
664
+ --data-purple-gradient: linear-gradient(180deg, #f1e5ff 0%, #f1e5ff00 100%);
665
+ --data-red-gradient: linear-gradient(180deg, #ffe2e0 0%, #ffe2e000 100%);
666
+ --data-teal-gradient: linear-gradient(180deg, #c7f5ef 0%, #c7f5ef00 100%);
667
+ --data-yellow-gradient: linear-gradient(180deg, #ffec9e 0%, #ffec9e00 100%);
604
668
  --diffBlob-additionLine-fgColor: var(--fgColor-default);
605
669
  --diffBlob-additionNum-fgColor: var(--fgColor-default);
606
670
  --diffBlob-additionWord-fgColor: var(--fgColor-default);
@@ -616,6 +680,7 @@
616
680
  --underlineNav-borderColor-hover: var(--borderColor-muted);
617
681
  --border-neutral-muted: 0.0625rem solid #d1d9e0b3;
618
682
  --button-danger-borderColor-active: var(--button-danger-borderColor-hover);
683
+ --button-default-borderColor-hover: var(--button-default-borderColor-rest);
619
684
  --button-outline-borderColor-hover: var(--button-primary-borderColor-hover);
620
685
  --shadow-floating-large: 0px 0px 0px 1px #d1d9e0, 0px 40px 80px 0px #25292e3d;
621
686
  --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;
@@ -783,14 +848,28 @@
783
848
  --data-auburn-color-muted: #f2e9e9;
784
849
  --data-blue-color-emphasis: #006edb;
785
850
  --data-blue-color-muted: #d1f0ff;
851
+ --data-brown-color-emphasis: #856d4c;
852
+ --data-brown-color-muted: #eeeae2;
853
+ --data-coral-color-emphasis: #d43511;
854
+ --data-coral-color-muted: #ffe5db;
786
855
  --data-gray-color-emphasis: #808fa3;
787
856
  --data-gray-color-muted: #e8ecf2;
788
857
  --data-green-color-emphasis: #30a147;
789
858
  --data-green-color-muted: #caf7ca;
859
+ --data-lemon-color-emphasis: #866e04;
860
+ --data-lemon-color-muted: #f7eea1;
861
+ --data-lime-color-emphasis: #527a29;
862
+ --data-lime-color-muted: #e3f2b5;
863
+ --data-olive-color-emphasis: #64762d;
864
+ --data-olive-color-muted: #f0f0ad;
790
865
  --data-orange-color-emphasis: #eb670f;
791
866
  --data-orange-color-muted: #ffe7d1;
867
+ --data-pine-color-emphasis: #167e53;
868
+ --data-pine-color-muted: #bff8db;
792
869
  --data-pink-color-emphasis: #ce2c85;
793
870
  --data-pink-color-muted: #ffe5f1;
871
+ --data-plum-color-emphasis: #a830e8;
872
+ --data-plum-color-muted: #f8e5ff;
794
873
  --data-purple-color-emphasis: #894ceb;
795
874
  --data-purple-color-muted: #f1e5ff;
796
875
  --data-red-color-emphasis: #df0c24;
@@ -1038,7 +1117,7 @@
1038
1117
  --selectMenu-bgColor-active: #b6e3ff;
1039
1118
  --selectMenu-borderColor: #ffffff00;
1040
1119
  --shadow-floating-legacy: 0px 6px 12px -3px #25292e0a, 0px 6px 18px 0px #25292e1f;
1041
- --shadow-resting-medium: 0px 3px 6px 0px #25292e1f;
1120
+ --shadow-resting-medium: 0px 1px 1px 0px #25292e1a, 0px 3px 6px 0px #25292e1f;
1042
1121
  --skeletonLoader-bgColor: #818b981a;
1043
1122
  --topicTag-borderColor: #ffffff00;
1044
1123
  --treeViewItem-leadingVisual-iconColor-rest: #54aeff;
@@ -1156,6 +1235,40 @@
1156
1235
  --controlTrack-borderColor-rest: var(--borderColor-default);
1157
1236
  --counter-bgColor-emphasis: var(--bgColor-neutral-emphasis);
1158
1237
  --counter-bgColor-muted: var(--bgColor-neutral-muted);
1238
+ --data-auburn-color-gradientStop-1: var(--data-auburn-color-muted);
1239
+ --data-auburn-color-gradientStop-2: #f2e9e900;
1240
+ --data-blue-color-gradientStop-1: var(--data-blue-color-muted);
1241
+ --data-blue-color-gradientStop-2: #d1f0ff00;
1242
+ --data-brown-color-gradientStop-1: var(--data-brown-color-muted);
1243
+ --data-brown-color-gradientStop-2: #eeeae200;
1244
+ --data-coral-color-gradientStop-1: var(--data-coral-color-muted);
1245
+ --data-coral-color-gradientStop-2: #ffe5db00;
1246
+ --data-gray-color-gradientStop-1: var(--data-gray-color-muted);
1247
+ --data-gray-color-gradientStop-2: #e8ecf200;
1248
+ --data-green-color-gradientStop-1: var(--data-green-color-muted);
1249
+ --data-green-color-gradientStop-2: #caf7ca00;
1250
+ --data-lemon-color-gradientStop-1: var(--data-lemon-color-muted);
1251
+ --data-lemon-color-gradientStop-2: #f7eea100;
1252
+ --data-lime-color-gradientStop-1: var(--data-lime-color-muted);
1253
+ --data-lime-color-gradientStop-2: #e3f2b500;
1254
+ --data-olive-color-gradientStop-1: var(--data-olive-color-muted);
1255
+ --data-olive-color-gradientStop-2: #f0f0ad00;
1256
+ --data-orange-color-gradientStop-1: var(--data-orange-color-muted);
1257
+ --data-orange-color-gradientStop-2: #ffe7d100;
1258
+ --data-pine-color-gradientStop-1: var(--data-pine-color-muted);
1259
+ --data-pine-color-gradientStop-2: #bff8db00;
1260
+ --data-pink-color-gradientStop-1: var(--data-pink-color-muted);
1261
+ --data-pink-color-gradientStop-2: #ffe5f100;
1262
+ --data-plum-color-gradientStop-1: var(--data-plum-color-muted);
1263
+ --data-plum-color-gradientStop-2: #f8e5ff00;
1264
+ --data-purple-color-gradientStop-1: var(--data-purple-color-muted);
1265
+ --data-purple-color-gradientStop-2: #f1e5ff00;
1266
+ --data-red-color-gradientStop-1: var(--data-red-color-muted);
1267
+ --data-red-color-gradientStop-2: #ffe2e000;
1268
+ --data-teal-color-gradientStop-1: var(--data-teal-color-muted);
1269
+ --data-teal-color-gradientStop-2: #c7f5ef00;
1270
+ --data-yellow-color-gradientStop-1: var(--data-yellow-color-muted);
1271
+ --data-yellow-color-gradientStop-2: #ffec9e00;
1159
1272
  --diffBlob-additionLine-bgColor: var(--bgColor-success-muted);
1160
1273
  --diffBlob-deletionLine-bgColor: var(--bgColor-danger-muted);
1161
1274
  --diffBlob-emptyLine-bgColor: var(--bgColor-muted);
@@ -1177,8 +1290,8 @@
1177
1290
  --page-header-bgColor: var(--bgColor-muted);
1178
1291
  --selection-bgColor: #0969da33;
1179
1292
  --shadow-inset: inset 0px 1px 0px 0px #1f23280a;
1180
- --shadow-resting-small: 0px 1px 0px 0px #1f23280a;
1181
- --shadow-resting-xsmall: 0px 1px 0px 0px #1f23281a;
1293
+ --shadow-resting-small: 0px 1px 1px 0px #1f23280f, 0px 1px 3px 0px #1f23280f;
1294
+ --shadow-resting-xsmall: 0px 1px 1px 0px #1f23280f;
1182
1295
  --sideNav-bgColor-selected: #ffffff;
1183
1296
  --timelineBadge-bgColor: var(--bgColor-muted);
1184
1297
  --tooltip-bgColor: var(--bgColor-emphasis);
@@ -1198,7 +1311,6 @@
1198
1311
  --button-default-bgColor-disabled: var(--control-bgColor-disabled);
1199
1312
  --button-default-borderColor-active: var(--control-borderColor-rest);
1200
1313
  --button-default-borderColor-disabled: var(--control-borderColor-disabled);
1201
- --button-default-borderColor-hover: var(--control-borderColor-rest);
1202
1314
  --button-default-borderColor-rest: var(--control-borderColor-rest);
1203
1315
  --button-invisible-fgColor-disabled: var(--control-fgColor-disabled);
1204
1316
  --button-invisible-iconColor-disabled: var(--control-fgColor-disabled);
@@ -1225,6 +1337,23 @@
1225
1337
  --controlKnob-borderColor-disabled: var(--control-bgColor-disabled);
1226
1338
  --controlKnob-borderColor-rest: var(--control-borderColor-emphasis);
1227
1339
  --controlTrack-fgColor-disabled: var(--fgColor-onEmphasis);
1340
+ --data-auburn-gradient: linear-gradient(180deg, #f2e9e9 0%, #f2e9e900 100%);
1341
+ --data-blue-gradient: linear-gradient(180deg, #d1f0ff 0%, #d1f0ff00 100%);
1342
+ --data-brown-gradient: linear-gradient(180deg, #eeeae2 0%, #eeeae200 100%);
1343
+ --data-coral-gradient: linear-gradient(180deg, #ffe5db 0%, #ffe5db00 100%);
1344
+ --data-gray-gradient: linear-gradient(180deg, #e8ecf2 0%, #e8ecf200 100%);
1345
+ --data-green-gradient: linear-gradient(180deg, #caf7ca 0%, #caf7ca00 100%);
1346
+ --data-lemon-gradient: linear-gradient(180deg, #f7eea1 0%, #f7eea100 100%);
1347
+ --data-lime-gradient: linear-gradient(180deg, #e3f2b5 0%, #e3f2b500 100%);
1348
+ --data-olive-gradient: linear-gradient(180deg, #f0f0ad 0%, #f0f0ad00 100%);
1349
+ --data-orange-gradient: linear-gradient(180deg, #ffe7d1 0%, #ffe7d100 100%);
1350
+ --data-pine-gradient: linear-gradient(180deg, #bff8db 0%, #bff8db00 100%);
1351
+ --data-pink-gradient: linear-gradient(180deg, #ffe5f1 0%, #ffe5f100 100%);
1352
+ --data-plum-gradient: linear-gradient(180deg, #f8e5ff 0%, #f8e5ff00 100%);
1353
+ --data-purple-gradient: linear-gradient(180deg, #f1e5ff 0%, #f1e5ff00 100%);
1354
+ --data-red-gradient: linear-gradient(180deg, #ffe2e0 0%, #ffe2e000 100%);
1355
+ --data-teal-gradient: linear-gradient(180deg, #c7f5ef 0%, #c7f5ef00 100%);
1356
+ --data-yellow-gradient: linear-gradient(180deg, #ffec9e 0%, #ffec9e00 100%);
1228
1357
  --diffBlob-additionLine-fgColor: var(--fgColor-default);
1229
1358
  --diffBlob-additionNum-fgColor: var(--fgColor-default);
1230
1359
  --diffBlob-additionWord-fgColor: var(--fgColor-default);
@@ -1240,6 +1369,7 @@
1240
1369
  --underlineNav-borderColor-hover: var(--borderColor-muted);
1241
1370
  --border-neutral-muted: 0.0625rem solid #d1d9e0b3;
1242
1371
  --button-danger-borderColor-active: var(--button-danger-borderColor-hover);
1372
+ --button-default-borderColor-hover: var(--button-default-borderColor-rest);
1243
1373
  --button-outline-borderColor-hover: var(--button-primary-borderColor-hover);
1244
1374
  --shadow-floating-large: 0px 0px 0px 1px #d1d9e0, 0px 40px 80px 0px #25292e3d;
1245
1375
  --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;