@scania/tegel-lite 0.1.0-dev-test-beta.0 → 0.1.0-focus-ring-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.
Files changed (39) hide show
  1. package/dist/assets/fonts/traton/TratonTypeDisplay-Bold.woff +0 -0
  2. package/dist/assets/fonts/traton/TratonTypeDisplay-Bold.woff2 +0 -0
  3. package/dist/assets/fonts/traton/TratonTypeDisplay-Medium.woff +0 -0
  4. package/dist/assets/fonts/traton/TratonTypeDisplay-Medium.woff2 +0 -0
  5. package/dist/assets/fonts/traton/TratonTypeText-Bold.woff +0 -0
  6. package/dist/assets/fonts/traton/TratonTypeText-Bold.woff2 +0 -0
  7. package/dist/assets/fonts/traton/TratonTypeText-BoldItalic.woff +0 -0
  8. package/dist/assets/fonts/traton/TratonTypeText-BoldItalic.woff2 +0 -0
  9. package/dist/assets/fonts/traton/TratonTypeText-Italic.woff +0 -0
  10. package/dist/assets/fonts/traton/TratonTypeText-Italic.woff2 +0 -0
  11. package/dist/assets/fonts/traton/TratonTypeText-Medium.woff +0 -0
  12. package/dist/assets/fonts/traton/TratonTypeText-Medium.woff2 +0 -0
  13. package/dist/assets/fonts/traton/TratonTypeText-MediumItalic.woff +0 -0
  14. package/dist/assets/fonts/traton/TratonTypeText-MediumItalic.woff2 +0 -0
  15. package/dist/assets/fonts/traton/TratonTypeText-Regular.woff +0 -0
  16. package/dist/assets/fonts/traton/TratonTypeText-Regular.woff2 +0 -0
  17. package/dist/assets/fonts/traton/TratonTypeText-SemiBold.woff +0 -0
  18. package/dist/assets/fonts/traton/TratonTypeText-SemiBold.woff2 +0 -0
  19. package/dist/assets/fonts/traton/TratonTypeText-SemiBoldItalic.woff2 +0 -0
  20. package/dist/assets/icons/traton/placeholder.svg +3 -0
  21. package/dist/components.css +530 -244
  22. package/dist/global.css +66 -0
  23. package/dist/scania-variables.css +185 -136
  24. package/dist/tl-banner.css +2 -2
  25. package/dist/tl-breadcrumbs.css +51 -5
  26. package/dist/tl-button.css +172 -149
  27. package/dist/tl-card.css +20 -8
  28. package/dist/tl-chip.css +8 -8
  29. package/dist/tl-divider.css +61 -3
  30. package/dist/tl-footer.css +83 -31
  31. package/dist/tl-link.css +106 -13
  32. package/dist/tl-modal.css +2 -2
  33. package/dist/tl-side-menu.css +4 -4
  34. package/dist/tl-slider.css +172 -149
  35. package/dist/tl-toast.css +2 -2
  36. package/dist/tl-toggle.css +2 -2
  37. package/dist/tl-tooltip.css +17 -15
  38. package/dist/traton-variables.css +35 -23
  39. package/package.json +1 -1
package/dist/traton-variables.css CHANGED
@@ -24,74 +24,74 @@
24
24
  /* === TRATON Type Display === */
25
25
  @font-face {
26
26
  font-family: "TRATON Type Display";
27
- src: url("https://cdn.digitaldesign.scania.com/fonts/traton/1.0.0/traton-type-display-medium.woff2") format("woff2"), url("https://cdn.digitaldesign.scania.com/fonts/traton/1.0.0/traton-type-display-medium.woff") format("woff");
28
27
  font-weight: 500;
29
28
  font-style: normal;
30
29
  font-display: swap;
30
+ src: url("./assets/fonts/traton/TratonTypeDisplay-Medium.woff") format("woff"), url("https://cdn.digitaldesign.scania.com/fonts/traton/1.0.0/traton-type-display-medium.woff2") format("woff2"), url("https://cdn.digitaldesign.scania.com/fonts/traton/1.0.0/traton-type-display-medium.woff") format("woff");
31
31
  }
