@automattic/vip-design-system 2.4.5 → 2.6.1

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 (97) hide show
  1. package/build/system/Breadcrumbs/Breadcrumbs.d.ts +1 -0
  2. package/build/system/Breadcrumbs/Breadcrumbs.js +75 -20
  3. package/build/system/Breadcrumbs/Breadcrumbs.stories.d.ts +2 -0
  4. package/build/system/Breadcrumbs/Breadcrumbs.stories.js +47 -7
  5. package/build/system/Breadcrumbs/Breadcrumbs.test.js +72 -0
  6. package/build/system/Breadcrumbs/styles.d.ts +2 -0
  7. package/build/system/Breadcrumbs/styles.js +8 -2
  8. package/build/system/Dropdown/Dropdown.d.ts +25 -36
  9. package/build/system/Dropdown/Dropdown.js +60 -99
  10. package/build/system/Dropdown/Dropdown.stories.d.ts +1 -26
  11. package/build/system/Dropdown/Dropdown.test.js +51 -28
  12. package/build/system/Dropdown/DropdownContent.d.ts +14 -10
  13. package/build/system/Dropdown/DropdownContent.js +43 -47
  14. package/build/system/Dropdown/DropdownItem.d.ts +20 -32
  15. package/build/system/Dropdown/DropdownItem.js +86 -103
  16. package/build/system/Dropdown/DropdownLabel.d.ts +11 -7
  17. package/build/system/Dropdown/DropdownLabel.js +29 -29
  18. package/build/system/Dropdown/DropdownSeparator.d.ts +10 -6
  19. package/build/system/Dropdown/DropdownSeparator.js +28 -28
  20. package/build/system/Dropdown/index.d.ts +17 -39
  21. package/build/system/Dropdown/index.js +23 -50
  22. package/build/system/FilterDropdown/FilterDropdown.d.ts +27 -0
  23. package/build/system/FilterDropdown/FilterDropdown.js +75 -0
  24. package/build/system/FilterDropdown/FilterDropdown.stories.d.ts +18 -0
  25. package/build/system/FilterDropdown/FilterDropdown.stories.js +46 -0
  26. package/build/system/FilterDropdown/FilterDropdown.test.d.ts +1 -0
  27. package/build/system/FilterDropdown/FilterDropdown.test.js +53 -0
  28. package/build/system/Hr/Hr.d.ts +7 -0
  29. package/build/system/Hr/Hr.js +22 -0
  30. package/build/system/Hr/Hr.stories.d.ts +23 -0
  31. package/build/system/Hr/Hr.stories.js +30 -0
  32. package/build/system/Hr/Hr.test.d.ts +1 -0
  33. package/build/system/Hr/Hr.test.js +41 -0
  34. package/build/system/Link/Link.d.ts +11 -1
  35. package/build/system/Link/Link.js +16 -1
  36. package/build/system/Link/Link.stories.d.ts +14 -1
  37. package/build/system/Link/Link.stories.js +16 -3
  38. package/build/system/Nav/styles.js +2 -1
  39. package/build/system/Page/Page.d.ts +2 -0
  40. package/build/system/Page/Page.js +10 -0
  41. package/build/system/Page/Page.test.d.ts +1 -0
  42. package/build/system/Page/Page.test.js +41 -0
  43. package/build/system/index.d.ts +3 -1
  44. package/build/system/index.js +4 -0
  45. package/build/system/theme/index.d.ts +889 -23
  46. package/build/system/theme/index.js +7 -8
  47. package/build/system/utils/stories/CustomLink.d.ts +1 -0
  48. package/build/system/utils/stories/CustomLink.js +7 -1
  49. package/package.json +1 -1
  50. package/src/system/Breadcrumbs/Breadcrumbs.stories.tsx +32 -3
  51. package/src/system/Breadcrumbs/Breadcrumbs.test.tsx +60 -0
  52. package/src/system/Breadcrumbs/Breadcrumbs.tsx +100 -29
  53. package/src/system/Breadcrumbs/styles.ts +11 -0
  54. package/src/system/Dropdown/{Dropdown.test.js → Dropdown.test.tsx} +2 -1
  55. package/src/system/Dropdown/Dropdown.tsx +72 -0
  56. package/src/system/Dropdown/DropdownContent.tsx +46 -0
  57. package/src/system/Dropdown/DropdownItem.tsx +112 -0
  58. package/src/system/Dropdown/DropdownLabel.tsx +29 -0
  59. package/src/system/Dropdown/DropdownSeparator.tsx +28 -0
  60. package/src/system/Dropdown/{index.js → index.ts} +1 -3
  61. package/src/system/FilterDropdown/FilterDropdown.stories.tsx +57 -0
  62. package/src/system/FilterDropdown/FilterDropdown.test.tsx +52 -0
  63. package/src/system/FilterDropdown/FilterDropdown.tsx +92 -0
  64. package/src/system/Hr/Hr.stories.tsx +48 -0
  65. package/src/system/Hr/Hr.test.tsx +22 -0
  66. package/src/system/Hr/Hr.tsx +11 -0
  67. package/src/system/Link/Link.stories.tsx +42 -1
  68. package/src/system/Link/Link.tsx +17 -8
  69. package/src/system/Nav/styles.ts +1 -0
  70. package/src/system/Page/Page.test.tsx +22 -0
  71. package/src/system/Page/Page.tsx +3 -0
  72. package/src/system/index.js +4 -0
  73. package/src/system/theme/index.js +7 -8
  74. package/src/system/utils/stories/CustomLink.tsx +6 -0
  75. package/tokens/valet-core/$metadata.json +1 -17
  76. package/tokens/valet-core/$themes.json +0 -2586
  77. package/src/system/Dropdown/Dropdown.js +0 -101
  78. package/src/system/Dropdown/DropdownContent.js +0 -50
  79. package/src/system/Dropdown/DropdownItem.js +0 -108
  80. package/src/system/Dropdown/DropdownLabel.js +0 -31
  81. package/src/system/Dropdown/DropdownSeparator.js +0 -30
  82. package/tokens/valet-core/figma-parsely-web-type.json +0 -1217
  83. package/tokens/valet-core/figma-valet-web-type.json +0 -1217
  84. package/tokens/valet-core/figma-wpvip-services-web-type.json +0 -1267
  85. package/tokens/valet-core/figma-wpvip-web-type.json +0 -1213
  86. package/tokens/valet-core/parsely-web-color.json +0 -729
  87. package/tokens/valet-core/parsely-web-core.json +0 -172
  88. package/tokens/valet-core/parsely-web-type.json +0 -362
  89. package/tokens/valet-core/valet-web-color.json +0 -677
  90. package/tokens/valet-core/valet-web-core.json +0 -172
  91. package/tokens/valet-core/wpvip-services-web-color.json +0 -730
  92. package/tokens/valet-core/wpvip-services-web-core.json +0 -172
  93. package/tokens/valet-core/wpvip-services-web-type.json +0 -412
  94. package/tokens/valet-core/wpvip-web-color-dark.json +0 -735
  95. package/tokens/valet-core/wpvip-web-color.json +0 -730
  96. package/tokens/valet-core/wpvip-web-type.json +0 -412
  97. package/tokens/valet-core/wpvip-web.json +0 -1310
