@scania/tegel-lite 0.1.0-variables-beta.1 → 1.0.0

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (62) hide show
  1. package/README.dev.md +1 -5
  2. package/README.md +12 -12
  3. package/dist/assets/fonts/traton/TratonTypeDisplay-Bold.woff +0 -0
  4. package/dist/assets/fonts/traton/TratonTypeDisplay-Bold.woff2 +0 -0
  5. package/dist/assets/fonts/traton/TratonTypeDisplay-Medium.woff +0 -0
  6. package/dist/assets/fonts/traton/TratonTypeDisplay-Medium.woff2 +0 -0
  7. package/dist/assets/fonts/traton/TratonTypeText-Bold.woff +0 -0
  8. package/dist/assets/fonts/traton/TratonTypeText-Bold.woff2 +0 -0
  9. package/dist/assets/fonts/traton/TratonTypeText-BoldItalic.woff +0 -0
  10. package/dist/assets/fonts/traton/TratonTypeText-BoldItalic.woff2 +0 -0
  11. package/dist/assets/fonts/traton/TratonTypeText-Italic.woff +0 -0
  12. package/dist/assets/fonts/traton/TratonTypeText-Italic.woff2 +0 -0
  13. package/dist/assets/fonts/traton/TratonTypeText-Medium.woff +0 -0
  14. package/dist/assets/fonts/traton/TratonTypeText-Medium.woff2 +0 -0
  15. package/dist/assets/fonts/traton/TratonTypeText-MediumItalic.woff +0 -0
  16. package/dist/assets/fonts/traton/TratonTypeText-MediumItalic.woff2 +0 -0
  17. package/dist/assets/fonts/traton/TratonTypeText-Regular.woff +0 -0
  18. package/dist/assets/fonts/traton/TratonTypeText-Regular.woff2 +0 -0
  19. package/dist/assets/fonts/traton/TratonTypeText-SemiBold.woff +0 -0
  20. package/dist/assets/fonts/traton/TratonTypeText-SemiBold.woff2 +0 -0
  21. package/dist/assets/fonts/traton/TratonTypeText-SemiBoldItalic.woff2 +0 -0
  22. package/dist/assets/icons/traton/placeholder.svg +3 -0
  23. package/dist/components.css +3552 -7157
  24. package/dist/global.css +134 -11
  25. package/dist/scania-variables.css +357 -136
  26. package/dist/tl-accordion.css +88 -35
  27. package/dist/tl-banner.css +88 -13
  28. package/dist/tl-block.css +62 -7
  29. package/dist/tl-breadcrumbs.css +55 -6
  30. package/dist/tl-button.css +192 -160
  31. package/dist/tl-card.css +54 -66
  32. package/dist/tl-checkbox.css +195 -115
  33. package/dist/tl-divider.css +61 -3
  34. package/dist/tl-footer.css +98 -38
  35. package/dist/tl-icon.css +4 -0
  36. package/dist/tl-link.css +114 -16
  37. package/dist/tl-message.css +128 -14
  38. package/dist/tl-modal.css +123 -20
  39. package/dist/tl-radio-button.css +158 -96
  40. package/dist/tl-text-field.css +256 -76
  41. package/dist/tl-textarea.css +274 -76
  42. package/dist/tl-toast.css +119 -10
  43. package/dist/tl-toggle.css +149 -44
  44. package/dist/tl-tooltip.css +17 -15
  45. package/dist/traton-variables.css +365 -23
  46. package/package.json +5 -26
  47. package/dist/tl-badge.css +0 -45
  48. package/dist/tl-checkbox-vars.css +0 -38
  49. package/dist/tl-chip.css +0 -99
  50. package/dist/tl-dropdown.css +0 -913
  51. package/dist/tl-folder-tabs.css +0 -139
  52. package/dist/tl-header.css +0 -935
  53. package/dist/tl-inline-tabs.css +0 -173
  54. package/dist/tl-navigation-tabs.css +0 -171
  55. package/dist/tl-popover-canvas.css +0 -70
  56. package/dist/tl-popover-menu.css +0 -123
  57. package/dist/tl-side-menu.css +0 -695
  58. package/dist/tl-slider.css +0 -2242
  59. package/dist/tl-spinner.css +0 -78
  60. package/dist/tl-step.css +0 -239
  61. package/dist/tl-stepper.css +0 -83
  62. package/dist/tl-table.css +0 -849
