@primer/primitives 10.3.4 → 10.4.0-rc.06084fce

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 (108) hide show
  1. package/dist/build/schemas/shadowToken.d.ts +1992 -0
  2. package/dist/build/schemas/shadowToken.js +27 -0
  3. package/dist/css/base/motion/motion.css +1 -0
  4. package/dist/css/functional/themes/dark-colorblind.css +38 -2
  5. package/dist/css/functional/themes/dark-dimmed.css +38 -2
  6. package/dist/css/functional/themes/dark-high-contrast.css +38 -2
  7. package/dist/css/functional/themes/dark-tritanopia.css +38 -2
  8. package/dist/css/functional/themes/dark.css +38 -2
  9. package/dist/css/functional/themes/light-colorblind.css +38 -2
  10. package/dist/css/functional/themes/light-high-contrast.css +38 -2
  11. package/dist/css/functional/themes/light-tritanopia.css +38 -2
  12. package/dist/css/functional/themes/light.css +38 -2
  13. package/dist/css/primitives.css +1 -6
  14. package/dist/docs/base/motion/motion.json +14 -0
  15. package/dist/docs/functional/themes/dark-colorblind.json +12028 -1436
  16. package/dist/docs/functional/themes/dark-dimmed.json +12218 -1392
  17. package/dist/docs/functional/themes/dark-high-contrast.json +13308 -1584
  18. package/dist/docs/functional/themes/dark-tritanopia.json +11899 -1409
  19. package/dist/docs/functional/themes/dark.json +11584 -1314
  20. package/dist/docs/functional/themes/light-colorblind.json +11961 -1411
  21. package/dist/docs/functional/themes/light-high-contrast.json +14994 -3384
  22. package/dist/docs/functional/themes/light-tritanopia.json +11815 -1367
  23. package/dist/docs/functional/themes/light.json +11541 -1245
  24. package/dist/fallbacks/base/motion/motion.json +1 -0
  25. package/dist/figma/figma.json +1 -10
  26. package/dist/figma/themes/dark-colorblind.json +5096 -4524
  27. package/dist/figma/themes/dark-dimmed.json +5142 -4406
  28. package/dist/figma/themes/dark-high-contrast.json +5762 -3913
  29. package/dist/figma/themes/dark-tritanopia.json +4933 -4491
  30. package/dist/figma/themes/dark.json +5476 -5299
  31. package/dist/figma/themes/light-colorblind.json +5076 -4467
  32. package/dist/figma/themes/light-high-contrast.json +5707 -3916
  33. package/dist/figma/themes/light-tritanopia.json +4983 -4501
  34. package/dist/figma/themes/light.json +4795 -4502
  35. package/dist/internalCss/dark-colorblind.css +38 -2
  36. package/dist/internalCss/dark-dimmed.css +38 -2
  37. package/dist/internalCss/dark-high-contrast.css +38 -2
  38. package/dist/internalCss/dark-tritanopia.css +38 -2
  39. package/dist/internalCss/dark.css +38 -2
  40. package/dist/internalCss/light-colorblind.css +38 -2
  41. package/dist/internalCss/light-high-contrast.css +38 -2
  42. package/dist/internalCss/light-tritanopia.css +38 -2
  43. package/dist/internalCss/light.css +38 -2
  44. package/dist/styleLint/base/motion/motion.json +14 -0
  45. package/dist/styleLint/functional/themes/dark-colorblind.json +12028 -1436
  46. package/dist/styleLint/functional/themes/dark-dimmed.json +12217 -1391
  47. package/dist/styleLint/functional/themes/dark-high-contrast.json +13295 -1571
  48. package/dist/styleLint/functional/themes/dark-tritanopia.json +11897 -1407
  49. package/dist/styleLint/functional/themes/dark.json +11567 -1297
  50. package/dist/styleLint/functional/themes/light-colorblind.json +11922 -1372
  51. package/dist/styleLint/functional/themes/light-high-contrast.json +15008 -3398
  52. package/dist/styleLint/functional/themes/light-tritanopia.json +11816 -1368
  53. package/dist/styleLint/functional/themes/light.json +11542 -1246
  54. package/package.json +1 -1
  55. package/src/tokens/base/motion/timing.json5 +4 -0
  56. package/src/tokens/component/avatar.json5 +33 -0
  57. package/src/tokens/component/button.json5 +1714 -0
  58. package/src/tokens/component/card.json5 +18 -0
  59. package/src/tokens/{functional/color/light/app-light.json5 → component/codeMirror.json5} +67 -0
  60. package/src/tokens/component/contribution.json5 +344 -0
  61. package/src/tokens/component/counter.json5 +43 -0
  62. package/src/tokens/component/header.json5 +3 -0
  63. package/src/tokens/component/label.json5 +1942 -0
  64. package/src/tokens/component/menu.json5 +24 -0
  65. package/src/tokens/component/overlay.json5 +1 -1
  66. package/src/tokens/component/selectMenu.json5 +38 -0
  67. package/src/tokens/component/sideNav.json5 +22 -0
  68. package/src/tokens/component/tooltip.json5 +32 -0
  69. package/src/tokens/component/treeView.json5 +24 -0
  70. package/src/tokens/component/underlineNav.json5 +56 -0
  71. package/src/tokens/functional/color/bgColor.json5 +24 -20
  72. package/src/tokens/functional/color/control.json5 +1087 -0
  73. package/src/tokens/functional/color/{dark/data-vis-dark.json5 → data-vis.json5} +61 -21
  74. package/src/tokens/functional/color/display.json5 +2170 -0
  75. package/src/tokens/functional/color/focus.json5 +15 -0
  76. package/src/tokens/functional/color/selection.json5 +22 -0
  77. package/src/tokens/functional/color/{light/syntax-light.json5 → syntax.json5} +187 -0
  78. package/src/tokens/functional/shadow/{light.json5 → shadow.json5} +202 -120
  79. package/dist/css/functional/motion/motion.css +0 -6
  80. package/dist/docs/functional/motion/motion.json +0 -66
  81. package/dist/fallbacks/functional/motion/motion.json +0 -6
  82. package/dist/figma/shadows/dark-colorblind.json +0 -1152
  83. package/dist/figma/shadows/dark-dimmed.json +0 -1152
  84. package/dist/figma/shadows/dark-high-contrast.json +0 -1152
  85. package/dist/figma/shadows/dark-tritanopia.json +0 -1152
  86. package/dist/figma/shadows/dark.json +0 -1152
  87. package/dist/figma/shadows/light-colorblind.json +0 -1052
  88. package/dist/figma/shadows/light-high-contrast.json +0 -1052
  89. package/dist/figma/shadows/light-tritanopia.json +0 -1052
  90. package/dist/figma/shadows/light.json +0 -1052
  91. package/dist/styleLint/functional/motion/motion.json +0 -66
  92. package/src/tokens/functional/color/dark/app-dark.json5 +0 -254
  93. package/src/tokens/functional/color/dark/display-dark.json5 +0 -1258
  94. package/src/tokens/functional/color/dark/overrides/dark.dimmed.json5 +0 -223
  95. package/src/tokens/functional/color/dark/overrides/dark.high-contrast.json5 +0 -658
  96. package/src/tokens/functional/color/dark/overrides/dark.protanopia-deuteranopia.json5 +0 -159
  97. package/src/tokens/functional/color/dark/overrides/dark.tritanopia.json5 +0 -107
  98. package/src/tokens/functional/color/dark/patterns-dark.json5 +0 -2676
  99. package/src/tokens/functional/color/dark/syntax-dark.json5 +0 -559
  100. package/src/tokens/functional/color/light/data-vis-light.json5 +0 -284
  101. package/src/tokens/functional/color/light/display-light.json5 +0 -1163
  102. package/src/tokens/functional/color/light/overrides/light.high-contrast.json5 +0 -601
  103. package/src/tokens/functional/color/light/overrides/light.protanopia-deuteranopia.json5 +0 -159
  104. package/src/tokens/functional/color/light/overrides/light.tritanopia.json5 +0 -97
  105. package/src/tokens/functional/color/light/patterns-light.json5 +0 -2671
  106. package/src/tokens/functional/motion/loading.json5 +0 -17
  107. package/src/tokens/functional/motion/patterns.json5 +0 -35
  108. package/src/tokens/functional/shadow/dark.json5 +0 -369
