@scania/tegel-lite 0.1.0-variables-beta.1 → 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 (62) 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/traton/placeholder.svg +3 -0
  23. package/dist/components.css +3552 -7157
  24. package/dist/global.css +134 -11
  25. package/dist/scania-variables.css +357 -136
  26. package/dist/tl-accordion.css +88 -35
  27. package/dist/tl-banner.css +88 -13
  28. package/dist/tl-block.css +62 -7
  29. package/dist/tl-breadcrumbs.css +55 -6
  30. package/dist/tl-button.css +192 -160
  31. package/dist/tl-card.css +54 -66
  32. package/dist/tl-checkbox.css +195 -115
  33. package/dist/tl-divider.css +61 -3
  34. package/dist/tl-footer.css +98 -38
  35. package/dist/tl-icon.css +4 -0
  36. package/dist/tl-link.css +114 -16
  37. package/dist/tl-message.css +128 -14
  38. package/dist/tl-modal.css +123 -20
  39. package/dist/tl-radio-button.css +158 -96
  40. package/dist/tl-text-field.css +256 -76
  41. package/dist/tl-textarea.css +274 -76
  42. package/dist/tl-toast.css +119 -10
  43. package/dist/tl-toggle.css +149 -44
  44. package/dist/tl-tooltip.css +17 -15
  45. package/dist/traton-variables.css +365 -23
  46. package/package.json +5 -26
  47. package/dist/tl-badge.css +0 -45
  48. package/dist/tl-checkbox-vars.css +0 -38
  49. package/dist/tl-chip.css +0 -99
  50. package/dist/tl-dropdown.css +0 -913
  51. package/dist/tl-folder-tabs.css +0 -139
  52. package/dist/tl-header.css +0 -935
  53. package/dist/tl-inline-tabs.css +0 -173
  54. package/dist/tl-navigation-tabs.css +0 -171
  55. package/dist/tl-popover-canvas.css +0 -70
  56. package/dist/tl-popover-menu.css +0 -123
  57. package/dist/tl-side-menu.css +0 -695
  58. package/dist/tl-slider.css +0 -2242
  59. package/dist/tl-spinner.css +0 -78
  60. package/dist/tl-step.css +0 -239
  61. package/dist/tl-stepper.css +0 -83
  62. package/dist/tl-table.css +0 -849
package/dist/tl-footer.css CHANGED
@@ -5,51 +5,91 @@
5
5
  :root,
6
6
  .tds-mode-light,
7
7
  .scania .tds-mode-light,
