@vuu-ui/vuu-theme 4.0.0-beta.7 → 4.0.0

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.
@@ -77,38 +77,50 @@
77
77
  /* Text */
78
78
  --salt-text-h1-fontFamily: var(--salt-text-heading-fontFamily);
79
79
  --salt-text-h1-fontWeight: var(--salt-text-heading-fontWeight);
80
- --salt-text-h1-fontWeight-small: var(--salt-text-heading-fontWeight-small);
81
- --salt-text-h1-fontWeight-strong: var(--salt-text-heading-fontWeight-strong);
80
+ --salt-text-h1-fontWeight-small: var(--salt-text-heading-fontWeight-lighter);
81
+ --salt-text-h1-fontWeight-strong: var(--salt-text-heading-fontWeight-bolder);
82
82
  --salt-text-h2-fontFamily: var(--salt-text-heading-fontFamily);
83
83
  --salt-text-h2-fontWeight: var(--salt-text-heading-fontWeight);
84
- --salt-text-h2-fontWeight-small: var(--salt-text-heading-fontWeight-small);
85
- --salt-text-h2-fontWeight-strong: var(--salt-text-heading-fontWeight-strong);
84
+ --salt-text-h2-fontWeight-small: var(--salt-text-heading-fontWeight-lighter);
85
+ --salt-text-h2-fontWeight-strong: var(--salt-text-heading-fontWeight-bolder);
86
86
  --salt-text-h3-fontFamily: var(--salt-text-heading-fontFamily);
87
87
  --salt-text-h3-fontWeight: var(--salt-text-heading-fontWeight);
88
- --salt-text-h3-fontWeight-small: var(--salt-text-heading-fontWeight-small);
89
- --salt-text-h3-fontWeight-strong: var(--salt-text-heading-fontWeight-strong);
88
+ --salt-text-h3-fontWeight-small: var(--salt-text-heading-fontWeight-lighter);
89
+ --salt-text-h3-fontWeight-strong: var(--salt-text-heading-fontWeight-bolder);
90
90
  --salt-text-h4-fontFamily: var(--salt-text-heading-fontFamily);
91
91
  --salt-text-h4-fontWeight: var(--salt-text-heading-fontWeight);
92
- --salt-text-h4-fontWeight-small: var(--salt-text-heading-fontWeight-small);
93
- --salt-text-h4-fontWeight-strong: var(--salt-text-heading-fontWeight-strong);
92
+ --salt-text-h4-fontWeight-small: var(--salt-text-heading-fontWeight-lighter);
93
+ --salt-text-h4-fontWeight-strong: var(--salt-text-heading-fontWeight-bolder);
94
94
  --salt-text-display1-fontFamily: var(--salt-text-display-fontFamily);
95
95
  --salt-text-display1-fontWeight: var(--salt-text-display-fontWeight);
96
- --salt-text-display1-fontWeight-small: var(--salt-text-display-fontWeight-small);
97
- --salt-text-display1-fontWeight-strong: var(--salt-text-display-fontWeight-strong);
96
+ --salt-text-display1-fontWeight-small: var(--salt-text-display-fontWeight-lighter);
97
+ --salt-text-display1-fontWeight-strong: var(--salt-text-display-fontWeight-bolder);
98
98
  --salt-text-display2-fontFamily: var(--salt-text-display-fontFamily);
99
99
  --salt-text-display2-fontWeight: var(--salt-text-display-fontWeight);
100
- --salt-text-display2-fontWeight-small: var(--salt-text-display-fontWeight-small);
101
- --salt-text-display2-fontWeight-strong: var(--salt-text-display-fontWeight-strong);
100
+ --salt-text-display2-fontWeight-small: var(--salt-text-display-fontWeight-lighter);
101
+ --salt-text-display2-fontWeight-strong: var(--salt-text-display-fontWeight-bolder);
102
102
  --salt-text-display3-fontFamily: var(--salt-text-display-fontFamily);
103
103
  --salt-text-display3-fontWeight: var(--salt-text-display-fontWeight);
104
- --salt-text-display3-fontWeight-small: var(--salt-text-display-fontWeight-small);
105
- --salt-text-display3-fontWeight-strong: var(--salt-text-display-fontWeight-strong);
104
+ --salt-text-display3-fontWeight-small: var(--salt-text-display-fontWeight-lighter);
105
+ --salt-text-display3-fontWeight-strong: var(--salt-text-display-fontWeight-bolder);
106
106
  --salt-text-display4-fontFamily: var(--salt-text-display-fontFamily);