package/src/tokens/component/menu.json5 ADDED
@@ -0,0 +1,24 @@
1
+ {
2
+ menu: {
3
+ bgColor: {
4
+ active: {
5
+ $value: '{base.color.transparent}',
6
+ $type: 'color',
7
+ $extensions: {
8
+ 'org.primer.figma': {
9
+ collection: 'mode',
10
+ group: 'component (internal)',
11
+ scopes: [
12
+ 'bgColor',
13
+ ],
14
+ },
15
+ 'org.primer.overrides': {
16
+ dark: {
17
+ $value: '{base.color.neutral.2}',
18
+ },
19
+ },
20
+ },
21
+ },
22
+ },
23
+ },
24
+ }
package/src/tokens/component/overlay.json5 CHANGED
@@ -51,7 +51,7 @@
51
51
  $extensions: {
52
52
  'org.primer.figma': {
53
53
  collection: 'mode',
54
- group: 'component (internal)',
54
+ group: 'component', // this is NOT internal so that users can see it in figma
55
55
  scopes: ['bgColor'],
56
56
  },
57
57
  'org.primer.overrides': {
package/src/tokens/component/selectMenu.json5 ADDED
@@ -0,0 +1,38 @@
1
+ {
2
+ selectMenu: {
3
+ borderColor: {
4
+ $value: '{base.color.transparent}',
5
+ $type: 'color',
6
+ $extensions: {
7
+ 'org.primer.figma': {
8
+ collection: 'mode',
9
+ group: 'component (internal)',
10
+ scopes: ['borderColor'],
11
+ },
12
+ 'org.primer.overrides': {
13
+ dark: {
14
+ $value: '{borderColor.default}',
15
+ },
16
+ },
17
+ },
18
+ },
19
+ bgColor: {
20
+ active: {
21
+ $value: '{base.color.blue.1}',
22
+ $type: 'color',
23
+ $extensions: {
24
+ 'org.primer.figma': {
25
+ collection: 'mode',
26
+ group: 'component (internal)',
27
+ scopes: ['bgColor'],
28
+ },
29
+ 'org.primer.overrides': {
30
+ dark: {
31
+ $value: '{base.color.blue.8}',
32
+ },
33
+ },
34
+ },
35
+ },
36
+ },
37
+ },
38
+ }
package/src/tokens/component/sideNav.json5 ADDED
@@ -0,0 +1,22 @@
1
+ {
2
+ sideNav: {
3
+ bgColor: {
4
+ selected: {
5
+ $value: '{base.color.neutral.0}',
6
+ $type: 'color',
7
+ $extensions: {
8
+ 'org.primer.figma': {
9
+ collection: 'mode',
10
+ group: 'component (internal)',
11
+ scopes: ['bgColor'],
12
+ },
13
+ 'org.primer.overrides': {
14
+ dark: {
15
+ $value: '{base.color.neutral.3}',
16
+ },
17
+ },
18
+ },
19
+ },
20
+ },
21
+ },
22
+ }
package/src/tokens/component/tooltip.json5 ADDED
@@ -0,0 +1,32 @@
1
+ {
2
+ tooltip: {
3
+ bgColor: {
4
+ $value: '{bgColor.emphasis}',
5
+ $type: 'color',
6
+ $extensions: {
7
+ 'org.primer.figma': {
8
+ collection: 'mode',
9
+ group: 'component',
10
+ scopes: ['bgColor'],
11
+ },
12
+ 'org.primer.overrides': {
13
+ "dark-high-contrast": '{bgColor.inverse}',
14
+ },
15
+ },
16
+ },
17
+ fgColor: {
18
+ $value: '{fgColor.onEmphasis}',
19
+ $type: 'color',
20
+ $extensions: {
21
+ 'org.primer.figma': {
22
+ collection: 'mode',
23
+ group: 'component',
24
+ scopes: ['fgColor'],
25
+ },
26
+ 'org.primer.overrides': {
27
+ "dark-high-contrast": '{fgColor.onInverse}',
28
+ },
29
+ },
30
+ },
31
+ },
32
+ }
package/src/tokens/component/treeView.json5 ADDED
@@ -0,0 +1,24 @@
1
+ {
2
+ treeViewItem: {
3
+ leadingVisual: {
4
+ iconColor: {
5
+ rest: {
6
+ $value: '{base.color.blue.3}',
7
+ $type: 'color',
8
+ $extensions: {
9
+ 'org.primer.figma': {
10
+ collection: 'mode',
11
+ group: 'component (internal)',
12
+ scopes: ['bgColor'],
13
+ },
14
+ 'org.primer.overrides': {
15
+ dark: {
16
+ $value: '{fgColor.muted}',
17
+ },
18
+ },
19
+ },
20
+ },
21
+ },
22
+ },
23
+ },
24
+ }
package/src/tokens/component/underlineNav.json5 ADDED
@@ -0,0 +1,56 @@
1
+ {
2
+ underlineNav: {
3
+ borderColor: {
4
+ active: {
5
+ $value: '{base.color.coral.3}',
6
+ $type: 'color',
7
+ $extensions: {
8
+ 'org.primer.figma': {
9
+ collection: 'mode',
10
+ group: 'component (internal)',
11
+ scopes: ['borderColor'],
12
+ },
13
+ 'org.primer.overrides': {
14
+ dark: {
15
+ $value: '{base.color.coral.3}',
16
+ },
17
+ },
18
+ },
19
+ },
20
+ hover: {
21
+ $value: '{borderColor.muted}',
22
+ $type: 'color',
23
+ $extensions: {
24
+ 'org.primer.figma': {
25
+ collection: 'mode',
26
+ group: 'component (internal)',
27
+ scopes: ['borderColor'],
28
+ },
29
+ 'org.primer.overrides': {
30
+ dark: {
31
+ $value: '{borderColor.neutral.muted}',
32
+ },
33
+ },
34
+ },
35
+ },
36
+ },
37
+ iconColor: {
38
+ rest: {
39
+ $value: '{fgColor.muted}',
40
+ $type: 'color',
41
+ $extensions: {
42
+ 'org.primer.figma': {
43
+ collection: 'mode',
44
+ group: 'component (internal)',
45
+ scopes: ['fgColor'],
46
+ },
47
+ 'org.primer.overrides': {
48
+ dark: {
49
+ $value: '{fgColor.muted}',
50
+ },
51
+ },
52
+ },
53
+ },
54
+ },
55
+ },
56
+ }
package/src/tokens/functional/color/bgColor.json5 CHANGED
@@ -14,7 +14,8 @@
14
14
  },
15
15
  'org.primer.overrides': {
16
16
  dark: '{base.color.neutral.1}',
17
- "dark-high-contrast": "{base.color.neutral.0}",
17
+ 'dark-dimmed': '{base.color.neutral.3}',
18
+ 'dark-high-contrast': '{base.color.neutral.0}',
18
19
  },
19
20
  },
