@scania/tegel-lite 0.1.0 → 1.0.0

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (68) hide show
  1. package/README.dev.md +1 -5
  2. package/README.md +12 -12
  3. package/dist/assets/fonts/traton/TratonTypeDisplay-Bold.woff +0 -0
  4. package/dist/assets/fonts/traton/TratonTypeDisplay-Bold.woff2 +0 -0
  5. package/dist/assets/fonts/traton/TratonTypeDisplay-Medium.woff +0 -0
  6. package/dist/assets/fonts/traton/TratonTypeDisplay-Medium.woff2 +0 -0
  7. package/dist/assets/fonts/traton/TratonTypeText-Bold.woff +0 -0
  8. package/dist/assets/fonts/traton/TratonTypeText-Bold.woff2 +0 -0
  9. package/dist/assets/fonts/traton/TratonTypeText-BoldItalic.woff +0 -0
  10. package/dist/assets/fonts/traton/TratonTypeText-BoldItalic.woff2 +0 -0
  11. package/dist/assets/fonts/traton/TratonTypeText-Italic.woff +0 -0
  12. package/dist/assets/fonts/traton/TratonTypeText-Italic.woff2 +0 -0
  13. package/dist/assets/fonts/traton/TratonTypeText-Medium.woff +0 -0
  14. package/dist/assets/fonts/traton/TratonTypeText-Medium.woff2 +0 -0
  15. package/dist/assets/fonts/traton/TratonTypeText-MediumItalic.woff +0 -0
  16. package/dist/assets/fonts/traton/TratonTypeText-MediumItalic.woff2 +0 -0
  17. package/dist/assets/fonts/traton/TratonTypeText-Regular.woff +0 -0
  18. package/dist/assets/fonts/traton/TratonTypeText-Regular.woff2 +0 -0
  19. package/dist/assets/fonts/traton/TratonTypeText-SemiBold.woff +0 -0
  20. package/dist/assets/fonts/traton/TratonTypeText-SemiBold.woff2 +0 -0
  21. package/dist/assets/fonts/traton/TratonTypeText-SemiBoldItalic.woff2 +0 -0
  22. package/dist/assets/icons/scania/configurator.svg +1 -0
  23. package/dist/assets/icons/traton/edit_inactive.svg +1 -0
  24. package/dist/assets/icons/traton/placeholder.svg +3 -0
  25. package/dist/assets/icons/traton/skip_backwards.svg +1 -0
  26. package/dist/assets/icons/traton/skip_forward.svg +1 -0
  27. package/dist/components.css +3993 -6847
  28. package/dist/global.css +627 -5641
  29. package/dist/scania-variables.css +661 -565
  30. package/dist/tl-accordion.css +88 -35
  31. package/dist/tl-banner.css +87 -12
  32. package/dist/tl-block.css +62 -7
  33. package/dist/tl-breadcrumbs.css +55 -6
  34. package/dist/tl-button.css +498 -87
  35. package/dist/tl-card.css +80 -54
  36. package/dist/tl-checkbox.css +195 -115
  37. package/dist/tl-datetime.css +7 -4
  38. package/dist/tl-divider.css +61 -3
  39. package/dist/tl-footer.css +116 -18
  40. package/dist/tl-icon.css +6 -2
  41. package/dist/tl-link.css +114 -16
  42. package/dist/tl-message.css +128 -14
  43. package/dist/tl-modal.css +165 -16
  44. package/dist/tl-radio-button.css +158 -96
  45. package/dist/tl-text-field.css +272 -140
  46. package/dist/tl-textarea.css +274 -76
  47. package/dist/tl-toast.css +119 -10
  48. package/dist/tl-toggle.css +150 -45
  49. package/dist/tl-tooltip.css +17 -15
  50. package/dist/traton-variables.css +682 -447
  51. package/package.json +6 -27
  52. package/dist/tl-badge.css +0 -44
  53. package/dist/tl-checkbox-vars.css +0 -38
  54. package/dist/tl-chip.css +0 -149
  55. package/dist/tl-dropdown.css +0 -857
  56. package/dist/tl-folder-tabs.css +0 -139
  57. package/dist/tl-header.css +0 -859
  58. package/dist/tl-inline-tabs.css +0 -173
  59. package/dist/tl-navigation-tabs.css +0 -171
  60. package/dist/tl-popover-canvas.css +0 -70
  61. package/dist/tl-popover-menu.css +0 -123
  62. package/dist/tl-side-menu.css +0 -540
  63. package/dist/tl-slider.css +0 -1854
  64. package/dist/tl-spinner.css +0 -78
  65. package/dist/tl-step.css +0 -213
  66. package/dist/tl-stepper.css +0 -57
  67. package/dist/tl-table.css +0 -827
  68. /package/dist/assets/icons/scania/{gift inactive.svg → gift_inactive.svg} +0 -0
package/dist/traton-variables.css CHANGED
@@ -1,3 +1,4 @@
1
+ @charset "UTF-8";
1
2
  /* Spacing */
2
3
  :root,
