@automattic/vip-design-system 0.28.0 → 0.28.2

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 (71) hide show
  1. package/.storybook/decorators/withColorMode.jsx +15 -2
  2. package/README.md +3 -3
  3. package/build/system/Accordion/Accordion.js +21 -30
  4. package/build/system/Badge/Badge.stories.js +1 -1
  5. package/build/system/Dialog/DialogButton.js +1 -1
  6. package/build/system/Dropdown/Dropdown.stories.js +9 -5
  7. package/build/system/Form/InlineSelect.js +3 -3
  8. package/build/system/Form/Input.js +1 -0
  9. package/build/system/Form/Input.styles.js +2 -2
  10. package/build/system/Form/Label.js +1 -1
  11. package/build/system/Form/Radio.stories.js +1 -1
  12. package/build/system/Form/SearchSelect.js +4 -4
  13. package/build/system/NewForm/FormAutocomplete.js +12 -2
  14. package/build/system/NewForm/FormAutocomplete.stories.js +14 -2
  15. package/build/system/NewForm/FormSelect.stories.js +3 -1
  16. package/build/system/Notice/Notice.js +1 -0
  17. package/build/system/Notice/Notice.stories.js +13 -23
  18. package/build/system/ResourceList/ResourceList.js +35 -26
  19. package/build/system/ResourceList/ResourceList.stories.js +2 -0
  20. package/build/system/Table/Table.stories.js +0 -3
  21. package/build/system/Tabs/Tabs.stories.js +3 -3
  22. package/build/system/Wizard/WizardStep.js +5 -3
  23. package/build/system/theme/colors.js +7 -170
  24. package/build/system/theme/generated/valet-theme-dark.json +2924 -0
  25. package/{src/system/theme/generated/valet-theme.json → build/system/theme/generated/valet-theme-light.json} +73 -16
  26. package/build/system/theme/generated/valet-theme.json +26 -8
  27. package/build/system/theme/getColor.js +53 -50
  28. package/build/system/theme/index.js +114 -150
  29. package/build/system/theme/textStyles.js +51 -0
  30. package/package.json +7 -3
  31. package/src/system/Accordion/Accordion.js +8 -6
  32. package/src/system/Badge/Badge.stories.jsx +2 -2
  33. package/src/system/Dialog/DialogButton.js +1 -1
  34. package/src/system/Dropdown/Dropdown.stories.jsx +12 -10
  35. package/src/system/Form/InlineSelect.js +3 -3
  36. package/src/system/Form/Input.js +1 -0
  37. package/src/system/Form/Input.styles.js +2 -2
  38. package/src/system/Form/Label.js +1 -1
  39. package/src/system/Form/Radio.stories.jsx +3 -3
  40. package/src/system/Form/SearchSelect.js +4 -4
  41. package/src/system/NewForm/FormAutocomplete.js +11 -0
  42. package/src/system/NewForm/FormAutocomplete.stories.jsx +13 -0
  43. package/src/system/NewForm/FormSelect.stories.jsx +3 -2
  44. package/src/system/Notice/Notice.js +3 -1
  45. package/src/system/Notice/Notice.stories.jsx +8 -12
  46. package/src/system/Table/Table.stories.jsx +1 -1
  47. package/src/system/Tabs/Tabs.stories.jsx +3 -3
  48. package/src/system/Wizard/WizardStep.js +9 -3
  49. package/src/system/theme/colors.js +5 -171
  50. package/src/system/theme/generated/valet-theme-dark.json +2924 -0
  51. package/src/system/theme/generated/valet-theme-light.json +2918 -0
  52. package/src/system/theme/getColor.js +46 -40
  53. package/src/system/theme/index.js +150 -172
  54. package/src/system/theme/textStyles.js +46 -0
  55. package/tokens/valet-core/$metadata.json +1 -0
  56. package/tokens/valet-core/$themes.json +15 -91
  57. package/tokens/valet-core/wpvip-expressive-type.json +8 -8
  58. package/tokens/valet-core/wpvip-productive-color-dark.json +946 -0
  59. package/tokens/valet-core/wpvip-productive-color.json +73 -16
  60. package/.idea/GitLink.xml +0 -6
  61. package/.idea/codeStyles/Project.xml +0 -69
  62. package/.idea/codeStyles/codeStyleConfig.xml +0 -5
  63. package/.idea/dbnavigator.xml +0 -467
  64. package/.idea/git_toolbox_prj.xml +0 -15
  65. package/.idea/inspectionProfiles/Project_Default.xml +0 -6
  66. package/.idea/jsLinters/eslint.xml +0 -6
  67. package/.idea/misc.xml +0 -6
  68. package/.idea/modules.xml +0 -8
  69. package/.idea/php.xml +0 -12
  70. package/.idea/vcs.xml +0 -6
  71. package/.idea/vip-design-system.iml +0 -9
