@depersgroep/lfvp-design-tokens 0.85.0 → 0.87.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 +64 -147
  2. package/css/streamz/tokens.css +64 -147
  3. package/css/vtmgo/_tokens.scss +71 -156
  4. package/css/vtmgo/tokens.css +71 -156
  5. package/package.json +1 -1
package/css/streamz/_tokens.scss CHANGED
@@ -1,8 +1,5 @@
1
1
  :root{
2
2
  --base-primary-font:Gilroy;
3
- --base-color-ui-white:#ffffff;
4
- --core-color-green-50:#00FF85;
5
- --core-color-red-50:#FF0A5C;
6
3
  --core-color-alpha-95:rgba(118,115,140,0.05);
7
4
  --core-color-alpha-90:rgba(118,115,140,0.10);
8
5
  --core-color-alpha-80:rgba(118,115,140,0.20);
@@ -16,6 +13,8 @@
16
13
  --core-color-alpha-10:rgba(118,115,140,0.9);
17
14
  --core-color-alpha-5:rgba(118,115,140,0.95);
18
15
  --core-color-alpha-0:#76738c;
16
+ --core-color-gradient-extra-1:linear-gradient(180deg, #171431, #ff0a5a);
17
+ --core-color-gradient-brand:linear-gradient(90deg, #f20d3a, #ff0a5a 50.52%, #cc0243);
19
18
  --core-color-neutrals-100:#ffffff;
20
19
  --core-color-neutrals-95:#f1f1f4;
21
20
  --core-color-neutrals-90:#e4e3e8;
@@ -30,19 +29,19 @@
30
29
  --core-color-neutrals-10:#120f24;
31
30
  --core-color-neutrals-5:#09071b;
32
31
  --core-color-neutrals-0:#020012;
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;
32
+ --core-color-streamz-pink-95:#ffe5ee;
33
+ --core-color-streamz-pink-90:#ffccdd;
34
+ --core-color-streamz-pink-80:#ff99ba;
35
+ --core-color-streamz-pink-70:#ff6698;
36
+ --core-color-streamz-pink-60:#ff3376;
37
+ --core-color-streamz-pink-50:#ff0a5c;
38
+ --core-color-streamz-pink-40:#cc0043;
39
+ --core-color-streamz-pink-30:#990032;
40
+ --core-color-streamz-pink-20:#660021;
41
+ --core-color-streamz-pink-15:#4d0019;
42
+ --core-color-streamz-pink-10:#330011;
43
+ --core-color-streamz-pink-5:#1a0008;
44
+ --core-color-streamz-pink-0:#050002;
46
45
  --core-sizing-88:88px;
47
46
  --core-sizing-80:80px;
48
47
  --core-sizing-72:72px;
@@ -53,10 +52,10 @@
53
52
  --core-sizing-32:32px;
54
53
  --core-sizing-24:24px;
55
54
  --core-sizing-16:16px;
56
- --core-box-shadow-text:0 1px 1px 0 rgba(0,0,0,0.2);
57
- --core-box-shadow-3:0 1px 3px 0 rgba(0,0,0,0.4);
58
- --core-box-shadow-2:0 2px 2px 0 rgba(0,0,0,0.3);
59
- --core-box-shadow-1:0 1px 1px 0 rgba(0,0,0,0.2);
55
+ --core-box-shadow-text:0 1px 1px rgba(0,0,0,0.2);
56
+ --core-box-shadow-3:0 1px 3px rgba(0,0,0,0.4);
57
+ --core-box-shadow-2:0 2px 2px rgba(0,0,0,0.3);
58
+ --core-box-shadow-1:0 1px 1px rgba(0,0,0,0.2);
60
59
  --core-border-radius-full:9999px;
61
60
  --core-border-radius-40:40px;
62
61
  --core-border-radius-32:32px;
@@ -93,7 +92,6 @@
93
92
  --core-font-size-18:18px;
94
93
  --core-font-size-16:16px;
95
94
  --core-font-size-14:14px;
96
- --core-font-size-13:13px;
97
95
  --core-font-size-12:12px;
98
96
  --core-font-size-10:10px;
99
97
  --core-font-weight-extra-bold:800;
@@ -133,13 +131,10 @@
133
131
  --base-typography-title-level3:var(--base-font-weight-title) var(--core-font-size-20)/var(--core-line-height-120) var(--base-primary-font);
134
132
  --base-typography-title-level2:var(--base-font-weight-title) var(--core-font-size-24)/var(--core-line-height-120) var(--base-primary-font);
135
133
  --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);
139
134
  --base-border-selectable-active:var(--core-border-width-3) solid var(--core-color-neutrals-80);
140
135
  --base-border-selectable-focus:var(--core-border-width-3) solid var(--core-color-neutrals-80);
141
- --base-border-selectable-hover:var(--core-border-width-3) solid rgba(0,0,0,0.08);
142
- --base-border-selectable-normal:var(--core-border-width-3) solid rgba(0,0,0,0.08);
136
+ --base-border-selectable-hover:var(--core-border-width-2) solid rgba(0,0,0,0.08);
137
+ --base-border-selectable-normal:var(--core-border-width-2) solid rgba(0,0,0,0.08);
143
138
  --base-font-size-text-x-large:var(--core-font-size-20);
144
139
  --base-font-size-text-large:var(--core-font-size-18);
145
140
  --base-font-size-text-medium:var(--core-font-size-16);
@@ -164,34 +159,23 @@
164
159
  --base-border-radius-selectable-large:var(--core-border-radius-8);
165
160
  --base-border-radius-selectable-medium:var(--core-border-radius-8);
166
161
  --base-border-radius-selectable-small:var(--core-border-radius-8);
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);
175
162
  --base-color-selectable-secondary-foreground:var(--core-color-neutrals-100);
176
163
  --base-color-selectable-secondary-darkest:var(--core-color-alpha-60);
177
164
  --base-color-selectable-secondary-darker:var(--core-color-alpha-70);
178
165
  --base-color-selectable-secondary-default:var(--core-color-alpha-80);
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);
166
+ --base-color-selectable-primary-default:var(--core-color-gradient-brand);
167
+ --base-color-brand-foreground:var(--core-color-neutrals-100);
168
+ --base-color-brand-darkest:var(--core-color-streamz-pink-30);
169
+ --base-color-brand-darker:var(--core-color-streamz-pink-40);
170
+ --base-color-brand-default:var(--core-color-streamz-pink-50);
171
+ --base-color-brand-lighter:var(--core-color-streamz-pink-70);
172
+ --base-color-selectable-primary-foreground:var(--base-color-brand-foreground);
173
+ --base-color-selectable-primary-darkest:var(--base-color-brand-darkest);
174
+ --base-color-selectable-primary-darker:var(--base-color-brand-darker);
190
175
  }
