@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/build/system/theme/colors.js CHANGED
@@ -3,183 +3,20 @@
3
3
  var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
4
4
 
5
5
  exports.__esModule = true;
6
- exports.light = exports["default"] = exports.dark = void 0;
6
+ exports["default"] = void 0;
7
7
 
8
8
  var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends"));
9
9
 
10
- var _getColor = require("./getColor");
11
-
12
10
  /** @jsxImportSource theme-ui */
13
11
 
14
12
  /**
15
13
  * External dependencies
16
14
  */
17
-
18
- /**
19
- * Internal dependencies
20
- */
21
- var light = (0, _extends2["default"])({}, _getColor.ValetTheme.color, {
22
- brand: _getColor.ValetTheme.color.gold,
23
- grey: _getColor.ValetTheme.color.gray
24
- });
25
- exports.light = light;
26
- var dark = {
27
- black: 'rgba(19, 25, 30, 1)',
28
- brand: {
29
- 0: '#1A160F',
30
- 3: '#231809',
31
- 7: '#301F08',
32
- 10: '#301F08',
33
- 20: '#3A2406',
34
- 30: '#432804',
35
- 40: '#502E01',
36
- 50: '#603700',
37
- 60: '#774400',
38
- 70: '#B96B03',
39
- 80: '#C37A19',
40
- 90: '#CA8529',
41
- 100: '#FAF2E7'
42
- },
43
- grey: {
44
- 0: '#161615',
45
- 5: '#1C1C1B',
46
- 10: '#242221',
47
- 20: '#282827',
48
- 30: '#2F2D2C',
49
- 40: '#353431',
50
- 50: '#3F3D3B',
51
- 60: '#524F4C',
52
- 70: '#726F6A',
53
- 80: '#807D78',
54
- 90: '#A29F9B',
55
- 100: '#EDEDEC'
56
- },
57
- blue: {
58
- 0: '#0B1A1C',
59
- 5: '#062124',
60
- 10: '#032D31',
61
- 20: '#00353B',
62
- 30: '#003C42',
63
- 40: '#00444C',
64
- 50: '#005059',
65
- 60: '#00636E',
66
- 70: '#009FB1',
67
- 80: '#09BDD2',
68
- 90: '#2AC5D7',
69
- 100: '#E6F9FB'
70
- },
71
- green: {
72
- 0: '#0D1913',
73
- 5: '#0C1F16',
74
- 10: '#0F291D',
75
- 20: '#113122',
76
- 30: '#133927',
77
- 40: '#16442E',
78
- 50: '#1B5439',
79
- 60: '#236E4A',
80
- 70: '#30A46C',
81
- 80: '#3CB179',
82
- 90: '#4CC389',
83
- 100: '#E4FAF0'
84
- },
85
- pink: {
86
- 0: 'rgba(255, 248, 246, 1)',
87
- 5: 'rgba(255, 232, 230, 1)',
88
- 10: 'rgba(255, 214, 210, 1)',
89
- 15: 'rgba(255, 197, 193, 1)',
90
- 20: 'rgba(251, 183, 180, 1)',
91
- 25: 'rgba(239, 171, 168, 1)',
92
- 30: 'rgba(226, 158, 157, 1)',
93
- 35: 'rgba(212, 146, 148, 1)',
94
- 40: 'rgba(202, 133, 136, 1)',
95
- 45: 'rgba(188, 122, 126, 1)',
96
- 50: 'rgba(176, 109, 116, 1)',
97
- 55: 'rgba(163, 95, 106, 1)',
98
- 60: 'rgba(149, 83, 93, 1)',
99
- 65: 'rgba(137, 71, 85, 1)',
100
- 70: 'rgba(124, 57, 74, 1)',
101
- 75: 'rgba(109, 41, 62, 1)',
102
- 80: 'rgba(95, 30, 52, 1)',
103
- 85: 'rgba(83, 14, 43, 1)',
104
- 90: 'rgba(69, 0, 31, 1)',
105
- 95: 'rgba(53, 0, 18, 1)',
106
- 100: 'rgba(46, 0, 3, 1)'
107
- },
108
- salmon: {
109
- 0: 'rgba(254, 248, 248, 1)',
110
- 5: 'rgba(254, 233, 228, 1)',
111
- 10: 'rgba(254, 214, 206, 1)',
112
- 15: 'rgba(254, 195, 177, 1)',
113
- 20: 'rgba(255, 178, 150, 1)',
114
- 25: 'rgba(255, 163, 120, 1)',
115
- 30: 'rgba(249, 148, 94, 1)',
116
- 35: 'rgba(237, 137, 85, 1)',
117
- 40: 'rgba(224, 123, 77, 1)',
118
- 45: 'rgba(210, 113, 70, 1)',
119
- 50: 'rgba(197, 101, 63, 1)',
120
- 55: 'rgba(181, 86, 56, 1)',
121
- 60: 'rgba(167, 73, 48, 1)',
122
- 65: 'rgba(153, 60, 43, 1)',
123
- 70: 'rgba(137, 47, 38, 1)',
124
- 75: 'rgba(124, 30, 30, 1)',
125
- 80: 'rgba(108, 15, 23, 1)',
126
- 85: 'rgba(94, 0, 16, 1)',
127
- 90: 'rgba(78, 0, 0, 1)',
128
- 95: 'rgba(62, 0, 1, 1)',
129
- 100: 'rgba(52, 0, 2, 1)'
130
- },
131
- orange: {
132
- 0: 'rgba(255, 249, 241, 1)',
133
- 5: 'rgba(255, 233, 219, 1)',
134
- 10: 'rgba(255, 215, 189, 1)',
135
- 15: 'rgba(255, 195, 159, 1)',
136
- 20: 'rgba(255, 178, 126, 1)',
137
- 25: 'rgba(254, 159, 95, 1)',
138
- 30: 'rgba(255, 139, 64, 1)',
139
- 35: 'rgba(255, 123, 40, 1)',
140
- 40: 'rgba(244, 110, 21, 1)',
141
- 45: 'rgba(231, 98, 5, 1)',
142
- 50: 'rgba(215, 80, 1, 1)',
143
- 55: 'rgba(197, 73, 0, 1)',
144
- 60: 'rgba(180, 60, 0, 1)',
145
- 65: 'rgba(165, 49, 0, 1)',
146
- 70: 'rgba(148, 38, 1, 1)',
147
- 75: 'rgba(129, 23, 1, 1)',
148
- 80: 'rgba(111, 8, 1, 1)',
149
- 85: 'rgba(95, 0, 0, 1)',
150
- 90: 'rgba(78, 0, 0, 1)',
151
- 95: 'rgba(60, 0, 0, 1)',
152
- 100: 'rgba(50, 0, 3, 1)'
153
- },
154
- yellow: {
155
- 0: '#1F1300',
156
- 5: '#261700',
157
- 10: '#301E00',
158
- 20: '#3B2400',
159
- 30: '#462B00',
160
- 40: '#553400',
161
- 50: '#674003',
162
- 60: '#804F00',
163
- 70: '#FFB031',
164
- 80: '#FFC568',
165
- 90: '#F69E12',
166
- 100: '#FFF2DE'
167
- },
168
- red: {
169
- 0: '#1E1313',
170
- 5: '#2B1311',
171
- 10: '#3C1714',
172
- 20: '#491915',
173
- 30: '#561B17',
174
- 40: '#681E19',
175
- 50: '#832019',
176
- 60: '#AC241A',
177
- 70: '#F04539',
178
- 80: '#F6574B',
179
- 90: '#FA6459',
180
- 100: '#FFEEED'
181
- }
15
+ var _default = function _default(theme) {
16
+ return (0, _extends2["default"])({}, theme.color, {
17
+ brand: theme.color.gold,
18
+ grey: theme.color.gray
19
+ });
182
20
  };
183
- exports.dark = dark;
184
- var _default = light;
21
+
185
22
  exports["default"] = _default;