package/dist/tl-button.css CHANGED
@@ -4,17 +4,19 @@
4
4
  :root,
5
5
  .tds-mode-light,
6
6
  .scania .tds-mode-light,
7
- .scania .tl-mode-light {
7
+ .scania.tds-mode-light,
8
+ .scania .tl-mode-light,
9
+ .scania.tl-mode-light {
8
10
  --component-button-background-standard-primary-default: var(--scania-color-blue-600);
9
11
  --component-button-background-standard-primary-hover: var(--scania-color-blue-700);
10
- --component-button-background-standard-primary-active: var(--scania-color-blue-700);
12
+ --component-button-background-standard-primary-active: var(--scania-color-blue-800);
11
13
  --component-button-background-standard-secondary-default: var(--color-background-none);
12
14
  --component-button-background-standard-secondary-hover: var(--color-background-none);
13
15
  --component-button-background-standard-secondary-active: var(--color-background-none);
14
16
  --component-button-background-standard-tertiary-default: var(--color-background-none);
15
17
  --component-button-background-standard-tertiary-hover: var(--color-background-none);
16
18
  --component-button-background-standard-tertiary-active: var(--color-background-none);
17
- --component-button-background-danger-primary-default: var(--color-system-danger-default);
19
+ --component-button-background-danger-primary-default: var(--scania-color-red-400);
18
20
  --component-button-background-danger-primary-hover: var(--scania-color-red-500);
19
21
  --component-button-background-danger-primary-active: var(--scania-color-red-600);
20
22
  --component-button-background-danger-secondary-default: var(--color-background-none);
@@ -36,68 +38,79 @@
36
38
  --component-button-border-danger-primary-default: var(--color-border-none);
37
39
  --component-button-border-danger-primary-hover: var(--color-border-none);
38
40
  --component-button-border-danger-primary-active: var(--color-border-none);
39
- --component-button-border-danger-secondary-default: var(--color-system-danger-default);
41
+ --component-button-border-danger-secondary-default: var(--scania-color-red-400);
40
42
  --component-button-border-danger-secondary-hover: var(--scania-color-red-500);
41
43
  --component-button-border-danger-secondary-active: var(--scania-color-red-600);
42
44
  --component-button-border-danger-tertiary-default: var(--color-border-none);
43
45
  --component-button-border-danger-tertiary-hover: var(--scania-color-red-500);
44
46
  --component-button-border-danger-tertiary-active: var(--scania-color-red-600);
45
- --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);
46
49
  --component-button-icon-standard-primary-hover: var(
47
- --component-button-text-standard-primary-default
50
+ --component-button-icon-standard-primary-default
48
51
  );
49
52
  --component-button-icon-standard-primary-active: var(
50
- --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
51
68
  );
52
- --component-button-icon-standard-secondary-default: var(--color-text-strong);
53
- --component-button-icon-standard-secondary-hover: var(--color-text-strong);
54
- --component-button-icon-standard-secondary-active: var(--color-text-strong);
55
- --component-button-icon-standard-tertiary-default: var(--color-text-strong);
56
- --component-button-icon-standard-tertiary-hover: var(--color-text-strong);
57
- --component-button-icon-standard-tertiary-active: var(--color-text-strong);
58
- --component-button-icon-danger-primary-default: var(--color-text-inverse-strong);
59
- --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);
60
71
  --component-button-icon-danger-primary-active: var(
61
- --component-button-text-danger-primary-default
72
+ --component-button-icon-danger-primary-default
62
73
  );
63
- --component-button-icon-danger-secondary-default: var(--color-system-danger-default);
74
+ --component-button-icon-danger-secondary-default: var(--scania-color-red-400);
64
75
  --component-button-icon-danger-secondary-hover: var(--scania-color-red-500);
65
76
  --component-button-icon-danger-secondary-active: var(--scania-color-red-600);