3
4
  .traton {
@@ -24,74 +25,74 @@
24
25
  /* === TRATON Type Display === */
25
26
  @font-face {
26
27
  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
28
  font-weight: 500;
29
29
  font-style: normal;
30
30
  font-display: swap;
31
+ 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
32
  }
32
33
  @font-face {
33
34
  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
35
  font-weight: 700;
36
36
  font-style: normal;
37
37
  font-display: swap;
38
+ 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
39
  }
39
40
  /* === TRATON Type Text === */
40
41
  @font-face {
41
42
  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
43
  font-weight: 400;
44
44
  font-style: normal;
45
45
  font-display: swap;
46
+ 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
47
  }
47
48
  @font-face {
48
49
  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
50
  font-weight: 400;
51
51
  font-style: italic;
52
52
  font-display: swap;
53
+ 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
54
  }
54
55
  @font-face {
55
56
  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
57
  font-weight: 500;
58
58
  font-style: normal;
59
59
  font-display: swap;
60
+ 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
61
  }
61
62
  @font-face {
62
63
  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
64
  font-weight: 500;
65
65
  font-style: italic;
66
66
  font-display: swap;
67
+ 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
68
  }
68
69
  @font-face {
69
70
  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
71
  font-weight: 600;
72
72
  font-style: normal;
73
73
  font-display: swap;
74
+ 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
75
  }
75
76
  @font-face {
76
77
  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
78
  font-weight: 600;
79
79
  font-style: italic;
80
80
  font-display: swap;
81
+ 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
82
  }
82
83
  @font-face {
83
84
  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
85
  font-weight: 700;
86
86
  font-style: normal;
87
87
  font-display: swap;
88
+ 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
89
  }
89
90
  @font-face {
90
91
  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
92
  font-weight: 700;
93
93
  font-style: italic;
94
94
  font-display: swap;
95
+ 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
96
  }
96
97
  .traton {
97
98
  /* Font size tokens */
@@ -257,20 +258,23 @@
257
258
  * Do not edit directly, this file was auto-generated.
258
259
  */
259
260
  :root {
260
- --traton-color-yellow-50: #fff6db;
261
- --traton-color-yellow-100: #ffe9aa;
262
- --traton-color-yellow-150: #ffdc7a;
263
- --traton-color-yellow-200: #ffd04a;
264
- --traton-color-yellow-300: #ffc00d;
265
- --traton-color-yellow-400: #e5ad0c;
266
- --traton-color-yellow-500: #bf900a;
267
- --traton-color-yellow-600: #997308;
268
- --traton-color-yellow-700: #735606;
269
- --traton-color-yellow-800: #594305;
270
- --traton-color-yellow-850: #433204;
271
- --traton-color-yellow-900: #302403;
272
- --traton-color-yellow-950: #241b00;
273
- --traton-color-yellow-1000: #1a1300;
261
+ --traton-color-base-black: #000;
262
+ --traton-color-base-white: #fff;
263
+ --traton-color-base-white-warm: #fcfbf7;
264
+ --traton-color-transparent-200: #1a1a1926;
265
+ --traton-color-transparent-400: #1a1a195c;
266
+ --traton-color-transparent-500: #1a1a1980;
267
+ --traton-color-transparent-600: #1a1a199e;
268
+ --traton-color-transparent-700: #1a1a19c2;
269
+ --traton-color-transparent-inverse-200: #d9edf054;
270
+ --traton-color-transparent-inverse-400: #d9edf07d;
271
+ --traton-color-transparent-inverse-500: #d9edf0a1;
272
+ --traton-color-transparent-inverse-600: #d9edf0bf;
273
+ --traton-color-transparent-inverse-700: #d9edf0de;
274
+ --traton-color-transparent-invisible-light: #fff0;
275
+ --traton-color-transparent-invisible-dark: #0000;
276
+ --traton-color-transparent-scrim-light: #0006;
277
+ --traton-color-transparent-scrim-dark: #0009;
274
278
  --traton-color-blue-50: #f8fcfc;
275
279
  --traton-color-blue-100: #e9f5f6;
276
280
  --traton-color-blue-150: #d9edf0;
@@ -285,6 +289,20 @@
285
289
  --traton-color-blue-900: #002429;
286
290
  --traton-color-blue-950: #001d21;
287
291
  --traton-color-blue-1000: #001214;
292
+ --traton-color-green-50: #d1fad1;
293
+ --traton-color-green-100: #adebb1;
294
+ --traton-color-green-150: #81d585;
295
+ --traton-color-green-200: #5abf5c;
296
+ --traton-color-green-300: #3ba63f;
297
+ --traton-color-green-400: #38943c;
298
+ --traton-color-green-500: #318035;
299
+ --traton-color-green-600: #2b6c2e;
300
+ --traton-color-green-700: #235727;
301
+ --traton-color-green-800: #1d441f;
302
+ --traton-color-green-850: #153217;
303
+ --traton-color-green-900: #102311;
304
+ --traton-color-green-950: #0d1b0e;
305
+ --traton-color-green-1000: #080c08;
288
306
  --traton-color-grey-50: #fcfbf7;
289
307
  --traton-color-grey-100: #f6f3e9;
290
308
  --traton-color-grey-150: #ebe7dd;
@@ -299,25 +317,6 @@
299
317
  --traton-color-grey-900: #252423;
300
318
  --traton-color-grey-950: #1a1a19;
301
319
  --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
320
  --traton-color-red-50: #ffe0e0;
322
321
  --traton-color-red-100: #f7baba;
323
322
  --traton-color-red-150: #f28686;
@@ -332,43 +331,50 @@
332
331
  --traton-color-red-900: #311111;
333
332
  --traton-color-red-950: #240d0d;
334
333
  --traton-color-red-1000: #140808;
335
- --traton-color-green-50: #d1fad1;
336
- --traton-color-green-100: #adebb1;
337
- --traton-color-green-150: #81d585;
338
- --traton-color-green-200: #5abf5c;
339
- --traton-color-green-300: #3ba63f;
340
- --traton-color-green-400: #38943c;
341
- --traton-color-green-500: #318035;
342
- --traton-color-green-600: #2b6c2e;
343
- --traton-color-green-700: #235727;
344
- --traton-color-green-800: #1d441f;
345
- --traton-color-green-850: #153217;
346
- --traton-color-green-900: #102311;
347
- --traton-color-green-950: #0d1b0e;
348
- --traton-color-green-1000: #080c08;
334
+ --traton-color-yellow-50: #fff6db;
335
+ --traton-color-yellow-100: #ffe9aa;
336
+ --traton-color-yellow-150: #ffdc7a;
337
+ --traton-color-yellow-200: #ffd04a;
338
+ --traton-color-yellow-300: #ffc00d;
339
+ --traton-color-yellow-400: #e5ad0c;
340
+ --traton-color-yellow-500: #bf900a;
341
+ --traton-color-yellow-600: #997308;
342
+ --traton-color-yellow-700: #735606;
343
+ --traton-color-yellow-800: #594305;
344
+ --traton-color-yellow-850: #433204;
345
+ --traton-color-yellow-900: #302403;
346
+ --traton-color-yellow-950: #241b00;
347
+ --traton-color-yellow-1000: #1a1300;
349
348
  --traton-font-family-default: traton type text;
350
349
  --traton-font-family-display: traton type display;
351
350
  --traton-font-weight-semi-bold: 600;
352
351
  --traton-font-weight-medium: 500;
353
352
  --traton-font-weight-regular: 400;
353
+ --traton-opacity-0: 0;
354
+ --traton-opacity-25: 25;
355
+ --traton-opacity-50: 50;
356
+ --traton-opacity-75: 75;
357
+ --traton-opacity-100: 100;
354
358
  --traton-unit-0: 0;
355
- --traton-unit-1: 1px;
356
- --traton-unit-2: 2px;
357
- --traton-unit-4: 4px;
358
- --traton-unit-8: 8px;
359
- --traton-unit-12: 12px;
360
- --traton-unit-16: 16px;
361
- --traton-unit-20: 20px;
362
- --traton-unit-24: 24px;
363
- --traton-unit-32: 32px;
364
- --traton-unit-40: 40px;
365
- --traton-unit-48: 48px;
366
- --traton-unit-56: 56px;
367
- --traton-unit-64: 64px;
368
- --traton-unit-80: 80px;
369
- --traton-unit-96: 96px;
370
- --traton-unit-120: 120px;
371
- --traton-unit-9999: 9999px;
359
+ --traton-unit-1: 1;
360
+ --traton-unit-2: 2;
361
+ --traton-unit-4: 4;
362
+ --traton-unit-8: 8;
363
+ --traton-unit-12: 12;
364
+ --traton-unit-16: 16;
365
+ --traton-unit-20: 20;
366
+ --traton-unit-24: 24;
367
+ --traton-unit-32: 32;
368
+ --traton-unit-40: 40;
369
+ --traton-unit-48: 48;
370
+ --traton-unit-56: 56;
371
+ --traton-unit-64: 64;
372
+ --traton-unit-80: 80;
373
+ --traton-unit-96: 96;
374
+ --traton-unit-120: 120;
375
+ --traton-unit-9999: 9999;
376
+ --traton-color-transparent-950: var(--traton-color-blue-950);
377
+ --traton-color-transparent-inverse-950: var(--traton-color-base-white);
372
378
  }
373
379
 
374
380
  /* Traton color tokens */
@@ -376,263 +382,175 @@
376
382
  * Do not edit directly, this file was auto-generated.
377
383
  */
378
384
  .traton,
379
- .traton .tds-mode-light {
385
+ .traton .tds-mode-light,
386
+ .traton .tl-mode-light {
380
387
  --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
388
  --color-background-layer-01: var(--traton-color-grey-100);
397
389
  --color-background-layer-02: var(--traton-color-grey-50);
398
390
  --color-background-layer-03: var(--traton-color-grey-100);
399
391
  --color-background-overlay: var(--traton-color-transparent-scrim-light);
392
+ --color-background-top: var(--traton-color-grey-50);
393
+ --color-background-none: var(--traton-color-transparent-invisible-light);
400
394
  --color-background-inverse-base: var(--traton-color-grey-1000);
401
395
  --color-background-inverse-layer-01: var(--traton-color-grey-950);
402
396
  --color-background-inverse-layer-02: var(--traton-color-grey-900);
403
397
  --color-background-inverse-layer-03: var(--traton-color-grey-850);
404
- --color-background-inverse-top: var(--traton-color-grey-900);
405
398
  --color-background-inverse-overlay: var(--traton-color-transparent-scrim-light);
406
- --color-background-surface-100: var(--traton-color-grey-150);
407
- --color-background-surface-200: var(--traton-color-grey-200);
408
- --color-background-surface-300: var(--traton-color-grey-300);
409
- --color-background-surface-400: var(--traton-color-grey-400);
410
- --color-background-surface-500: var(--traton-color-grey-500);
411
- --color-background-surface-600: var(--traton-color-grey-600);
412
- --color-background-surface-700: var(--traton-color-grey-700);
413
- --color-background-surface-800: var(--traton-color-grey-800);
414
- --color-background-surface-900: var(--traton-color-grey-900);
415
- --color-background-surface-1000: var(--traton-color-grey-950);
416
- --color-background-top: var(--traton-color-grey-50);
417
- --color-system-warning-default: var(--traton-color-yellow-300);
418
- --color-system-warning-discrete: var(--traton-color-yellow-100);
419
- --color-system-warning-strong: var(--traton-color-yellow-800);
420
- --color-system-warning-defined: var(--traton-color-yellow-600);
421
- --color-system-warning-subtle: var(--traton-color-yellow-200);
422
- --color-system-success-default: var(--traton-color-green-300);
423
- --color-system-success-discrete: var(--traton-color-green-50);
424
- --color-system-success-strong: var(--traton-color-green-850);
425
- --color-system-success-defined: var(--traton-color-green-500);
426
- --color-system-success-subtle: var(--traton-color-green-200);
427
- --color-system-info-default: var(--traton-color-blue-500);
428
- --color-system-info-discrete: var(--traton-color-blue-150);
399
+ --color-background-inverse-top: var(--traton-color-grey-900);
400
+ --color-background-inverse-none: var(--traton-color-transparent-invisible-dark);
401
+ --color-border-defined: var(--traton-color-transparent-700);
402
+ --color-border-soft: var(--traton-color-transparent-600);
403
+ --color-border-subtle: var(--traton-color-transparent-500);
404
+ --color-border-disabled: var(--traton-color-transparent-400);
405
+ --color-border-discrete: var(--traton-color-transparent-200);
406
+ --color-border-none: var(--traton-color-transparent-invisible-light);
407
+ --color-border-inverse-defined: var(--traton-color-transparent-inverse-700);
408
+ --color-border-inverse-soft: var(--traton-color-transparent-inverse-600);
409
+ --color-border-inverse-subtle: var(--traton-color-transparent-inverse-500);
410
+ --color-border-inverse-disabled: var(--traton-color-transparent-inverse-400);
411
+ --color-border-inverse-discrete: var(--traton-color-transparent-inverse-200);
412
+ --color-border-inverse-none: var(--traton-color-transparent-invisible-dark);
413
+ --color-icon-base: var(--traton-color-base-black);
414
+ --color-icon-brand: var(--traton-color-blue-950);
415
+ --color-icon-defined: var(--traton-color-transparent-700);
416
+ --color-icon-soft: var(--traton-color-transparent-600);
417
+ --color-icon-subtle: var(--traton-color-transparent-500);
418
+ --color-icon-disabled: var(--traton-color-transparent-400);
419
+ --color-icon-discrete: var(--traton-color-transparent-200);
420
+ --color-icon-inverse-base: var(--traton-color-base-black);
421
+ --color-icon-inverse-brand: var(--traton-color-blue-950);
422
+ --color-icon-inverse-defined: var(--traton-color-transparent-inverse-700);
423
+ --color-icon-inverse-soft: var(--traton-color-transparent-inverse-600);
424
+ --color-icon-inverse-subtle: var(--traton-color-transparent-inverse-500);
425
+ --color-icon-inverse-disabled: var(--traton-color-transparent-inverse-400);
426
+ --color-icon-inverse-discrete: var(--traton-color-transparent-inverse-200);
429
427
  --color-system-info-strong: var(--traton-color-blue-800);
430
428
  --color-system-info-defined: var(--traton-color-blue-800);
429
+ --color-system-info-default: var(--traton-color-blue-500);
431
430
  --color-system-info-subtle: var(--traton-color-blue-400);
432
- --color-system-danger-default: var(--traton-color-red-300);
433
- --color-system-danger-discrete: var(--traton-color-red-50);
431
+ --color-system-info-discrete: var(--traton-color-blue-150);
432
+ --color-system-success-strong: var(--traton-color-green-850);
433
+ --color-system-success-defined: var(--traton-color-green-500);
434
+ --color-system-success-default: var(--traton-color-green-300);
435
+ --color-system-success-subtle: var(--traton-color-green-200);
436
+ --color-system-success-discrete: var(--traton-color-green-50);
437
+ --color-system-warning-strong: var(--traton-color-yellow-800);
438
+ --color-system-warning-defined: var(--traton-color-yellow-600);
439
+ --color-system-warning-default: var(--traton-color-yellow-300);
440
+ --color-system-warning-subtle: var(--traton-color-yellow-200);
441
+ --color-system-warning-discrete: var(--traton-color-yellow-100);
434
442
  --color-system-danger-strong: var(--traton-color-red-850);
435
443
  --color-system-danger-defined: var(--traton-color-red-500);
444
+ --color-system-danger-default: var(--traton-color-red-300);
436
445
  --color-system-danger-subtle: var(--traton-color-red-200);
437
- --color-foreground-text-accent-default: var(--traton-color-blue-700);
438
- --color-foreground-text-accent-brand: var(--traton-color-blue-950);
439
- --color-foreground-text-accent-brand-inverse: var(--traton-color-blue-700);
440
- --color-foreground-text-accent-visited: var(--traton-color-blue-950);
441
- --color-foreground-text-strong: var(--traton-color-transparent-950);
442
- --color-foreground-text-defined: var(--traton-color-transparent-700);
443
- --color-foreground-text-subtle: var(--traton-color-transparent-500);
444
- --color-foreground-text-inverse-strong: var(--traton-color-transparent-inverse-950);
445
- --color-foreground-text-inverse-soft: var(--traton-color-transparent-inverse-600);
446
- --color-foreground-text-inverse-subtle: var(--traton-color-transparent-inverse-500);
447
- --color-foreground-text-inverse-defined: var(--traton-color-transparent-inverse-700);
448
- --color-foreground-text-inverse-disabled: var(--traton-color-transparent-inverse-400);
449
- --color-foreground-text-inverse-brand: var(--traton-color-base-neutral-white);
450
- --color-foreground-text-brand: var(--traton-color-blue-950);
451
- --color-foreground-text-disabled: var(--traton-color-transparent-400);
452
- --color-foreground-text-soft: var(--traton-color-transparent-600);
453
- --color-foreground-border-inverse-strong: var(--traton-color-transparent-inverse-950);
454
- --color-foreground-border-inverse-soft: var(--traton-color-transparent-inverse-600);
455
- --color-foreground-border-inverse-subtle: var(--traton-color-transparent-inverse-500);
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);
446
+ --color-system-danger-discrete: var(--traton-color-red-50);
447
+ --color-text-base: var(--traton-color-base-black);
448
+ --color-text-brand: var(--traton-color-blue-950);
449
+ --color-text-defined: var(--traton-color-transparent-700);
450
+ --color-text-soft: var(--traton-color-transparent-600);
451
+ --color-text-subtle: var(--traton-color-transparent-500);
452
+ --color-text-disabled: var(--traton-color-transparent-400);
453
+ --color-text-discrete: var(--traton-color-transparent-200);
454
+ --color-text-inverse-brand: var(--traton-color-base-white);
455
+ --color-text-inverse-defined: var(--traton-color-transparent-inverse-700);
456
+ --color-text-inverse-soft: var(--traton-color-transparent-inverse-600);
457
+ --color-text-inverse-subtle: var(--traton-color-transparent-inverse-500);
458
+ --color-text-inverse-disabled: var(--traton-color-transparent-inverse-400);
459
+ --color-text-inverse-discrete: var(--traton-color-transparent-inverse-200);
460
+ --color-border-strong: var(--traton-color-transparent-950);
461
+ --color-border-inverse-strong: var(--traton-color-transparent-inverse-950);
462
+ --color-icon-strong: var(--traton-color-transparent-950);
463
+ --color-icon-inverse-strong: var(--traton-color-transparent-inverse-950);
464
+ --color-text-strong: var(--traton-color-transparent-950);
465
+ --color-text-inverse-base: var(--scania-color-base-white);
466
+ --color-text-inverse-strong: var(--traton-color-transparent-inverse-950);
505
467
  }
506
468
 
507
469
  /**
508
470
  * Do not edit directly, this file was auto-generated.
509
471
  */
510
- .traton .tds-mode-dark {
472
+ .traton .tds-mode-dark,
473
+ .traton .tl-mode-dark {
511
474
  --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
475
  --color-background-layer-01: var(--traton-color-blue-950);
528
476
  --color-background-layer-02: var(--traton-color-blue-900);
529
477
  --color-background-layer-03: var(--traton-color-blue-850);
530
478
  --color-background-overlay: var(--traton-color-transparent-scrim-dark);
479
+ --color-background-top: var(--traton-color-blue-900);
480
+ --color-background-none: var(--traton-color-transparent-invisible-dark);
531
481
  --color-background-inverse-base: var(--traton-color-blue-50);
532
482
  --color-background-inverse-layer-01: var(--traton-color-blue-100);
533
483
  --color-background-inverse-layer-02: var(--traton-color-blue-150);
534
484
  --color-background-inverse-layer-03: var(--traton-color-blue-200);
535
- --color-background-inverse-top: var(--traton-color-blue-50);
536
485
  --color-background-inverse-overlay: var(--traton-color-transparent-scrim-dark);
537
- --color-background-surface-100: var(--traton-color-blue-900);
538
- --color-background-surface-200: var(--traton-color-blue-850);
539
- --color-background-surface-300: var(--traton-color-blue-800);
540
- --color-background-surface-400: var(--traton-color-blue-700);
541
- --color-background-surface-500: var(--traton-color-blue-600);
542
- --color-background-surface-600: var(--traton-color-blue-500);
543
- --color-background-surface-700: var(--traton-color-blue-400);
544
- --color-background-surface-800: var(--traton-color-blue-300);
545
- --color-background-surface-900: var(--traton-color-blue-200);
546
- --color-background-surface-1000: var(--traton-color-blue-150);
547
- --color-background-top: var(--traton-color-blue-900);
548
- --color-system-warning-default: var(--traton-color-yellow-300);
549
- --color-system-warning-discrete: var(--traton-color-yellow-800);
550
- --color-system-warning-strong: var(--traton-color-yellow-100);
551
- --color-system-warning-defined: var(--traton-color-yellow-200);
552
- --color-system-warning-subtle: var(--traton-color-yellow-400);
553
- --color-system-success-default: var(--traton-color-green-300);
554
- --color-system-success-discrete: var(--traton-color-green-850);
486
+ --color-background-inverse-top: var(--traton-color-blue-50);
487
+ --color-background-inverse-none: var(--traton-color-transparent-invisible-light);
488
+ --color-border-defined: var(--traton-color-transparent-inverse-700);
489
+ --color-border-soft: var(--traton-color-transparent-inverse-600);
490
+ --color-border-subtle: var(--traton-color-transparent-inverse-500);
491
+ --color-border-disabled: var(--traton-color-transparent-inverse-400);
492
+ --color-border-discrete: var(--traton-color-transparent-inverse-200);
493
+ --color-border-none: var(--traton-color-transparent-invisible-dark);
494
+ --color-border-inverse-defined: var(--traton-color-transparent-700);
495
+ --color-border-inverse-soft: var(--traton-color-transparent-600);
496
+ --color-border-inverse-subtle: var(--traton-color-transparent-500);
497
+ --color-border-inverse-disabled: var(--traton-color-transparent-400);
498
+ --color-border-inverse-discrete: var(--traton-color-transparent-200);
499
+ --color-border-inverse-none: var(--traton-color-transparent-invisible-light);
500
+ --color-icon-base: var(--traton-color-base-white);
501
+ --color-icon-brand: var(--traton-color-base-white);
502
+ --color-icon-defined: var(--traton-color-transparent-inverse-700);
503
+ --color-icon-soft: var(--traton-color-transparent-inverse-600);
504
+ --color-icon-subtle: var(--traton-color-transparent-inverse-500);
505
+ --color-icon-disabled: var(--traton-color-transparent-inverse-400);
506
+ --color-icon-discrete: var(--traton-color-transparent-inverse-200);
507
+ --color-icon-inverse-base: var(--traton-color-base-white);
508
+ --color-icon-inverse-brand: var(--traton-color-base-white);
509
+ --color-icon-inverse-defined: var(--traton-color-transparent-700);
510
+ --color-icon-inverse-soft: var(--traton-color-transparent-600);
511
+ --color-icon-inverse-subtle: var(--traton-color-transparent-500);
512
+ --color-icon-inverse-disabled: var(--traton-color-transparent-400);
513
+ --color-icon-inverse-discrete: var(--traton-color-transparent-200);
514
+ --color-system-info-strong: var(--traton-color-blue-100);
515
+ --color-system-info-defined: var(--traton-color-blue-200);
516
+ --color-system-info-default: var(--traton-color-blue-500);
517
+ --color-system-info-subtle: var(--traton-color-blue-600);
518
+ --color-system-info-discrete: var(--traton-color-blue-850);
555
519
  --color-system-success-strong: var(--traton-color-green-50);
556
520
  --color-system-success-defined: var(--traton-color-green-200);
521
+ --color-system-success-default: var(--traton-color-green-300);
557
522
  --color-system-success-subtle: var(--traton-color-green-400);
558
- --color-system-info-default: var(--traton-color-blue-500);
559
- --color-system-info-discrete: var(--traton-color-blue-850);
560
- --color-system-info-strong: var(--traton-color-blue-100);
561
- --color-system-info-defined: var(--traton-color-blue-100);
562
- --color-system-info-subtle: var(--traton-color-blue-600);
563
- --color-system-danger-default: var(--traton-color-red-300);
564
- --color-system-danger-discrete: var(--traton-color-red-850);
523
+ --color-system-success-discrete: var(--traton-color-green-850);
524
+ --color-system-warning-strong: var(--traton-color-yellow-100);
525
+ --color-system-warning-defined: var(--traton-color-yellow-200);
526
+ --color-system-warning-default: var(--traton-color-yellow-300);
527
+ --color-system-warning-subtle: var(--traton-color-yellow-400);
528
+ --color-system-warning-discrete: var(--traton-color-yellow-800);
565
529
  --color-system-danger-strong: var(--traton-color-red-50);
566
530
  --color-system-danger-defined: var(--traton-color-red-100);
531
+ --color-system-danger-default: var(--traton-color-red-300);
567
532
  --color-system-danger-subtle: var(--traton-color-red-500);
568
- --color-foreground-text-accent-default: var(--traton-color-blue-400);
569
- --color-foreground-text-accent-brand: var(--traton-color-blue-50);
570
- --color-foreground-text-accent-brand-inverse: var(--traton-color-blue-500);
571
- --color-foreground-text-accent-visited: var(--traton-color-blue-150);
572
- --color-foreground-text-strong: var(--traton-color-transparent-inverse-950);
573
- --color-foreground-text-defined: var(--traton-color-transparent-inverse-700);
574
- --color-foreground-text-subtle: var(--traton-color-transparent-inverse-500);
575
- --color-foreground-text-inverse-strong: var(--traton-color-transparent-950);
576
- --color-foreground-text-inverse-soft: var(--traton-color-transparent-600);
577
- --color-foreground-text-inverse-subtle: var(--traton-color-transparent-500);
578
- --color-foreground-text-inverse-defined: var(--traton-color-transparent-700);
579
- --color-foreground-text-inverse-disabled: var(--traton-color-transparent-400);
580
- --color-foreground-text-inverse-brand: var(--traton-color-transparent-950);
581
- --color-foreground-text-brand: var(--traton-color-base-neutral-white);
582
- --color-foreground-text-disabled: var(--traton-color-transparent-inverse-400);
583
- --color-foreground-text-soft: var(--traton-color-transparent-inverse-600);
584
- --color-foreground-border-inverse-strong: var(--traton-color-transparent-950);
585
- --color-foreground-border-inverse-soft: var(--traton-color-transparent-600);
586
- --color-foreground-border-inverse-subtle: var(--traton-color-transparent-500);
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);
533
+ --color-system-danger-discrete: var(--traton-color-red-850);
534
+ --color-text-base: var(--traton-color-base-white);
535
+ --color-text-brand: var(--traton-color-base-white);
536
+ --color-text-defined: var(--traton-color-transparent-inverse-700);
537
+ --color-text-soft: var(--traton-color-transparent-inverse-600);
538
+ --color-text-subtle: var(--traton-color-transparent-inverse-500);
539
+ --color-text-disabled: var(--traton-color-transparent-inverse-400);
540
+ --color-text-discrete: var(--traton-color-transparent-inverse-200);
541
+ --color-text-inverse-base: var(--traton-color-base-black);
542
+ --color-text-inverse-defined: var(--traton-color-transparent-700);
543
+ --color-text-inverse-soft: var(--traton-color-transparent-600);
544
+ --color-text-inverse-subtle: var(--traton-color-transparent-500);
545
+ --color-text-inverse-disabled: var(--traton-color-transparent-400);
546
+ --color-text-inverse-discrete: var(--traton-color-transparent-200);
547
+ --color-border-strong: var(--traton-color-transparent-inverse-950);
548
+ --color-border-inverse-strong: var(--traton-color-transparent-950);
549
+ --color-icon-strong: var(--traton-color-transparent-inverse-950);
550
+ --color-icon-inverse-strong: var(--traton-color-transparent-950);
551
+ --color-text-strong: var(--traton-color-transparent-inverse-950);
552
+ --color-text-inverse-brand: var(--traton-color-transparent-950);
553
+ --color-text-inverse-strong: var(--traton-color-transparent-950);
636
554
  }
637
555
 
638
556
  /* Traton logotype tokens */
@@ -656,21 +574,21 @@
656
574
  * Do not edit directly, this file was auto-generated.
657
575
  */
658
576
  .traton {
659
- --dimension-space-tiny: var(--traton-unit-4);
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);
577
+ --dimension-radius-focus-width: var(--traton-unit-4);
667
578
  --dimension-radius-narrow: var(--traton-unit-4);
668
579
  --dimension-radius-soft: var(--traton-unit-8);
669
580
  --dimension-radius-rounded: var(--traton-unit-32);
670
581
  --dimension-radius-circle: var(--traton-unit-9999);
582
+ --dimension-radius-for-surface-clickable: var(--traton-unit-9999);
583
+ --dimension-radius-for-surface-field: var(--traton-unit-2);
584
+ --dimension-radius-for-surface-inverse: var(--traton-unit-2);
671
585
  --dimension-radius-for-area-large: var(--traton-unit-8);
672
586
  --dimension-radius-for-area-small: var(--traton-unit-4);
673
- --dimension-radius-focus-width: var(--traton-unit-4);
587
+ --dimension-space-tiny: var(--traton-unit-4);
588
+ --dimension-space-small: var(--traton-unit-16);
589
+ --dimension-space-medium: var(--traton-unit-24);
590
+ --dimension-space-large: var(--traton-unit-48);
591
+ --dimension-space-huge: var(--traton-unit-80);
674
592
  }
675
593
 
676
594
  /* Traton typography tokens */
@@ -678,150 +596,132 @@
678
596
  * Do not edit directly, this file was auto-generated.
679
597
  */
680
598
  .traton {
681
- --text-display-01-text-transform: uppercase;
682
- --text-display-01-letter-spacing: 1.08px;
683
- --text-display-01-font-size: 216px;
684
- --text-display-01-line-height: 227px;
685
- --text-display-02-text-transform: uppercase;
686
- --text-display-02-font-size: 156px;
687
- --text-display-02-line-height: 164px;
688
- --text-display-02-letter-spacing: 0.78px;
689
- --text-display-03-text-transform: uppercase;
690
- --text-display-03-font-size: 112px;
691
- --text-display-03-line-height: 118px;
692
- --text-display-03-letter-spacing: 0.56px;
693
- --text-display-04-text-transform: uppercase;
694
- --text-display-04-font-size: 80px;
695
- --text-display-04-line-height: 84px;
696
- --text-display-04-letter-spacing: 0.4px;
697
- --text-display-05-text-transform: uppercase;
698
- --text-display-05-font-size: 56px;
699
- --text-display-05-line-height: 59px;
700
- --text-display-05-letter-spacing: 0.28px;
701
- --text-headline-01-text-transform: none;
702
- --text-headline-01-font-size: 40px;
703
- --text-headline-01-line-height: 42px;
704
- --text-headline-01-letter-spacing: 0;
705
- --text-headline-02-text-transform: none;
706
- --text-headline-02-font-size: 32px;
707
- --text-headline-02-line-height: 40px;
708
- --text-headline-02-letter-spacing: 0;
709
- --text-headline-03-text-transform: none;
710
- --text-headline-03-font-size: 24px;
711
- --text-headline-03-line-height: 30px;
712
- --text-headline-03-letter-spacing: 0;
713
- --text-headline-04-text-transform: none;
714
- --text-headline-04-font-size: 20px;
715
- --text-headline-04-line-height: 25px;
716
- --text-headline-04-letter-spacing: 0;
717
- --text-headline-05-text-transform: none;
718
- --text-headline-05-font-size: 16px;
719
- --text-headline-05-line-height: 22px;
720
- --text-headline-05-letter-spacing: 0;
721
- --text-headline-06-text-transform: none;
722
- --text-headline-06-font-size: 14px;
723
- --text-headline-06-line-height: 20px;
724
- --text-headline-06-letter-spacing: 0;
725
- --text-paragraph-01-text-transform: none;
726
- --text-paragraph-01-font-size: 24px;
727
- --text-paragraph-01-line-height: 30px;
728
- --text-paragraph-01-letter-spacing: 0;
729
- --text-paragraph-02-text-transform: none;
730
- --text-paragraph-02-font-size: 20px;
731
- --text-paragraph-02-line-height: 25px;
732
- --text-paragraph-02-letter-spacing: 0;
733
- --text-body-01-text-transform: none;
734
- --text-body-01-font-size: 16px;
735
- --text-body-01-line-height: 22px;
736
- --text-body-01-letter-spacing: 0;
737
- --text-body-02-text-transform: none;
738
- --text-body-02-font-size: 14px;
739
- --text-body-02-line-height: 20px;
740
- --text-body-02-letter-spacing: 0;
741
- --text-component-text-01-text-transform: none;
742
- --text-component-text-01-font-size: 14px;
743
- --text-component-text-01-line-height: 16px;
744
- --text-component-text-01-letter-spacing: 0;
745
- --text-component-text-02-text-transform: none;
746
- --text-component-text-02-font-size: 14px;
747
- --text-component-text-02-line-height: 20px;
748
- --text-component-text-02-letter-spacing: 0;
749
- --text-component-label-01-text-transform: none;
750
- --text-component-label-01-font-size: 12px;
751
- --text-component-label-01-line-height: 17px;
752
- --text-component-label-01-letter-spacing: 0;
753
- --text-component-label-02-transform: none;
754
- --text-component-label-02-font-size: 10px;
755
- --text-component-label-02-line-height: 14px;
756
- --text-component-label-02-letter-spacing: 0;
757
- --text-component-title-01-text-transform: none;
758
- --text-component-title-01-text-transform-2: none;
759
- --text-component-title-01-font-size: 14px;
760
- --text-component-title-01-line-height: 18px;
761
- --text-component-title-01-letter-spacing: 0;
762
- --text-component-title-01-letter-spacing-2: 0;
763
- --text-component-title-01-font-size-2: 14px;
764
- --text-component-title-01-line-height-2: 18px;
765
- --text-component-title-02-text-transform: none;
766
- --text-component-title-02-font-size: 10px;
767
- --text-component-title-02-line-height: 14px;
768
- --text-component-title-02-letter-spacing: 0.4px;
769
- --text-link-01-text-transform: none;
770
- --text-link-01-font-size: 16px;
771
- --text-link-01-line-height: 22px;
772
- --text-link-01-letter-spacing: 0;
773
- --text-link-02-text-transform: none;
774
- --text-link-02-font-size: 14px;
775
- --text-link-02-line-height: 20px;
776
- --text-link-02-letter-spacing: 0;
777
- --text-display-01-font-family: var(--traton-font-family-display);
778
- --text-display-01-font-weight: var(--traton-font-weight-medium);
779
- --text-display-02-font-family: var(--traton-font-family-display);
780
- --text-display-02-font-weight: var(--traton-font-weight-medium);
781
- --text-display-03-font-family: var(--traton-font-family-display);
782
- --text-display-03-font-weight: var(--traton-font-weight-medium);
783
- --text-display-04-font-family: var(--traton-font-family-display);
784
- --text-display-04-font-weight: var(--traton-font-weight-medium);
785
- --text-display-05-font-family: var(--traton-font-family-display);
786
- --text-display-05-font-weight: var(--traton-font-weight-medium);
787
- --text-headline-01-font-family: var(--traton-font-family-display);
788
- --text-headline-01-font-weight: var(--traton-font-weight-medium);
789
- --text-headline-02-font-family: var(--traton-font-family-display);
790
- --text-headline-02-font-weight: var(--traton-font-weight-medium);
791
- --text-headline-03-font-family: var(--traton-font-family-display);
792
- --text-headline-03-font-weight: var(--traton-font-weight-medium);
793
- --text-headline-04-font-family: var(--traton-font-family-display);
794
- --text-headline-04-font-weight: var(--traton-font-weight-medium);
795
- --text-headline-05-font-family: var(--traton-font-family-default);
796
- --text-headline-05-font-weight: var(--traton-font-weight-semi-bold);
797
- --text-headline-06-font-family: var(--traton-font-family-default);
798
- --text-headline-06-font-weight: var(--traton-font-weight-semi-bold);
799
- --text-paragraph-01-font-family: var(--traton-font-family-display);
800
- --text-paragraph-01-font-weight: var(--traton-font-weight-medium);
801
- --text-paragraph-02-font-family: var(--traton-font-family-display);
802
- --text-paragraph-02-font-weight: var(--traton-font-weight-medium);
803
- --text-body-01-font-family: var(--traton-font-family-default);
804
- --text-body-01-font-weight: var(--traton-font-weight-regular);
805
- --text-body-02-font-family: var(--traton-font-family-default);
806
- --text-body-02-font-weight: var(--traton-font-weight-regular);
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);
599
+ --type-display-01-font-size: 216;
600
+ --type-display-01-line-height: 227;
601
+ --type-display-01-letter-spacing: 1.08;
602
+ --type-display-01-text-transform: uppercase;
603
+ --type-display-02-font-size: 156;
604
+ --type-display-02-line-height: 164;
605
+ --type-display-02-letter-spacing: 0.78;
606
+ --type-display-02-text-transform: uppercase;
607
+ --type-display-03-font-size: 112;
608
+ --type-display-03-line-height: 118;
609
+ --type-display-03-letter-spacing: 0.56;
610
+ --type-display-03-text-transform: uppercase;
611
+ --type-display-04-font-size: 80;
612
+ --type-display-04-line-height: 84;
613
+ --type-display-04-letter-spacing: 0.4;
614
+ --type-display-04-text-transform: uppercase;
615
+ --type-display-05-font-size: 56;
616
+ --type-display-05-line-height: 59;
617
+ --type-display-05-letter-spacing: 0.28;
618
+ --type-display-05-text-transform: uppercase;
619
+ --type-headline-01-font-size: 40;
620
+ --type-headline-01-line-height: 42;
621
+ --type-headline-01-letter-spacing: 0;
622
+ --type-headline-01-text-transform: none;
623
+ --type-headline-02-font-size: 32;
624
+ --type-headline-02-line-height: 40;
625
+ --type-headline-02-letter-spacing: 0;
626
+ --type-headline-02-text-transform: none;
627
+ --type-headline-03-font-size: 24;
628
+ --type-headline-03-line-height: 30;
629
+ --type-headline-03-letter-spacing: 0;
630
+ --type-headline-03-text-transform: none;
631
+ --type-headline-04-font-size: 20;
632
+ --type-headline-04-line-height: 25;
633
+ --type-headline-04-letter-spacing: 0;
634
+ --type-headline-04-text-transform: none;
635
+ --type-headline-05-font-size: 16;
636
+ --type-headline-05-line-height: 22;
637
+ --type-headline-05-letter-spacing: 0;
638
+ --type-headline-05-text-transform: none;
639
+ --type-headline-06-font-size: 14;
640
+ --type-headline-06-line-height: 20;
641
+ --type-headline-06-letter-spacing: 0;
642
+ --type-headline-06-text-transform: none;
643
+ --type-paragraph-01-font-size: 24;
644
+ --type-paragraph-01-line-height: 30;
645
+ --type-paragraph-01-letter-spacing: 0;
646
+ --type-paragraph-01-text-transform: none;
647
+ --type-paragraph-02-font-size: 20;
648
+ --type-paragraph-02-line-height: 25;
649
+ --type-paragraph-02-letter-spacing: 0;
650
+ --type-paragraph-02-text-transform: none;
651
+ --type-body-01-font-size: 16;
652
+ --type-body-01-line-height: 22;
653
+ --type-body-01-letter-spacing: 0;
654
+ --type-body-01-text-transform: none;
655
+ --type-body-02-font-size: 14;
656
+ --type-body-02-line-height: 20;
657
+ --type-body-02-letter-spacing: 0;
658
+ --type-body-02-text-transform: none;
659
+ --type-system-title-01-font-size: 14;
660
+ --type-system-title-01-line-height: 18;
661
+ --type-system-title-01-letter-spacing: 0;
662
+ --type-system-title-01-text-transform: none;
663
+ --type-system-title-02-font-size: 10;
664
+ --type-system-title-02-line-height: 14;
665
+ --type-system-title-02-letter-spacing: 0.4;
666
+ --type-system-title-02-text-transform: none;
667
+ --type-system-label-01-font-size: 12;
668
+ --type-system-label-01-line-height: 17;
669
+ --type-system-label-01-letter-spacing: 0;
670
+ --type-system-label-01-text-transform: none;
671
+ --type-system-label-02-font-size: 10;
672
+ --type-system-label-02-line-height: 14;
673
+ --type-system-label-02-letter-spacing: 0;
674
+ --type-system-label-02-text-transform: none;
675
+ --type-system-body-01-font-size: 14;
676
+ --type-system-body-01-line-height: 16;
677
+ --type-system-body-01-letter-spacing: 0;
678
+ --type-system-body-01-text-transform: none;
679
+ --type-system-body-02-font-size: 14;
680
+ --type-system-body-02-line-height: 20;
681
+ --type-system-body-02-letter-spacing: 0;
682
+ --type-system-body-02-text-transform: none;
683
+ --type-display-01-font-family: var(--traton-font-family-display);
684
+ --type-display-01-font-weight: var(--traton-font-weight-medium);
685
+ --type-display-02-font-family: var(--traton-font-family-display);
686
+ --type-display-02-font-weight: var(--traton-font-weight-medium);
687
+ --type-display-03-font-family: var(--traton-font-family-display);
688
+ --type-display-03-font-weight: var(--traton-font-weight-medium);
689
+ --type-display-04-font-family: var(--traton-font-family-display);
690
+ --type-display-04-font-weight: var(--traton-font-weight-medium);
691
+ --type-display-05-font-family: var(--traton-font-family-display);
692
+ --type-display-05-font-weight: var(--traton-font-weight-medium);
693
+ --type-headline-01-font-family: var(--traton-font-family-display);
694
+ --type-headline-01-font-weight: var(--traton-font-weight-medium);
695
+ --type-headline-02-font-family: var(--traton-font-family-display);
696
+ --type-headline-02-font-weight: var(--traton-font-weight-medium);
697
+ --type-headline-03-font-family: var(--traton-font-family-display);
698
+ --type-headline-03-font-weight: var(--traton-font-weight-medium);
699
+ --type-headline-04-font-family: var(--traton-font-family-display);
700
+ --type-headline-04-font-weight: var(--traton-font-weight-medium);
701
+ --type-headline-05-font-family: var(--traton-font-family-default);
702
+ --type-headline-05-font-weight: var(--traton-font-weight-semi-bold);
703
+ --type-headline-06-font-family: var(--traton-font-family-default);
704
+ --type-headline-06-font-weight: var(--traton-font-weight-semi-bold);
705
+ --type-paragraph-01-font-family: var(--traton-font-family-display);
706
+ --type-paragraph-01-font-weight: var(--traton-font-weight-medium);
707
+ --type-paragraph-02-font-family: var(--traton-font-family-display);
708
+ --type-paragraph-02-font-weight: var(--traton-font-weight-medium);
709
+ --type-body-01-font-family: var(--traton-font-family-default);
710
+ --type-body-01-font-weight: var(--traton-font-weight-regular);
711
+ --type-body-02-font-family: var(--traton-font-family-default);
712
+ --type-body-02-font-weight: var(--traton-font-weight-regular);
713
+ --type-system-title-01-font-family: var(--traton-font-family-default);
714
+ --type-system-title-01-font-weight: var(--traton-font-weight-semi-bold);
715
+ --type-system-title-02-font-family: var(--traton-font-family-default);
716
+ --type-system-title-02-font-weight: var(--traton-font-weight-semi-bold);
717
+ --type-system-label-01-font-family: var(--traton-font-family-default);
718
+ --type-system-label-01-font-weight: var(--traton-font-weight-medium);
719
+ --type-system-label-02-font-family: var(--traton-font-family-default);
720
+ --type-system-label-02-font-weight: var(--traton-font-weight-medium);
721
+ --type-system-body-01-font-family: var(--traton-font-family-default);
722
+ --type-system-body-01-font-weight: var(--traton-font-weight-regular);
723
+ --type-system-body-02-font-family: var(--traton-font-family-default);
724
+ --type-system-body-02-font-weight: var(--traton-font-weight-regular);
825
725
  }
