@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-slider.css CHANGED
@@ -37,14 +37,14 @@
37
37
  .scania.tl-mode-light {
38
38
  --component-button-background-standard-primary-default: var(--scania-color-blue-600);
39
39
  --component-button-background-standard-primary-hover: var(--scania-color-blue-700);
40
- --component-button-background-standard-primary-active: var(--scania-color-blue-700);
40
+ --component-button-background-standard-primary-active: var(--scania-color-blue-800);
41
41
  --component-button-background-standard-secondary-default: var(--color-background-none);
42
42
  --component-button-background-standard-secondary-hover: var(--color-background-none);
43
43
  --component-button-background-standard-secondary-active: var(--color-background-none);
44
44
  --component-button-background-standard-tertiary-default: var(--color-background-none);
45
45
  --component-button-background-standard-tertiary-hover: var(--color-background-none);
46
46
  --component-button-background-standard-tertiary-active: var(--color-background-none);
47
- --component-button-background-danger-primary-default: var(--color-system-danger-default);
47
+ --component-button-background-danger-primary-default: var(--scania-color-red-400);
48
48
  --component-button-background-danger-primary-hover: var(--scania-color-red-500);
49
49
  --component-button-background-danger-primary-active: var(--scania-color-red-600);
50
50
  --component-button-background-danger-secondary-default: var(--color-background-none);
@@ -66,59 +66,68 @@
66
66
  --component-button-border-danger-primary-default: var(--color-border-none);
67
67
  --component-button-border-danger-primary-hover: var(--color-border-none);
68
68
  --component-button-border-danger-primary-active: var(--color-border-none);
69
- --component-button-border-danger-secondary-default: var(--color-system-danger-default);
69
+ --component-button-border-danger-secondary-default: var(--scania-color-red-400);
70
70
  --component-button-border-danger-secondary-hover: var(--scania-color-red-500);
71
71
  --component-button-border-danger-secondary-active: var(--scania-color-red-600);
72
72
  --component-button-border-danger-tertiary-default: var(--color-border-none);
73
73
  --component-button-border-danger-tertiary-hover: var(--scania-color-red-500);
74
74
  --component-button-border-danger-tertiary-active: var(--scania-color-red-600);
75
- --component-button-icon-standard-primary-default: var(--color-text-inverse-brand);
75
+ --component-button-focus-ring-radius-default: var(--component--focus-ring-radius-extra-large);
76
+ --component-button-icon-standard-primary-default: var(--scania-color-base-white);
76
77
  --component-button-icon-standard-primary-hover: var(
77
- --component-button-text-standard-primary-default
78
+ --component-button-icon-standard-primary-default
78
79
  );
79
80
  --component-button-icon-standard-primary-active: var(
80
- --component-button-text-standard-primary-default
81
+ --component-button-icon-standard-primary-default
82
+ );
83
+ --component-button-icon-standard-secondary-default: var(--scania-color-base-black);
84
+ --component-button-icon-standard-secondary-hover: var(
85
+ --component-button-icon-standard-secondary-default
86
+ );
87
+ --component-button-icon-standard-secondary-active: var(
88
+ --component-button-icon-standard-secondary-default
89
+ );
90
+ --component-button-icon-standard-tertiary-default: var(--scania-color-base-black);
91
+ --component-button-icon-standard-tertiary-hover: var(
92
+ --component-button-icon-standard-tertiary-default
81
93
  );
82
- --component-button-icon-standard-secondary-default: var(--color-text-strong);
83
- --component-button-icon-standard-secondary-hover: var(--color-text-strong);
84
- --component-button-icon-standard-secondary-active: var(--color-text-strong);
85
- --component-button-icon-standard-tertiary-default: var(--color-text-strong);
86
- --component-button-icon-standard-tertiary-hover: var(--color-text-strong);
87
- --component-button-icon-standard-tertiary-active: var(--color-text-strong);
88
- --component-button-icon-danger-primary-default: var(--color-text-inverse-strong);
89
- --component-button-icon-danger-primary-hover: var(--component-button-text-danger-primary-default);
94
+ --component-button-icon-standard-tertiary-active: var(
95
+ --component-button-icon-standard-tertiary-default
96
+ );
97
+ --component-button-icon-danger-primary-default: var(--scania-color-base-white);
98
+ --component-button-icon-danger-primary-hover: var(--component-button-icon-danger-primary-default);
90
99
  --component-button-icon-danger-primary-active: var(
91
- --component-button-text-danger-primary-default
100
+ --component-button-icon-danger-primary-default
92
101
  );
93
- --component-button-icon-danger-secondary-default: var(--color-system-danger-default);
102
+ --component-button-icon-danger-secondary-default: var(--scania-color-red-400);
94
103
  --component-button-icon-danger-secondary-hover: var(--scania-color-red-500);
95
104
  --component-button-icon-danger-secondary-active: var(--scania-color-red-600);
96
- --component-button-icon-danger-tertiary-default: var(--color-system-danger-default);
105
+ --component-button-icon-danger-tertiary-default: var(--scania-color-red-400);
97
106
  --component-button-icon-danger-tertiary-hover: var(--scania-color-red-500);
98
107
  --component-button-icon-danger-tertiary-active: var(--scania-color-red-600);
99
108
  --component-button-opacity-disabled: var(--scania-opacity-25);
100
- --component-button-text-standard-primary-default: var(--color-text-inverse-brand);
109
+ --component-button-text-standard-primary-default: var(--scania-color-base-white);
101
110
  --component-button-text-standard-primary-hover: var(
102
111
  --component-button-text-standard-primary-default
103
112
  );
104
113
  --component-button-text-standard-primary-active: var(
105
114
  --component-button-text-standard-primary-default
106
115
  );
107
- --component-button-text-standard-secondary-default: var(--color-text-strong);
108
- --component-button-text-standard-secondary-hover: var(--color-text-strong);
109
- --component-button-text-standard-secondary-active: var(--color-text-strong);
110
- --component-button-text-standard-tertiary-default: var(--color-text-strong);
111
- --component-button-text-standard-tertiary-hover: var(--color-text-strong);
112
- --component-button-text-standard-tertiary-active: var(--color-text-strong);
113
- --component-button-text-danger-primary-default: var(--color-text-inverse-strong);
116
+ --component-button-text-standard-secondary-default: var(--scania-color-base-black);
117
+ --component-button-text-standard-secondary-hover: var(--scania-color-base-black);
118
+ --component-button-text-standard-secondary-active: var(--scania-color-base-black);
119
+ --component-button-text-standard-tertiary-default: var(--scania-color-base-black);
120
+ --component-button-text-standard-tertiary-hover: var(--scania-color-base-black);
121
+ --component-button-text-standard-tertiary-active: var(--scania-color-base-black);
122
+ --component-button-text-danger-primary-default: var(--scania-color-base-white);
114
123
  --component-button-text-danger-primary-hover: var(--component-button-text-danger-primary-default);
115
124
  --component-button-text-danger-primary-active: var(
116
125
  --component-button-text-danger-primary-default
117
126
  );
118
- --component-button-text-danger-secondary-default: var(--color-system-danger-default);
127
+ --component-button-text-danger-secondary-default: var(--scania-color-red-400);
119
128
  --component-button-text-danger-secondary-hover: var(--scania-color-red-500);
120
129
  --component-button-text-danger-secondary-active: var(--scania-color-red-600);
121
- --component-button-text-danger-tertiary-default: var(--color-system-danger-default);
130
+ --component-button-text-danger-tertiary-default: var(--scania-color-red-400);
122
131
  --component-button-text-danger-tertiary-hover: var(--scania-color-red-500);
123
132
  --component-button-text-danger-tertiary-active: var(--scania-color-red-600);
124
133
  }
