@wavv/ui 2.3.19 → 2.4.0-alpha.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 (24) hide show
  1. package/build/components/Avatar.js +1 -1
  2. package/build/components/Table/types.d.ts +4 -4
  3. package/build/components/helpers/mergePadding.d.ts +2 -6
  4. package/build/components/helpers/mergePadding.js +2 -7
  5. package/build/tailwind/theme.css +91 -59
  6. package/build/theme/ThemeTypes.d.ts +44 -0
  7. package/build/theme/common/common.d.ts +0 -28
  8. package/build/theme/core/colors.d.ts +0 -84
  9. package/build/theme/core/colors.js +1 -31
  10. package/build/theme/core/dark/dark.js +5 -5
  11. package/build/theme/core/dark/darkScale.d.ts +22 -0
  12. package/build/theme/core/dark/darkScale.js +42 -17
  13. package/build/theme/core/light/light.js +5 -5
  14. package/build/theme/core/light/lightScale.d.ts +22 -0
  15. package/build/theme/core/light/lightScale.js +40 -15
  16. package/build/theme/mono/colors.d.ts +0 -84
  17. package/build/theme/mono/colors.js +1 -31
  18. package/build/theme/mono/dark/dark.js +5 -5
  19. package/build/theme/mono/dark/darkScale.d.ts +22 -0
  20. package/build/theme/mono/dark/darkScale.js +42 -17
  21. package/build/theme/mono/light/light.js +5 -5
  22. package/build/theme/mono/light/lightScale.d.ts +22 -0
  23. package/build/theme/mono/light/lightScale.js +42 -17
  24. package/package.json +1 -1