package/tokens/valet-core/$themes.json CHANGED
@@ -4,19 +4,9 @@
4
4
  "name": "parsely-figma",
5
5
  "selectedTokenSets": {
6
6
  "valet-core": "source",
7
- "valet-expressive-color": "disabled",
8
- "wpvip-expressive-core": "disabled",
9
- "wpvip-expressive-color": "disabled",
10
- "wpvip-expressive-type": "disabled",
11
- "wpvip-productive-color": "disabled",
12
- "figma-valet-expressive-type": "disabled",
13
- "figma-wpvip-expressive-type": "disabled",
14
7
  "parsely-expressive-core": "enabled",
15
8
  "parsely-expressive-color": "enabled",
16
- "parsely-expressive-type": "disabled",
17
- "figma-parsely-expressive-type": "enabled",
18
- "valet-expressive-core": "disabled",
19
- "wpvip-expressive-color-dark": "disabled"
9
+ "figma-parsely-expressive-type": "enabled"
20
10
  },
21
11
  "$figmaStyleReferences": {
22
12
  "body.1-short": "S:012ec39ef41de056297a03a4e4172cfd60fcb278,",
@@ -161,7 +151,6 @@
161
151
  "text.helper": "S:34141d14303e5e74818803dca920070dbfb840ec,",
162
152
  "text.placeholder": "S:ba4d39b0de51d499c3f079539dfe1f5fca697722,",
163
153
  "text.disabled": "S:ab2e27bd4b95d9525fa22544ff9e56aabba9543f,",
164
- "text.inverse": "S:846f5db726422b124095233b711c4d6ba2920eb4,",
165
154
  "link.default": "S:d2047ddea88d6e12a0eddf9d2125735f9e515655,",
166
155
  "link.hover": "S:76d4469f9a91d0c34ed469f013a80f5425523cc2,",
167
156
  "link.active": "S:69ea195c70753129fcf9607195f02402394d7eb9,",
@@ -277,7 +266,8 @@
277
266
  "button.secondary.background.default": "S:de79bf79bde1b959a215706e54704d2c4bee9314,",
278
267
  "button.secondary.background.hover": "S:cdbf6a6e5cdf5bbe04329daed094d8d22fc2a608,",
279
268
  "button.tertiary.background.default": "S:a867b0a2ad5bbf2360bff5dcfd6ac23a855f9d8c,",
280
- "button.tertiary.background.hover": "S:65ed44bcb23050a9acd71fece00be43db57a1aaa,"
269
+ "button.tertiary.background.hover": "S:65ed44bcb23050a9acd71fece00be43db57a1aaa,",
270
+ "text.inverse": "S:846f5db726422b124095233b711c4d6ba2920eb4,"
281
271
  }
282
272
  },
