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

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 (46) 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 +620 -299
  22. package/dist/global.css +66 -0
  23. package/dist/scania-variables.css +185 -136
  24. package/dist/tl-accordion.css +5 -3
  25. package/dist/tl-banner.css +2 -2
  26. package/dist/tl-breadcrumbs.css +55 -6
  27. package/dist/tl-button.css +180 -156
  28. package/dist/tl-card.css +24 -11
  29. package/dist/tl-chip.css +14 -12
  30. package/dist/tl-divider.css +61 -3
  31. package/dist/tl-dropdown.css +9 -6
  32. package/dist/tl-folder-tabs.css +5 -4
  33. package/dist/tl-footer.css +86 -34
  34. package/dist/tl-header.css +16 -10
  35. package/dist/tl-inline-tabs.css +5 -2
  36. package/dist/tl-link.css +109 -14
  37. package/dist/tl-modal.css +2 -2
  38. package/dist/tl-navigation-tabs.css +5 -2
  39. package/dist/tl-side-menu.css +10 -6
  40. package/dist/tl-slider.css +180 -156
  41. package/dist/tl-table.css +11 -7
  42. package/dist/tl-toast.css +2 -2
  43. package/dist/tl-toggle.css +2 -2
  44. package/dist/tl-tooltip.css +17 -15
  45. package/dist/traton-variables.css +35 -23
  46. 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
93
+ );
94
+ --component-button-icon-standard-tertiary-active: var(
95
+ --component-button-icon-standard-tertiary-default
81
96
  );
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);
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
282
301
  );
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);
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
315
+ );
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 {
@@ -532,8 +553,10 @@
532
553
  cursor: pointer;
533
554
  }
534
555
  .tl-button:focus-visible {
535
- outline: var(--button-outline-width) solid var(--color-foreground-border-accent-focus);
536
- outline-offset: calc(var(--button-outline-width) * -1);
556
+ outline: 2px solid var(--component--focus-ring-color-strong);
557
+ box-shadow: 0 0 0 1px var(--component--focus-ring-color-discrete);
558
+ outline-offset: 1px;
559
+ z-index: 1;
537
560
  }
538
561
  .tl-button {
539
562
  /* Variants */
@@ -543,25 +566,24 @@
543
566
  color: var(--button-primary-color);
544
567
  border-color: var(--button-primary-border-color);
545
568
  }
569
+ .tl-button--primary .tl-icon {
570
+ color: var(--button-primary-icon-color);
571
+ }
546
572
  .tl-button--primary:hover:not(:disabled) {
547
573
  background-color: var(--button-primary-background-hover);
548
574
  }
549
575
  .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
576
  cursor: not-allowed;
554
- opacity: 0.6;
577
+ opacity: var(--button-opacity-disabled);
555
578
  }
556
579
  .tl-button--primary:focus-visible:not(:disabled) {
557
580
  background: var(--button-primary-background-focus);
558
581
  border-color: var(--button-primary-border-color-focus);
559
582
  color: var(--button-primary-color-focus);
560
- outline-color: var(--button-primary-outline-color-focus);
561
583
  }
562
584
  .tl-button--primary:active:not(:disabled):focus-visible {
563
585
  outline: none;
564
- outline-offset: none;
586
+ box-shadow: none;
565
587
  }
566
588
  .tl-button--primary:active:not(:disabled) {
567
589
  background-color: var(--button-primary-background-active);
@@ -572,24 +594,24 @@
572
594
  color: var(--button-secondary-color);
573
595
  border-color: var(--button-secondary-border-color);
574
596
  }
597
+ .tl-button--secondary .tl-icon {
598
+ color: var(--button-secondary-icon-color);
599
+ }
575
600
  .tl-button--secondary:hover:not(:disabled) {
576
601
  border-color: var(--button-secondary-border-color-hover);
577
602
  }
578
603
  .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
604
  cursor: not-allowed;
583
- opacity: 0.6;
605
+ opacity: var(--button-opacity-disabled);
584
606
  }
585
607
  .tl-button--secondary:focus-visible:not(:disabled) {
586
608
  background: var(--button-secondary-background-focus);
587
609
  border-color: var(--button-secondary-border-color-focus);
588
610
  color: var(--button-secondary-color-focus);
589
- outline-color: var(--button-secondary-outline-color-focus);
590
611
  }
591
612
  .tl-button--secondary:active:not(:disabled):focus-visible {
592
613
  outline: none;
614
+ box-shadow: none;
593
615
  }
594
616
  .tl-button--secondary:active:not(:disabled) {
595
617
  border-color: var(--button-secondary-border-color-active);
@@ -599,22 +621,24 @@
599
621
  color: var(--button-ghost-color);
600
622
  border-color: var(--button-ghost-border-color);
601
623
  }
624
+ .tl-button--ghost .tl-icon {
625
+ color: var(--button-ghost-icon-color);
626
+ }
602
627
  .tl-button--ghost:hover:not(:disabled) {
603
628
  border-color: var(--button-ghost-border-color-hover);
604
629
  }
605
630
  .tl-button--ghost:disabled {
606
- color: var(--button-ghost-color-disabled);
607
631
  cursor: not-allowed;
608
- opacity: 0.6;
632
+ opacity: var(--button-opacity-disabled);
609
633
  }
610
634
  .tl-button--ghost:focus-visible:not(:disabled) {
611
635
  background: var(--button-ghost-background-focus);
612
636
  border-color: var(--button-ghost-border-color-focus);
613
637
  color: var(--button-ghost-color-focus);
614
- outline-color: var(--button-ghost-outline-color-focus);
615
638
  }
616
639
  .tl-button--ghost:active:not(:disabled):focus-visible {
617
640
  outline: none;
641
+ box-shadow: none;
618
642
  }
619
643
  .tl-button--ghost:active:not(:disabled) {
620
644
  border-color: var(--button-ghost-border-color-active);
@@ -624,24 +648,24 @@
624
648
  color: var(--button-danger-color);
625
649
  border-color: var(--button-danger-border-color);
626
650
  }
651
+ .tl-button--danger .tl-icon {
652
+ color: var(--button-danger-icon-color);
653
+ }
627
654
  .tl-button--danger:hover:not(:disabled) {
628
655
  background-color: var(--button-danger-background-hover);
629
656
  }
630
657
  .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
658
  cursor: not-allowed;
635
- opacity: 0.6;
659
+ opacity: var(--button-opacity-disabled);
636
660
  }
637
661
  .tl-button--danger:focus-visible:not(:disabled) {
638
662
  background: var(--button-danger-background-focus);
639
663
  border-color: var(--button-danger-border-color-focus);
640
664
  color: var(--button-danger-color-focus);
641
- outline-color: var(--button-danger-outline-color-focus);
642
665
  }
643
666
  .tl-button--danger:active:not(:disabled):focus-visible {
644
667
  outline: none;
668
+ box-shadow: none;
645
669
  }
646
670
  .tl-button--danger:active:not(:disabled) {
647
671
  background-color: var(--button-danger-background-active);