20
21
  },
@@ -32,8 +33,9 @@
32
33
  },
33
34
  'org.primer.overrides': {
34
35
  dark: '{base.color.neutral.2}',
35
- "light-high-contrast": "{base.color.neutral.3}",
36
- "dark-high-contrast": "{base.color.neutral.2}",
36
+ 'dark-dimmed': '{base.color.neutral.4}',
37
+ 'light-high-contrast': '{base.color.neutral.3}',
38
+ 'dark-high-contrast': '{base.color.neutral.2}',
37
39
  },
38
40
  },
39
41
  },
@@ -51,7 +53,8 @@
51
53
  },
52
54
  'org.primer.overrides': {
53
55
  dark: '{base.color.neutral.0}',
54
- "light-high-contrast": "{base.color.neutral.2}",
56
+ 'dark-dimmed': '{base.color.neutral.2}',
57
+ 'light-high-contrast': '{base.color.neutral.2}',
55
58
  },
56
59
  },
57
60
  },
@@ -125,8 +128,9 @@
125
128
  },
126
129
  'org.primer.overrides': {
127
130
  dark: '{base.color.neutral.3}',
128
- "light-high-contrast": "{base.color.neutral.4}",
129
- "dark-high-contrast": "{base.color.neutral.4}",
131
+ 'dark-dimmed': '{base.color.neutral.5}',
132
+ 'light-high-contrast': '{base.color.neutral.4}',
133
+ 'dark-high-contrast': '{base.color.neutral.4}',
130
134
  },