32
32
  @font-face {
33
33
  font-family: "TRATON Type Display";
34
- src: url("https://cdn.digitaldesign.scania.com/fonts/traton/1.0.0/traton-type-display-bold.woff2") format("woff2"), url("https://cdn.digitaldesign.scania.com/fonts/traton/1.0.0/traton-type-display-bold.woff") format("woff");
35
34
  font-weight: 700;
36
35
  font-style: normal;
37
36
  font-display: swap;
37
+ src: url("./assets/fonts/traton/TratonTypeDisplay-Bold.woff") format("woff"), url("https://cdn.digitaldesign.scania.com/fonts/traton/1.0.0/traton-type-display-bold.woff2") format("woff2"), url("https://cdn.digitaldesign.scania.com/fonts/traton/1.0.0/traton-type-display-bold.woff") format("woff");
38
38
  }
39
39
  /* === TRATON Type Text === */
40
40
  @font-face {
41
41
  font-family: "TRATON Type Text";
42
- src: url("https://cdn.digitaldesign.scania.com/fonts/traton/1.0.0/traton-type-text-regular.woff2") format("woff2"), url("https://cdn.digitaldesign.scania.com/fonts/traton/1.0.0/traton-type-text-regular.woff") format("woff");
43
42
  font-weight: 400;
44
43
  font-style: normal;
45
44
  font-display: swap;
45
+ src: url("./assets/fonts/traton/TratonTypeText-Regular.woff") format("woff"), url("https://cdn.digitaldesign.scania.com/fonts/traton/1.0.0/traton-type-text-regular.woff2") format("woff2"), url("https://cdn.digitaldesign.scania.com/fonts/traton/1.0.0/traton-type-text-regular.woff") format("woff");
46
46
  }
47
47
  @font-face {
48
48
  font-family: "TRATON Type Text";
49
- src: url("https://cdn.digitaldesign.scania.com/fonts/traton/1.0.0/traton-type-text-italic.woff2") format("woff2"), url("https://cdn.digitaldesign.scania.com/fonts/traton/1.0.0/traton-type-text-italic.woff") format("woff");
50
49
  font-weight: 400;
51
50
  font-style: italic;
52
51
  font-display: swap;
52
+ src: url("./assets/fonts/traton/TratonTypeText-Italic.woff") format("woff"), url("https://cdn.digitaldesign.scania.com/fonts/traton/1.0.0/traton-type-text-italic.woff2") format("woff2"), url("https://cdn.digitaldesign.scania.com/fonts/traton/1.0.0/traton-type-text-italic.woff") format("woff");
53
53
  }
54
54
  @font-face {
55
55
  font-family: "TRATON Type Text";
56
- src: url("https://cdn.digitaldesign.scania.com/fonts/traton/1.0.0/traton-type-text-medium.woff2") format("woff2"), url("https://cdn.digitaldesign.scania.com/fonts/traton/1.0.0/traton-type-text-medium.woff") format("woff");
57
56
  font-weight: 500;
58
57
  font-style: normal;
59
58
  font-display: swap;
59
+ src: url("./assets/fonts/traton/TratonTypeText-Medium.woff") format("woff"), url("https://cdn.digitaldesign.scania.com/fonts/traton/1.0.0/traton-type-text-medium.woff2") format("woff2"), url("https://cdn.digitaldesign.scania.com/fonts/traton/1.0.0/traton-type-text-medium.woff") format("woff");
60
60
  }