8
- .scania .tl-mode-light {
9
- --component-footer-border: var(--scania-color-blue-700);
10
- --component-footer-primary: var(--scania-color-blue-800);
11
- --component-footer-color-text-link-default: var(--color-text-brand);
12
- --component-footer-color-text-copyright-default: var(--color-text-inverse-soft);
8
+ .scania.tds-mode-light,
9
+ .scania .tl-mode-light,
10
+ .scania.tl-mode-light {
11
+ --component-footer-border-divider-default: var(--scania-color-blue-700);
12
+ --component-footer-background-main-default: var(--scania-color-blue-800);
13
+ --component-footer-background-top-default: var(--color-background-layer-01);
14
+ --component-footer-background-top-secondary: var(--color-background-base);
15
+ --component-footer-background-list-item-default: var(--component-footer-background-top-default);
16
+ --component-footer-background-list-item-active: var(--scania-color-grey-150);
17
+ --component-footer-text-copyright-default: var(--color-text-inverse-soft);
18
+ --component-footer-text-link-default: var(--color-text-strong);
19
+ --component-footer-text-title-default: var(--color-text-strong);
20
+ --component-footer-text-inverse-link-default: var(--scania-color-base-white);
21
+ --component-footer-icon-link-default: var(--color-icon-strong);
22
+ --component-footer-icon-social-default: var(--color-icon-inverse-strong);
13
23
  }
14
24
 
15
25
  .traton .tds-mode-light,
16
- .traton .tl-mode-light {
17
- --component-footer-border: var(--traton-color-transparent-invisible-light);
18
- --component-footer-primary: var(--traton-color-grey-50);
19
- --component-footer-color-text-link-default: var(--color-text-strong);
20
- --component-footer-color-text-copyright-default: var(--traton-color-transparent-600);
26
+ .traton.tds-mode-light,
27
+ .traton .tl-mode-light,
28
+ .traton.tl-mode-light {
29
+ --component-footer-border-divider-default: var(--traton-color-transparent-invisible-light);
30
+ --component-footer-background-main-default: var(--traton-color-grey-50);
31
+ --component-footer-background-top-default: var(--color-background-layer-01);
32
+ --component-footer-background-top-secondary: var(--color-background-layer-01);
33
+ --component-footer-background-list-item-default: var(--component-footer-background-top-default);
34
+ --component-footer-background-list-item-active: var(--traton-color-grey-300);
35
+ --component-footer-text-copyright-default: var(--color-text-soft);
36
+ --component-footer-text-link-default: var(--color-text-strong);
37
+ --component-footer-text-title-default: var(--color-text-strong);
38
+ --component-footer-text-inverse-link-default: var(--component-footer-text-link-default);
39
+ --component-footer-icon-link-default: var(--color-icon-strong);
40
+ --component-footer-icon-social-default: var(--color-icon-strong);
21
41
  }
22
42
 
23
43
  .tds-mode-dark,
24
44
  .scania .tds-mode-dark,
25
- .scania .tl-mode-dark {
26
- --component-footer-border: var(--scania-color-blue-800);
27
- --component-footer-primary: var(--scania-color-blue-900);
28
- --component-footer-color-text-link-default: #d8dde5;
29
- --component-footer-color-text-copyright-default: var(--color-text-soft);
45
+ .scania.tds-mode-dark,
46
+ .scania .tl-mode-dark,
47
+ .scania.tl-mode-dark {
48
+ --component-footer-border-divider-default: var(--scania-color-blue-800);
49
+ --component-footer-background-main-default: var(--scania-color-blue-900);
50
+ --component-footer-background-top-default: var(--color-background-layer-01);
51
+ --component-footer-background-top-secondary: var(--color-background-layer-02);
52
+ --component-footer-background-list-item-default: var(--component-footer-background-top-default);
53
+ --component-footer-background-list-item-active: var(--scania-color-grey-800);
54
+ --component-footer-text-copyright-default: var(--color-text-soft);
55
+ --component-footer-text-link-default: var(--color-text-strong);
56
+ --component-footer-text-title-default: var(--color-text-strong);
57
+ --component-footer-text-inverse-link-default: var(--scania-color-base-white);
58
+ --component-footer-icon-link-default: var(--color-icon-strong);
59
+ --component-footer-icon-social-default: var(--color-icon-strong);
30
60
  }
31
61
 
32
62
  .traton .tds-mode-dark,
33
- .traton .tl-mode-dark {
34
- --component-footer-border: var(--traton-color-transparent-invisible-light);
35
- --component-footer-primary: var(--traton-color-blue-1000);
36
- --component-footer-color-text-link-default: var(--color-text-strong);
37
- --component-footer-color-text-copyright-default: var(--traton-color-transparent-inverse-600);
63
+ .traton.tds-mode-dark,
64
+ .traton .tl-mode-dark,
65
+ .traton.tl-mode-dark {
66
+ --component-footer-border-divider-default: var(--traton-color-transparent-invisible-light);
67
+ --component-footer-background-main-default: var(--traton-color-blue-1000);
68
+ --component-footer-background-top-default: var(--color-background-layer-01);
69
+ --component-footer-background-top-secondary: var(--color-background-layer-01);
70
+ --component-footer-background-list-item-default: var(--component-footer-background-top-default);
71
+ --component-footer-background-list-item-active: var(--traton-color-blue-800);
72
+ --component-footer-text-copyright-default: var(--color-text-soft);
73
+ --component-footer-text-link-default: var(--color-text-strong);
74
+ --component-footer-text-title-default: var(--color-text-strong);
75
+ --component-footer-text-inverse-link-default: var(--component-footer-text-link-default);
76
+ --component-footer-icon-link-default: var(--color-icon-strong);
77
+ --component-footer-icon-social-default: var(--color-icon-strong);
38
78
  }
39
79
 
40
80
  .tl-footer {
41
- --footer-top-background-primary: var(--color-background-layer-01);
42
- --footer-top-background-secondary: var(--color-background-base);
43
- --footer-top-background: var(--color-background-layer-01);
44
- --footer-top-divider: var(--color-foreground-border-discrete);
45
- --footer-top-links-desktop: var(--color-foreground-text-subtle);
46
- --footer-top-links: var(--component-footer-text-color-link-text);
47
- --footer-top-links-background-hover: var(--color-background-surface-300);
48
- --footer-top-button-active: var(--color-background-surface-300);
49
- --footer-main-background: var(--component-footer-primary);
50
- --footer-main-links: var(--color-foreground-text-accent-brand);
51
- --footer-main-divider: var(--component-footer-border);
52
- --footer-main-copyright: var(--component-footer-text-color-copyright);
81
+ --footer-top-background-primary: var(--component-footer-background-top-default);
82
+ --footer-top-background-secondary: var(--component-footer-background-top-secondary);
83
+ --footer-top-background: var(--component-footer-background-top-default);
84
+ --footer-top-divider: var(--color-border-discrete);
85
+ --footer-top-links-desktop: var(--component-footer-text-title-default);
86
+ --footer-top-links: var(--component-footer-text-link-default);
87
+ --footer-top-links-background-hover: var(--component-footer-background-list-item-active);
88
+ --footer-top-button-active: var(--component-footer-background-list-item-active);
89
+ --footer-main-background: var(--component-footer-background-main-default);
90
+ --footer-main-links: var(--component-footer-text-inverse-link-default);
91
+ --footer-main-divider: var(--component-footer-border-divider-default);
92
+ --footer-main-copyright: var(--component-footer-text-copyright-default);
53
93
  }
54
94
  .tl-footer.tl-footer--primary {
55
95
  --footer-top-background: var(--footer-top-background-primary);
@@ -58,6 +98,26 @@
58
98
  --footer-top-background: var(--footer-top-background-secondary);
59
99
  }
60
100
 
101
+ .scania .tl-footer {
102
+ --component-footer-logotype-local: var(--tds-background-image-scania-wordmark-white-svg-local);
103
+ --component-footer-logotype-cdn: var(--tds-background-image-scania-wordmark-white-svg);
104
+ }
105
+
106
+ .traton .tl-mode-dark .tl-footer {
107
+ --component-footer-logotype-local: var(--traton-logotype-white-svg-local);
108
+ --component-footer-logotype-cdn: var(--traton-logotype-white-svg);
109
+ }
110
+
111
+ .traton .tl-mode-light .tl-footer {
112
+ --component-footer-logotype-local: var(--traton-logotype-black-svg-local);
113
+ --component-footer-logotype-cdn: var(--traton-logotype-black-svg);
114
+ }
115
+
116
+ .traton .tl-footer {
117
+ --component-footer-logotype-local: var(--traton-logotype-black-svg-local);
118
+ --component-footer-logotype-cdn: var(--traton-logotype-black-svg);
119
+ }
120
+
61
121
  .tl-footer__group {
62
122
  display: block;
63
123
  }
@@ -99,8 +159,8 @@
99
159
  text-decoration: underline;
100
160
  }
101
161
  .tl-footer__link:focus-visible {
102
- outline: var(--dimension-radius-focus-width) solid var(--color-foreground-border-accent-focus);
103
- box-shadow: 0 0 0 1px var(--color-brand-neutral-white);
162
+ outline: 2px solid var(--component--focus-ring-color-strong);
163
+ box-shadow: 0 0 0 1px var(--component--focus-ring-color-discrete);
104
164
  outline-offset: 1px;
105
165
  z-index: 1;
106
166
  }
@@ -159,8 +219,8 @@
159
219
  background-color: var(--footer-top-button-active);
160
220
  }
161
221
  .tl-footer__top-title:focus-visible {
162
- outline: var(--dimension-radius-focus-width) solid var(--color-foreground-border-accent-focus);
163
- box-shadow: 0 0 0 1px var(--color-brand-neutral-white);
222
+ outline: 2px solid var(--component--focus-ring-color-strong);
223
+ box-shadow: inset 0 0 0 3px var(--component--focus-ring-color-discrete);
164
224
  outline-offset: -2px;
165
225
  z-index: 1;
166
226
  }
@@ -180,8 +240,8 @@
180
240
  text-decoration: none;
181
241
  }
182
242
  .tl-footer__main .tl-footer__link:focus-visible {
183
- outline: var(--dimension-radius-focus-width) solid var(--color-foreground-border-accent-focus);
184
- box-shadow: 0 0 0 1px var(--color-brand-neutral-white);
243
+ outline: 2px solid var(--component--focus-ring-color-strong);
244
+ box-shadow: 0 0 0 1px var(--component--focus-ring-color-discrete);
185
245
  outline-offset: 1px;
186
246
  z-index: 1;
187
247
  }
package/dist/tl-icon.css CHANGED
@@ -284,6 +284,10 @@
284
284
  mask-image: var(--icon-document_tool-svg);
285
285
  background-color: currentcolor;
286
286
  }