107
107
  --salt-text-display4-fontWeight: var(--salt-text-display-fontWeight);
108
- --salt-text-display4-fontWeight-small: var(--salt-text-display-fontWeight-small);
109
- --salt-text-display4-fontWeight-strong: var(--salt-text-display-fontWeight-strong);
108
+ --salt-text-display4-fontWeight-small: var(--salt-text-display-fontWeight-lighter);
109
+ --salt-text-display4-fontWeight-strong: var(--salt-text-display-fontWeight-bolder);
110
110
  --salt-text-label-fontFamily: var(--salt-text-fontFamily);
111
111
  --salt-text-notation-fontFamily: var(--salt-text-fontFamily);
112
+ --salt-text-fontWeight-small: var(--salt-text-fontWeight-lighter);
113
+ --salt-text-fontWeight-strong: var(--salt-text-fontWeight-bolder);
114
+ --salt-text-action-fontWeight-small: var(--salt-text-action-fontWeight-lighter);
115
+ --salt-text-action-fontWeight-strong: var(--salt-text-action-fontWeight-bolder);
116
+ --salt-text-display-fontWeight-small: var(--salt-text-display-fontWeight-lighter);
117
+ --salt-text-display-fontWeight-strong: var(--salt-text-display-fontWeight-bolder);
118
+ --salt-text-heading-fontWeight-small: var(--salt-text-heading-fontWeight-lighter);
119
+ --salt-text-heading-fontWeight-strong: var(--salt-text-heading-fontWeight-bolder);
120
+ --salt-text-label-fontWeight-small: var(--salt-text-label-fontWeight-lighter);
121
+ --salt-text-label-fontWeight-strong: var(--salt-text-label-fontWeight-bolder);
122
+ --salt-text-notation-fontWeight-small: var(--salt-text-notation-fontWeight-lighter);
123
+ --salt-text-notation-fontWeight-strong: var(--salt-text-notation-fontWeight-bolder);
112
124
 
113
125
  /* Navigable */
114
126
  --salt-navigable-cursor-active: pointer;
@@ -7,21 +7,33 @@
7
7
  /* Body text (should be used as default) */
8
8
  --salt-text-fontFamily: var(--salt-typography-fontFamily-nunito);
9
9
  --salt-text-fontWeight: var(--salt-typography-fontWeight-regular);
10
- --salt-text-fontWeight-small: var(--salt-typography-fontWeight-light);
11
- --salt-text-fontWeight-strong: var(--salt-typography-fontWeight-semiBold);
10
+ --salt-text-fontWeight-lighter: var(--salt-typography-fontWeight-light);
11
+ --salt-text-fontWeight-bolder: var(--salt-typography-fontWeight-semiBold);
12
12
 
13
13
  /* Notation */
14
14
  --salt-text-notation-fontWeight: var(--salt-typography-fontWeight-semiBold);
15
- --salt-text-notation-fontWeight-small: var(--salt-typography-fontWeight-regular);
16
- --salt-text-notation-fontWeight-strong: var(--salt-typography-fontWeight-bold);
15
+ --salt-text-notation-fontWeight-lighter: var(--salt-typography-fontWeight-regular);
16
+ --salt-text-notation-fontWeight-bolder: var(--salt-typography-fontWeight-bold);
17
17
 
18
18
  /* Label */
19
19
  --salt-text-label-fontWeight: var(--salt-typography-fontWeight-regular);
20
- --salt-text-label-fontWeight-small: var(--salt-typography-fontWeight-light);
21
- --salt-text-label-fontWeight-strong: var(--salt-typography-fontWeight-semiBold);
20
+ --salt-text-label-fontWeight-lighter: var(--salt-typography-fontWeight-light);
21
+ --salt-text-label-fontWeight-bolder: var(--salt-typography-fontWeight-semiBold);
22
22
 
23
23
  /* Code */
24
24
  --salt-text-code-fontFamily: var(--salt-typography-fontFamily-ptMono);
25
+ --salt-text-code-fontWeight: var(--salt-typography-fontWeight-regular);
26
+
27
+ /* Editorial */
28
+ --salt-text-editorial-letterSpacing: 0;
29
+
30
+ /* Eyebrow */
31
+ --salt-text-eyebrow-letterSpacing: 0.1em;
32
+ --salt-text-eyebrow-textTransform: uppercase;
33
+ --salt-text-eyebrow-fontStyle: var(--salt-typography-fontStyle-normal);
34
+ --salt-text-eyebrow-fontWeight: var(--salt-typography-fontWeight-bold);
35
+ --salt-text-eyebrow-fontWeight-lighter: var(--salt-typography-fontWeight-medium);
36
+ --salt-text-eyebrow-fontWeight-bolder: var(--salt-typography-fontWeight-bold);
25
37
  }
