@primer/primitives 8.2.4-rc.fba4a4ab → 9.0.0-rc.02c27a21

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 (64) hide show
  1. package/dist/css/functional/size/size.css +0 -6
  2. package/dist/css/functional/themes/dark-colorblind.css +26 -20
  3. package/dist/css/functional/themes/dark-dimmed.css +26 -20
  4. package/dist/css/functional/themes/dark-high-contrast.css +28 -22
  5. package/dist/css/functional/themes/dark-tritanopia.css +26 -20
  6. package/dist/css/functional/themes/dark.css +26 -20
  7. package/dist/css/functional/themes/light-colorblind.css +26 -20
  8. package/dist/css/functional/themes/light-high-contrast.css +28 -22
  9. package/dist/css/functional/themes/light-tritanopia.css +26 -20
  10. package/dist/css/functional/themes/light.css +26 -20
  11. package/dist/css/primitives.css +0 -6
  12. package/dist/docs/functional/size/size.json +0 -162
  13. package/dist/docs/functional/themes/dark-colorblind.json +117 -30
  14. package/dist/docs/functional/themes/dark-dimmed.json +117 -30
  15. package/dist/docs/functional/themes/dark-high-contrast.json +120 -33
  16. package/dist/docs/functional/themes/dark-tritanopia.json +117 -30
  17. package/dist/docs/functional/themes/dark.json +117 -30
  18. package/dist/docs/functional/themes/light-colorblind.json +117 -30
  19. package/dist/docs/functional/themes/light-high-contrast.json +120 -33
  20. package/dist/docs/functional/themes/light-tritanopia.json +117 -30
  21. package/dist/docs/functional/themes/light.json +117 -30
  22. package/dist/fallbacks/color-fallbacks.json +11 -1
  23. package/dist/fallbacks/functional/size/size.json +0 -6
  24. package/dist/figma/dimension/dimension.json +0 -64
  25. package/dist/figma/themes/dark-colorblind.json +68 -20
  26. package/dist/figma/themes/dark-dimmed.json +68 -20
  27. package/dist/figma/themes/dark-high-contrast.json +84 -36
  28. package/dist/figma/themes/dark-tritanopia.json +68 -20
  29. package/dist/figma/themes/dark.json +68 -20
  30. package/dist/figma/themes/light-colorblind.json +68 -20
  31. package/dist/figma/themes/light-high-contrast.json +84 -36
  32. package/dist/figma/themes/light-tritanopia.json +68 -20
  33. package/dist/figma/themes/light.json +68 -20
  34. package/dist/internalCss/dark-colorblind.css +26 -20
  35. package/dist/internalCss/dark-dimmed.css +26 -20
  36. package/dist/internalCss/dark-high-contrast.css +28 -22
  37. package/dist/internalCss/dark-tritanopia.css +26 -20
  38. package/dist/internalCss/dark.css +26 -20
  39. package/dist/internalCss/light-colorblind.css +26 -20
  40. package/dist/internalCss/light-high-contrast.css +28 -22
  41. package/dist/internalCss/light-tritanopia.css +26 -20
  42. package/dist/internalCss/light.css +26 -20
  43. package/dist/styleLint/functional/size/size.json +0 -162
  44. package/dist/styleLint/functional/themes/dark-colorblind.json +117 -30
  45. package/dist/styleLint/functional/themes/dark-dimmed.json +117 -30
  46. package/dist/styleLint/functional/themes/dark-high-contrast.json +120 -33
  47. package/dist/styleLint/functional/themes/dark-tritanopia.json +117 -30
  48. package/dist/styleLint/functional/themes/dark.json +117 -30
  49. package/dist/styleLint/functional/themes/light-colorblind.json +117 -30
  50. package/dist/styleLint/functional/themes/light-high-contrast.json +120 -33
  51. package/dist/styleLint/functional/themes/light-tritanopia.json +117 -30
  52. package/dist/styleLint/functional/themes/light.json +117 -30
  53. package/package.json +1 -1
  54. package/src/tokens/fallback/color-fallbacks.json +11 -1
  55. package/src/tokens/functional/color/dark/data-vis-dark.json5 +10 -10
  56. package/src/tokens/functional/color/dark/overrides/dark.high-contrast.json5 +16 -0
  57. package/src/tokens/functional/color/dark/patterns-dark.json5 +26 -0
  58. package/src/tokens/functional/color/dark/primitives-dark.json5 +12 -0
  59. package/src/tokens/functional/color/light/data-vis-light.json5 +10 -10
  60. package/src/tokens/functional/color/light/overrides/light.high-contrast.json5 +6 -0
  61. package/src/tokens/functional/color/light/patterns-light.json5 +26 -0
  62. package/src/tokens/functional/color/light/primitives-light.json5 +12 -0
  63. package/src/tokens/functional/size/size.json +0 -68
  64. package/dist/deprecated/size.json +0 -8