66
- --component-button-icon-danger-tertiary-default: var(--color-system-danger-default);
77
+ --component-button-icon-danger-tertiary-default: var(--scania-color-red-400);
67
78
  --component-button-icon-danger-tertiary-hover: var(--scania-color-red-500);
68
79
  --component-button-icon-danger-tertiary-active: var(--scania-color-red-600);
69
80
  --component-button-opacity-disabled: var(--scania-opacity-25);
70
- --component-button-text-standard-primary-default: var(--color-text-inverse-brand);
81
+ --component-button-text-standard-primary-default: var(--scania-color-base-white);
71
82
  --component-button-text-standard-primary-hover: var(
72
83
  --component-button-text-standard-primary-default
73
84
  );
74
85
  --component-button-text-standard-primary-active: var(
75
86
  --component-button-text-standard-primary-default
76
87
  );
77
- --component-button-text-standard-secondary-default: var(--color-text-strong);
78
- --component-button-text-standard-secondary-hover: var(--color-text-strong);
79
- --component-button-text-standard-secondary-active: var(--color-text-strong);
80
- --component-button-text-standard-tertiary-default: var(--color-text-strong);
81
- --component-button-text-standard-tertiary-hover: var(--color-text-strong);
82
- --component-button-text-standard-tertiary-active: var(--color-text-strong);
83
- --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);
84
95
  --component-button-text-danger-primary-hover: var(--component-button-text-danger-primary-default);
85
96
  --component-button-text-danger-primary-active: var(
86
97
  --component-button-text-danger-primary-default
87
98
  );
88
- --component-button-text-danger-secondary-default: var(--color-system-danger-default);
99
+ --component-button-text-danger-secondary-default: var(--scania-color-red-400);
89
100
  --component-button-text-danger-secondary-hover: var(--scania-color-red-500);
90
101
  --component-button-text-danger-secondary-active: var(--scania-color-red-600);
91
- --component-button-text-danger-tertiary-default: var(--color-system-danger-default);
102
+ --component-button-text-danger-tertiary-default: var(--scania-color-red-400);
92
103
  --component-button-text-danger-tertiary-hover: var(--scania-color-red-500);
93
104
  --component-button-text-danger-tertiary-active: var(--scania-color-red-600);
94
105
  }
95
106
 
96
107
  .traton .tds-mode-light,
97
- .traton .tl-mode-light {
98
- --component-button-background-standard-primary-default: #004852;
99
- --component-button-background-standard-primary-hover: #003137;
100
- --component-button-background-standard-primary-active: #002429;
108
+ .traton.tds-mode-light,
109
+ .traton .tl-mode-light,
110
+ .traton.tl-mode-light {
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);
101
114
  --component-button-background-standard-secondary-default: var(--color-background-none);
102
115
  --component-button-background-standard-secondary-hover: var(--color-background-none);
103
116
  --component-button-background-standard-secondary-active: var(--color-background-none);
@@ -132,23 +145,32 @@
132
145
  --component-button-border-danger-tertiary-default: var(--color-border-none);
133
146
  --component-button-border-danger-tertiary-hover: var(--traton-color-red-400);
134
147
  --component-button-border-danger-tertiary-active: var(--traton-color-red-500);
135
- --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);
136
150
  --component-button-icon-standard-primary-hover: var(
137
151
  --component-button-text-standard-primary-default
138
152
  );
139
153
  --component-button-icon-standard-primary-active: var(
140
154
  --component-button-text-standard-primary-default
141
155
  );
142
- --component-button-icon-standard-secondary-default: var(--color-text-strong);
143
- --component-button-icon-standard-secondary-hover: var(--color-text-strong);
144
- --component-button-icon-standard-secondary-active: var(--color-text-strong);
145
- --component-button-icon-standard-tertiary-default: var(--color-text-strong);
146
- --component-button-icon-standard-tertiary-hover: var(--color-text-strong);
147
- --component-button-icon-standard-tertiary-active: var(--color-text-strong);
148
- --component-button-icon-danger-primary-default: var(--color-text-inverse-strong);
149
- --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);
150
172
  --component-button-icon-danger-primary-active: var(
151
- --component-button-text-danger-primary-default
173
+ --component-button-icon-danger-primary-default
152
174
  );
