@scania/tegel-lite 0.1.0-beta.updated-globals → 0.1.0-dev-test-beta.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.
- package/dist/assets/icons/scania/configurator.svg +1 -0
- package/dist/assets/icons/traton/edit_inactive.svg +1 -0
- package/dist/assets/icons/traton/skip_backwards.svg +1 -0
- package/dist/assets/icons/traton/skip_forward.svg +1 -0
- package/dist/components.css +1044 -447
- package/dist/global.css +45 -3560
- package/dist/scania-variables.css +328 -453
- package/dist/tl-accordion.css +8 -8
- package/dist/tl-badge.css +4 -18
- package/dist/tl-banner.css +2 -2
- package/dist/tl-button.css +397 -10
- package/dist/tl-card.css +47 -11
- package/dist/tl-checkbox-vars.css +1 -1
- package/dist/tl-checkbox.css +1 -1
- package/dist/tl-chip.css +21 -71
- package/dist/tl-datetime.css +7 -4
- package/dist/tl-dropdown.css +55 -8
- package/dist/tl-footer.css +34 -52
- package/dist/tl-header.css +189 -103
- package/dist/tl-icon.css +2 -2
- package/dist/tl-modal.css +33 -14
- package/dist/tl-side-menu.css +131 -42
- package/dist/tl-slider.css +416 -20
- package/dist/tl-spinner.css +10 -18
- package/dist/tl-step.css +28 -2
- package/dist/tl-stepper.css +28 -2
- package/dist/tl-table.css +42 -9
- package/dist/tl-text-field.css +19 -67
- package/dist/tl-toggle.css +1 -1
- package/dist/traton-variables.css +330 -437
- package/package.json +1 -1
- /package/dist/assets/icons/scania/{gift inactive.svg → gift_inactive.svg} +0 -0
|
@@ -257,20 +257,23 @@
|
|
|
257
257
|
* Do not edit directly, this file was auto-generated.
|
|
258
258
|
*/
|
|
259
259
|
:root {
|
|
260
|
-
--traton-color-
|
|
261
|
-
--traton-color-
|
|
262
|
-
--traton-color-
|
|
263
|
-
--traton-color-
|
|
264
|
-
--traton-color-
|
|
265
|
-
--traton-color-
|
|
266
|
-
--traton-color-
|
|
267
|
-
--traton-color-
|
|
268
|
-
--traton-color-
|
|
269
|
-
--traton-color-
|
|
270
|
-
--traton-color-
|
|
271
|
-
--traton-color-
|
|
272
|
-
--traton-color-
|
|
273
|
-
--traton-color-
|
|
260
|
+
--traton-color-base-black: #000;
|
|
261
|
+
--traton-color-base-white: #fff;
|
|
262
|
+
--traton-color-base-white-warm: #fcfbf7;
|
|
263
|
+
--traton-color-transparent-200: #1a1a1926;
|
|
264
|
+
--traton-color-transparent-400: #1a1a195c;
|
|
265
|
+
--traton-color-transparent-500: #1a1a1980;
|
|
266
|
+
--traton-color-transparent-600: #1a1a199e;
|
|
267
|
+
--traton-color-transparent-700: #1a1a19c2;
|
|
268
|
+
--traton-color-transparent-inverse-200: #d9edf054;
|
|
269
|
+
--traton-color-transparent-inverse-400: #d9edf07d;
|
|
270
|
+
--traton-color-transparent-inverse-500: #d9edf0a1;
|
|
271
|
+
--traton-color-transparent-inverse-600: #d9edf0bf;
|
|
272
|
+
--traton-color-transparent-inverse-700: #d9edf0de;
|
|
273
|
+
--traton-color-transparent-invisible-light: #fff0;
|
|
274
|
+
--traton-color-transparent-invisible-dark: #0000;
|
|
275
|
+
--traton-color-transparent-scrim-light: #0006;
|
|
276
|
+
--traton-color-transparent-scrim-dark: #0009;
|
|
274
277
|
--traton-color-blue-50: #f8fcfc;
|
|
275
278
|
--traton-color-blue-100: #e9f5f6;
|
|
276
279
|
--traton-color-blue-150: #d9edf0;
|
|
@@ -285,6 +288,20 @@
|
|
|
285
288
|
--traton-color-blue-900: #002429;
|
|
286
289
|
--traton-color-blue-950: #001d21;
|
|
287
290
|
--traton-color-blue-1000: #001214;
|
|
291
|
+
--traton-color-green-50: #d1fad1;
|
|
292
|
+
--traton-color-green-100: #adebb1;
|
|
293
|
+
--traton-color-green-150: #81d585;
|
|
294
|
+
--traton-color-green-200: #5abf5c;
|
|
295
|
+
--traton-color-green-300: #3ba63f;
|
|
296
|
+
--traton-color-green-400: #38943c;
|
|
297
|
+
--traton-color-green-500: #318035;
|
|
298
|
+
--traton-color-green-600: #2b6c2e;
|
|
299
|
+
--traton-color-green-700: #235727;
|
|
300
|
+
--traton-color-green-800: #1d441f;
|
|
301
|
+
--traton-color-green-850: #153217;
|
|
302
|
+
--traton-color-green-900: #102311;
|
|
303
|
+
--traton-color-green-950: #0d1b0e;
|
|
304
|
+
--traton-color-green-1000: #080c08;
|
|
288
305
|
--traton-color-grey-50: #fcfbf7;
|
|
289
306
|
--traton-color-grey-100: #f6f3e9;
|
|
290
307
|
--traton-color-grey-150: #ebe7dd;
|
|
@@ -299,25 +316,6 @@
|
|
|
299
316
|
--traton-color-grey-900: #252423;
|
|
300
317
|
--traton-color-grey-950: #1a1a19;
|
|
301
318
|
--traton-color-grey-1000: #100f0f;
|
|
302
|
-
--traton-color-base-warm-white: #fcfbf7;
|
|
303
|
-
--traton-color-base-neutral-white: #fff;
|
|
304
|
-
--traton-color-base-neutral-black: #000;
|
|
305
|
-
--traton-color-transparent-200: rgba(26, 26, 25, 0.15);
|
|
306
|
-
--traton-color-transparent-400: rgba(26, 26, 25, 0.36);
|
|
307
|
-
--traton-color-transparent-500: rgba(26, 26, 25, 0.5);
|
|
308
|
-
--traton-color-transparent-600: rgba(26, 26, 25, 0.62);
|
|
309
|
-
--traton-color-transparent-700: rgba(26, 26, 25, 0.76);
|
|
310
|
-
--traton-color-transparent-950: #001d21;
|
|
311
|
-
--traton-color-transparent-inverse-200: rgba(217, 237, 240, 0.33);
|
|
312
|
-
--traton-color-transparent-inverse-400: rgba(217, 237, 240, 0.49);
|
|
313
|
-
--traton-color-transparent-inverse-500: rgba(217, 237, 240, 0.63);
|
|
314
|
-
--traton-color-transparent-inverse-600: rgba(217, 237, 240, 0.75);
|
|
315
|
-
--traton-color-transparent-inverse-700: rgba(217, 237, 240, 0.87);
|
|
316
|
-
--traton-color-transparent-inverse-950: #fff;
|
|
317
|
-
--traton-color-transparent-scrim-light: rgba(0, 0, 0, 0.4);
|
|
318
|
-
--traton-color-transparent-scrim-dark: rgba(0, 0, 0, 0.6);
|
|
319
|
-
--traton-color-transparent-invisible-light: rgba(255, 255, 255, 0);
|
|
320
|
-
--traton-color-transparent-invisible-dark: rgba(0, 0, 0, 0);
|
|
321
319
|
--traton-color-red-50: #ffe0e0;
|
|
322
320
|
--traton-color-red-100: #f7baba;
|
|
323
321
|
--traton-color-red-150: #f28686;
|
|
@@ -332,43 +330,50 @@
|
|
|
332
330
|
--traton-color-red-900: #311111;
|
|
333
331
|
--traton-color-red-950: #240d0d;
|
|
334
332
|
--traton-color-red-1000: #140808;
|
|
335
|
-
--traton-color-
|
|
336
|
-
--traton-color-
|
|
337
|
-
--traton-color-
|
|
338
|
-
--traton-color-
|
|
339
|
-
--traton-color-
|
|
340
|
-
--traton-color-
|
|
341
|
-
--traton-color-
|
|
342
|
-
--traton-color-
|
|
343
|
-
--traton-color-
|
|
344
|
-
--traton-color-
|
|
345
|
-
--traton-color-
|
|
346
|
-
--traton-color-
|
|
347
|
-
--traton-color-
|
|
348
|
-
--traton-color-
|
|
333
|
+
--traton-color-yellow-50: #fff6db;
|
|
334
|
+
--traton-color-yellow-100: #ffe9aa;
|
|
335
|
+
--traton-color-yellow-150: #ffdc7a;
|
|
336
|
+
--traton-color-yellow-200: #ffd04a;
|
|
337
|
+
--traton-color-yellow-300: #ffc00d;
|
|
338
|
+
--traton-color-yellow-400: #e5ad0c;
|
|
339
|
+
--traton-color-yellow-500: #bf900a;
|
|
340
|
+
--traton-color-yellow-600: #997308;
|
|
341
|
+
--traton-color-yellow-700: #735606;
|
|
342
|
+
--traton-color-yellow-800: #594305;
|
|
343
|
+
--traton-color-yellow-850: #433204;
|
|
344
|
+
--traton-color-yellow-900: #302403;
|
|
345
|
+
--traton-color-yellow-950: #241b00;
|
|
346
|
+
--traton-color-yellow-1000: #1a1300;
|
|
347
|
+
--traton-opacity-0: 0;
|
|
348
|
+
--traton-opacity-25: 25;
|
|
349
|
+
--traton-opacity-50: 50;
|
|
350
|
+
--traton-opacity-75: 75;
|
|
351
|
+
--traton-opacity-100: 100;
|
|
349
352
|
--traton-font-family-default: traton type text;
|
|
350
353
|
--traton-font-family-display: traton type display;
|
|
351
354
|
--traton-font-weight-semi-bold: 600;
|
|
352
355
|
--traton-font-weight-medium: 500;
|
|
353
356
|
--traton-font-weight-regular: 400;
|
|
354
357
|
--traton-unit-0: 0;
|
|
355
|
-
--traton-unit-1:
|
|
356
|
-
--traton-unit-2:
|
|
357
|
-
--traton-unit-4:
|
|
358
|
-
--traton-unit-8:
|
|
359
|
-
--traton-unit-12:
|
|
360
|
-
--traton-unit-16:
|
|
361
|
-
--traton-unit-20:
|
|
362
|
-
--traton-unit-24:
|
|
363
|
-
--traton-unit-32:
|
|
364
|
-
--traton-unit-40:
|
|
365
|
-
--traton-unit-48:
|
|
366
|
-
--traton-unit-56:
|
|
367
|
-
--traton-unit-64:
|
|
368
|
-
--traton-unit-80:
|
|
369
|
-
--traton-unit-96:
|
|
370
|
-
--traton-unit-120:
|
|
371
|
-
--traton-unit-9999:
|
|
358
|
+
--traton-unit-1: 1;
|
|
359
|
+
--traton-unit-2: 2;
|
|
360
|
+
--traton-unit-4: 4;
|
|
361
|
+
--traton-unit-8: 8;
|
|
362
|
+
--traton-unit-12: 12;
|
|
363
|
+
--traton-unit-16: 16;
|
|
364
|
+
--traton-unit-20: 20;
|
|
365
|
+
--traton-unit-24: 24;
|
|
366
|
+
--traton-unit-32: 32;
|
|
367
|
+
--traton-unit-40: 40;
|
|
368
|
+
--traton-unit-48: 48;
|
|
369
|
+
--traton-unit-56: 56;
|
|
370
|
+
--traton-unit-64: 64;
|
|
371
|
+
--traton-unit-80: 80;
|
|
372
|
+
--traton-unit-96: 96;
|
|
373
|
+
--traton-unit-120: 120;
|
|
374
|
+
--traton-unit-9999: 9999;
|
|
375
|
+
--traton-color-transparent-950: var(--traton-color-blue-950);
|
|
376
|
+
--traton-color-transparent-inverse-950: var(--traton-color-base-white);
|
|
372
377
|
}
|
|
373
378
|
|
|
374
379
|
/* Traton color tokens */
|
|
@@ -376,263 +381,163 @@
|
|
|
376
381
|
* Do not edit directly, this file was auto-generated.
|
|
377
382
|
*/
|
|
378
383
|
.traton,
|
|
379
|
-
.traton .tds-mode-light
|
|
384
|
+
.traton .tds-mode-light,
|
|
385
|
+
.traton .tl-mode-light {
|
|
380
386
|
--color-background-base: var(--traton-color-grey-50);
|
|
381
|
-
--color-background-accent-primary-default: var(--traton-color-blue-800);
|
|
382
|
-
--color-background-accent-primary-disabled: var(--traton-color-blue-100);
|
|
383
|
-
--color-background-accent-primary-hover: var(--traton-color-blue-850);
|
|
384
|
-
--color-background-accent-primary-pressed: var(--traton-color-blue-900);
|
|
385
|
-
--color-background-accent-primary-focus: var(--traton-color-blue-850);
|
|
386
|
-
--color-background-accent-primary-inverse-default: var(--traton-color-grey-300);
|
|
387
|
-
--color-background-accent-primary-inverse-hover: var(--traton-color-grey-200);
|
|
388
|
-
--color-background-accent-primary-inverse-pressed: var(--traton-color-grey-400);
|
|
389
|
-
--color-background-accent-primary-inverse-focus: var(--traton-color-grey-100);
|
|
390
|
-
--color-background-accent-primary-inverse-disabled: var(--traton-color-grey-900);
|
|
391
|
-
--color-background-accent-danger-default: var(--traton-color-red-300);
|
|
392
|
-
--color-background-accent-danger-hover: var(--traton-color-red-400);
|
|
393
|
-
--color-background-accent-danger-pressed: var(--traton-color-red-600);
|
|
394
|
-
--color-background-accent-danger-focus: var(--traton-color-red-400);
|
|
395
|
-
--color-background-accent-danger-disabled: var(--traton-color-red-50);
|
|
396
387
|
--color-background-layer-01: var(--traton-color-grey-100);
|
|
397
388
|
--color-background-layer-02: var(--traton-color-grey-50);
|
|
398
389
|
--color-background-layer-03: var(--traton-color-grey-100);
|
|
399
390
|
--color-background-overlay: var(--traton-color-transparent-scrim-light);
|
|
391
|
+
--color-background-top: var(--traton-color-grey-50);
|
|
392
|
+
--color-background-none: var(--traton-color-transparent-invisible-light);
|
|
400
393
|
--color-background-inverse-base: var(--traton-color-grey-1000);
|
|
401
394
|
--color-background-inverse-layer-01: var(--traton-color-grey-950);
|
|
402
395
|
--color-background-inverse-layer-02: var(--traton-color-grey-900);
|
|
403
396
|
--color-background-inverse-layer-03: var(--traton-color-grey-850);
|
|
404
|
-
--color-background-inverse-top: var(--traton-color-grey-900);
|
|
405
397
|
--color-background-inverse-overlay: var(--traton-color-transparent-scrim-light);
|
|
406
|
-
--color-background-
|
|
407
|
-
--color-background-
|
|
408
|
-
--color-
|
|
409
|
-
--color-
|
|
410
|
-
--color-
|
|
411
|
-
--color-
|
|
412
|
-
--color-
|
|
413
|
-
--color-
|
|
414
|
-
--color-
|
|
415
|
-
--color-
|
|
416
|
-
--color-
|
|
417
|
-
--color-
|
|
418
|
-
--color-
|
|
419
|
-
--color-
|
|
420
|
-
--color-
|
|
421
|
-
--color-
|
|
422
|
-
--color-
|
|
423
|
-
--color-
|
|
424
|
-
--color-
|
|
425
|
-
--color-
|
|
426
|
-
--color-
|
|
427
|
-
--color-
|
|
428
|
-
--color-
|
|
398
|
+
--color-background-inverse-top: var(--traton-color-grey-900);
|
|
399
|
+
--color-background-inverse-none: var(--traton-color-transparent-invisible-dark);
|
|
400
|
+
--color-border-defined: var(--traton-color-transparent-700);
|
|
401
|
+
--color-border-soft: var(--traton-color-transparent-600);
|
|
402
|
+
--color-border-subtle: var(--traton-color-transparent-500);
|
|
403
|
+
--color-border-disabled: var(--traton-color-transparent-400);
|
|
404
|
+
--color-border-discrete: var(--traton-color-transparent-200);
|
|
405
|
+
--color-border-none: var(--traton-color-transparent-invisible-light);
|
|
406
|
+
--color-border-inverse-defined: var(--traton-color-transparent-inverse-700);
|
|
407
|
+
--color-border-inverse-soft: var(--traton-color-transparent-inverse-600);
|
|
408
|
+
--color-border-inverse-subtle: var(--traton-color-transparent-inverse-500);
|
|
409
|
+
--color-border-inverse-disabled: var(--traton-color-transparent-inverse-400);
|
|
410
|
+
--color-border-inverse-discrete: var(--traton-color-transparent-inverse-200);
|
|
411
|
+
--color-border-inverse-none: var(--traton-color-transparent-invisible-dark);
|
|
412
|
+
--color-icon-defined: var(--traton-color-transparent-700);
|
|
413
|
+
--color-icon-soft: var(--traton-color-transparent-600);
|
|
414
|
+
--color-icon-subtle: var(--traton-color-transparent-500);
|
|
415
|
+
--color-icon-disabled: var(--traton-color-transparent-400);
|
|
416
|
+
--color-icon-discrete: var(--traton-color-transparent-200);
|
|
417
|
+
--color-icon-inverse-defined: var(--traton-color-transparent-inverse-700);
|
|
418
|
+
--color-icon-inverse-soft: var(--traton-color-transparent-inverse-600);
|
|
419
|
+
--color-icon-inverse-subtle: var(--traton-color-transparent-inverse-500);
|
|
420
|
+
--color-icon-inverse-disabled: var(--traton-color-transparent-inverse-400);
|
|
421
|
+
--color-icon-inverse-discrete: var(--traton-color-transparent-inverse-200);
|
|
429
422
|
--color-system-info-strong: var(--traton-color-blue-800);
|
|
430
423
|
--color-system-info-defined: var(--traton-color-blue-800);
|
|
424
|
+
--color-system-info-default: var(--traton-color-blue-500);
|
|
431
425
|
--color-system-info-subtle: var(--traton-color-blue-400);
|
|
432
|
-
--color-system-
|
|
433
|
-
--color-system-
|
|
426
|
+
--color-system-info-discrete: var(--traton-color-blue-150);
|
|
427
|
+
--color-system-success-strong: var(--traton-color-green-850);
|
|
428
|
+
--color-system-success-defined: var(--traton-color-green-500);
|
|
429
|
+
--color-system-success-default: var(--traton-color-green-300);
|
|
430
|
+
--color-system-success-subtle: var(--traton-color-green-200);
|
|
431
|
+
--color-system-success-discrete: var(--traton-color-green-50);
|
|
432
|
+
--color-system-warning-strong: var(--traton-color-yellow-800);
|
|
433
|
+
--color-system-warning-defined: var(--traton-color-yellow-600);
|
|
434
|
+
--color-system-warning-default: var(--traton-color-yellow-300);
|
|
435
|
+
--color-system-warning-subtle: var(--traton-color-yellow-200);
|
|
436
|
+
--color-system-warning-discrete: var(--traton-color-yellow-100);
|
|
434
437
|
--color-system-danger-strong: var(--traton-color-red-850);
|
|
435
438
|
--color-system-danger-defined: var(--traton-color-red-500);
|
|
439
|
+
--color-system-danger-default: var(--traton-color-red-300);
|
|
436
440
|
--color-system-danger-subtle: var(--traton-color-red-200);
|
|
437
|
-
--color-
|
|
438
|
-
--color-
|
|
439
|
-
--color-
|
|
440
|
-
--color-
|
|
441
|
-
--color-
|
|
442
|
-
--color-
|
|
443
|
-
--color-
|
|
444
|
-
--color-
|
|
445
|
-
--color-
|
|
446
|
-
--color-
|
|
447
|
-
--color-
|
|
448
|
-
--color-
|
|
449
|
-
--color-
|
|
450
|
-
--color-
|
|
451
|
-
--color-
|
|
452
|
-
--color-
|
|
453
|
-
--color-
|
|
454
|
-
--color-
|
|
455
|
-
--color-
|
|
456
|
-
--color-foreground-border-inverse-discrete: var(--traton-color-transparent-inverse-200);
|
|
457
|
-
--color-foreground-border-inverse-defined: var(--traton-color-transparent-inverse-700);
|
|
458
|
-
--color-foreground-border-inverse-disabled: var(--traton-color-transparent-inverse-400);
|
|
459
|
-
--color-foreground-border-strong: var(--traton-color-transparent-950);
|
|
460
|
-
--color-foreground-border-soft: var(--traton-color-transparent-600);
|
|
461
|
-
--color-foreground-border-subtle: var(--traton-color-transparent-500);
|
|
462
|
-
--color-foreground-border-discrete: var(--traton-color-transparent-200);
|
|
463
|
-
--color-foreground-border-accent-link: var(--traton-color-yellow-300);
|
|
464
|
-
--color-foreground-border-accent-focus: var(--traton-color-blue-500);
|
|
465
|
-
--color-foreground-border-defined: var(--traton-color-transparent-700);
|
|
466
|
-
--color-foreground-border-disabled: var(--traton-color-transparent-400);
|
|
467
|
-
--color-foreground-icon-strong: var(--traton-color-transparent-950);
|
|
468
|
-
--color-foreground-icon-defined: var(--traton-color-transparent-700);
|
|
469
|
-
--color-foreground-icon-soft: var(--traton-color-transparent-600);
|
|
470
|
-
--color-foreground-icon-subtle: var(--traton-color-transparent-500);
|
|
471
|
-
--color-foreground-icon-disabled: var(--traton-color-transparent-400);
|
|
472
|
-
--color-foreground-icon-discrete: var(--traton-color-transparent-200);
|
|
473
|
-
--color-foreground-icon-inverse-strong: var(--traton-color-transparent-inverse-950);
|
|
474
|
-
--color-foreground-icon-inverse-defined: var(--traton-color-transparent-inverse-700);
|
|
475
|
-
--color-foreground-icon-inverse-soft: var(--traton-color-transparent-inverse-600);
|
|
476
|
-
--color-foreground-icon-inverse-subtle: var(--traton-color-transparent-inverse-500);
|
|
477
|
-
--color-foreground-icon-inverse-disabled: var(--traton-color-transparent-inverse-400);
|
|
478
|
-
--color-foreground-icon-inverse-discrete: var(--traton-color-transparent-inverse-200);
|
|
479
|
-
--color-foreground-icon-accent-default: var(--traton-color-blue-700);
|
|
480
|
-
--color-foreground-icon-accent-visited: var(--traton-color-blue-950);
|
|
481
|
-
--color-foreground-icon-accent-brand: var(--traton-color-blue-950);
|
|
482
|
-
--color-foreground-icon-accent-brand-inverse: var(--traton-color-blue-700);
|
|
483
|
-
--color-brand-neutral-white: var(--traton-color-base-neutral-white);
|
|
484
|
-
--color-brand-neutral-black: var(--traton-color-base-neutral-black);
|
|
485
|
-
--color-brand-primary-50: var(--traton-color-blue-50);
|
|
486
|
-
--color-brand-primary-100: var(--traton-color-blue-100);
|
|
487
|
-
--color-brand-primary-200: var(--traton-color-blue-200);
|
|
488
|
-
--color-brand-primary-300: var(--traton-color-blue-300);
|
|
489
|
-
--color-brand-primary-400: var(--traton-color-blue-400);
|
|
490
|
-
--color-brand-primary-500: var(--traton-color-blue-500);
|
|
491
|
-
--color-brand-primary-600: var(--traton-color-blue-600);
|
|
492
|
-
--color-brand-primary-700: var(--traton-color-blue-700);
|
|
493
|
-
--color-brand-primary-800: var(--traton-color-blue-800);
|
|
494
|
-
--color-brand-primary-900: var(--traton-color-blue-900);
|
|
495
|
-
--color-brand-secondary-50: var(--traton-color-yellow-50);
|
|
496
|
-
--color-brand-secondary-100: var(--traton-color-yellow-100);
|
|
497
|
-
--color-brand-secondary-200: var(--traton-color-yellow-200);
|
|
498
|
-
--color-brand-secondary-300: var(--traton-color-yellow-300);
|
|
499
|
-
--color-brand-secondary-400: var(--traton-color-yellow-400);
|
|
500
|
-
--color-brand-secondary-500: var(--traton-color-yellow-500);
|
|
501
|
-
--color-brand-secondary-600: var(--traton-color-yellow-600);
|
|
502
|
-
--color-brand-secondary-700: var(--traton-color-yellow-700);
|
|
503
|
-
--color-brand-secondary-800: var(--traton-color-yellow-800);
|
|
504
|
-
--color-brand-secondary-900: var(--traton-color-yellow-900);
|
|
441
|
+
--color-system-danger-discrete: var(--traton-color-red-50);
|
|
442
|
+
--color-text-defined: var(--traton-color-transparent-700);
|
|
443
|
+
--color-text-soft: var(--traton-color-transparent-600);
|
|
444
|
+
--color-text-subtle: var(--traton-color-transparent-500);
|
|
445
|
+
--color-text-disabled: var(--traton-color-transparent-400);
|
|
446
|
+
--color-text-brand: var(--traton-color-blue-950);
|
|
447
|
+
--color-text-base: var(--traton-color-base-black);
|
|
448
|
+
--color-text-inverse-defined: var(--traton-color-transparent-inverse-700);
|
|
449
|
+
--color-text-inverse-soft: var(--traton-color-transparent-inverse-600);
|
|
450
|
+
--color-text-inverse-subtle: var(--traton-color-transparent-inverse-500);
|
|
451
|
+
--color-text-inverse-disabled: var(--traton-color-transparent-inverse-400);
|
|
452
|
+
--color-text-inverse-brand: var(--traton-color-base-white);
|
|
453
|
+
--color-border-strong: var(--traton-color-transparent-950);
|
|
454
|
+
--color-border-inverse-strong: var(--traton-color-transparent-inverse-950);
|
|
455
|
+
--color-icon-strong: var(--traton-color-transparent-950);
|
|
456
|
+
--color-icon-inverse-strong: var(--traton-color-transparent-inverse-950);
|
|
457
|
+
--color-text-strong: var(--traton-color-transparent-950);
|
|
458
|
+
--color-text-inverse-strong: var(--traton-color-transparent-inverse-950);
|
|
459
|
+
--color-text-inverse-base: var(--scania-color-base-white);
|
|
505
460
|
}
|
|
506
461
|
|
|
507
462
|
/**
|
|
508
463
|
* Do not edit directly, this file was auto-generated.
|
|
509
464
|
*/
|
|
510
|
-
.traton .tds-mode-dark
|
|
465
|
+
.traton .tds-mode-dark,
|
|
466
|
+
.traton .tl-mode-dark {
|
|
511
467
|
--color-background-base: var(--traton-color-blue-1000);
|
|
512
|
-
--color-background-accent-primary-default: var(--traton-color-grey-300);
|
|
513
|
-
--color-background-accent-primary-disabled: var(--traton-color-grey-900);
|
|
514
|
-
--color-background-accent-primary-hover: var(--traton-color-grey-200);
|
|
515
|
-
--color-background-accent-primary-pressed: var(--traton-color-grey-400);
|
|
516
|
-
--color-background-accent-primary-focus: var(--traton-color-grey-100);
|
|
517
|
-
--color-background-accent-primary-inverse-default: var(--traton-color-blue-800);
|
|
518
|
-
--color-background-accent-primary-inverse-hover: var(--traton-color-blue-850);
|
|
519
|
-
--color-background-accent-primary-inverse-pressed: var(--traton-color-blue-900);
|
|
520
|
-
--color-background-accent-primary-inverse-focus: var(--traton-color-blue-850);
|
|
521
|
-
--color-background-accent-primary-inverse-disabled: var(--traton-color-blue-100);
|
|
522
|
-
--color-background-accent-danger-default: var(--traton-color-red-300);
|
|
523
|
-
--color-background-accent-danger-hover: var(--traton-color-red-400);
|
|
524
|
-
--color-background-accent-danger-pressed: var(--traton-color-red-600);
|
|
525
|
-
--color-background-accent-danger-focus: var(--traton-color-red-400);
|
|
526
|
-
--color-background-accent-danger-disabled: var(--traton-color-red-900);
|
|
527
468
|
--color-background-layer-01: var(--traton-color-blue-950);
|
|
528
469
|
--color-background-layer-02: var(--traton-color-blue-900);
|
|
529
470
|
--color-background-layer-03: var(--traton-color-blue-850);
|
|
530
471
|
--color-background-overlay: var(--traton-color-transparent-scrim-dark);
|
|
472
|
+
--color-background-top: var(--traton-color-blue-900);
|
|
473
|
+
--color-background-none: var(--traton-color-transparent-invisible-dark);
|
|
531
474
|
--color-background-inverse-base: var(--traton-color-blue-50);
|
|
532
475
|
--color-background-inverse-layer-01: var(--traton-color-blue-100);
|
|
533
476
|
--color-background-inverse-layer-02: var(--traton-color-blue-150);
|
|
534
477
|
--color-background-inverse-layer-03: var(--traton-color-blue-200);
|
|
535
|
-
--color-background-inverse-top: var(--traton-color-blue-50);
|
|
536
478
|
--color-background-inverse-overlay: var(--traton-color-transparent-scrim-dark);
|
|
537
|
-
--color-background-
|
|
538
|
-
--color-background-
|
|
539
|
-
--color-
|
|
540
|
-
--color-
|
|
541
|
-
--color-
|
|
542
|
-
--color-
|
|
543
|
-
--color-
|
|
544
|
-
--color-
|
|
545
|
-
--color-
|
|
546
|
-
--color-
|
|
547
|
-
--color-
|
|
548
|
-
--color-
|
|
549
|
-
--color-
|
|
550
|
-
--color-
|
|
551
|
-
--color-
|
|
552
|
-
--color-
|
|
553
|
-
--color-
|
|
554
|
-
--color-
|
|
479
|
+
--color-background-inverse-top: var(--traton-color-blue-50);
|
|
480
|
+
--color-background-inverse-none: var(--traton-color-transparent-invisible-light);
|
|
481
|
+
--color-border-defined: var(--traton-color-transparent-inverse-700);
|
|
482
|
+
--color-border-soft: var(--traton-color-transparent-inverse-600);
|
|
483
|
+
--color-border-subtle: var(--traton-color-transparent-inverse-500);
|
|
484
|
+
--color-border-disabled: var(--traton-color-transparent-inverse-400);
|
|
485
|
+
--color-border-discrete: var(--traton-color-transparent-inverse-200);
|
|
486
|
+
--color-border-none: var(--traton-color-transparent-invisible-dark);
|
|
487
|
+
--color-border-inverse-defined: var(--traton-color-transparent-700);
|
|
488
|
+
--color-border-inverse-soft: var(--traton-color-transparent-600);
|
|
489
|
+
--color-border-inverse-subtle: var(--traton-color-transparent-500);
|
|
490
|
+
--color-border-inverse-disabled: var(--traton-color-transparent-400);
|
|
491
|
+
--color-border-inverse-discrete: var(--traton-color-transparent-200);
|
|
492
|
+
--color-border-inverse-none: var(--traton-color-transparent-invisible-light);
|
|
493
|
+
--color-icon-defined: var(--traton-color-transparent-inverse-700);
|
|
494
|
+
--color-icon-soft: var(--traton-color-transparent-inverse-600);
|
|
495
|
+
--color-icon-subtle: var(--traton-color-transparent-inverse-500);
|
|
496
|
+
--color-icon-disabled: var(--traton-color-transparent-inverse-400);
|
|
497
|
+
--color-icon-discrete: var(--traton-color-transparent-inverse-200);
|
|
498
|
+
--color-icon-inverse-defined: var(--traton-color-transparent-700);
|
|
499
|
+
--color-icon-inverse-soft: var(--traton-color-transparent-600);
|
|
500
|
+
--color-icon-inverse-subtle: var(--traton-color-transparent-500);
|
|
501
|
+
--color-icon-inverse-disabled: var(--traton-color-transparent-400);
|
|
502
|
+
--color-icon-inverse-discrete: var(--traton-color-transparent-200);
|
|
503
|
+
--color-system-info-strong: var(--traton-color-blue-100);
|
|
504
|
+
--color-system-info-defined: var(--traton-color-blue-200);
|
|
505
|
+
--color-system-info-default: var(--traton-color-blue-500);
|
|
506
|
+
--color-system-info-subtle: var(--traton-color-blue-600);
|
|
507
|
+
--color-system-info-discrete: var(--traton-color-blue-850);
|
|
555
508
|
--color-system-success-strong: var(--traton-color-green-50);
|
|
556
509
|
--color-system-success-defined: var(--traton-color-green-200);
|
|
510
|
+
--color-system-success-default: var(--traton-color-green-300);
|
|
557
511
|
--color-system-success-subtle: var(--traton-color-green-400);
|
|
558
|
-
--color-system-
|
|
559
|
-
--color-system-
|
|
560
|
-
--color-system-
|
|
561
|
-
--color-system-
|
|
562
|
-
--color-system-
|
|
563
|
-
--color-system-
|
|
564
|
-
--color-system-danger-discrete: var(--traton-color-red-850);
|
|
512
|
+
--color-system-success-discrete: var(--traton-color-green-850);
|
|
513
|
+
--color-system-warning-strong: var(--traton-color-yellow-100);
|
|
514
|
+
--color-system-warning-defined: var(--traton-color-yellow-200);
|
|
515
|
+
--color-system-warning-default: var(--traton-color-yellow-300);
|
|
516
|
+
--color-system-warning-subtle: var(--traton-color-yellow-400);
|
|
517
|
+
--color-system-warning-discrete: var(--traton-color-yellow-800);
|
|
565
518
|
--color-system-danger-strong: var(--traton-color-red-50);
|
|
566
519
|
--color-system-danger-defined: var(--traton-color-red-100);
|
|
520
|
+
--color-system-danger-default: var(--traton-color-red-300);
|
|
567
521
|
--color-system-danger-subtle: var(--traton-color-red-500);
|
|
568
|
-
--color-
|
|
569
|
-
--color-
|
|
570
|
-
--color-
|
|
571
|
-
--color-
|
|
572
|
-
--color-
|
|
573
|
-
--color-
|
|
574
|
-
--color-
|
|
575
|
-
--color-
|
|
576
|
-
--color-
|
|
577
|
-
--color-
|
|
578
|
-
--color-
|
|
579
|
-
--color-
|
|
580
|
-
--color-
|
|
581
|
-
--color-
|
|
582
|
-
--color-
|
|
583
|
-
--color-
|
|
584
|
-
--color-
|
|
585
|
-
--color-
|
|
586
|
-
--color-
|
|
587
|
-
--color-foreground-border-inverse-discrete: var(--traton-color-transparent-200);
|
|
588
|
-
--color-foreground-border-inverse-defined: var(--traton-color-transparent-700);
|
|
589
|
-
--color-foreground-border-inverse-disabled: var(--traton-color-transparent-400);
|
|
590
|
-
--color-foreground-border-strong: var(--traton-color-transparent-inverse-950);
|
|
591
|
-
--color-foreground-border-soft: var(--traton-color-transparent-inverse-600);
|
|
592
|
-
--color-foreground-border-subtle: var(--traton-color-transparent-inverse-500);
|
|
593
|
-
--color-foreground-border-discrete: var(--traton-color-transparent-inverse-200);
|
|
594
|
-
--color-foreground-border-accent-link: var(--traton-color-yellow-300);
|
|
595
|
-
--color-foreground-border-accent-focus: var(--traton-color-yellow-400);
|
|
596
|
-
--color-foreground-border-defined: var(--traton-color-transparent-inverse-700);
|
|
597
|
-
--color-foreground-border-disabled: var(--traton-color-transparent-inverse-400);
|
|
598
|
-
--color-foreground-icon-strong: var(--traton-color-transparent-inverse-950);
|
|
599
|
-
--color-foreground-icon-defined: var(--traton-color-transparent-inverse-700);
|
|
600
|
-
--color-foreground-icon-soft: var(--traton-color-transparent-inverse-600);
|
|
601
|
-
--color-foreground-icon-subtle: var(--traton-color-transparent-inverse-500);
|
|
602
|
-
--color-foreground-icon-disabled: var(--traton-color-transparent-inverse-400);
|
|
603
|
-
--color-foreground-icon-discrete: var(--traton-color-transparent-inverse-200);
|
|
604
|
-
--color-foreground-icon-inverse-strong: var(--traton-color-transparent-950);
|
|
605
|
-
--color-foreground-icon-inverse-defined: var(--traton-color-transparent-700);
|
|
606
|
-
--color-foreground-icon-inverse-soft: var(--traton-color-transparent-600);
|
|
607
|
-
--color-foreground-icon-inverse-subtle: var(--traton-color-transparent-500);
|
|
608
|
-
--color-foreground-icon-inverse-disabled: var(--traton-color-transparent-400);
|
|
609
|
-
--color-foreground-icon-inverse-discrete: var(--traton-color-transparent-200);
|
|
610
|
-
--color-foreground-icon-accent-default: var(--traton-color-blue-400);
|
|
611
|
-
--color-foreground-icon-accent-visited: var(--traton-color-blue-150);
|
|
612
|
-
--color-foreground-icon-accent-brand: var(--traton-color-blue-50);
|
|
613
|
-
--color-foreground-icon-accent-brand-inverse: var(--traton-color-blue-500);
|
|
614
|
-
--color-brand-neutral-white: var(--traton-color-base-neutral-white);
|
|
615
|
-
--color-brand-neutral-black: var(--traton-color-base-neutral-black);
|
|
616
|
-
--color-brand-primary-50: var(--traton-color-blue-50);
|
|
617
|
-
--color-brand-primary-100: var(--traton-color-blue-100);
|
|
618
|
-
--color-brand-primary-200: var(--traton-color-blue-200);
|
|
619
|
-
--color-brand-primary-300: var(--traton-color-blue-300);
|
|
620
|
-
--color-brand-primary-400: var(--traton-color-blue-400);
|
|
621
|
-
--color-brand-primary-500: var(--traton-color-blue-500);
|
|
622
|
-
--color-brand-primary-600: var(--traton-color-blue-600);
|
|
623
|
-
--color-brand-primary-700: var(--traton-color-blue-700);
|
|
624
|
-
--color-brand-primary-800: var(--traton-color-blue-800);
|
|
625
|
-
--color-brand-primary-900: var(--traton-color-blue-900);
|
|
626
|
-
--color-brand-secondary-50: var(--traton-color-yellow-50);
|
|
627
|
-
--color-brand-secondary-100: var(--traton-color-yellow-100);
|
|
628
|
-
--color-brand-secondary-200: var(--traton-color-yellow-200);
|
|
629
|
-
--color-brand-secondary-300: var(--traton-color-yellow-300);
|
|
630
|
-
--color-brand-secondary-400: var(--traton-color-yellow-400);
|
|
631
|
-
--color-brand-secondary-500: var(--traton-color-yellow-500);
|
|
632
|
-
--color-brand-secondary-600: var(--traton-color-yellow-600);
|
|
633
|
-
--color-brand-secondary-700: var(--traton-color-yellow-700);
|
|
634
|
-
--color-brand-secondary-800: var(--traton-color-yellow-800);
|
|
635
|
-
--color-brand-secondary-900: var(--traton-color-yellow-900);
|
|
522
|
+
--color-system-danger-discrete: var(--traton-color-red-850);
|
|
523
|
+
--color-text-defined: var(--traton-color-transparent-inverse-700);
|
|
524
|
+
--color-text-soft: var(--traton-color-transparent-inverse-600);
|
|
525
|
+
--color-text-subtle: var(--traton-color-transparent-inverse-500);
|
|
526
|
+
--color-text-disabled: var(--traton-color-transparent-inverse-400);
|
|
527
|
+
--color-text-brand: var(--traton-color-base-white);
|
|
528
|
+
--color-text-base: var(--traton-color-base-white);
|
|
529
|
+
--color-text-inverse-defined: var(--traton-color-transparent-700);
|
|
530
|
+
--color-text-inverse-soft: var(--traton-color-transparent-600);
|
|
531
|
+
--color-text-inverse-subtle: var(--traton-color-transparent-500);
|
|
532
|
+
--color-text-inverse-disabled: var(--traton-color-transparent-400);
|
|
533
|
+
--color-text-inverse-base: var(--traton-color-base-black);
|
|
534
|
+
--color-border-strong: var(--traton-color-transparent-inverse-950);
|
|
535
|
+
--color-border-inverse-strong: var(--traton-color-transparent-950);
|
|
536
|
+
--color-icon-strong: var(--traton-color-transparent-inverse-950);
|
|
537
|
+
--color-icon-inverse-strong: var(--traton-color-transparent-950);
|
|
538
|
+
--color-text-strong: var(--traton-color-transparent-inverse-950);
|
|
539
|
+
--color-text-inverse-strong: var(--traton-color-transparent-950);
|
|
540
|
+
--color-text-inverse-brand: var(--traton-color-transparent-950);
|
|
636
541
|
}
|
|
637
542
|
|
|
638
543
|
/* Traton logotype tokens */
|
|
@@ -656,21 +561,21 @@
|
|
|
656
561
|
* Do not edit directly, this file was auto-generated.
|
|
657
562
|
*/
|
|
658
563
|
.traton {
|
|
659
|
-
--dimension-
|
|
660
|
-
--dimension-space-small: var(--traton-unit-16);
|
|
661
|
-
--dimension-space-medium: var(--traton-unit-24);
|
|
662
|
-
--dimension-space-large: var(--traton-unit-48);
|
|
663
|
-
--dimension-space-huge: var(--traton-unit-80);
|
|
664
|
-
--dimension-radius-for-surface-clickable: var(--traton-unit-9999);
|
|
665
|
-
--dimension-radius-for-surface-field: var(--traton-unit-2);
|
|
666
|
-
--dimension-radius-for-surface-inverse: var(--traton-unit-2);
|
|
564
|
+
--dimension-radius-focus-width: var(--traton-unit-4);
|
|
667
565
|
--dimension-radius-narrow: var(--traton-unit-4);
|
|
668
566
|
--dimension-radius-soft: var(--traton-unit-8);
|
|
669
567
|
--dimension-radius-rounded: var(--traton-unit-32);
|
|
670
568
|
--dimension-radius-circle: var(--traton-unit-9999);
|
|
569
|
+
--dimension-radius-for-surface-clickable: var(--traton-unit-9999);
|
|
570
|
+
--dimension-radius-for-surface-field: var(--traton-unit-2);
|
|
571
|
+
--dimension-radius-for-surface-inverse: var(--traton-unit-2);
|
|
671
572
|
--dimension-radius-for-area-large: var(--traton-unit-8);
|
|
672
573
|
--dimension-radius-for-area-small: var(--traton-unit-4);
|
|
673
|
-
--dimension-
|
|
574
|
+
--dimension-space-tiny: var(--traton-unit-4);
|
|
575
|
+
--dimension-space-small: var(--traton-unit-16);
|
|
576
|
+
--dimension-space-medium: var(--traton-unit-24);
|
|
577
|
+
--dimension-space-large: var(--traton-unit-48);
|
|
578
|
+
--dimension-space-huge: var(--traton-unit-80);
|
|
674
579
|
}
|
|
675
580
|
|
|
676
581
|
/* Traton typography tokens */
|
|
@@ -678,150 +583,132 @@
|
|
|
678
583
|
* Do not edit directly, this file was auto-generated.
|
|
679
584
|
*/
|
|
680
585
|
.traton {
|
|
681
|
-
--
|
|
682
|
-
--
|
|
683
|
-
--
|
|
684
|
-
--
|
|
685
|
-
--
|
|
686
|
-
--
|
|
687
|
-
--
|
|
688
|
-
--
|
|
689
|
-
--
|
|
690
|
-
--
|
|
691
|
-
--
|
|
692
|
-
--
|
|
693
|
-
--
|
|
694
|
-
--
|
|
695
|
-
--
|
|
696
|
-
--
|
|
697
|
-
--
|
|
698
|
-
--
|
|
699
|
-
--
|
|
700
|
-
--
|
|
701
|
-
--
|
|
702
|
-
--
|
|
703
|
-
--
|
|
704
|
-
--
|
|
705
|
-
--
|
|
706
|
-
--
|
|
707
|
-
--
|
|
708
|
-
--
|
|
709
|
-
--
|
|
710
|
-
--
|
|
711
|
-
--
|
|
712
|
-
--
|
|
713
|
-
--
|
|
714
|
-
--
|
|
715
|
-
--
|
|
716
|
-
--
|
|
717
|
-
--
|
|
718
|
-
--
|
|
719
|
-
--
|
|
720
|
-
--
|
|
721
|
-
--
|
|
722
|
-
--
|
|
723
|
-
--
|
|
724
|
-
--
|
|
725
|
-
--
|
|
726
|
-
--
|
|
727
|
-
--
|
|
728
|
-
--
|
|
729
|
-
--
|
|
730
|
-
--
|
|
731
|
-
--
|
|
732
|
-
--
|
|
733
|
-
--
|
|
734
|
-
--
|
|
735
|
-
--
|
|
736
|
-
--
|
|
737
|
-
--
|
|
738
|
-
--
|
|
739
|
-
--
|
|
740
|
-
--
|
|
741
|
-
--
|
|
742
|
-
--
|
|
743
|
-
--
|
|
744
|
-
--
|
|
745
|
-
--
|
|
746
|
-
--
|
|
747
|
-
--
|
|
748
|
-
--
|
|
749
|
-
--
|
|
750
|
-
--
|
|
751
|
-
--
|
|
752
|
-
--
|
|
753
|
-
--
|
|
754
|
-
--
|
|
755
|
-
--
|
|
756
|
-
--
|
|
757
|
-
--
|
|
758
|
-
--
|
|
759
|
-
--
|
|
760
|
-
--
|
|
761
|
-
--
|
|
762
|
-
--
|
|
763
|
-
--
|
|
764
|
-
--
|
|
765
|
-
--
|
|
766
|
-
--
|
|
767
|
-
--
|
|
768
|
-
--
|
|
769
|
-
--
|
|
770
|
-
--
|
|
771
|
-
--
|
|
772
|
-
--
|
|
773
|
-
--
|
|
774
|
-
--
|
|
775
|
-
--
|
|
776
|
-
--
|
|
777
|
-
--
|
|
778
|
-
--
|
|
779
|
-
--
|
|
780
|
-
--
|
|
781
|
-
--
|
|
782
|
-
--
|
|
783
|
-
--
|
|
784
|
-
--
|
|
785
|
-
--
|
|
786
|
-
--
|
|
787
|
-
--
|
|
788
|
-
--
|
|
789
|
-
--
|
|
790
|
-
--
|
|
791
|
-
--
|
|
792
|
-
--
|
|
793
|
-
--
|
|
794
|
-
--
|
|
795
|
-
--
|
|
796
|
-
--
|
|
797
|
-
--
|
|
798
|
-
--
|
|
799
|
-
--
|
|
800
|
-
--
|
|
801
|
-
--
|
|
802
|
-
--
|
|
803
|
-
--
|
|
804
|
-
--
|
|
805
|
-
--
|
|
806
|
-
--
|
|
807
|
-
--text-component-text-01-font-family: var(--traton-font-family-default);
|
|
808
|
-
--text-component-text-01-font-weight: var(--traton-font-weight-regular);
|
|
809
|
-
--text-component-text-02-font-family: var(--traton-font-family-default);
|
|
810
|
-
--text-component-text-02-font-weight: var(--traton-font-weight-regular);
|
|
811
|
-
--text-component-label-01-font-family: var(--traton-font-family-default);
|
|
812
|
-
--text-component-label-01-font-weight: var(--traton-font-weight-medium);
|
|
813
|
-
--text-component-label-02-font-family: var(--traton-font-family-default);
|
|
814
|
-
--text-component-label-02-font-weight: var(--traton-font-weight-medium);
|
|
815
|
-
--text-component-title-01-font-family: var(--traton-font-family-default);
|
|
816
|
-
--text-component-title-01-font-family-2: var(--traton-font-family-default);
|
|
817
|
-
--text-component-title-01-font-weight: var(--traton-font-weight-semi-bold);
|
|
818
|
-
--text-component-title-01-font-weight-2: var(--traton-font-weight-semi-bold);
|
|
819
|
-
--text-component-title-02-font-family: var(--traton-font-family-default);
|
|
820
|
-
--text-component-title-02-font-weight: var(--traton-font-weight-semi-bold);
|
|
821
|
-
--text-link-01-font-family: var(--traton-font-family-default);
|
|
822
|
-
--text-link-01-font-weight: var(--traton-font-weight-regular);
|
|
823
|
-
--text-link-02-font-family: var(--traton-font-family-default);
|
|
824
|
-
--text-link-02-font-weight: var(--traton-font-weight-regular);
|
|
586
|
+
--type-display-01-font-size: 216;
|
|
587
|
+
--type-display-01-line-height: 227;
|
|
588
|
+
--type-display-01-letter-spacing: 1.08;
|
|
589
|
+
--type-display-01-text-transform: uppercase;
|
|
590
|
+
--type-display-02-font-size: 156;
|
|
591
|
+
--type-display-02-line-height: 164;
|
|
592
|
+
--type-display-02-letter-spacing: 0.78;
|
|
593
|
+
--type-display-02-text-transform: uppercase;
|
|
594
|
+
--type-display-03-font-size: 112;
|
|
595
|
+
--type-display-03-line-height: 118;
|
|
596
|
+
--type-display-03-letter-spacing: 0.56;
|
|
597
|
+
--type-display-03-text-transform: uppercase;
|
|
598
|
+
--type-display-04-font-size: 80;
|
|
599
|
+
--type-display-04-line-height: 84;
|
|
600
|
+
--type-display-04-letter-spacing: 0.4;
|
|
601
|
+
--type-display-04-text-transform: uppercase;
|
|
602
|
+
--type-display-05-font-size: 56;
|
|
603
|
+
--type-display-05-line-height: 59;
|
|
604
|
+
--type-display-05-letter-spacing: 0.28;
|
|
605
|
+
--type-display-05-text-transform: uppercase;
|
|
606
|
+
--type-headline-01-font-size: 40;
|
|
607
|
+
--type-headline-01-line-height: 42;
|
|
608
|
+
--type-headline-01-letter-spacing: 0;
|
|
609
|
+
--type-headline-01-text-transform: none;
|
|
610
|
+
--type-headline-02-font-size: 32;
|
|
611
|
+
--type-headline-02-line-height: 40;
|
|
612
|
+
--type-headline-02-letter-spacing: 0;
|
|
613
|
+
--type-headline-02-text-transform: none;
|
|
614
|
+
--type-headline-03-font-size: 24;
|
|
615
|
+
--type-headline-03-line-height: 30;
|
|
616
|
+
--type-headline-03-letter-spacing: 0;
|
|
617
|
+
--type-headline-03-text-transform: none;
|
|
618
|
+
--type-headline-04-font-size: 20;
|
|
619
|
+
--type-headline-04-line-height: 25;
|
|
620
|
+
--type-headline-04-letter-spacing: 0;
|
|
621
|
+
--type-headline-04-text-transform: none;
|
|
622
|
+
--type-headline-05-font-size: 16;
|
|
623
|
+
--type-headline-05-line-height: 22;
|
|
624
|
+
--type-headline-05-letter-spacing: 0;
|
|
625
|
+
--type-headline-05-text-transform: none;
|
|
626
|
+
--type-headline-06-font-size: 14;
|
|
627
|
+
--type-headline-06-line-height: 20;
|
|
628
|
+
--type-headline-06-letter-spacing: 0;
|
|
629
|
+
--type-headline-06-text-transform: none;
|
|
630
|
+
--type-paragraph-01-font-size: 24;
|
|
631
|
+
--type-paragraph-01-line-height: 30;
|
|
632
|
+
--type-paragraph-01-letter-spacing: 0;
|
|
633
|
+
--type-paragraph-01-text-transform: none;
|
|
634
|
+
--type-paragraph-02-font-size: 20;
|
|
635
|
+
--type-paragraph-02-line-height: 25;
|
|
636
|
+
--type-paragraph-02-letter-spacing: 0;
|
|
637
|
+
--type-paragraph-02-text-transform: none;
|
|
638
|
+
--type-body-01-font-size: 16;
|
|
639
|
+
--type-body-01-line-height: 22;
|
|
640
|
+
--type-body-01-letter-spacing: 0;
|
|
641
|
+
--type-body-01-text-transform: none;
|
|
642
|
+
--type-body-02-font-size: 14;
|
|
643
|
+
--type-body-02-line-height: 20;
|
|
644
|
+
--type-body-02-letter-spacing: 0;
|
|
645
|
+
--type-body-02-text-transform: none;
|
|
646
|
+
--type-system-title-01-font-size: 14;
|
|
647
|
+
--type-system-title-01-line-height: 18;
|
|
648
|
+
--type-system-title-01-letter-spacing: 0;
|
|
649
|
+
--type-system-title-01-text-transform: none;
|
|
650
|
+
--type-system-title-02-font-size: 10;
|
|
651
|
+
--type-system-title-02-line-height: 14;
|
|
652
|
+
--type-system-title-02-letter-spacing: 0.4;
|
|
653
|
+
--type-system-title-02-text-transform: none;
|
|
654
|
+
--type-system-label-01-font-size: 12;
|
|
655
|
+
--type-system-label-01-line-height: 17;
|
|
656
|
+
--type-system-label-01-letter-spacing: 0;
|
|
657
|
+
--type-system-label-01-text-transform: none;
|
|
658
|
+
--type-system-label-02-font-size: 10;
|
|
659
|
+
--type-system-label-02-line-height: 14;
|
|
660
|
+
--type-system-label-02-letter-spacing: 0;
|
|
661
|
+
--type-system-label-02-text-transform: none;
|
|
662
|
+
--type-system-body-01-font-size: 14;
|
|
663
|
+
--type-system-body-01-line-height: 16;
|
|
664
|
+
--type-system-body-01-letter-spacing: 0;
|
|
665
|
+
--type-system-body-01-text-transform: none;
|
|
666
|
+
--type-system-body-02-font-size: 14;
|
|
667
|
+
--type-system-body-02-line-height: 20;
|
|
668
|
+
--type-system-body-02-letter-spacing: 0;
|
|
669
|
+
--type-system-body-02-text-transform: none;
|
|
670
|
+
--type-display-01-font-family: var(--traton-font-family-display);
|
|
671
|
+
--type-display-01-font-weight: var(--traton-font-weight-medium);
|
|
672
|
+
--type-display-02-font-family: var(--traton-font-family-display);
|
|
673
|
+
--type-display-02-font-weight: var(--traton-font-weight-medium);
|
|
674
|
+
--type-display-03-font-family: var(--traton-font-family-display);
|
|
675
|
+
--type-display-03-font-weight: var(--traton-font-weight-medium);
|
|
676
|
+
--type-display-04-font-family: var(--traton-font-family-display);
|
|
677
|
+
--type-display-04-font-weight: var(--traton-font-weight-medium);
|
|
678
|
+
--type-display-05-font-family: var(--traton-font-family-display);
|
|
679
|
+
--type-display-05-font-weight: var(--traton-font-weight-medium);
|
|
680
|
+
--type-headline-01-font-family: var(--traton-font-family-display);
|
|
681
|
+
--type-headline-01-font-weight: var(--traton-font-weight-medium);
|
|
682
|
+
--type-headline-02-font-family: var(--traton-font-family-display);
|
|
683
|
+
--type-headline-02-font-weight: var(--traton-font-weight-medium);
|
|
684
|
+
--type-headline-03-font-family: var(--traton-font-family-display);
|
|
685
|
+
--type-headline-03-font-weight: var(--traton-font-weight-medium);
|
|
686
|
+
--type-headline-04-font-family: var(--traton-font-family-display);
|
|
687
|
+
--type-headline-04-font-weight: var(--traton-font-weight-medium);
|
|
688
|
+
--type-headline-05-font-family: var(--traton-font-family-default);
|
|
689
|
+
--type-headline-05-font-weight: var(--traton-font-weight-semi-bold);
|
|
690
|
+
--type-headline-06-font-family: var(--traton-font-family-default);
|
|
691
|
+
--type-headline-06-font-weight: var(--traton-font-weight-semi-bold);
|
|
692
|
+
--type-paragraph-01-font-family: var(--traton-font-family-display);
|
|
693
|
+
--type-paragraph-01-font-weight: var(--traton-font-weight-medium);
|
|
694
|
+
--type-paragraph-02-font-family: var(--traton-font-family-display);
|
|
695
|
+
--type-paragraph-02-font-weight: var(--traton-font-weight-medium);
|
|
696
|
+
--type-body-01-font-family: var(--traton-font-family-default);
|
|
697
|
+
--type-body-01-font-weight: var(--traton-font-weight-regular);
|
|
698
|
+
--type-body-02-font-family: var(--traton-font-family-default);
|
|
699
|
+
--type-body-02-font-weight: var(--traton-font-weight-regular);
|
|
700
|
+
--type-system-title-01-font-family: var(--traton-font-family-default);
|
|
701
|
+
--type-system-title-01-font-weight: var(--traton-font-weight-semi-bold);
|
|
702
|
+
--type-system-title-02-font-family: var(--traton-font-family-default);
|
|
703
|
+
--type-system-title-02-font-weight: var(--traton-font-weight-semi-bold);
|
|
704
|
+
--type-system-label-01-font-family: var(--traton-font-family-default);
|
|
705
|
+
--type-system-label-01-font-weight: var(--traton-font-weight-medium);
|
|
706
|
+
--type-system-label-02-font-family: var(--traton-font-family-default);
|
|
707
|
+
--type-system-label-02-font-weight: var(--traton-font-weight-medium);
|
|
708
|
+
--type-system-body-01-font-family: var(--traton-font-family-default);
|
|
709
|
+
--type-system-body-01-font-weight: var(--traton-font-weight-regular);
|
|
710
|
+
--type-system-body-02-font-family: var(--traton-font-family-default);
|
|
711
|
+
--type-system-body-02-font-weight: var(--traton-font-weight-regular);
|
|
825
712
|
}
|
|
826
713
|
|
|
827
714
|
/* Spacing */
|
|
@@ -845,6 +732,7 @@
|
|
|
845
732
|
--traton-icon-chevron_right-svg: url(./assets/icons/traton/chevron_right.svg);
|
|
846
733
|
--traton-icon-chevron_up-svg: url(./assets/icons/traton/chevron_up.svg);
|
|
847
734
|
--traton-icon-cross-svg: url(./assets/icons/traton/cross.svg);
|
|
735
|
+
--traton-icon-edit_inactive-svg: url(./assets/icons/traton/edit_inactive.svg);
|
|
848
736
|
--traton-icon-edit-svg: url(./assets/icons/traton/edit.svg);
|
|
849
737
|
--traton-icon-error-svg: url(./assets/icons/traton/error.svg);
|
|
850
738
|
--traton-icon-info-svg: url(./assets/icons/traton/info.svg);
|
|
@@ -855,6 +743,8 @@
|
|
|
855
743
|
--traton-icon-refresh-svg: url(./assets/icons/traton/refresh.svg);
|
|
856
744
|
--traton-icon-search-svg: url(./assets/icons/traton/search.svg);
|
|
857
745
|
--traton-icon-share-svg: url(./assets/icons/traton/share.svg);
|
|
746
|
+
--traton-icon-skip_backwards-svg: url(./assets/icons/traton/skip_backwards.svg);
|
|
747
|
+
--traton-icon-skip_forward-svg: url(./assets/icons/traton/skip_forward.svg);
|
|
858
748
|
--traton-icon-sorting-svg: url(./assets/icons/traton/sorting.svg);
|
|
859
749
|
--traton-icon-star-svg: url(./assets/icons/traton/star.svg);
|
|
860
750
|
--traton-icon-tick-svg: url(./assets/icons/traton/tick.svg);
|
|
@@ -880,6 +770,7 @@
|
|
|
880
770
|
--icon-chevron_right-svg: var(--traton-icon-chevron_right-svg);
|
|
881
771
|
--icon-chevron_up-svg: var(--traton-icon-chevron_up-svg);
|
|
882
772
|
--icon-cross-svg: var(--traton-icon-cross-svg);
|
|
773
|
+
--icon-edit_inactive-svg: var(--traton-icon-edit_inactive-svg);
|
|
883
774
|
--icon-edit-svg: var(--traton-icon-edit-svg);
|
|
884
775
|
--icon-error-svg: var(--traton-icon-error-svg);
|
|
885
776
|
--icon-info-svg: var(--traton-icon-info-svg);
|
|
@@ -890,6 +781,8 @@
|
|
|
890
781
|
--icon-refresh-svg: var(--traton-icon-refresh-svg);
|
|
891
782
|
--icon-search-svg: var(--traton-icon-search-svg);
|
|
892
783
|
--icon-share-svg: var(--traton-icon-share-svg);
|
|
784
|
+
--icon-skip_backwards-svg: var(--traton-icon-skip_backwards-svg);
|
|
785
|
+
--icon-skip_forward-svg: var(--traton-icon-skip_forward-svg);
|
|
893
786
|
--icon-sorting-svg: var(--traton-icon-sorting-svg);
|
|
894
787
|
--icon-star-svg: var(--traton-icon-star-svg);
|
|
895
788
|
--icon-tick-svg: var(--traton-icon-tick-svg);
|