283
273
  {
@@ -285,19 +275,9 @@
285
275
  "name": "wpvip-figma",
286
276
  "selectedTokenSets": {
287
277
  "valet-core": "source",
288
- "valet-expressive-color": "disabled",
289
278
  "wpvip-expressive-core": "enabled",
290
279
  "wpvip-expressive-color": "enabled",
291
- "wpvip-expressive-type": "disabled",
292
- "wpvip-productive-color": "disabled",
293
- "figma-valet-expressive-type": "disabled",
294
- "figma-wpvip-expressive-type": "enabled",
295
- "parsely-expressive-core": "disabled",
296
- "parsely-expressive-color": "disabled",
297
- "parsely-expressive-type": "disabled",
298
- "figma-parsely-expressive-type": "disabled",
299
- "valet-expressive-core": "disabled",
300
- "wpvip-expressive-color-dark": "disabled"
280
+ "figma-wpvip-expressive-type": "enabled"
301
281
  },
302
282
  "$figmaStyleReferences": {
303
283
  "background.primary": "S:46afc7b71e3ccd83f9b20e7ec755b594b3225316,",
@@ -342,7 +322,6 @@
342
322
  "text.helper": "S:f75f4379e6918a95ae4543791d8cdb46496f8d1f,",
343
323
  "text.placeholder": "S:6d842ab18ade2116bfd63cbc5b54362f446c93b6,",
344
324
  "text.disabled": "S:e3aff7a1a8f80df5afa31d4e44365a1de220094d,",
345
- "text.inverse": "S:36876e1fea73b900878e25d38af6ca7877fc0f84,",
346
325
  "link.default": "S:b72aac92094cee2f79ebabdb6b1fe3bb9ad6fa00,",
347
326
  "link.hover": "S:f42e2e66d263b5dad41d9bc46c40a07db184d1aa,",
348
327
  "link.active": "S:72ff5af78d72bffd803b751a93f11d59eff4b356,",
@@ -571,7 +550,8 @@
571
550
  "button.secondary.background.default": "S:110a105581f2f813770c7cd2d1499aa478ba4c7e,",
572
551
  "button.secondary.background.hover": "S:19cbdf65efc126f14bf0f2f2560a2a2ee4f22ee5,",
573
552
  "button.tertiary.background.default": "S:f4d1a5e4edf333aa820507c175b29ded7616cda6,",
574
- "button.tertiary.background.hover": "S:156fb8831e27b6f0711578a68afa632ab65a5eae,"
553
+ "button.tertiary.background.hover": "S:156fb8831e27b6f0711578a68afa632ab65a5eae,",
554
+ "text.inverse": "S:36876e1fea73b900878e25d38af6ca7877fc0f84,"
575
555
  }
576
556
  },
577
557
  {
@@ -580,18 +560,8 @@
580
560
  "selectedTokenSets": {
581
561
  "valet-core": "source",
582
562
  "valet-expressive-color": "enabled",
583
- "wpvip-expressive-core": "disabled",
584
- "wpvip-expressive-color": "disabled",
585
- "wpvip-expressive-type": "disabled",
586
- "wpvip-productive-color": "disabled",
587
563
  "figma-valet-expressive-type": "enabled",
588
- "figma-wpvip-expressive-type": "disabled",
589
- "parsely-expressive-core": "disabled",
590
- "parsely-expressive-color": "disabled",
591
- "parsely-expressive-type": "disabled",
592
- "figma-parsely-expressive-type": "disabled",
593
- "valet-expressive-core": "enabled",
594
- "wpvip-expressive-color-dark": "disabled"
564
+ "valet-expressive-core": "enabled"
595
565
  },
596
566
  "$figmaStyleReferences": {
597
567
  "body.1-short": "S:5d05042dd16a8fb9b8e9d352deec08498effa21b,",
@@ -745,7 +715,6 @@
745
715
  "text.helper": "S:fddcff62332dd0af0367f5f103d474be9c579b77,",
746
716
  "text.placeholder": "S:9bfcc49a268b3d8257f3651ff3eef6bbd373e1c8,",
747
717
  "text.disabled": "S:f0f566dbc34725b52d33ca60e28d2363d916432f,",
748
- "text.inverse": "S:95a16ff85da4820f72c8bf27deb0b4e11c165c16,",
749
718
  "link.default": "S:821397321e87e9b05cf395cd2e1854d733e840f1,",
750
719
  "link.hover": "S:af83242716b1a4b7ed7b665fb9e41127aed0b041,",
751
720
  "link.active": "S:c0401e5fad92fe98e95028b9088735f86465c486,",
@@ -853,7 +822,8 @@
853
822
  "button.secondary.background.default": "S:aa6d8cccca6fd3278419c4dd41d0be62da27fa81,",
854
823
  "button.secondary.background.hover": "S:3d4e35f4443fcfaaabb8962f37ca4b9bad332db1,",
855
824
  "button.tertiary.background.default": "S:d0b4853ffec905c39424ae793d696880be2a78cd,",
856
- "button.tertiary.background.hover": "S:8df00abb823b0dbb3979ba4f5caef416883e4dfe,"
825
+ "button.tertiary.background.hover": "S:8df00abb823b0dbb3979ba4f5caef416883e4dfe,",
826
+ "text.inverse": "S:95a16ff85da4820f72c8bf27deb0b4e11c165c16,"
857
827
  }
858
828
  },