package/build/components/Avatar.js CHANGED
@@ -92,7 +92,7 @@ const ButtonContainer = styled.div(({ theme })=>({
92
92
  left: 0,
93
93
  width: '100%',
94
94
  height: '100%',
95
- backgroundColor: theme.color.grayscale9,
95
+ backgroundColor: 'dark' === theme.name ? theme.grayscale9 : theme.contrast9,
96
96
  borderRadius: '50%',
97
97
  opacity: 0,
98
98
  visibility: 'hidden',
package/build/components/Table/types.d.ts CHANGED
@@ -26,10 +26,10 @@ export type ActiveColumn = {
26
26
  };
27
27
  type SetColumn = Dispatch<SetStateAction<ActiveColumn | undefined>>;
28
28
  export type TablePaddingValues = {
29
- top: number;
30
- right: number;
31
- bottom: number;
32
- left: number;
29
+ top?: number;
30
+ right?: number;
31
+ bottom?: number;
32
+ left?: number;
33
33
  };
34
34
  type SetPadding = Dispatch<SetStateAction<TablePaddingValues | undefined>>;
35
35
  export type Context = {
package/build/components/helpers/mergePadding.d.ts CHANGED
@@ -1,8 +1,4 @@
1
+ import type { TablePaddingValues } from '../Table/types';
1
2
  import type { Padding } from '../types';
2
- declare const mergePadding: (paddingObj: Padding) => {
3
- top: number;
4
- right: number;
5
- bottom: number;
6
- left: number;
7
- };
3
+ declare const mergePadding: (paddingObj: Padding) => TablePaddingValues;
8
4
  export default mergePadding;
package/build/components/helpers/mergePadding.js CHANGED
@@ -4,14 +4,9 @@ const parseValue = (value)=>{
4
4
  return 0;
5
5
  };
6
6
  const mergePadding = (paddingObj)=>{
7
- const paddingValues = {
8
- top: 0,
9
- right: 0,
10
- bottom: 0,
11
- left: 0
12
- };
7
+ const paddingValues = {};
13
8
  const { padding, paddingTop, paddingRight, paddingBottom, paddingLeft } = paddingObj;
14
- if (padding) {
9
+ if (void 0 !== padding) {
15
10
  const paddingString = 'string' == typeof padding ? padding : padding.toString();
16
11
  const values = paddingString.split(' ').map(parseValue);
17
12
  switch(values.length){
package/build/tailwind/theme.css CHANGED
@@ -13,12 +13,6 @@
13
13
  --color-brandTint2: rgba(0,116,244,0.2);
14
14
  --color-brandTint3: rgba(0,116,244,0.3);
15
15
  --color-brandTint4: rgba(0,116,244,0.4);
16
- --color-brandBackground0: #001828;
17
- --color-brandBackground1: #0D2433;
18
- --color-brandBackground2: #192F3D;
19
- --color-brandBackground3: #334653;
20
- --color-brandBackground4: #475964;
21
- --color-brandBackground5: #596A74;
22
16
  --color-error: #FF6068;
23
17
  --color-errorShade1: #E6565E;
24
18
  --color-errorShade2: #CC4D53;
@@ -51,6 +45,26 @@
51
45
  --color-successTint2: rgba(0,194,66,0.2);
52
46
  --color-successTint3: rgba(0,194,66,0.3);
53
47
  --color-successTint4: rgba(0,194,66,0.4);
48
+ --color-scale0: rgba(0,29,50,0.05);
49
+ --color-scale1: rgba(0,29,50,0.1);
50
+ --color-scale2: rgba(0,29,50,0.2);
51
+ --color-scale3: rgba(0,29,50,0.3);
52
+ --color-scale4: rgba(0,29,50,0.4);
53
+ --color-scale5: rgba(0,29,50,0.5);
54
+ --color-scale6: rgba(0,29,50,0.6);
55
+ --color-scale7: rgba(0,29,50,0.7);
56
+ --color-scale8: rgba(0,29,50,0.8);
57
+ --color-scale9: rgba(0,29,50,0.9);
58
+ --color-scale10: #001D32;
59
+ --color-accent: #0074F4;
60
+ --color-accentShade1: #0068DC;
61
+ --color-accentShade2: #005DC3;
62
+ --color-background0: #FFFFFF;
63
+ --color-background1: #F2F4F5;
64
+ --color-background2: #E6E9EB;
65
+ --color-background3: #DADFE2;
66
+ --color-background4: #CFD5D9;
67
+ --color-background5: #C5CCD1;
54
68
  --color-grayscale0: rgba(0,29,50,0.05);
55
69
  --color-grayscale1: rgba(0,29,50,0.1);
56
70
  --color-grayscale2: rgba(0,29,50,0.2);
@@ -73,26 +87,6 @@
73
87
  --color-contrast8: rgba(255,255,255,0.8);
74
88
  --color-contrast9: rgba(255,255,255,0.9);
75
89
  --color-contrast10: #FFFFFF;
76
- --color-scale0: rgba(0,29,50,0.05);
77
- --color-scale1: rgba(0,29,50,0.1);
78
- --color-scale2: rgba(0,29,50,0.2);
79
- --color-scale3: rgba(0,29,50,0.3);
80
- --color-scale4: rgba(0,29,50,0.4);
81
- --color-scale5: rgba(0,29,50,0.5);
82
- --color-scale6: rgba(0,29,50,0.6);
83
- --color-scale7: rgba(0,29,50,0.7);
84
- --color-scale8: rgba(0,29,50,0.8);
85
- --color-scale9: rgba(0,29,50,0.9);
86
- --color-scale10: #001D32;
87
- --color-accent: #0074F4;
88
- --color-accentShade1: #0068DC;
89
- --color-accentShade2: #005DC3;
90
- --color-background0: #FFFFFF;
91
- --color-background1: #F2F3F4;
92
- --color-background2: #E6E9EB;
93
- --color-background3: #CCD2D6;
94
- --color-background4: #B3BCC2;
95
- --color-background5: #99A5AD;
96
90
  }
97
91
 
98
92
  .dark {
@@ -113,9 +107,31 @@
113
107
  --color-background0: #001828;
114
108
  --color-background1: #0D2433;
115
109
  --color-background2: #192F3D;
116
- --color-background3: #334653;
117
- --color-background4: #475964;
118
- --color-background5: #596A74;
110
+ --color-background3: #253947;
111
+ --color-background4: #304350;
112
+ --color-background5: #3A4C59;
113
+ --color-grayscale0: rgba(0,29,50,0.05);
114
+ --color-grayscale1: rgba(0,29,50,0.1);
115
+ --color-grayscale2: rgba(0,29,50,0.2);
116
+ --color-grayscale3: rgba(0,29,50,0.3);
117
+ --color-grayscale4: rgba(0,29,50,0.4);
118
+ --color-grayscale5: rgba(0,29,50,0.5);
119
+ --color-grayscale6: rgba(0,29,50,0.6);
120
+ --color-grayscale7: rgba(0,29,50,0.7);
121
+ --color-grayscale8: rgba(0,29,50,0.8);
122
+ --color-grayscale9: rgba(0,29,50,0.9);
123
+ --color-grayscale10: #001D32;
124
+ --color-contrast0: rgba(255,255,255,0.05);
125
+ --color-contrast1: rgba(255,255,255,0.1);
126
+ --color-contrast2: rgba(255,255,255,0.2);
127
+ --color-contrast3: rgba(255,255,255,0.3);
128
+ --color-contrast4: rgba(255,255,255,0.4);
129
+ --color-contrast5: rgba(255,255,255,0.5);
130
+ --color-contrast6: rgba(255,255,255,0.6);
131
+ --color-contrast7: rgba(255,255,255,0.7);
132
+ --color-contrast8: rgba(255,255,255,0.8);
133
+ --color-contrast9: rgba(255,255,255,0.9);
134
+ --color-contrast10: #FFFFFF;
119
135
  }
120
136
 
121
137
  .mono {
@@ -133,12 +149,6 @@
133
149
  --color-brandTint2: rgba(0,116,244,0.2);
134
150
  --color-brandTint3: rgba(0,116,244,0.3);
135
151
  --color-brandTint4: rgba(0,116,244,0.4);
136
- --color-brandBackground0: #121212;
137
- --color-brandBackground1: #1e1e1e;
138
- --color-brandBackground2: #292929;
139
- --color-brandBackground3: #3a3a3a;
140
- --color-brandBackground4: #4b4b4b;
141
- --color-brandBackground5: #5c5c5c;
142
152
  --color-error: #FF6068;
143
153
  --color-errorShade1: #E6565E;
144
154
  --color-errorShade2: #CC4D53;
@@ -171,6 +181,26 @@
171
181
  --color-successTint2: rgba(0,194,66,0.2);
172
182
  --color-successTint3: rgba(0,194,66,0.3);
173
183
  --color-successTint4: rgba(0,194,66,0.4);
184
+ --color-scale0: rgba(18,18,18,0.05);
185
+ --color-scale1: rgba(18,18,18,0.1);
186
+ --color-scale2: rgba(18,18,18,0.2);
187
+ --color-scale3: rgba(18,18,18,0.3);
188
+ --color-scale4: rgba(18,18,18,0.4);
189
+ --color-scale5: rgba(18,18,18,0.5);
190
+ --color-scale6: rgba(18,18,18,0.6);
191
+ --color-scale7: rgba(18,18,18,0.7);
192
+ --color-scale8: rgba(18,18,18,0.8);
193
+ --color-scale9: rgba(18,18,18,0.9);
194
+ --color-scale10: #121212;
195
+ --color-accent: #0074F4;
196
+ --color-accentShade1: #0068DC;
197
+ --color-accentShade2: #005DC3;
198
+ --color-background0: #FEFEFE;
199
+ --color-background1: #F2F2F2;
200
+ --color-background2: #E7E7E7;
201
+ --color-background3: #DCDCDC;
202
+ --color-background4: #D2D2D2;
203
+ --color-background5: #C8C8C8;
174
204
  --color-grayscale0: rgba(18,18,18,0.05);
175
205
  --color-grayscale1: rgba(18,18,18,0.1);
176
206
  --color-grayscale2: rgba(18,18,18,0.2);
@@ -193,26 +223,6 @@
193
223
  --color-contrast8: rgba(255,255,255,0.8);
194
224
  --color-contrast9: rgba(255,255,255,0.9);
195
225
  --color-contrast10: #FFFFFF;
196
- --color-scale0: rgba(18,18,18,0.05);
197
- --color-scale1: rgba(18,18,18,0.1);
198
- --color-scale2: rgba(18,18,18,0.2);
199
- --color-scale3: rgba(18,18,18,0.3);
200
- --color-scale4: rgba(18,18,18,0.4);
201
- --color-scale5: rgba(18,18,18,0.5);
202
- --color-scale6: rgba(18,18,18,0.6);
203
- --color-scale7: rgba(18,18,18,0.7);
204
- --color-scale8: rgba(18,18,18,0.8);
205
- --color-scale9: rgba(18,18,18,0.9);
206
- --color-scale10: #121212;
207
- --color-accent: #0074F4;
208
- --color-accentShade1: #0068DC;
209
- --color-accentShade2: #005DC3;
210
- --color-background0: #FFFFFF;
211
- --color-background1: #F2F3F4;
212
- --color-background2: #E6E9EB;
213
- --color-background3: #CCD2D6;
214
- --color-background4: #B3BCC2;
215
- --color-background5: #99A5AD;
216
226
  }
217
227
 
218
228
  .mono.dark {
@@ -231,11 +241,33 @@
231
241
  --color-accentShade1: #4C8EDE;
232
242
  --color-accentShade2: #4C7EC6;
233
243
  --color-background0: #121212;
234
- --color-background1: #1e1e1e;
244
+ --color-background1: #1E1E1E;
235
245
  --color-background2: #292929;
236
- --color-background3: #3a3a3a;
237
- --color-background4: #4b4b4b;
238
- --color-background5: #5c5c5c;
246
+ --color-background3: #343434;
247
+ --color-background4: #3E3E3E;
248
+ --color-background5: #484848;
249
+ --color-grayscale0: rgba(18,18,18,0.05);
250
+ --color-grayscale1: rgba(18,18,18,0.1);
251
+ --color-grayscale2: rgba(18,18,18,0.2);
252
+ --color-grayscale3: rgba(18,18,18,0.3);
253
+ --color-grayscale4: rgba(18,18,18,0.4);
254
+ --color-grayscale5: rgba(18,18,18,0.5);
255
+ --color-grayscale6: rgba(18,18,18,0.6);
256
+ --color-grayscale7: rgba(18,18,18,0.7);
257
+ --color-grayscale8: rgba(18,18,18,0.8);
258
+ --color-grayscale9: rgba(18,18,18,0.9);
259
+ --color-grayscale10: #121212;
260
+ --color-contrast0: rgba(255,255,255,0.05);
261
+ --color-contrast1: rgba(255,255,255,0.1);
262
+ --color-contrast2: rgba(255,255,255,0.2);
263
+ --color-contrast3: rgba(255,255,255,0.3);
264
+ --color-contrast4: rgba(255,255,255,0.4);
265
+ --color-contrast5: rgba(255,255,255,0.5);
266
+ --color-contrast6: rgba(255,255,255,0.6);
267
+ --color-contrast7: rgba(255,255,255,0.7);
268
+ --color-contrast8: rgba(255,255,255,0.8);
269
+ --color-contrast9: rgba(255,255,255,0.9);
270
+ --color-contrast10: #FFFFFF;
239
271
  }
240
272
 
241
273
  @utility head-1 {
package/build/theme/ThemeTypes.d.ts CHANGED
@@ -106,6 +106,50 @@ export interface ITheme {
106
106
  scale9: string;
107
107
  /** 100% opacity */
108
108
  scale10: string;
109
+ /** 5% of gray color (#001D32 or #121212 in mono) */
110
+ grayscale0: string;
111
+ /** 10% of gray color (#001D32 or #121212 in mono) */
112
+ grayscale1: string;
113
+ /** 20% of gray color (#001D32 or #121212 in mono) */
114
+ grayscale2: string;
115
+ /** 30% of gray color (#001D32 or #121212 in mono) */
116
+ grayscale3: string;
117
+ /** 40% of gray color (#001D32 or #121212 in mono) */
118
+ grayscale4: string;
119
+ /** 50% of gray color (#001D32 or #121212 in mono) */
120
+ grayscale5: string;
121
+ /** 60% of gray color (#001D32 or #121212 in mono) */
122
+ grayscale6: string;
123
+ /** 70% of gray color (#001D32 or #121212 in mono) */
124
+ grayscale7: string;
125
+ /** 80% of gray color (#001D32 or #121212 in mono) */
126
+ grayscale8: string;
127
+ /** 90% of gray color (#001D32 or #121212 in mono) */
128
+ grayscale9: string;
129
+ /** gray color (#001D32 or #121212 in mono) */
130
+ grayscale10: string;
131
+ /** 5% of #FFFFFF */
132
+ contrast0: string;
133
+ /** 10% of #FFFFFF */
134
+ contrast1: string;
135
+ /** 20% of #FFFFFF */
136
+ contrast2: string;
137
+ /** 30% of #FFFFFF */
138
+ contrast3: string;
139
+ /** 40% of #FFFFFF */
140
+ contrast4: string;
141
+ /** 50% of #FFFFFF */
142
+ contrast5: string;
143
+ /** 60% of #FFFFFF */
144
+ contrast6: string;
145
+ /** 70% of #FFFFFF */
146
+ contrast7: string;
147
+ /** 80% of #FFFFFF */
148
+ contrast8: string;
149
+ /** 90% of #FFFFFF */
150
+ contrast9: string;
151
+ /** #FFFFFF */
152
+ contrast10: string;
109
153
  button: {
110
154
  tiny: ButtonSize;
111
155
  small: ButtonSize;
package/build/theme/common/common.d.ts CHANGED
@@ -14,12 +14,6 @@ declare const _default: {
14
14
  brandTint2: string;
15
15
  brandTint3: string;
16
16
  brandTint4: string;
17
- brandBackground0: string;
18
- brandBackground1: string;
19
- brandBackground2: string;
20
- brandBackground3: string;
21
- brandBackground4: string;
22
- brandBackground5: string;
23
17
  error: string;
24
18
  errorShade1: string;
25
19
  errorShade2: string;
@@ -52,28 +46,6 @@ declare const _default: {
52
46
  successTint2: string;
53
47
  successTint3: string;
54
48
  successTint4: string;
55
- grayscale0: string;
56
- grayscale1: string;
57
- grayscale2: string;
58
- grayscale3: string;
59
- grayscale4: string;
60
- grayscale5: string;
61
- grayscale6: string;
62
- grayscale7: string;
63
- grayscale8: string;
64
- grayscale9: string;
65
- grayscale10: string;
66
- contrast0: string;
67
- contrast1: string;
68
- contrast2: string;
69
- contrast3: string;
70
- contrast4: string;
71
- contrast5: string;
72
- contrast6: string;
73
- contrast7: string;
74
- contrast8: string;
75
- contrast9: string;
76
- contrast10: string;
77
49
  };
78
50
  elevation0: string;
79
51
  elevation1: string;
package/build/theme/core/colors.d.ts CHANGED
@@ -13,12 +13,6 @@ declare const colors: {
13
13
  brandTint2: string;
14
14
  brandTint3: string;
15
15
  brandTint4: string;
16
- brandBackground0: string;
17
- brandBackground1: string;
18
- brandBackground2: string;
19
- brandBackground3: string;
20
- brandBackground4: string;
21
- brandBackground5: string;
22
16
  error: string;
23
17
  errorShade1: string;
24
18
  errorShade2: string;
@@ -51,28 +45,6 @@ declare const colors: {
51
45
  successTint2: string;
52
46
  successTint3: string;
53
47
  successTint4: string;
54
- grayscale0: string;
55
- grayscale1: string;
56
- grayscale2: string;
57
- grayscale3: string;
58
- grayscale4: string;
59
- grayscale5: string;
60
- grayscale6: string;
61
- grayscale7: string;
62
- grayscale8: string;
63
- grayscale9: string;
64
- grayscale10: string;
65
- contrast0: string;
66
- contrast1: string;
67
- contrast2: string;
68
- contrast3: string;
69
- contrast4: string;
70
- contrast5: string;
71
- contrast6: string;
72
- contrast7: string;
73
- contrast8: string;
74
- contrast9: string;
75
- contrast10: string;
76
48
  };
77
49
  export default colors;
78
50
  export interface IColors {
@@ -104,18 +76,6 @@ export interface IColors {
104
76
  brandTint3: string;
105
77
  /** 40% of #0074F4 */
106
78
  brandTint4: string;
107
- /** #001828 */
108
- brandBackground0: string;
109
- /** #0D2433 */
110
- brandBackground1: string;
111
- /** #192F3D */
112
- brandBackground2: string;
113
- /** #334653 */
114
- brandBackground3: string;
115
- /** #475964 */
116
- brandBackground4: string;
117
- /** #596A74 */
118
- brandBackground5: string;
119
79
  /** #FF6068 */
120
80
  error: string;
121
81
  /** #E6565E */
@@ -179,49 +139,5 @@ export interface IColors {
179
139
  successTint3: string;
180
140
  /** 40% of #00C242 */
181
141
  successTint4: string;
182
- /** 5% of #001D32 */
183
- grayscale0: string;
184
- /** 10% of #001D32 */
185
- grayscale1: string;
186
- /** 20% of #001D32 */
187
- grayscale2: string;
188
- /** 30% of #001D32 */
189
- grayscale3: string;
190
- /** 40% of #001D32 */
191
- grayscale4: string;
192
- /** 50% of #001D32 */
193
- grayscale5: string;
194
- /** 60% of #001D32 */
195
- grayscale6: string;
196
- /** 70% of #001D32 */
197
- grayscale7: string;
198
- /** 80% of #001D32 */
199
- grayscale8: string;
200
- /** 90% of #001D32 */
201
- grayscale9: string;
202
- /** #001D32 */
203
- grayscale10: string;
204
- /** 5% of #FFFFFF */
205
- contrast0: string;
206
- /** 10% of #FFFFFF */
207
- contrast1: string;
208
- /** 20% of #FFFFFF */
209
- contrast2: string;
210
- /** 30% of #FFFFFF */
211
- contrast3: string;
212
- /** 40% of #FFFFFF */
213
- contrast4: string;
214
- /** 50% of #FFFFFF */
215
- contrast5: string;
216
- /** 60% of #FFFFFF */
217
- contrast6: string;
218
- /** 70% of #FFFFFF */
219
- contrast7: string;
220
- /** 80% of #FFFFFF */
221
- contrast8: string;
222
- /** 90% of #FFFFFF */
223
- contrast9: string;
224
- /** #FFFFFF */
225
- contrast10: string;
226
142
  }
227
143
  export type ColorNames = keyof typeof colors;
package/build/theme/core/colors.js CHANGED
@@ -4,8 +4,6 @@ const error = '#FF6068';
4
4
  const warning = '#FF9900';
5
5
  const alertColor = '#F0BB00';
6
6
  const success = '#00C242';
7
- const grayVal = '#001D32';
8
- const white = '#FFFFFF';
9
7
  const colors = {
10
8
  logo1: brand,
11
9
  logo2: '#00A9E2',
@@ -21,12 +19,6 @@ const colors = {
21
19
  brandTint2: transparentize(0.8, brand),
22
20
  brandTint3: transparentize(0.7, brand),
23
21
  brandTint4: transparentize(0.6, brand),
24
- brandBackground0: '#001828',
25
- brandBackground1: '#0D2433',
26
- brandBackground2: '#192F3D',
27
- brandBackground3: '#334653',
28
- brandBackground4: '#475964',
29
- brandBackground5: '#596A74',
30
22
  error,
31
23
  errorShade1: '#E6565E',
32
24
  errorShade2: '#CC4D53',
@@ -58,29 +50,7 @@ const colors = {
58
50
  successTint1: transparentize(0.9, success),
59
51
  successTint2: transparentize(0.8, success),
60
52
  successTint3: transparentize(0.7, success),
61
- successTint4: transparentize(0.6, success),
62
- grayscale0: transparentize(0.95, grayVal),
63
- grayscale1: transparentize(0.9, grayVal),
64
- grayscale2: transparentize(0.8, grayVal),
65
- grayscale3: transparentize(0.7, grayVal),
66
- grayscale4: transparentize(0.6, grayVal),
67
- grayscale5: transparentize(0.5, grayVal),
68
- grayscale6: transparentize(0.4, grayVal),
69
- grayscale7: transparentize(0.3, grayVal),
70
- grayscale8: transparentize(0.2, grayVal),
71
- grayscale9: transparentize(0.1, grayVal),
72
- grayscale10: grayVal,
73
- contrast0: transparentize(0.95, white),
74
- contrast1: transparentize(0.9, white),
75
- contrast2: transparentize(0.8, white),
76
- contrast3: transparentize(0.7, white),
77
- contrast4: transparentize(0.6, white),
78
- contrast5: transparentize(0.5, white),
79
- contrast6: transparentize(0.4, white),
80
- contrast7: transparentize(0.3, white),
81
- contrast8: transparentize(0.2, white),
82
- contrast9: transparentize(0.1, white),
83
- contrast10: white
53
+ successTint4: transparentize(0.6, success)
84
54
  };
85
55
  const core_colors = colors;
86
56
  export { core_colors as default };
package/build/theme/core/dark/dark.js CHANGED
@@ -383,7 +383,7 @@ const dark = {
383
383
  },
384
384
  calendar: {
385
385
  background: {
386
- container: colors.brandBackground3,
386
+ container: darkScale.background3,
387
387
  hover: darkScale.scale1,
388
388
  active: colors.brand,
389
389
  activeHover: colors.brandShade1,
@@ -461,14 +461,14 @@ const dark = {
461
461
  }
462
462
  },
463
463
  modal: {
464
- background: colors.brandBackground3,
464
+ background: darkScale.background3,
465
465
  color: {
466
466
  header: darkScale.scale10,
467
467
  body: darkScale.scale6
468
468
  }
469
469
  },
470
470
  options: {
471
- background: colors.brandBackground2,
471
+ background: darkScale.background2,
472
472
  backdropFilter: void 0
473
473
  },
474
474
  optionItem: {
@@ -538,10 +538,10 @@ const dark = {
538
538
  }
539
539
  },
540
540
  toggle: {
541
- slider: colors.brandBackground0
541
+ slider: darkScale.background0
542
542
  },
543
543
  tooltip: {
544
- background: colors.brandBackground4,
544
+ background: darkScale.background4,
545
545
  color: {
546
546
  default: darkScale.scale10,
547
547
  subtext: darkScale.scale6
package/build/theme/core/dark/darkScale.d.ts CHANGED
@@ -19,5 +19,27 @@ declare const darkScale: {
19
19
  background3: string;
20
20
  background4: string;
21
21
  background5: string;
22
+ grayscale0: string;
23
+ grayscale1: string;
24
+ grayscale2: string;
25
+ grayscale3: string;
26
+ grayscale4: string;
27
+ grayscale5: string;
28
+ grayscale6: string;
29
+ grayscale7: string;
30
+ grayscale8: string;
31
+ grayscale9: string;
32
+ grayscale10: string;
33
+ contrast0: string;
34
+ contrast1: string;
35
+ contrast2: string;
36
+ contrast3: string;
37
+ contrast4: string;
38
+ contrast5: string;
39
+ contrast6: string;
40
+ contrast7: string;
41
+ contrast8: string;
42
+ contrast9: string;
43
+ contrast10: string;
22
44
  };
23
45
  export default darkScale;
package/build/theme/core/dark/darkScale.js CHANGED
@@ -1,15 +1,18 @@
1
+ import { transparentize } from "polished";
1
2
  import colors from "../colors.js";
2
- const scale0 = colors.contrast0;
3
- const scale1 = colors.contrast1;
4
- const scale2 = colors.contrast2;
5
- const scale3 = colors.contrast3;
6
- const scale4 = colors.contrast4;
7
- const scale5 = colors.contrast5;
8
- const scale6 = colors.contrast6;
9
- const scale7 = colors.contrast7;
10
- const scale8 = colors.contrast8;
11
- const scale9 = colors.contrast9;
12
- const scale10 = colors.contrast10;
3
+ const grayVal = '#001D32';
4
+ const contrast = '#FFFFFF';
5
+ const scale0 = transparentize(0.95, contrast);
6
+ const scale1 = transparentize(0.9, contrast);
7
+ const scale2 = transparentize(0.8, contrast);
8
+ const scale3 = transparentize(0.7, contrast);
9
+ const scale4 = transparentize(0.6, contrast);
10
+ const scale5 = transparentize(0.5, contrast);
11
+ const scale6 = transparentize(0.4, contrast);
12
+ const scale7 = transparentize(0.3, contrast);
13
+ const scale8 = transparentize(0.2, contrast);
14
+ const scale9 = transparentize(0.1, contrast);
15
+ const scale10 = contrast;
13
16
  const darkScale = {
14
17
  scale0,
15
18
  scale1,
@@ -25,12 +28,34 @@ const darkScale = {
25
28
  accent: colors.brandDark,
26
29
  accentShade1: colors.brandDarkShade1,
27
30
  accentShade2: colors.brandDarkShade2,
28
- background0: colors.brandBackground0,
29
- background1: colors.brandBackground1,
30
- background2: colors.brandBackground2,
31
- background3: colors.brandBackground3,
32
- background4: colors.brandBackground4,
33
- background5: colors.brandBackground5
31
+ background0: '#001828',
32
+ background1: '#0D2433',
33
+ background2: '#192F3D',
34
+ background3: '#253947',
35
+ background4: '#304350',
36
+ background5: '#3A4C59',
37
+ grayscale0: transparentize(0.95, grayVal),
38
+ grayscale1: transparentize(0.9, grayVal),
39
+ grayscale2: transparentize(0.8, grayVal),
40
+ grayscale3: transparentize(0.7, grayVal),
41
+ grayscale4: transparentize(0.6, grayVal),
42
+ grayscale5: transparentize(0.5, grayVal),
43
+ grayscale6: transparentize(0.4, grayVal),
44
+ grayscale7: transparentize(0.3, grayVal),
45
+ grayscale8: transparentize(0.2, grayVal),
46
+ grayscale9: transparentize(0.1, grayVal),
47
+ grayscale10: grayVal,
48
+ contrast0: scale0,
49
+ contrast1: scale1,
50
+ contrast2: scale2,
51
+ contrast3: scale3,
52
+ contrast4: scale4,
53
+ contrast5: scale5,
54
+ contrast6: scale6,
55
+ contrast7: scale7,
56
+ contrast8: scale8,
57
+ contrast9: scale9,
58
+ contrast10: scale10
34
59
  };
35
60
  const dark_darkScale = darkScale;
36
61
  export { dark_darkScale as default };
package/build/theme/core/light/light.js CHANGED
@@ -383,7 +383,7 @@ const light = {
383
383
  },
384
384
  calendar: {
385
385
  background: {
386
- container: colors.contrast10,
386
+ container: lightScale.background0,
387
387
  hover: lightScale.scale1,
388
388
  active: colors.brand,
389
389
  activeHover: colors.brandShade1,
@@ -392,7 +392,7 @@ const light = {
392
392
  color: {
393
393
  disabled: lightScale.scale4,
394
394
  default: lightScale.scale10,
395
- active: colors.contrast10,
395
+ active: lightScale.contrast10,
396
396
  current: colors.brand,
397
397
  outside: lightScale.scale6,
398
398
  weekday: lightScale.scale8,
@@ -461,14 +461,14 @@ const light = {
461
461
  }
462
462
  },
463
463
  modal: {
464
- background: colors.contrast10,
464
+ background: lightScale.background0,
465
465
  color: {
466
466
  header: lightScale.scale10,
467
467
  body: lightScale.scale6
468
468
  }
469
469
  },
470
470
  options: {
471
- background: colors.contrast10,
471
+ background: lightScale.background0,
472
472
  backdropFilter: void 0
473
473
  },
474
474
  optionItem: {
@@ -538,7 +538,7 @@ const light = {
538
538
  }
539
539
  },
540
540
  toggle: {
541
- slider: colors.contrast10
541
+ slider: lightScale.background0
542
542
  },
543
543
  tooltip: {
544
544
  background: '#FFF',
package/build/theme/core/light/lightScale.d.ts CHANGED
@@ -19,5 +19,27 @@ declare const lightScale: {
19
19
  background3: string;
20
20
  background4: string;
21
21
  background5: string;
22
+ grayscale0: string;
23
+ grayscale1: string;
24
+ grayscale2: string;
25
+ grayscale3: string;
26
+ grayscale4: string;
27
+ grayscale5: string;
28
+ grayscale6: string;
29
+ grayscale7: string;
30
+ grayscale8: string;
31
+ grayscale9: string;
32
+ grayscale10: string;
33
+ contrast0: string;
34
+ contrast1: string;
35
+ contrast2: string;
36
+ contrast3: string;
37
+ contrast4: string;
38
+ contrast5: string;
39
+ contrast6: string;
40
+ contrast7: string;
41
+ contrast8: string;
42
+ contrast9: string;
43
+ contrast10: string;
22
44
  };
23
45
  export default lightScale;
package/build/theme/core/light/lightScale.js CHANGED
@@ -1,15 +1,18 @@
1
+ import { transparentize } from "polished";
1
2
  import colors from "../colors.js";
2
- const scale0 = colors.grayscale0;
3
- const scale1 = colors.grayscale1;
4
- const scale2 = colors.grayscale2;
5
- const scale3 = colors.grayscale3;
6
- const scale4 = colors.grayscale4;
7
- const scale5 = colors.grayscale5;
8
- const scale6 = colors.grayscale6;
9
- const scale7 = colors.grayscale7;
10
- const scale8 = colors.grayscale8;
11
- const scale9 = colors.grayscale9;
12
- const scale10 = colors.grayscale10;
3
+ const white = '#FFFFFF';
4
+ const contrast = '#001D32';
5
+ const scale0 = transparentize(0.95, contrast);
6
+ const scale1 = transparentize(0.9, contrast);
7
+ const scale2 = transparentize(0.8, contrast);
8
+ const scale3 = transparentize(0.7, contrast);
9
+ const scale4 = transparentize(0.6, contrast);
10
+ const scale5 = transparentize(0.5, contrast);
11
+ const scale6 = transparentize(0.4, contrast);
12
+ const scale7 = transparentize(0.3, contrast);
13
+ const scale8 = transparentize(0.2, contrast);
14
+ const scale9 = transparentize(0.1, contrast);
15
+ const scale10 = contrast;
13
16
  const lightScale = {
14
17
  scale0,
15
18
  scale1,
@@ -26,11 +29,33 @@ const lightScale = {
26
29
  accentShade1: colors.brandShade1,
27
30
  accentShade2: colors.brandShade2,
28
31
  background0: '#FFFFFF',
29
- background1: '#F2F3F4',
32
+ background1: '#F2F4F5',
30
33
  background2: '#E6E9EB',
31
- background3: '#CCD2D6',
32
- background4: '#B3BCC2',
33
- background5: '#99A5AD'
34
+ background3: '#DADFE2',
35
+ background4: '#CFD5D9',
36
+ background5: '#C5CCD1',
37
+ grayscale0: scale0,
38
+ grayscale1: scale1,
39
+ grayscale2: scale2,
40
+ grayscale3: scale3,
41
+ grayscale4: scale4,
42
+ grayscale5: scale5,
43
+ grayscale6: scale6,
44
+ grayscale7: scale7,
45
+ grayscale8: scale8,
46
+ grayscale9: scale9,
47
+ grayscale10: scale10,
48
+ contrast0: transparentize(0.95, white),
49
+ contrast1: transparentize(0.9, white),
50
+ contrast2: transparentize(0.8, white),
51
+ contrast3: transparentize(0.7, white),
52
+ contrast4: transparentize(0.6, white),
53
+ contrast5: transparentize(0.5, white),
54
+ contrast6: transparentize(0.4, white),
55
+ contrast7: transparentize(0.3, white),
56
+ contrast8: transparentize(0.2, white),
57
+ contrast9: transparentize(0.1, white),
58
+ contrast10: white
34
59
  };
35
60
  const light_lightScale = lightScale;
36
61
  export { light_lightScale as default };
package/build/theme/mono/colors.d.ts CHANGED
@@ -13,12 +13,6 @@ declare const colors: {
13
13
  brandTint2: string;
14
14
  brandTint3: string;
15
15
  brandTint4: string;
16
- brandBackground0: string;
17
- brandBackground1: string;
18
- brandBackground2: string;
19
- brandBackground3: string;
20
- brandBackground4: string;
21
- brandBackground5: string;
22
16
  error: string;
23
17
  errorShade1: string;
24
18
  errorShade2: string;
@@ -51,28 +45,6 @@ declare const colors: {
51
45
  successTint2: string;
52
46
  successTint3: string;
53
47
  successTint4: string;
54
- grayscale0: string;
55
- grayscale1: string;
56
- grayscale2: string;
57
- grayscale3: string;
58
- grayscale4: string;
59
- grayscale5: string;
60
- grayscale6: string;
61
- grayscale7: string;
62
- grayscale8: string;
63
- grayscale9: string;
64
- grayscale10: string;
65
- contrast0: string;
66
- contrast1: string;
67
- contrast2: string;
68
- contrast3: string;
69
- contrast4: string;
70
- contrast5: string;
71
- contrast6: string;
72
- contrast7: string;
73
- contrast8: string;
74
- contrast9: string;
75
- contrast10: string;
76
48
  };
77
49
  export default colors;
78
50
  export interface IColors {
@@ -102,18 +74,6 @@ export interface IColors {
102
74
  brandTint3: string;
103
75
  /** 40% of #0074F4 */
104
76
  brandTint4: string;
105
- /** #001828 */
106
- brandBackground0: string;
107
- /** #0D2433 */
108
- brandBackground1: string;
109
- /** #192F3D */
110
- brandBackground2: string;
111
- /** #334653 */
112
- brandBackground3: string;
113
- /** #475964 */
114
- brandBackground4: string;
115
- /** #596A74 */
116
- brandBackground5: string;
117
77
  /** #FF6068 */
118
78
  error: string;
119
79
  /** #E6565E */
@@ -177,49 +137,5 @@ export interface IColors {
177
137
  successTint3: string;
178
138
  /** 40% of #00C242 */
179
139
  successTint4: string;
180
- /** 5% of #001D32 */
181
- grayscale0: string;
182
- /** 10% of #001D32 */
183
- grayscale1: string;
184
- /** 20% of #001D32 */
185
- grayscale2: string;
186
- /** 30% of #001D32 */
187
- grayscale3: string;
188
- /** 40% of #001D32 */
189
- grayscale4: string;
190
- /** 50% of #001D32 */
191
- grayscale5: string;
192
- /** 60% of #001D32 */
193
- grayscale6: string;
194
- /** 70% of #001D32 */
195
- grayscale7: string;
196
- /** 80% of #001D32 */
197
- grayscale8: string;
198
- /** 90% of #001D32 */
199
- grayscale9: string;
200
- /** #001D32 */
201
- grayscale10: string;
202
- /** 5% of #FFFFFF */
203
- contrast0: string;
204
- /** 10% of #FFFFFF */
205
- contrast1: string;
206
- /** 20% of #FFFFFF */
207
- contrast2: string;
208
- /** 30% of #FFFFFF */
209
- contrast3: string;
210
- /** 40% of #FFFFFF */
211
- contrast4: string;
212
- /** 50% of #FFFFFF */
213
- contrast5: string;
214
- /** 60% of #FFFFFF */
215
- contrast6: string;
216
- /** 70% of #FFFFFF */
217
- contrast7: string;
218
- /** 80% of #FFFFFF */
219
- contrast8: string;
220
- /** 90% of #FFFFFF */
221
- contrast9: string;
222
- /** #FFFFFF */
223
- contrast10: string;
224
140
  }
225
141
  export type ColorNames = keyof typeof colors;
package/build/theme/mono/colors.js CHANGED
@@ -4,8 +4,6 @@ const error = '#FF6068';
4
4
  const warning = '#FF9900';
5
5
  const alertColor = '#F0BB00';
6
6
  const success = '#00C242';
7
- const grayVal = '#121212';
8
- const white = '#FFFFFF';
9
7
  const colors = {
10
8
  logo1: brand,
11
9
  logo2: '#00A9E2',
@@ -21,12 +19,6 @@ const colors = {
21
19
  brandTint2: transparentize(0.8, brand),
22
20
  brandTint3: transparentize(0.7, brand),
23
21
  brandTint4: transparentize(0.6, brand),
24
- brandBackground0: '#121212',
25
- brandBackground1: '#1e1e1e',
26
- brandBackground2: '#292929',
27
- brandBackground3: '#3a3a3a',
28
- brandBackground4: '#4b4b4b',
29
- brandBackground5: '#5c5c5c',
30
22
  error,
31
23
  errorShade1: '#E6565E',
32
24
  errorShade2: '#CC4D53',
@@ -58,29 +50,7 @@ const colors = {
58
50
  successTint1: transparentize(0.9, success),
59
51
  successTint2: transparentize(0.8, success),
60
52
  successTint3: transparentize(0.7, success),
61
- successTint4: transparentize(0.6, success),
62
- grayscale0: transparentize(0.95, grayVal),
63
- grayscale1: transparentize(0.9, grayVal),
64
- grayscale2: transparentize(0.8, grayVal),
65
- grayscale3: transparentize(0.7, grayVal),
66
- grayscale4: transparentize(0.6, grayVal),
67
- grayscale5: transparentize(0.5, grayVal),
68
- grayscale6: transparentize(0.4, grayVal),
69
- grayscale7: transparentize(0.3, grayVal),
70
- grayscale8: transparentize(0.2, grayVal),
71
- grayscale9: transparentize(0.1, grayVal),
72
- grayscale10: grayVal,
73
- contrast0: transparentize(0.95, white),
74
- contrast1: transparentize(0.9, white),
75
- contrast2: transparentize(0.8, white),
76
- contrast3: transparentize(0.7, white),
77
- contrast4: transparentize(0.6, white),
78
- contrast5: transparentize(0.5, white),
79
- contrast6: transparentize(0.4, white),
80
- contrast7: transparentize(0.3, white),
81
- contrast8: transparentize(0.2, white),
82
- contrast9: transparentize(0.1, white),
83
- contrast10: white
53
+ successTint4: transparentize(0.6, success)
84
54
  };
85
55
  const mono_colors = colors;
86
56
  export { mono_colors as default };
package/build/theme/mono/dark/dark.js CHANGED
@@ -383,7 +383,7 @@ const dark = {
383
383
  },
384
384
  calendar: {
385
385
  background: {
386
- container: colors.brandBackground3,
386
+ container: darkScale.background3,
387
387
  hover: darkScale.scale1,
388
388
  active: colors.brand,
389
389
  activeHover: colors.brandShade1,
@@ -461,14 +461,14 @@ const dark = {
461
461
  }
462
462
  },
463
463
  modal: {
464
- background: colors.brandBackground3,
464
+ background: darkScale.background3,
465
465
  color: {
466
466
  header: darkScale.scale10,
467
467
  body: darkScale.scale6
468
468
  }
469
469
  },
470
470
  options: {
471
- background: colors.brandBackground2,
471
+ background: darkScale.background2,
472
472
  backdropFilter: void 0
473
473
  },
474
474
  optionItem: {
@@ -538,10 +538,10 @@ const dark = {
538
538
  }
539
539
  },
540
540
  toggle: {
541
- slider: colors.brandBackground0
541
+ slider: darkScale.background0
542
542
  },
543
543
  tooltip: {
544
- background: colors.brandBackground4,
544
+ background: darkScale.background4,
545
545
  color: {
546
546
  default: darkScale.scale10,
547
547
  subtext: darkScale.scale6
package/build/theme/mono/dark/darkScale.d.ts CHANGED
@@ -19,5 +19,27 @@ declare const darkScale: {
19
19
  background3: string;
20
20
  background4: string;
21
21
  background5: string;
22
+ grayscale0: string;
23
+ grayscale1: string;
24
+ grayscale2: string;
25
+ grayscale3: string;
26
+ grayscale4: string;
27
+ grayscale5: string;
28
+ grayscale6: string;
29
+ grayscale7: string;
30
+ grayscale8: string;
31
+ grayscale9: string;
32
+ grayscale10: string;
33
+ contrast0: string;
34
+ contrast1: string;
35
+ contrast2: string;
36
+ contrast3: string;
37
+ contrast4: string;
38
+ contrast5: string;
39
+ contrast6: string;
40
+ contrast7: string;
41
+ contrast8: string;
42
+ contrast9: string;
43
+ contrast10: string;
22
44
  };
23
45
  export default darkScale;
package/build/theme/mono/dark/darkScale.js CHANGED
@@ -1,15 +1,18 @@
1
+ import { transparentize } from "polished";
1
2
  import colors from "../colors.js";
2
- const scale0 = colors.contrast0;
3
- const scale1 = colors.contrast1;
4
- const scale2 = colors.contrast2;
5
- const scale3 = colors.contrast3;
6
- const scale4 = colors.contrast4;
7
- const scale5 = colors.contrast5;
8
- const scale6 = colors.contrast6;
9
- const scale7 = colors.contrast7;
10
- const scale8 = colors.contrast8;
11
- const scale9 = colors.contrast9;
12
- const scale10 = colors.contrast10;
3
+ const grayVal = '#121212';
4
+ const contrast = '#FFFFFF';
5
+ const scale0 = transparentize(0.95, contrast);
6
+ const scale1 = transparentize(0.9, contrast);
7
+ const scale2 = transparentize(0.8, contrast);
8
+ const scale3 = transparentize(0.7, contrast);
9
+ const scale4 = transparentize(0.6, contrast);
10
+ const scale5 = transparentize(0.5, contrast);
11
+ const scale6 = transparentize(0.4, contrast);
12
+ const scale7 = transparentize(0.3, contrast);
13
+ const scale8 = transparentize(0.2, contrast);
14
+ const scale9 = transparentize(0.1, contrast);
15
+ const scale10 = contrast;
13
16
  const darkScale = {
14
17
  scale0,
15
18
  scale1,
@@ -25,12 +28,34 @@ const darkScale = {
25
28
  accent: colors.brandDark,
26
29
  accentShade1: colors.brandDarkShade1,
27
30
  accentShade2: colors.brandDarkShade2,
28
- background0: colors.brandBackground0,
29
- background1: colors.brandBackground1,
30
- background2: colors.brandBackground2,
31
- background3: colors.brandBackground3,
32
- background4: colors.brandBackground4,
33
- background5: colors.brandBackground5
31
+ background0: '#121212',
32
+ background1: '#1E1E1E',
33
+ background2: '#292929',
34
+ background3: '#343434',
35
+ background4: '#3E3E3E',
36
+ background5: '#484848',
37
+ grayscale0: transparentize(0.95, grayVal),
38
+ grayscale1: transparentize(0.9, grayVal),
39
+ grayscale2: transparentize(0.8, grayVal),
40
+ grayscale3: transparentize(0.7, grayVal),
41
+ grayscale4: transparentize(0.6, grayVal),
42
+ grayscale5: transparentize(0.5, grayVal),
43
+ grayscale6: transparentize(0.4, grayVal),
44
+ grayscale7: transparentize(0.3, grayVal),
45
+ grayscale8: transparentize(0.2, grayVal),
46
+ grayscale9: transparentize(0.1, grayVal),
47
+ grayscale10: grayVal,
48
+ contrast0: scale0,
49
+ contrast1: scale1,
50
+ contrast2: scale2,
51
+ contrast3: scale3,
52
+ contrast4: scale4,
53
+ contrast5: scale5,
54
+ contrast6: scale6,
55
+ contrast7: scale7,
56
+ contrast8: scale8,
57
+ contrast9: scale9,
58
+ contrast10: scale10
34
59
  };
35
60
  const dark_darkScale = darkScale;
36
61
  export { dark_darkScale as default };
package/build/theme/mono/light/light.js CHANGED
@@ -383,7 +383,7 @@ const light = {
383
383
  },
384
384
  calendar: {
385
385
  background: {
386
- container: colors.contrast10,
386
+ container: lightScale.background0,
387
387
  hover: lightScale.scale1,
388
388
  active: colors.brand,
389
389
  activeHover: colors.brandShade1,
@@ -392,7 +392,7 @@ const light = {
392
392
  color: {
393
393
  disabled: lightScale.scale4,
394
394
  default: lightScale.scale10,
395
- active: colors.contrast10,
395
+ active: lightScale.contrast10,
396
396
  current: colors.brand,
397
397
  outside: lightScale.scale6,
398
398
  weekday: lightScale.scale8,
@@ -461,14 +461,14 @@ const light = {
461
461
  }
462
462
  },
463
463
  modal: {
464
- background: colors.contrast10,
464
+ background: lightScale.background0,
465
465
  color: {
466
466
  header: lightScale.scale10,
467
467
  body: lightScale.scale6
468
468
  }
469
469
  },
470
470
  options: {
471
- background: colors.contrast10,
471
+ background: lightScale.background0,
472
472
  backdropFilter: void 0
473
473
  },
474
474
  optionItem: {
@@ -538,7 +538,7 @@ const light = {
538
538
  }
539
539
  },
540
540
  toggle: {
541
- slider: colors.contrast10
541
+ slider: lightScale.background0
542
542
  },
543
543
  tooltip: {
544
544
  background: '#FFF',
package/build/theme/mono/light/lightScale.d.ts CHANGED
@@ -19,5 +19,27 @@ declare const lightScale: {
19
19
  background3: string;
20
20
  background4: string;
21
21
  background5: string;
22
+ grayscale0: string;
23
+ grayscale1: string;
24
+ grayscale2: string;
25
+ grayscale3: string;
26
+ grayscale4: string;
27
+ grayscale5: string;
28
+ grayscale6: string;
29
+ grayscale7: string;
30
+ grayscale8: string;
31
+ grayscale9: string;
32
+ grayscale10: string;
33
+ contrast0: string;
34
+ contrast1: string;
35
+ contrast2: string;
36
+ contrast3: string;
37
+ contrast4: string;
38
+ contrast5: string;
39
+ contrast6: string;
40
+ contrast7: string;
41
+ contrast8: string;
42
+ contrast9: string;
43
+ contrast10: string;
22
44
  };
23
45
  export default lightScale;
package/build/theme/mono/light/lightScale.js CHANGED
@@ -1,15 +1,18 @@
1
+ import { transparentize } from "polished";
1
2
  import colors from "../colors.js";
2
- const scale0 = colors.grayscale0;
3
- const scale1 = colors.grayscale1;
4
- const scale2 = colors.grayscale2;
5
- const scale3 = colors.grayscale3;
6
- const scale4 = colors.grayscale4;
7
- const scale5 = colors.grayscale5;
8
- const scale6 = colors.grayscale6;
9
- const scale7 = colors.grayscale7;
10
- const scale8 = colors.grayscale8;
11
- const scale9 = colors.grayscale9;
12
- const scale10 = colors.grayscale10;
3
+ const white = '#FFFFFF';
4
+ const contrast = '#121212';
5
+ const scale0 = transparentize(0.95, contrast);
6
+ const scale1 = transparentize(0.9, contrast);
7
+ const scale2 = transparentize(0.8, contrast);
8
+ const scale3 = transparentize(0.7, contrast);
9
+ const scale4 = transparentize(0.6, contrast);
10
+ const scale5 = transparentize(0.5, contrast);
11
+ const scale6 = transparentize(0.4, contrast);
12
+ const scale7 = transparentize(0.3, contrast);
13
+ const scale8 = transparentize(0.2, contrast);
14
+ const scale9 = transparentize(0.1, contrast);
15
+ const scale10 = contrast;
13
16
  const lightScale = {
14
17
  scale0,
15
18
  scale1,
@@ -25,12 +28,34 @@ const lightScale = {
25
28
  accent: colors.brand,
26
29
  accentShade1: colors.brandShade1,
27
30
  accentShade2: colors.brandShade2,
28
- background0: '#FFFFFF',
29
- background1: '#F2F3F4',
30
- background2: '#E6E9EB',
31
- background3: '#CCD2D6',
32
- background4: '#B3BCC2',
33
- background5: '#99A5AD'
31
+ background0: '#FEFEFE',
32
+ background1: '#F2F2F2',
33
+ background2: '#E7E7E7',
34
+ background3: '#DCDCDC',
35
+ background4: '#D2D2D2',
36
+ background5: '#C8C8C8',
37
+ grayscale0: scale0,
38
+ grayscale1: scale1,
39
+ grayscale2: scale2,
40
+ grayscale3: scale3,
41
+ grayscale4: scale4,
42
+ grayscale5: scale5,
43
+ grayscale6: scale6,
44
+ grayscale7: scale7,
45
+ grayscale8: scale8,
46
+ grayscale9: scale9,
47
+ grayscale10: scale10,
48
+ contrast0: transparentize(0.95, white),
49
+ contrast1: transparentize(0.9, white),
50
+ contrast2: transparentize(0.8, white),
51
+ contrast3: transparentize(0.7, white),
52
+ contrast4: transparentize(0.6, white),
53
+ contrast5: transparentize(0.5, white),
54
+ contrast6: transparentize(0.4, white),
55
+ contrast7: transparentize(0.3, white),
56
+ contrast8: transparentize(0.2, white),
57
+ contrast9: transparentize(0.1, white),
58
+ contrast10: white
34
59
  };
35
60
  const light_lightScale = lightScale;
36
61
  export { light_lightScale as default };
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@wavv/ui",
3
- "version": "2.3.19",
3
+ "version": "2.4.0-alpha.1",
4
4
  "type": "module",
5
5
  "exports": {
6
6
  ".": {