package/tokens/valet-core/valet-web-color.json DELETED
@@ -1,677 +0,0 @@
1
- {
2
- "background": {
3
- "primary": {
4
- "type": "color",
5
- "description": "Use as main application background",
6
- "value": "{color.blue.3}"
7
- },
8
- "inverse": {
9
- "value": "{color.black}",
10
- "type": "color",
11
- "description": "Use as component background in high-contrast situations. "
12
- },
13
- "brand": {
14
- "type": "color",
15
- "value": "{color.blue.30}"
16
- }
17
- },
18
- "layer": {
19
- "1": {
20
- "type": "color",
21
- "value": "{color.gray.0}"
22
- },
23
- "2": {
24
- "type": "color",
25
- "value": "{color.gray.3}"
26
- },
27
- "3": {
28
- "type": "color",
29
- "value": "{color.gray.0}"
30
- },
31
- "4": {
32
- "value": "{color.pure-white}",
33
- "type": "color"
34
- },
35
- "accent": {
36
- "neutral-1": {
37
- "type": "color",
38
- "value": "{color.gradient.neutral-light-1}"
39
- },
40
- "neutral-2": {
41
- "type": "color",
42
- "value": "{color.gradient.neutral-light-2}"
43
- },
44
- "neutral-3": {
45
- "type": "color",
46
- "value": "{color.gradient.neutral-light-3}"
47
- },
48
- "neutral-4": {
49
- "type": "color",
50
- "value": "{color.gradient.neutral-light-4}"
51
- },
52
- "brand": {
53
- "type": "color",
54
- "value": "{color.blue.30}"
55
- },
56
- "gold": {
57
- "type": "color",
58
- "value": "{color.gold.20}"
59
- },
60
- "pink": {
61
- "type": "color",
62
- "value": "{color.pink.20}"
63
- },
64
- "red": {
65
- "type": "color",
66
- "value": "{color.red.30}"
67
- },
68
- "salmon": {
69
- "type": "color",
70
- "value": "{color.salmon.25}"
71
- },
72
- "orange": {
73
- "type": "color",
74
- "value": "{color.orange.25}"
75
- },
76
- "yellow": {
77
- "type": "color",
78
- "value": "{color.yellow.20}"
79
- },
80
- "green": {
81
- "type": "color",
82
- "value": "{color.green.25}"
83
- },
84
- "blue": {
85
- "type": "color",
86
- "value": "{color.blue.25}"
87
- },
88
- "colorful-1": {
89
- "type": "color",
90
- "value": "{color.gradient.colorful-light-1}"
91
- },
92
- "colorful-2": {
93
- "type": "color",
94
- "value": "{color.gradient.colorful-light-2}"
95
- },
96
- "colorful-3": {
97
- "type": "color",
98
- "value": "{color.gradient.colorful-light-3}"
99
- },
100
- "colorful-4": {
101
- "type": "color",
102
- "value": "{color.gradient.colorful-light-4}"
103
- },
104
- "dark-1": {
105
- "type": "color",
106
- "value": "{color.gradient.colorful-dark-1}"
107
- },
108
- "dark-2": {
109
- "type": "color",
110
- "value": "{color.gradient.colorful-dark-2}"
111
- },
112
- "black": {
113
- "value": "{color.black}",
114
- "type": "color"
115
- }
116
- }
117
- },
118
- "field": {
119
- "1": {
120
- "value": "rgba(0,0,0,0)",
121
- "type": "color"
122
- },
123
- "2": {
124
- "value": "rgba(0,0,0,0)",
125
- "type": "color"
126
- },
127
- "3": {
128
- "value": "rgba(0,0,0,0)",
129
- "type": "color"
130
- },
131
- "4": {
132
- "value": "rgba(0,0,0,0)",
133
- "type": "color"
134
- }
135
- },
136
- "border": {
137
- "1": {
138
- "value": "{color.black}",
139
- "type": "color"
140
- },
141
- "2": {
142
- "type": "color",
143
- "value": "{color.gray.70}"
144
- },
145
- "3": {
146
- "type": "color",
147
- "value": "{color.gray.25}"
148
- },
149
- "4": {
150
- "type": "color",
151
- "value": "{color.gray.15}"
152
- },
153
- "accent": {
154
- "type": "color",
155
- "value": "{color.blue.50}"
156
- }
157
- },
158
- "text": {
159
- "primary": {
160
- "value": "{color.black}",
161
- "type": "color",
162
- "description": "Use for headings"
163
- },
164
- "secondary": {
165
- "type": "color",
166
- "description": "Use for body text ",
167
- "value": "{color.gray.75}"
168
- },
169
- "helper": {
170
- "type": "color",
171
- "description": "Use for helper text",
172
- "value": "{color.gray.60}"
173
- },
174
- "placeholder": {
175
- "type": "color",
176
- "description": "Use for placeholder text in fields",
177
- "value": "{color.gray.45}"
178
- },
179
- "disabled": {
180
- "type": "color",
181
- "value": "{color.gray.25}"
182
- },
183
- "inverse": {
184
- "type": "color",
185
- "value": "{color.gray.0}"
186
- },
187
- "interactive": {
188
- "type": "color",
189
- "value": "{color.blue.60}"
190
- }
191
- },
192
- "link": {
193
- "default": {
194
- "type": "color",
195
- "description": "Use for text links",
196
- "value": "{color.blue.60}"
197
- },
198
- "hover": {
199
- "type": "color",
200
- "value": "{color.blue.70}"
201
- },
202
- "active": {
203
- "type": "color",
204
- "value": "{color.blue.80}"
205
- },
206
- "visited": {
207
- "type": "color",
208
- "value": "{color.blue.70}"
209
- }
210
- },
211
- "icon": {
212
- "primary": {
213
- "value": "{color.black}",
214
- "type": "color"
215
- },
216
- "secondary": {
217
- "type": "color",
218
- "value": "{color.gray.60}"
219
- },
220
- "helper": {
221
- "type": "color",
222
- "value": "{color.gray.40}"
223
- },
224
- "inverse": {
225
- "type": "color",
226
- "value": "{color.gray.0}"
227
- },
228
- "disabled": {
229
- "type": "color",
230
- "value": "{color.gray.25}"
231
- }
232
- },
233
- "button": {
234
- "primary": {
235
- "default": {
236
- "value": "{color.black}",
237
- "type": "color"
238
- },
239
- "hover": {
240
- "type": "color",
241
- "value": "{color.blue.30}"
242
- },
243
- "active": {
244
- "type": "color",
245
- "value": "{color.blue.50}"
246
- },
247
- "disabled": {
248
- "type": "color",
249
- "value": "{color.gray.50}"
250
- }
251
- },
252
- "secondary": {
253
- "default": {
254
- "value": "rgba(0,0,0,0)",
255
- "type": "color"
256
- },
257
- "hover": {
258
- "type": "color",
259
- "value": "{color.blue.30}"
260
- },
261
- "active": {
262
- "type": "color",
263
- "value": "{color.blue.50}"
264
- },
265
- "disabled": {
266
- "value": "rgba(0,0,0,0)",
267
- "type": "color"
268
- }
269
- },
270
- "tertiary": {
271
- "default": {
272
- "value": "rgba(0,0,0,0)",
273
- "type": "color"
274
- },
275
- "hover": {
276
- "type": "color",
277
- "value": "{color.gray.7}"
278
- },
279
- "active": {
280
- "type": "color",
281
- "value": "{color.gray.25}"
282
- },
283
- "disabled": {
284
- "value": "rgba(0,0,0,0)",
285
- "type": "color"
286
- }
287
- },
288
- "display": {
289
- "default": {
290
- "value": "linear-gradient(55deg, {color.blue.30} 10%, {color.blue.20} 90%)",
291
- "type": "color"
292
- },
293
- "hover": {
294
- "value": "linear-gradient(55deg, {color.blue.65} 10%, {color.blue.45} 90%)",
295
- "type": "color"
296
- },
297
- "active": {
298
- "type": "color",
299
- "value": "{color.blue.65}"
300
- },
301
- "disabled": {
302
- "type": "color",
303
- "value": "{color.gray.50}"
304
- }
305
- }
306
- },
307
- "support": {
308
- "background": {
309
- "error": {
310
- "type": "color",
311
- "value": "{color.red.7}"
312
- },
313
- "warning": {
314
- "type": "color",
315
- "value": "{color.yellow.7}"
316
- },
317
- "info": {
318
- "type": "color",
319
- "value": "{color.blue.7}"
320
- },
321
- "success": {
322
- "type": "color",
323
- "value": "{color.green.7}"
324
- }
325
- },
326
- "text": {
327
- "error": {
328
- "type": "color",
329
- "value": "{color.red.60}"
330
- },
331
- "warning": {
332
- "type": "color",
333
- "value": "{color.yellow.60}"
334
- },
335
- "info": {
336
- "type": "color",
337
- "value": "{color.blue.60}"
338
- },
339
- "success": {
340
- "type": "color",
341
- "value": "{color.green.60}"
342
- }
343
- },
344
- "icon": {
345
- "error": {
346
- "type": "color",
347
- "value": "{color.red.50}"
348
- },
349
- "warning": {
350
- "type": "color",
351
- "value": "{color.yellow.50}"
352
- },
353
- "info": {
354
- "type": "color",
355
- "value": "{color.blue.50}"
356
- },
357
- "success": {
358
- "type": "color",
359
- "value": "{color.green.50}"
360
- }
361
- },
362
- "accent": {
363
- "error": {
364
- "type": "color",
365
- "value": "{color.red.60}"
366
- },
367
- "warning": {
368
- "type": "color",
369
- "value": "{color.yellow.60}"
370
- },
371
- "info": {
372
- "type": "color",
373
- "value": "{color.blue.60}"
374
- },
375
- "success": {
376
- "type": "color",
377
- "value": "{color.green.60}"
378
- }
379
- },
380
- "link": {
381
- "error": {
382
- "default": {
383
- "type": "color",
384
- "description": "Use for text links",
385
- "value": "{color.red.60}"
386
- },
387
- "hover": {
388
- "type": "color",
389
- "value": "{color.red.70}"
390
- },
391
- "active": {
392
- "type": "color",
393
- "value": "{color.red.80}"
394
- },
395
- "visited": {
396
- "type": "color",
397
- "value": "{color.red.80}"
398
- }
399
- },
400
- "warning": {
401
- "default": {
402
- "type": "color",
403
- "description": "Use for text links",
404
- "value": "{color.yellow.60}"
405
- },
406
- "hover": {
407
- "type": "color",
408
- "value": "{color.yellow.70}"
409
- },
410
- "active": {
411
- "type": "color",
412
- "value": "{color.yellow.80}"
413
- },
414
- "visited": {
415
- "type": "color",
416
- "value": "{color.yellow.70}"
417
- }
418
- },
419
- "info": {
420
- "default": {
421
- "type": "color",
422
- "description": "Use for text links",
423
- "value": "{color.blue.60}"
424
- },
425
- "hover": {
426
- "type": "color",
427
- "value": "{color.blue.70}"
428
- },
429
- "active": {
430
- "type": "color",
431
- "value": "{color.blue.80}"
432
- },
433
- "visited": {
434
- "type": "color",
435
- "value": "{color.blue.70}"
436
- }
437
- },
438
- "success": {
439
- "default": {
440
- "type": "color",
441
- "description": "Use for text links",
442
- "value": "{color.green.60}"
443
- },
444
- "hover": {
445
- "type": "color",
446
- "value": "{color.green.70}"
447
- },
448
- "active": {
449
- "type": "color",
450
- "value": "{color.green.80}"
451
- },
452
- "visited": {
453
- "type": "color",
454
- "value": "{color.green.70}"
455
- }
456
- }
457
- }
458
- },
459
- "focus": {
460
- "default": {
461
- "value": "{color.focus}",
462
- "type": "color"
463
- },
464
- "inset": {
465
- "value": "{color.pure-white}",
466
- "type": "color"
467
- }
468
- },
469
- "overlay": {
470
- "type": "color",
471
- "value": "{color.gray.55}"
472
- },
473
- "interactive": {
474
- "type": "color",
475
- "value": "{color.blue.55}"
476
- },
477
- "tag": {
478
- "gray": {
479
- "background": {
480
- "type": "color",
481
- "value": "{color.gray.7}"
482
- },
483
- "text": {
484
- "value": "{color.black}",
485
- "type": "color"
486
- },
487
- "icon": {
488
- "type": "color",
489
- "value": "{color.gray.65}"
490
- },
491
- "hover": {
492
- "type": "color",
493
- "value": "{color.gray.15}"
494
- },
495
- "active": {
496
- "type": "color",
497
- "value": "{color.gray.20}"
498
- }
499
- },
500
- "blue": {
501
- "background": {
502
- "type": "color",
503
- "value": "{color.blue.7}"
504
- },
505
- "text": {
506
- "value": "{color.black}",
507
- "type": "color"
508
- },
509
- "icon": {
510
- "type": "color",
511
- "value": "{color.blue.65}"
512
- },
513
- "hover": {
514
- "type": "color",
515
- "value": "{color.blue.15}"
516
- },
517
- "active": {
518
- "type": "color",
519
- "value": "{color.blue.20}"
520
- }
521
- },
522
- "green": {
523
- "background": {
524
- "type": "color",
525
- "value": "{color.green.7}"
526
- },
527
- "text": {
528
- "value": "{color.black}",
529
- "type": "color"
530
- },
531
- "icon": {
532
- "type": "color",
533
- "value": "{color.green.65}"
534
- },
535
- "hover": {
536
- "type": "color",
537
- "value": "{color.green.15}"
538
- },
539
- "active": {
540
- "type": "color",
541
- "value": "{color.green.20}"
542
- }
543
- },
544
- "red": {
545
- "background": {
546
- "type": "color",
547
- "value": "{color.red.7}"
548
- },
549
- "text": {
550
- "value": "{color.black}",
551
- "type": "color"
552
- },
553
- "icon": {
554
- "type": "color",
555
- "value": "{color.red.65}"
556
- },
557
- "hover": {
558
- "type": "color",
559
- "value": "{color.red.15}"
560
- },
561
- "active": {
562
- "type": "color",
563
- "value": "{color.red.20}"
564
- }
565
- },
566
- "gold": {
567
- "background": {
568
- "type": "color",
569
- "value": "{color.gold.7}"
570
- },
571
- "text": {
572
- "value": "{color.black}",
573
- "type": "color"
574
- },
575
- "icon": {
576
- "type": "color",
577
- "value": "{color.gold.65}"
578
- },
579
- "hover": {
580
- "type": "color",
581
- "value": "{color.gold.15}"
582
- },
583
- "active": {
584
- "type": "color",
585
- "value": "{color.gold.20}"
586
- }
587
- },
588
- "yellow": {
589
- "background": {
590
- "type": "color",
591
- "value": "{color.yellow.7}"
592
- },
593
- "text": {
594
- "value": "{color.black}",
595
- "type": "color"
596
- },
597
- "icon": {
598
- "type": "color",
599
- "value": "{color.yellow.65}"
600
- },
601
- "hover": {
602
- "type": "color",
603
- "value": "{color.yellow.15}"
604
- },
605
- "active": {
606
- "type": "color",
607
- "value": "{color.yellow.20}"
608
- }
609
- },
610
- "orange": {
611
- "background": {
612
- "type": "color",
613
- "value": "{color.orange.7}"
614
- },
615
- "text": {
616
- "value": "{color.black}",
617
- "type": "color"
618
- },
619
- "icon": {
620
- "type": "color",
621
- "value": "{color.orange.65}"
622
- },
623
- "hover": {
624
- "type": "color",
625
- "value": "{color.orange.15}"
626
- },
627
- "active": {
628
- "type": "color",
629
- "value": "{color.orange.20}"
630
- }
631
- },
632
- "salmon": {
633
- "background": {
634
- "type": "color",
635
- "value": "{color.salmon.7}"
636
- },
637
- "text": {
638
- "value": "{color.black}",
639
- "type": "color"
640
- },
641
- "icon": {
642
- "type": "color",
643
- "value": "{color.salmon.65}"
644
- },
645
- "hover": {
646
- "type": "color",
647
- "value": "{color.salmon.15}"
648
- },
649
- "active": {
650
- "type": "color",
651
- "value": "{color.salmon.20}"
652
- }
653
- },
654
- "pink": {
655
- "background": {
656
- "type": "color",
657
- "value": "{color.pink.7}"
658
- },
659
- "text": {
660
- "value": "{color.black}",
661
- "type": "color"
662
- },
663
- "icon": {
664
- "type": "color",
665
- "value": "{color.pink.65}"
666
- },
667
- "hover": {
668
- "type": "color",
669
- "value": "{color.pink.15}"
670
- },
671
- "active": {
672
- "type": "color",
673
- "value": "{color.pink.20}"
674
- }
675
- }
676
- }
677
- }