826
726
 
827
727
  /* Spacing */
@@ -837,29 +737,119 @@
837
737
  --traton-icon-arrow_left-svg: url(./assets/icons/traton/arrow_left.svg);
838
738
  --traton-icon-arrow_right-svg: url(./assets/icons/traton/arrow_right.svg);
839
739
  --traton-icon-arrow_up-svg: url(./assets/icons/traton/arrow_up.svg);
740
+ --traton-icon-back-svg: url(./assets/icons/traton/back.svg);
840
741
  --traton-icon-bento-svg: url(./assets/icons/traton/bento.svg);
841
742
  --traton-icon-burger-svg: url(./assets/icons/traton/burger.svg);
743
+ --traton-icon-calendar_inactive-svg: url(./assets/icons/traton/calendar_inactive.svg);
842
744
  --traton-icon-calendar-svg: url(./assets/icons/traton/calendar.svg);
745
+ --traton-icon-card-svg: url(./assets/icons/traton/card.svg);
746
+ --traton-icon-cart-svg: url(./assets/icons/traton/cart.svg);
843
747
  --traton-icon-chevron_down-svg: url(./assets/icons/traton/chevron_down.svg);
844
748
  --traton-icon-chevron_left-svg: url(./assets/icons/traton/chevron_left.svg);