61
61
  @font-face {
62
62
  font-family: "TRATON Type Text";
63
- src: url("https://cdn.digitaldesign.scania.com/fonts/traton/1.0.0/traton-type-text-medium-italic.woff2") format("woff2"), url("https://cdn.digitaldesign.scania.com/fonts/traton/1.0.0/traton-type-text-medium-italic.woff") format("woff");
64
63
  font-weight: 500;
65
64
  font-style: italic;
66
65
  font-display: swap;
66
+ src: url("./assets/fonts/traton/TratonTypeText-MediumItalic.woff") format("woff"), url("https://cdn.digitaldesign.scania.com/fonts/traton/1.0.0/traton-type-text-medium-italic.woff2") format("woff2"), url("https://cdn.digitaldesign.scania.com/fonts/traton/1.0.0/traton-type-text-medium-italic.woff") format("woff");
67
67
  }
68
68
  @font-face {
69
69
  font-family: "TRATON Type Text";
70
- src: url("https://cdn.digitaldesign.scania.com/fonts/traton/1.0.0/traton-type-text-semibold.woff2") format("woff2"), url("https://cdn.digitaldesign.scania.com/fonts/traton/1.0.0/traton-type-text-semibold.woff") format("woff");
71
70
  font-weight: 600;
72
71
  font-style: normal;
73
72
  font-display: swap;
73
+ src: url("./assets/fonts/traton/TratonTypeText-SemiBold.woff") format("woff"), url("https://cdn.digitaldesign.scania.com/fonts/traton/1.0.0/traton-type-text-semibold.woff2") format("woff2"), url("https://cdn.digitaldesign.scania.com/fonts/traton/1.0.0/traton-type-text-semibold.woff") format("woff");
74
74
  }
75
75
  @font-face {
76
76
  font-family: "TRATON Type Text";
77
- src: url("https://cdn.digitaldesign.scania.com/fonts/traton/1.0.0/traton-type-text-semibold-italic.woff2") format("woff2"), url("https://cdn.digitaldesign.scania.com/fonts/traton/1.0.0/traton-type-text-semibold-italic.woff") format("woff");
78
77
  font-weight: 600;
79
78
  font-style: italic;
80
79
  font-display: swap;
80
+ src: url("./assets/fonts/traton/TratonTypeText-SemiBoldItalic.woff2") format("woff2"), url("https://cdn.digitaldesign.scania.com/fonts/traton/1.0.0/traton-type-text-semibold-italic.woff2") format("woff2"), url("https://cdn.digitaldesign.scania.com/fonts/traton/1.0.0/traton-type-text-semibold-italic.woff") format("woff");
81
81
  }
82
82
  @font-face {
83
83
  font-family: "TRATON Type Text";
84
- src: url("https://cdn.digitaldesign.scania.com/fonts/traton/1.0.0/traton-type-text-bold.woff2") format("woff2"), url("https://cdn.digitaldesign.scania.com/fonts/traton/1.0.0/traton-type-text-bold.woff") format("woff");
85
84
  font-weight: 700;
86
85
  font-style: normal;
87
86
  font-display: swap;
87
+ src: url("./assets/fonts/traton/TratonTypeText-Bold.woff") format("woff"), url("https://cdn.digitaldesign.scania.com/fonts/traton/1.0.0/traton-type-text-bold.woff2") format("woff2"), url("https://cdn.digitaldesign.scania.com/fonts/traton/1.0.0/traton-type-text-bold.woff") format("woff");
88
88
  }
89
89
  @font-face {
90
90
  font-family: "TRATON Type Text";
91
- src: url("https://cdn.digitaldesign.scania.com/fonts/traton/1.0.0/traton-type-text-bold-italic.woff2") format("woff2"), url("https://cdn.digitaldesign.scania.com/fonts/traton/1.0.0/traton-type-text-bold-italic.woff") format("woff");
92
91
  font-weight: 700;
93
92
  font-style: italic;
94
93
  font-display: swap;
94
+ src: url("./assets/fonts/traton/TratonTypeText-BoldItalic.woff") format("woff"), url("https://cdn.digitaldesign.scania.com/fonts/traton/1.0.0/traton-type-text-bold-italic.woff2") format("woff2"), url("https://cdn.digitaldesign.scania.com/fonts/traton/1.0.0/traton-type-text-bold-italic.woff") format("woff");
95
95
  }