131
135
  },
132
136
  },
@@ -163,8 +167,8 @@
163
167
  $value: '{base.color.neutral.8}',
164
168
  alpha: 0.2,
165
169
  },
166
- "light-high-contrast": "{base.color.neutral.4}",
167
- "dark-high-contrast": "{base.color.neutral.3}",
170
+ 'light-high-contrast': '{base.color.neutral.4}',
171
+ 'dark-high-contrast': '{base.color.neutral.3}',
168
172
  },
169
173
  },
170
174
  },
@@ -179,8 +183,9 @@
179
183
  },
180
184
  'org.primer.overrides': {
181
185
  dark: '{base.color.neutral.8}',
182
- "light-high-contrast": "{base.color.neutral.10}",
183
- "dark-high-contrast": "{base.color.neutral.7}",
186
+ 'dark-dimmed': '{base.color.neutral.8}',
187
+ 'light-high-contrast': '{base.color.neutral.10}',
188
+ 'dark-high-contrast': '{base.color.neutral.7}',
184
189
  },
185
190
  },
186
191
  },
@@ -220,7 +225,7 @@
220
225
  },
221
226
  'org.primer.overrides': {
222
227
  dark: '{base.color.blue.5}',
223
- "dark-high-contrast": "{base.color.blue.9}",
228
+ 'dark-high-contrast': '{base.color.blue.9}',
224
229
  },