153
175
  --component-button-icon-danger-secondary-default: var(--color-system-danger-default);
154
176
  --component-button-icon-danger-secondary-hover: var(
@@ -165,7 +187,7 @@
165
187
  --component-button-text-danger-tertiary-default
166
188
  );
167
189
  --component-button-opacity-disabled: var(--traton-opacity-25);
168
- --component-button-text-standard-primary-default: #fff;
190
+ --component-button-text-standard-primary-default: var(--traton-color-base-white);
169
191
  --component-button-text-standard-primary-hover: var(
170
192
  --component-button-text-standard-primary-default
171
193
  );
@@ -178,7 +200,7 @@
178
200
  --component-button-text-standard-tertiary-default: var(--color-text-strong);
179
201
  --component-button-text-standard-tertiary-hover: var(--color-text-strong);
180
202
  --component-button-text-standard-tertiary-active: var(--color-text-strong);
181
- --component-button-text-danger-primary-default: var(--color-text-inverse-strong);
203
+ --component-button-text-danger-primary-default: var(--traton-color-base-white);
182
204
  --component-button-text-danger-primary-hover: var(--component-button-text-danger-primary-default);
183
205
  --component-button-text-danger-primary-active: var(
184
206
  --component-button-text-danger-primary-default
@@ -201,7 +223,9 @@
201
223
 
202
224
  .tds-mode-dark,
203
225
  .scania .tds-mode-dark,
204
- .scania .tl-mode-dark {
226
+ .scania.tds-mode-dark,
227
+ .scania .tl-mode-dark,
228
+ .scania.tl-mode-dark {
205
229
  --component-button-background-standard-primary-default: var(--scania-color-blue-400);
206
230
  --component-button-background-standard-primary-hover: var(--scania-color-blue-500);
207
231
  --component-button-background-standard-primary-active: var(--scania-color-blue-600);
@@ -211,7 +235,7 @@
211
235
  --component-button-background-standard-tertiary-default: var(--color-background-none);
212
236
  --component-button-background-standard-tertiary-hover: var(--color-background-none);
213
237
  --component-button-background-standard-tertiary-active: var(--color-background-none);
214
- --component-button-background-danger-primary-default: var(--color-system-danger-subtle);
238
+ --component-button-background-danger-primary-default: var(--scania-color-red-400);
215
239
  --component-button-background-danger-primary-hover: var(--scania-color-red-500);
216
240
  --component-button-background-danger-primary-active: var(--scania-color-red-600);
217
241
  --component-button-background-danger-secondary-default: var(--color-background-none);
@@ -233,68 +257,79 @@
233
257
  --component-button-border-danger-primary-default: var(--color-border-none);
234
258
  --component-button-border-danger-primary-hover: var(--color-border-none);
235
259
  --component-button-border-danger-primary-active: var(--color-border-none);
236
- --component-button-border-danger-secondary-default: var(--color-system-danger-default);
260
+ --component-button-border-danger-secondary-default: var(--scania-color-red-400);
237
261
  --component-button-border-danger-secondary-hover: var(--scania-color-red-500);
238
262
  --component-button-border-danger-secondary-active: var(--scania-color-red-600);
239
263
  --component-button-border-danger-tertiary-default: var(--color-border-none);
240
264
  --component-button-border-danger-tertiary-hover: var(--scania-color-red-500);
241
265
  --component-button-border-danger-tertiary-active: var(--scania-color-red-600);
242
- --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);
243
268
  --component-button-icon-standard-primary-hover: var(
244
- --component-button-text-standard-primary-default
269
+ --component-button-icon-standard-primary-default
245
270
  );
246
271
  --component-button-icon-standard-primary-active: var(
247
- --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
248
284
  );
249
- --component-button-icon-standard-secondary-default: var(--color-text-strong);
250
- --component-button-icon-standard-secondary-hover: var(--color-text-strong);
251
- --component-button-icon-standard-secondary-active: var(--color-text-strong);
252
- --component-button-icon-standard-tertiary-default: var(--color-text-strong);
253
- --component-button-icon-standard-tertiary-hover: var(--color-text-strong);
254
- --component-button-icon-standard-tertiary-active: var(--color-text-strong);
255
- --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);
256
289
  --component-button-icon-danger-primary-hover: var(--component-button-icon-danger-primary-default);
257
290
  --component-button-icon-danger-primary-active: var(
258
291
  --component-button-icon-danger-primary-default
259
292
  );
260
- --component-button-icon-danger-secondary-default: var(--color-system-danger-default);
293
+ --component-button-icon-danger-secondary-default: var(--scania-color-red-400);
261
294
  --component-button-icon-danger-secondary-hover: var(--scania-color-red-500);
262
295
  --component-button-icon-danger-secondary-active: var(--scania-color-red-600);
263
- --component-button-icon-danger-tertiary-default: var(--color-system-danger-default);
296
+ --component-button-icon-danger-tertiary-default: var(--scania-color-red-400);
264
297
  --component-button-icon-danger-tertiary-hover: var(--scania-color-red-500);
265
298
  --component-button-icon-danger-tertiary-active: var(--scania-color-red-600);
266
299
  --component-button-opacity-disabled: var(--scania-opacity-25);
267
- --component-button-text-standard-primary-default: var(--color-text-brand);
300
+ --component-button-text-standard-primary-default: var(--scania-color-base-white);
268
301
  --component-button-text-standard-primary-hover: var(
269
302
  --component-button-text-standard-primary-default
270
303
  );
271
304
  --component-button-text-standard-primary-active: var(
272
305
  --component-button-text-standard-primary-default
273
306
  );
274
- --component-button-text-standard-secondary-default: var(--color-text-strong);
275
- --component-button-text-standard-secondary-hover: var(--color-text-strong);
276
- --component-button-text-standard-secondary-active: var(--color-text-strong);
277
- --component-button-text-standard-tertiary-default: var(--color-text-strong);
278
- --component-button-text-standard-tertiary-hover: var(--color-text-strong);
279
- --component-button-text-standard-tertiary-active: var(--color-text-strong);
280
- --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);
281
314
  --component-button-text-danger-primary-hover: var(--component-button-text-danger-primary-default);