191
176
 
192
177
  @media screen and (min-width:768px){
193
178
  :root{
194
- --base-color-ui-white:#ffffff;
195
179
  --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);
196
180
  --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);
197
181
  --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);
@@ -213,13 +197,10 @@
213
197
  --base-typography-title-level3:var(--base-font-weight-title) var(--core-font-size-24)/var(--core-line-height-120) var(--base-primary-font);
214
198
  --base-typography-title-level2:var(--base-font-weight-title) var(--core-font-size-32)/var(--core-line-height-120) var(--base-primary-font);
215
199
  --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);
219
200
  --base-border-selectable-active:var(--core-border-width-3) solid var(--core-color-neutrals-80);
220
201
  --base-border-selectable-focus:var(--core-border-width-3) solid var(--core-color-neutrals-80);
221
- --base-border-selectable-hover:var(--core-border-width-3) solid rgba(0,0,0,0.08);
222
- --base-border-selectable-normal:var(--core-border-width-3) solid rgba(0,0,0,0.08);
202
+ --base-border-selectable-hover:var(--core-border-width-2) solid rgba(0,0,0,0.08);
203
+ --base-border-selectable-normal:var(--core-border-width-2) solid rgba(0,0,0,0.08);
223
204
  --base-font-size-text-x-large:var(--core-font-size-20);
224
205
  --base-font-size-text-large:var(--core-font-size-18);
225
206
  --base-font-size-text-medium:var(--core-font-size-16);
@@ -244,34 +225,23 @@
244
225
  --base-border-radius-selectable-large:var(--core-border-radius-8);
245
226
  --base-border-radius-selectable-medium:var(--core-border-radius-8);
246
227
  --base-border-radius-selectable-small:var(--core-border-radius-8);
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);
255
228
  --base-color-selectable-secondary-foreground:var(--core-color-neutrals-100);