859
829
  {
@@ -863,17 +833,7 @@
863
833
  "valet-core": "source",
864
834
  "wpvip-expressive-type": "enabled",
865
835
  "wpvip-expressive-color": "enabled",
866
- "figma-wpvip-expressive-type": "disabled",
867
- "wpvip-productive-color": "disabled",
868
- "valet-expressive-color": "disabled",
869
- "figma-valet-expressive-type": "disabled",
870
- "wpvip-expressive-core": "enabled",
871
- "parsely-expressive-core": "disabled",
872
- "parsely-expressive-color": "disabled",
873
- "parsely-expressive-type": "disabled",
874
- "figma-parsely-expressive-type": "disabled",
875
- "valet-expressive-core": "disabled",
876
- "wpvip-expressive-color-dark": "disabled"
836
+ "wpvip-expressive-core": "enabled"
877
837
  },
878
838
  "$figmaStyleReferences": {}
879
839
  },
@@ -882,19 +842,7 @@
882
842
  "name": "valet",
883
843
  "selectedTokenSets": {
884
844
  "valet-core": "source",
885
- "wpvip-expressive-type": "disabled",
886
- "wpvip-expressive-color": "disabled",
887
- "figma-wpvip-expressive-type": "disabled",
888
- "wpvip-productive-color": "disabled",
889
- "valet-expressive-color": "enabled",
890
- "figma-valet-expressive-type": "disabled",
891
- "wpvip-expressive-core": "disabled",
892
- "parsely-expressive-core": "disabled",
893
- "parsely-expressive-color": "disabled",
894
- "parsely-expressive-type": "disabled",
895
- "figma-parsely-expressive-type": "disabled",
896
- "valet-expressive-core": "disabled",
897
- "wpvip-expressive-color-dark": "disabled"
845
+ "valet-expressive-color": "enabled"
898
846
  },
899
847
  "$figmaStyleReferences": {}
900
848
  },
@@ -903,19 +851,9 @@
903
851
  "name": "parsely",
904
852
  "selectedTokenSets": {
905
853
  "valet-core": "source",
906
- "wpvip-expressive-type": "disabled",
907
- "wpvip-expressive-color": "disabled",
908
- "figma-wpvip-expressive-type": "disabled",
909
- "wpvip-productive-color": "disabled",
910
- "valet-expressive-color": "disabled",
911
- "figma-valet-expressive-type": "disabled",
912
- "wpvip-expressive-core": "disabled",
913
854
  "parsely-expressive-core": "enabled",
914
855
  "parsely-expressive-color": "enabled",
915
- "parsely-expressive-type": "enabled",
916
- "figma-parsely-expressive-type": "disabled",
917
- "valet-expressive-core": "disabled",
918
- "wpvip-expressive-color-dark": "disabled"
856
+ "parsely-expressive-type": "enabled"
919
857
  },