282
315
  --component-button-text-danger-primary-active: var(
283
316
  --component-button-text-danger-primary-default
284
317
  );
285
- --component-button-text-danger-secondary-default: var(--color-system-danger-default);
318
+ --component-button-text-danger-secondary-default: var(--scania-color-red-400);
286
319
  --component-button-text-danger-secondary-hover: var(--scania-color-red-500);
287
320
  --component-button-text-danger-secondary-active: var(--scania-color-red-600);
288
- --component-button-text-danger-tertiary-default: var(--color-system-danger-default);
321
+ --component-button-text-danger-tertiary-default: var(--scania-color-red-400);
289
322
  --component-button-text-danger-tertiary-hover: var(--scania-color-red-500);
290
323
  --component-button-text-danger-tertiary-active: var(--scania-color-red-600);
291
324
  }
292
325
 
293
326
  .traton .tds-mode-dark,
294
- .traton .tl-mode-dark {
295
- --component-button-background-standard-primary-default: #c2bfb6;
296
- --component-button-background-standard-primary-hover: #d6d4c9;
297
- --component-button-background-standard-primary-active: #a6a49c;
327
+ .traton.tds-mode-dark,
328
+ .traton .tl-mode-dark,
329
+ .traton.tl-mode-dark {
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);
298
333
  --component-button-background-standard-secondary-default: var(--color-background-none);
299
334
  --component-button-background-standard-secondary-hover: var(--color-background-none);
300
335
  --component-button-background-standard-secondary-active: var(--color-background-none);
@@ -329,20 +364,29 @@
329
364
  --component-button-border-danger-tertiary-default: var(--color-border-none);
330
365
  --component-button-border-danger-tertiary-hover: var(--traton-color-red-400);
331
366
  --component-button-border-danger-tertiary-active: var(--traton-color-red-500);
332
- --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);
333
369
  --component-button-icon-standard-primary-hover: var(
334
370
  --component-button-text-standard-primary-default
335
371
  );