256
229
  --base-color-selectable-secondary-darkest:var(--core-color-alpha-60);
257
230
  --base-color-selectable-secondary-darker:var(--core-color-alpha-70);
258
231
  --base-color-selectable-secondary-default:var(--core-color-alpha-80);
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);
232
+ --base-color-selectable-primary-default:var(--core-color-gradient-brand);
233
+ --base-color-brand-foreground:var(--core-color-neutrals-100);
234
+ --base-color-brand-darkest:var(--core-color-streamz-pink-30);
235
+ --base-color-brand-darker:var(--core-color-streamz-pink-40);
236
+ --base-color-brand-default:var(--core-color-streamz-pink-50);
237
+ --base-color-brand-lighter:var(--core-color-streamz-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);
270
241
  }
271
242
  }
272
243
  @media screen and (min-width:1024px){
273
244
  :root{
274
- --base-color-ui-white:#ffffff;
275
245
  --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);
276
246
  --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);
277
247
  --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);
@@ -289,17 +259,14 @@
289
259
  --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);
290
260
  --base-typography-title-level6:var(--base-font-weight-title) var(--core-font-size-16)/var(--core-line-height-120) var(--base-primary-font);
291
261
  --base-typography-title-level5:var(--base-font-weight-title) var(--core-font-size-18)/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);
262
+ --base-typography-title-level4:var(--base-font-weight-title) var(--core-font-size-24)/var(--core-line-height-120) var(--base-primary-font);
263
+ --base-typography-title-level3:var(--base-font-weight-title) var(--core-font-size-28)/var(--core-line-height-120) var(--base-primary-font);
294
264
  --base-typography-title-level2:var(--base-font-weight-title) var(--core-font-size-32)/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);
265
+ --base-typography-title-level1:var(--base-font-weight-title) var(--core-font-size-48)/var(--core-line-height-120) var(--base-primary-font);
299
266
  --base-border-selectable-active:var(--core-border-width-3) solid var(--core-color-neutrals-80);
300
267
  --base-border-selectable-focus:var(--core-border-width-3) solid var(--core-color-neutrals-80);
301
- --base-border-selectable-hover:var(--core-border-width-3) solid rgba(0,0,0,0.08);
302
- --base-border-selectable-normal:var(--core-border-width-3) solid rgba(0,0,0,0.08);
268
+ --base-border-selectable-hover:var(--core-border-width-2) solid rgba(0,0,0,0.08);
269
+ --base-border-selectable-normal:var(--core-border-width-2) solid rgba(0,0,0,0.08);
303
270
  --base-font-size-text-x-large:var(--core-font-size-20);
304
271
  --base-font-size-text-large:var(--core-font-size-18);
305
272
  --base-font-size-text-medium:var(--core-font-size-16);
@@ -324,80 +291,30 @@
324
291
  --base-border-radius-selectable-large:var(--core-border-radius-8);
325
292
  --base-border-radius-selectable-medium:var(--core-border-radius-8);
326
293
  --base-border-radius-selectable-small:var(--core-border-radius-8);
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);
335
294
  --base-color-selectable-secondary-foreground:var(--core-color-neutrals-100);
336
295
  --base-color-selectable-secondary-darkest:var(--core-color-alpha-60);
337
296
  --base-color-selectable-secondary-darker:var(--core-color-alpha-70);
338
297
  --base-color-selectable-secondary-default:var(--core-color-alpha-80);
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);
298
+ --base-color-selectable-primary-default:var(--core-color-gradient-brand);
299
+ --base-color-brand-foreground:var(--core-color-neutrals-100);
300
+ --base-color-brand-darkest:var(--core-color-streamz-pink-30);
301
+ --base-color-brand-darker:var(--core-color-streamz-pink-40);
302
+ --base-color-brand-default:var(--core-color-streamz-pink-50);
303
+ --base-color-brand-lighter:var(--core-color-streamz-pink-70);
304
+ --base-color-selectable-primary-foreground:var(--base-color-brand-foreground);
305
+ --base-color-selectable-primary-darkest:var(--base-color-brand-darkest);
306
+ --base-color-selectable-primary-darker:var(--base-color-brand-darker);
350
307
  }
351
308
  }
