@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-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
65
+ );
66
+ --component-button-icon-standard-tertiary-active: var(
67
+ --component-button-icon-standard-tertiary-default
53
68
  );
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);
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
254
284
  );
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);
285
+ --component-button-icon-standard-tertiary-active: var(
286
+ --component-button-icon-standard-tertiary-default
287
+ );
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 {
@@ -505,8 +526,10 @@
505
526
  cursor: pointer;
506
527
  }
507
528
  .tl-button:focus-visible {
508
- outline: var(--button-outline-width) solid var(--color-foreground-border-accent-focus);
509
- outline-offset: calc(var(--button-outline-width) * -1);
529
+ outline: 2px solid var(--component--focus-ring-color-strong);
530
+ box-shadow: 0 0 0 1px var(--component--focus-ring-color-discrete);
531
+ outline-offset: 1px;
532
+ z-index: 1;
510
533
  }
511
534
  .tl-button {
512
535
  /* Variants */
@@ -516,25 +539,24 @@
516
539
  color: var(--button-primary-color);
517
540
  border-color: var(--button-primary-border-color);
518
541
  }
542
+ .tl-button--primary .tl-icon {
543
+ color: var(--button-primary-icon-color);
544
+ }
519
545
  .tl-button--primary:hover:not(:disabled) {
520
546
  background-color: var(--button-primary-background-hover);
521
547
  }
522
548
  .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
549
  cursor: not-allowed;
527
- opacity: 0.6;
550
+ opacity: var(--button-opacity-disabled);
528
551
  }
529
552
  .tl-button--primary:focus-visible:not(:disabled) {
530
553
  background: var(--button-primary-background-focus);
531
554
  border-color: var(--button-primary-border-color-focus);
532
555
  color: var(--button-primary-color-focus);
533
- outline-color: var(--button-primary-outline-color-focus);
534
556
  }
535
557
  .tl-button--primary:active:not(:disabled):focus-visible {
536
558
  outline: none;
537
- outline-offset: none;
559
+ box-shadow: none;
538
560
  }
539
561
  .tl-button--primary:active:not(:disabled) {
540
562
  background-color: var(--button-primary-background-active);
@@ -545,24 +567,24 @@
545
567
  color: var(--button-secondary-color);
546
568
  border-color: var(--button-secondary-border-color);
547
569
  }
570
+ .tl-button--secondary .tl-icon {
571
+ color: var(--button-secondary-icon-color);
572
+ }
548
573
  .tl-button--secondary:hover:not(:disabled) {
549
574
  border-color: var(--button-secondary-border-color-hover);
550
575
  }
551
576
  .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
577
  cursor: not-allowed;
556
- opacity: 0.6;
578
+ opacity: var(--button-opacity-disabled);
557
579
  }
558
580
  .tl-button--secondary:focus-visible:not(:disabled) {
559
581
  background: var(--button-secondary-background-focus);
560
582
  border-color: var(--button-secondary-border-color-focus);
561
583
  color: var(--button-secondary-color-focus);
562
- outline-color: var(--button-secondary-outline-color-focus);
563
584
  }
564
585
  .tl-button--secondary:active:not(:disabled):focus-visible {
565
586
  outline: none;
587
+ box-shadow: none;
566
588
  }
567
589
  .tl-button--secondary:active:not(:disabled) {
568
590
  border-color: var(--button-secondary-border-color-active);
@@ -572,22 +594,24 @@
572
594
  color: var(--button-ghost-color);
573
595
  border-color: var(--button-ghost-border-color);
574
596
  }
597
+ .tl-button--ghost .tl-icon {
598
+ color: var(--button-ghost-icon-color);
599
+ }
575
600
  .tl-button--ghost:hover:not(:disabled) {
576
601
  border-color: var(--button-ghost-border-color-hover);
577
602
  }
578
603
  .tl-button--ghost:disabled {
579
- color: var(--button-ghost-color-disabled);
580
604
  cursor: not-allowed;
581
- opacity: 0.6;
605
+ opacity: var(--button-opacity-disabled);
582
606
  }
583
607
  .tl-button--ghost:focus-visible:not(:disabled) {
584
608
  background: var(--button-ghost-background-focus);
585
609
  border-color: var(--button-ghost-border-color-focus);
586
610
  color: var(--button-ghost-color-focus);
587
- outline-color: var(--button-ghost-outline-color-focus);
588
611
  }
589
612
  .tl-button--ghost:active:not(:disabled):focus-visible {
590
613
  outline: none;
614
+ box-shadow: none;
591
615
  }
592
616
  .tl-button--ghost:active:not(:disabled) {
593
617
  border-color: var(--button-ghost-border-color-active);
@@ -597,24 +621,24 @@
597
621
  color: var(--button-danger-color);
598
622
  border-color: var(--button-danger-border-color);
599
623
  }
624
+ .tl-button--danger .tl-icon {
625
+ color: var(--button-danger-icon-color);
626
+ }
600
627
  .tl-button--danger:hover:not(:disabled) {
601
628
  background-color: var(--button-danger-background-hover);
602
629
  }
603
630
  .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
631
  cursor: not-allowed;
608
- opacity: 0.6;
632
+ opacity: var(--button-opacity-disabled);
609
633
  }
610
634
  .tl-button--danger:focus-visible:not(:disabled) {
611
635
  background: var(--button-danger-background-focus);
612
636
  border-color: var(--button-danger-border-color-focus);
613
637
  color: var(--button-danger-color-focus);
614
- outline-color: var(--button-danger-outline-color-focus);
615
638
  }
616
639
  .tl-button--danger:active:not(:disabled):focus-visible {
617
640
  outline: none;
641
+ box-shadow: none;
618
642
  }
619
643
  .tl-button--danger:active:not(:disabled) {
620
644
  background-color: var(--button-danger-background-active);