287
+ .tl-icon--document_word {
288
+ mask-image: var(--icon-document_word-svg);
289
+ background-color: currentcolor;
290
+ }
287
291
  .tl-icon--document_wrong {
288
292
  mask-image: var(--icon-document_wrong-svg);
289
293
  background-color: currentcolor;
package/dist/tl-link.css CHANGED
@@ -1,25 +1,126 @@
1
1
  /* Typography Usage mixins */
2
+ /**
3
+ * Do not edit directly, this file was auto-generated.
4
+ */
5
+ :root,
6
+ .tds-mode-light,
7
+ .scania .tds-mode-light,
8
+ .scania.tds-mode-light,
9
+ .scania .tl-mode-light,
10
+ .scania.tl-mode-light {
11
+ --component-link-icon-accent-default: var(--scania-color-blue-400);
12
+ --component-link-icon-accent-hover: var(--scania-color-blue-400);
13
+ --component-link-icon-accent-active: var(--scania-color-blue-600);
14
+ --component-link-icon-accent-visited: var(--scania-color-blue-600);
15
+ --component-link-icon-standard-default: var(--color-text-strong);
16
+ --component-link-icon-standard-hover: var(--color-text-defined);
17
+ --component-link-icon-standard-active: var(--color-text-soft);
18
+ --component-link-icon-standard-visited: var(--color-text-strong);
19
+ --component-link-opacity-disabled: var(--scania-opacity-25);
20
+ --component-link-text-accent-default: var(--scania-color-blue-400);
21
+ --component-link-text-accent-hover: var(--scania-color-blue-400);
22
+ --component-link-text-accent-active: var(--scania-color-blue-600);
23
+ --component-link-text-accent-visited: var(--scania-color-blue-600);
24
+ --component-link-text-standard-default: var(--color-text-strong);
25
+ --component-link-text-standard-hover: var(--color-text-defined);
26
+ --component-link-text-standard-active: var(--color-text-soft);
27
+ --component-link-text-standard-visited: var(--color-text-strong);
28
+ }
29
+
30
+ .traton .tds-mode-light,
31
+ .traton.tds-mode-light,
32
+ .traton .tl-mode-light,
33
+ .traton.tl-mode-light {
34
+ --component-link-icon-accent-default: var(--traton-color-blue-700);
35
+ --component-link-icon-accent-hover: var(--traton-color-blue-700);
36
+ --component-link-icon-accent-active: var(--traton-color-blue-950);
37
+ --component-link-icon-accent-visited: var(--traton-color-blue-950);
38
+ --component-link-icon-standard-default: var(--color-text-strong);
39
+ --component-link-icon-standard-hover: var(--color-text-defined);
40
+ --component-link-icon-standard-active: var(--color-text-soft);
41
+ --component-link-icon-standard-visited: var(--color-text-strong);
42
+ --component-link-opacity-disabled: var(--traton-opacity-25);
43
+ --component-link-text-accent-default: var(--traton-color-blue-700);
44
+ --component-link-text-accent-hover: var(--traton-color-blue-700);
45
+ --component-link-text-accent-active: var(--traton-color-blue-950);
46
+ --component-link-text-accent-visited: var(--traton-color-blue-950);
47
+ --component-link-text-standard-default: var(--color-text-strong);
48
+ --component-link-text-standard-hover: var(--color-text-defined);
49
+ --component-link-text-standard-active: var(--color-text-soft);
50
+ --component-link-text-standard-visited: var(--color-text-strong);
51
+ }
52
+
53
+ .tds-mode-dark,
54
+ .scania .tds-mode-dark,
55
+ .scania.tds-mode-dark,
56
+ .scania .tl-mode-dark,
57
+ .scania.tl-mode-dark {
58
+ --component-link-icon-accent-default: var(--scania-color-blue-300);
59
+ --component-link-icon-accent-hover: var(--scania-color-blue-300);
60
+ --component-link-icon-accent-active: var(--scania-color-blue-100);
61
+ --component-link-icon-accent-visited: var(--scania-color-blue-100);
62
+ --component-link-icon-standard-default: var(--color-text-strong);
63
+ --component-link-icon-standard-hover: var(--color-text-defined);
64
+ --component-link-icon-standard-active: var(--color-text-soft);
65
+ --component-link-icon-standard-visited: var(--color-text-strong);
66
+ --component-link-opacity-disabled: var(--scania-opacity-25);
67
+ --component-link-text-accent-default: var(--scania-color-blue-300);
68
+ --component-link-text-accent-hover: var(--scania-color-blue-300);
69
+ --component-link-text-accent-active: var(--scania-color-blue-100);
70
+ --component-link-text-accent-visited: var(--scania-color-blue-100);
71
+ --component-link-text-standard-default: var(--color-text-strong);
72
+ --component-link-text-standard-hover: var(--color-text-defined);
73
+ --component-link-text-standard-active: var(--color-text-soft);
74
+ --component-link-text-standard-visited: var(--color-text-strong);
75
+ }
76
+
77
+ .traton .tds-mode-dark,
78
+ .traton.tds-mode-dark,
79
+ .traton .tl-mode-dark,
80
+ .traton.tl-mode-dark {
81
+ --component-link-icon-accent-default: var(--traton-color-blue-400);
82
+ --component-link-icon-accent-hover: var(--traton-color-blue-400);
83
+ --component-link-icon-accent-active: var(--traton-color-blue-150);
84
+ --component-link-icon-accent-visited: var(--traton-color-blue-150);
85
+ --component-link-icon-standard-default: var(--color-text-strong);
86
+ --component-link-icon-standard-hover: var(--color-text-defined);
87
+ --component-link-icon-standard-active: var(--color-text-soft);
88
+ --component-link-icon-standard-visited: var(--color-text-strong);
89
+ --component-link-opacity-disabled: var(--traton-opacity-25);
90
+ --component-link-text-accent-default: var(--traton-color-blue-400);
91
+ --component-link-text-accent-hover: var(--traton-color-blue-400);
92
+ --component-link-text-accent-active: var(--traton-color-blue-150);
93
+ --component-link-text-accent-visited: var(--traton-color-blue-150);
94
+ --component-link-text-standard-default: var(--color-text-strong);
95
+ --component-link-text-standard-hover: var(--color-text-defined);
96
+ --component-link-text-standard-active: var(--color-text-soft);
97
+ --component-link-text-standard-visited: var(--color-text-strong);
98
+ }
99
+
2
100
  /* Component variables */
3
101
  .tl-link {
4
- --link: var(--color-foreground-text-accent-default);
5
- --link-hover: var(--color-foreground-text-accent-default);
102
+ --link: var(--component-link-text-accent-default);
103
+ --link-hover: var(--component-link-text-accent-hover);
6
104
  --link-focus-outline-width: 2px;
7
- --link-visited: var(--color-foreground-text-accent-visited);
8
- --link-disabled: var(--color-foreground-text-disabled);
9
- --link-focus-outline-color: var(--color-foreground-border-accent-focus);
105
+ --link-visited: var(--component-link-text-accent-visited);
106
+ --link-opacity-disabled: calc(var(--component-link-opacity-disabled) / 100);
107
+ --link-focus-outline-color: var(--color-system-info-default);
10
108
  }
11
109
 
12
110
  .tl-banner .tl-link {
13
- --link: var(--color-system-info-default);
111
+ --link: var(--color-text-strong);
112
+ --link-hover: var(--color-text-strong);
113
+ --link-visited: var(--color-text-strong);
14
114
  }
15
115
 
16
116
  .tl-toast .tl-link {
17
- --link: var(--color-system-info-default);
18
- --link-hover: var(--color-foreground-text-accent-default);
117
+ --link: var(--color-text-inverse-strong);
118
+ --link-hover: var(--color-text-inverse-strong);
119
+ --link-visited: var(--color-text-inverse-strong);
19
120
  }
20
121
 
21
122
  .traton .tl-link {
22
- --link-focus-outline-width: 4px;
123
+ --link-focus-outline-width: 2px;
23
124
  }
24
125
 
25
126
  .tl-link-text {
@@ -44,8 +145,10 @@
44
145
  font: inherit;
45
146
  }
46
147
  .tl-link:focus-visible {
47
- outline: var(--link-focus-outline-width) solid var(--link-focus-outline-color);
148
+ outline: 2px solid var(--component--focus-ring-color-strong);
149
+ box-shadow: 0 0 0 1px var(--component--focus-ring-color-discrete);
48
150
  outline-offset: 1px;
151
+ z-index: 1;
49
152
  text-decoration: none;
50
153
  }
51
154
  .tl-link:active {
@@ -60,15 +163,10 @@
60
163
  text-decoration-color: var(--link-visited);
61
164
  }
62
165
  .tl-link--disabled {
63
- color: var(--link-disabled);
64
- text-decoration-color: var(--link-disabled);
166
+ opacity: var(--link-opacity-disabled);
65
167
  pointer-events: none;
66
168
  cursor: not-allowed;
67
169
  }
68
- .tl-link--disabled:visited {
69
- color: var(--link-disabled);
70
- text-decoration-color: var(--link-disabled);
71
- }
72
170
  .tl-link--underline {
73
171
  text-decoration: underline;
74
172
  }
package/dist/tl-message.css CHANGED
@@ -1,23 +1,137 @@
1
1
  /* Typography Usage mixins */
2
+ /**
3
+ * Do not edit directly, this file was auto-generated.
4
+ */
5
+ :root,
6
+ .tds-mode-light,
7
+ .scania .tds-mode-light,
8
+ .scania.tds-mode-light,
9
+ .scania .tl-mode-light,
10
+ .scania.tl-mode-light {
11
+ --component-message-background-primary: var(--color-background-layer-01);
12
+ --component-message-background-secondary: var(--color-background-layer-02);
13
+ --component-message-background-information-default: var(--color-background-layer-01);
14
+ --component-message-background-success-default: var(--color-background-layer-01);
15
+ --component-message-background-warning-default: var(--color-background-layer-01);
16
+ --component-message-background-error-default: var(--color-system-danger-discrete);
17
+ --component-message-text-information-default: var(--color-text-strong);
18
+ --component-message-text-success-default: var(--color-text-strong);
19
+ --component-message-text-warning-default: var(--color-text-strong);
20
+ --component-message-text-error-default: var(--color-text-strong);
21
+ --component-message-text-error-highlight-default: var(--color-system-danger-default);
22
+ --component-message-border-information-default: var(--color-system-info-default);
23
+ --component-message-border-success-default: var(--color-system-success-default);
24
+ --component-message-border-warning-default: var(--color-system-warning-subtle);
25
+ --component-message-border-error-default: var(--color-system-danger-default);
26
+ --component-message-border-radius-default: var(--scania-unit-4);
27
+ --component-message-border-width-default: var(--scania-unit-4);
28
+ --component-message-icon-information-default: var(--color-system-info-default);
29
+ --component-message-icon-success-default: var(--color-system-success-default);
30
+ --component-message-icon-warning-default: var(--color-system-warning-default);
31
+ --component-message-icon-error-default: var(--color-system-danger-default);
32
+ }
33
+
34
+ .traton .tds-mode-light,
35
+ .traton.tds-mode-light,
36
+ .traton .tl-mode-light,
37
+ .traton.tl-mode-light {
38
+ --component-message-background-primary: var(--color-background-layer-01);
39
+ --component-message-background-secondary: var(--color-background-layer-02);
40
+ --component-message-background-information-default: var(--color-background-layer-01);
41
+ --component-message-background-success-default: var(--color-background-layer-01);
42
+ --component-message-background-warning-default: var(--color-background-layer-01);
43
+ --component-message-background-error-default: var(--color-system-danger-discrete);
44
+ --component-message-text-information-default: var(--color-text-strong);
45
+ --component-message-text-success-default: var(--color-text-strong);
46
+ --component-message-text-warning-default: var(--color-text-strong);
47
+ --component-message-text-error-default: var(--color-text-strong);
48
+ --component-message-text-error-highlight-default: var(--color-system-danger-default);
49
+ --component-message-border-information-default: var(--color-system-info-subtle);
50
+ --component-message-border-success-default: var(--color-system-success-subtle);
51
+ --component-message-border-warning-default: var(--color-system-warning-subtle);
52
+ --component-message-border-error-default: var(--color-system-danger-subtle);
53
+ --component-message-border-radius-default: var(--traton-unit-4);
54
+ --component-message-border-width-default: var(--traton-unit-4);
55
+ --component-message-icon-information-default: var(--color-system-info-default);
56
+ --component-message-icon-success-default: var(--color-system-success-default);
57
+ --component-message-icon-warning-default: var(--color-system-warning-defined);
58
+ --component-message-icon-error-default: var(--color-system-danger-default);
59
+ }
60
+
61
+ .tds-mode-dark,
62
+ .scania .tds-mode-dark,
63
+ .scania.tds-mode-dark,
64
+ .scania .tl-mode-dark,
65
+ .scania.tl-mode-dark {
66
+ --component-message-background-primary: var(--color-background-layer-01);
67
+ --component-message-background-secondary: var(--color-background-layer-02);
68
+ --component-message-background-information-default: var(--color-background-layer-01);
69
+ --component-message-background-success-default: var(--color-background-layer-01);
70
+ --component-message-background-warning-default: var(--color-background-layer-01);
71
+ --component-message-background-error-default: var(--color-system-danger-discrete);
72
+ --component-message-text-information-default: var(--color-text-strong);
73
+ --component-message-text-success-default: var(--color-text-strong);
74
+ --component-message-text-warning-default: var(--color-text-strong);
75
+ --component-message-text-error-default: var(--color-text-strong);
76
+ --component-message-text-error-highlight-default: var(--color-system-danger-default);
77
+ --component-message-border-information-default: var(--color-system-info-default);
78
+ --component-message-border-success-default: var(--color-system-success-subtle);
79
+ --component-message-border-warning-default: var(--color-system-warning-subtle);
80
+ --component-message-border-error-default: var(--color-system-danger-subtle);
81
+ --component-message-border-radius-default: var(--scania-unit-4);
82
+ --component-message-border-width-default: var(--scania-unit-4);
83
+ --component-message-icon-information-default: var(--color-system-info-default);
84
+ --component-message-icon-success-default: var(--color-system-success-subtle);
85
+ --component-message-icon-warning-default: var(--color-system-warning-subtle);
86
+ --component-message-icon-error-default: var(--color-system-danger-default);
87
+ }
88
+
89
+ .traton .tds-mode-dark,
90
+ .traton.tds-mode-dark,
91
+ .traton .tl-mode-dark,
92
+ .traton.tl-mode-dark {
93
+ --component-message-background-primary: var(--color-background-layer-01);
94
+ --component-message-background-secondary: var(--color-background-layer-02);
95
+ --component-message-background-information-default: var(--color-background-layer-01);
96
+ --component-message-background-success-default: var(--color-background-layer-01);
97
+ --component-message-background-warning-default: var(--color-background-layer-01);
98
+ --component-message-background-error-default: var(--color-system-danger-discrete);
99
+ --component-message-text-information-default: var(--color-text-strong);
100
+ --component-message-text-success-default: var(--color-text-strong);
101
+ --component-message-text-warning-default: var(--color-text-strong);
102
+ --component-message-text-error-default: var(--color-text-strong);
103
+ --component-message-text-error-highlight-default: var(--color-system-danger-default);
104
+ --component-message-border-information-default: var(--color-system-info-subtle);
105
+ --component-message-border-success-default: var(--color-system-success-subtle);
106
+ --component-message-border-warning-default: var(--color-system-warning-subtle);
107
+ --component-message-border-error-default: var(--color-system-danger-subtle);
108
+ --component-message-border-radius-default: var(--traton-unit-4);
109
+ --component-message-border-width-default: var(--traton-unit-4);
110
+ --component-message-icon-information-default: var(--color-system-info-default);
111
+ --component-message-icon-success-default: var(--color-system-success-default);
112
+ --component-message-icon-warning-default: var(--color-system-warning-subtle);
113
+ --component-message-icon-error-default: var(--color-system-danger-default);
114
+ }
115
+
2
116
  .tl-message {
3
- --message-main-background: var(--color-background-layer-01);
4
- --message-mode-primary-background: var(--color-background-layer-01);
5
- --message-mode-secondary-background: var(--color-background-layer-02);
6
- --message-main-text-color: var(--color-foreground-text-strong);
117
+ --message-main-background: var(--component-message-background-primary);
118
+ --message-mode-primary-background: var(--component-message-background-primary);
119
+ --message-mode-secondary-background: var(--component-message-background-secondary);
120
+ --message-main-text-color: var(--color-text-strong);
7
121
  /* Info */
8
- --message-info-border-color: var(--color-system-info-subtle);
9
- --message-info-icon-color: var(--color-system-info-default);
122
+ --message-info-border-color: var(--component-message-border-information-default);
123
+ --message-info-icon-color: var(--component-message-icon-information-default);
10
124
  /* Success */
11
- --message-success-border-color: var(--color-system-success-subtle);
12
- --message-success-icon-color: var(--color-system-success-default);
125
+ --message-success-border-color: var(--component-message-border-success-default);
126
+ --message-success-icon-color: var(--component-message-icon-success-default);
13
127
  /* Error */
14
- --message-error-background: var(--color-system-danger-discrete);
15
- --message-error-border-color: var(--color-system-danger-subtle);
16
- --message-error-icon-color: var(--color-system-danger-default);
17
- --message-error-header-text-color: var(--color-system-danger-default);
128
+ --message-error-background: var(--component-message-background-error-default);
129
+ --message-error-border-color: var(--component-message-border-error-default);
130
+ --message-error-icon-color: var(--component-message-icon-error-default);
131
+ --message-error-header-text-color: var(--component-message-text-error-highlight-default);
18
132
  /* Warning */
19
- --message-warning-border-color: var(--color-system-warning-subtle);
20
- --message-warning-icon-color: var(--color-system-warning-default);
133
+ --message-warning-border-color: var(--component-message-border-warning-default);
134
+ --message-warning-icon-color: var(--component-message-icon-warning-default);
21
135
  }
22
136
 
23
137
  .tl-message--primary {