352
309
  :root{
353
- --button-color-secondary-foreground-disabled:rgba(255,255,255,0.5);
354
- --button-color-primary-foreground-disabled:rgba(255,255,255,0.5);
355
- --button-box-shadow-foreground:var(--core-box-shadow-text);
310
+ --button-color-primary-disabled:var(--core-color-alpha-60);
311
+ --button-color-secondary-disabled:var(--core-color-alpha-60);
312
+ --button-color-secondary-active:var(--core-color-alpha-30);
313
+ --button-color-secondary-hover:var(--core-color-alpha-40);
314
+ --button-color-secondary-normal:var(--core-color-alpha-60);
315
+ --button-font-size-medium:var(--core-font-size-16);
316
+ --button-font-size-small:var(--core-font-size-14);
356
317
  --button-font-family-label:var(--base-primary-font);
357
- --button-border-secondary-active:var(--base-border-selectable-focus);
358
- --button-border-secondary-focus:var(--base-border-selectable-focus);
359
- --button-border-secondary-hover:var(--base-border-selectable-normal);
360
- --button-border-secondary-normal:var(--base-border-selectable-normal);
361
- --button-border-primary-active:var(--base-border-selectable-focus);
362
- --button-border-primary-focus:var(--base-border-selectable-focus);
363
- --button-border-primary-hover:var(--base-border-selectable-normal);
364
- --button-border-primary-normal:var(--base-border-selectable-normal);
365
- --button-box-shadow-background:var(--base-box-shadow-selectable-background);
366
- --button-font-size-label-x-large:var(--base-font-size-selectable-x-large);
367
- --button-font-size-label-large:var(--base-font-size-selectable-large);
368
- --button-font-size-label-medium:var(--base-font-size-selectable-medium);
369
- --button-font-size-label-small:var(--base-font-size-selectable-small);
370
- --button-font-weight-label:var(--base-font-weight-selectable);
371
- --button-sizing-height-x-large:var(--base-sizing-selectable-x-large);
372
- --button-sizing-height-large:var(--base-sizing-selectable-large);
373
- --button-sizing-height-medium:var(--base-sizing-selectable-medium);
374
- --button-sizing-height-small:var(--base-sizing-selectable-small);
375
- --button-border-radius-x-large:var(--base-border-radius-selectable-xlarge);
376
- --button-border-radius-large:var(--base-border-radius-selectable-large);
377
- --button-border-radius-medium:var(--base-border-radius-selectable-medium);
378
- --button-border-radius-small:var(--base-border-radius-selectable-small);
379
- --button-color-secondary-foreground-normal:var(--base-color-selectable-secondary-foreground);
380
- --button-color-secondary-background-disabled:var(--base-color-selectable-secondary-default);
381
- --button-color-secondary-background-active:var(--base-color-selectable-secondary-darkest);
382
- --button-color-secondary-background-focus:var(--base-color-selectable-secondary-darker);
383
- --button-color-secondary-background-hover:var(--base-color-selectable-secondary-darker);
384
- --button-color-secondary-background-normal:var(--base-color-selectable-secondary-default);
385
- --button-color-primary-background-disabled:var(--base-color-selectable-secondary-default);
386
- --button-color-primary-background-active:var(--base-color-primary-darkest);
387
- --button-spacing-vertical-x-large:21px;
388
- --button-spacing-vertical-large:14px;
389
- --button-spacing-vertical-medium:12px;
390
- --button-spacing-vertical-small:11px;
391
- --button-spacing-horizontal-x-large:var(--button-font-size-label-x-large);
392
- --button-spacing-horizontal-large:var(--button-font-size-label-large);
393
- --button-spacing-horizontal-medium:var(--button-font-size-label-medium);
394
- --button-spacing-horizontal-small:var(--button-font-size-label-small);
395
- --button-spacing-gap-x-large:14px;
396
- --button-spacing-gap-large:9px;
397
- --button-spacing-gap-medium:8px;
398
- --button-spacing-gap-small:7px;
399
- --button-color-primary-foreground-normal:var(--base-color-selectable-primary-foreground);
400
- --button-color-primary-background-focus:var(--base-color-selectable-primary-default);
401
- --button-color-primary-background-hover:var(--base-color-selectable-primary-darker);
402
- --button-color-primary-background-normal:var(--base-color-selectable-primary-default);
318
+ --button-border-radius:var(--base-border-radius-button);
319
+ --button-font-weight-label:var(--base-font-weight-button);
403
320
  }
