@depersgroep/lfvp-design-tokens 0.67.0 → 0.69.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.
Files changed (5) hide show
  1. package/css/streamz/_tokens.scss +88 -49
  2. package/css/streamz/tokens.css +88 -49
  3. package/css/vtmgo/_tokens.scss +91 -50
  4. package/css/vtmgo/tokens.css +91 -50
  5. package/package.json +1 -1
package/css/streamz/_tokens.scss CHANGED
@@ -1,5 +1,7 @@
1
1
  :root{
2
2
  --base-primary-font:Gilroy;
3
+ --base-color-ui-white:#ffffff;
4
+ --core-color-green-50:#00FF85;
3
5
  --core-color-red-50:#FF0A5C;
4
6
  --core-color-alpha-95:rgba(118,115,140,0.05);
5
7
  --core-color-alpha-90:rgba(118,115,140,0.10);
@@ -14,8 +16,6 @@
14
16
  --core-color-alpha-10:rgba(118,115,140,0.9);
15
17
  --core-color-alpha-5:rgba(118,115,140,0.95);
16
18
  --core-color-alpha-0:#76738c;
17
- --core-color-gradient-extra-1:linear-gradient(180deg, #171431, #ff0a5a);
18
- --core-color-gradient-brand:linear-gradient(90deg, #f20d3a, #ff0a5a 50.52%, #cc0243);
19
19
  --core-color-neutrals-100:#ffffff;
20
20
  --core-color-neutrals-95:#f1f1f4;
21
21
  --core-color-neutrals-90:#e4e3e8;
@@ -30,19 +30,19 @@
30
30
  --core-color-neutrals-10:#120f24;
31
31
  --core-color-neutrals-5:#09071b;
32
32
  --core-color-neutrals-0:#020012;
33
- --core-color-streamz-pink-95:#ffe5ee;
34
- --core-color-streamz-pink-90:#ffccdd;
35
- --core-color-streamz-pink-80:#ff99ba;
36
- --core-color-streamz-pink-70:#ff6698;
37
- --core-color-streamz-pink-60:#ff3376;
38
- --core-color-streamz-pink-50:#ff0a5c;
39
- --core-color-streamz-pink-40:#cc0043;
40
- --core-color-streamz-pink-30:#990032;
41
- --core-color-streamz-pink-20:#660021;
42
- --core-color-streamz-pink-15:#4d0019;
43
- --core-color-streamz-pink-10:#330011;
44
- --core-color-streamz-pink-5:#1a0008;
45
- --core-color-streamz-pink-0:#050002;
33
+ --core-color-primary-95:#ffe5ee;
34
+ --core-color-primary-90:#ffccdd;
35
+ --core-color-primary-80:#ff99ba;
36
+ --core-color-primary-70:#ff6698;
37
+ --core-color-primary-60:#ff3376;
38
+ --core-color-primary-50:#ff0a5c;
39
+ --core-color-primary-40:#cc0043;
40
+ --core-color-primary-30:#990032;
41
+ --core-color-primary-20:#660021;
42
+ --core-color-primary-15:#4d0019;
43
+ --core-color-primary-10:#330011;
44
+ --core-color-primary-5:#1a0008;
45
+ --core-color-primary-0:#050002;
46
46
  --core-sizing-88:88px;
47
47
  --core-sizing-80:80px;
48
48
  --core-sizing-72:72px;
@@ -93,6 +93,7 @@
93
93
  --core-font-size-18:18px;
94
94
  --core-font-size-16:16px;
95
95
  --core-font-size-14:14px;
96
+ --core-font-size-13:13px;
96
97
  --core-font-size-12:12px;
97
98
  --core-font-size-10:10px;
98
99
  --core-font-weight-extra-bold:800;
@@ -132,6 +133,9 @@
132
133
  --base-typography-title-level3:var(--base-font-weight-title) var(--core-font-size-20)/var(--core-line-height-120) var(--base-primary-font);
133
134
  --base-typography-title-level2:var(--base-font-weight-title) var(--core-font-size-24)/var(--core-line-height-120) var(--base-primary-font);
134
135
  --base-typography-title-level1:var(--base-font-weight-title) var(--core-font-size-32)/var(--core-line-height-120) var(--base-primary-font);
136
+ --base-typography-form-placeholder:var(--base-font-weight-semi-bold-text) var(--core-font-size-16)/var(--core-line-height-130) var(--base-primary-font);
137
+ --base-typography-form-label:var(--base-font-weight-bold-text) var(--core-font-size-16)/var(--core-line-height-130) var(--base-primary-font);
138
+ --base-typography-form-input:var(--base-font-weight-semi-bold-text) var(--core-font-size-16)/var(--core-line-height-130) var(--base-primary-font);
135
139
  --base-border-selectable-active:var(--core-border-width-3) solid var(--core-color-neutrals-80);
136
140
  --base-border-selectable-focus:var(--core-border-width-3) solid var(--core-color-neutrals-80);
137
141
  --base-border-selectable-hover:var(--core-border-width-2) solid rgba(0,0,0,0.08);
@@ -160,24 +164,34 @@
160
164
  --base-border-radius-selectable-large:var(--core-border-radius-8);
161
165
  --base-border-radius-selectable-medium:var(--core-border-radius-8);
162
166
  --base-border-radius-selectable-small:var(--core-border-radius-8);
163
- --base-color-ui-error:var(--core-color-red-50);
167
+ --base-color-ui-accent2:var(--core-color-neutrals-60);
168
+ --base-color-ui-accent1:var(--core-color-neutrals-30);
169
+ --base-color-ui-bg4:var(--core-color-neutrals-15);
170
+ --base-color-ui-bg3:var(--core-color-neutrals-10);
171
+ --base-color-ui-bg2:var(--core-color-neutrals-5);
172
+ --base-color-ui-bg1:var(--core-color-neutrals-0);
173
+ --base-color-functional-success:var(--core-color-green-50);
174
+ --base-color-functional-error:var(--core-color-red-50);
164
175
  --base-color-selectable-secondary-foreground:var(--core-color-neutrals-100);
165
176
  --base-color-selectable-secondary-darkest:var(--core-color-alpha-60);
166
177
  --base-color-selectable-secondary-darker:var(--core-color-alpha-70);
167
178
  --base-color-selectable-secondary-default:var(--core-color-alpha-80);
168
- --base-color-brand-foreground:var(--core-color-neutrals-100);
169
- --base-color-brand-darkest:var(--core-color-streamz-pink-30);
170
- --base-color-brand-darker:var(--core-color-streamz-pink-40);
171
- --base-color-brand-default:var(--core-color-streamz-pink-50);
172
- --base-color-brand-lighter:var(--core-color-streamz-pink-70);
173
- --base-color-selectable-primary-foreground:var(--base-color-brand-foreground);
174
- --base-color-selectable-primary-darkest:var(--base-color-brand-darkest);
175
- --base-color-selectable-primary-darker:var(--base-color-brand-darker);
176
- --base-color-selectable-primary-default:var(--base-color-brand-default);
179
+ --base-color-primary-foreground:var(--core-color-neutrals-100);
180
+ --base-color-primary-darkest:var(--core-color-primary-30);
181
+ --base-color-primary-darker:var(--core-color-primary-40);
182
+ --base-color-primary-default:var(--core-color-primary-50);
183
+ --base-color-primary-lighter:var(--core-color-primary-70);
184
+ --base-color-gradient-2:linear-gradient(180deg, var(--core-color-neutrals-15) 0%, var(--core-color-primary-50) 100%);
185
+ --base-color-gradient-1:linear-gradient(90deg, var(--core-color-primary-50) 0%, var(--core-color-primary-60) 50%, var(--core-color-primary-40) 100%);
186
+ --base-color-selectable-primary-foreground:var(--base-color-primary-foreground);
187
+ --base-color-selectable-primary-darkest:var(--base-color-primary-darkest);
188
+ --base-color-selectable-primary-darker:var(--base-color-primary-darker);
189
+ --base-color-selectable-primary-default:var(--base-color-primary-default);
177
190
  }
178
191
 
179
192
  @media screen and (min-width:768px){
180
193
  :root{
194
+ --base-color-ui-white:#ffffff;
181
195
  --base-typography-text-bold-text-x-large:var(--base-font-weight-bold-text) var(--core-font-size-20)/var(--core-line-height-140) var(--base-primary-font);
182
196
  --base-typography-text-bold-text-large:var(--base-font-weight-bold-text) var(--core-font-size-18)/var(--core-line-height-140) var(--base-primary-font);
183
197
  --base-typography-text-bold-text-medium:var(--base-font-weight-bold-text) var(--core-font-size-16)/var(--core-line-height-140) var(--base-primary-font);
@@ -199,6 +213,9 @@
199
213
  --base-typography-title-level3:var(--base-font-weight-title) var(--core-font-size-24)/var(--core-line-height-120) var(--base-primary-font);
200
214
  --base-typography-title-level2:var(--base-font-weight-title) var(--core-font-size-32)/var(--core-line-height-120) var(--base-primary-font);
201
215
  --base-typography-title-level1:var(--base-font-weight-title) var(--core-font-size-40)/var(--core-line-height-120) var(--base-primary-font);
216
+ --base-typography-form-placeholder:var(--base-font-weight-semi-bold-text) var(--core-font-size-16)/var(--core-line-height-130) var(--base-primary-font);
217
+ --base-typography-form-label:var(--base-font-weight-bold-text) var(--core-font-size-16)/var(--core-line-height-130) var(--base-primary-font);
218
+ --base-typography-form-input:var(--base-font-weight-semi-bold-text) var(--core-font-size-16)/var(--core-line-height-130) var(--base-primary-font);
202
219
  --base-border-selectable-active:var(--core-border-width-3) solid var(--core-color-neutrals-80);
203
220
  --base-border-selectable-focus:var(--core-border-width-3) solid var(--core-color-neutrals-80);
204
221
  --base-border-selectable-hover:var(--core-border-width-2) solid rgba(0,0,0,0.08);
@@ -227,24 +244,34 @@
227
244
  --base-border-radius-selectable-large:var(--core-border-radius-8);
228
245
  --base-border-radius-selectable-medium:var(--core-border-radius-8);
229
246
  --base-border-radius-selectable-small:var(--core-border-radius-8);
230
- --base-color-ui-error:var(--core-color-red-50);
247
+ --base-color-ui-accent2:var(--core-color-neutrals-60);
248
+ --base-color-ui-accent1:var(--core-color-neutrals-30);
249
+ --base-color-ui-bg4:var(--core-color-neutrals-15);
250
+ --base-color-ui-bg3:var(--core-color-neutrals-10);
251
+ --base-color-ui-bg2:var(--core-color-neutrals-5);
252
+ --base-color-ui-bg1:var(--core-color-neutrals-0);
253
+ --base-color-functional-success:var(--core-color-green-50);
254
+ --base-color-functional-error:var(--core-color-red-50);
231
255
  --base-color-selectable-secondary-foreground:var(--core-color-neutrals-100);
232
256
  --base-color-selectable-secondary-darkest:var(--core-color-alpha-60);
233
257
  --base-color-selectable-secondary-darker:var(--core-color-alpha-70);
234
258
  --base-color-selectable-secondary-default:var(--core-color-alpha-80);
235
- --base-color-brand-foreground:var(--core-color-neutrals-100);
236
- --base-color-brand-darkest:var(--core-color-streamz-pink-30);
237
- --base-color-brand-darker:var(--core-color-streamz-pink-40);
238
- --base-color-brand-default:var(--core-color-streamz-pink-50);
239
- --base-color-brand-lighter:var(--core-color-streamz-pink-70);
240
- --base-color-selectable-primary-foreground:var(--base-color-brand-foreground);
241
- --base-color-selectable-primary-darkest:var(--base-color-brand-darkest);
242
- --base-color-selectable-primary-darker:var(--base-color-brand-darker);
243
- --base-color-selectable-primary-default:var(--base-color-brand-default);
259
+ --base-color-primary-foreground:var(--core-color-neutrals-100);
260
+ --base-color-primary-darkest:var(--core-color-primary-30);
261
+ --base-color-primary-darker:var(--core-color-primary-40);
262
+ --base-color-primary-default:var(--core-color-primary-50);
263
+ --base-color-primary-lighter:var(--core-color-primary-70);
264
+ --base-color-gradient-2:linear-gradient(180deg, var(--core-color-neutrals-15) 0%, var(--core-color-primary-50) 100%);
265
+ --base-color-gradient-1:linear-gradient(90deg, var(--core-color-primary-50) 0%, var(--core-color-primary-60) 50%, var(--core-color-primary-40) 100%);
266
+ --base-color-selectable-primary-foreground:var(--base-color-primary-foreground);
267
+ --base-color-selectable-primary-darkest:var(--base-color-primary-darkest);
268
+ --base-color-selectable-primary-darker:var(--base-color-primary-darker);
269
+ --base-color-selectable-primary-default:var(--base-color-primary-default);
244
270
  }
245
271
  }
246
272
  @media screen and (min-width:1024px){
247
273
  :root{
274
+ --base-color-ui-white:#ffffff;
248
275
  --base-typography-text-bold-text-x-large:var(--base-font-weight-bold-text) var(--core-font-size-20)/var(--core-line-height-140) var(--base-primary-font);
249
276
  --base-typography-text-bold-text-large:var(--base-font-weight-bold-text) var(--core-font-size-18)/var(--core-line-height-140) var(--base-primary-font);
250
277
  --base-typography-text-bold-text-medium:var(--base-font-weight-bold-text) var(--core-font-size-16)/var(--core-line-height-140) var(--base-primary-font);
@@ -262,10 +289,13 @@
262
289
  --base-typography-text-regular-text-x-small:var(--base-font-weight-regular-text) var(--core-font-size-12)/var(--core-line-height-140) var(--base-primary-font);
263
290
  --base-typography-title-level6:var(--base-font-weight-title) var(--core-font-size-16)/var(--core-line-height-120) var(--base-primary-font);
264
291
  --base-typography-title-level5:var(--base-font-weight-title) var(--core-font-size-18)/var(--core-line-height-120) var(--base-primary-font);
265
- --base-typography-title-level4:var(--base-font-weight-title) var(--core-font-size-24)/var(--core-line-height-120) var(--base-primary-font);
266
- --base-typography-title-level3:var(--base-font-weight-title) var(--core-font-size-28)/var(--core-line-height-120) var(--base-primary-font);
292
+ --base-typography-title-level4:var(--base-font-weight-title) var(--core-font-size-20)/var(--core-line-height-120) var(--base-primary-font);
293
+ --base-typography-title-level3:var(--base-font-weight-title) var(--core-font-size-24)/var(--core-line-height-120) var(--base-primary-font);
267
294
  --base-typography-title-level2:var(--base-font-weight-title) var(--core-font-size-32)/var(--core-line-height-120) var(--base-primary-font);
268
- --base-typography-title-level1:var(--base-font-weight-title) var(--core-font-size-48)/var(--core-line-height-120) var(--base-primary-font);
295
+ --base-typography-title-level1:var(--base-font-weight-title) var(--core-font-size-40)/var(--core-line-height-120) var(--base-primary-font);
296
+ --base-typography-form-placeholder:var(--base-font-weight-semi-bold-text) var(--core-font-size-16)/var(--core-line-height-130) var(--base-primary-font);
297
+ --base-typography-form-label:var(--base-font-weight-bold-text) var(--core-font-size-16)/var(--core-line-height-130) var(--base-primary-font);
298
+ --base-typography-form-input:var(--base-font-weight-semi-bold-text) var(--core-font-size-16)/var(--core-line-height-130) var(--base-primary-font);
269
299
  --base-border-selectable-active:var(--core-border-width-3) solid var(--core-color-neutrals-80);
270
300
  --base-border-selectable-focus:var(--core-border-width-3) solid var(--core-color-neutrals-80);
271
301
  --base-border-selectable-hover:var(--core-border-width-2) solid rgba(0,0,0,0.08);
@@ -294,20 +324,29 @@
294
324
  --base-border-radius-selectable-large:var(--core-border-radius-8);
295
325
  --base-border-radius-selectable-medium:var(--core-border-radius-8);
296
326
  --base-border-radius-selectable-small:var(--core-border-radius-8);
297
- --base-color-ui-error:var(--core-color-red-50);
327
+ --base-color-ui-accent2:var(--core-color-neutrals-60);
328
+ --base-color-ui-accent1:var(--core-color-neutrals-30);
329
+ --base-color-ui-bg4:var(--core-color-neutrals-15);
330
+ --base-color-ui-bg3:var(--core-color-neutrals-10);
331
+ --base-color-ui-bg2:var(--core-color-neutrals-5);
332
+ --base-color-ui-bg1:var(--core-color-neutrals-0);
333
+ --base-color-functional-success:var(--core-color-green-50);
334
+ --base-color-functional-error:var(--core-color-red-50);
298
335
  --base-color-selectable-secondary-foreground:var(--core-color-neutrals-100);
299
336
  --base-color-selectable-secondary-darkest:var(--core-color-alpha-60);
300
337
  --base-color-selectable-secondary-darker:var(--core-color-alpha-70);
301
338
  --base-color-selectable-secondary-default:var(--core-color-alpha-80);
302
- --base-color-brand-foreground:var(--core-color-neutrals-100);
303
- --base-color-brand-darkest:var(--core-color-streamz-pink-30);
304
- --base-color-brand-darker:var(--core-color-streamz-pink-40);
305
- --base-color-brand-default:var(--core-color-streamz-pink-50);
306
- --base-color-brand-lighter:var(--core-color-streamz-pink-70);
307
- --base-color-selectable-primary-foreground:var(--base-color-brand-foreground);
308
- --base-color-selectable-primary-darkest:var(--base-color-brand-darkest);
309
- --base-color-selectable-primary-darker:var(--base-color-brand-darker);
310
- --base-color-selectable-primary-default:var(--base-color-brand-default);
339
+ --base-color-primary-foreground:var(--core-color-neutrals-100);
340
+ --base-color-primary-darkest:var(--core-color-primary-30);
341
+ --base-color-primary-darker:var(--core-color-primary-40);
342
+ --base-color-primary-default:var(--core-color-primary-50);
343
+ --base-color-primary-lighter:var(--core-color-primary-70);
344
+ --base-color-gradient-2:linear-gradient(180deg, var(--core-color-neutrals-15) 0%, var(--core-color-primary-50) 100%);
345
+ --base-color-gradient-1:linear-gradient(90deg, var(--core-color-primary-50) 0%, var(--core-color-primary-60) 50%, var(--core-color-primary-40) 100%);
346
+ --base-color-selectable-primary-foreground:var(--base-color-primary-foreground);
347
+ --base-color-selectable-primary-darkest:var(--base-color-primary-darkest);
348
+ --base-color-selectable-primary-darker:var(--base-color-primary-darker);
349
+ --base-color-selectable-primary-default:var(--base-color-primary-default);
311
350
  }
312
351
  }
313
352
  :root{
@@ -344,7 +383,7 @@
344
383
  --button-color-secondary-background-hover:var(--base-color-selectable-secondary-darker);
345
384
  --button-color-secondary-background-normal:var(--base-color-selectable-secondary-default);
346
385
  --button-color-primary-background-disabled:var(--base-color-selectable-secondary-default);
347
- --button-color-primary-background-active:var(--base-color-brand-darkest);
386
+ --button-color-primary-background-active:var(--base-color-primary-darkest);
348
387
  --button-spacing-vertical-x-large:21px;
349
388
  --button-spacing-vertical-large:14px;
350
389
  --button-spacing-vertical-medium:12px;
package/css/streamz/tokens.css CHANGED
@@ -1,5 +1,7 @@
1
1
  :root {
2
2
  --base-primary-font: Gilroy;
3
+ --base-color-ui-white: #ffffff;
4
+ --core-color-green-50: #00FF85;
3
5
  --core-color-red-50: #FF0A5C;
4
6
  --core-color-alpha-95: rgba(118,115,140,0.05);
5
7
  --core-color-alpha-90: rgba(118,115,140,0.10);
@@ -14,8 +16,6 @@
14
16
  --core-color-alpha-10: rgba(118,115,140,0.9);
15
17
  --core-color-alpha-5: rgba(118,115,140,0.95);
16
18
  --core-color-alpha-0: #76738c;
17
- --core-color-gradient-extra-1: linear-gradient(180deg, #171431 0%, #ff0a5a 100%);
18
- --core-color-gradient-brand: linear-gradient(90deg, #f20d3a 0%, #ff0a5a 50.52%, #cc0243 100%);
19
19
  --core-color-neutrals-100: #ffffff;
20
20
  --core-color-neutrals-95: #f1f1f4;
21
21
  --core-color-neutrals-90: #e4e3e8;
@@ -30,19 +30,19 @@
30
30
  --core-color-neutrals-10: #120f24;
31
31
  --core-color-neutrals-5: #09071b;
32
32
  --core-color-neutrals-0: #020012;
33
- --core-color-streamz-pink-95: #ffe5ee;
34
- --core-color-streamz-pink-90: #ffccdd;
35
- --core-color-streamz-pink-80: #ff99ba;
36
- --core-color-streamz-pink-70: #ff6698;
37
- --core-color-streamz-pink-60: #ff3376;
38
- --core-color-streamz-pink-50: #ff0a5c; /* Primary */
39
- --core-color-streamz-pink-40: #cc0043;
40
- --core-color-streamz-pink-30: #990032;
41
- --core-color-streamz-pink-20: #660021;
42
- --core-color-streamz-pink-15: #4d0019;
43
- --core-color-streamz-pink-10: #330011;
44
- --core-color-streamz-pink-5: #1a0008;
45
- --core-color-streamz-pink-0: #050002;
33
+ --core-color-primary-95: #ffe5ee;
34
+ --core-color-primary-90: #ffccdd;
35
+ --core-color-primary-80: #ff99ba;
36
+ --core-color-primary-70: #ff6698;
37
+ --core-color-primary-60: #ff3376;
38
+ --core-color-primary-50: #ff0a5c; /* Primary */
39
+ --core-color-primary-40: #cc0043;
40
+ --core-color-primary-30: #990032;
41
+ --core-color-primary-20: #660021;
42
+ --core-color-primary-15: #4d0019;
43
+ --core-color-primary-10: #330011;
44
+ --core-color-primary-5: #1a0008;
45
+ --core-color-primary-0: #050002;
46
46
  --core-sizing-88: 88px;
47
47
  --core-sizing-80: 80px;
48
48
  --core-sizing-72: 72px;
@@ -93,6 +93,7 @@
93
93
  --core-font-size-18: 18px;
94
94
  --core-font-size-16: 16px;
95
95
  --core-font-size-14: 14px;
96
+ --core-font-size-13: 13px;
96
97
  --core-font-size-12: 12px;
97
98
  --core-font-size-10: 10px;
98
99
  --core-font-weight-extra-bold: 800;
@@ -132,6 +133,9 @@
132
133
  --base-typography-title-level3: var(--base-font-weight-title) var(--core-font-size-20)/var(--core-line-height-120) var(--base-primary-font);
133
134
  --base-typography-title-level2: var(--base-font-weight-title) var(--core-font-size-24)/var(--core-line-height-120) var(--base-primary-font);
134
135
  --base-typography-title-level1: var(--base-font-weight-title) var(--core-font-size-32)/var(--core-line-height-120) var(--base-primary-font);
136
+ --base-typography-form-placeholder: var(--base-font-weight-semi-bold-text) var(--core-font-size-16)/var(--core-line-height-130) var(--base-primary-font);
137
+ --base-typography-form-label: var(--base-font-weight-bold-text) var(--core-font-size-16)/var(--core-line-height-130) var(--base-primary-font);
138
+ --base-typography-form-input: var(--base-font-weight-semi-bold-text) var(--core-font-size-16)/var(--core-line-height-130) var(--base-primary-font);
135
139
  --base-border-selectable-active: var(--core-border-width-3) solid var(--core-color-neutrals-80);
136
140
  --base-border-selectable-focus: var(--core-border-width-3) solid var(--core-color-neutrals-80);
137
141
  --base-border-selectable-hover: var(--core-border-width-2) solid rgba(0,0,0,0.08);
@@ -160,24 +164,34 @@
160
164
  --base-border-radius-selectable-large: var(--core-border-radius-8);
161
165
  --base-border-radius-selectable-medium: var(--core-border-radius-8);
162
166
  --base-border-radius-selectable-small: var(--core-border-radius-8);
163
- --base-color-ui-error: var(--core-color-red-50);
167
+ --base-color-ui-accent2: var(--core-color-neutrals-60);
168
+ --base-color-ui-accent1: var(--core-color-neutrals-30);
169
+ --base-color-ui-bg4: var(--core-color-neutrals-15);
170
+ --base-color-ui-bg3: var(--core-color-neutrals-10);
171
+ --base-color-ui-bg2: var(--core-color-neutrals-5);
172
+ --base-color-ui-bg1: var(--core-color-neutrals-0);
173
+ --base-color-functional-success: var(--core-color-green-50);
174
+ --base-color-functional-error: var(--core-color-red-50);
164
175
  --base-color-selectable-secondary-foreground: var(--core-color-neutrals-100);
165
176
  --base-color-selectable-secondary-darkest: var(--core-color-alpha-60);
166
177
  --base-color-selectable-secondary-darker: var(--core-color-alpha-70);
167
178
  --base-color-selectable-secondary-default: var(--core-color-alpha-80);
168
- --base-color-brand-foreground: var(--core-color-neutrals-100);
169
- --base-color-brand-darkest: var(--core-color-streamz-pink-30);
170
- --base-color-brand-darker: var(--core-color-streamz-pink-40);
171
- --base-color-brand-default: var(--core-color-streamz-pink-50);
172
- --base-color-brand-lighter: var(--core-color-streamz-pink-70);
173
- --base-color-selectable-primary-foreground: var(--base-color-brand-foreground);
174
- --base-color-selectable-primary-darkest: var(--base-color-brand-darkest);
175
- --base-color-selectable-primary-darker: var(--base-color-brand-darker);
176
- --base-color-selectable-primary-default: var(--base-color-brand-default);
179
+ --base-color-primary-foreground: var(--core-color-neutrals-100);
180
+ --base-color-primary-darkest: var(--core-color-primary-30);
181
+ --base-color-primary-darker: var(--core-color-primary-40);
182
+ --base-color-primary-default: var(--core-color-primary-50);
183
+ --base-color-primary-lighter: var(--core-color-primary-70);
184
+ --base-color-gradient-2: linear-gradient(180deg, var(--core-color-neutrals-15) 0%, var(--core-color-primary-50) 100%);
185
+ --base-color-gradient-1: linear-gradient(90deg, var(--core-color-primary-50) 0%, var(--core-color-primary-60) 50%, var(--core-color-primary-40) 100%);
186
+ --base-color-selectable-primary-foreground: var(--base-color-primary-foreground);
187
+ --base-color-selectable-primary-darkest: var(--base-color-primary-darkest);
188
+ --base-color-selectable-primary-darker: var(--base-color-primary-darker);
189
+ --base-color-selectable-primary-default: var(--base-color-primary-default);
177
190
  }
178
191
 
179
192
  @media screen and (min-width: 768px) {
180
193
  :root {
194
+ --base-color-ui-white: #ffffff;
181
195
  --base-typography-text-bold-text-x-large: var(--base-font-weight-bold-text) var(--core-font-size-20)/var(--core-line-height-140) var(--base-primary-font);
182
196
  --base-typography-text-bold-text-large: var(--base-font-weight-bold-text) var(--core-font-size-18)/var(--core-line-height-140) var(--base-primary-font);
183
197
  --base-typography-text-bold-text-medium: var(--base-font-weight-bold-text) var(--core-font-size-16)/var(--core-line-height-140) var(--base-primary-font);
@@ -199,6 +213,9 @@
199
213
  --base-typography-title-level3: var(--base-font-weight-title) var(--core-font-size-24)/var(--core-line-height-120) var(--base-primary-font);
200
214
  --base-typography-title-level2: var(--base-font-weight-title) var(--core-font-size-32)/var(--core-line-height-120) var(--base-primary-font);
201
215
  --base-typography-title-level1: var(--base-font-weight-title) var(--core-font-size-40)/var(--core-line-height-120) var(--base-primary-font);
216
+ --base-typography-form-placeholder: var(--base-font-weight-semi-bold-text) var(--core-font-size-16)/var(--core-line-height-130) var(--base-primary-font);
217
+ --base-typography-form-label: var(--base-font-weight-bold-text) var(--core-font-size-16)/var(--core-line-height-130) var(--base-primary-font);
218
+ --base-typography-form-input: var(--base-font-weight-semi-bold-text) var(--core-font-size-16)/var(--core-line-height-130) var(--base-primary-font);
202
219
  --base-border-selectable-active: var(--core-border-width-3) solid var(--core-color-neutrals-80);
203
220
  --base-border-selectable-focus: var(--core-border-width-3) solid var(--core-color-neutrals-80);
204
221
  --base-border-selectable-hover: var(--core-border-width-2) solid rgba(0,0,0,0.08);
@@ -227,24 +244,34 @@
227
244
  --base-border-radius-selectable-large: var(--core-border-radius-8);
228
245
  --base-border-radius-selectable-medium: var(--core-border-radius-8);
229
246
  --base-border-radius-selectable-small: var(--core-border-radius-8);
230
- --base-color-ui-error: var(--core-color-red-50);
247
+ --base-color-ui-accent2: var(--core-color-neutrals-60);
248
+ --base-color-ui-accent1: var(--core-color-neutrals-30);
249
+ --base-color-ui-bg4: var(--core-color-neutrals-15);
250
+ --base-color-ui-bg3: var(--core-color-neutrals-10);
251
+ --base-color-ui-bg2: var(--core-color-neutrals-5);
252
+ --base-color-ui-bg1: var(--core-color-neutrals-0);
253
+ --base-color-functional-success: var(--core-color-green-50);
254
+ --base-color-functional-error: var(--core-color-red-50);
231
255
  --base-color-selectable-secondary-foreground: var(--core-color-neutrals-100);
232
256
  --base-color-selectable-secondary-darkest: var(--core-color-alpha-60);
233
257
  --base-color-selectable-secondary-darker: var(--core-color-alpha-70);
234
258
  --base-color-selectable-secondary-default: var(--core-color-alpha-80);
235
- --base-color-brand-foreground: var(--core-color-neutrals-100);
236
- --base-color-brand-darkest: var(--core-color-streamz-pink-30);
237
- --base-color-brand-darker: var(--core-color-streamz-pink-40);
238
- --base-color-brand-default: var(--core-color-streamz-pink-50);
239
- --base-color-brand-lighter: var(--core-color-streamz-pink-70);
240
- --base-color-selectable-primary-foreground: var(--base-color-brand-foreground);
241
- --base-color-selectable-primary-darkest: var(--base-color-brand-darkest);
242
- --base-color-selectable-primary-darker: var(--base-color-brand-darker);
243
- --base-color-selectable-primary-default: var(--base-color-brand-default);
259
+ --base-color-primary-foreground: var(--core-color-neutrals-100);
260
+ --base-color-primary-darkest: var(--core-color-primary-30);
261
+ --base-color-primary-darker: var(--core-color-primary-40);
262
+ --base-color-primary-default: var(--core-color-primary-50);
263
+ --base-color-primary-lighter: var(--core-color-primary-70);
264
+ --base-color-gradient-2: linear-gradient(180deg, var(--core-color-neutrals-15) 0%, var(--core-color-primary-50) 100%);
265
+ --base-color-gradient-1: linear-gradient(90deg, var(--core-color-primary-50) 0%, var(--core-color-primary-60) 50%, var(--core-color-primary-40) 100%);
266
+ --base-color-selectable-primary-foreground: var(--base-color-primary-foreground);
267
+ --base-color-selectable-primary-darkest: var(--base-color-primary-darkest);
268
+ --base-color-selectable-primary-darker: var(--base-color-primary-darker);
269
+ --base-color-selectable-primary-default: var(--base-color-primary-default);
244
270
  }
245
271
  }
246
272
  @media screen and (min-width: 1024px) {
247
273
  :root {
274
+ --base-color-ui-white: #ffffff;
248
275
  --base-typography-text-bold-text-x-large: var(--base-font-weight-bold-text) var(--core-font-size-20)/var(--core-line-height-140) var(--base-primary-font);
249
276
  --base-typography-text-bold-text-large: var(--base-font-weight-bold-text) var(--core-font-size-18)/var(--core-line-height-140) var(--base-primary-font);
250
277
  --base-typography-text-bold-text-medium: var(--base-font-weight-bold-text) var(--core-font-size-16)/var(--core-line-height-140) var(--base-primary-font);
@@ -262,10 +289,13 @@
262
289
  --base-typography-text-regular-text-x-small: var(--base-font-weight-regular-text) var(--core-font-size-12)/var(--core-line-height-140) var(--base-primary-font);
263
290
  --base-typography-title-level6: var(--base-font-weight-title) var(--core-font-size-16)/var(--core-line-height-120) var(--base-primary-font);
264
291
  --base-typography-title-level5: var(--base-font-weight-title) var(--core-font-size-18)/var(--core-line-height-120) var(--base-primary-font);
265
- --base-typography-title-level4: var(--base-font-weight-title) var(--core-font-size-24)/var(--core-line-height-120) var(--base-primary-font);
266
- --base-typography-title-level3: var(--base-font-weight-title) var(--core-font-size-28)/var(--core-line-height-120) var(--base-primary-font);
292
+ --base-typography-title-level4: var(--base-font-weight-title) var(--core-font-size-20)/var(--core-line-height-120) var(--base-primary-font);
293
+ --base-typography-title-level3: var(--base-font-weight-title) var(--core-font-size-24)/var(--core-line-height-120) var(--base-primary-font);
267
294
  --base-typography-title-level2: var(--base-font-weight-title) var(--core-font-size-32)/var(--core-line-height-120) var(--base-primary-font);
268
- --base-typography-title-level1: var(--base-font-weight-title) var(--core-font-size-48)/var(--core-line-height-120) var(--base-primary-font);
295
+ --base-typography-title-level1: var(--base-font-weight-title) var(--core-font-size-40)/var(--core-line-height-120) var(--base-primary-font);
296
+ --base-typography-form-placeholder: var(--base-font-weight-semi-bold-text) var(--core-font-size-16)/var(--core-line-height-130) var(--base-primary-font);
297
+ --base-typography-form-label: var(--base-font-weight-bold-text) var(--core-font-size-16)/var(--core-line-height-130) var(--base-primary-font);
298
+ --base-typography-form-input: var(--base-font-weight-semi-bold-text) var(--core-font-size-16)/var(--core-line-height-130) var(--base-primary-font);
269
299
  --base-border-selectable-active: var(--core-border-width-3) solid var(--core-color-neutrals-80);
270
300
  --base-border-selectable-focus: var(--core-border-width-3) solid var(--core-color-neutrals-80);
271
301
  --base-border-selectable-hover: var(--core-border-width-2) solid rgba(0,0,0,0.08);
@@ -294,20 +324,29 @@
294
324
  --base-border-radius-selectable-large: var(--core-border-radius-8);
295
325
  --base-border-radius-selectable-medium: var(--core-border-radius-8);
296
326
  --base-border-radius-selectable-small: var(--core-border-radius-8);
297
- --base-color-ui-error: var(--core-color-red-50);
327
+ --base-color-ui-accent2: var(--core-color-neutrals-60);
328
+ --base-color-ui-accent1: var(--core-color-neutrals-30);
329
+ --base-color-ui-bg4: var(--core-color-neutrals-15);
330
+ --base-color-ui-bg3: var(--core-color-neutrals-10);
331
+ --base-color-ui-bg2: var(--core-color-neutrals-5);
332
+ --base-color-ui-bg1: var(--core-color-neutrals-0);
333
+ --base-color-functional-success: var(--core-color-green-50);
334
+ --base-color-functional-error: var(--core-color-red-50);
298
335
  --base-color-selectable-secondary-foreground: var(--core-color-neutrals-100);
299
336
  --base-color-selectable-secondary-darkest: var(--core-color-alpha-60);
300
337
  --base-color-selectable-secondary-darker: var(--core-color-alpha-70);
301
338
  --base-color-selectable-secondary-default: var(--core-color-alpha-80);
302
- --base-color-brand-foreground: var(--core-color-neutrals-100);
303
- --base-color-brand-darkest: var(--core-color-streamz-pink-30);
304
- --base-color-brand-darker: var(--core-color-streamz-pink-40);
305
- --base-color-brand-default: var(--core-color-streamz-pink-50);
306
- --base-color-brand-lighter: var(--core-color-streamz-pink-70);
307
- --base-color-selectable-primary-foreground: var(--base-color-brand-foreground);
308
- --base-color-selectable-primary-darkest: var(--base-color-brand-darkest);
309
- --base-color-selectable-primary-darker: var(--base-color-brand-darker);
310
- --base-color-selectable-primary-default: var(--base-color-brand-default);
339
+ --base-color-primary-foreground: var(--core-color-neutrals-100);
340
+ --base-color-primary-darkest: var(--core-color-primary-30);
341
+ --base-color-primary-darker: var(--core-color-primary-40);
342
+ --base-color-primary-default: var(--core-color-primary-50);
343
+ --base-color-primary-lighter: var(--core-color-primary-70);
344
+ --base-color-gradient-2: linear-gradient(180deg, var(--core-color-neutrals-15) 0%, var(--core-color-primary-50) 100%);
345
+ --base-color-gradient-1: linear-gradient(90deg, var(--core-color-primary-50) 0%, var(--core-color-primary-60) 50%, var(--core-color-primary-40) 100%);
346
+ --base-color-selectable-primary-foreground: var(--base-color-primary-foreground);
347
+ --base-color-selectable-primary-darkest: var(--base-color-primary-darkest);
348
+ --base-color-selectable-primary-darker: var(--base-color-primary-darker);
349
+ --base-color-selectable-primary-default: var(--base-color-primary-default);
311
350
  }
312
351
  }
313
352
  :root {
@@ -344,7 +383,7 @@
344
383
  --button-color-secondary-background-hover: var(--base-color-selectable-secondary-darker);
345
384
  --button-color-secondary-background-normal: var(--base-color-selectable-secondary-default);
346
385
  --button-color-primary-background-disabled: var(--base-color-selectable-secondary-default);
347
- --button-color-primary-background-active: var(--base-color-brand-darkest);
386
+ --button-color-primary-background-active: var(--base-color-primary-darkest);
348
387
  --button-spacing-vertical-x-large: 21px;
349
388
  --button-spacing-vertical-large: 14px;
350
389
  --button-spacing-vertical-medium: 12px;
package/css/vtmgo/_tokens.scss CHANGED
@@ -1,5 +1,7 @@
1
1
  :root{
2
+ --base-color-ui-white:#ffffff;
2
3
  --base-primary-font:Nunito;
4
+ --core-color-green-50:#00FF3A;
3
5
  --core-color-red-50:#FF0056;
4
6
  --core-color-alpha-95:rgba(128,128,128,0.05);
5
7
  --core-color-alpha-90:rgba(128,128,128,0.1);
@@ -28,19 +30,19 @@
28
30
  --core-color-neutrals-10:#1A1A1A;
29
31
  --core-color-neutrals-5:#0D0D0D;
30
32
  --core-color-neutrals-0:#000000;
31
- --core-color-vtmgo-pink-95:#FFE5FF;
32
- --core-color-vtmgo-pink-90:#FFCCFF;
33
- --core-color-vtmgo-pink-80:#FF99FF;
34
- --core-color-vtmgo-pink-70:#FF66FF;
35
- --core-color-vtmgo-pink-60:#FF33FF;
36
- --core-color-vtmgo-pink-50:#ff00ff;
37
- --core-color-vtmgo-pink-40:#CC00CC;
38
- --core-color-vtmgo-pink-30:#990099;
39
- --core-color-vtmgo-pink-20:#660066;
40
- --core-color-vtmgo-pink-15:#4C004D;
41
- --core-color-vtmgo-pink-10:#330033;
42
- --core-color-vtmgo-pink-5:#19001A;
43
- --core-color-vtmgo-pink-0:#050005;
33
+ --core-color-primary-95:#FFE5FF;
34
+ --core-color-primary-90:#FFCCFF;
35
+ --core-color-primary-80:#FF99FF;
36
+ --core-color-primary-70:#FF66FF;
37
+ --core-color-primary-60:#FF33FF;
38
+ --core-color-primary-50:#FF00FF;
39
+ --core-color-primary-40:#CC00CC;
40
+ --core-color-primary-30:#990099;
41
+ --core-color-primary-20:#660066;
42
+ --core-color-primary-15:#4C004D;
43
+ --core-color-primary-10:#330033;
44
+ --core-color-primary-5:#19001A;
45
+ --core-color-primary-0:#050005;
44
46
  --core-sizing-88:88px;
45
47
  --core-sizing-80:80px;
46
48
  --core-sizing-72:72px;
@@ -91,6 +93,7 @@
91
93
  --core-font-size-18:18px;
92
94
  --core-font-size-16:16px;
93
95
  --core-font-size-14:14px;
96
+ --core-font-size-13:13px;
94
97
  --core-font-size-12:12px;
95
98
  --core-font-size-10:10px;
96
99
  --core-font-weight-extra-bold:800;
@@ -130,8 +133,11 @@
130
133
  --base-typography-title-level3:var(--base-font-weight-title) var(--core-font-size-20)/var(--core-line-height-120) var(--base-primary-font);
131
134
  --base-typography-title-level2:var(--base-font-weight-title) var(--core-font-size-24)/var(--core-line-height-120) var(--base-primary-font);
132
135
  --base-typography-title-level1:var(--base-font-weight-title) var(--core-font-size-32)/var(--core-line-height-120) var(--base-primary-font);
136
+ --base-typography-form-placeholder:var(--base-font-weight-regular-text) var(--core-font-size-16)/var(--core-line-height-130) var(--base-primary-font);
137
+ --base-typography-form-input:var(--base-font-weight-bold-text) var(--core-font-size-16)/var(--core-line-height-130) var(--base-primary-font);
138
+ --base-typography-form-label:var(--base-font-weight-bold-text) var(--core-font-size-16)/var(--core-line-height-130) var(--base-primary-font);
133
139
  --base-font-weight-bold-text:var(--core-font-weight-extra-bold);
134
- --base-font-weight-semi-bold-text:var(--core-font-weight-semi-bold);
140
+ --base-font-weight-semi-bold-text:var(--core-font-weight-regular);
135
141
  --base-font-weight-regular-text:var(--core-font-weight-regular);
136
142
  --base-font-weight-title:var(--core-font-weight-extra-bold);
137
143
  --base-font-weight-selectable:var(--core-font-weight-extra-bold);
@@ -158,24 +164,34 @@
158
164
  --base-border-radius-selectable-large:var(--core-border-radius-full);
159
165
  --base-border-radius-selectable-medium:var(--core-border-radius-full);
160
166
  --base-border-radius-selectable-small:var(--core-border-radius-full);
161
- --base-color-ui-error:var(--core-color-red-50);
167
+ --base-color-ui-accent2:var(--core-color-neutrals-60);
168
+ --base-color-ui-accent1:var(--core-color-neutrals-30);
169
+ --base-color-ui-bg4:var(--core-color-neutrals-15);
170
+ --base-color-ui-bg3:var(--core-color-neutrals-10);
171
+ --base-color-ui-bg2:var(--core-color-neutrals-5);
172
+ --base-color-ui-bg1:var(--core-color-neutrals-0);
173
+ --base-color-gradient-2:linear-gradient(180deg, var(--core-color-primary-15) 0%, var(--core-color-primary-40) 100%);
174
+ --base-color-gradient-1:linear-gradient(90deg, var(--core-color-primary-50) 0%, var(--core-color-primary-60) 50%, var(--core-color-primary-40) 100%);
175
+ --base-color-functional-success:var(--core-color-green-50);
162
176
  --base-color-selectable-secondary-foreground:var(--core-color-neutrals-100);
163
177
  --base-color-selectable-secondary-darkest:var(--core-color-alpha-60);
164
178
  --base-color-selectable-secondary-darker:var(--core-color-alpha-70);
165
179
  --base-color-selectable-secondary-default:var(--core-color-alpha-80);
166
- --base-color-brand-foreground:var(--core-color-neutrals-100);
167
- --base-color-brand-darkest:var(--core-color-vtmgo-pink-30);
168
- --base-color-brand-darker:var(--core-color-vtmgo-pink-40);
169
- --base-color-brand-default:var(--core-color-vtmgo-pink-50);
170
- --base-color-brand-lighter:var(--core-color-vtmgo-pink-70);
171
- --base-color-selectable-primary-foreground:var(--base-color-brand-foreground);
172
- --base-color-selectable-primary-darkest:var(--base-color-brand-darkest);
173
- --base-color-selectable-primary-darker:var(--base-color-brand-darker);
174
- --base-color-selectable-primary-default:var(--base-color-brand-default);
180
+ --base-color-primary-foreground:var(--core-color-neutrals-100);
181
+ --base-color-primary-darkest:var(--core-color-primary-30);
182
+ --base-color-primary-darker:var(--core-color-primary-40);
183
+ --base-color-primary-default:var(--core-color-primary-50);
184
+ --base-color-primary-lighter:var(--core-color-primary-70);
185
+ --base-color-functional-error:var(--base-color-primary-default);
186
+ --base-color-selectable-primary-foreground:var(--base-color-primary-foreground);
187
+ --base-color-selectable-primary-darkest:var(--base-color-primary-darkest);
188
+ --base-color-selectable-primary-darker:var(--base-color-primary-darker);
189
+ --base-color-selectable-primary-default:var(--base-color-primary-default);
175
190
  }
176
191
 
177
192
  @media screen and (min-width:768px){
178
193
  :root{
194
+ --base-color-ui-white:#ffffff;
179
195
  --base-typography-text-bold-text-x-large:var(--base-font-weight-bold-text) var(--core-font-size-20)/var(--core-line-height-140) var(--base-primary-font);
180
196
  --base-typography-text-bold-text-large:var(--base-font-weight-bold-text) var(--core-font-size-18)/var(--core-line-height-140) var(--base-primary-font);
181
197
  --base-typography-text-bold-text-medium:var(--base-font-weight-bold-text) var(--core-font-size-16)/var(--core-line-height-140) var(--base-primary-font);
@@ -197,8 +213,11 @@
197
213
  --base-typography-title-level3:var(--base-font-weight-title) var(--core-font-size-24)/var(--core-line-height-120) var(--base-primary-font);
198
214
  --base-typography-title-level2:var(--base-font-weight-title) var(--core-font-size-32)/var(--core-line-height-120) var(--base-primary-font);
199
215
  --base-typography-title-level1:var(--base-font-weight-title) var(--core-font-size-40)/var(--core-line-height-120) var(--base-primary-font);
216
+ --base-typography-form-placeholder:var(--base-font-weight-regular-text) var(--core-font-size-16)/var(--core-line-height-130) var(--base-primary-font);
217
+ --base-typography-form-input:var(--base-font-weight-bold-text) var(--core-font-size-16)/var(--core-line-height-130) var(--base-primary-font);
218
+ --base-typography-form-label:var(--base-font-weight-bold-text) var(--core-font-size-16)/var(--core-line-height-130) var(--base-primary-font);
200
219
  --base-font-weight-bold-text:var(--core-font-weight-extra-bold);
201
- --base-font-weight-semi-bold-text:var(--core-font-weight-semi-bold);
220
+ --base-font-weight-semi-bold-text:var(--core-font-weight-regular);
202
221
  --base-font-weight-regular-text:var(--core-font-weight-regular);
203
222
  --base-font-weight-title:var(--core-font-weight-extra-bold);
204
223
  --base-font-weight-selectable:var(--core-font-weight-extra-bold);
@@ -225,24 +244,34 @@
225
244
  --base-border-radius-selectable-large:var(--core-border-radius-full);
226
245
  --base-border-radius-selectable-medium:var(--core-border-radius-full);
227
246
  --base-border-radius-selectable-small:var(--core-border-radius-full);
228
- --base-color-ui-error:var(--core-color-red-50);
247
+ --base-color-ui-accent2:var(--core-color-neutrals-60);
248
+ --base-color-ui-accent1:var(--core-color-neutrals-30);
249
+ --base-color-ui-bg4:var(--core-color-neutrals-15);
250
+ --base-color-ui-bg3:var(--core-color-neutrals-10);
251
+ --base-color-ui-bg2:var(--core-color-neutrals-5);
252
+ --base-color-ui-bg1:var(--core-color-neutrals-0);
253
+ --base-color-gradient-2:linear-gradient(180deg, var(--core-color-primary-15) 0%, var(--core-color-primary-40) 100%);
254
+ --base-color-gradient-1:linear-gradient(90deg, var(--core-color-primary-50) 0%, var(--core-color-primary-60) 50%, var(--core-color-primary-40) 100%);
255
+ --base-color-functional-success:var(--core-color-green-50);
229
256
  --base-color-selectable-secondary-foreground:var(--core-color-neutrals-100);
230
257
  --base-color-selectable-secondary-darkest:var(--core-color-alpha-60);
231
258
  --base-color-selectable-secondary-darker:var(--core-color-alpha-70);
232
259
  --base-color-selectable-secondary-default:var(--core-color-alpha-80);
233
- --base-color-brand-foreground:var(--core-color-neutrals-100);
234
- --base-color-brand-darkest:var(--core-color-vtmgo-pink-30);
235
- --base-color-brand-darker:var(--core-color-vtmgo-pink-40);
236
- --base-color-brand-default:var(--core-color-vtmgo-pink-50);
237
- --base-color-brand-lighter:var(--core-color-vtmgo-pink-70);
238
- --base-color-selectable-primary-foreground:var(--base-color-brand-foreground);
239
- --base-color-selectable-primary-darkest:var(--base-color-brand-darkest);
240
- --base-color-selectable-primary-darker:var(--base-color-brand-darker);
241
- --base-color-selectable-primary-default:var(--base-color-brand-default);
260
+ --base-color-primary-foreground:var(--core-color-neutrals-100);
261
+ --base-color-primary-darkest:var(--core-color-primary-30);
262
+ --base-color-primary-darker:var(--core-color-primary-40);
263
+ --base-color-primary-default:var(--core-color-primary-50);
264
+ --base-color-primary-lighter:var(--core-color-primary-70);
265
+ --base-color-functional-error:var(--base-color-primary-default);
266
+ --base-color-selectable-primary-foreground:var(--base-color-primary-foreground);
267
+ --base-color-selectable-primary-darkest:var(--base-color-primary-darkest);
268
+ --base-color-selectable-primary-darker:var(--base-color-primary-darker);
269
+ --base-color-selectable-primary-default:var(--base-color-primary-default);
242
270
  }
243
271
  }
244
272
  @media screen and (min-width:1024px){
245
273
  :root{
274
+ --base-color-ui-white:#ffffff;
246
275
  --base-typography-text-bold-text-x-large:var(--base-font-weight-bold-text) var(--core-font-size-20)/var(--core-line-height-140) var(--base-primary-font);
247
276
  --base-typography-text-bold-text-large:var(--base-font-weight-bold-text) var(--core-font-size-18)/var(--core-line-height-140) var(--base-primary-font);
248
277
  --base-typography-text-bold-text-medium:var(--base-font-weight-bold-text) var(--core-font-size-16)/var(--core-line-height-140) var(--base-primary-font);
@@ -260,12 +289,15 @@
260
289
  --base-typography-text-regular-text-x-small:var(--base-font-weight-regular-text) var(--core-font-size-12)/var(--core-line-height-140) var(--base-primary-font);
261
290
  --base-typography-title-level6:var(--base-font-weight-title) var(--core-font-size-16)/var(--core-line-height-120) var(--base-primary-font);
262
291
  --base-typography-title-level5:var(--base-font-weight-title) var(--core-font-size-18)/var(--core-line-height-120) var(--base-primary-font);
263
- --base-typography-title-level4:var(--base-font-weight-title) var(--core-font-size-24)/var(--core-line-height-120) var(--base-primary-font);
264
- --base-typography-title-level3:var(--base-font-weight-title) var(--core-font-size-28)/var(--core-line-height-120) var(--base-primary-font);
292
+ --base-typography-title-level4:var(--base-font-weight-title) var(--core-font-size-20)/var(--core-line-height-120) var(--base-primary-font);
293
+ --base-typography-title-level3:var(--base-font-weight-title) var(--core-font-size-24)/var(--core-line-height-120) var(--base-primary-font);
265
294
  --base-typography-title-level2:var(--base-font-weight-title) var(--core-font-size-32)/var(--core-line-height-120) var(--base-primary-font);
266
- --base-typography-title-level1:var(--base-font-weight-title) var(--core-font-size-48)/var(--core-line-height-120) var(--base-primary-font);
295
+ --base-typography-title-level1:var(--base-font-weight-title) var(--core-font-size-40)/var(--core-line-height-120) var(--base-primary-font);
296
+ --base-typography-form-placeholder:var(--base-font-weight-regular-text) var(--core-font-size-16)/var(--core-line-height-130) var(--base-primary-font);
297
+ --base-typography-form-input:var(--base-font-weight-bold-text) var(--core-font-size-16)/var(--core-line-height-130) var(--base-primary-font);
298
+ --base-typography-form-label:var(--base-font-weight-bold-text) var(--core-font-size-16)/var(--core-line-height-130) var(--base-primary-font);
267
299
  --base-font-weight-bold-text:var(--core-font-weight-extra-bold);
268
- --base-font-weight-semi-bold-text:var(--core-font-weight-semi-bold);
300
+ --base-font-weight-semi-bold-text:var(--core-font-weight-regular);
269
301
  --base-font-weight-regular-text:var(--core-font-weight-regular);
270
302
  --base-font-weight-title:var(--core-font-weight-extra-bold);
271
303
  --base-font-weight-selectable:var(--core-font-weight-extra-bold);
@@ -292,20 +324,29 @@
292
324
  --base-border-radius-selectable-large:var(--core-border-radius-full);
293
325
  --base-border-radius-selectable-medium:var(--core-border-radius-full);
294
326
  --base-border-radius-selectable-small:var(--core-border-radius-full);
295
- --base-color-ui-error:var(--core-color-red-50);
327
+ --base-color-ui-accent2:var(--core-color-neutrals-60);
328
+ --base-color-ui-accent1:var(--core-color-neutrals-30);
329
+ --base-color-ui-bg4:var(--core-color-neutrals-15);
330
+ --base-color-ui-bg3:var(--core-color-neutrals-10);
331
+ --base-color-ui-bg2:var(--core-color-neutrals-5);
332
+ --base-color-ui-bg1:var(--core-color-neutrals-0);
333
+ --base-color-gradient-2:linear-gradient(180deg, var(--core-color-primary-15) 0%, var(--core-color-primary-40) 100%);
334
+ --base-color-gradient-1:linear-gradient(90deg, var(--core-color-primary-50) 0%, var(--core-color-primary-60) 50%, var(--core-color-primary-40) 100%);
335
+ --base-color-functional-success:var(--core-color-green-50);
296
336
  --base-color-selectable-secondary-foreground:var(--core-color-neutrals-100);
297
337
  --base-color-selectable-secondary-darkest:var(--core-color-alpha-60);
298
338
  --base-color-selectable-secondary-darker:var(--core-color-alpha-70);
299
339
  --base-color-selectable-secondary-default:var(--core-color-alpha-80);
300
- --base-color-brand-foreground:var(--core-color-neutrals-100);
301
- --base-color-brand-darkest:var(--core-color-vtmgo-pink-30);
302
- --base-color-brand-darker:var(--core-color-vtmgo-pink-40);
303
- --base-color-brand-default:var(--core-color-vtmgo-pink-50);
304
- --base-color-brand-lighter:var(--core-color-vtmgo-pink-70);
305
- --base-color-selectable-primary-foreground:var(--base-color-brand-foreground);
306
- --base-color-selectable-primary-darkest:var(--base-color-brand-darkest);
307
- --base-color-selectable-primary-darker:var(--base-color-brand-darker);
308
- --base-color-selectable-primary-default:var(--base-color-brand-default);
340
+ --base-color-primary-foreground:var(--core-color-neutrals-100);
341
+ --base-color-primary-darkest:var(--core-color-primary-30);
342
+ --base-color-primary-darker:var(--core-color-primary-40);
343
+ --base-color-primary-default:var(--core-color-primary-50);
344
+ --base-color-primary-lighter:var(--core-color-primary-70);
345
+ --base-color-functional-error:var(--base-color-primary-default);
346
+ --base-color-selectable-primary-foreground:var(--base-color-primary-foreground);
347
+ --base-color-selectable-primary-darkest:var(--base-color-primary-darkest);
348
+ --base-color-selectable-primary-darker:var(--base-color-primary-darker);
349
+ --base-color-selectable-primary-default:var(--base-color-primary-default);
309
350
  }
310
351
  }
311
352
  :root{
@@ -342,7 +383,7 @@
342
383
  --button-color-secondary-background-hover:var(--base-color-selectable-secondary-darker);
343
384
  --button-color-secondary-background-normal:var(--base-color-selectable-secondary-default);
344
385
  --button-color-primary-background-disabled:var(--base-color-selectable-secondary-default);
345
- --button-color-primary-background-active:var(--base-color-brand-darkest);
386
+ --button-color-primary-background-active:var(--base-color-primary-darkest);
346
387
  --button-spacing-vertical-x-large:21px;
347
388
  --button-spacing-vertical-large:14px;
348
389
  --button-spacing-vertical-medium:12px;
package/css/vtmgo/tokens.css CHANGED
@@ -1,5 +1,7 @@
1
1
  :root {
2
+ --base-color-ui-white: #ffffff;
2
3
  --base-primary-font: Nunito;
4
+ --core-color-green-50: #00FF3A;
3
5
  --core-color-red-50: #FF0056;
4
6
  --core-color-alpha-95: rgba(128,128,128,0.05);
5
7
  --core-color-alpha-90: rgba(128,128,128,0.1);
@@ -28,19 +30,19 @@
28
30
  --core-color-neutrals-10: #1A1A1A;
29
31
  --core-color-neutrals-5: #0D0D0D;
30
32
  --core-color-neutrals-0: #000000;
31
- --core-color-vtmgo-pink-95: #FFE5FF;
32
- --core-color-vtmgo-pink-90: #FFCCFF;
33
- --core-color-vtmgo-pink-80: #FF99FF;
34
- --core-color-vtmgo-pink-70: #FF66FF;
35
- --core-color-vtmgo-pink-60: #FF33FF;
36
- --core-color-vtmgo-pink-50: #ff00ff; /* Primary */
37
- --core-color-vtmgo-pink-40: #CC00CC;
38
- --core-color-vtmgo-pink-30: #990099;
39
- --core-color-vtmgo-pink-20: #660066;
40
- --core-color-vtmgo-pink-15: #4C004D;
41
- --core-color-vtmgo-pink-10: #330033;
42
- --core-color-vtmgo-pink-5: #19001A;
43
- --core-color-vtmgo-pink-0: #050005;
33
+ --core-color-primary-95: #FFE5FF;
34
+ --core-color-primary-90: #FFCCFF;
35
+ --core-color-primary-80: #FF99FF;
36
+ --core-color-primary-70: #FF66FF;
37
+ --core-color-primary-60: #FF33FF;
38
+ --core-color-primary-50: #FF00FF; /* Primary */
39
+ --core-color-primary-40: #CC00CC;
40
+ --core-color-primary-30: #990099;
41
+ --core-color-primary-20: #660066;
42
+ --core-color-primary-15: #4C004D;
43
+ --core-color-primary-10: #330033;
44
+ --core-color-primary-5: #19001A;
45
+ --core-color-primary-0: #050005;
44
46
  --core-sizing-88: 88px;
45
47
  --core-sizing-80: 80px;
46
48
  --core-sizing-72: 72px;
@@ -91,6 +93,7 @@
91
93
  --core-font-size-18: 18px;
92
94
  --core-font-size-16: 16px;
93
95
  --core-font-size-14: 14px;
96
+ --core-font-size-13: 13px;
94
97
  --core-font-size-12: 12px;
95
98
  --core-font-size-10: 10px;
96
99
  --core-font-weight-extra-bold: 800;
@@ -130,8 +133,11 @@
130
133
  --base-typography-title-level3: var(--base-font-weight-title) var(--core-font-size-20)/var(--core-line-height-120) var(--base-primary-font);
131
134
  --base-typography-title-level2: var(--base-font-weight-title) var(--core-font-size-24)/var(--core-line-height-120) var(--base-primary-font);
132
135
  --base-typography-title-level1: var(--base-font-weight-title) var(--core-font-size-32)/var(--core-line-height-120) var(--base-primary-font);
136
+ --base-typography-form-placeholder: var(--base-font-weight-regular-text) var(--core-font-size-16)/var(--core-line-height-130) var(--base-primary-font);
137
+ --base-typography-form-input: var(--base-font-weight-bold-text) var(--core-font-size-16)/var(--core-line-height-130) var(--base-primary-font);
138
+ --base-typography-form-label: var(--base-font-weight-bold-text) var(--core-font-size-16)/var(--core-line-height-130) var(--base-primary-font);
133
139
  --base-font-weight-bold-text: var(--core-font-weight-extra-bold);
134
- --base-font-weight-semi-bold-text: var(--core-font-weight-semi-bold);
140
+ --base-font-weight-semi-bold-text: var(--core-font-weight-regular);
135
141
  --base-font-weight-regular-text: var(--core-font-weight-regular);
136
142
  --base-font-weight-title: var(--core-font-weight-extra-bold);
137
143
  --base-font-weight-selectable: var(--core-font-weight-extra-bold);
@@ -158,24 +164,34 @@
158
164
  --base-border-radius-selectable-large: var(--core-border-radius-full);
159
165
  --base-border-radius-selectable-medium: var(--core-border-radius-full);
160
166
  --base-border-radius-selectable-small: var(--core-border-radius-full);
161
- --base-color-ui-error: var(--core-color-red-50);
167
+ --base-color-ui-accent2: var(--core-color-neutrals-60);
168
+ --base-color-ui-accent1: var(--core-color-neutrals-30);
169
+ --base-color-ui-bg4: var(--core-color-neutrals-15);
170
+ --base-color-ui-bg3: var(--core-color-neutrals-10);
171
+ --base-color-ui-bg2: var(--core-color-neutrals-5);
172
+ --base-color-ui-bg1: var(--core-color-neutrals-0);
173
+ --base-color-gradient-2: linear-gradient(180deg, var(--core-color-primary-15) 0%, var(--core-color-primary-40) 100%);
174
+ --base-color-gradient-1: linear-gradient(90deg, var(--core-color-primary-50) 0%, var(--core-color-primary-60) 50%, var(--core-color-primary-40) 100%);
175
+ --base-color-functional-success: var(--core-color-green-50);
162
176
  --base-color-selectable-secondary-foreground: var(--core-color-neutrals-100);
163
177
  --base-color-selectable-secondary-darkest: var(--core-color-alpha-60);
164
178
  --base-color-selectable-secondary-darker: var(--core-color-alpha-70);
165
179
  --base-color-selectable-secondary-default: var(--core-color-alpha-80);
166
- --base-color-brand-foreground: var(--core-color-neutrals-100);
167
- --base-color-brand-darkest: var(--core-color-vtmgo-pink-30);
168
- --base-color-brand-darker: var(--core-color-vtmgo-pink-40);
169
- --base-color-brand-default: var(--core-color-vtmgo-pink-50);
170
- --base-color-brand-lighter: var(--core-color-vtmgo-pink-70);
171
- --base-color-selectable-primary-foreground: var(--base-color-brand-foreground);
172
- --base-color-selectable-primary-darkest: var(--base-color-brand-darkest);
173
- --base-color-selectable-primary-darker: var(--base-color-brand-darker);
174
- --base-color-selectable-primary-default: var(--base-color-brand-default);
180
+ --base-color-primary-foreground: var(--core-color-neutrals-100);
181
+ --base-color-primary-darkest: var(--core-color-primary-30);
182
+ --base-color-primary-darker: var(--core-color-primary-40);
183
+ --base-color-primary-default: var(--core-color-primary-50);
184
+ --base-color-primary-lighter: var(--core-color-primary-70);
185
+ --base-color-functional-error: var(--base-color-primary-default);
186
+ --base-color-selectable-primary-foreground: var(--base-color-primary-foreground);
187
+ --base-color-selectable-primary-darkest: var(--base-color-primary-darkest);
188
+ --base-color-selectable-primary-darker: var(--base-color-primary-darker);
189
+ --base-color-selectable-primary-default: var(--base-color-primary-default);
175
190
  }
176
191
 
177
192
  @media screen and (min-width: 768px) {
178
193
  :root {
194
+ --base-color-ui-white: #ffffff;
179
195
  --base-typography-text-bold-text-x-large: var(--base-font-weight-bold-text) var(--core-font-size-20)/var(--core-line-height-140) var(--base-primary-font);
180
196
  --base-typography-text-bold-text-large: var(--base-font-weight-bold-text) var(--core-font-size-18)/var(--core-line-height-140) var(--base-primary-font);
181
197
  --base-typography-text-bold-text-medium: var(--base-font-weight-bold-text) var(--core-font-size-16)/var(--core-line-height-140) var(--base-primary-font);
@@ -197,8 +213,11 @@
197
213
  --base-typography-title-level3: var(--base-font-weight-title) var(--core-font-size-24)/var(--core-line-height-120) var(--base-primary-font);
198
214
  --base-typography-title-level2: var(--base-font-weight-title) var(--core-font-size-32)/var(--core-line-height-120) var(--base-primary-font);
199
215
  --base-typography-title-level1: var(--base-font-weight-title) var(--core-font-size-40)/var(--core-line-height-120) var(--base-primary-font);
216
+ --base-typography-form-placeholder: var(--base-font-weight-regular-text) var(--core-font-size-16)/var(--core-line-height-130) var(--base-primary-font);
217
+ --base-typography-form-input: var(--base-font-weight-bold-text) var(--core-font-size-16)/var(--core-line-height-130) var(--base-primary-font);
218
+ --base-typography-form-label: var(--base-font-weight-bold-text) var(--core-font-size-16)/var(--core-line-height-130) var(--base-primary-font);
200
219
  --base-font-weight-bold-text: var(--core-font-weight-extra-bold);
201
- --base-font-weight-semi-bold-text: var(--core-font-weight-semi-bold);
220
+ --base-font-weight-semi-bold-text: var(--core-font-weight-regular);
202
221
  --base-font-weight-regular-text: var(--core-font-weight-regular);
203
222
  --base-font-weight-title: var(--core-font-weight-extra-bold);
204
223
  --base-font-weight-selectable: var(--core-font-weight-extra-bold);
@@ -225,24 +244,34 @@
225
244
  --base-border-radius-selectable-large: var(--core-border-radius-full);
226
245
  --base-border-radius-selectable-medium: var(--core-border-radius-full);
227
246
  --base-border-radius-selectable-small: var(--core-border-radius-full);
228
- --base-color-ui-error: var(--core-color-red-50);
247
+ --base-color-ui-accent2: var(--core-color-neutrals-60);
248
+ --base-color-ui-accent1: var(--core-color-neutrals-30);
249
+ --base-color-ui-bg4: var(--core-color-neutrals-15);
250
+ --base-color-ui-bg3: var(--core-color-neutrals-10);
251
+ --base-color-ui-bg2: var(--core-color-neutrals-5);
252
+ --base-color-ui-bg1: var(--core-color-neutrals-0);
253
+ --base-color-gradient-2: linear-gradient(180deg, var(--core-color-primary-15) 0%, var(--core-color-primary-40) 100%);
254
+ --base-color-gradient-1: linear-gradient(90deg, var(--core-color-primary-50) 0%, var(--core-color-primary-60) 50%, var(--core-color-primary-40) 100%);
255
+ --base-color-functional-success: var(--core-color-green-50);
229
256
  --base-color-selectable-secondary-foreground: var(--core-color-neutrals-100);
230
257
  --base-color-selectable-secondary-darkest: var(--core-color-alpha-60);
231
258
  --base-color-selectable-secondary-darker: var(--core-color-alpha-70);
232
259
  --base-color-selectable-secondary-default: var(--core-color-alpha-80);
233
- --base-color-brand-foreground: var(--core-color-neutrals-100);
234
- --base-color-brand-darkest: var(--core-color-vtmgo-pink-30);
235
- --base-color-brand-darker: var(--core-color-vtmgo-pink-40);
236
- --base-color-brand-default: var(--core-color-vtmgo-pink-50);
237
- --base-color-brand-lighter: var(--core-color-vtmgo-pink-70);
238
- --base-color-selectable-primary-foreground: var(--base-color-brand-foreground);
239
- --base-color-selectable-primary-darkest: var(--base-color-brand-darkest);
240
- --base-color-selectable-primary-darker: var(--base-color-brand-darker);
241
- --base-color-selectable-primary-default: var(--base-color-brand-default);
260
+ --base-color-primary-foreground: var(--core-color-neutrals-100);
261
+ --base-color-primary-darkest: var(--core-color-primary-30);
262
+ --base-color-primary-darker: var(--core-color-primary-40);
263
+ --base-color-primary-default: var(--core-color-primary-50);
264
+ --base-color-primary-lighter: var(--core-color-primary-70);
265
+ --base-color-functional-error: var(--base-color-primary-default);
266
+ --base-color-selectable-primary-foreground: var(--base-color-primary-foreground);
267
+ --base-color-selectable-primary-darkest: var(--base-color-primary-darkest);
268
+ --base-color-selectable-primary-darker: var(--base-color-primary-darker);
269
+ --base-color-selectable-primary-default: var(--base-color-primary-default);
242
270
  }
243
271
  }
244
272
  @media screen and (min-width: 1024px) {
245
273
  :root {
274
+ --base-color-ui-white: #ffffff;
246
275
  --base-typography-text-bold-text-x-large: var(--base-font-weight-bold-text) var(--core-font-size-20)/var(--core-line-height-140) var(--base-primary-font);
247
276
  --base-typography-text-bold-text-large: var(--base-font-weight-bold-text) var(--core-font-size-18)/var(--core-line-height-140) var(--base-primary-font);
248
277
  --base-typography-text-bold-text-medium: var(--base-font-weight-bold-text) var(--core-font-size-16)/var(--core-line-height-140) var(--base-primary-font);
@@ -260,12 +289,15 @@
260
289
  --base-typography-text-regular-text-x-small: var(--base-font-weight-regular-text) var(--core-font-size-12)/var(--core-line-height-140) var(--base-primary-font);
261
290
  --base-typography-title-level6: var(--base-font-weight-title) var(--core-font-size-16)/var(--core-line-height-120) var(--base-primary-font);
262
291
  --base-typography-title-level5: var(--base-font-weight-title) var(--core-font-size-18)/var(--core-line-height-120) var(--base-primary-font);
263
- --base-typography-title-level4: var(--base-font-weight-title) var(--core-font-size-24)/var(--core-line-height-120) var(--base-primary-font);
264
- --base-typography-title-level3: var(--base-font-weight-title) var(--core-font-size-28)/var(--core-line-height-120) var(--base-primary-font);
292
+ --base-typography-title-level4: var(--base-font-weight-title) var(--core-font-size-20)/var(--core-line-height-120) var(--base-primary-font);
293
+ --base-typography-title-level3: var(--base-font-weight-title) var(--core-font-size-24)/var(--core-line-height-120) var(--base-primary-font);
265
294
  --base-typography-title-level2: var(--base-font-weight-title) var(--core-font-size-32)/var(--core-line-height-120) var(--base-primary-font);
266
- --base-typography-title-level1: var(--base-font-weight-title) var(--core-font-size-48)/var(--core-line-height-120) var(--base-primary-font);
295
+ --base-typography-title-level1: var(--base-font-weight-title) var(--core-font-size-40)/var(--core-line-height-120) var(--base-primary-font);
296
+ --base-typography-form-placeholder: var(--base-font-weight-regular-text) var(--core-font-size-16)/var(--core-line-height-130) var(--base-primary-font);
297
+ --base-typography-form-input: var(--base-font-weight-bold-text) var(--core-font-size-16)/var(--core-line-height-130) var(--base-primary-font);
298
+ --base-typography-form-label: var(--base-font-weight-bold-text) var(--core-font-size-16)/var(--core-line-height-130) var(--base-primary-font);
267
299
  --base-font-weight-bold-text: var(--core-font-weight-extra-bold);
268
- --base-font-weight-semi-bold-text: var(--core-font-weight-semi-bold);
300
+ --base-font-weight-semi-bold-text: var(--core-font-weight-regular);
269
301
  --base-font-weight-regular-text: var(--core-font-weight-regular);
270
302
  --base-font-weight-title: var(--core-font-weight-extra-bold);
271
303
  --base-font-weight-selectable: var(--core-font-weight-extra-bold);
@@ -292,20 +324,29 @@
292
324
  --base-border-radius-selectable-large: var(--core-border-radius-full);
293
325
  --base-border-radius-selectable-medium: var(--core-border-radius-full);
294
326
  --base-border-radius-selectable-small: var(--core-border-radius-full);
295
- --base-color-ui-error: var(--core-color-red-50);
327
+ --base-color-ui-accent2: var(--core-color-neutrals-60);
328
+ --base-color-ui-accent1: var(--core-color-neutrals-30);
329
+ --base-color-ui-bg4: var(--core-color-neutrals-15);
330
+ --base-color-ui-bg3: var(--core-color-neutrals-10);
331
+ --base-color-ui-bg2: var(--core-color-neutrals-5);
332
+ --base-color-ui-bg1: var(--core-color-neutrals-0);
333
+ --base-color-gradient-2: linear-gradient(180deg, var(--core-color-primary-15) 0%, var(--core-color-primary-40) 100%);
334
+ --base-color-gradient-1: linear-gradient(90deg, var(--core-color-primary-50) 0%, var(--core-color-primary-60) 50%, var(--core-color-primary-40) 100%);
335
+ --base-color-functional-success: var(--core-color-green-50);
296
336
  --base-color-selectable-secondary-foreground: var(--core-color-neutrals-100);
297
337
  --base-color-selectable-secondary-darkest: var(--core-color-alpha-60);
298
338
  --base-color-selectable-secondary-darker: var(--core-color-alpha-70);
299
339
  --base-color-selectable-secondary-default: var(--core-color-alpha-80);
300
- --base-color-brand-foreground: var(--core-color-neutrals-100);
301
- --base-color-brand-darkest: var(--core-color-vtmgo-pink-30);
302
- --base-color-brand-darker: var(--core-color-vtmgo-pink-40);
303
- --base-color-brand-default: var(--core-color-vtmgo-pink-50);
304
- --base-color-brand-lighter: var(--core-color-vtmgo-pink-70);
305
- --base-color-selectable-primary-foreground: var(--base-color-brand-foreground);
306
- --base-color-selectable-primary-darkest: var(--base-color-brand-darkest);
307
- --base-color-selectable-primary-darker: var(--base-color-brand-darker);
308
- --base-color-selectable-primary-default: var(--base-color-brand-default);
340
+ --base-color-primary-foreground: var(--core-color-neutrals-100);
341
+ --base-color-primary-darkest: var(--core-color-primary-30);
342
+ --base-color-primary-darker: var(--core-color-primary-40);
343
+ --base-color-primary-default: var(--core-color-primary-50);
344
+ --base-color-primary-lighter: var(--core-color-primary-70);
345
+ --base-color-functional-error: var(--base-color-primary-default);
346
+ --base-color-selectable-primary-foreground: var(--base-color-primary-foreground);
347
+ --base-color-selectable-primary-darkest: var(--base-color-primary-darkest);
348
+ --base-color-selectable-primary-darker: var(--base-color-primary-darker);
349
+ --base-color-selectable-primary-default: var(--base-color-primary-default);
309
350
  }
310
351
  }
311
352
  :root {
@@ -342,7 +383,7 @@
342
383
  --button-color-secondary-background-hover: var(--base-color-selectable-secondary-darker);
343
384
  --button-color-secondary-background-normal: var(--base-color-selectable-secondary-default);
344
385
  --button-color-primary-background-disabled: var(--base-color-selectable-secondary-default);
345
- --button-color-primary-background-active: var(--base-color-brand-darkest);
386
+ --button-color-primary-background-active: var(--base-color-primary-darkest);
346
387
  --button-spacing-vertical-x-large: 21px;
347
388
  --button-spacing-vertical-large: 14px;
348
389
  --button-spacing-vertical-medium: 12px;
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@depersgroep/lfvp-design-tokens",
3
- "version": "0.67.0",
3
+ "version": "0.69.0",
4
4
  "description": "Figma design tokens for LFVP",
5
5
  "scripts": {
6
6
  "test": "echo \"Error: no test specified\" && exit 1",