336
372
  --component-button-icon-standard-primary-active: var(
337
373
  --component-button-text-standard-primary-default
338
374
  );
339
- --component-button-icon-standard-secondary-default: var(--color-text-strong);
340
- --component-button-icon-standard-secondary-hover: var(--color-text-strong);
341
- --component-button-icon-standard-secondary-active: var(--color-text-strong);
342
- --component-button-icon-standard-tertiary-default: var(--color-text-strong);
343
- --component-button-icon-standard-tertiary-hover: var(--color-text-strong);
344
- --component-button-icon-standard-tertiary-active: var(--color-text-strong);
345
- --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);
346
390
  --component-button-icon-danger-primary-hover: var(--component-button-icon-danger-primary-default);
347
391
  --component-button-icon-danger-primary-active: var(
348
392
  --component-button-icon-danger-primary-default
@@ -362,7 +406,7 @@
362
406
  --component-button-text-danger-tertiary-default
363
407
  );
364
408
  --component-button-opacity-disabled: var(--traton-opacity-25);
365
- --component-button-text-standard-primary-default: #000;
409
+ --component-button-text-standard-primary-default: var(--traton-color-base-black);
366
410
  --component-button-text-standard-primary-hover: var(
367
411
  --component-button-text-standard-primary-default
368
412
  );
@@ -375,7 +419,7 @@
375
419
  --component-button-text-standard-tertiary-default: var(--color-text-strong);
376
420
  --component-button-text-standard-tertiary-hover: var(--color-text-strong);
377
421
  --component-button-text-standard-tertiary-active: var(--color-text-strong);
378
- --component-button-text-danger-primary-default: var(--color-text-strong);
422
+ --component-button-text-danger-primary-default: var(--traton-color-base-white);
379
423
  --component-button-text-danger-primary-hover: var(--component-button-text-danger-primary-default);
380
424
  --component-button-text-danger-primary-active: var(
381
425
  --component-button-text-danger-primary-default
@@ -397,69 +441,54 @@
397
441
  }
398
442
 
399
443
  .tl-button {
400
- --button-transparent: transparent;
401
- --button-white: var(--color-brand-neutral-white);
402
- --button-black: var(--color-brand-neutral-black);
403
- --button-radius: var(--dimension-radius-for-surface-clickable);
444
+ --button-radius: calc(var(--component-button-border-radius-default) * 1px);
404
445
  --button-sm-only-icon-padding: 11px;
405
446
  --button-md-only-icon-padding: 13px;
406
447
  --button-lg-only-icon-padding: 17px;
407
- --button-primary-background: var(--color-background-accent-primary-default);
408
- --button-primary-background-hover: var(--color-background-accent-primary-hover);
409
- --button-primary-background-active: var(--color-background-accent-primary-pressed);
410
- --button-primary-background-disabled: var(--color-background-accent-primary-disabled);
411
- --button-primary-color: var(--component-button-primary-text);
412
- --button-primary-color-disabled: var(--color-foreground-text-disabled);
413
- --button-primary-border-color: var(--button-transparent);
414
- --button-primary-border-color-disabled: var(--button-transparent);
415
- --button-primary-background-focus: var(--color-background-accent-primary-focus);
416
- --button-primary-color-focus: var(--component-button-primary-text);
417
- --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);
418
457
  --button-primary-outline-color-focus: var(--color-foreground-border-accent-focus);
419
- --button-secondary-background: var(--button-transparent);
420
- --button-secondary-color: var(--color-foreground-text-strong);
421
- --button-secondary-border-color: var(--color-foreground-border-soft);
422
- --button-secondary-border-color-hover: var(--color-foreground-border-subtle);
423
- --button-secondary-border-color-active: var(--color-foreground-border-strong);
424
- --button-secondary-background-disabled: var(--button-transparent);
425
- --button-secondary-color-disabled: var(--color-foreground-text-disabled);
426
- --button-secondary-border-color-disabled: var(--color-foreground-border-discrete);
427
- --button-secondary-background-focus: var(--button-transparent);
428
- --button-secondary-color-focus: var(--color-foreground-text-strong);
429
- --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);
430
469
  --button-secondary-outline-color-focus: var(--color-foreground-border-accent-focus);
