@primer/primitives 8.1.1-rc.af82f929 → 8.2.0-rc.10c59ac4

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 (63) hide show
  1. package/dist/css/base/size/size.css +2 -0
  2. package/dist/css/functional/themes/dark-colorblind.css +20 -0
  3. package/dist/css/functional/themes/dark-dimmed.css +20 -0
  4. package/dist/css/functional/themes/dark-high-contrast.css +20 -0
  5. package/dist/css/functional/themes/dark-tritanopia.css +20 -0
  6. package/dist/css/functional/themes/dark.css +20 -0
  7. package/dist/css/functional/themes/light-colorblind.css +20 -0
  8. package/dist/css/functional/themes/light-high-contrast.css +20 -0
  9. package/dist/css/functional/themes/light-tritanopia.css +20 -0
  10. package/dist/css/functional/themes/light.css +20 -0
  11. package/dist/deprecated/size.json +8 -0
  12. package/dist/docs/base/size/size.json +50 -0
  13. package/dist/docs/functional/size/size.json +12 -0
  14. package/dist/docs/functional/themes/dark-colorblind.json +300 -10
  15. package/dist/docs/functional/themes/dark-dimmed.json +300 -10
  16. package/dist/docs/functional/themes/dark-high-contrast.json +300 -10
  17. package/dist/docs/functional/themes/dark-tritanopia.json +300 -10
  18. package/dist/docs/functional/themes/dark.json +300 -10
  19. package/dist/docs/functional/themes/light-colorblind.json +300 -10
  20. package/dist/docs/functional/themes/light-high-contrast.json +300 -10
  21. package/dist/docs/functional/themes/light-tritanopia.json +300 -10
  22. package/dist/docs/functional/themes/light.json +300 -10
  23. package/dist/docs/functional/typography/typography.json +6 -0
  24. package/dist/fallbacks/base/size/size.json +2 -0
  25. package/dist/figma/dimension/dimension.json +20 -0
  26. package/dist/figma/themes/dark-colorblind.json +160 -0
  27. package/dist/figma/themes/dark-dimmed.json +160 -0
  28. package/dist/figma/themes/dark-high-contrast.json +160 -0
  29. package/dist/figma/themes/dark-tritanopia.json +160 -0
  30. package/dist/figma/themes/dark.json +160 -0
  31. package/dist/figma/themes/light-colorblind.json +160 -0
  32. package/dist/figma/themes/light-high-contrast.json +160 -0
  33. package/dist/figma/themes/light-tritanopia.json +160 -0
  34. package/dist/figma/themes/light.json +160 -0
  35. package/dist/figma/typography/typography.json +1 -1
  36. package/dist/internalCss/dark-colorblind.css +20 -0
  37. package/dist/internalCss/dark-dimmed.css +20 -0
  38. package/dist/internalCss/dark-high-contrast.css +20 -0
  39. package/dist/internalCss/dark-tritanopia.css +20 -0
  40. package/dist/internalCss/dark.css +20 -0
  41. package/dist/internalCss/light-colorblind.css +20 -0
  42. package/dist/internalCss/light-high-contrast.css +20 -0
  43. package/dist/internalCss/light-tritanopia.css +20 -0
  44. package/dist/internalCss/light.css +20 -0
  45. package/dist/styleLint/base/size/size.json +50 -0
  46. package/dist/styleLint/functional/size/size.json +12 -0
  47. package/dist/styleLint/functional/themes/dark-colorblind.json +300 -10
  48. package/dist/styleLint/functional/themes/dark-dimmed.json +300 -10
  49. package/dist/styleLint/functional/themes/dark-high-contrast.json +300 -10
  50. package/dist/styleLint/functional/themes/dark-tritanopia.json +300 -10
  51. package/dist/styleLint/functional/themes/dark.json +300 -10
  52. package/dist/styleLint/functional/themes/light-colorblind.json +300 -10
  53. package/dist/styleLint/functional/themes/light-high-contrast.json +300 -10
  54. package/dist/styleLint/functional/themes/light-tritanopia.json +300 -10
  55. package/dist/styleLint/functional/themes/light.json +300 -10
  56. package/dist/styleLint/functional/typography/typography.json +6 -0
  57. package/package.json +1 -1
  58. package/src/schemas/baseToken.ts +1 -0
  59. package/src/tokens/base/size/size.json +20 -0
  60. package/src/tokens/functional/color/dark/data-vis-dark.json5 +220 -80
  61. package/src/tokens/functional/color/light/data-vis-light.json5 +220 -80
  62. package/src/tokens/functional/size/size.json +6 -0
  63. package/src/tokens/functional/typography/typography.json +3 -0
