@automattic/vip-design-system 0.28.4 → 0.28.5

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 (19) hide show
  1. package/build/system/Code/Code.js +6 -2
  2. package/build/system/Code/Code.stories.js +8 -2
  3. package/build/system/Form/RadioBoxGroup.js +12 -7
  4. package/build/system/Notice/Notice.js +4 -1
  5. package/build/system/Spinner/Spinner.js +1 -1
  6. package/build/system/theme/generated/valet-theme-dark.json +62 -52
  7. package/build/system/theme/generated/valet-theme-light.json +22 -12
  8. package/build/system/theme/index.js +7 -5
  9. package/package.json +2 -2
  10. package/src/system/Code/Code.js +6 -2
  11. package/src/system/Code/Code.stories.jsx +6 -1
  12. package/src/system/Form/RadioBoxGroup.js +18 -7
  13. package/src/system/Notice/Notice.js +4 -2
  14. package/src/system/Spinner/Spinner.js +1 -1
  15. package/src/system/theme/generated/valet-theme-dark.json +62 -52
  16. package/src/system/theme/generated/valet-theme-light.json +22 -12
  17. package/src/system/theme/index.js +10 -5
  18. package/tokens/valet-core/wpvip-productive-color-dark.json +61 -51
  19. package/tokens/valet-core/wpvip-productive-color.json +22 -12
package/tokens/valet-core/wpvip-productive-color-dark.json CHANGED
@@ -7,7 +7,7 @@
7
7
  },
8
8
  "overlay": {
9
9
  "type": "color",
10
- "value": "rgba(0,0,0,0.7)",
10
+ "value": "rgba({color.black},0.7)",
11
11
  "description": "Use as modal UI overlay"
12
12
  }
13
13
  },
@@ -88,11 +88,11 @@
88
88
  "radio-box": {
89
89
  "background": {
90
90
  "default": {
91
- "value": "rgba(0,0,0,0)",
91
+ "value": "rgba({color.black},0)",
92
92
  "type": "color"
93
93
  },
94
94
  "hover": {
95
- "value": "rgba(0,0,0,0)",
95
+ "value": "rgba({color.black},0)",
96
96
  "type": "color"
97
97
  },
98
98
  "active": {
@@ -100,7 +100,7 @@
100
100
  "type": "color"
101
101
  },
102
102
  "disabled": {
103
- "value": "rgba(0,0,0,0)",
103
+ "value": "rgba({color.black},0)",
104
104
  "type": "color"
105
105
  }
106
106
  },
@@ -170,8 +170,8 @@
170
170
  },
171
171
  "2": {
172
172
  "type": "color",
173
- "value": "{color.gray.60}",
174
- "description": "Use for high contrast borders"
173
+ "value": "{color.gray.75}",
174
+ "description": "Use for soft borders on default page bg"
175
175
  },
176
176
  "3": {
177
177
  "type": "color",
@@ -223,18 +223,28 @@
223
223
  },
224
224
  "accent": {
225
225
  "type": "color",
226
- "value": "{color.gold.50}"
226
+ "value": "{color.gold.45}"
227
+ },
228
+ "error": {
229
+ "value": "{color.red.40}",
230
+ "type": "color",
231
+ "description": "Use for error text/icons outside of notices."
232
+ },
233
+ "success": {
234
+ "value": "{color.green.45}",
235
+ "type": "color",
236
+ "description": "Use for success text/icons outisde of notices."
227
237
  }
228
238
  },