845
749
  --traton-icon-chevron_right-svg: url(./assets/icons/traton/chevron_right.svg);
846
750
  --traton-icon-chevron_up-svg: url(./assets/icons/traton/chevron_up.svg);
751
+ --traton-icon-clock_inactive-svg: url(./assets/icons/traton/clock_inactive.svg);
752
+ --traton-icon-clock-svg: url(./assets/icons/traton/clock.svg);
753
+ --traton-icon-contact_inactive-svg: url(./assets/icons/traton/contact_inactive.svg);
754
+ --traton-icon-contact-svg: url(./assets/icons/traton/contact.svg);
755
+ --traton-icon-copy-svg: url(./assets/icons/traton/copy.svg);
847
756
  --traton-icon-cross-svg: url(./assets/icons/traton/cross.svg);
757
+ --traton-icon-document_check-svg: url(./assets/icons/traton/document_check.svg);
758
+ --traton-icon-document_doc-svg: url(./assets/icons/traton/document_doc.svg);
759
+ --traton-icon-document_eye-svg: url(./assets/icons/traton/document_eye.svg);
760
+ --traton-icon-document_pdf-svg: url(./assets/icons/traton/document_pdf.svg);
761
+ --traton-icon-document_tool-svg: url(./assets/icons/traton/document_tool.svg);
762
+ --traton-icon-document_word-svg: url(./assets/icons/traton/document_word.svg);
763
+ --traton-icon-document_wrong-svg: url(./assets/icons/traton/document_wrong.svg);
764
+ --traton-icon-document_xls-svg: url(./assets/icons/traton/document_xls.svg);
765
+ --traton-icon-document-svg: url(./assets/icons/traton/document.svg);
766
+ --traton-icon-dollar-svg: url(./assets/icons/traton/dollar.svg);
767
+ --traton-icon-doner-svg: url(./assets/icons/traton/doner.svg);
768
+ --traton-icon-double_kebab-svg: url(./assets/icons/traton/double_kebab.svg);
769
+ --traton-icon-download-svg: url(./assets/icons/traton/download.svg);
770
+ --traton-icon-edit_inactive-svg: url(./assets/icons/traton/edit_inactive.svg);
848
771
  --traton-icon-edit-svg: url(./assets/icons/traton/edit.svg);