package/dist/css/base/size/size.css CHANGED
@@ -1,5 +1,7 @@
1
1
  :root {
2
+ --base-size-2: 0.125rem;
2
3
  --base-size-4: 0.25rem;
4
+ --base-size-6: 0.375rem;
3
5
  --base-size-8: 0.5rem;
4
6
  --base-size-12: 0.75rem;
5
7
  --base-size-16: 1rem;
package/dist/css/functional/themes/dark-colorblind.css CHANGED
@@ -43,15 +43,25 @@
43
43
  --headerSearch-bgColor: #0d1117;
44
44
  --headerSearch-borderColor: #30363d;
45
45
  --data-blue-color: #0576ff;
46
+ --data-blue-color-muted: #001a47;
46
47
  --data-auburn-color: #a86f6b;
48
+ --data-auburn-color-muted: #271817;
47
49
  --data-orange-color: #984b10;
50
+ --data-orange-color-muted: #311708;
48
51
  --data-yellow-color: #895906;
52
+ --data-yellow-color-muted: #2e1a00;
49
53
  --data-green-color: #2f6f37;
54
+ --data-green-color-muted: #122117;
50
55
  --data-teal-color: #106c70;
56
+ --data-teal-color-muted: #041f25;
51
57
  --data-purple-color: #975bf1;
58
+ --data-purple-color-muted: #211047;
52
59
  --data-pink-color: #d34591;
60
+ --data-pink-color-muted: #2d1524;
53
61
  --data-red-color: #eb3342;
62
+ --data-red-color-muted: #3c0614;
54
63
  --data-gray-color: #576270;
64
+ --data-gray-color-muted: #1c1c1c;
55
65
  --display-blue-bgColor-muted: #001a47;
56
66
  --display-blue-bgColor-emphasis: #0576ff;
57
67
  --display-blue-fgColor: #4da0ff;
@@ -596,15 +606,25 @@
596
606
  --headerSearch-bgColor: #0d1117;
597
607
  --headerSearch-borderColor: #30363d;
598
608
  --data-blue-color: #0576ff;
609
+ --data-blue-color-muted: #001a47;
599
610
  --data-auburn-color: #a86f6b;
611
+ --data-auburn-color-muted: #271817;
600
612
  --data-orange-color: #984b10;
613
+ --data-orange-color-muted: #311708;
601
614
  --data-yellow-color: #895906;
615
+ --data-yellow-color-muted: #2e1a00;
602
616
  --data-green-color: #2f6f37;
617
+ --data-green-color-muted: #122117;
603
618
  --data-teal-color: #106c70;
619
+ --data-teal-color-muted: #041f25;
604
620
  --data-purple-color: #975bf1;
621
+ --data-purple-color-muted: #211047;
605
622
  --data-pink-color: #d34591;
623
+ --data-pink-color-muted: #2d1524;
606
624
  --data-red-color: #eb3342;
625
+ --data-red-color-muted: #3c0614;
607
626
  --data-gray-color: #576270;
627
+ --data-gray-color-muted: #1c1c1c;
608
628
  --display-blue-bgColor-muted: #001a47;
609
629
  --display-blue-bgColor-emphasis: #0576ff;
610
630
  --display-blue-fgColor: #4da0ff;
package/dist/css/functional/themes/dark-dimmed.css CHANGED
@@ -43,15 +43,25 @@
43
43
  --headerSearch-bgColor: #22272e;
44
44
  --headerSearch-borderColor: #444c56;
45
45
  --data-blue-color: #0576ff;
46
+ --data-blue-color-muted: #001a47;
46
47
  --data-auburn-color: #a86f6b;
48
+ --data-auburn-color-muted: #271817;
47
49
  --data-orange-color: #984b10;
50
+ --data-orange-color-muted: #311708;
48
51
  --data-yellow-color: #895906;
52
+ --data-yellow-color-muted: #2e1a00;
49
53
  --data-green-color: #2f6f37;
54
+ --data-green-color-muted: #122117;
50
55
  --data-teal-color: #106c70;
56
+ --data-teal-color-muted: #041f25;
51
57
  --data-purple-color: #975bf1;
58
+ --data-purple-color-muted: #211047;
52
59
  --data-pink-color: #d34591;
60
+ --data-pink-color-muted: #2d1524;
53
61
  --data-red-color: #eb3342;
62
+ --data-red-color-muted: #3c0614;
54
63
  --data-gray-color: #576270;
64
+ --data-gray-color-muted: #1c1c1c;
55
65
  --display-blue-bgColor-muted: #001a47;
56
66
  --display-blue-bgColor-emphasis: #0576ff;
57
67
  --display-blue-fgColor: #4da0ff;
@@ -596,15 +606,25 @@
596
606
  --headerSearch-bgColor: #22272e;
597
607
  --headerSearch-borderColor: #444c56;
598
608
  --data-blue-color: #0576ff;
609
+ --data-blue-color-muted: #001a47;
599
610
  --data-auburn-color: #a86f6b;
611
+ --data-auburn-color-muted: #271817;
600
612
  --data-orange-color: #984b10;
613
+ --data-orange-color-muted: #311708;
601
614
  --data-yellow-color: #895906;
615
+ --data-yellow-color-muted: #2e1a00;
602
616
  --data-green-color: #2f6f37;
617
+ --data-green-color-muted: #122117;
603
618
  --data-teal-color: #106c70;
619
+ --data-teal-color-muted: #041f25;
604
620
  --data-purple-color: #975bf1;
621
+ --data-purple-color-muted: #211047;
605
622
  --data-pink-color: #d34591;
623
+ --data-pink-color-muted: #2d1524;
606
624
  --data-red-color: #eb3342;
625
+ --data-red-color-muted: #3c0614;
607
626
  --data-gray-color: #576270;
627
+ --data-gray-color-muted: #1c1c1c;
608
628
  --display-blue-bgColor-muted: #001a47;
609
629
  --display-blue-bgColor-emphasis: #0576ff;
610
630
  --display-blue-fgColor: #4da0ff;
package/dist/css/functional/themes/dark-high-contrast.css CHANGED
@@ -43,15 +43,25 @@
43
43
  --headerSearch-bgColor: #0a0c10;
44
44
  --headerSearch-borderColor: #525964;
45
45
  --data-blue-color: #0576ff;
46
+ --data-blue-color-muted: #001a47;
46
47
  --data-auburn-color: #a86f6b;
48
+ --data-auburn-color-muted: #271817;
47
49
  --data-orange-color: #984b10;
50
+ --data-orange-color-muted: #311708;
48
51
  --data-yellow-color: #895906;
52
+ --data-yellow-color-muted: #2e1a00;
49
53
  --data-green-color: #2f6f37;
54
+ --data-green-color-muted: #122117;
50
55
  --data-teal-color: #106c70;
56
+ --data-teal-color-muted: #041f25;
51
57
  --data-purple-color: #975bf1;
58
+ --data-purple-color-muted: #211047;
52
59
  --data-pink-color: #d34591;
60
+ --data-pink-color-muted: #2d1524;
53
61
  --data-red-color: #eb3342;
62
+ --data-red-color-muted: #3c0614;
54
63
  --data-gray-color: #576270;
64
+ --data-gray-color-muted: #1c1c1c;
55
65
  --display-blue-bgColor-muted: #001a47;
56
66
  --display-blue-bgColor-emphasis: #0576ff;
57
67
  --display-blue-fgColor: #4da0ff;
@@ -596,15 +606,25 @@
596
606
  --headerSearch-bgColor: #0a0c10;
597
607
  --headerSearch-borderColor: #525964;
598
608
  --data-blue-color: #0576ff;
609
+ --data-blue-color-muted: #001a47;
599
610
  --data-auburn-color: #a86f6b;
611
+ --data-auburn-color-muted: #271817;
600
612
  --data-orange-color: #984b10;
613
+ --data-orange-color-muted: #311708;
601
614
  --data-yellow-color: #895906;
615
+ --data-yellow-color-muted: #2e1a00;
602
616
  --data-green-color: #2f6f37;
617
+ --data-green-color-muted: #122117;
603
618
  --data-teal-color: #106c70;
619
+ --data-teal-color-muted: #041f25;
604
620
  --data-purple-color: #975bf1;
621
+ --data-purple-color-muted: #211047;
605
622
  --data-pink-color: #d34591;
623
+ --data-pink-color-muted: #2d1524;
606
624
  --data-red-color: #eb3342;
625
+ --data-red-color-muted: #3c0614;
607
626
  --data-gray-color: #576270;
627
+ --data-gray-color-muted: #1c1c1c;
608
628
  --display-blue-bgColor-muted: #001a47;
609
629
  --display-blue-bgColor-emphasis: #0576ff;
610
630
  --display-blue-fgColor: #4da0ff;
package/dist/css/functional/themes/dark-tritanopia.css CHANGED
@@ -43,15 +43,25 @@
43
43
  --headerSearch-bgColor: #0d1117;
44
44
  --headerSearch-borderColor: #30363d;
45
45
  --data-blue-color: #0576ff;
46
+ --data-blue-color-muted: #001a47;
46
47
  --data-auburn-color: #a86f6b;
48
+ --data-auburn-color-muted: #271817;
47
49
  --data-orange-color: #984b10;
50
+ --data-orange-color-muted: #311708;
48
51
  --data-yellow-color: #895906;
52
+ --data-yellow-color-muted: #2e1a00;
49
53
  --data-green-color: #2f6f37;
54
+ --data-green-color-muted: #122117;
50
55
  --data-teal-color: #106c70;
56
+ --data-teal-color-muted: #041f25;
51
57
  --data-purple-color: #975bf1;
58
+ --data-purple-color-muted: #211047;
52
59
  --data-pink-color: #d34591;
60
+ --data-pink-color-muted: #2d1524;
53
61
  --data-red-color: #eb3342;
62
+ --data-red-color-muted: #3c0614;
54
63
  --data-gray-color: #576270;
64
+ --data-gray-color-muted: #1c1c1c;
55
65
  --display-blue-bgColor-muted: #001a47;
56
66
  --display-blue-bgColor-emphasis: #0576ff;
57
67
  --display-blue-fgColor: #4da0ff;
@@ -596,15 +606,25 @@
596
606
  --headerSearch-bgColor: #0d1117;
597
607
  --headerSearch-borderColor: #30363d;
598
608
  --data-blue-color: #0576ff;
609
+ --data-blue-color-muted: #001a47;
599
610
  --data-auburn-color: #a86f6b;
611
+ --data-auburn-color-muted: #271817;
600
612
  --data-orange-color: #984b10;
613
+ --data-orange-color-muted: #311708;
601
614
  --data-yellow-color: #895906;
615
+ --data-yellow-color-muted: #2e1a00;
602
616
  --data-green-color: #2f6f37;
617
+ --data-green-color-muted: #122117;
603
618
  --data-teal-color: #106c70;
619
+ --data-teal-color-muted: #041f25;
604
620
  --data-purple-color: #975bf1;
621
+ --data-purple-color-muted: #211047;
605
622
  --data-pink-color: #d34591;
623
+ --data-pink-color-muted: #2d1524;
606
624
  --data-red-color: #eb3342;
625
+ --data-red-color-muted: #3c0614;
607
626
  --data-gray-color: #576270;
627
+ --data-gray-color-muted: #1c1c1c;
608
628
  --display-blue-bgColor-muted: #001a47;
609
629
  --display-blue-bgColor-emphasis: #0576ff;
610
630
  --display-blue-fgColor: #4da0ff;
package/dist/css/functional/themes/dark.css CHANGED
@@ -43,15 +43,25 @@
43
43
  --headerSearch-bgColor: #0d1117;
44
44
  --headerSearch-borderColor: #30363d;
45
45
  --data-blue-color: #0576ff;
46
+ --data-blue-color-muted: #001a47;
46
47
  --data-auburn-color: #a86f6b;
48
+ --data-auburn-color-muted: #271817;
47
49
  --data-orange-color: #984b10;
50
+ --data-orange-color-muted: #311708;
48
51
  --data-yellow-color: #895906;
52
+ --data-yellow-color-muted: #2e1a00;
49
53
  --data-green-color: #2f6f37;
54
+ --data-green-color-muted: #122117;
50
55
  --data-teal-color: #106c70;
56
+ --data-teal-color-muted: #041f25;
51
57
  --data-purple-color: #975bf1;
58
+ --data-purple-color-muted: #211047;
52
59
  --data-pink-color: #d34591;
60
+ --data-pink-color-muted: #2d1524;
53
61
  --data-red-color: #eb3342;
62
+ --data-red-color-muted: #3c0614;
54
63
  --data-gray-color: #576270;
64
+ --data-gray-color-muted: #1c1c1c;
55
65
  --display-blue-bgColor-muted: #001a47;
56
66
  --display-blue-bgColor-emphasis: #0576ff;
57
67
  --display-blue-fgColor: #4da0ff;
@@ -596,15 +606,25 @@
596
606
  --headerSearch-bgColor: #0d1117;
597
607
  --headerSearch-borderColor: #30363d;
598
608
  --data-blue-color: #0576ff;
609
+ --data-blue-color-muted: #001a47;
599
610
  --data-auburn-color: #a86f6b;
611
+ --data-auburn-color-muted: #271817;
600
612
  --data-orange-color: #984b10;
613
+ --data-orange-color-muted: #311708;
601
614
  --data-yellow-color: #895906;
615
+ --data-yellow-color-muted: #2e1a00;
602
616
  --data-green-color: #2f6f37;
617
+ --data-green-color-muted: #122117;
603
618
  --data-teal-color: #106c70;
619
+ --data-teal-color-muted: #041f25;
604
620
  --data-purple-color: #975bf1;
621
+ --data-purple-color-muted: #211047;
605
622
  --data-pink-color: #d34591;
623
+ --data-pink-color-muted: #2d1524;
606
624
  --data-red-color: #eb3342;
625
+ --data-red-color-muted: #3c0614;
607
626
  --data-gray-color: #576270;
627
+ --data-gray-color-muted: #1c1c1c;
608
628
  --display-blue-bgColor-muted: #001a47;
609
629
  --display-blue-bgColor-emphasis: #0576ff;
610
630
  --display-blue-fgColor: #4da0ff;
package/dist/css/functional/themes/light-colorblind.css CHANGED
@@ -43,15 +43,25 @@
43
43
  --headerSearch-bgColor: #24292f;
44
44
  --headerSearch-borderColor: #57606a;
45
45
  --data-blue-color: #006edb;
46
+ --data-blue-color-muted: #d1f0ff;
46
47
  --data-auburn-color: #9d615c;
48
+ --data-auburn-color-muted: #f2e9e9;
47
49
  --data-orange-color: #eb670f;
50
+ --data-orange-color-muted: #ffe7d1;
48
51
  --data-yellow-color: #b88700;
52
+ --data-yellow-color-muted: #ffec9e;
49
53
  --data-green-color: #30a147;
54
+ --data-green-color-muted: #caf7ca;
50
55
  --data-teal-color: #179b9b;
56
+ --data-teal-color-muted: #c7f5ef;
51
57
  --data-purple-color: #894ceb;
58
+ --data-purple-color-muted: #f1e5ff;
52
59
  --data-pink-color: #ce2c85;
60
+ --data-pink-color-muted: #ffe5f1;
53
61
  --data-red-color: #df0c24;
62
+ --data-red-color-muted: #ffe2e0;
54
63
  --data-gray-color: #808fa3;
64
+ --data-gray-color-muted: #e8ecf2;
55
65
  --display-blue-bgColor-muted: #d1f0ff;
56
66
  --display-blue-bgColor-emphasis: #006edb;
57
67
  --display-blue-fgColor: #005fcc;
@@ -596,15 +606,25 @@
596
606
  --headerSearch-bgColor: #24292f;
597
607
  --headerSearch-borderColor: #57606a;
598
608
  --data-blue-color: #006edb;
609
+ --data-blue-color-muted: #d1f0ff;
599
610
  --data-auburn-color: #9d615c;
611
+ --data-auburn-color-muted: #f2e9e9;
600
612
  --data-orange-color: #eb670f;
613
+ --data-orange-color-muted: #ffe7d1;
601
614
  --data-yellow-color: #b88700;
615
+ --data-yellow-color-muted: #ffec9e;
602
616
  --data-green-color: #30a147;
617
+ --data-green-color-muted: #caf7ca;
603
618
  --data-teal-color: #179b9b;
619
+ --data-teal-color-muted: #c7f5ef;
604
620
  --data-purple-color: #894ceb;
621
+ --data-purple-color-muted: #f1e5ff;
605
622
  --data-pink-color: #ce2c85;
623
+ --data-pink-color-muted: #ffe5f1;
606
624
  --data-red-color: #df0c24;
625
+ --data-red-color-muted: #ffe2e0;
607
626
  --data-gray-color: #808fa3;
627
+ --data-gray-color-muted: #e8ecf2;
608
628
  --display-blue-bgColor-muted: #d1f0ff;
609
629
  --display-blue-bgColor-emphasis: #006edb;
610
630
  --display-blue-fgColor: #005fcc;
package/dist/css/functional/themes/light-high-contrast.css CHANGED
@@ -43,15 +43,25 @@
43
43
  --headerSearch-bgColor: #0e1116;
44
44
  --headerSearch-borderColor: #4b535d;
45
45
  --data-blue-color: #006edb;
46
+ --data-blue-color-muted: #d1f0ff;
46
47
  --data-auburn-color: #9d615c;
48
+ --data-auburn-color-muted: #f2e9e9;
47
49
  --data-orange-color: #eb670f;
50
+ --data-orange-color-muted: #ffe7d1;
48
51
  --data-yellow-color: #b88700;
52
+ --data-yellow-color-muted: #ffec9e;
49
53
  --data-green-color: #30a147;
54
+ --data-green-color-muted: #caf7ca;
50
55
  --data-teal-color: #179b9b;
56
+ --data-teal-color-muted: #c7f5ef;
51
57
  --data-purple-color: #894ceb;
58
+ --data-purple-color-muted: #f1e5ff;
52
59
  --data-pink-color: #ce2c85;
60
+ --data-pink-color-muted: #ffe5f1;
53
61
  --data-red-color: #df0c24;
62
+ --data-red-color-muted: #ffe2e0;
54
63
  --data-gray-color: #808fa3;
64
+ --data-gray-color-muted: #e8ecf2;
55
65
  --display-blue-bgColor-muted: #d1f0ff;
56
66
  --display-blue-bgColor-emphasis: #006edb;
57
67
  --display-blue-fgColor: #005fcc;
@@ -596,15 +606,25 @@
596
606
  --headerSearch-bgColor: #0e1116;
597
607
  --headerSearch-borderColor: #4b535d;
598
608
  --data-blue-color: #006edb;
609
+ --data-blue-color-muted: #d1f0ff;
599
610
  --data-auburn-color: #9d615c;
611
+ --data-auburn-color-muted: #f2e9e9;
600
612
  --data-orange-color: #eb670f;
613
+ --data-orange-color-muted: #ffe7d1;
601
614
  --data-yellow-color: #b88700;
615
+ --data-yellow-color-muted: #ffec9e;
602
616
  --data-green-color: #30a147;
617
+ --data-green-color-muted: #caf7ca;
603
618
  --data-teal-color: #179b9b;
619
+ --data-teal-color-muted: #c7f5ef;
604
620
  --data-purple-color: #894ceb;
621
+ --data-purple-color-muted: #f1e5ff;
605
622
  --data-pink-color: #ce2c85;
623
+ --data-pink-color-muted: #ffe5f1;
606
624
  --data-red-color: #df0c24;
625
+ --data-red-color-muted: #ffe2e0;
607
626
  --data-gray-color: #808fa3;
627
+ --data-gray-color-muted: #e8ecf2;
608
628
  --display-blue-bgColor-muted: #d1f0ff;
609
629
  --display-blue-bgColor-emphasis: #006edb;
610
630
  --display-blue-fgColor: #005fcc;
package/dist/css/functional/themes/light-tritanopia.css CHANGED
@@ -43,15 +43,25 @@
43
43
  --headerSearch-bgColor: #24292f;
44
44
  --headerSearch-borderColor: #57606a;
45
45
  --data-blue-color: #006edb;
46
+ --data-blue-color-muted: #d1f0ff;
46
47
  --data-auburn-color: #9d615c;
48
+ --data-auburn-color-muted: #f2e9e9;
47
49
  --data-orange-color: #eb670f;
50
+ --data-orange-color-muted: #ffe7d1;
48
51
  --data-yellow-color: #b88700;
52
+ --data-yellow-color-muted: #ffec9e;
49
53
  --data-green-color: #30a147;
54
+ --data-green-color-muted: #caf7ca;
50
55
  --data-teal-color: #179b9b;
56
+ --data-teal-color-muted: #c7f5ef;
51
57
  --data-purple-color: #894ceb;
58
+ --data-purple-color-muted: #f1e5ff;
52
59
  --data-pink-color: #ce2c85;
60
+ --data-pink-color-muted: #ffe5f1;
53
61
  --data-red-color: #df0c24;
62
+ --data-red-color-muted: #ffe2e0;
54
63
  --data-gray-color: #808fa3;
64
+ --data-gray-color-muted: #e8ecf2;
55
65
  --display-blue-bgColor-muted: #d1f0ff;
56
66
  --display-blue-bgColor-emphasis: #006edb;
57
67
  --display-blue-fgColor: #005fcc;
@@ -596,15 +606,25 @@
596
606
  --headerSearch-bgColor: #24292f;
597
607
  --headerSearch-borderColor: #57606a;
598
608
  --data-blue-color: #006edb;
609
+ --data-blue-color-muted: #d1f0ff;
599
610
  --data-auburn-color: #9d615c;
611
+ --data-auburn-color-muted: #f2e9e9;
600
612
  --data-orange-color: #eb670f;
613
+ --data-orange-color-muted: #ffe7d1;
601
614
  --data-yellow-color: #b88700;
615
+ --data-yellow-color-muted: #ffec9e;
602
616
  --data-green-color: #30a147;
617
+ --data-green-color-muted: #caf7ca;
603
618
  --data-teal-color: #179b9b;
619
+ --data-teal-color-muted: #c7f5ef;
604
620
  --data-purple-color: #894ceb;
621
+ --data-purple-color-muted: #f1e5ff;
605
622
  --data-pink-color: #ce2c85;
623
+ --data-pink-color-muted: #ffe5f1;
606
624
  --data-red-color: #df0c24;
625
+ --data-red-color-muted: #ffe2e0;
607
626
  --data-gray-color: #808fa3;
627
+ --data-gray-color-muted: #e8ecf2;
608
628
  --display-blue-bgColor-muted: #d1f0ff;
609
629
  --display-blue-bgColor-emphasis: #006edb;
610
630
  --display-blue-fgColor: #005fcc;
package/dist/css/functional/themes/light.css CHANGED
@@ -43,15 +43,25 @@
43
43
  --headerSearch-bgColor: #24292f;
44
44
  --headerSearch-borderColor: #57606a;
45
45
  --data-blue-color: #006edb;
46
+ --data-blue-color-muted: #d1f0ff;
46
47
  --data-auburn-color: #9d615c;
48
+ --data-auburn-color-muted: #f2e9e9;
47
49
  --data-orange-color: #eb670f;
50
+ --data-orange-color-muted: #ffe7d1;
48
51
  --data-yellow-color: #b88700;
52
+ --data-yellow-color-muted: #ffec9e;
49
53
  --data-green-color: #30a147;
54
+ --data-green-color-muted: #caf7ca;
50
55
  --data-teal-color: #179b9b;
56
+ --data-teal-color-muted: #c7f5ef;
51
57
  --data-purple-color: #894ceb;
58
+ --data-purple-color-muted: #f1e5ff;
52
59
  --data-pink-color: #ce2c85;
60
+ --data-pink-color-muted: #ffe5f1;
53
61
  --data-red-color: #df0c24;
62
+ --data-red-color-muted: #ffe2e0;
54
63
  --data-gray-color: #808fa3;
64
+ --data-gray-color-muted: #e8ecf2;
55
65
  --display-blue-bgColor-muted: #d1f0ff;
56
66
  --display-blue-bgColor-emphasis: #006edb;
57
67
  --display-blue-fgColor: #005fcc;
@@ -596,15 +606,25 @@
596
606
  --headerSearch-bgColor: #24292f;
597
607
  --headerSearch-borderColor: #57606a;
598
608
  --data-blue-color: #006edb;
609
+ --data-blue-color-muted: #d1f0ff;
599
610
  --data-auburn-color: #9d615c;
611
+ --data-auburn-color-muted: #f2e9e9;
600
612
  --data-orange-color: #eb670f;
613
+ --data-orange-color-muted: #ffe7d1;
601
614
  --data-yellow-color: #b88700;
615
+ --data-yellow-color-muted: #ffec9e;
602
616
  --data-green-color: #30a147;
617
+ --data-green-color-muted: #caf7ca;
603
618
  --data-teal-color: #179b9b;
619
+ --data-teal-color-muted: #c7f5ef;
604
620
  --data-purple-color: #894ceb;
621
+ --data-purple-color-muted: #f1e5ff;
605
622
  --data-pink-color: #ce2c85;
623
+ --data-pink-color-muted: #ffe5f1;
606
624
  --data-red-color: #df0c24;
625
+ --data-red-color-muted: #ffe2e0;
607
626
  --data-gray-color: #808fa3;
627
+ --data-gray-color-muted: #e8ecf2;
608
628
  --display-blue-bgColor-muted: #d1f0ff;
609
629
  --display-blue-bgColor-emphasis: #006edb;
610
630
  --display-blue-fgColor: #005fcc;
package/dist/deprecated/size.json ADDED
@@ -0,0 +1,8 @@
1
+ {
2
+ "space.xxsmall": "Use --base-size-2 instead",
3
+ "space.xsmall": "Use --base-size-4 instead",
4
+ "space.small": "Use --base-size-6 instead",
5
+ "space.medium": "Use --base-size-8 instead",
6
+ "space.large": "Use --base-size-12 instead",
7
+ "space.xlarge": "Use --base-size-16 instead"
8
+ }
package/dist/docs/base/size/size.json CHANGED
@@ -1,4 +1,29 @@
1
1
  {
2
+ "base-size-2": {
3
+ "value": "0.125rem",
4
+ "$type": "dimension",
5
+ "$extensions": {
6
+ "org.primer.figma": {
7
+ "collection": "base/size",
8
+ "scopes": ["size"]
9
+ }
10
+ },
11
+ "filePath": "src/tokens/base/size/size.json",
12
+ "isSource": true,
13
+ "original": {
14
+ "value": "2px",
15
+ "$type": "dimension",
16
+ "$extensions": {
17
+ "org.primer.figma": {
18
+ "collection": "base/size",
19
+ "scopes": ["size"]
20
+ }
21
+ }
22
+ },
23
+ "name": "base-size-2",
24
+ "attributes": {},
25
+ "path": ["base", "size", "2"]
26
+ },
2
27
  "base-size-4": {
3
28
  "value": "0.25rem",
4
29
  "$type": "dimension",
@@ -24,6 +49,31 @@
24
49
  "attributes": {},
25
50
  "path": ["base", "size", "4"]
26
51
  },
52
+ "base-size-6": {
53
+ "value": "0.375rem",
54
+ "$type": "dimension",
55
+ "$extensions": {
56
+ "org.primer.figma": {
57
+ "collection": "base/size",
58
+ "scopes": ["size"]
59
+ }
60
+ },
61
+ "filePath": "src/tokens/base/size/size.json",
62
+ "isSource": true,
63
+ "original": {
64
+ "value": "6px",
65
+ "$type": "dimension",
66
+ "$extensions": {
67
+ "org.primer.figma": {
68
+ "collection": "base/size",
69
+ "scopes": ["size"]
70
+ }
71
+ }
72
+ },
73
+ "name": "base-size-6",
74
+ "attributes": {},
75
+ "path": ["base", "size", "6"]
76
+ },
27
77
  "base-size-8": {
28
78
  "value": "0.5rem",
29
79
  "$type": "dimension",
package/dist/docs/functional/size/size.json CHANGED
@@ -1027,6 +1027,7 @@
1027
1027
  "space-xxsmall": {
1028
1028
  "value": "0.125rem",
1029
1029
  "$type": "dimension",
1030
+ "deprecated": "Use --base-size-2 instead",
1030
1031
  "$extensions": {
1031
1032
  "org.primer.figma": {
1032
1033
  "collection": "functional/size",
@@ -1038,6 +1039,7 @@
1038
1039
  "original": {
1039
1040
  "value": "2px",
1040
1041
  "$type": "dimension",
1042
+ "deprecated": "Use --base-size-2 instead",
1041
1043
  "$extensions": {
1042
1044
  "org.primer.figma": {
1043
1045
  "collection": "functional/size",
@@ -1052,6 +1054,7 @@
1052
1054
  "space-xsmall": {
1053
1055
  "value": "0.25rem",
1054
1056
  "$type": "dimension",
1057
+ "deprecated": "Use --base-size-4 instead",
1055
1058
  "$extensions": {
1056
1059
  "org.primer.figma": {
1057
1060
  "collection": "functional/size",
@@ -1063,6 +1066,7 @@
1063
1066
  "original": {
1064
1067
  "value": "{base.size.4}",
1065
1068
  "$type": "dimension",
1069
+ "deprecated": "Use --base-size-4 instead",
1066
1070
  "$extensions": {
1067
1071
  "org.primer.figma": {
1068
1072
  "collection": "functional/size",
@@ -1077,6 +1081,7 @@
1077
1081
  "space-small": {
1078
1082
  "value": "0.375rem",
1079
1083
  "$type": "dimension",
1084
+ "deprecated": "Use --base-size-6 instead",
1080
1085
  "$extensions": {
1081
1086
  "org.primer.figma": {
1082
1087
  "collection": "functional/size",
@@ -1088,6 +1093,7 @@
1088
1093
  "original": {
1089
1094
  "value": "6px",
1090
1095
  "$type": "dimension",
1096
+ "deprecated": "Use --base-size-6 instead",
1091
1097
  "$extensions": {
1092
1098
  "org.primer.figma": {
1093
1099
  "collection": "functional/size",
@@ -1102,6 +1108,7 @@
1102
1108
  "space-medium": {
1103
1109
  "value": "0.5rem",
1104
1110
  "$type": "dimension",
1111
+ "deprecated": "Use --base-size-8 instead",
1105
1112
  "$extensions": {
1106
1113
  "org.primer.figma": {
1107
1114
  "collection": "functional/size",
@@ -1113,6 +1120,7 @@
1113
1120
  "original": {
1114
1121
  "value": "{base.size.8}",
1115
1122
  "$type": "dimension",
1123
+ "deprecated": "Use --base-size-8 instead",
1116
1124
  "$extensions": {
1117
1125
  "org.primer.figma": {
1118
1126
  "collection": "functional/size",
@@ -1127,6 +1135,7 @@
1127
1135
  "space-large": {
1128
1136
  "value": "0.75rem",
1129
1137
  "$type": "dimension",
1138
+ "deprecated": "Use --base-size-12 instead",
1130
1139
  "$extensions": {
1131
1140
  "org.primer.figma": {
1132
1141
  "collection": "functional/size",
@@ -1138,6 +1147,7 @@
1138
1147
  "original": {
1139
1148
  "value": "{base.size.12}",
1140
1149
  "$type": "dimension",
1150
+ "deprecated": "Use --base-size-12 instead",
1141
1151
  "$extensions": {
1142
1152
  "org.primer.figma": {
1143
1153
  "collection": "functional/size",
@@ -1152,6 +1162,7 @@
1152
1162
  "space-xlarge": {
1153
1163
  "value": "1rem",
1154
1164
  "$type": "dimension",
1165
+ "deprecated": "Use --base-size-16 instead",
1155
1166
  "$extensions": {
1156
1167
  "org.primer.figma": {
1157
1168
  "collection": "functional/size",
@@ -1163,6 +1174,7 @@
1163
1174
  "original": {
1164
1175
  "value": "{base.size.16}",
1165
1176
  "$type": "dimension",
1177
+ "deprecated": "Use --base-size-16 instead",
1166
1178
  "$extensions": {
1167
1179
  "org.primer.figma": {
1168
1180
  "collection": "functional/size",