96
96
  .traton {
97
97
  /* Font size tokens */
@@ -344,16 +344,16 @@
344
344
  --traton-color-yellow-900: #302403;
345
345
  --traton-color-yellow-950: #241b00;
346
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;
352
347
  --traton-font-family-default: traton type text;
353
348
  --traton-font-family-display: traton type display;
354
349
  --traton-font-weight-semi-bold: 600;
355
350
  --traton-font-weight-medium: 500;
356
351
  --traton-font-weight-regular: 400;
352
+ --traton-opacity-0: 0;
353
+ --traton-opacity-25: 25;
354
+ --traton-opacity-50: 50;
355
+ --traton-opacity-75: 75;
356
+ --traton-opacity-100: 100;
357
357
  --traton-unit-0: 0;
358
358
  --traton-unit-1: 1;
359
359
  --traton-unit-2: 2;
@@ -409,11 +409,15 @@
409
409
  --color-border-inverse-disabled: var(--traton-color-transparent-inverse-400);
410
410
  --color-border-inverse-discrete: var(--traton-color-transparent-inverse-200);
411
411
  --color-border-inverse-none: var(--traton-color-transparent-invisible-dark);
412
+ --color-icon-base: var(--traton-color-base-black);
413
+ --color-icon-brand: var(--traton-color-blue-950);
412
414
  --color-icon-defined: var(--traton-color-transparent-700);
413
415
  --color-icon-soft: var(--traton-color-transparent-600);
414
416
  --color-icon-subtle: var(--traton-color-transparent-500);
415
417
  --color-icon-disabled: var(--traton-color-transparent-400);
416
418
  --color-icon-discrete: var(--traton-color-transparent-200);
419
+ --color-icon-inverse-base: var(--traton-color-base-black);
420
+ --color-icon-inverse-brand: var(--traton-color-blue-950);
417
421
  --color-icon-inverse-defined: var(--traton-color-transparent-inverse-700);
418
422
  --color-icon-inverse-soft: var(--traton-color-transparent-inverse-600);
419
423
  --color-icon-inverse-subtle: var(--traton-color-transparent-inverse-500);
@@ -439,24 +443,26 @@
439
443
  --color-system-danger-default: var(--traton-color-red-300);
440
444
  --color-system-danger-subtle: var(--traton-color-red-200);
441
445
  --color-system-danger-discrete: var(--traton-color-red-50);
446
+ --color-text-base: var(--traton-color-base-black);
447
+ --color-text-brand: var(--traton-color-blue-950);
442
448
  --color-text-defined: var(--traton-color-transparent-700);
443
449
  --color-text-soft: var(--traton-color-transparent-600);
444
450
  --color-text-subtle: var(--traton-color-transparent-500);
445
451
  --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);
452
+ --color-text-discrete: var(--traton-color-transparent-200);
453
+ --color-text-inverse-brand: var(--traton-color-base-white);
448
454
  --color-text-inverse-defined: var(--traton-color-transparent-inverse-700);
449
455
  --color-text-inverse-soft: var(--traton-color-transparent-inverse-600);
450
456
  --color-text-inverse-subtle: var(--traton-color-transparent-inverse-500);
451
457
  --color-text-inverse-disabled: var(--traton-color-transparent-inverse-400);
452
- --color-text-inverse-brand: var(--traton-color-base-white);
458
+ --color-text-inverse-discrete: var(--traton-color-transparent-inverse-200);
453
459
  --color-border-strong: var(--traton-color-transparent-950);
454
460
  --color-border-inverse-strong: var(--traton-color-transparent-inverse-950);
455
461
  --color-icon-strong: var(--traton-color-transparent-950);
456
462
  --color-icon-inverse-strong: var(--traton-color-transparent-inverse-950);