920
858
  "$figmaStyleReferences": {}
921
859
  },
@@ -924,19 +862,7 @@
924
862
  "name": "wpvip-productive-color",
925
863
  "selectedTokenSets": {
926
864
  "valet-core": "source",
927
- "valet-expressive-core": "disabled",
928
- "valet-expressive-color": "disabled",
929
- "wpvip-expressive-core": "disabled",
930
- "wpvip-expressive-color-dark": "disabled",
931
- "wpvip-expressive-color": "disabled",
932
- "wpvip-expressive-type": "disabled",
933
- "wpvip-productive-color": "enabled",
934
- "parsely-expressive-core": "disabled",
935
- "parsely-expressive-color": "disabled",
936
- "parsely-expressive-type": "disabled",
937
- "figma-valet-expressive-type": "disabled",
938
- "figma-wpvip-expressive-type": "disabled",
939
- "figma-parsely-expressive-type": "disabled"
865
+ "wpvip-productive-color": "enabled"
940
866
  },
941
867
  "$figmaStyleReferences": {
942
868
  "background.primary": "S:45862ce00f315d42b819b0106bed72b5526744bb,",
@@ -959,7 +885,6 @@
959
885
  "text.helper": "S:2c264a88b6e0487e0364020608062b8434451aba,",
960
886
  "text.placeholder": "S:235e44d0ee1ab7b979d84fdf1a63b386dc1e5b2e,",
961
887
  "text.disabled": "S:2129e3294ac5d5ec93c7465ebf75ae096009e0dc,",
962
- "text.inverse": "S:f57657ad1060e14e3d8fac47c9195ae53bb9dee8,",
963
888
  "link.default": "S:c96d066b12aa20170428f5cb51a67bf08657ee33,",
964
889
  "link.hover": "S:ac2128cb58a1ccc38f21f07927b5cf56b416acb7,",
965
890
  "link.active": "S:c37cf184324ed0ba4422d8045fa4b76bfd965dee,",
@@ -1003,8 +928,6 @@
1003
928
  "support.link.success.visited": "S:fe87fcbe28eb16c19e23181f7d4bb2555bd4cd90,",
1004
929
  "focus.default": "S:695b977c23ba1e9b94f379e817160e3061cc5c86,",
1005
930
  "focus.inset": "S:eef682a70d4f5f05ebeca563cf599499c7adcc49,",
1006
- "overlay": "S:194e19160810c9bd0a2f486adfb3cac054703149,",
1007
- "interactive": "S:961c614ec6f50d6bee6e938eba9f7de62bcc0aa9,",
1008
931
  "tag.gray.background": "S:b05e9218d3ffbf23e4a307c0a05ab0584f081b72,",
1009
932
  "tag.gray.text": "S:fa3f30d92699bf366603f5230583f8d6c48298a6,",
1010
933
  "tag.gray.icon": "S:f8d1a16f90a5a07e545338c6ad3b6738c6e47f3a,",
@@ -1050,7 +973,8 @@
1050
973
  "tag.pink.icon": "S:f9cd778abfd5c634f9f180eb4115aed894792aa5,",
1051
974
  "tag.pink.hover": "S:f0c7b2bb29535d6ee379b44d7273603021f55a99,",
1052
975
  "tag.pink.active": "S:e42978c26b8f8249f7e808ea4b309bd550478ace,",
1053
- "button.primary.label": "S:29b23a9ebf8833c2ed5e5b22e1fd0a7ad658819b,"
976
+ "button.primary.label": "S:29b23a9ebf8833c2ed5e5b22e1fd0a7ad658819b,",
977
+ "text.inverse": "S:f57657ad1060e14e3d8fac47c9195ae53bb9dee8,"
1054
978
  }