229
239
  "link": {
230
240
  "default": {
231
241
  "type": "color",
232
- "value": "{color.gold.50}",
242
+ "value": "{color.gold.45}",
233
243
  "description": "Use for text links"
234
244
  },
235
245
  "hover": {
236
246
  "type": "color",
237
- "value": "{color.gold.45}"
247
+ "value": "{color.gold.40}"
238
248
  },
239
249
  "active": {
240
250
  "type": "color",
@@ -276,7 +286,7 @@
276
286
  },
277
287
  "hover": {
278
288
  "type": "color",
279
- "value": "{color.gold.30}"
289
+ "value": "{color.gold.40}"
280
290
  },
281
291
  "disabled": {
282
292
  "value": "{color.gray.80}",
@@ -306,7 +316,7 @@
306
316
  },
307
317
  "hover": {
308
318
  "type": "color",
309
- "value": "{color.gold.30}"
319
+ "value": "{color.gold.40}"
310
320
  },
311
321
  "disabled": {
312
322
  "value": "{color.gray.80}",
@@ -331,7 +341,7 @@
331
341
  "tertiary": {
332
342
  "background": {
333
343
  "default": {
334
- "value": "rgba(0,0,0,0)",
344
+ "value": "rgba({color.black},0)",
335
345
  "type": "color"
336
346
  },
337
347
  "hover": {
@@ -383,7 +393,7 @@
383
393
  "type": "color"
384
394
  },
385
395
  "disabled": {
386
- "value": "rgba(0,0,0,0)",
396
+ "value": "rgba({color.black},0)",
387
397
  "type": "color"
388
398
  }
389
399
  },
@@ -405,7 +415,7 @@
405
415
  "display": {
406
416
  "background": {
407
417
  "default": {
408
- "value": "{color.gold.30}",
418
+ "value": "{color.gold.40}",
409
419
  "type": "color"
410
420
  },
411
421
  "hover": {
@@ -466,7 +476,7 @@
466
476
  "secondary": {
467
477
  "background": {
468
478
  "default": {
469
- "value": "rgba(0,0,0,0)",
479
+ "value": "rgba({color.black},0)",
470
480
  "type": "color"
471
481
  },
472
482
  "hover": {
@@ -474,7 +484,7 @@
474
484
  "type": "color"
475
485
  },
476
486
  "disabled": {
477
- "value": "rgba(0,0,0,0)",
487
+ "value": "rgba({color.black},0)",
478
488
  "type": "color"
479
489
  }
480
490
  },
@@ -510,7 +520,7 @@
510
520
  "ghost": {
511
521
  "background": {
512
522
  "default": {
513
- "value": "rgba(0,0,0,0)",
523
+ "value": "rgba({color.black},0)",
514
524
  "type": "color"
515
525
  },
516
526
  "hover": {
@@ -518,7 +528,7 @@
518
528
  "type": "color"
519
529
  },
520
530
  "disabled": {
521
- "value": "rgba(0,0,0,0)",
531
+ "value": "rgba({color.black},0)",
522
532
  "type": "color"
523
533
  }
524
534
  },
@@ -543,65 +553,65 @@
543
553
  "background": {
544
554
  "error": {
545
555
  "type": "color",
546
- "value": "{color.red.7}"
556
+ "value": "{color.red.75}"
547
557
  },
548
558
  "warning": {
549
559
  "type": "color",
550
- "value": "{color.yellow.7}"
560
+ "value": "{color.yellow.70}"
551
561
  },
552
562
  "info": {
553
563
  "type": "color",
554
- "value": "{color.blue.7}"
564
+ "value": "{color.blue.70}"
555
565
  },
556
566
  "success": {
557
567
  "type": "color",
558
- "value": "{color.green.7}"
568
+ "value": "{color.green.70}"
559
569
  }
560
570
  },
561
571
  "text": {
562
572
  "error": {
563
573
  "type": "color",
564
- "value": "{color.red.85}"
574
+ "value": "{color.red.7}"
565
575
  },
566
576
  "warning": {
567
577
  "type": "color",
568
- "value": "{color.yellow.85}"
578
+ "value": "{color.yellow.7}"
569
579
  },
570
580
  "info": {
571
581
  "type": "color",
572
- "value": "{color.blue.85}"
582
+ "value": "{color.blue.7}"
573
583
  },
574
584
  "success": {
575
585
  "type": "color",
576
- "value": "{color.green.85}"
586
+ "value": "{color.green.7}"
577
587
  }
578
588
  },
579
589
  "icon": {
580
590
  "error": {
581
591
  "type": "color",
582
- "value": "{color.red.50}"
592
+ "value": "{color.red.30}"
583
593
  },
584
594
  "warning": {
585
595
  "type": "color",
586
- "value": "{color.yellow.50}"
596
+ "value": "{color.yellow.35}"
587
597
  },
588
598
  "info": {
589
599
  "type": "color",
590
- "value": "{color.blue.50}"
600
+ "value": "{color.blue.35}"
591
601
  },
592
602
  "success": {
593
603
  "type": "color",
594
- "value": "{color.green.60}"
604
+ "value": "{color.green.35}"
595
605
  }
596
606
  },
597
607
  "accent": {
598
608
  "error": {
599
609
  "type": "color",
600
- "value": "{color.red.35}"
610
+ "value": "{color.red.30}"
601
611
  },
602
612
  "warning": {
603
613
  "type": "color",
604
- "value": "{color.yellow.30}"
614
+ "value": "{color.yellow.35}"
605
615
  },
606
616
  "info": {
607
617
  "type": "color",
@@ -616,77 +626,77 @@
616
626
  "error": {
617
627
  "default": {
618
628
  "type": "color",
619
- "description": "Use for text links",
620
- "value": "{color.red.60}"
629
+ "value": "{color.red.20}",
630
+ "description": "Use for text links"
621
631
  },
622
632
  "hover": {
623
633
  "type": "color",
624
- "value": "{color.red.70}"
634
+ "value": "{color.red.7}"
625
635
  },
626
636
  "active": {
627
637
  "type": "color",
628
- "value": "{color.red.80}"
638
+ "value": "{color.red.7}"
629
639
  },
630
640
  "visited": {
631
641
  "type": "color",
632
- "value": "{color.red.80}"
642
+ "value": "{color.red.20}"
633
643
  }
634
644
  },
635
645
  "warning": {
636
646
  "default": {
637
647
  "type": "color",
638
- "description": "Use for text links",
639
- "value": "{color.yellow.60}"
648
+ "value": "{color.yellow.20}",
649
+ "description": "Use for text links"
640
650
  },
641
651
  "hover": {
642
652
  "type": "color",
643
- "value": "{color.yellow.70}"
653
+ "value": "{color.yellow.7}"
644
654
  },
645
655
  "active": {
646
656
  "type": "color",
647
- "value": "{color.yellow.80}"
657
+ "value": "{color.yellow.7}"
648
658
  },
649
659
  "visited": {
650
660
  "type": "color",
651
- "value": "{color.yellow.70}"
661
+ "value": "{color.yellow.20}"
652
662
  }
653
663
  },
654
664
  "info": {
655
665
  "default": {
656
666
  "type": "color",
657
- "value": "{color.blue.65}",
667
+ "value": "{color.blue.20}",
658
668
  "description": "Use for text links"
659
669
  },
660
670
  "hover": {
661
671
  "type": "color",
662
- "value": "{color.blue.70}"
672
+ "value": "{color.blue.7}"
663
673
  },
664
674
  "active": {
665
675
  "type": "color",
666
- "value": "{color.blue.80}"
676
+ "value": "{color.blue.7}"
667
677
  },
668
678
  "visited": {
669
679
  "type": "color",
670
- "value": "{color.blue.70}"
680
+ "value": "{color.blue.20}"
671
681
  }
672
682
  },
673
683
  "success": {
674
684
  "default": {
675
685
  "type": "color",
676
- "description": "Use for text links",
677
- "value": "{color.green.60}"
686
+ "value": "{color.green.20}",
687
+ "description": "Use for text links"
678
688
  },
679
689
  "hover": {
680
690
  "type": "color",
681
- "value": "{color.green.70}"
691
+ "value": "{color.green.7}"
682
692
  },
683
693
  "active": {
684
694
  "type": "color",
685
- "value": "{color.green.80}"
695
+ "value": "{color.green.7}"
686
696
  },
687
697
  "visited": {
688
698
  "type": "color",
689
- "value": "{color.green.70}"
699
+ "value": "{color.green.20}"
690
700
  }
691
701
  }
692
702
  }
package/tokens/valet-core/wpvip-productive-color.json CHANGED
@@ -6,7 +6,7 @@
6
6
  "value": "{color.gray.0}"
7
7
  },
8
8
  "overlay": {
9
- "value": "rgba(0,0,0,0.7)",
9
+ "value": "rgba({color.black},0.7)",
10
10
  "type": "color",
11
11
  "description": "Use for modal UI overlay"
12
12
  }
@@ -85,11 +85,11 @@
85
85
  "radio-box": {
86
86
  "background": {
87
87
  "default": {
88
- "value": "rgba(255,255,255,0)",
88
+ "value": "rgba({color.gray.0},0)",
89
89
  "type": "color"
90
90
  },
91
91
  "hover": {
92
- "value": "rgba(255,255,255,0)",
92
+ "value": "rgba({color.gray.0},0)",
93
93
  "type": "color"
94
94
  },
95
95
  "active": {
@@ -97,7 +97,7 @@
97
97
  "type": "color"
98
98
  },
99
99
  "disabled": {
100
- "value": "rgba(255,255,255,0)",
100
+ "value": "rgba({color.gray.0},0)",
101
101
  "type": "color"
102
102
  }
103
103
  },
@@ -218,6 +218,16 @@
218
218
  "accent": {
219
219
  "type": "color",
220
220
  "value": "{color.gold.60}"
221
+ },
222
+ "error": {
223
+ "value": "{color.red.60}",
224
+ "type": "color",
225
+ "description": "Use for error text/icons outside of a notice."
226
+ },
227
+ "success": {
228
+ "value": "{color.green.60}",
229
+ "type": "color",
230
+ "description": "Use for success text/icons outside of a notice."
221
231
  }
222
232
  },
223
233
  "link": {
@@ -325,7 +335,7 @@
325
335
  "tertiary": {
326
336
  "background": {
327
337
  "default": {
328
- "value": "rgba(255,255,255,0)",
338
+ "value": "rgba({color.gray.0},0)",
329
339
  "type": "color"
330
340
  },
331
341
  "hover": {
@@ -333,7 +343,7 @@
333
343
  "value": "{color.gray.10}"
334
344
  },
335
345
  "disabled": {
336
- "value": "rgba(255,255,255,0)",
346
+ "value": "rgba({color.gray.0},0)",
337
347
  "type": "color"
338
348
  }
339
349
  },
@@ -369,7 +379,7 @@
369
379
  "ghost": {
370
380
  "background": {
371
381
  "default": {
372
- "value": "rgba(255,255,255,0)",
382
+ "value": "rgba({color.gray.0},0)",
373
383
  "type": "color"
374
384
  },
375
385
  "hover": {
@@ -377,7 +387,7 @@
377
387
  "type": "color"
378
388
  },
379
389
  "disabled": {
380
- "value": "rgba(255,255,255,0)",
390
+ "value": "rgba({color.gray.0},0)",
381
391
  "type": "color"
382
392
  }
383
393
  },
@@ -460,7 +470,7 @@
460
470
  "secondary": {
461
471
  "background": {
462
472
  "default": {
463
- "value": "rgba(255,255,255,0)",
473
+ "value": "rgba({color.gray.0},0)",
464
474
  "type": "color"
465
475
  },
466
476
  "hover": {
@@ -468,7 +478,7 @@
468
478
  "type": "color"
469
479
  },
470
480
  "disabled": {
471
- "value": "rgba(255,255,255,0)",
481
+ "value": "rgba({color.gray.0},0)",
472
482
  "type": "color"
473
483
  }
474
484
  },
@@ -504,7 +514,7 @@
504
514
  "ghost": {
505
515
  "background": {
506
516
  "default": {
507
- "value": "rgba(255,255,255,0)",
517
+ "value": "rgba({color.gray.0},0)",
508
518
  "type": "color"
509
519
  },
510
520
  "hover": {
@@ -512,7 +522,7 @@
512
522
  "type": "color"
513
523
  },
514
524
  "disabled": {
515
- "value": "rgba(255,255,255,0)",
525
+ "value": "rgba({color.gray.0},0)",
516
526
  "type": "color"
517
527
  }
518
528
  },