package/css/streamz/tokens.css CHANGED
@@ -1,8 +1,5 @@
1
1
  :root {
2
2
  --base-primary-font: Gilroy;
3
- --base-color-ui-white: #ffffff;
4
- --core-color-green-50: #00FF85;
5
- --core-color-red-50: #FF0A5C;
6
3
  --core-color-alpha-95: rgba(118,115,140,0.05);
7
4
  --core-color-alpha-90: rgba(118,115,140,0.10);
8
5
  --core-color-alpha-80: rgba(118,115,140,0.20);
@@ -16,6 +13,8 @@
16
13
  --core-color-alpha-10: rgba(118,115,140,0.9);
17
14
  --core-color-alpha-5: rgba(118,115,140,0.95);
18
15
  --core-color-alpha-0: #76738c;
16
+ --core-color-gradient-extra-1: linear-gradient(180deg, #171431 0%, #ff0a5a 100%);
17
+ --core-color-gradient-brand: linear-gradient(90deg, #f20d3a 0%, #ff0a5a 50.52%, #cc0243 100%);
19
18
  --core-color-neutrals-100: #ffffff;
20
19
  --core-color-neutrals-95: #f1f1f4;
21
20
  --core-color-neutrals-90: #e4e3e8;
@@ -30,19 +29,19 @@
30
29
  --core-color-neutrals-10: #120f24;
31
30
  --core-color-neutrals-5: #09071b;
32
31
  --core-color-neutrals-0: #020012;
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;
32
+ --core-color-streamz-pink-95: #ffe5ee;
33
+ --core-color-streamz-pink-90: #ffccdd;
34
+ --core-color-streamz-pink-80: #ff99ba;
35
+ --core-color-streamz-pink-70: #ff6698;
36
+ --core-color-streamz-pink-60: #ff3376;
37
+ --core-color-streamz-pink-50: #ff0a5c; /* Primary */
38
+ --core-color-streamz-pink-40: #cc0043;
39
+ --core-color-streamz-pink-30: #990032;
40
+ --core-color-streamz-pink-20: #660021;
41
+ --core-color-streamz-pink-15: #4d0019;
42
+ --core-color-streamz-pink-10: #330011;
43
+ --core-color-streamz-pink-5: #1a0008;
44
+ --core-color-streamz-pink-0: #050002;
46
45
  --core-sizing-88: 88px;
47
46
  --core-sizing-80: 80px;
48
47
  --core-sizing-72: 72px;
@@ -53,10 +52,10 @@
53
52
  --core-sizing-32: 32px;
54
53
  --core-sizing-24: 24px;
55
54
  --core-sizing-16: 16px;
56
- --core-box-shadow-text: 0 1px 1px 0 rgba(0,0,0,0.2);
57
- --core-box-shadow-3: 0 1px 3px 0 rgba(0,0,0,0.4);
58
- --core-box-shadow-2: 0 2px 2px 0 rgba(0,0,0,0.3);
59
- --core-box-shadow-1: 0 1px 1px 0 rgba(0,0,0,0.2);
55
+ --core-box-shadow-text: 0 1px 1px rgba(0,0,0,0.2);
56
+ --core-box-shadow-3: 0 1px 3px rgba(0,0,0,0.4);
57
+ --core-box-shadow-2: 0 2px 2px rgba(0,0,0,0.3);
58
+ --core-box-shadow-1: 0 1px 1px rgba(0,0,0,0.2);
60
59
  --core-border-radius-full: 9999px;
61
60
  --core-border-radius-40: 40px;
62
61
  --core-border-radius-32: 32px;
@@ -93,7 +92,6 @@
93
92
  --core-font-size-18: 18px;
94
93
  --core-font-size-16: 16px;
95
94
  --core-font-size-14: 14px;
96
- --core-font-size-13: 13px;
97
95
  --core-font-size-12: 12px;
98
96
  --core-font-size-10: 10px;
99
97
  --core-font-weight-extra-bold: 800;
@@ -133,13 +131,10 @@
133
131
  --base-typography-title-level3: var(--base-font-weight-title) var(--core-font-size-20)/var(--core-line-height-120) var(--base-primary-font);
134
132
  --base-typography-title-level2: var(--base-font-weight-title) var(--core-font-size-24)/var(--core-line-height-120) var(--base-primary-font);
135
133
  --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);
139
134
  --base-border-selectable-active: var(--core-border-width-3) solid var(--core-color-neutrals-80);
140
135
  --base-border-selectable-focus: var(--core-border-width-3) solid var(--core-color-neutrals-80);
141
- --base-border-selectable-hover: var(--core-border-width-3) solid rgba(0,0,0,0.08);
142
- --base-border-selectable-normal: var(--core-border-width-3) solid rgba(0,0,0,0.08);
136
+ --base-border-selectable-hover: var(--core-border-width-2) solid rgba(0,0,0,0.08);
137
+ --base-border-selectable-normal: var(--core-border-width-2) solid rgba(0,0,0,0.08);
143
138
  --base-font-size-text-x-large: var(--core-font-size-20);
144
139
  --base-font-size-text-large: var(--core-font-size-18);
145
140
  --base-font-size-text-medium: var(--core-font-size-16);
@@ -164,34 +159,23 @@
164
159
  --base-border-radius-selectable-large: var(--core-border-radius-8);
165
160
  --base-border-radius-selectable-medium: var(--core-border-radius-8);
166
161
  --base-border-radius-selectable-small: var(--core-border-radius-8);
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);
175
162
  --base-color-selectable-secondary-foreground: var(--core-color-neutrals-100);
176
163
  --base-color-selectable-secondary-darkest: var(--core-color-alpha-60);
177
164
  --base-color-selectable-secondary-darker: var(--core-color-alpha-70);
178
165
  --base-color-selectable-secondary-default: var(--core-color-alpha-80);
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);
166
+ --base-color-selectable-primary-default: var(--core-color-gradient-brand);
167
+ --base-color-brand-foreground: var(--core-color-neutrals-100);
168
+ --base-color-brand-darkest: var(--core-color-streamz-pink-30);
169
+ --base-color-brand-darker: var(--core-color-streamz-pink-40);
170
+ --base-color-brand-default: var(--core-color-streamz-pink-50);
171
+ --base-color-brand-lighter: var(--core-color-streamz-pink-70);
172
+ --base-color-selectable-primary-foreground: var(--base-color-brand-foreground);
173
+ --base-color-selectable-primary-darkest: var(--base-color-brand-darkest);
174
+ --base-color-selectable-primary-darker: var(--base-color-brand-darker);
190
175
  }