457
463
  --color-text-strong: var(--traton-color-transparent-950);
458
- --color-text-inverse-strong: var(--traton-color-transparent-inverse-950);
459
464
  --color-text-inverse-base: var(--scania-color-base-white);
465
+ --color-text-inverse-strong: var(--traton-color-transparent-inverse-950);
460
466
  }
461
467
 
462
468
  /**
@@ -490,11 +496,15 @@
490
496
  --color-border-inverse-disabled: var(--traton-color-transparent-400);
491
497
  --color-border-inverse-discrete: var(--traton-color-transparent-200);
492
498
  --color-border-inverse-none: var(--traton-color-transparent-invisible-light);
499
+ --color-icon-base: var(--traton-color-base-white);
500
+ --color-icon-brand: var(--traton-color-base-white);
493
501
  --color-icon-defined: var(--traton-color-transparent-inverse-700);
494
502
  --color-icon-soft: var(--traton-color-transparent-inverse-600);
495
503
  --color-icon-subtle: var(--traton-color-transparent-inverse-500);
496
504
  --color-icon-disabled: var(--traton-color-transparent-inverse-400);
497
505
  --color-icon-discrete: var(--traton-color-transparent-inverse-200);
506
+ --color-icon-inverse-base: var(--traton-color-base-white);
507
+ --color-icon-inverse-brand: var(--traton-color-base-white);
498
508
  --color-icon-inverse-defined: var(--traton-color-transparent-700);
499
509
  --color-icon-inverse-soft: var(--traton-color-transparent-600);
500
510
  --color-icon-inverse-subtle: var(--traton-color-transparent-500);
@@ -520,24 +530,26 @@
520
530
  --color-system-danger-default: var(--traton-color-red-300);
521
531
  --color-system-danger-subtle: var(--traton-color-red-500);
522
532
  --color-system-danger-discrete: var(--traton-color-red-850);
533
+ --color-text-base: var(--traton-color-base-white);
534
+ --color-text-brand: var(--traton-color-base-white);
523
535
  --color-text-defined: var(--traton-color-transparent-inverse-700);
524
536
  --color-text-soft: var(--traton-color-transparent-inverse-600);
525
537
  --color-text-subtle: var(--traton-color-transparent-inverse-500);
526
538
  --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);
539
+ --color-text-discrete: var(--traton-color-transparent-inverse-200);
540
+ --color-text-inverse-base: var(--traton-color-base-black);
529
541
  --color-text-inverse-defined: var(--traton-color-transparent-700);
530
542
  --color-text-inverse-soft: var(--traton-color-transparent-600);
531
543
  --color-text-inverse-subtle: var(--traton-color-transparent-500);
532
544
  --color-text-inverse-disabled: var(--traton-color-transparent-400);
533
- --color-text-inverse-base: var(--traton-color-base-black);
545
+ --color-text-inverse-discrete: var(--traton-color-transparent-200);
534
546
  --color-border-strong: var(--traton-color-transparent-inverse-950);
535
547
  --color-border-inverse-strong: var(--traton-color-transparent-950);
536
548
  --color-icon-strong: var(--traton-color-transparent-inverse-950);
537
549
  --color-icon-inverse-strong: var(--traton-color-transparent-950);
538
550
  --color-text-strong: var(--traton-color-transparent-inverse-950);
539
- --color-text-inverse-strong: var(--traton-color-transparent-950);
540
551
  --color-text-inverse-brand: var(--traton-color-transparent-950);
552
+ --color-text-inverse-strong: var(--traton-color-transparent-950);
541
553
  }
542
554
 
543
555
  /* Traton logotype tokens */
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@scania/tegel-lite",
3
- "version": "0.1.0-dev-test-beta.0",
3
+ "version": "0.1.0-focus-ring-beta.0",
4
4
  "description": "Styles-only library for Tegel Design System (Beta)",
5
5
  "type": "module",
6
6
  "keywords": [