225
230
  },
226
231
  },
@@ -253,7 +258,6 @@
253
258
  $value: '{base.color.blue.4}',
254
259
  alpha: 0.2,
255
260
  },
256
-
257
261
  },
258
262
  },
259
263
  },
@@ -275,8 +279,8 @@
275
279
  'dark-tritanopia': '{base.color.blue.5}',
276
280
  'light-protanopia-deuteranopia': '{base.color.blue.5}',
277
281
  'dark-protanopia-deuteranopia': '{base.color.blue.5}',
278
- "light-high-contrast": "{base.color.green.5}",
279
- "dark-high-contrast": "{base.color.green.9}",
282
+ 'light-high-contrast': '{base.color.green.5}',
283
+ 'dark-high-contrast': '{base.color.green.9}',
280
284
  },
281
285
  },
282
286
  },
@@ -363,7 +367,7 @@
363
367
  },
364
368
  },
365
369
  'org.primer.overrides': {
366
- "dark-high-contrast": "{base.color.yellow.9}",
370
+ 'dark-high-contrast': '{base.color.yellow.9}',
367
371
  },
368
372
  },
369
373
  },
@@ -409,7 +413,7 @@
409
413
  'org.primer.overrides': {
410
414
  'light-tritanopia': '{base.color.red.5}',
411
415
  'dark-tritanopia': '{base.color.red.5}',
412
- "dark-high-contrast": "{base.color.orange.9}",
416
+ 'dark-high-contrast': '{base.color.orange.9}',
413
417
  },
414
418
  },
415
419
  },
@@ -454,8 +458,8 @@
454
458
  },
455
459
  'org.primer.overrides': {
456
460
  'light-protanopia-deuteranopia': '{base.color.orange.5}',
457
- "dark-protanopia-deuteranopia": "{base.color.orange.5}",
458
- "dark-high-contrast": "{base.color.red.9}",
461
+ 'dark-protanopia-deuteranopia': '{base.color.orange.5}',
462
+ 'dark-high-contrast': '{base.color.red.9}',
459
463
  },
460
464
  },
461
465
  },
@@ -542,7 +546,7 @@
542
546
  },
543
547
  },
544
548
  'org.primer.overrides': {
545
- "dark-high-contrast": "{base.color.purple.9}",
549
+ 'dark-high-contrast': '{base.color.purple.9}',
546
550
  },
547
551
  },
548
552
  },
@@ -615,7 +619,7 @@
615
619
  },
616
620
  },
617
621
  'org.primer.overrides': {
618
- "dark-high-contrast": "{base.color.pink.9}",
622
+ 'dark-high-contrast': '{base.color.pink.9}',
619
623
  },
620
624
  },
621
625
  },