@@ -2,7 +2,7 @@
2
2
  data: {
3
3
  blue: {
4
4
  color: {
5
- '@': {
5
+ 'emphasis': {
6
6
  $value: '{base.display.color.blue.5}',
7
7
  $type: 'color',
8
8
  $extensions: {
@@ -30,7 +30,7 @@
30
30
  },
31
31
  auburn: {
32
32
  color: {
33
- '@': {
33
+ 'emphasis': {
34
34
  $value: '{base.display.color.auburn.5}',
35
35
  $type: 'color',
36
36
  $extensions: {
@@ -58,7 +58,7 @@
58
58
  },
59
59
  orange: {
60
60
  color: {
61
- '@': {
61
+ 'emphasis': {
62
62
  $value: '{base.display.color.orange.4}',
63
63
  $type: 'color',
64
64
  $extensions: {
@@ -86,7 +86,7 @@
86
86
  },
87
87
  yellow: {
88
88
  color: {
89
- '@': {
89
+ 'emphasis': {
90
90
  $value: '{base.display.color.yellow.4}',
91
91
  $type: 'color',
92
92
  $extensions: {
@@ -114,7 +114,7 @@
114
114
  },
115
115
  green: {
116
116
  color: {
117
- '@': {
117
+ 'emphasis': {
118
118
  $value: '{base.display.color.green.4}',
119
119
  $type: 'color',
120
120
  $extensions: {
@@ -142,7 +142,7 @@
142
142
  },
143
143
  teal: {
144
144
  color: {
145
- '@': {
145
+ 'emphasis': {
146
146
  $value: '{base.display.color.teal.4}',
147
147
  $type: 'color',
148
148
  $extensions: {
@@ -170,7 +170,7 @@
170
170
  },
171
171
  purple: {
172
172
  color: {
173
- '@': {
173
+ 'emphasis': {
174
174
  $value: '{base.display.color.purple.5}',
175
175
  $type: 'color',
176
176
  $extensions: {
@@ -198,7 +198,7 @@
198
198
  },
199
199
  pink: {
200
200
  color: {
201
- '@': {
201
+ 'emphasis': {
202
202
  $value: '{base.display.color.pink.5}',
203
203
  $type: 'color',
204
204
  $extensions: {
@@ -226,7 +226,7 @@
226
226
  },
227
227
  red: {
228
228
  color: {
229
- '@': {
229
+ 'emphasis': {
230
230
  $value: '{base.display.color.red.5}',
231
231
  $type: 'color',
232
232
  $extensions: {
@@ -254,7 +254,7 @@
254
254
  },
255
255
  gray: {
256
256
  color: {
257
- '@': {
257
+ 'emphasis': {
258
258
  $value: '{base.display.color.gray.4}',
259
259
  $type: 'color',
260
260
  $extensions: {
@@ -362,6 +362,12 @@
362
362
  $type: 'color',
363
363
  },
364
364
  },
365
+ borderColor: {
366
+ rest: {
367
+ $value: '{borderColor.emphasis}',
368
+ $type: 'color',
369
+ },
370
+ },
365
371
  },
366
372
  button: {
367
373
  primary: {
@@ -902,4 +908,14 @@
902
908
  },
903
909
  },
904
910
  },
911
+ tooltip: {
912
+ bgColor: {
913
+ $value: '{bgColor.inverse}',
914
+ $type: 'color',
915
+ },
916
+ fgColor: {
917
+ $value: '{fgColor.onInverse}',
918
+ $type: 'color',
919
+ },
920
+ },
905
921
  }
@@ -3073,4 +3073,30 @@
3073
3073
  },
3074
3074
  },
3075
3075
  },
3076
+ tooltip: {
3077
+ bgColor: {
3078
+ $value: '{bgColor.emphasis}',
3079
+ $type: 'color',
3080
+ $extensions: {
3081
+ 'org.primer.figma': {
3082
+ collection: 'mode',
3083
+ mode: 'dark',
3084
+ group: 'component',
3085
+ scopes: ['bgColor'],
3086
+ },
3087
+ },
3088
+ },
3089
+ fgColor: {
3090
+ $value: '{fgColor.onEmphasis}',
3091
+ $type: 'color',
3092
+ $extensions: {
3093
+ 'org.primer.figma': {
3094
+ collection: 'mode',
3095
+ mode: 'dark',
3096
+ group: 'component',
3097
+ scopes: ['fgColor'],
3098
+ },
3099
+ },
3100
+ },
3101
+ },
3076
3102
  }
@@ -53,6 +53,18 @@
53
53
  },
54
54
  },
55
55
  },
56
+ onInverse: {
57
+ $value: '{base.color.black}',
58
+ $type: 'color',
59
+ $extensions: {
60
+ 'org.primer.figma': {
61
+ collection: 'mode',
62
+ mode: 'dark',
63
+ group: 'semantic',
64
+ scopes: ['fgColor'],
65
+ },
66
+ },
67
+ },
56
68
  white: {
57
69
  $value: '{base.color.white}',
58
70
  $type: 'color',
@@ -2,7 +2,7 @@
2
2
  data: {
3
3
  blue: {
4
4
  color: {
5
- '@': {
5
+ 'emphasis': {
6
6
  $value: '{base.display.color.blue.5}',
7
7
  $type: 'color',
8
8
  $extensions: {
@@ -30,7 +30,7 @@
30
30
  },
31
31
  auburn: {
32
32
  color: {
33
- '@': {
33
+ 'emphasis': {
34
34
  $value: '{base.display.color.auburn.5}',
35
35
  $type: 'color',
36
36
  $extensions: {
@@ -58,7 +58,7 @@
58
58
  },
59
59
  orange: {
60
60
  color: {
61
- '@': {
61
+ 'emphasis': {
62
62
  $value: '{base.display.color.orange.4}',
63
63
  $type: 'color',
64
64
  $extensions: {
@@ -86,7 +86,7 @@
86
86
  },
87
87
  yellow: {
88
88
  color: {
89
- '@': {
89
+ 'emphasis': {
90
90
  $value: '{base.display.color.yellow.4}',
91
91
  $type: 'color',
92
92
  $extensions: {
@@ -114,7 +114,7 @@
114
114
  },
115
115
  green: {
116
116
  color: {
117
- '@': {
117
+ 'emphasis': {
118
118
  $value: '{base.display.color.green.4}',
119
119
  $type: 'color',
120
120
  $extensions: {
@@ -142,7 +142,7 @@
142
142
  },
143
143
  teal: {
144
144
  color: {
145
- '@': {
145
+ 'emphasis': {
146
146
  $value: '{base.display.color.teal.4}',
147
147
  $type: 'color',
148
148
  $extensions: {
@@ -170,7 +170,7 @@
170
170
  },
171
171
  purple: {
172
172
  color: {
173
- '@': {
173
+ 'emphasis': {
174
174
  $value: '{base.display.color.purple.5}',
175
175
  $type: 'color',
176
176
  $extensions: {
@@ -198,7 +198,7 @@
198
198
  },
199
199
  pink: {
200
200
  color: {
201
- '@': {
201
+ 'emphasis': {
202
202
  $value: '{base.display.color.pink.5}',
203
203
  $type: 'color',
204
204
  $extensions: {
@@ -226,7 +226,7 @@
226
226
  },
227
227
  red: {
228
228
  color: {
229
- '@': {
229
+ 'emphasis': {
230
230
  $value: '{base.display.color.red.5}',
231
231
  $type: 'color',
232
232
  $extensions: {
@@ -254,7 +254,7 @@
254
254
  },
255
255
  gray: {
256
256
  color: {
257
- '@': {
257
+ 'emphasis': {
258
258
  $value: '{base.display.color.gray.4}',
259
259
  $type: 'color',
260
260
  $extensions: {
@@ -326,6 +326,12 @@
326
326
  $type: 'color',
327
327
  },
328
328
  },
329
+ borderColor: {
330
+ rest: {
331
+ $value: '{borderColor.emphasis}',
332
+ $type: 'color',
333
+ },
334
+ },
329
335
  },
330
336
  button: {
331
337
  default: {
@@ -3070,4 +3070,30 @@
3070
3070
  },
3071
3071
  },
3072
3072
  },
3073
+ tooltip: {
3074
+ bgColor: {
3075
+ $value: '{bgColor.emphasis}',
3076
+ $type: 'color',
3077
+ $extensions: {
3078
+ 'org.primer.figma': {
3079
+ collection: 'mode',
3080
+ mode: 'light',
3081
+ group: 'component',
3082
+ scopes: ['bgColor'],
3083
+ },
3084
+ },
3085
+ },
3086
+ fgColor: {
3087
+ $value: '{fgColor.onEmphasis}',
3088
+ $type: 'color',
3089
+ $extensions: {
3090
+ 'org.primer.figma': {
3091
+ collection: 'mode',
3092
+ mode: 'light',
3093
+ group: 'component',
3094
+ scopes: ['fgColor'],
3095
+ },
3096
+ },
3097
+ },
3098
+ },
3073
3099
  }
@@ -49,6 +49,18 @@
49
49
  },
50
50
  },
51
51
  },
52
+ onInverse: {
53
+ $value: '{base.color.white}',
54
+ $type: 'color',
55
+ $extensions: {
56
+ 'org.primer.figma': {
57
+ collection: 'mode',
58
+ mode: 'light',
59
+ group: 'semantic',
60
+ scopes: ['fgColor'],
61
+ },
62
+ },
63
+ },
52
64
  white: {
53
65
  $value: '{base.color.white}',
54
66
  $type: 'color',
@@ -1,72 +1,4 @@
1
1
  {
2
- "space": {
3
- "xxsmall": {
4
- "$value": "2px",
5
- "$type": "dimension",
6
- "deprecated": "Use --base-size-2 instead",
7
- "$extensions": {
8
- "org.primer.figma": {
9
- "collection": "functional/size",
10
- "scopes": ["gap"]
11
- }
12
- }
13
- },
14
- "xsmall": {
15
- "$value": "{base.size.4}",
16
- "$type": "dimension",
17
- "deprecated": "Use --base-size-4 instead",
18
- "$extensions": {
19
- "org.primer.figma": {
20
- "collection": "functional/size",
21
- "scopes": ["gap"]
22
- }
23
- }
24
- },
25
- "small": {
26
- "$value": "6px",
27
- "$type": "dimension",
28
- "deprecated": "Use --base-size-6 instead",
29
- "$extensions": {
30
- "org.primer.figma": {
31
- "collection": "functional/size",
32
- "scopes": ["gap"]
33
- }
34
- }
35
- },
36
- "medium": {
37
- "$value": "{base.size.8}",
38
- "$type": "dimension",
39
- "deprecated": "Use --base-size-8 instead",
40
- "$extensions": {
41
- "org.primer.figma": {
42
- "collection": "functional/size",
43
- "scopes": ["gap"]
44
- }
45
- }
46
- },
47
- "large": {
48
- "$value": "{base.size.12}",
49
- "$type": "dimension",
50
- "deprecated": "Use --base-size-12 instead",
51
- "$extensions": {
52
- "org.primer.figma": {
53
- "collection": "functional/size",
54
- "scopes": ["gap"]
55
- }
56
- }
57
- },
58
- "xlarge": {
59
- "$value": "{base.size.16}",
60
- "$type": "dimension",
61
- "deprecated": "Use --base-size-16 instead",
62
- "$extensions": {
63
- "org.primer.figma": {
64
- "collection": "functional/size",
65
- "scopes": ["gap"]
66
- }
67
- }
68
- }
69
- },
70
2
  "control": {
71
3
  "minTarget": {
72
4
  "fine": {
@@ -1,8 +0,0 @@
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
- }