26
38
 
27
39
  /*
@@ -36,14 +48,14 @@
36
48
  --salt-text-action-textAlign: center;
37
49
  --salt-text-action-fontFamily: var(--salt-typography-fontFamily-nunito);
38
50
  --salt-text-action-fontWeight: var(--salt-typography-fontWeight-semiBold);
39
- --salt-text-action-fontWeight-small: var(--salt-typography-fontWeight-regular);
40
- --salt-text-action-fontWeight-strong: var(--salt-typography-fontWeight-bold);
51
+ --salt-text-action-fontWeight-lighter: var(--salt-typography-fontWeight-regular);
52
+ --salt-text-action-fontWeight-bolder: var(--salt-typography-fontWeight-bold);
41
53
 
42
54
  /* Heading */
43
55
  --salt-text-heading-fontFamily: var(--salt-typography-fontFamily-nunito);
44
56
  --salt-text-heading-fontWeight: var(--salt-typography-fontWeight-semiBold);
45
- --salt-text-heading-fontWeight-small: var(--salt-typography-fontWeight-regular);
46
- --salt-text-heading-fontWeight-strong: var(--salt-typography-fontWeight-bold);
57
+ --salt-text-heading-fontWeight-lighter: var(--salt-typography-fontWeight-regular);
58
+ --salt-text-heading-fontWeight-bolder: var(--salt-typography-fontWeight-bold);
47
59
 
48
60
  /* Display */
49
61
  --salt-text-display-fontFamily: var(--salt-typography-fontFamily-nunito);
@@ -51,8 +63,19 @@
51
63
  --salt-text-display-textTransform: none;
52
64
  --salt-text-display-fontStyle: var(--salt-typography-fontStyle-normal);
53
65
  --salt-text-display-fontWeight: var(--salt-typography-fontWeight-semiBold);
54
- --salt-text-display-fontWeight-small: var(--salt-typography-fontWeight-regular);
55
- --salt-text-display-fontWeight-strong: var(--salt-typography-fontWeight-bold);
66
+ --salt-text-display-fontWeight-lighter: var(--salt-typography-fontWeight-regular);
67
+ --salt-text-display-fontWeight-bolder: var(--salt-typography-fontWeight-bold);
68
+
69
+ /* Editorial */
70
+ --salt-text-editorial-fontFamily: var(--salt-typography-fontFamily-nunito);
71
+ --salt-text-editorial-textTransform: none;
72
+ --salt-text-editorial-fontStyle: var(--salt-typography-fontStyle-normal);
73
+ --salt-text-editorial-fontWeight: var(--salt-typography-fontWeight-light);
74
+ --salt-text-editorial-fontWeight-lighter: var(--salt-typography-fontWeight-light);
75
+ --salt-text-editorial-fontWeight-bolder: var(--salt-typography-fontWeight-light);
76
+
77
+ /* Eyebrow */
78
+ --salt-text-eyebrow-fontFamily: var(--salt-typography-fontFamily-nunito);
56
79
  }
57
80
 
58
81
  /* Sizes by density */
@@ -72,10 +95,16 @@
72
95
  --salt-text-label-fontSize: 14px;
73
96
  --salt-text-label-lineHeight: 18px;
74
97
 
98
+ --salt-text-label2-fontSize: 16px;
99
+ --salt-text-label2-lineHeight: 21px;
100
+
75
101
  --salt-text-fontSize: 16px;
76
102
  --salt-text-lineHeight: 20px;
77
103
  --salt-text-minHeight: 20px;
78
104
 
105
+ --salt-text-body2-fontSize: 18px;
106
+ --salt-text-body2-lineHeight: 29px;
107
+
79
108
  --salt-text-display1-fontSize: 102px;
80
109
  --salt-text-display1-lineHeight: 133px;
81
110
 
@@ -88,6 +117,27 @@
88
117
  --salt-text-display4-fontSize: 54px;
89
118
  --salt-text-display4-lineHeight: 70px;
90
119
 