191
176
 
192
177
  @media screen and (min-width: 768px) {
193
178
  :root {
194
- --base-color-ui-white: #ffffff;
195
179
  --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);
196
180
  --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);
197
181
  --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);
@@ -213,13 +197,10 @@
213
197
  --base-typography-title-level3: var(--base-font-weight-title) var(--core-font-size-24)/var(--core-line-height-120) var(--base-primary-font);
214
198
  --base-typography-title-level2: var(--base-font-weight-title) var(--core-font-size-32)/var(--core-line-height-120) var(--base-primary-font);
215
199
  --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);
219
200
  --base-border-selectable-active: var(--core-border-width-3) solid var(--core-color-neutrals-80);
220
201
  --base-border-selectable-focus: var(--core-border-width-3) solid var(--core-color-neutrals-80);
221
- --base-border-selectable-hover: var(--core-border-width-3) solid rgba(0,0,0,0.08);
222
- --base-border-selectable-normal: var(--core-border-width-3) solid rgba(0,0,0,0.08);
202
+ --base-border-selectable-hover: var(--core-border-width-2) solid rgba(0,0,0,0.08);
203
+ --base-border-selectable-normal: var(--core-border-width-2) solid rgba(0,0,0,0.08);
223
204
  --base-font-size-text-x-large: var(--core-font-size-20);
224
205
  --base-font-size-text-large: var(--core-font-size-18);
225
206
  --base-font-size-text-medium: var(--core-font-size-16);
@@ -244,34 +225,23 @@
244
225
  --base-border-radius-selectable-large: var(--core-border-radius-8);
245
226
  --base-border-radius-selectable-medium: var(--core-border-radius-8);
246
227
  --base-border-radius-selectable-small: var(--core-border-radius-8);
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);
255
228
  --base-color-selectable-secondary-foreground: var(--core-color-neutrals-100);
256
229
  --base-color-selectable-secondary-darkest: var(--core-color-alpha-60);