772
+ --traton-icon-email-svg: url(./assets/icons/traton/email.svg);
849
773
  --traton-icon-error-svg: url(./assets/icons/traton/error.svg);
774
+ --traton-icon-export_inactive-svg: url(./assets/icons/traton/export_inactive.svg);
775
+ --traton-icon-export-svg: url(./assets/icons/traton/export.svg);
776
+ --traton-icon-eye_inactive-svg: url(./assets/icons/traton/eye_inactive.svg);
777
+ --traton-icon-eye-svg: url(./assets/icons/traton/eye.svg);
778
+ --traton-icon-face_dissatisfied-svg: url(./assets/icons/traton/face_dissatisfied.svg);
779
+ --traton-icon-face_neutral-svg: url(./assets/icons/traton/face_neutral.svg);
780
+ --traton-icon-face_satisfied-svg: url(./assets/icons/traton/face_satisfied.svg);
781
+ --traton-icon-filters_inactive-svg: url(./assets/icons/traton/filters_inactive.svg);
782
+ --traton-icon-filters-svg: url(./assets/icons/traton/filters.svg);
783
+ --traton-icon-folder-svg: url(./assets/icons/traton/folder.svg);
784
+ --traton-icon-fuel_gauge_inactive-svg: url(./assets/icons/traton/fuel_gauge_inactive.svg);
785
+ --traton-icon-fuel_gauge-svg: url(./assets/icons/traton/fuel_gauge.svg);
786
+ --traton-icon-global-svg: url(./assets/icons/traton/global.svg);
787
+ --traton-icon-heart_inactive-svg: url(./assets/icons/traton/heart_inactive.svg);
788
+ --traton-icon-heart-svg: url(./assets/icons/traton/heart.svg);
789
+ --traton-icon-home_inactive-svg: url(./assets/icons/traton/home_inactive.svg);
790
+ --traton-icon-home-svg: url(./assets/icons/traton/home.svg);
791
+ --traton-icon-image_add-svg: url(./assets/icons/traton/image_add.svg);
792
+ --traton-icon-image_inactive-svg: url(./assets/icons/traton/image_inactive.svg);
793
+ --traton-icon-image_set-svg: url(./assets/icons/traton/image_set.svg);
794
+ --traton-icon-image-svg: url(./assets/icons/traton/image.svg);
850
795
  --traton-icon-info-svg: url(./assets/icons/traton/info.svg);