@@ -127,9 +136,9 @@
127
136
  .traton.tds-mode-light,
128
137
  .traton .tl-mode-light,
129
138
  .traton.tl-mode-light {
130
- --component-button-background-standard-primary-default: #004852;
131
- --component-button-background-standard-primary-hover: #003137;
132
- --component-button-background-standard-primary-active: #002429;
139
+ --component-button-background-standard-primary-default: var(--traton-color-blue-800);
140
+ --component-button-background-standard-primary-hover: var(--traton-color-blue-850);
141
+ --component-button-background-standard-primary-active: var(--traton-color-blue-900);
133
142
  --component-button-background-standard-secondary-default: var(--color-background-none);
134
143
  --component-button-background-standard-secondary-hover: var(--color-background-none);
135
144
  --component-button-background-standard-secondary-active: var(--color-background-none);
@@ -164,23 +173,32 @@
164
173
  --component-button-border-danger-tertiary-default: var(--color-border-none);
165
174
  --component-button-border-danger-tertiary-hover: var(--traton-color-red-400);
166
175
  --component-button-border-danger-tertiary-active: var(--traton-color-red-500);
167
- --component-button-icon-standard-primary-default: #fff;
176
+ --component-button-focus-ring-radius-default: var(--component--focus-ring-radius-full);
177
+ --component-button-icon-standard-primary-default: var(--traton-color-base-white);
168
178
  --component-button-icon-standard-primary-hover: var(
169
179
  --component-button-text-standard-primary-default
170
180
  );
171
181
  --component-button-icon-standard-primary-active: var(
172
182
  --component-button-text-standard-primary-default
173
183
  );
174
- --component-button-icon-standard-secondary-default: var(--color-text-strong);
175
- --component-button-icon-standard-secondary-hover: var(--color-text-strong);
176
- --component-button-icon-standard-secondary-active: var(--color-text-strong);
177
- --component-button-icon-standard-tertiary-default: var(--color-text-strong);
178
- --component-button-icon-standard-tertiary-hover: var(--color-text-strong);
179
- --component-button-icon-standard-tertiary-active: var(--color-text-strong);
180
- --component-button-icon-danger-primary-default: var(--color-text-inverse-strong);
181
- --component-button-icon-danger-primary-hover: var(--component-button-text-danger-primary-default);
184
+ --component-button-icon-standard-secondary-default: var(--traton-color-base-black);
185
+ --component-button-icon-standard-secondary-hover: var(
186
+ --component-button-icon-standard-secondary-default
187
+ );
188
+ --component-button-icon-standard-secondary-active: var(
189
+ --component-button-icon-standard-secondary-default
190
+ );
191
+ --component-button-icon-standard-tertiary-default: var(--traton-color-base-black);
192
+ --component-button-icon-standard-tertiary-hover: var(
193
+ --component-button-icon-standard-tertiary-default
194
+ );
195
+ --component-button-icon-standard-tertiary-active: var(
196
+ --component-button-icon-standard-tertiary-default
197
+ );
198
+ --component-button-icon-danger-primary-default: var(--traton-color-base-white);
199
+ --component-button-icon-danger-primary-hover: var(--component-button-icon-danger-primary-default);
182
200
  --component-button-icon-danger-primary-active: var(
183
- --component-button-text-danger-primary-default
201
+ --component-button-icon-danger-primary-default
184
202
  );
185
203
  --component-button-icon-danger-secondary-default: var(--color-system-danger-default);
186
204
  --component-button-icon-danger-secondary-hover: var(
@@ -197,7 +215,7 @@
197
215
  --component-button-text-danger-tertiary-default
198
216
  );
199
217
  --component-button-opacity-disabled: var(--traton-opacity-25);
200
- --component-button-text-standard-primary-default: #fff;
218
+ --component-button-text-standard-primary-default: var(--traton-color-base-white);
201
219
  --component-button-text-standard-primary-hover: var(
202
220
  --component-button-text-standard-primary-default
203
221
  );
@@ -210,7 +228,7 @@
210
228
  --component-button-text-standard-tertiary-default: var(--color-text-strong);
211
229
  --component-button-text-standard-tertiary-hover: var(--color-text-strong);
212
230
  --component-button-text-standard-tertiary-active: var(--color-text-strong);
213
- --component-button-text-danger-primary-default: var(--color-text-inverse-strong);
231
+ --component-button-text-danger-primary-default: var(--traton-color-base-white);
214
232
  --component-button-text-danger-primary-hover: var(--component-button-text-danger-primary-default);
215
233
  --component-button-text-danger-primary-active: var(
216
234
  --component-button-text-danger-primary-default
@@ -245,7 +263,7 @@
245
263
  --component-button-background-standard-tertiary-default: var(--color-background-none);
246
264
  --component-button-background-standard-tertiary-hover: var(--color-background-none);
247
265
  --component-button-background-standard-tertiary-active: var(--color-background-none);
248
- --component-button-background-danger-primary-default: var(--color-system-danger-subtle);
266
+ --component-button-background-danger-primary-default: var(--scania-color-red-400);
249
267
  --component-button-background-danger-primary-hover: var(--scania-color-red-500);
250
268
  --component-button-background-danger-primary-active: var(--scania-color-red-600);
251
269
  --component-button-background-danger-secondary-default: var(--color-background-none);
@@ -267,59 +285,68 @@
267
285
  --component-button-border-danger-primary-default: var(--color-border-none);
268
286
  --component-button-border-danger-primary-hover: var(--color-border-none);
269
287
  --component-button-border-danger-primary-active: var(--color-border-none);
270
- --component-button-border-danger-secondary-default: var(--color-system-danger-default);
288
+ --component-button-border-danger-secondary-default: var(--scania-color-red-400);
271
289
  --component-button-border-danger-secondary-hover: var(--scania-color-red-500);
272
290
  --component-button-border-danger-secondary-active: var(--scania-color-red-600);
273
291
  --component-button-border-danger-tertiary-default: var(--color-border-none);
274
292
  --component-button-border-danger-tertiary-hover: var(--scania-color-red-500);
275
293
  --component-button-border-danger-tertiary-active: var(--scania-color-red-600);
276
- --component-button-icon-standard-primary-default: var(--color-text-inverse-brand);
294
+ --component-button-focus-ring-radius-default: var(--component--focus-ring-radius-extra-large);
295
+ --component-button-icon-standard-primary-default: var(--scania-color-base-white);
277
296
  --component-button-icon-standard-primary-hover: var(
278
- --component-button-text-standard-primary-default
297
+ --component-button-icon-standard-primary-default
279
298
  );
280
299
  --component-button-icon-standard-primary-active: var(
281
- --component-button-text-standard-primary-default
300
+ --component-button-icon-standard-primary-default
301
+ );
302
+ --component-button-icon-standard-secondary-default: var(--scania-color-base-white);
303
+ --component-button-icon-standard-secondary-hover: var(
304
+ --component-button-icon-standard-secondary-default
305
+ );
306
+ --component-button-icon-standard-secondary-active: var(
307
+ --component-button-icon-standard-secondary-default
308
+ );
309
+ --component-button-icon-standard-tertiary-default: var(--scania-color-base-white);
310
+ --component-button-icon-standard-tertiary-hover: var(
311
+ --component-button-icon-standard-tertiary-default
312
+ );
313
+ --component-button-icon-standard-tertiary-active: var(
314
+ --component-button-icon-standard-tertiary-default
282
315
  );
283
- --component-button-icon-standard-secondary-default: var(--color-text-strong);
284
- --component-button-icon-standard-secondary-hover: var(--color-text-strong);
285
- --component-button-icon-standard-secondary-active: var(--color-text-strong);
286
- --component-button-icon-standard-tertiary-default: var(--color-text-strong);
287
- --component-button-icon-standard-tertiary-hover: var(--color-text-strong);
288
- --component-button-icon-standard-tertiary-active: var(--color-text-strong);
289
- --component-button-icon-danger-primary-default: var(--color-text-strong);
316
+ --component-button-icon-danger-primary-default: var(--scania-color-base-white);
290
317
  --component-button-icon-danger-primary-hover: var(--component-button-icon-danger-primary-default);
291
318
  --component-button-icon-danger-primary-active: var(
292
319
  --component-button-icon-danger-primary-default
293
320
  );
294
- --component-button-icon-danger-secondary-default: var(--color-system-danger-default);
321
+ --component-button-icon-danger-secondary-default: var(--scania-color-red-400);
295
322
  --component-button-icon-danger-secondary-hover: var(--scania-color-red-500);
296
323
  --component-button-icon-danger-secondary-active: var(--scania-color-red-600);
297
- --component-button-icon-danger-tertiary-default: var(--color-system-danger-default);
324
+ --component-button-icon-danger-tertiary-default: var(--scania-color-red-400);
298
325
  --component-button-icon-danger-tertiary-hover: var(--scania-color-red-500);
299
326
  --component-button-icon-danger-tertiary-active: var(--scania-color-red-600);
300
327
  --component-button-opacity-disabled: var(--scania-opacity-25);
301
- --component-button-text-standard-primary-default: var(--color-text-brand);
328
+ --component-button-text-standard-primary-default: var(--scania-color-base-white);
302
329
  --component-button-text-standard-primary-hover: var(
303
330
  --component-button-text-standard-primary-default
304
331
  );
305
332
  --component-button-text-standard-primary-active: var(
306
333
  --component-button-text-standard-primary-default
307
334
  );
308
- --component-button-text-standard-secondary-default: var(--color-text-strong);
309
- --component-button-text-standard-secondary-hover: var(--color-text-strong);
310
- --component-button-text-standard-secondary-active: var(--color-text-strong);
311
- --component-button-text-standard-tertiary-default: var(--color-text-strong);
312
- --component-button-text-standard-tertiary-hover: var(--color-text-strong);
313
- --component-button-text-standard-tertiary-active: var(--color-text-strong);
314
- --component-button-text-danger-primary-default: var(--color-text-strong);
335
+ --component-button-text-standard-secondary-default: var(--scania-color-base-white);
336
+ --component-button-text-standard-secondary-hover: var(--scania-color-base-white);
337
+ --component-button-text-standard-secondary-active: var(--scania-color-base-white);
338
+ --component-button-text-standard-tertiary-default: var(--scania-color-base-white);
339
+ --component-button-text-standard-tertiary-hover: var(--scania-color-base-white);
340
+ --component-button-text-standard-tertiary-active: var(--scania-color-base-white);
341
+ --component-button-text-danger-primary-default: var(--scania-color-base-white);
315
342
  --component-button-text-danger-primary-hover: var(--component-button-text-danger-primary-default);
316
343
  --component-button-text-danger-primary-active: var(
317
344
  --component-button-text-danger-primary-default
318
345
  );
319
- --component-button-text-danger-secondary-default: var(--color-system-danger-default);
346
+ --component-button-text-danger-secondary-default: var(--scania-color-red-400);
320
347
  --component-button-text-danger-secondary-hover: var(--scania-color-red-500);
321
348
  --component-button-text-danger-secondary-active: var(--scania-color-red-600);
322
- --component-button-text-danger-tertiary-default: var(--color-system-danger-default);
349
+ --component-button-text-danger-tertiary-default: var(--scania-color-red-400);
323
350
  --component-button-text-danger-tertiary-hover: var(--scania-color-red-500);
324
351
  --component-button-text-danger-tertiary-active: var(--scania-color-red-600);
325
352
  }
@@ -328,9 +355,9 @@
328
355
  .traton.tds-mode-dark,
329
356
  .traton .tl-mode-dark,
330
357
  .traton.tl-mode-dark {
331
- --component-button-background-standard-primary-default: #c2bfb6;
332
- --component-button-background-standard-primary-hover: #d6d4c9;
333
- --component-button-background-standard-primary-active: #a6a49c;
358
+ --component-button-background-standard-primary-default: var(--traton-color-grey-300);
359
+ --component-button-background-standard-primary-hover: var(--traton-color-grey-200);
360
+ --component-button-background-standard-primary-active: var(--traton-color-grey-400);
334
361
  --component-button-background-standard-secondary-default: var(--color-background-none);
335
362
  --component-button-background-standard-secondary-hover: var(--color-background-none);
336
363
  --component-button-background-standard-secondary-active: var(--color-background-none);
@@ -365,20 +392,29 @@
365
392
  --component-button-border-danger-tertiary-default: var(--color-border-none);
366
393
  --component-button-border-danger-tertiary-hover: var(--traton-color-red-400);
367
394
  --component-button-border-danger-tertiary-active: var(--traton-color-red-500);
368
- --component-button-icon-standard-primary-default: #000;
395
+ --component-button-focus-ring-radius-default: var(--component--focus-ring-radius-full);
396
+ --component-button-icon-standard-primary-default: var(--traton-color-base-black);
369
397
  --component-button-icon-standard-primary-hover: var(
370
398
  --component-button-text-standard-primary-default
371
399
  );
372
400
  --component-button-icon-standard-primary-active: var(
373
401
  --component-button-text-standard-primary-default
374
402
  );
375
- --component-button-icon-standard-secondary-default: var(--color-text-strong);
376
- --component-button-icon-standard-secondary-hover: var(--color-text-strong);
377
- --component-button-icon-standard-secondary-active: var(--color-text-strong);
378
- --component-button-icon-standard-tertiary-default: var(--color-text-strong);
379
- --component-button-icon-standard-tertiary-hover: var(--color-text-strong);
380
- --component-button-icon-standard-tertiary-active: var(--color-text-strong);
381
- --component-button-icon-danger-primary-default: var(--color-text-strong);
403
+ --component-button-icon-standard-secondary-default: var(--traton-color-base-white);
404
+ --component-button-icon-standard-secondary-hover: var(
405
+ --component-button-icon-standard-secondary-default
406
+ );
407
+ --component-button-icon-standard-secondary-active: var(
408
+ --component-button-icon-standard-secondary-default
409
+ );
410
+ --component-button-icon-standard-tertiary-default: var(--traton-color-base-white);
411
+ --component-button-icon-standard-tertiary-hover: var(
412
+ --component-button-icon-standard-tertiary-default
413
+ );
414
+ --component-button-icon-standard-tertiary-active: var(
415
+ --component-button-icon-standard-tertiary-default
416
+ );
417
+ --component-button-icon-danger-primary-default: var(--traton-color-base-white);
382
418
  --component-button-icon-danger-primary-hover: var(--component-button-icon-danger-primary-default);
383
419
  --component-button-icon-danger-primary-active: var(
384
420
  --component-button-icon-danger-primary-default
@@ -398,7 +434,7 @@
398
434
  --component-button-text-danger-tertiary-default
399
435
  );
400
436
  --component-button-opacity-disabled: var(--traton-opacity-25);
401
- --component-button-text-standard-primary-default: #000;
437
+ --component-button-text-standard-primary-default: var(--traton-color-base-black);
402
438
  --component-button-text-standard-primary-hover: var(
403
439
  --component-button-text-standard-primary-default
404
440
  );
@@ -411,7 +447,7 @@
411
447
  --component-button-text-standard-tertiary-default: var(--color-text-strong);
412
448
  --component-button-text-standard-tertiary-hover: var(--color-text-strong);
413
449
  --component-button-text-standard-tertiary-active: var(--color-text-strong);
414
- --component-button-text-danger-primary-default: var(--color-text-strong);
450
+ --component-button-text-danger-primary-default: var(--traton-color-base-white);
415
451
  --component-button-text-danger-primary-hover: var(--component-button-text-danger-primary-default);
416
452
  --component-button-text-danger-primary-active: var(
417
453
  --component-button-text-danger-primary-default
@@ -433,69 +469,54 @@
433
469
  }
434
470
 
435
471
  .tl-button {
436
- --button-transparent: transparent;
437
- --button-white: var(--color-brand-neutral-white);
438
- --button-black: var(--color-brand-neutral-black);
439
- --button-radius: var(--dimension-radius-for-surface-clickable);
472
+ --button-radius: calc(var(--component-button-border-radius-default) * 1px);
440
473
  --button-sm-only-icon-padding: 11px;
441
474
  --button-md-only-icon-padding: 13px;
442
475
  --button-lg-only-icon-padding: 17px;
443
- --button-primary-background: var(--color-background-accent-primary-default);
444
- --button-primary-background-hover: var(--color-background-accent-primary-hover);
445
- --button-primary-background-active: var(--color-background-accent-primary-pressed);
446
- --button-primary-background-disabled: var(--color-background-accent-primary-disabled);
447
- --button-primary-color: var(--component-button-primary-text);
448
- --button-primary-color-disabled: var(--color-foreground-text-disabled);
449
- --button-primary-border-color: var(--button-transparent);
450
- --button-primary-border-color-disabled: var(--button-transparent);
451
- --button-primary-background-focus: var(--color-background-accent-primary-focus);
452
- --button-primary-color-focus: var(--component-button-primary-text);
453
- --button-primary-border-color-focus: var(--color-foreground-border-accent-focus);
476
+ --button-opacity-disabled: calc(var(--component-button-opacity-disabled) / 100);
477
+ --button-primary-background: var(--component-button-background-standard-primary-default);
478
+ --button-primary-background-hover: var(--component-button-background-standard-primary-hover);
479
+ --button-primary-background-active: var(--component-button-background-standard-primary-active);
480
+ --button-primary-background-focus: var(--component-button-background-standard-primary-default);
481
+ --button-primary-color: var(--component-button-text-standard-primary-default);
482
+ --button-primary-color-focus: var(--component-button-text-standard-primary-hover);
483
+ --button-primary-border-color: var(--component-button-border-standard-primary-default);
484
+ --button-primary-border-color-focus: var(--component-button-border-standard-primary-hover);
454
485
  --button-primary-outline-color-focus: var(--color-foreground-border-accent-focus);
455
- --button-secondary-background: var(--button-transparent);
456
- --button-secondary-color: var(--color-foreground-text-strong);
457
- --button-secondary-border-color: var(--color-foreground-border-soft);
458
- --button-secondary-border-color-hover: var(--color-foreground-border-subtle);
459
- --button-secondary-border-color-active: var(--color-foreground-border-strong);
460
- --button-secondary-background-disabled: var(--button-transparent);
461
- --button-secondary-color-disabled: var(--color-foreground-text-disabled);
462
- --button-secondary-border-color-disabled: var(--color-foreground-border-discrete);
463
- --button-secondary-background-focus: var(--button-transparent);
464
- --button-secondary-color-focus: var(--color-foreground-text-strong);
465
- --button-secondary-border-color-focus: var(--color-foreground-border-accent-focus);
486
+ --button-primary-icon-color: var(--component-button-icon-standard-primary-default);
487
+ --button-secondary-background: var(--component-button-background-standard-secondary-default);
488
+ --button-secondary-background-focus: var(
489
+ --component-button-background-standard-secondary-default
490
+ );
491
+ --button-secondary-color: var(--component-button-text-standard-secondary-default);
492
+ --button-secondary-color-focus: var(--component-button-text-standard-secondary-hover);
493
+ --button-secondary-border-color: var(--component-button-border-standard-secondary-default);
494
+ --button-secondary-border-color-hover: var(--component-button-border-standard-secondary-hover);
495
+ --button-secondary-border-color-active: var(--component-button-border-standard-secondary-active);
496
+ --button-secondary-border-color-focus: var(--component-button-border-standard-secondary-hover);
466
497
  --button-secondary-outline-color-focus: var(--color-foreground-border-accent-focus);
467
- --button-ghost-background: var(--button-transparent);
468
- --button-ghost-color: var(--color-foreground-text-strong);
469
- --button-ghost-border-color: var(--button-transparent);
470
- --button-ghost-border-color-hover: var(--color-foreground-border-subtle);
471
- --button-ghost-border-color-active: var(--color-foreground-border-strong);
472
- --button-ghost-color-disabled: var(--color-foreground-text-disabled);
473
- --button-ghost-border-color-disabled: var(--button-transparent);
474
- --button-ghost-background-focus: var(--button-transparent);
475
- --button-ghost-color-focus: var(--color-foreground-text-strong);
476
- --button-ghost-border-color-focus: var(--color-foreground-border-accent-focus);
498
+ --button-secondary-icon-color: var(--component-button-icon-standard-secondary-default);
499
+ --button-ghost-background: var(--component-button-background-standard-tertiary-default);
500
+ --button-ghost-background-focus: var(--component-button-background-standard-tertiary-default);
501
+ --button-ghost-color: var(--component-button-text-standard-tertiary-default);
502
+ --button-ghost-color-focus: var(--component-button-text-standard-tertiary-hover);
503
+ --button-ghost-border-color: var(--component-button-border-standard-tertiary-default);
504
+ --button-ghost-border-color-hover: var(--component-button-border-standard-tertiary-hover);
505
+ --button-ghost-border-color-active: var(--component-button-border-standard-tertiary-active);
506
+ --button-ghost-border-color-focus: var(--component-button-border-standard-tertiary-hover);
477
507
  --button-ghost-outline-color-focus: var(--color-foreground-border-accent-focus);
478
- --button-danger-background: var(--color-background-accent-danger-default);
479
- --button-danger-color: var(--button-white);
480
- --button-danger-border-color: var(--button-transparent);
481
- --button-danger-background-hover: var(--color-background-accent-danger-hover);
482
- --button-danger-background-active: var(--color-background-accent-danger-pressed);
483
- --button-danger-background-disabled: var(--color-background-accent-danger-disabled);
484
- --button-danger-color-disabled: var(--color-foreground-text-disabled);
485
- --button-danger-border-color-disabled: var(--button-transparent);
486
- --button-danger-border-color-active: var(--color-background-accent-danger-pressed);
487
- --button-danger-background-focus: var(--color-background-accent-danger-focus);
488
- --button-danger-color-focus: var(--button-white);
489
- --button-danger-border-color-focus: var(--button-transparent);
508
+ --button-ghost-icon-color: var(--component-button-icon-standard-tertiary-default);
509
+ --button-danger-background: var(--component-button-background-danger-primary-default);
510
+ --button-danger-background-hover: var(--component-button-background-danger-primary-hover);
511
+ --button-danger-background-active: var(--component-button-background-danger-primary-active);
512
+ --button-danger-background-focus: var(--component-button-background-danger-primary-default);
513
+ --button-danger-color: var(--component-button-text-danger-primary-default);
514
+ --button-danger-color-focus: var(--component-button-text-danger-primary-hover);
515
+ --button-danger-border-color: var(--component-button-border-danger-primary-default);
516
+ --button-danger-border-color-active: var(--component-button-border-danger-primary-active);
517
+ --button-danger-border-color-focus: var(--component-button-border-danger-primary-hover);
490
518
  --button-danger-outline-color-focus: var(--color-foreground-border-accent-focus);
491
- }
492
- .tl-button .tl-button--primary {
493
- --button-primary-background-disabled: var(--color-background-accent-primary-disabled);
494
- --button-danger-background-disabled: var(--color-background-accent-danger-disabled);
495
- }
496
- .tl-button .tl-button--secondary {
497
- --button-primary-background-disabled: var(--button-white);
498
- --button-danger-background-disabled: var(--button-white);
519
+ --button-danger-icon-color: var(--component-button-icon-danger-primary-default);
499
520
  }
500
521
 
501
522
  .scania .tl-button {
@@ -543,15 +564,15 @@
543
564
  color: var(--button-primary-color);
544
565
  border-color: var(--button-primary-border-color);
545
566
  }
567
+ .tl-button--primary .tl-icon {
568
+ color: var(--button-primary-icon-color);
569
+ }
546
570
  .tl-button--primary:hover:not(:disabled) {
547
571
  background-color: var(--button-primary-background-hover);
548
572
  }
549
573
  .tl-button--primary:disabled {
550
- background-color: var(--button-primary-background-disabled);
551
- color: var(--button-primary-color-disabled);
552
- border-color: var(--button-primary-border-color-disabled);
553
574
  cursor: not-allowed;
554
- opacity: 0.6;
575
+ opacity: var(--button-opacity-disabled);
555
576
  }
556
577
  .tl-button--primary:focus-visible:not(:disabled) {
557
578
  background: var(--button-primary-background-focus);
@@ -572,15 +593,15 @@
572
593
  color: var(--button-secondary-color);
573
594
  border-color: var(--button-secondary-border-color);
574
595
  }
596
+ .tl-button--secondary .tl-icon {
597
+ color: var(--button-secondary-icon-color);
598
+ }
575
599
  .tl-button--secondary:hover:not(:disabled) {
576
600
  border-color: var(--button-secondary-border-color-hover);
577
601
  }
578
602
  .tl-button--secondary:disabled {
579
- background-color: var(--button-secondary-background-disabled);
580
- color: var(--button-secondary-color-disabled);
581
- border-color: var(--button-secondary-border-color-disabled);
582
603
  cursor: not-allowed;
583
- opacity: 0.6;
604
+ opacity: var(--button-opacity-disabled);
584
605
  }
585
606
  .tl-button--secondary:focus-visible:not(:disabled) {
586
607
  background: var(--button-secondary-background-focus);
@@ -599,13 +620,15 @@
599
620
  color: var(--button-ghost-color);
600
621
  border-color: var(--button-ghost-border-color);
601
622
  }
623
+ .tl-button--ghost .tl-icon {
624
+ color: var(--button-ghost-icon-color);
625
+ }
602
626
  .tl-button--ghost:hover:not(:disabled) {
603
627
  border-color: var(--button-ghost-border-color-hover);
604
628
  }
605
629
  .tl-button--ghost:disabled {
606
- color: var(--button-ghost-color-disabled);
607
630
  cursor: not-allowed;
608
- opacity: 0.6;
631
+ opacity: var(--button-opacity-disabled);
609
632
  }
610
633
  .tl-button--ghost:focus-visible:not(:disabled) {
611
634
  background: var(--button-ghost-background-focus);
@@ -624,15 +647,15 @@
624
647
  color: var(--button-danger-color);
625
648
  border-color: var(--button-danger-border-color);
626
649
  }
650
+ .tl-button--danger .tl-icon {
651
+ color: var(--button-danger-icon-color);
652
+ }
627
653
  .tl-button--danger:hover:not(:disabled) {
628
654
  background-color: var(--button-danger-background-hover);
629
655
  }
630
656
  .tl-button--danger:disabled {
631
- background-color: var(--button-danger-background-disabled);
632
- color: var(--button-danger-color-disabled);
633
- border-color: var(--button-danger-border-color-disabled);
634
657
  cursor: not-allowed;
635
- opacity: 0.6;
658
+ opacity: var(--button-opacity-disabled);
636
659
  }
637
660
  .tl-button--danger:focus-visible:not(:disabled) {
638
661
  background: var(--button-danger-background-focus);
package/dist/tl-toast.css CHANGED
@@ -94,8 +94,8 @@
94
94
  cursor: pointer;
95
95
  }
96
96
  .tl-toast__close:focus-visible {
97
- outline: 2px solid var(--tds-focus-outline-color);
98
- box-shadow: 0 0 0 1px var(--tds-white);
97
+ outline: 2px solid var(--component--focus-ring-color-strong);
98
+ box-shadow: 0 0 0 1px var(--component--focus-ring-color-discrete);
99
99
  outline-offset: 1px;
100
100
  z-index: 1;
101
101
  }
package/dist/tl-toggle.css CHANGED
@@ -49,8 +49,8 @@
49
49
  height: 16px;
50
50
  }
51
51
  .tl-toggle__input:focus-visible {
52
- outline: 2px solid var(--tds-focus-outline-color);
53
- box-shadow: 0 0 0 1px var(--tds-white);
52
+ outline: 2px solid var(--component--focus-ring-color-strong);
53
+ box-shadow: 0 0 0 1px var(--component--focus-ring-color-discrete);
54
54
  outline-offset: 1px;
55
55
  z-index: 1;
56
56
  border-radius: 16px;
package/dist/tl-tooltip.css CHANGED
@@ -1,6 +1,8 @@
1
1
  .tl-tooltip {
2
- --tooltip-text: var(--color-foreground-text-inverse-strong);
3
- --tooltip-background: var(--color-background-inverse-layer-03);
2
+ --tooltip-color: var(--component-tooltip-text-default);
3
+ --tooltip-background: var(--component-tooltip-background-default);
4
+ --tooltip-border-radius: calc(var(--component-tooltip-border-radius-default) * 1px);
5
+ --tooltip-border-radius-none: calc(var(--component-tooltip-border-radius-none) * 1px);
4
6
  }
5
7
 
6
8
  .scania {
@@ -22,19 +24,19 @@
22
24
  position: fixed;
23
25
  z-index: var(--tds-z-index-tooltip, 1000);
24
26
  padding: 8px;
25
- max-width: 204px;
27
+ max-width: 208px;
26
28
  width: max-content;
27
29
  white-space: normal;
28
- word-wrap: break-word;
29
- background-color: var(--tooltip-background, #333);
30
- color: var(--tooltip-text, #fff);
30
+ overflow-wrap: break-word;
31
+ background-color: var(--tooltip-background);
32
+ color: var(--tooltip-color);
31
33
  box-sizing: border-box;
32
34
  line-height: var(--tl-tooltip-line-height);
33
35
  opacity: 0;
34
36
  visibility: hidden;
35
37
  pointer-events: none;
36
38
  transition: opacity 0.2s ease, visibility 0.2s ease;
37
- border-radius: 4px;
39
+ border-radius: var(--tooltip-border-radius);
38
40
  }
39
41
  .tl-tooltip--visible {
40
42
  opacity: 1;
@@ -42,26 +44,26 @@
42
44
  pointer-events: auto;
43
45
  }
44
46
  .tl-tooltip--top-start {
45
- border-radius: 4px 4px 4px 0;
47
+ border-radius: var(--tooltip-border-radius) var(--tooltip-border-radius) var(--tooltip-border-radius) var(--tooltip-border-radius-none);
46
48
  }
47
49
  .tl-tooltip--top-end {
48
- border-radius: 4px 4px 0;
50
+ border-radius: var(--tooltip-border-radius) var(--tooltip-border-radius) var(--tooltip-border-radius-none) var(--tooltip-border-radius);
49
51
  }
50
52
  .tl-tooltip--bottom-start {
51
- border-radius: 0 4px 4px;
53
+ border-radius: var(--tooltip-border-radius-none) var(--tooltip-border-radius) var(--tooltip-border-radius) var(--tooltip-border-radius);
52
54
  }
53
55
  .tl-tooltip--bottom-end {
54
- border-radius: 4px 0 4px 4px;
56
+ border-radius: var(--tooltip-border-radius) var(--tooltip-border-radius-none) var(--tooltip-border-radius) var(--tooltip-border-radius);
55
57
  }
56
58
  .tl-tooltip--left-start {
57
- border-radius: 4px 0 4px 4px;
59
+ border-radius: var(--tooltip-border-radius) var(--tooltip-border-radius-none) var(--tooltip-border-radius) var(--tooltip-border-radius);
58
60
  }
59
61
  .tl-tooltip--left-end {
60
- border-radius: 4px 4px 0;
62
+ border-radius: var(--tooltip-border-radius) var(--tooltip-border-radius) var(--tooltip-border-radius-none) var(--tooltip-border-radius);
61
63
  }
62
64
  .tl-tooltip--right-start {
63
- border-radius: 0 4px 4px;
65
+ border-radius: var(--tooltip-border-radius-none) var(--tooltip-border-radius) var(--tooltip-border-radius) var(--tooltip-border-radius);
64
66
  }
65
67
  .tl-tooltip--right-end {
66
- border-radius: 4px 4px 4px 0;
68
+ border-radius: var(--tooltip-border-radius) var(--tooltip-border-radius) var(--tooltip-border-radius) var(--tooltip-border-radius-none);
67
69
  }