257
230
  --base-color-selectable-secondary-darker: var(--core-color-alpha-70);
258
231
  --base-color-selectable-secondary-default: var(--core-color-alpha-80);
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);
232
+ --base-color-selectable-primary-default: var(--core-color-gradient-brand);
233
+ --base-color-brand-foreground: var(--core-color-neutrals-100);
234
+ --base-color-brand-darkest: var(--core-color-streamz-pink-30);
235
+ --base-color-brand-darker: var(--core-color-streamz-pink-40);
236
+ --base-color-brand-default: var(--core-color-streamz-pink-50);
237
+ --base-color-brand-lighter: var(--core-color-streamz-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);
270
241
  }
271
242
  }
272
243
  @media screen and (min-width: 1024px) {
273
244
  :root {
274
- --base-color-ui-white: #ffffff;
275
245
  --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);
276
246
  --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);
277
247
  --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);
@@ -289,17 +259,14 @@
289
259
  --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);
290
260
  --base-typography-title-level6: var(--base-font-weight-title) var(--core-font-size-16)/var(--core-line-height-120) var(--base-primary-font);
291
261
  --base-typography-title-level5: var(--base-font-weight-title) var(--core-font-size-18)/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);
262
+ --base-typography-title-level4: var(--base-font-weight-title) var(--core-font-size-24)/var(--core-line-height-120) var(--base-primary-font);
263
+ --base-typography-title-level3: var(--base-font-weight-title) var(--core-font-size-28)/var(--core-line-height-120) var(--base-primary-font);
294
264
  --base-typography-title-level2: var(--base-font-weight-title) var(--core-font-size-32)/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);
265
+ --base-typography-title-level1: var(--base-font-weight-title) var(--core-font-size-48)/var(--core-line-height-120) var(--base-primary-font);
299
266
  --base-border-selectable-active: var(--core-border-width-3) solid var(--core-color-neutrals-80);
300
267
  --base-border-selectable-focus: var(--core-border-width-3) solid var(--core-color-neutrals-80);
301
- --base-border-selectable-hover: var(--core-border-width-3) solid rgba(0,0,0,0.08);
302
- --base-border-selectable-normal: var(--core-border-width-3) solid rgba(0,0,0,0.08);
268
+ --base-border-selectable-hover: var(--core-border-width-2) solid rgba(0,0,0,0.08);
269
+ --base-border-selectable-normal: var(--core-border-width-2) solid rgba(0,0,0,0.08);
303
270
  --base-font-size-text-x-large: var(--core-font-size-20);
304
271
  --base-font-size-text-large: var(--core-font-size-18);
305
272
  --base-font-size-text-medium: var(--core-font-size-16);
@@ -324,80 +291,30 @@
324
291
  --base-border-radius-selectable-large: var(--core-border-radius-8);
325
292
  --base-border-radius-selectable-medium: var(--core-border-radius-8);
326
293
  --base-border-radius-selectable-small: var(--core-border-radius-8);
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);
335
294
  --base-color-selectable-secondary-foreground: var(--core-color-neutrals-100);
336
295
  --base-color-selectable-secondary-darkest: var(--core-color-alpha-60);
337
296
  --base-color-selectable-secondary-darker: var(--core-color-alpha-70);
338
297
  --base-color-selectable-secondary-default: var(--core-color-alpha-80);
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);
298
+ --base-color-selectable-primary-default: var(--core-color-gradient-brand);
299
+ --base-color-brand-foreground: var(--core-color-neutrals-100);
300
+ --base-color-brand-darkest: var(--core-color-streamz-pink-30);
301
+ --base-color-brand-darker: var(--core-color-streamz-pink-40);
302
+ --base-color-brand-default: var(--core-color-streamz-pink-50);
303
+ --base-color-brand-lighter: var(--core-color-streamz-pink-70);
304
+ --base-color-selectable-primary-foreground: var(--base-color-brand-foreground);
305
+ --base-color-selectable-primary-darkest: var(--base-color-brand-darkest);
306
+ --base-color-selectable-primary-darker: var(--base-color-brand-darker);
350
307
  }
351
308
  }