796
+ --traton-icon-kebab-svg: url(./assets/icons/traton/kebab.svg);
797
+ --traton-icon-link_broken-svg: url(./assets/icons/traton/link_broken.svg);
798
+ --traton-icon-link-svg: url(./assets/icons/traton/link.svg);
799
+ --traton-icon-lock-svg: url(./assets/icons/traton/lock.svg);
800
+ --traton-icon-meatballs-svg: url(./assets/icons/traton/meatballs.svg);
801
+ --traton-icon-message_inactive-svg: url(./assets/icons/traton/message_inactive.svg);
802
+ --traton-icon-message-svg: url(./assets/icons/traton/message.svg);
803
+ --traton-icon-mileage_inactive-svg: url(./assets/icons/traton/mileage_inactive.svg);
804
+ --traton-icon-mileage-svg: url(./assets/icons/traton/mileage.svg);
851
805
  --traton-icon-minus-svg: url(./assets/icons/traton/minus.svg);
806
+ --traton-icon-notification_inactive-svg: url(./assets/icons/traton/notification_inactive.svg);
852
807
  --traton-icon-notification-svg: url(./assets/icons/traton/notification.svg);
808
+ --traton-icon-phone_inactive-svg: url(./assets/icons/traton/phone_inactive.svg);
809
+ --traton-icon-phone-svg: url(./assets/icons/traton/phone.svg);
810
+ --traton-icon-pin_inactive-svg: url(./assets/icons/traton/pin_inactive.svg);
811
+ --traton-icon-pin-svg: url(./assets/icons/traton/pin.svg);
812
+ --traton-icon-placeholder-svg: url(./assets/icons/traton/placeholder.svg);
853
813
  --traton-icon-plus-svg: url(./assets/icons/traton/plus.svg);
814
+ --traton-icon-print_inactive-svg: url(./assets/icons/traton/print_inactive.svg);
854
815
  --traton-icon-print-svg: url(./assets/icons/traton/print.svg);
816
+ --traton-icon-profile_inactive-svg: url(./assets/icons/traton/profile_inactive.svg);
817
+ --traton-icon-profile-svg: url(./assets/icons/traton/profile.svg);
818
+ --traton-icon-proportions_inactive-svg: url(./assets/icons/traton/proportions_inactive.svg);
819
+ --traton-icon-proportions-svg: url(./assets/icons/traton/proportions.svg);
820
+ --traton-icon-redirect-svg: url(./assets/icons/traton/redirect.svg);
855
821
  --traton-icon-refresh-svg: url(./assets/icons/traton/refresh.svg);
822
+ --traton-icon-report_inactive-svg: url(./assets/icons/traton/report_inactive.svg);
823
+ --traton-icon-report-svg: url(./assets/icons/traton/report.svg);
824
+ --traton-icon-save_inactive-svg: url(./assets/icons/traton/save_inactive.svg);
825
+ --traton-icon-save-svg: url(./assets/icons/traton/save.svg);
856
826
  --traton-icon-search-svg: url(./assets/icons/traton/search.svg);
827
+ --traton-icon-send_inactive-svg: url(./assets/icons/traton/send_inactive.svg);
828
+ --traton-icon-send-svg: url(./assets/icons/traton/send.svg);
829
+ --traton-icon-settings-svg: url(./assets/icons/traton/settings.svg);
857
830
  --traton-icon-share-svg: url(./assets/icons/traton/share.svg);
831
+ --traton-icon-skip_backwards-svg: url(./assets/icons/traton/skip_backwards.svg);
832
+ --traton-icon-skip_forward-svg: url(./assets/icons/traton/skip_forward.svg);
833
+ --traton-icon-smartphone_inactive-svg: url(./assets/icons/traton/smartphone_inactive.svg);
834
+ --traton-icon-smartphone-svg: url(./assets/icons/traton/smartphone.svg);
858
835
  --traton-icon-sorting-svg: url(./assets/icons/traton/sorting.svg);
836
+ --traton-icon-speedometer_inactive-svg: url(./assets/icons/traton/speedometer_inactive.svg);
837
+ --traton-icon-speedometer-svg: url(./assets/icons/traton/speedometer.svg);
859
838
  --traton-icon-star-svg: url(./assets/icons/traton/star.svg);
839
+ --traton-icon-support-svg: url(./assets/icons/traton/support.svg);
860
840
  --traton-icon-tick-svg: url(./assets/icons/traton/tick.svg);
841
+ --traton-icon-timer-svg: url(./assets/icons/traton/timer.svg);
842
+ --traton-icon-tool_inactive-svg: url(./assets/icons/traton/tool_inactive.svg);
843
+ --traton-icon-tool-svg: url(./assets/icons/traton/tool.svg);
844
+ --traton-icon-trash_inactive-svg: url(./assets/icons/traton/trash_inactive.svg);
845
+ --traton-icon-trash-svg: url(./assets/icons/traton/trash.svg);
861
846
  --traton-icon-truck-svg: url(./assets/icons/traton/truck.svg);
847
+ --traton-icon-unlock-svg: url(./assets/icons/traton/unlock.svg);
848
+ --traton-icon-upload-svg: url(./assets/icons/traton/upload.svg);
849
+ --traton-icon-wallet-svg: url(./assets/icons/traton/wallet.svg);
862
850
  --traton-icon-warning-svg: url(./assets/icons/traton/warning.svg);
851
+ --traton-icon-wifi_inactive-svg: url(./assets/icons/traton/wifi_inactive.svg);
852
+ --traton-icon-wifi-svg: url(./assets/icons/traton/wifi.svg);
863
853
  }
864
854
 
865
855
  /* Traton icon tokens */
@@ -872,27 +862,272 @@
872
862
  --icon-arrow_left-svg: var(--traton-icon-arrow_left-svg);
873
863
  --icon-arrow_right-svg: var(--traton-icon-arrow_right-svg);
874
864
  --icon-arrow_up-svg: var(--traton-icon-arrow_up-svg);
865
+ --icon-back-svg: var(--traton-icon-back-svg);
875
866
  --icon-bento-svg: var(--traton-icon-bento-svg);
876
867
  --icon-burger-svg: var(--traton-icon-burger-svg);
868
+ --icon-calendar_inactive-svg: var(--traton-icon-calendar_inactive-svg);
877
869
  --icon-calendar-svg: var(--traton-icon-calendar-svg);
870
+ --icon-card-svg: var(--traton-icon-card-svg);
871
+ --icon-cart-svg: var(--traton-icon-cart-svg);
878
872
  --icon-chevron_down-svg: var(--traton-icon-chevron_down-svg);
879
873
  --icon-chevron_left-svg: var(--traton-icon-chevron_left-svg);
880
874
  --icon-chevron_right-svg: var(--traton-icon-chevron_right-svg);
881
875
  --icon-chevron_up-svg: var(--traton-icon-chevron_up-svg);
876
+ --icon-clock_inactive-svg: var(--traton-icon-clock_inactive-svg);
877
+ --icon-clock-svg: var(--traton-icon-clock-svg);
878
+ --icon-contact_inactive-svg: var(--traton-icon-contact_inactive-svg);
879
+ --icon-contact-svg: var(--traton-icon-contact-svg);
880
+ --icon-copy-svg: var(--traton-icon-copy-svg);
882
881
  --icon-cross-svg: var(--traton-icon-cross-svg);
