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