@scania/tegel-lite 0.1.0-dev-test-beta.0 → 0.1.0-focus-ring-beta.0

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (39) hide show
  1. package/dist/assets/fonts/traton/TratonTypeDisplay-Bold.woff +0 -0
  2. package/dist/assets/fonts/traton/TratonTypeDisplay-Bold.woff2 +0 -0
  3. package/dist/assets/fonts/traton/TratonTypeDisplay-Medium.woff +0 -0
  4. package/dist/assets/fonts/traton/TratonTypeDisplay-Medium.woff2 +0 -0
  5. package/dist/assets/fonts/traton/TratonTypeText-Bold.woff +0 -0
  6. package/dist/assets/fonts/traton/TratonTypeText-Bold.woff2 +0 -0
  7. package/dist/assets/fonts/traton/TratonTypeText-BoldItalic.woff +0 -0
  8. package/dist/assets/fonts/traton/TratonTypeText-BoldItalic.woff2 +0 -0
  9. package/dist/assets/fonts/traton/TratonTypeText-Italic.woff +0 -0
  10. package/dist/assets/fonts/traton/TratonTypeText-Italic.woff2 +0 -0
  11. package/dist/assets/fonts/traton/TratonTypeText-Medium.woff +0 -0
  12. package/dist/assets/fonts/traton/TratonTypeText-Medium.woff2 +0 -0
  13. package/dist/assets/fonts/traton/TratonTypeText-MediumItalic.woff +0 -0
  14. package/dist/assets/fonts/traton/TratonTypeText-MediumItalic.woff2 +0 -0
  15. package/dist/assets/fonts/traton/TratonTypeText-Regular.woff +0 -0
  16. package/dist/assets/fonts/traton/TratonTypeText-Regular.woff2 +0 -0
  17. package/dist/assets/fonts/traton/TratonTypeText-SemiBold.woff +0 -0
  18. package/dist/assets/fonts/traton/TratonTypeText-SemiBold.woff2 +0 -0
  19. package/dist/assets/fonts/traton/TratonTypeText-SemiBoldItalic.woff2 +0 -0
  20. package/dist/assets/icons/traton/placeholder.svg +3 -0
  21. package/dist/components.css +530 -244
  22. package/dist/global.css +66 -0
  23. package/dist/scania-variables.css +185 -136
  24. package/dist/tl-banner.css +2 -2
  25. package/dist/tl-breadcrumbs.css +51 -5
  26. package/dist/tl-button.css +172 -149
  27. package/dist/tl-card.css +20 -8
  28. package/dist/tl-chip.css +8 -8
  29. package/dist/tl-divider.css +61 -3
  30. package/dist/tl-footer.css +83 -31
  31. package/dist/tl-link.css +106 -13
  32. package/dist/tl-modal.css +2 -2
  33. package/dist/tl-side-menu.css +4 -4
  34. package/dist/tl-slider.css +172 -149
  35. package/dist/tl-toast.css +2 -2
  36. package/dist/tl-toggle.css +2 -2
  37. package/dist/tl-tooltip.css +17 -15
  38. package/dist/traton-variables.css +35 -23
  39. package/package.json +1 -1