882
+ --icon-document_check-svg: var(--traton-icon-document_check-svg);
883
+ --icon-document_doc-svg: var(--traton-icon-document_doc-svg);
884
+ --icon-document_eye-svg: var(--traton-icon-document_eye-svg);
885
+ --icon-document_pdf-svg: var(--traton-icon-document_pdf-svg);
886
+ --icon-document_tool-svg: var(--traton-icon-document_tool-svg);
887
+ --icon-document_word-svg: var(--traton-icon-document_word-svg);
888
+ --icon-document_wrong-svg: var(--traton-icon-document_wrong-svg);
889
+ --icon-document_xls-svg: var(--traton-icon-document_xls-svg);
890
+ --icon-document-svg: var(--traton-icon-document-svg);
891
+ --icon-dollar-svg: var(--traton-icon-dollar-svg);
892
+ --icon-doner-svg: var(--traton-icon-doner-svg);
893
+ --icon-double_kebab-svg: var(--traton-icon-double_kebab-svg);
894
+ --icon-download-svg: var(--traton-icon-download-svg);
895
+ --icon-edit_inactive-svg: var(--traton-icon-edit_inactive-svg);
883
896
  --icon-edit-svg: var(--traton-icon-edit-svg);
897
+ --icon-email-svg: var(--traton-icon-email-svg);
884
898
  --icon-error-svg: var(--traton-icon-error-svg);
899
+ --icon-export_inactive-svg: var(--traton-icon-export_inactive-svg);
900
+ --icon-export-svg: var(--traton-icon-export-svg);
901
+ --icon-eye_inactive-svg: var(--traton-icon-eye_inactive-svg);
902
+ --icon-eye-svg: var(--traton-icon-eye-svg);
903
+ --icon-face_dissatisfied-svg: var(--traton-icon-face_dissatisfied-svg);
904
+ --icon-face_neutral-svg: var(--traton-icon-face_neutral-svg);
905
+ --icon-face_satisfied-svg: var(--traton-icon-face_satisfied-svg);
906
+ --icon-filters_inactive-svg: var(--traton-icon-filters_inactive-svg);
907
+ --icon-filters-svg: var(--traton-icon-filters-svg);
908
+ --icon-folder-svg: var(--traton-icon-folder-svg);
909
+ --icon-fuel_gauge_inactive-svg: var(--traton-icon-fuel_gauge_inactive-svg);
910
+ --icon-fuel_gauge-svg: var(--traton-icon-fuel_gauge-svg);
911
+ --icon-global-svg: var(--traton-icon-global-svg);
912
+ --icon-heart_inactive-svg: var(--traton-icon-heart_inactive-svg);
913
+ --icon-heart-svg: var(--traton-icon-heart-svg);
914
+ --icon-home_inactive-svg: var(--traton-icon-home_inactive-svg);
915
+ --icon-home-svg: var(--traton-icon-home-svg);
916
+ --icon-image_add-svg: var(--traton-icon-image_add-svg);
917
+ --icon-image_inactive-svg: var(--traton-icon-image_inactive-svg);
918
+ --icon-image_set-svg: var(--traton-icon-image_set-svg);
919
+ --icon-image-svg: var(--traton-icon-image-svg);
885
920
  --icon-info-svg: var(--traton-icon-info-svg);
921
+ --icon-kebab-svg: var(--traton-icon-kebab-svg);
922
+ --icon-link_broken-svg: var(--traton-icon-link_broken-svg);
923
+ --icon-link-svg: var(--traton-icon-link-svg);
924
+ --icon-lock-svg: var(--traton-icon-lock-svg);
925
+ --icon-meatballs-svg: var(--traton-icon-meatballs-svg);
926
+ --icon-message_inactive-svg: var(--traton-icon-message_inactive-svg);
927
+ --icon-message-svg: var(--traton-icon-message-svg);
928
+ --icon-mileage_inactive-svg: var(--traton-icon-mileage_inactive-svg);
929
+ --icon-mileage-svg: var(--traton-icon-mileage-svg);
886
930
  --icon-minus-svg: var(--traton-icon-minus-svg);
931
+ --icon-notification_inactive-svg: var(--traton-icon-notification_inactive-svg);
887
932
  --icon-notification-svg: var(--traton-icon-notification-svg);
933
+ --icon-phone_inactive-svg: var(--traton-icon-phone_inactive-svg);
934
+ --icon-phone-svg: var(--traton-icon-phone-svg);
935
+ --icon-pin_inactive-svg: var(--traton-icon-pin_inactive-svg);
936
+ --icon-pin-svg: var(--traton-icon-pin-svg);
937
+ --icon-placeholder-svg: var(--traton-icon-placeholder-svg);
888
938
  --icon-plus-svg: var(--traton-icon-plus-svg);
939
+ --icon-print_inactive-svg: var(--traton-icon-print_inactive-svg);
889
940
  --icon-print-svg: var(--traton-icon-print-svg);
941
+ --icon-profile_inactive-svg: var(--traton-icon-profile_inactive-svg);
942
+ --icon-profile-svg: var(--traton-icon-profile-svg);
943
+ --icon-proportions_inactive-svg: var(--traton-icon-proportions_inactive-svg);
944
+ --icon-proportions-svg: var(--traton-icon-proportions-svg);
945
+ --icon-redirect-svg: var(--traton-icon-redirect-svg);
890
946
  --icon-refresh-svg: var(--traton-icon-refresh-svg);
947
+ --icon-report_inactive-svg: var(--traton-icon-report_inactive-svg);
948
+ --icon-report-svg: var(--traton-icon-report-svg);
949
+ --icon-save_inactive-svg: var(--traton-icon-save_inactive-svg);
950
+ --icon-save-svg: var(--traton-icon-save-svg);
891
951
  --icon-search-svg: var(--traton-icon-search-svg);
952
+ --icon-send_inactive-svg: var(--traton-icon-send_inactive-svg);
953
+ --icon-send-svg: var(--traton-icon-send-svg);
954
+ --icon-settings-svg: var(--traton-icon-settings-svg);
892
955
  --icon-share-svg: var(--traton-icon-share-svg);
956
+ --icon-skip_backwards-svg: var(--traton-icon-skip_backwards-svg);
957
+ --icon-skip_forward-svg: var(--traton-icon-skip_forward-svg);
958
+ --icon-smartphone_inactive-svg: var(--traton-icon-smartphone_inactive-svg);
959
+ --icon-smartphone-svg: var(--traton-icon-smartphone-svg);
893
960
  --icon-sorting-svg: var(--traton-icon-sorting-svg);
961
+ --icon-speedometer_inactive-svg: var(--traton-icon-speedometer_inactive-svg);
962
+ --icon-speedometer-svg: var(--traton-icon-speedometer-svg);
894
963
  --icon-star-svg: var(--traton-icon-star-svg);
964
+ --icon-support-svg: var(--traton-icon-support-svg);
895
965
  --icon-tick-svg: var(--traton-icon-tick-svg);
966
+ --icon-timer-svg: var(--traton-icon-timer-svg);
967
+ --icon-tool_inactive-svg: var(--traton-icon-tool_inactive-svg);
968
+ --icon-tool-svg: var(--traton-icon-tool-svg);
969
+ --icon-trash_inactive-svg: var(--traton-icon-trash_inactive-svg);
970
+ --icon-trash-svg: var(--traton-icon-trash-svg);
896
971
  --icon-truck-svg: var(--traton-icon-truck-svg);
972
+ --icon-unlock-svg: var(--traton-icon-unlock-svg);
973
+ --icon-upload-svg: var(--traton-icon-upload-svg);
974
+ --icon-wallet-svg: var(--traton-icon-wallet-svg);
897
975
  --icon-warning-svg: var(--traton-icon-warning-svg);