120
+ --salt-text-editorial1-fontSize: 194px;
121
+ --salt-text-editorial1-lineHeight: 194px;
122
+
123
+ --salt-text-editorial2-fontSize: 168px;
124
+ --salt-text-editorial2-lineHeight: 168px;
125
+
126
+ --salt-text-editorial3-fontSize: 144px;
127
+ --salt-text-editorial3-lineHeight: 144px;
128
+
129
+ --salt-text-editorial4-fontSize: 122px;
130
+ --salt-text-editorial4-lineHeight: 122px;
131
+
132
+ --salt-text-editorial5-fontSize: 102px;
133
+ --salt-text-editorial5-lineHeight: 102px;
134
+
135
+ --salt-text-editorial6-fontSize: 84px;
136
+ --salt-text-editorial6-lineHeight: 84px;
137
+
138
+ --salt-text-eyebrow-fontSize: 18px;
139
+ --salt-text-eyebrow-lineHeight: 23px;
140
+
91
141
  --salt-text-notation-fontSize: 14px;
92
142
  --salt-text-notation-lineHeight: 18px;
93
143
  }
@@ -108,10 +158,16 @@
108
158
  --salt-text-label-fontSize: 12px;
109
159
  --salt-text-label-lineHeight: 16px;
110
160
 
161
+ --salt-text-label2-fontSize: 14px;
162
+ --salt-text-label2-lineHeight: 18px;
163
+
111
164
  --salt-text-fontSize: 14px;
112
165
  --salt-text-lineHeight: 18px;
113
166
  --salt-text-minHeight: 18px;
114
167
 
168
+ --salt-text-body2-fontSize: 16px;
169
+ --salt-text-body2-lineHeight: 26px;
170
+
115
171
  --salt-text-display1-fontSize: 84px;
116
172
  --salt-text-display1-lineHeight: 109px;
117
173
 
@@ -124,6 +180,27 @@
124
180
  --salt-text-display4-fontSize: 42px;
125
181
  --salt-text-display4-lineHeight: 55px;
126
182
 
183
+ --salt-text-editorial1-fontSize: 168px;
184
+ --salt-text-editorial1-lineHeight: 168px;
185
+
186
+ --salt-text-editorial2-fontSize: 144px;
187
+ --salt-text-editorial2-lineHeight: 144px;
188
+
189
+ --salt-text-editorial3-fontSize: 122px;
190
+ --salt-text-editorial3-lineHeight: 122px;
191
+
192
+ --salt-text-editorial4-fontSize: 102px;
193
+ --salt-text-editorial4-lineHeight: 102px;
194
+
195
+ --salt-text-editorial5-fontSize: 84px;
196
+ --salt-text-editorial5-lineHeight: 84px;
197
+
198
+ --salt-text-editorial6-fontSize: 68px;
199
+ --salt-text-editorial6-lineHeight: 68px;
200
+
201
+ --salt-text-eyebrow-fontSize: 16px;
202
+ --salt-text-eyebrow-lineHeight: 21px;
203
+
127
204
  --salt-text-notation-fontSize: 12px;
128
205
  --salt-text-notation-lineHeight: 16px;
129
206
  }
@@ -144,10 +221,16 @@
144
221
  --salt-text-label-fontSize: 11px;
145
222
  --salt-text-label-lineHeight: 14px;
146
223
 
224
+ --salt-text-label2-fontSize: 12px;
225
+ --salt-text-label2-lineHeight: 16px;
226
+
147
227
  --salt-text-fontSize: 12px;
148
228
  --salt-text-lineHeight: 16px;
149
229
  --salt-text-minHeight: 16px;
150
230
 
231
+ --salt-text-body2-fontSize: 14px;
232
+ --salt-text-body2-lineHeight: 22px;
233
+
151
234
  --salt-text-display1-fontSize: 68px;
152
235
  --salt-text-display1-lineHeight: 88px;
153
236
 
@@ -160,6 +243,27 @@
160
243
  --salt-text-display4-fontSize: 32px;
161
244
  --salt-text-display4-lineHeight: 42px;
162
245
 
246
+ --salt-text-editorial1-fontSize: 144px;
247
+ --salt-text-editorial1-lineHeight: 144px;
248
+
249
+ --salt-text-editorial2-fontSize: 122px;
250
+ --salt-text-editorial2-lineHeight: 122px;
251
+
252
+ --salt-text-editorial3-fontSize: 102px;
253
+ --salt-text-editorial3-lineHeight: 102px;
254
+
255
+ --salt-text-editorial4-fontSize: 84px;
256
+ --salt-text-editorial4-lineHeight: 84px;
257
+
258
+ --salt-text-editorial5-fontSize: 68px;
259
+ --salt-text-editorial5-lineHeight: 68px;
260
+
261
+ --salt-text-editorial6-fontSize: 54px;
262
+ --salt-text-editorial6-lineHeight: 54px;
263
+
264
+ --salt-text-eyebrow-fontSize: 14px;
265
+ --salt-text-eyebrow-lineHeight: 18px;
266
+
163
267
  --salt-text-notation-fontSize: 10px;