1055
979
  }
1056
980
  ]
package/tokens/valet-core/wpvip-expressive-type.json CHANGED
@@ -78,7 +78,7 @@
78
78
  "1": {
79
79
  "value": {
80
80
  "fontFamily": "{fontFamily.sans}",
81
- "fontWeight": "{fontWeight.regular}",
81
+ "fontWeight": "{fontWeight.medium}",
82
82
  "lineHeight": "{lineHeight.responsive}",
83
83
  "fontSize": "{fontSize.responsive.6}",
84
84
  "letterSpacing": "{letterSpacing.tight}"
@@ -88,7 +88,7 @@
88
88
  "2": {
89
89
  "value": {
90
90
  "fontFamily": "{fontFamily.sans}",
91
- "fontWeight": "{fontWeight.regular}",
91
+ "fontWeight": "{fontWeight.medium}",
92
92
  "lineHeight": "{lineHeight.responsive}",
93
93
  "fontSize": "{fontSize.responsive.7}",
94
94
  "letterSpacing": "{letterSpacing.tight}"
@@ -98,7 +98,7 @@
98
98
  "3": {
99
99
  "value": {
100
100
  "fontFamily": "{fontFamily.sans}",
101
- "fontWeight": "{fontWeight.regular}",
101
+ "fontWeight": "{fontWeight.medium}",
102
102
  "lineHeight": "{lineHeight.responsive}",
103
103
  "fontSize": "{fontSize.responsive.9}",
104
104
  "letterSpacing": "{letterSpacing.tight}"
@@ -108,7 +108,7 @@
108
108
  "4": {
109
109
  "value": {
110
110
  "fontFamily": "{fontFamily.sans}",
111
- "fontWeight": "{fontWeight.regular}",
111
+ "fontWeight": "{fontWeight.medium}",
112
112
  "lineHeight": "{lineHeight.responsive}",
113
113
  "fontSize": "{fontSize.responsive.10}",
114
114
  "letterSpacing": "{letterSpacing.tight}"
@@ -118,7 +118,7 @@
118
118
  "5": {
119
119
  "value": {
120
120
  "fontFamily": "{fontFamily.sans}",
121
- "fontWeight": "{fontWeight.regular}",
121
+ "fontWeight": "{fontWeight.medium}",
122
122
  "lineHeight": "{lineHeight.responsive}",
123
123
  "fontSize": "{fontSize.responsive.11}",
124
124
  "letterSpacing": "{letterSpacing.tight}"
@@ -128,7 +128,7 @@
128
128
  "6": {
129
129
  "value": {
130
130
  "fontFamily": "{fontFamily.sans}",
131
- "fontWeight": "{fontWeight.regular}",
131
+ "fontWeight": "{fontWeight.medium}",
132
132
  "lineHeight": "{lineHeight.responsive}",
133
133
  "fontSize": "{fontSize.responsive.12}",
134
134
  "letterSpacing": "{letterSpacing.tight}"
@@ -138,7 +138,7 @@
138
138
  "7": {
139
139
  "value": {
140
140
  "fontFamily": "{fontFamily.sans}",
141
- "fontWeight": "{fontWeight.regular}",
141
+ "fontWeight": "{fontWeight.medium}",
142
142
  "lineHeight": "{lineHeight.responsive}",
143
143
  "fontSize": "{fontSize.responsive.13}",
144
144
  "letterSpacing": "{letterSpacing.tight}"
@@ -150,7 +150,7 @@
150
150
  "fontFamily": "{fontFamily.sans}",
151
151
  "fontWeight": "{fontWeight.light}",
152
152
  "lineHeight": "{lineHeight.responsive}",
153
- "fontSize": "{fontSize.responsive.4}",
153
+ "fontSize": "{fontSize.responsive.6}",
154
154
  "letterSpacing": "{letterSpacing.tight}"
155
155
  },
156
156
  "type": "typography"