package/dist/tl-button.css CHANGED
@@ -9,14 +9,14 @@
9
9
  .scania.tl-mode-light {
10
10
  --component-button-background-standard-primary-default: var(--scania-color-blue-600);
11
11
  --component-button-background-standard-primary-hover: var(--scania-color-blue-700);
12
- --component-button-background-standard-primary-active: var(--scania-color-blue-700);
12
+ --component-button-background-standard-primary-active: var(--scania-color-blue-800);
13
13
  --component-button-background-standard-secondary-default: var(--color-background-none);
14
14
  --component-button-background-standard-secondary-hover: var(--color-background-none);
15
15
  --component-button-background-standard-secondary-active: var(--color-background-none);
16
16
  --component-button-background-standard-tertiary-default: var(--color-background-none);
17
17
  --component-button-background-standard-tertiary-hover: var(--color-background-none);
18
18
  --component-button-background-standard-tertiary-active: var(--color-background-none);
19
- --component-button-background-danger-primary-default: var(--color-system-danger-default);
19
+ --component-button-background-danger-primary-default: var(--scania-color-red-400);
20
20
  --component-button-background-danger-primary-hover: var(--scania-color-red-500);
21
21
  --component-button-background-danger-primary-active: var(--scania-color-red-600);
22
22
  --component-button-background-danger-secondary-default: var(--color-background-none);
@@ -38,59 +38,68 @@
38
38
  --component-button-border-danger-primary-default: var(--color-border-none);
39
39
  --component-button-border-danger-primary-hover: var(--color-border-none);
40
40
  --component-button-border-danger-primary-active: var(--color-border-none);
41
- --component-button-border-danger-secondary-default: var(--color-system-danger-default);
41
+ --component-button-border-danger-secondary-default: var(--scania-color-red-400);
42
42
  --component-button-border-danger-secondary-hover: var(--scania-color-red-500);
43
43
  --component-button-border-danger-secondary-active: var(--scania-color-red-600);
44
44
  --component-button-border-danger-tertiary-default: var(--color-border-none);
45
45
  --component-button-border-danger-tertiary-hover: var(--scania-color-red-500);
46
46
  --component-button-border-danger-tertiary-active: var(--scania-color-red-600);
47
- --component-button-icon-standard-primary-default: var(--color-text-inverse-brand);
47
+ --component-button-focus-ring-radius-default: var(--component--focus-ring-radius-extra-large);
48
+ --component-button-icon-standard-primary-default: var(--scania-color-base-white);
48
49
  --component-button-icon-standard-primary-hover: var(
49
- --component-button-text-standard-primary-default
50
+ --component-button-icon-standard-primary-default
50
51
  );
51
52
  --component-button-icon-standard-primary-active: var(
52
- --component-button-text-standard-primary-default
53
+ --component-button-icon-standard-primary-default
54
+ );
55
+ --component-button-icon-standard-secondary-default: var(--scania-color-base-black);
56
+ --component-button-icon-standard-secondary-hover: var(
57
+ --component-button-icon-standard-secondary-default
58
+ );
59
+ --component-button-icon-standard-secondary-active: var(
60
+ --component-button-icon-standard-secondary-default
61
+ );
62
+ --component-button-icon-standard-tertiary-default: var(--scania-color-base-black);
63
+ --component-button-icon-standard-tertiary-hover: var(
64
+ --component-button-icon-standard-tertiary-default
53
65
  );
54
- --component-button-icon-standard-secondary-default: var(--color-text-strong);
55
- --component-button-icon-standard-secondary-hover: var(--color-text-strong);
56
- --component-button-icon-standard-secondary-active: var(--color-text-strong);
57
- --component-button-icon-standard-tertiary-default: var(--color-text-strong);
58
- --component-button-icon-standard-tertiary-hover: var(--color-text-strong);
59
- --component-button-icon-standard-tertiary-active: var(--color-text-strong);
60
- --component-button-icon-danger-primary-default: var(--color-text-inverse-strong);
61
- --component-button-icon-danger-primary-hover: var(--component-button-text-danger-primary-default);
66
+ --component-button-icon-standard-tertiary-active: var(
67
+ --component-button-icon-standard-tertiary-default
68
+ );
69
+ --component-button-icon-danger-primary-default: var(--scania-color-base-white);
70
+ --component-button-icon-danger-primary-hover: var(--component-button-icon-danger-primary-default);
62
71
  --component-button-icon-danger-primary-active: var(
63
- --component-button-text-danger-primary-default
72
+ --component-button-icon-danger-primary-default
64
73
  );
65
- --component-button-icon-danger-secondary-default: var(--color-system-danger-default);
74
+ --component-button-icon-danger-secondary-default: var(--scania-color-red-400);
66
75
  --component-button-icon-danger-secondary-hover: var(--scania-color-red-500);
67
76
  --component-button-icon-danger-secondary-active: var(--scania-color-red-600);
68
- --component-button-icon-danger-tertiary-default: var(--color-system-danger-default);
77
+ --component-button-icon-danger-tertiary-default: var(--scania-color-red-400);
69
78
  --component-button-icon-danger-tertiary-hover: var(--scania-color-red-500);
70
79
  --component-button-icon-danger-tertiary-active: var(--scania-color-red-600);
71
80
  --component-button-opacity-disabled: var(--scania-opacity-25);
72
- --component-button-text-standard-primary-default: var(--color-text-inverse-brand);
81
+ --component-button-text-standard-primary-default: var(--scania-color-base-white);
73
82
  --component-button-text-standard-primary-hover: var(
74
83
  --component-button-text-standard-primary-default
75
84
  );
76
85
  --component-button-text-standard-primary-active: var(
77
86
  --component-button-text-standard-primary-default
78
87
  );
79
- --component-button-text-standard-secondary-default: var(--color-text-strong);
80
- --component-button-text-standard-secondary-hover: var(--color-text-strong);
81
- --component-button-text-standard-secondary-active: var(--color-text-strong);
82
- --component-button-text-standard-tertiary-default: var(--color-text-strong);
83
- --component-button-text-standard-tertiary-hover: var(--color-text-strong);
84
- --component-button-text-standard-tertiary-active: var(--color-text-strong);
85
- --component-button-text-danger-primary-default: var(--color-text-inverse-strong);
88
+ --component-button-text-standard-secondary-default: var(--scania-color-base-black);
89
+ --component-button-text-standard-secondary-hover: var(--scania-color-base-black);
90
+ --component-button-text-standard-secondary-active: var(--scania-color-base-black);
91
+ --component-button-text-standard-tertiary-default: var(--scania-color-base-black);
92
+ --component-button-text-standard-tertiary-hover: var(--scania-color-base-black);
93
+ --component-button-text-standard-tertiary-active: var(--scania-color-base-black);
94
+ --component-button-text-danger-primary-default: var(--scania-color-base-white);
86
95
  --component-button-text-danger-primary-hover: var(--component-button-text-danger-primary-default);
87
96
  --component-button-text-danger-primary-active: var(
88
97
  --component-button-text-danger-primary-default
89
98
  );
90
- --component-button-text-danger-secondary-default: var(--color-system-danger-default);
99
+ --component-button-text-danger-secondary-default: var(--scania-color-red-400);
91
100
  --component-button-text-danger-secondary-hover: var(--scania-color-red-500);
92
101
  --component-button-text-danger-secondary-active: var(--scania-color-red-600);
93
- --component-button-text-danger-tertiary-default: var(--color-system-danger-default);
102
+ --component-button-text-danger-tertiary-default: var(--scania-color-red-400);
94
103
  --component-button-text-danger-tertiary-hover: var(--scania-color-red-500);
95
104
  --component-button-text-danger-tertiary-active: var(--scania-color-red-600);
96
105
  }