431
- --button-ghost-background: var(--button-transparent);
432
- --button-ghost-color: var(--color-foreground-text-strong);
433
- --button-ghost-border-color: var(--button-transparent);
434
- --button-ghost-border-color-hover: var(--color-foreground-border-subtle);
435
- --button-ghost-border-color-active: var(--color-foreground-border-strong);
436
- --button-ghost-color-disabled: var(--color-foreground-text-disabled);
437
- --button-ghost-border-color-disabled: var(--button-transparent);
438
- --button-ghost-background-focus: var(--button-transparent);
439
- --button-ghost-color-focus: var(--color-foreground-text-strong);
440
- --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);
441
479
  --button-ghost-outline-color-focus: var(--color-foreground-border-accent-focus);
442
- --button-danger-background: var(--color-background-accent-danger-default);
443
- --button-danger-color: var(--button-white);
444
- --button-danger-border-color: var(--button-transparent);
445
- --button-danger-background-hover: var(--color-background-accent-danger-hover);
446
- --button-danger-background-active: var(--color-background-accent-danger-pressed);
447
- --button-danger-background-disabled: var(--color-background-accent-danger-disabled);
448
- --button-danger-color-disabled: var(--color-foreground-text-disabled);
449
- --button-danger-border-color-disabled: var(--button-transparent);
450
- --button-danger-border-color-active: var(--color-background-accent-danger-pressed);
451
- --button-danger-background-focus: var(--color-background-accent-danger-focus);
452
- --button-danger-color-focus: var(--button-white);
453
- --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);
454
490
  --button-danger-outline-color-focus: var(--color-foreground-border-accent-focus);
455
- }
456
- .tl-button .tl-button--primary {
457
- --button-primary-background-disabled: var(--color-background-accent-primary-disabled);
458
- --button-danger-background-disabled: var(--color-background-accent-danger-disabled);
459
- }
460
- .tl-button .tl-button--secondary {
461
- --button-primary-background-disabled: var(--button-white);
462
- --button-danger-background-disabled: var(--button-white);
491
+ --button-danger-icon-color: var(--component-button-icon-danger-primary-default);
463
492
  }
464
493
 
465
494
  .scania .tl-button {
@@ -497,8 +526,10 @@
497
526
  cursor: pointer;
498
527
  }
499
528
  .tl-button:focus-visible {
500
- outline: var(--button-outline-width) solid var(--color-foreground-border-accent-focus);
501
- 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;
502
533
  }
503
534
  .tl-button {
504
535
  /* Variants */
@@ -508,25 +539,24 @@
508
539
  color: var(--button-primary-color);
509
540
  border-color: var(--button-primary-border-color);
510
541
  }
542
+ .tl-button--primary .tl-icon {
543
+ color: var(--button-primary-icon-color);
544
+ }
511
545
  .tl-button--primary:hover:not(:disabled) {
512
546
  background-color: var(--button-primary-background-hover);
513
547
  }
514
548
  .tl-button--primary:disabled {
515
- background-color: var(--button-primary-background-disabled);
516
- color: var(--button-primary-color-disabled);
517
- border-color: var(--button-primary-border-color-disabled);
518
549
  cursor: not-allowed;
519
- opacity: 0.6;
550
+ opacity: var(--button-opacity-disabled);
520
551
  }
521
552
  .tl-button--primary:focus-visible:not(:disabled) {
522
553
  background: var(--button-primary-background-focus);
523
554
  border-color: var(--button-primary-border-color-focus);
524
555
  color: var(--button-primary-color-focus);
525
- outline-color: var(--button-primary-outline-color-focus);
526
556
  }
527
557
  .tl-button--primary:active:not(:disabled):focus-visible {
528
558
  outline: none;
529
- outline-offset: none;
559
+ box-shadow: none;
530
560
  }
