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