@@ -99,9 +108,9 @@
99
108
  .traton.tds-mode-light,
100
109
  .traton .tl-mode-light,
101
110
  .traton.tl-mode-light {
102
- --component-button-background-standard-primary-default: #004852;
103
- --component-button-background-standard-primary-hover: #003137;
104
- --component-button-background-standard-primary-active: #002429;
111
+ --component-button-background-standard-primary-default: var(--traton-color-blue-800);
112
+ --component-button-background-standard-primary-hover: var(--traton-color-blue-850);
113
+ --component-button-background-standard-primary-active: var(--traton-color-blue-900);
105
114
  --component-button-background-standard-secondary-default: var(--color-background-none);
106
115
  --component-button-background-standard-secondary-hover: var(--color-background-none);
107
116
  --component-button-background-standard-secondary-active: var(--color-background-none);
@@ -136,23 +145,32 @@
136
145
  --component-button-border-danger-tertiary-default: var(--color-border-none);
137
146
  --component-button-border-danger-tertiary-hover: var(--traton-color-red-400);
138
147
  --component-button-border-danger-tertiary-active: var(--traton-color-red-500);
139
- --component-button-icon-standard-primary-default: #fff;
148
+ --component-button-focus-ring-radius-default: var(--component--focus-ring-radius-full);
149
+ --component-button-icon-standard-primary-default: var(--traton-color-base-white);
140
150
  --component-button-icon-standard-primary-hover: var(
141
151
  --component-button-text-standard-primary-default
142
152
  );
143
153
  --component-button-icon-standard-primary-active: var(
144
154
  --component-button-text-standard-primary-default
145
155
  );
146
- --component-button-icon-standard-secondary-default: var(--color-text-strong);
147
- --component-button-icon-standard-secondary-hover: var(--color-text-strong);
148
- --component-button-icon-standard-secondary-active: var(--color-text-strong);
149
- --component-button-icon-standard-tertiary-default: var(--color-text-strong);
150
- --component-button-icon-standard-tertiary-hover: var(--color-text-strong);
151
- --component-button-icon-standard-tertiary-active: var(--color-text-strong);
152
- --component-button-icon-danger-primary-default: var(--color-text-inverse-strong);
153
- --component-button-icon-danger-primary-hover: var(--component-button-text-danger-primary-default);
156
+ --component-button-icon-standard-secondary-default: var(--traton-color-base-black);
157
+ --component-button-icon-standard-secondary-hover: var(
158
+ --component-button-icon-standard-secondary-default
159
+ );
160
+ --component-button-icon-standard-secondary-active: var(
161
+ --component-button-icon-standard-secondary-default
162
+ );
163
+ --component-button-icon-standard-tertiary-default: var(--traton-color-base-black);
164
+ --component-button-icon-standard-tertiary-hover: var(
165
+ --component-button-icon-standard-tertiary-default
166
+ );
167
+ --component-button-icon-standard-tertiary-active: var(
168
+ --component-button-icon-standard-tertiary-default
169
+ );
170
+ --component-button-icon-danger-primary-default: var(--traton-color-base-white);
171
+ --component-button-icon-danger-primary-hover: var(--component-button-icon-danger-primary-default);
154
172
  --component-button-icon-danger-primary-active: var(
155
- --component-button-text-danger-primary-default
173
+ --component-button-icon-danger-primary-default
156
174
  );
157
175
  --component-button-icon-danger-secondary-default: var(--color-system-danger-default);
158
176
  --component-button-icon-danger-secondary-hover: var(
@@ -169,7 +187,7 @@
169
187
  --component-button-text-danger-tertiary-default
170
188
  );
171
189
  --component-button-opacity-disabled: var(--traton-opacity-25);
172
- --component-button-text-standard-primary-default: #fff;
190
+ --component-button-text-standard-primary-default: var(--traton-color-base-white);
173
191
  --component-button-text-standard-primary-hover: var(
174
192
  --component-button-text-standard-primary-default
175
193
  );
@@ -182,7 +200,7 @@
182
200
  --component-button-text-standard-tertiary-default: var(--color-text-strong);
183
201
  --component-button-text-standard-tertiary-hover: var(--color-text-strong);
184
202
  --component-button-text-standard-tertiary-active: var(--color-text-strong);
185
- --component-button-text-danger-primary-default: var(--color-text-inverse-strong);
203
+ --component-button-text-danger-primary-default: var(--traton-color-base-white);
186
204
  --component-button-text-danger-primary-hover: var(--component-button-text-danger-primary-default);
187
205
  --component-button-text-danger-primary-active: var(
188
206
  --component-button-text-danger-primary-default
@@ -217,7 +235,7 @@
217
235
  --component-button-background-standard-tertiary-default: var(--color-background-none);
218
236
  --component-button-background-standard-tertiary-hover: var(--color-background-none);
219
237
  --component-button-background-standard-tertiary-active: var(--color-background-none);
220
- --component-button-background-danger-primary-default: var(--color-system-danger-subtle);
238
+ --component-button-background-danger-primary-default: var(--scania-color-red-400);
221
239
  --component-button-background-danger-primary-hover: var(--scania-color-red-500);
222
240
  --component-button-background-danger-primary-active: var(--scania-color-red-600);
223
241
  --component-button-background-danger-secondary-default: var(--color-background-none);
@@ -239,59 +257,68 @@
239
257
  --component-button-border-danger-primary-default: var(--color-border-none);
240
258
  --component-button-border-danger-primary-hover: var(--color-border-none);
241
259
  --component-button-border-danger-primary-active: var(--color-border-none);
242
- --component-button-border-danger-secondary-default: var(--color-system-danger-default);
260
+ --component-button-border-danger-secondary-default: var(--scania-color-red-400);
243
261
  --component-button-border-danger-secondary-hover: var(--scania-color-red-500);
244
262
  --component-button-border-danger-secondary-active: var(--scania-color-red-600);
245
263
  --component-button-border-danger-tertiary-default: var(--color-border-none);
246
264
  --component-button-border-danger-tertiary-hover: var(--scania-color-red-500);
247
265
  --component-button-border-danger-tertiary-active: var(--scania-color-red-600);
248
- --component-button-icon-standard-primary-default: var(--color-text-inverse-brand);
266
+ --component-button-focus-ring-radius-default: var(--component--focus-ring-radius-extra-large);
267
+ --component-button-icon-standard-primary-default: var(--scania-color-base-white);
249
268
  --component-button-icon-standard-primary-hover: var(
250
- --component-button-text-standard-primary-default
269
+ --component-button-icon-standard-primary-default
251
270
  );
252
271
  --component-button-icon-standard-primary-active: var(
253
- --component-button-text-standard-primary-default
272
+ --component-button-icon-standard-primary-default
273
+ );
274
+ --component-button-icon-standard-secondary-default: var(--scania-color-base-white);
275
+ --component-button-icon-standard-secondary-hover: var(
276
+ --component-button-icon-standard-secondary-default
277
+ );
278
+ --component-button-icon-standard-secondary-active: var(
279
+ --component-button-icon-standard-secondary-default
280
+ );
281
+ --component-button-icon-standard-tertiary-default: var(--scania-color-base-white);
282
+ --component-button-icon-standard-tertiary-hover: var(
283
+ --component-button-icon-standard-tertiary-default
284
+ );
285
+ --component-button-icon-standard-tertiary-active: var(
286
+ --component-button-icon-standard-tertiary-default
254
287
  );
255
- --component-button-icon-standard-secondary-default: var(--color-text-strong);
256
- --component-button-icon-standard-secondary-hover: var(--color-text-strong);
257
- --component-button-icon-standard-secondary-active: var(--color-text-strong);
258
- --component-button-icon-standard-tertiary-default: var(--color-text-strong);
259
- --component-button-icon-standard-tertiary-hover: var(--color-text-strong);
260
- --component-button-icon-standard-tertiary-active: var(--color-text-strong);
261
- --component-button-icon-danger-primary-default: var(--color-text-strong);
288
+ --component-button-icon-danger-primary-default: var(--scania-color-base-white);
262
289
  --component-button-icon-danger-primary-hover: var(--component-button-icon-danger-primary-default);
263
290
  --component-button-icon-danger-primary-active: var(
264
291
  --component-button-icon-danger-primary-default
265
292
  );
266
- --component-button-icon-danger-secondary-default: var(--color-system-danger-default);
293
+ --component-button-icon-danger-secondary-default: var(--scania-color-red-400);
267
294
  --component-button-icon-danger-secondary-hover: var(--scania-color-red-500);
268
295
  --component-button-icon-danger-secondary-active: var(--scania-color-red-600);
269
- --component-button-icon-danger-tertiary-default: var(--color-system-danger-default);
296
+ --component-button-icon-danger-tertiary-default: var(--scania-color-red-400);
270
297
  --component-button-icon-danger-tertiary-hover: var(--scania-color-red-500);
271
298
  --component-button-icon-danger-tertiary-active: var(--scania-color-red-600);
272
299
  --component-button-opacity-disabled: var(--scania-opacity-25);
273
- --component-button-text-standard-primary-default: var(--color-text-brand);
300
+ --component-button-text-standard-primary-default: var(--scania-color-base-white);
274
301
  --component-button-text-standard-primary-hover: var(
275
302
  --component-button-text-standard-primary-default
276
303
  );
277
304
  --component-button-text-standard-primary-active: var(
278
305
  --component-button-text-standard-primary-default
279
306
  );
280
- --component-button-text-standard-secondary-default: var(--color-text-strong);
281
- --component-button-text-standard-secondary-hover: var(--color-text-strong);
282
- --component-button-text-standard-secondary-active: var(--color-text-strong);
283
- --component-button-text-standard-tertiary-default: var(--color-text-strong);
284
- --component-button-text-standard-tertiary-hover: var(--color-text-strong);
285
- --component-button-text-standard-tertiary-active: var(--color-text-strong);
286
- --component-button-text-danger-primary-default: var(--color-text-strong);
307
+ --component-button-text-standard-secondary-default: var(--scania-color-base-white);
308
+ --component-button-text-standard-secondary-hover: var(--scania-color-base-white);
309
+ --component-button-text-standard-secondary-active: var(--scania-color-base-white);
310
+ --component-button-text-standard-tertiary-default: var(--scania-color-base-white);
311
+ --component-button-text-standard-tertiary-hover: var(--scania-color-base-white);
312
+ --component-button-text-standard-tertiary-active: var(--scania-color-base-white);
313
+ --component-button-text-danger-primary-default: var(--scania-color-base-white);
287
314
  --component-button-text-danger-primary-hover: var(--component-button-text-danger-primary-default);
288
315
  --component-button-text-danger-primary-active: var(
289
316
  --component-button-text-danger-primary-default
290
317
  );
291
- --component-button-text-danger-secondary-default: var(--color-system-danger-default);
318
+ --component-button-text-danger-secondary-default: var(--scania-color-red-400);
292
319
  --component-button-text-danger-secondary-hover: var(--scania-color-red-500);
293
320
  --component-button-text-danger-secondary-active: var(--scania-color-red-600);
294
- --component-button-text-danger-tertiary-default: var(--color-system-danger-default);
321
+ --component-button-text-danger-tertiary-default: var(--scania-color-red-400);
295
322
  --component-button-text-danger-tertiary-hover: var(--scania-color-red-500);
296
323
  --component-button-text-danger-tertiary-active: var(--scania-color-red-600);
297
324
  }
@@ -300,9 +327,9 @@
300
327
  .traton.tds-mode-dark,
301
328
  .traton .tl-mode-dark,
302
329
  .traton.tl-mode-dark {
303
- --component-button-background-standard-primary-default: #c2bfb6;
304
- --component-button-background-standard-primary-hover: #d6d4c9;
305
- --component-button-background-standard-primary-active: #a6a49c;
330
+ --component-button-background-standard-primary-default: var(--traton-color-grey-300);
331
+ --component-button-background-standard-primary-hover: var(--traton-color-grey-200);
332
+ --component-button-background-standard-primary-active: var(--traton-color-grey-400);
306
333
  --component-button-background-standard-secondary-default: var(--color-background-none);
307
334
  --component-button-background-standard-secondary-hover: var(--color-background-none);
308
335
  --component-button-background-standard-secondary-active: var(--color-background-none);
@@ -337,20 +364,29 @@
337
364
  --component-button-border-danger-tertiary-default: var(--color-border-none);
338
365
  --component-button-border-danger-tertiary-hover: var(--traton-color-red-400);
339
366
  --component-button-border-danger-tertiary-active: var(--traton-color-red-500);
340
- --component-button-icon-standard-primary-default: #000;
367
+ --component-button-focus-ring-radius-default: var(--component--focus-ring-radius-full);
368
+ --component-button-icon-standard-primary-default: var(--traton-color-base-black);
341
369
  --component-button-icon-standard-primary-hover: var(
342
370
  --component-button-text-standard-primary-default
343
371
  );
344
372
  --component-button-icon-standard-primary-active: var(
345
373
  --component-button-text-standard-primary-default
346
374
  );
347
- --component-button-icon-standard-secondary-default: var(--color-text-strong);
348
- --component-button-icon-standard-secondary-hover: var(--color-text-strong);
349
- --component-button-icon-standard-secondary-active: var(--color-text-strong);
350
- --component-button-icon-standard-tertiary-default: var(--color-text-strong);
351
- --component-button-icon-standard-tertiary-hover: var(--color-text-strong);
352
- --component-button-icon-standard-tertiary-active: var(--color-text-strong);
353
- --component-button-icon-danger-primary-default: var(--color-text-strong);
375
+ --component-button-icon-standard-secondary-default: var(--traton-color-base-white);
376
+ --component-button-icon-standard-secondary-hover: var(
377
+ --component-button-icon-standard-secondary-default
378
+ );
379
+ --component-button-icon-standard-secondary-active: var(
380
+ --component-button-icon-standard-secondary-default
381
+ );
382
+ --component-button-icon-standard-tertiary-default: var(--traton-color-base-white);
383
+ --component-button-icon-standard-tertiary-hover: var(
384
+ --component-button-icon-standard-tertiary-default
385
+ );
386
+ --component-button-icon-standard-tertiary-active: var(
387
+ --component-button-icon-standard-tertiary-default
388
+ );
389
+ --component-button-icon-danger-primary-default: var(--traton-color-base-white);
354
390
  --component-button-icon-danger-primary-hover: var(--component-button-icon-danger-primary-default);
355
391
  --component-button-icon-danger-primary-active: var(
356
392
  --component-button-icon-danger-primary-default
@@ -370,7 +406,7 @@
370
406
  --component-button-text-danger-tertiary-default
371
407
  );
372
408
  --component-button-opacity-disabled: var(--traton-opacity-25);
373
- --component-button-text-standard-primary-default: #000;
409
+ --component-button-text-standard-primary-default: var(--traton-color-base-black);
374
410
  --component-button-text-standard-primary-hover: var(
375
411
  --component-button-text-standard-primary-default
376
412
  );
@@ -383,7 +419,7 @@
383
419
  --component-button-text-standard-tertiary-default: var(--color-text-strong);
384
420
  --component-button-text-standard-tertiary-hover: var(--color-text-strong);
385
421
  --component-button-text-standard-tertiary-active: var(--color-text-strong);
386
- --component-button-text-danger-primary-default: var(--color-text-strong);
422
+ --component-button-text-danger-primary-default: var(--traton-color-base-white);
387
423
  --component-button-text-danger-primary-hover: var(--component-button-text-danger-primary-default);
388
424
  --component-button-text-danger-primary-active: var(
389
425
  --component-button-text-danger-primary-default
@@ -405,69 +441,54 @@
405
441
  }
406
442
 
407
443
  .tl-button {
408
- --button-transparent: transparent;
409
- --button-white: var(--color-brand-neutral-white);
410
- --button-black: var(--color-brand-neutral-black);
411
- --button-radius: var(--dimension-radius-for-surface-clickable);
444
+ --button-radius: calc(var(--component-button-border-radius-default) * 1px);
412
445
  --button-sm-only-icon-padding: 11px;
413
446
  --button-md-only-icon-padding: 13px;
414
447
  --button-lg-only-icon-padding: 17px;
415
- --button-primary-background: var(--color-background-accent-primary-default);
416
- --button-primary-background-hover: var(--color-background-accent-primary-hover);
417
- --button-primary-background-active: var(--color-background-accent-primary-pressed);
418
- --button-primary-background-disabled: var(--color-background-accent-primary-disabled);
419
- --button-primary-color: var(--component-button-primary-text);
420
- --button-primary-color-disabled: var(--color-foreground-text-disabled);
421
- --button-primary-border-color: var(--button-transparent);
422
- --button-primary-border-color-disabled: var(--button-transparent);
423
- --button-primary-background-focus: var(--color-background-accent-primary-focus);
424
- --button-primary-color-focus: var(--component-button-primary-text);
425
- --button-primary-border-color-focus: var(--color-foreground-border-accent-focus);
448
+ --button-opacity-disabled: calc(var(--component-button-opacity-disabled) / 100);
449
+ --button-primary-background: var(--component-button-background-standard-primary-default);
450
+ --button-primary-background-hover: var(--component-button-background-standard-primary-hover);
451
+ --button-primary-background-active: var(--component-button-background-standard-primary-active);
452
+ --button-primary-background-focus: var(--component-button-background-standard-primary-default);
453
+ --button-primary-color: var(--component-button-text-standard-primary-default);
454
+ --button-primary-color-focus: var(--component-button-text-standard-primary-hover);
455
+ --button-primary-border-color: var(--component-button-border-standard-primary-default);
456
+ --button-primary-border-color-focus: var(--component-button-border-standard-primary-hover);
426
457
  --button-primary-outline-color-focus: var(--color-foreground-border-accent-focus);
427
- --button-secondary-background: var(--button-transparent);
428
- --button-secondary-color: var(--color-foreground-text-strong);
429
- --button-secondary-border-color: var(--color-foreground-border-soft);
430
- --button-secondary-border-color-hover: var(--color-foreground-border-subtle);
431
- --button-secondary-border-color-active: var(--color-foreground-border-strong);
432
- --button-secondary-background-disabled: var(--button-transparent);
433
- --button-secondary-color-disabled: var(--color-foreground-text-disabled);
434
- --button-secondary-border-color-disabled: var(--color-foreground-border-discrete);
435
- --button-secondary-background-focus: var(--button-transparent);
436
- --button-secondary-color-focus: var(--color-foreground-text-strong);
437
- --button-secondary-border-color-focus: var(--color-foreground-border-accent-focus);
458
+ --button-primary-icon-color: var(--component-button-icon-standard-primary-default);
459
+ --button-secondary-background: var(--component-button-background-standard-secondary-default);
460
+ --button-secondary-background-focus: var(
461
+ --component-button-background-standard-secondary-default
462
+ );
463
+ --button-secondary-color: var(--component-button-text-standard-secondary-default);
464
+ --button-secondary-color-focus: var(--component-button-text-standard-secondary-hover);
465
+ --button-secondary-border-color: var(--component-button-border-standard-secondary-default);
466
+ --button-secondary-border-color-hover: var(--component-button-border-standard-secondary-hover);
467
+ --button-secondary-border-color-active: var(--component-button-border-standard-secondary-active);
468
+ --button-secondary-border-color-focus: var(--component-button-border-standard-secondary-hover);
438
469
  --button-secondary-outline-color-focus: var(--color-foreground-border-accent-focus);
439
- --button-ghost-background: var(--button-transparent);
440
- --button-ghost-color: var(--color-foreground-text-strong);
441
- --button-ghost-border-color: var(--button-transparent);
442
- --button-ghost-border-color-hover: var(--color-foreground-border-subtle);
443
- --button-ghost-border-color-active: var(--color-foreground-border-strong);
444
- --button-ghost-color-disabled: var(--color-foreground-text-disabled);
445
- --button-ghost-border-color-disabled: var(--button-transparent);
446
- --button-ghost-background-focus: var(--button-transparent);
447
- --button-ghost-color-focus: var(--color-foreground-text-strong);
448
- --button-ghost-border-color-focus: var(--color-foreground-border-accent-focus);
470
+ --button-secondary-icon-color: var(--component-button-icon-standard-secondary-default);
471
+ --button-ghost-background: var(--component-button-background-standard-tertiary-default);
472
+ --button-ghost-background-focus: var(--component-button-background-standard-tertiary-default);
473
+ --button-ghost-color: var(--component-button-text-standard-tertiary-default);
474
+ --button-ghost-color-focus: var(--component-button-text-standard-tertiary-hover);
475
+ --button-ghost-border-color: var(--component-button-border-standard-tertiary-default);
476
+ --button-ghost-border-color-hover: var(--component-button-border-standard-tertiary-hover);
477
+ --button-ghost-border-color-active: var(--component-button-border-standard-tertiary-active);
478
+ --button-ghost-border-color-focus: var(--component-button-border-standard-tertiary-hover);
449
479
  --button-ghost-outline-color-focus: var(--color-foreground-border-accent-focus);
450
- --button-danger-background: var(--color-background-accent-danger-default);
451
- --button-danger-color: var(--button-white);
452
- --button-danger-border-color: var(--button-transparent);
453
- --button-danger-background-hover: var(--color-background-accent-danger-hover);
454
- --button-danger-background-active: var(--color-background-accent-danger-pressed);
455
- --button-danger-background-disabled: var(--color-background-accent-danger-disabled);
456
- --button-danger-color-disabled: var(--color-foreground-text-disabled);
457
- --button-danger-border-color-disabled: var(--button-transparent);
458
- --button-danger-border-color-active: var(--color-background-accent-danger-pressed);
459
- --button-danger-background-focus: var(--color-background-accent-danger-focus);
460
- --button-danger-color-focus: var(--button-white);
461
- --button-danger-border-color-focus: var(--button-transparent);
480
+ --button-ghost-icon-color: var(--component-button-icon-standard-tertiary-default);
481
+ --button-danger-background: var(--component-button-background-danger-primary-default);
482
+ --button-danger-background-hover: var(--component-button-background-danger-primary-hover);
483
+ --button-danger-background-active: var(--component-button-background-danger-primary-active);
484
+ --button-danger-background-focus: var(--component-button-background-danger-primary-default);
485
+ --button-danger-color: var(--component-button-text-danger-primary-default);
486
+ --button-danger-color-focus: var(--component-button-text-danger-primary-hover);
487
+ --button-danger-border-color: var(--component-button-border-danger-primary-default);
488
+ --button-danger-border-color-active: var(--component-button-border-danger-primary-active);
489
+ --button-danger-border-color-focus: var(--component-button-border-danger-primary-hover);
462
490
  --button-danger-outline-color-focus: var(--color-foreground-border-accent-focus);
463
- }
464
- .tl-button .tl-button--primary {
465
- --button-primary-background-disabled: var(--color-background-accent-primary-disabled);
466
- --button-danger-background-disabled: var(--color-background-accent-danger-disabled);
467
- }
468
- .tl-button .tl-button--secondary {
469
- --button-primary-background-disabled: var(--button-white);
470
- --button-danger-background-disabled: var(--button-white);
491
+ --button-danger-icon-color: var(--component-button-icon-danger-primary-default);
471
492
  }
472
493
 
473
494
  .scania .tl-button {
@@ -516,15 +537,15 @@
516
537
  color: var(--button-primary-color);
517
538
  border-color: var(--button-primary-border-color);
518
539
  }
540
+ .tl-button--primary .tl-icon {
541
+ color: var(--button-primary-icon-color);
542
+ }
519
543
  .tl-button--primary:hover:not(:disabled) {
520
544
  background-color: var(--button-primary-background-hover);
521
545
  }
522
546
  .tl-button--primary:disabled {
523
- background-color: var(--button-primary-background-disabled);
524
- color: var(--button-primary-color-disabled);
525
- border-color: var(--button-primary-border-color-disabled);
526
547
  cursor: not-allowed;
527
- opacity: 0.6;
548
+ opacity: var(--button-opacity-disabled);
528
549
  }
529
550
  .tl-button--primary:focus-visible:not(:disabled) {
530
551
  background: var(--button-primary-background-focus);
@@ -545,15 +566,15 @@
545
566
  color: var(--button-secondary-color);
546
567
  border-color: var(--button-secondary-border-color);
547
568
  }
569
+ .tl-button--secondary .tl-icon {
570
+ color: var(--button-secondary-icon-color);
571
+ }
548
572
  .tl-button--secondary:hover:not(:disabled) {
549
573
  border-color: var(--button-secondary-border-color-hover);
550
574
  }
551
575
  .tl-button--secondary:disabled {
552
- background-color: var(--button-secondary-background-disabled);
553
- color: var(--button-secondary-color-disabled);
554
- border-color: var(--button-secondary-border-color-disabled);
555
576
  cursor: not-allowed;
556
- opacity: 0.6;
577
+ opacity: var(--button-opacity-disabled);
557
578
  }
558
579
  .tl-button--secondary:focus-visible:not(:disabled) {
559
580
  background: var(--button-secondary-background-focus);
@@ -572,13 +593,15 @@
572
593
  color: var(--button-ghost-color);
573
594
  border-color: var(--button-ghost-border-color);
574
595
  }
596
+ .tl-button--ghost .tl-icon {
597
+ color: var(--button-ghost-icon-color);
598
+ }
575
599
  .tl-button--ghost:hover:not(:disabled) {
576
600
  border-color: var(--button-ghost-border-color-hover);
577
601
  }
578
602
  .tl-button--ghost:disabled {
579
- color: var(--button-ghost-color-disabled);
580
603
  cursor: not-allowed;
581
- opacity: 0.6;
604
+ opacity: var(--button-opacity-disabled);
582
605
  }
583
606
  .tl-button--ghost:focus-visible:not(:disabled) {
584
607
  background: var(--button-ghost-background-focus);
@@ -597,15 +620,15 @@
597
620
  color: var(--button-danger-color);
598
621
  border-color: var(--button-danger-border-color);
599
622
  }
623
+ .tl-button--danger .tl-icon {
624
+ color: var(--button-danger-icon-color);
625
+ }
600
626
  .tl-button--danger:hover:not(:disabled) {
601
627
  background-color: var(--button-danger-background-hover);
602
628
  }
603
629
  .tl-button--danger:disabled {
604
- background-color: var(--button-danger-background-disabled);
605
- color: var(--button-danger-color-disabled);
606
- border-color: var(--button-danger-border-color-disabled);
607
630
  cursor: not-allowed;
608
- opacity: 0.6;
631
+ opacity: var(--button-opacity-disabled);
609
632
  }
610
633
  .tl-button--danger:focus-visible:not(:disabled) {
611
634
  background: var(--button-danger-background-focus);
package/dist/tl-card.css CHANGED
@@ -7,20 +7,26 @@
7
7
  .scania.tds-mode-light,
8
8
  .scania .tl-mode-light,
9
9
  .scania.tl-mode-light {
10
- --component-card-background-primary: #fff;
11
- --component-card-background-secondary: #fff;
10
+ --component-card-background-primary-default: var(--scania-color-base-white);
11
+ --component-card-background-secondary-default: var(--scania-color-base-white);
12
12
  --component-card-border-radius-default: var(--scania-unit-4);
13
13
  --component-card-space-padding-default: var(--scania-unit-16);
14
+ --component-card-text-title-default: var(--color-text-strong);
15
+ --component-card-text-subtitle-default: var(--color-text-soft);
16
+ --component-card-text-body-default: var(--color-text-defined);
14
17
  }
15
18
 
16
19
  .traton .tds-mode-light,
17
20
  .traton.tds-mode-light,
18
21
  .traton .tl-mode-light,
19
22
  .traton.tl-mode-light {
20
- --component-card-background-primary: var(--traton-color-transparent-invisible-light);
21
- --component-card-background-secondary: var(--traton-color-transparent-invisible-light);
23
+ --component-card-background-primary-default: var(--traton-color-transparent-invisible-light);
24
+ --component-card-background-secondary-default: var(--traton-color-transparent-invisible-light);
22
25
  --component-card-border-radius-default: var(--traton-unit-0);
23
26
  --component-card-space-padding-default: var(--traton-unit-0);
27
+ --component-card-text-title-default: var(--color-text-strong);
28
+ --component-card-text-subtitle-default: var(--color-text-soft);
29
+ --component-card-text-body-default: var(--color-text-defined);
24
30
  }
25
31
 
26
32
  .tds-mode-dark,
@@ -28,20 +34,26 @@
28
34
  .scania.tds-mode-dark,
29
35
  .scania .tl-mode-dark,
30
36
  .scania.tl-mode-dark {
31
- --component-card-background-primary: var(--color-background-layer-01);
32
- --component-card-background-secondary: var(--color-background-layer-02);
37
+ --component-card-background-primary-default: var(--color-background-layer-01);
38
+ --component-card-background-secondary-default: var(--color-background-layer-02);
33
39
  --component-card-border-radius-default: var(--scania-unit-4);
34
40
  --component-card-space-padding-default: var(--scania-unit-16);
41
+ --component-card-text-title-default: var(--color-text-strong);
42
+ --component-card-text-subtitle-default: var(--color-text-soft);
43
+ --component-card-text-body-default: var(--color-text-defined);
35
44
  }
36
45
 
37
46
  .traton .tds-mode-dark,
38
47
  .traton.tds-mode-dark,
39
48
  .traton .tl-mode-dark,
40
49
  .traton.tl-mode-dark {
41
- --component-card-background-primary: var(--traton-color-transparent-invisible-dark);
42
- --component-card-background-secondary: var(--traton-color-transparent-invisible-dark);
50
+ --component-card-background-primary-default: var(--traton-color-transparent-invisible-dark);
51
+ --component-card-background-secondary-default: var(--traton-color-transparent-invisible-dark);
43
52
  --component-card-border-radius-default: var(--traton-unit-0);
44
53
  --component-card-space-padding-default: var(--traton-unit-0);
54
+ --component-card-text-title-default: var(--color-text-strong);
55
+ --component-card-text-subtitle-default: var(--color-text-soft);
56
+ --component-card-text-body-default: var(--color-text-defined);
45
57
  }
46
58
 
47
59
  .tl-card {
package/dist/tl-chip.css CHANGED
@@ -1,20 +1,20 @@
1
1
  /* Typography Usage mixins */
2
2
  .tl-chip {
3
- --chip-text: var(--component-chip-text-default);
3
+ --chip-text: var(--component-chip-text-standard-default);
4
4
  --chip-text-active: var(--component-chip-text-selected-default);
5
- --chip-background: var(--component-chip-background-default);
6
- --chip-background-hover: var(--component-chip-background-hover);
7
- --chip-background-focus: var(--component-chip-background-hover);
5
+ --chip-background: var(--component-chip-background-standard-default);
6
+ --chip-background-hover: var(--component-chip-background-standard-hover);
7
+ --chip-background-focus: var(--component-chip-background-standard-hover);
8
8
  --chip-background-active: var(--component-chip-background-selected-default);
9
9
  --chip-background-active-hover: var(--component-chip-background-selected-hover);
10
10
  --chip-focused-on-selected: var(--component-chip-background-selected-default);
11
- --chip-border: var(--component-chip-border-default);
12
- --chip-border-hover: var(--component-chip-border-hover);
11
+ --chip-border: var(--component-chip-border-standard-default);
12
+ --chip-border-hover: var(--component-chip-border-standard-hover);
13
13
  --chip-border-selected: var(--component-chip-border-selected-default);
14
14
  --chip-border-selected-hover: var(--component-chip-border-selected-hover);
15
15
  --chip-border-radius: calc(var(--component-chip-border-radius-default) * 1px);
16
- --chip-opacity-disabled: var(--component-chip-opacity-disabled);
17
- --chip-icon-fill: var(--component-chip-text-default);
16
+ --chip-opacity-disabled: calc(var(--component-chip-opacity-disabled) / 100);
17
+ --chip-icon-fill: var(--component-chip-text-standard-default);
18
18
  --chip-icon-fill-active: var(--component-chip-text-selected-default);
19
19
  }
20
20