531
561
  .tl-button--primary:active:not(:disabled) {
532
562
  background-color: var(--button-primary-background-active);
@@ -537,24 +567,24 @@
537
567
  color: var(--button-secondary-color);
538
568
  border-color: var(--button-secondary-border-color);
539
569
  }
570
+ .tl-button--secondary .tl-icon {
571
+ color: var(--button-secondary-icon-color);
572
+ }
540
573
  .tl-button--secondary:hover:not(:disabled) {
541
574
  border-color: var(--button-secondary-border-color-hover);
542
575
  }
543
576
  .tl-button--secondary:disabled {
544
- background-color: var(--button-secondary-background-disabled);
545
- color: var(--button-secondary-color-disabled);
546
- border-color: var(--button-secondary-border-color-disabled);
547
577
  cursor: not-allowed;
548
- opacity: 0.6;
578
+ opacity: var(--button-opacity-disabled);
549
579
  }
550
580
  .tl-button--secondary:focus-visible:not(:disabled) {
551
581
  background: var(--button-secondary-background-focus);
552
582
  border-color: var(--button-secondary-border-color-focus);
553
583
  color: var(--button-secondary-color-focus);
554
- outline-color: var(--button-secondary-outline-color-focus);
555
584
  }
556
585
  .tl-button--secondary:active:not(:disabled):focus-visible {
557
586
  outline: none;
587
+ box-shadow: none;
558
588
  }
559
589
  .tl-button--secondary:active:not(:disabled) {
560
590
  border-color: var(--button-secondary-border-color-active);
@@ -564,22 +594,24 @@
564
594
  color: var(--button-ghost-color);
565
595
  border-color: var(--button-ghost-border-color);
566
596
  }
597
+ .tl-button--ghost .tl-icon {
598
+ color: var(--button-ghost-icon-color);
599
+ }
567
600
  .tl-button--ghost:hover:not(:disabled) {
568
601
  border-color: var(--button-ghost-border-color-hover);
569
602
  }
570
603
  .tl-button--ghost:disabled {
571
- color: var(--button-ghost-color-disabled);
572
604
  cursor: not-allowed;
573
- opacity: 0.6;
605
+ opacity: var(--button-opacity-disabled);
574
606
  }
575
607
  .tl-button--ghost:focus-visible:not(:disabled) {
576
608
  background: var(--button-ghost-background-focus);
577
609
  border-color: var(--button-ghost-border-color-focus);
578
610
  color: var(--button-ghost-color-focus);
579
- outline-color: var(--button-ghost-outline-color-focus);
580
611
  }
581
612
  .tl-button--ghost:active:not(:disabled):focus-visible {
582
613
  outline: none;
614
+ box-shadow: none;
583
615
  }
584
616
  .tl-button--ghost:active:not(:disabled) {
585
617
  border-color: var(--button-ghost-border-color-active);
@@ -589,24 +621,24 @@
589
621
  color: var(--button-danger-color);
590
622
  border-color: var(--button-danger-border-color);
591
623
  }
624
+ .tl-button--danger .tl-icon {
625
+ color: var(--button-danger-icon-color);
626
+ }
592
627
  .tl-button--danger:hover:not(:disabled) {
593
628
  background-color: var(--button-danger-background-hover);
594
629
  }
595
630
  .tl-button--danger:disabled {
596
- background-color: var(--button-danger-background-disabled);
597
- color: var(--button-danger-color-disabled);
598
- border-color: var(--button-danger-border-color-disabled);
599
631
  cursor: not-allowed;
600
- opacity: 0.6;
632
+ opacity: var(--button-opacity-disabled);
601
633
  }
602
634
  .tl-button--danger:focus-visible:not(:disabled) {
603
635
  background: var(--button-danger-background-focus);
604
636
  border-color: var(--button-danger-border-color-focus);
605
637
  color: var(--button-danger-color-focus);
606
- outline-color: var(--button-danger-outline-color-focus);
607
638
  }
608
639
  .tl-button--danger:active:not(:disabled):focus-visible {
609
640
  outline: none;
641
+ box-shadow: none;
610
642
  }
611
643
  .tl-button--danger:active:not(:disabled) {
612
644
  background-color: var(--button-danger-background-active);