164
268
  --salt-text-notation-lineHeight: 13px;
165
269
  }
@@ -180,10 +284,16 @@
180
284
  --salt-text-label-fontSize: 10px;
181
285
  --salt-text-label-lineHeight: 13px;
182
286
 
287
+ --salt-text-label2-fontSize: 11px;
288
+ --salt-text-label2-lineHeight: 14px;
289
+
183
290
  --salt-text-fontSize: 11px;
184
291
  --salt-text-lineHeight: 14px;
185
292
  --salt-text-minHeight: 14px;
186
293
 
294
+ --salt-text-body2-fontSize: 12px;
295
+ --salt-text-body2-lineHeight: 19px;
296
+
187
297
  --salt-text-display1-fontSize: 54px;
188
298
  --salt-text-display1-lineHeight: 70px;
189
299
 
@@ -196,6 +306,27 @@
196
306
  --salt-text-display4-fontSize: 24px;
197
307
  --salt-text-display4-lineHeight: 32px;
198
308
 
309
+ --salt-text-editorial1-fontSize: 122px;
310
+ --salt-text-editorial1-lineHeight: 122px;
311
+
312
+ --salt-text-editorial2-fontSize: 102px;
313
+ --salt-text-editorial2-lineHeight: 102px;
314
+
315
+ --salt-text-editorial3-fontSize: 84px;
316
+ --salt-text-editorial3-lineHeight: 84px;
317
+
318
+ --salt-text-editorial4-fontSize: 68px;
319
+ --salt-text-editorial4-lineHeight: 68px;
320
+
321
+ --salt-text-editorial5-fontSize: 54px;
322
+ --salt-text-editorial5-lineHeight: 54px;
323
+
324
+ --salt-text-editorial6-fontSize: 42px;
325
+ --salt-text-editorial6-lineHeight: 42px;
326
+
327
+ --salt-text-eyebrow-fontSize: 12px;
328
+ --salt-text-eyebrow-lineHeight: 16px;
329
+
199
330
  --salt-text-notation-fontSize: 8px;
200
331
  --salt-text-notation-lineHeight: 10px;
201
332
  }
@@ -216,10 +347,16 @@
216
347
  --salt-text-label-fontSize: 14px;
217
348
  --salt-text-label-lineHeight: 18px;
218
349
 
350
+ --salt-text-label2-fontSize: 16px;
351
+ --salt-text-label2-lineHeight: 21px;
352
+
219
353
  --salt-text-fontSize: 16px;
220
354
  --salt-text-lineHeight: 21px;
221
355
  --salt-text-minHeight: 21px;
222
356
 
357
+ --salt-text-body2-fontSize: 18px;
358
+ --salt-text-body2-lineHeight: 29px;
359
+
223
360
  --salt-text-display1-fontSize: 40px;
224
361
  --salt-text-display1-lineHeight: 52px;
225
362
 
@@ -232,6 +369,27 @@
232
369
  --salt-text-display4-fontSize: 28px;
233
370
  --salt-text-display4-lineHeight: 36px;
234
371
 
372
+ --salt-text-editorial1-fontSize: 56px;
373
+ --salt-text-editorial1-lineHeight: 56px;
374
+
375
+ --salt-text-editorial2-fontSize: 52px;
376
+ --salt-text-editorial2-lineHeight: 52px;
377
+
378
+ --salt-text-editorial3-fontSize: 48px;
379
+ --salt-text-editorial3-lineHeight: 48px;
380
+
381
+ --salt-text-editorial4-fontSize: 44px;
382
+ --salt-text-editorial4-lineHeight: 44px;
383
+
384
+ --salt-text-editorial5-fontSize: 40px;
385
+ --salt-text-editorial5-lineHeight: 40px;
386
+
387
+ --salt-text-editorial6-fontSize: 36px;
388
+ --salt-text-editorial6-lineHeight: 36px;
389
+
390
+ --salt-text-eyebrow-fontSize: 18px;
391
+ --salt-text-eyebrow-lineHeight: 23px;
392
+
235
393
  --salt-text-notation-fontSize: 12px;
236
394
  --salt-text-notation-lineHeight: 16px;
237
395
  }
package/package.json CHANGED
@@ -1,5 +1,5 @@
1
1
  {
2
- "version": "4.0.0-beta.7",
2
+ "version": "4.0.0",
3
3
  "license": "Apache-2.0",
4
4
  "type": "module",
5
5
  "scripts": {