352
309
  :root {
353
- --button-color-secondary-foreground-disabled: rgba(255,255,255,0.5);
354
- --button-color-primary-foreground-disabled: rgba(255,255,255,0.5);
355
- --button-box-shadow-foreground: var(--core-box-shadow-text);
310
+ --button-color-primary-disabled: var(--core-color-alpha-60);
311
+ --button-color-secondary-disabled: var(--core-color-alpha-60);
312
+ --button-color-secondary-active: var(--core-color-alpha-30);
313
+ --button-color-secondary-hover: var(--core-color-alpha-40);
314
+ --button-color-secondary-normal: var(--core-color-alpha-60);
315
+ --button-font-size-medium: var(--core-font-size-16);
316
+ --button-font-size-small: var(--core-font-size-14);
356
317
  --button-font-family-label: var(--base-primary-font);
357
- --button-border-secondary-active: var(--base-border-selectable-focus);
358
- --button-border-secondary-focus: var(--base-border-selectable-focus);
359
- --button-border-secondary-hover: var(--base-border-selectable-normal);
360
- --button-border-secondary-normal: var(--base-border-selectable-normal);
361
- --button-border-primary-active: var(--base-border-selectable-focus);
362
- --button-border-primary-focus: var(--base-border-selectable-focus);
363
- --button-border-primary-hover: var(--base-border-selectable-normal);
364
- --button-border-primary-normal: var(--base-border-selectable-normal);
365
- --button-box-shadow-background: var(--base-box-shadow-selectable-background);
366
- --button-font-size-label-x-large: var(--base-font-size-selectable-x-large);
367
- --button-font-size-label-large: var(--base-font-size-selectable-large);
368
- --button-font-size-label-medium: var(--base-font-size-selectable-medium);
369
- --button-font-size-label-small: var(--base-font-size-selectable-small);
370
- --button-font-weight-label: var(--base-font-weight-selectable);
371
- --button-sizing-height-x-large: var(--base-sizing-selectable-x-large);
372
- --button-sizing-height-large: var(--base-sizing-selectable-large);
373
- --button-sizing-height-medium: var(--base-sizing-selectable-medium);
374
- --button-sizing-height-small: var(--base-sizing-selectable-small);
375
- --button-border-radius-x-large: var(--base-border-radius-selectable-xlarge);
376
- --button-border-radius-large: var(--base-border-radius-selectable-large);
377
- --button-border-radius-medium: var(--base-border-radius-selectable-medium);
378
- --button-border-radius-small: var(--base-border-radius-selectable-small);
379
- --button-color-secondary-foreground-normal: var(--base-color-selectable-secondary-foreground);
380
- --button-color-secondary-background-disabled: var(--base-color-selectable-secondary-default);
381
- --button-color-secondary-background-active: var(--base-color-selectable-secondary-darkest);
382
- --button-color-secondary-background-focus: var(--base-color-selectable-secondary-darker);
383
- --button-color-secondary-background-hover: var(--base-color-selectable-secondary-darker);
384
- --button-color-secondary-background-normal: var(--base-color-selectable-secondary-default);
385
- --button-color-primary-background-disabled: var(--base-color-selectable-secondary-default);
386
- --button-color-primary-background-active: var(--base-color-primary-darkest);
387
- --button-spacing-vertical-x-large: 21px;
388
- --button-spacing-vertical-large: 14px;
389
- --button-spacing-vertical-medium: 12px;
390
- --button-spacing-vertical-small: 11px;
391
- --button-spacing-horizontal-x-large: var(--button-font-size-label-x-large);
392
- --button-spacing-horizontal-large: var(--button-font-size-label-large);
393
- --button-spacing-horizontal-medium: var(--button-font-size-label-medium);
394
- --button-spacing-horizontal-small: var(--button-font-size-label-small);
395
- --button-spacing-gap-x-large: 14px;
396
- --button-spacing-gap-large: 9px;
397
- --button-spacing-gap-medium: 8px;
398
- --button-spacing-gap-small: 7px;
399
- --button-color-primary-foreground-normal: var(--base-color-selectable-primary-foreground);
400
- --button-color-primary-background-focus: var(--base-color-selectable-primary-default);
401
- --button-color-primary-background-hover: var(--base-color-selectable-primary-darker);
402
- --button-color-primary-background-normal: var(--base-color-selectable-primary-default);
318
+ --button-border-radius: var(--base-border-radius-button);
319
+ --button-font-weight-label: var(--base-font-weight-button);
403
320
  }