976
+ --icon-wifi_inactive-svg: var(--traton-icon-wifi_inactive-svg);
977
+ --icon-wifi-svg: var(--traton-icon-wifi-svg);
978
+ }
979
+
980
+ /* Cross-brand placeholder fallbacks — generated alongside icon.scss */
981
+ /**
982
+ * Do not edit directly, this file was auto-generated.
983
+ */
984
+ :root,
985
+ .scania {
986
+ --icon-document_word-svg: var(--scania-icon-placeholder-svg);
987
+ --icon-dollar_sign-svg: var(--scania-icon-placeholder-svg);
988
+ --icon-donner-svg: var(--scania-icon-placeholder-svg);
989
+ --icon-meatball-svg: var(--scania-icon-placeholder-svg);
990
+ --icon-skip_backward-svg: var(--scania-icon-placeholder-svg);
991
+ }
992
+
993
+ .traton {
994
+ --icon-24v_battery-svg: var(--traton-icon-placeholder-svg);
995
+ --icon-24v_battery_inactive-svg: var(--traton-icon-placeholder-svg);
996
+ --icon-acceleration-svg: var(--traton-icon-placeholder-svg);
997
+ --icon-acceleration_inactive-svg: var(--traton-icon-placeholder-svg);
998
+ --icon-adblue-svg: var(--traton-icon-placeholder-svg);
999
+ --icon-adblue_inactive-svg: var(--traton-icon-placeholder-svg);
1000
+ --icon-audio-svg: var(--traton-icon-placeholder-svg);
1001
+ --icon-audio_inactive-svg: var(--traton-icon-placeholder-svg);
1002
+ --icon-award-svg: var(--traton-icon-placeholder-svg);
1003
+ --icon-backward-svg: var(--traton-icon-placeholder-svg);
1004
+ --icon-backward_inactive-svg: var(--traton-icon-placeholder-svg);
1005
+ --icon-bug-svg: var(--traton-icon-placeholder-svg);
1006
+ --icon-bug_inactive-svg: var(--traton-icon-placeholder-svg);
1007
+ --icon-bus-svg: var(--traton-icon-placeholder-svg);
1008
+ --icon-bus_inactive-svg: var(--traton-icon-placeholder-svg);
1009
+ --icon-cab_door-svg: var(--traton-icon-placeholder-svg);
1010
+ --icon-camera-svg: var(--traton-icon-placeholder-svg);
1011
+ --icon-camera_inactive-svg: var(--traton-icon-placeholder-svg);
1012
+ --icon-charging_complete-svg: var(--traton-icon-placeholder-svg);
1013
+ --icon-charging_failed-svg: var(--traton-icon-placeholder-svg);
1014
+ --icon-charging_speed-svg: var(--traton-icon-placeholder-svg);
1015
+ --icon-charging_speed_inactive-svg: var(--traton-icon-placeholder-svg);
1016
+ --icon-charging_stopped-svg: var(--traton-icon-placeholder-svg);
1017
+ --icon-configurator-svg: var(--traton-icon-placeholder-svg);
1018
+ --icon-cookie-svg: var(--traton-icon-placeholder-svg);
1019
+ --icon-cookie_inactive-svg: var(--traton-icon-placeholder-svg);
1020
+ --icon-coolant_level-svg: var(--traton-icon-placeholder-svg);
1021
+ --icon-coolant_level_inactive-svg: var(--traton-icon-placeholder-svg);
1022
+ --icon-cup-svg: var(--traton-icon-placeholder-svg);
1023
+ --icon-cup_inactive-svg: var(--traton-icon-placeholder-svg);
1024
+ --icon-dashboard-svg: var(--traton-icon-placeholder-svg);
1025
+ --icon-department-svg: var(--traton-icon-placeholder-svg);
1026
+ --icon-department_inactive-svg: var(--traton-icon-placeholder-svg);
1027
+ --icon-departure_scheduling-svg: var(--traton-icon-placeholder-svg);
1028
+ --icon-departure_scheduling_inactive-svg: var(--traton-icon-placeholder-svg);
1029
+ --icon-diamond-svg: var(--traton-icon-placeholder-svg);
1030
+ --icon-diamond_inactive-svg: var(--traton-icon-placeholder-svg);
1031
+ --icon-document_plus-svg: var(--traton-icon-placeholder-svg);
1032
+ --icon-document_plus_inactive-svg: var(--traton-icon-placeholder-svg);
1033
+ --icon-document_ppt-svg: var(--traton-icon-placeholder-svg);
1034
+ --icon-dollar-svg: var(--traton-icon-placeholder-svg);
1035
+ --icon-doner-svg: var(--traton-icon-placeholder-svg);
1036
+ --icon-driving_licence-svg: var(--traton-icon-placeholder-svg);
1037
+ --icon-driving_licence_inactive-svg: var(--traton-icon-placeholder-svg);
1038
+ --icon-drop-svg: var(--traton-icon-placeholder-svg);
1039
+ --icon-drop_inactive-svg: var(--traton-icon-placeholder-svg);
1040
+ --icon-engine-svg: var(--traton-icon-placeholder-svg);
1041
+ --icon-engine_inactive-svg: var(--traton-icon-placeholder-svg);
1042
+ --icon-environment-svg: var(--traton-icon-placeholder-svg);
1043
+ --icon-environment_inactive-svg: var(--traton-icon-placeholder-svg);
1044
+ --icon-exit-svg: var(--traton-icon-placeholder-svg);
1045
+ --icon-expand-svg: var(--traton-icon-placeholder-svg);
1046
+ --icon-expand_inactive-svg: var(--traton-icon-placeholder-svg);
1047
+ --icon-factory-svg: var(--traton-icon-placeholder-svg);
1048
+ --icon-factory_inactive-svg: var(--traton-icon-placeholder-svg);
1049
+ --icon-ferry-svg: var(--traton-icon-placeholder-svg);
1050
+ --icon-ferry_inactive-svg: var(--traton-icon-placeholder-svg);
1051
+ --icon-flash-svg: var(--traton-icon-placeholder-svg);
1052
+ --icon-flash_inactive-svg: var(--traton-icon-placeholder-svg);
1053
+ --icon-forward-svg: var(--traton-icon-placeholder-svg);
1054
+ --icon-forward_inactive-svg: var(--traton-icon-placeholder-svg);
1055
+ --icon-fuel-svg: var(--traton-icon-placeholder-svg);
1056
+ --icon-fuel_inactive-svg: var(--traton-icon-placeholder-svg);
1057
+ --icon-gift-svg: var(--traton-icon-placeholder-svg);
1058
+ --icon-gift_inactive-svg: var(--traton-icon-placeholder-svg);
1059
+ --icon-guided_tour-svg: var(--traton-icon-placeholder-svg);
1060
+ --icon-guided_tour_inactive-svg: var(--traton-icon-placeholder-svg);
1061
+ --icon-hatch_open-svg: var(--traton-icon-placeholder-svg);
1062
+ --icon-hatch_open_1-svg: var(--traton-icon-placeholder-svg);
1063
+ --icon-hatch_open_2-svg: var(--traton-icon-placeholder-svg);
1064
+ --icon-hatch_open_inactive-svg: var(--traton-icon-placeholder-svg);
1065
+ --icon-heating_inactive_screen-svg: var(--traton-icon-placeholder-svg);
1066
+ --icon-history-svg: var(--traton-icon-placeholder-svg);
1067
+ --icon-history_inactive-svg: var(--traton-icon-placeholder-svg);
1068
+ --icon-idea-svg: var(--traton-icon-placeholder-svg);
1069
+ --icon-idea_inactive-svg: var(--traton-icon-placeholder-svg);
1070
+ --icon-insights-svg: var(--traton-icon-placeholder-svg);
1071
+ --icon-key-svg: var(--traton-icon-placeholder-svg);
1072
+ --icon-key_inactive-svg: var(--traton-icon-placeholder-svg);
1073
+ --icon-language-svg: var(--traton-icon-placeholder-svg);
1074
+ --icon-layer-svg: var(--traton-icon-placeholder-svg);
1075
+ --icon-layer_inactive-svg: var(--traton-icon-placeholder-svg);
1076
+ --icon-list-svg: var(--traton-icon-placeholder-svg);
1077
+ --icon-list_inactive-svg: var(--traton-icon-placeholder-svg);
1078
+ --icon-lock_inactive-svg: var(--traton-icon-placeholder-svg);
1079
+ --icon-map_cursor-svg: var(--traton-icon-placeholder-svg);
1080
+ --icon-map_cursor_inactive-svg: var(--traton-icon-placeholder-svg);
1081
+ --icon-maximize_fullscreen-svg: var(--traton-icon-placeholder-svg);
1082
+ --icon-meatballs-svg: var(--traton-icon-placeholder-svg);
1083
+ --icon-merge-svg: var(--traton-icon-placeholder-svg);
1084
+ --icon-merge_inactive-svg: var(--traton-icon-placeholder-svg);
1085
+ --icon-microphone-svg: var(--traton-icon-placeholder-svg);
1086
+ --icon-microphone_inactive-svg: var(--traton-icon-placeholder-svg);
1087
+ --icon-minimize_fullscreen-svg: var(--traton-icon-placeholder-svg);
1088
+ --icon-navigate-svg: var(--traton-icon-placeholder-svg);
1089
+ --icon-navigate_inactive-svg: var(--traton-icon-placeholder-svg);
1090
+ --icon-notification_snooze-svg: var(--traton-icon-placeholder-svg);
1091
+ --icon-oil_level-svg: var(--traton-icon-placeholder-svg);
1092
+ --icon-oil_level_inactive-svg: var(--traton-icon-placeholder-svg);
1093
+ --icon-paperclip-svg: var(--traton-icon-placeholder-svg);
1094
+ --icon-pause-svg: var(--traton-icon-placeholder-svg);
1095
+ --icon-pause_inactive-svg: var(--traton-icon-placeholder-svg);
1096
+ --icon-pie_chart-svg: var(--traton-icon-placeholder-svg);
1097
+ --icon-play-svg: var(--traton-icon-placeholder-svg);
1098
+ --icon-play_inactive-svg: var(--traton-icon-placeholder-svg);
1099
+ --icon-powerplug-svg: var(--traton-icon-placeholder-svg);
1100
+ --icon-powerplug_inactive-svg: var(--traton-icon-placeholder-svg);
1101
+ --icon-privacy-svg: var(--traton-icon-placeholder-svg);
1102
+ --icon-privacy_inactive-svg: var(--traton-icon-placeholder-svg);
1103
+ --icon-prohibited-svg: var(--traton-icon-placeholder-svg);
1104
+ --icon-range-svg: var(--traton-icon-placeholder-svg);
1105
+ --icon-range_inactive-svg: var(--traton-icon-placeholder-svg);
1106
+ --icon-refresh_inactive-svg: var(--traton-icon-placeholder-svg);
1107
+ --icon-reload-svg: var(--traton-icon-placeholder-svg);
1108
+ --icon-reload_inactive-svg: var(--traton-icon-placeholder-svg);
1109
+ --icon-repeat-svg: var(--traton-icon-placeholder-svg);
1110
+ --icon-route-svg: var(--traton-icon-placeholder-svg);
1111
+ --icon-route_inactive-svg: var(--traton-icon-placeholder-svg);
1112
+ --icon-shuffle-svg: var(--traton-icon-placeholder-svg);
1113
+ --icon-skip_backwards-svg: var(--traton-icon-placeholder-svg);
1114
+ --icon-target-svg: var(--traton-icon-placeholder-svg);
1115
+ --icon-target_inactive-svg: var(--traton-icon-placeholder-svg);
1116
+ --icon-temperature-svg: var(--traton-icon-placeholder-svg);
1117
+ --icon-temperature_inactive-svg: var(--traton-icon-placeholder-svg);
1118
+ --icon-text-svg: var(--traton-icon-placeholder-svg);
1119
+ --icon-text_inactive-svg: var(--traton-icon-placeholder-svg);
1120
+ --icon-thumbs_down-svg: var(--traton-icon-placeholder-svg);
1121
+ --icon-thumbs_up-svg: var(--traton-icon-placeholder-svg);
1122
+ --icon-trailer-svg: var(--traton-icon-placeholder-svg);
1123
+ --icon-trailer_inactive-svg: var(--traton-icon-placeholder-svg);
1124
+ --icon-truck_inactive-svg: var(--traton-icon-placeholder-svg);
1125
+ --icon-undo-svg: var(--traton-icon-placeholder-svg);
1126
+ --icon-undo_inactive-svg: var(--traton-icon-placeholder-svg);
1127
+ --icon-video-svg: var(--traton-icon-placeholder-svg);
1128
+ --icon-video_inactive-svg: var(--traton-icon-placeholder-svg);
1129
+ --icon-weight-svg: var(--traton-icon-placeholder-svg);
1130
+ --icon-weight_inactive-svg: var(--traton-icon-placeholder-svg);
1131
+ --icon-windscreen_heating-svg: var(--traton-icon-placeholder-svg);
1132
+ --icon-windscreen_heating_inactive-svg: var(--traton-icon-placeholder-svg);
898
1133
  }