@scania/tegel-lite 0.1.0 → 1.0.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 (68) 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/scania/configurator.svg +1 -0
  23. package/dist/assets/icons/traton/edit_inactive.svg +1 -0
  24. package/dist/assets/icons/traton/placeholder.svg +3 -0
  25. package/dist/assets/icons/traton/skip_backwards.svg +1 -0
  26. package/dist/assets/icons/traton/skip_forward.svg +1 -0
  27. package/dist/components.css +3997 -6847
  28. package/dist/global.css +627 -5641
  29. package/dist/scania-variables.css +661 -565
  30. package/dist/tl-accordion.css +92 -36
  31. package/dist/tl-banner.css +87 -12
  32. package/dist/tl-block.css +62 -7
  33. package/dist/tl-breadcrumbs.css +55 -6
  34. package/dist/tl-button.css +498 -87
  35. package/dist/tl-card.css +80 -54
  36. package/dist/tl-checkbox.css +195 -115
  37. package/dist/tl-datetime.css +7 -4
  38. package/dist/tl-divider.css +61 -3
  39. package/dist/tl-footer.css +116 -18
  40. package/dist/tl-icon.css +6 -2
  41. package/dist/tl-link.css +114 -16
  42. package/dist/tl-message.css +128 -14
  43. package/dist/tl-modal.css +165 -16
  44. package/dist/tl-radio-button.css +159 -96
  45. package/dist/tl-text-field.css +272 -140
  46. package/dist/tl-textarea.css +274 -76
  47. package/dist/tl-toast.css +119 -10
  48. package/dist/tl-toggle.css +150 -45
  49. package/dist/tl-tooltip.css +17 -15
  50. package/dist/traton-variables.css +682 -447
  51. package/package.json +6 -27
  52. package/dist/tl-badge.css +0 -44
  53. package/dist/tl-checkbox-vars.css +0 -38
  54. package/dist/tl-chip.css +0 -149
  55. package/dist/tl-dropdown.css +0 -857
  56. package/dist/tl-folder-tabs.css +0 -139
  57. package/dist/tl-header.css +0 -859
  58. package/dist/tl-inline-tabs.css +0 -173
  59. package/dist/tl-navigation-tabs.css +0 -171
  60. package/dist/tl-popover-canvas.css +0 -70
  61. package/dist/tl-popover-menu.css +0 -123
  62. package/dist/tl-side-menu.css +0 -540
  63. package/dist/tl-slider.css +0 -1854
  64. package/dist/tl-spinner.css +0 -78
  65. package/dist/tl-step.css +0 -213
  66. package/dist/tl-stepper.css +0 -57
  67. package/dist/tl-table.css +0 -827
  68. /package/dist/assets/icons/scania/{gift inactive.svg → gift_inactive.svg} +0 -0
package/dist/tl-button.css CHANGED
@@ -1,86 +1,494 @@
1
1
  /**
2
2
  * Do not edit directly, this file was auto-generated.
3
3
  */
4
- .tl-button,
5
- tds-button,
6
- .tds-mode-light tds-button {
7
- --component-button-primary-text: var(--color-brand-neutral-white);
4
+ :root,
5
+ .tds-mode-light,
6
+ .scania .tds-mode-light,
7
+ .scania.tds-mode-light,
8
+ .scania .tl-mode-light,
9
+ .scania.tl-mode-light {
10
+ --component-button-background-standard-primary-default: var(--scania-color-blue-600);
11
+ --component-button-background-standard-primary-hover: var(--scania-color-blue-700);
12
+ --component-button-background-standard-primary-active: var(--scania-color-blue-800);
13
+ --component-button-background-standard-secondary-default: var(--color-background-none);
14
+ --component-button-background-standard-secondary-hover: var(--color-background-none);
15
+ --component-button-background-standard-secondary-active: var(--color-background-none);
16
+ --component-button-background-standard-tertiary-default: var(--color-background-none);
17
+ --component-button-background-standard-tertiary-hover: var(--color-background-none);
18
+ --component-button-background-standard-tertiary-active: var(--color-background-none);
19
+ --component-button-background-danger-primary-default: var(--scania-color-red-400);
20
+ --component-button-background-danger-primary-hover: var(--scania-color-red-500);
21
+ --component-button-background-danger-primary-active: var(--scania-color-red-600);
22
+ --component-button-background-danger-secondary-default: var(--color-background-none);
23
+ --component-button-background-danger-secondary-hover: var(--color-background-none);
24
+ --component-button-background-danger-secondary-active: var(--color-background-none);
25
+ --component-button-background-danger-tertiary-default: var(--color-background-none);
26
+ --component-button-background-danger-tertiary-hover: var(--color-background-none);
27
+ --component-button-background-danger-tertiary-active: var(--color-background-none);
28
+ --component-button-border-radius-default: var(--scania-unit-4);
29
+ --component-button-border-standard-primary-default: var(--color-border-none);
30
+ --component-button-border-standard-primary-hover: var(--color-border-none);
31
+ --component-button-border-standard-primary-active: var(--color-border-none);
32
+ --component-button-border-standard-secondary-default: var(--color-border-soft);
33
+ --component-button-border-standard-secondary-hover: var(--color-border-subtle);
34
+ --component-button-border-standard-secondary-active: var(--color-border-strong);
35
+ --component-button-border-standard-tertiary-default: var(--color-border-none);
36
+ --component-button-border-standard-tertiary-hover: var(--color-border-subtle);
37
+ --component-button-border-standard-tertiary-active: var(--color-border-strong);
38
+ --component-button-border-danger-primary-default: var(--color-border-none);
39
+ --component-button-border-danger-primary-hover: var(--color-border-none);
40
+ --component-button-border-danger-primary-active: var(--color-border-none);
41
+ --component-button-border-danger-secondary-default: var(--scania-color-red-400);
42
+ --component-button-border-danger-secondary-hover: var(--scania-color-red-500);
43
+ --component-button-border-danger-secondary-active: var(--scania-color-red-600);
44
+ --component-button-border-danger-tertiary-default: var(--color-border-none);
45
+ --component-button-border-danger-tertiary-hover: var(--scania-color-red-500);
46
+ --component-button-border-danger-tertiary-active: var(--scania-color-red-600);
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);
49
+ --component-button-icon-standard-primary-hover: var(
50
+ --component-button-icon-standard-primary-default
51
+ );
52
+ --component-button-icon-standard-primary-active: var(
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
68
+ );
69
+ --component-button-icon-danger-primary-default: var(--scania-color-base-white);
70
+ --component-button-icon-danger-primary-hover: var(--component-button-icon-danger-primary-default);
71
+ --component-button-icon-danger-primary-active: var(
72
+ --component-button-icon-danger-primary-default
73
+ );
74
+ --component-button-icon-danger-secondary-default: var(--scania-color-red-400);
75
+ --component-button-icon-danger-secondary-hover: var(--scania-color-red-500);
76
+ --component-button-icon-danger-secondary-active: var(--scania-color-red-600);
77
+ --component-button-icon-danger-tertiary-default: var(--scania-color-red-400);
78
+ --component-button-icon-danger-tertiary-hover: var(--scania-color-red-500);
79
+ --component-button-icon-danger-tertiary-active: var(--scania-color-red-600);
80
+ --component-button-opacity-disabled: var(--scania-opacity-25);
81
+ --component-button-text-standard-primary-default: var(--scania-color-base-white);
82
+ --component-button-text-standard-primary-hover: var(
83
+ --component-button-text-standard-primary-default
84
+ );
85
+ --component-button-text-standard-primary-active: var(
86
+ --component-button-text-standard-primary-default
87
+ );
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);
95
+ --component-button-text-danger-primary-hover: var(--component-button-text-danger-primary-default);
96
+ --component-button-text-danger-primary-active: var(
97
+ --component-button-text-danger-primary-default
98
+ );
99
+ --component-button-text-danger-secondary-default: var(--scania-color-red-400);
100
+ --component-button-text-danger-secondary-hover: var(--scania-color-red-500);
101
+ --component-button-text-danger-secondary-active: var(--scania-color-red-600);
102
+ --component-button-text-danger-tertiary-default: var(--scania-color-red-400);
103
+ --component-button-text-danger-tertiary-hover: var(--scania-color-red-500);
104
+ --component-button-text-danger-tertiary-active: var(--scania-color-red-600);
8
105
  }
9
106
 
10
- .scania .tds-mode-dark tds-button,
11
- .scania .tds-mode-dark .tl-button {
12
- --component-button-primary-text: var(--color-brand-neutral-white);
107
+ .traton .tds-mode-light,
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);
114
+ --component-button-background-standard-secondary-default: var(--color-background-none);
115
+ --component-button-background-standard-secondary-hover: var(--color-background-none);
116
+ --component-button-background-standard-secondary-active: var(--color-background-none);
117
+ --component-button-background-standard-tertiary-default: var(--color-background-none);
118
+ --component-button-background-standard-tertiary-hover: var(--color-background-none);
119
+ --component-button-background-standard-tertiary-active: var(--color-background-none);
120
+ --component-button-background-danger-primary-default: var(--color-system-danger-default);
121
+ --component-button-background-danger-primary-hover: var(--traton-color-red-400);
122
+ --component-button-background-danger-primary-active: var(--traton-color-red-500);
123
+ --component-button-background-danger-secondary-default: var(--color-background-none);
124
+ --component-button-background-danger-secondary-hover: var(--color-background-none);
125
+ --component-button-background-danger-secondary-active: var(--color-background-none);
126
+ --component-button-background-danger-tertiary-default: var(--color-background-none);
127
+ --component-button-background-danger-tertiary-hover: var(--color-background-none);
128
+ --component-button-background-danger-tertiary-active: var(--color-background-none);
129
+ --component-button-border-radius-default: var(--traton-unit-56);
130
+ --component-button-border-standard-primary-default: var(--color-border-none);
131
+ --component-button-border-standard-primary-hover: var(--color-border-none);
132
+ --component-button-border-standard-primary-active: var(--color-border-none);
133
+ --component-button-border-standard-secondary-default: var(--color-border-soft);
134
+ --component-button-border-standard-secondary-hover: var(--color-border-subtle);
135
+ --component-button-border-standard-secondary-active: var(--color-border-strong);
136
+ --component-button-border-standard-tertiary-default: var(--color-border-none);
137
+ --component-button-border-standard-tertiary-hover: var(--color-border-subtle);
138
+ --component-button-border-standard-tertiary-active: var(--color-border-strong);
139
+ --component-button-border-danger-primary-default: var(--color-border-none);
140
+ --component-button-border-danger-primary-hover: var(--color-border-none);
141
+ --component-button-border-danger-primary-active: var(--color-border-none);
142
+ --component-button-border-danger-secondary-default: var(--color-system-danger-default);
143
+ --component-button-border-danger-secondary-hover: var(--traton-color-red-400);
144
+ --component-button-border-danger-secondary-active: var(--traton-color-red-500);
145
+ --component-button-border-danger-tertiary-default: var(--color-border-none);
146
+ --component-button-border-danger-tertiary-hover: var(--traton-color-red-400);
147
+ --component-button-border-danger-tertiary-active: var(--traton-color-red-500);
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);
150
+ --component-button-icon-standard-primary-hover: var(
151
+ --component-button-text-standard-primary-default
152
+ );
153
+ --component-button-icon-standard-primary-active: var(
154
+ --component-button-text-standard-primary-default
155
+ );
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);
172
+ --component-button-icon-danger-primary-active: var(
173
+ --component-button-icon-danger-primary-default
174
+ );
175
+ --component-button-icon-danger-secondary-default: var(--color-system-danger-default);
176
+ --component-button-icon-danger-secondary-hover: var(
177
+ --component-button-text-danger-secondary-default
178
+ );
179
+ --component-button-icon-danger-secondary-active: var(
180
+ --component-button-text-danger-secondary-default
181
+ );
182
+ --component-button-icon-danger-tertiary-default: var(--color-system-danger-default);
183
+ --component-button-icon-danger-tertiary-hover: var(
184
+ --component-button-text-danger-tertiary-default
185
+ );
186
+ --component-button-icon-danger-tertiary-active: var(
187
+ --component-button-text-danger-tertiary-default
188
+ );
189
+ --component-button-opacity-disabled: var(--traton-opacity-25);
190
+ --component-button-text-standard-primary-default: var(--traton-color-base-white);
191
+ --component-button-text-standard-primary-hover: var(
192
+ --component-button-text-standard-primary-default
193
+ );
194
+ --component-button-text-standard-primary-active: var(
195
+ --component-button-text-standard-primary-default
196
+ );
197
+ --component-button-text-standard-secondary-default: var(--color-text-strong);
198
+ --component-button-text-standard-secondary-hover: var(--color-text-strong);
199
+ --component-button-text-standard-secondary-active: var(--color-text-strong);
200
+ --component-button-text-standard-tertiary-default: var(--color-text-strong);
201
+ --component-button-text-standard-tertiary-hover: var(--color-text-strong);
202
+ --component-button-text-standard-tertiary-active: var(--color-text-strong);
203
+ --component-button-text-danger-primary-default: var(--traton-color-base-white);
204
+ --component-button-text-danger-primary-hover: var(--component-button-text-danger-primary-default);
205
+ --component-button-text-danger-primary-active: var(
206
+ --component-button-text-danger-primary-default
207
+ );
208
+ --component-button-text-danger-secondary-default: var(--color-system-danger-default);
209
+ --component-button-text-danger-secondary-hover: var(
210
+ --component-button-text-danger-secondary-default
211
+ );
212
+ --component-button-text-danger-secondary-active: var(
213
+ --component-button-text-danger-secondary-default
214
+ );
215
+ --component-button-text-danger-tertiary-default: var(--color-system-danger-default);
216
+ --component-button-text-danger-tertiary-hover: var(
217
+ --component-button-text-danger-tertiary-default
218
+ );
219
+ --component-button-text-danger-tertiary-active: var(
220
+ --component-button-text-danger-tertiary-default
221
+ );
13
222
  }
14
223
 
15
- .tds-mode-dark tds-button,
16
- .tds-mode-dark .tl-button {
17
- --component-button-primary-text: var(--color-brand-neutral-black);
224
+ .tds-mode-dark,
225
+ .scania .tds-mode-dark,
226
+ .scania.tds-mode-dark,
227
+ .scania .tl-mode-dark,
228
+ .scania.tl-mode-dark {
229
+ --component-button-background-standard-primary-default: var(--scania-color-blue-400);
230
+ --component-button-background-standard-primary-hover: var(--scania-color-blue-500);
231
+ --component-button-background-standard-primary-active: var(--scania-color-blue-600);
232
+ --component-button-background-standard-secondary-default: var(--color-background-none);
233
+ --component-button-background-standard-secondary-hover: var(--color-background-none);
234
+ --component-button-background-standard-secondary-active: var(--color-background-none);
235
+ --component-button-background-standard-tertiary-default: var(--color-background-none);
236
+ --component-button-background-standard-tertiary-hover: var(--color-background-none);
237
+ --component-button-background-standard-tertiary-active: var(--color-background-none);
238
+ --component-button-background-danger-primary-default: var(--scania-color-red-400);
239
+ --component-button-background-danger-primary-hover: var(--scania-color-red-500);
240
+ --component-button-background-danger-primary-active: var(--scania-color-red-600);
241
+ --component-button-background-danger-secondary-default: var(--color-background-none);
242
+ --component-button-background-danger-secondary-hover: var(--color-background-none);
243
+ --component-button-background-danger-secondary-active: var(--color-background-none);
244
+ --component-button-background-danger-tertiary-default: var(--color-background-none);
245
+ --component-button-background-danger-tertiary-hover: var(--color-background-none);
246
+ --component-button-background-danger-tertiary-active: var(--color-background-none);
247
+ --component-button-border-radius-default: var(--scania-unit-4);
248
+ --component-button-border-standard-primary-default: var(--color-border-none);
249
+ --component-button-border-standard-primary-hover: var(--color-border-none);
250
+ --component-button-border-standard-primary-active: var(--color-border-none);
251
+ --component-button-border-standard-secondary-default: var(--color-border-soft);
252
+ --component-button-border-standard-secondary-hover: var(--color-border-subtle);
253
+ --component-button-border-standard-secondary-active: var(--color-border-strong);
254
+ --component-button-border-standard-tertiary-default: var(--color-border-none);
255
+ --component-button-border-standard-tertiary-hover: var(--color-border-subtle);
256
+ --component-button-border-standard-tertiary-active: var(--color-border-strong);
257
+ --component-button-border-danger-primary-default: var(--color-border-none);
258
+ --component-button-border-danger-primary-hover: var(--color-border-none);
259
+ --component-button-border-danger-primary-active: var(--color-border-none);
260
+ --component-button-border-danger-secondary-default: var(--scania-color-red-400);
261
+ --component-button-border-danger-secondary-hover: var(--scania-color-red-500);
262
+ --component-button-border-danger-secondary-active: var(--scania-color-red-600);
263
+ --component-button-border-danger-tertiary-default: var(--color-border-none);
264
+ --component-button-border-danger-tertiary-hover: var(--scania-color-red-500);
265
+ --component-button-border-danger-tertiary-active: var(--scania-color-red-600);
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);
268
+ --component-button-icon-standard-primary-hover: var(
269
+ --component-button-icon-standard-primary-default
270
+ );
271
+ --component-button-icon-standard-primary-active: var(
272
+ --component-button-icon-standard-primary-default
273
+ );
274
+ --component-button-icon-standard-secondary-default: var(--scania-color-base-white);
275
+ --component-button-icon-standard-secondary-hover: var(
276
+ --component-button-icon-standard-secondary-default
277
+ );
278
+ --component-button-icon-standard-secondary-active: var(
279
+ --component-button-icon-standard-secondary-default
280
+ );
281
+ --component-button-icon-standard-tertiary-default: var(--scania-color-base-white);
282
+ --component-button-icon-standard-tertiary-hover: var(
283
+ --component-button-icon-standard-tertiary-default
284
+ );
285
+ --component-button-icon-standard-tertiary-active: var(
286
+ --component-button-icon-standard-tertiary-default
287
+ );
288
+ --component-button-icon-danger-primary-default: var(--scania-color-base-white);
289
+ --component-button-icon-danger-primary-hover: var(--component-button-icon-danger-primary-default);
290
+ --component-button-icon-danger-primary-active: var(
291
+ --component-button-icon-danger-primary-default
292
+ );
293
+ --component-button-icon-danger-secondary-default: var(--scania-color-red-400);
294
+ --component-button-icon-danger-secondary-hover: var(--scania-color-red-500);
295
+ --component-button-icon-danger-secondary-active: var(--scania-color-red-600);
296
+ --component-button-icon-danger-tertiary-default: var(--scania-color-red-400);
297
+ --component-button-icon-danger-tertiary-hover: var(--scania-color-red-500);
298
+ --component-button-icon-danger-tertiary-active: var(--scania-color-red-600);
299
+ --component-button-opacity-disabled: var(--scania-opacity-25);
300
+ --component-button-text-standard-primary-default: var(--scania-color-base-white);
301
+ --component-button-text-standard-primary-hover: var(
302
+ --component-button-text-standard-primary-default
303
+ );
304
+ --component-button-text-standard-primary-active: var(
305
+ --component-button-text-standard-primary-default
306
+ );
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);
314
+ --component-button-text-danger-primary-hover: var(--component-button-text-danger-primary-default);
315
+ --component-button-text-danger-primary-active: var(
316
+ --component-button-text-danger-primary-default
317
+ );
318
+ --component-button-text-danger-secondary-default: var(--scania-color-red-400);
319
+ --component-button-text-danger-secondary-hover: var(--scania-color-red-500);
320
+ --component-button-text-danger-secondary-active: var(--scania-color-red-600);
321
+ --component-button-text-danger-tertiary-default: var(--scania-color-red-400);
322
+ --component-button-text-danger-tertiary-hover: var(--scania-color-red-500);
323
+ --component-button-text-danger-tertiary-active: var(--scania-color-red-600);
324
+ }
325
+
326
+ .traton .tds-mode-dark,
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);
333
+ --component-button-background-standard-secondary-default: var(--color-background-none);
334
+ --component-button-background-standard-secondary-hover: var(--color-background-none);
335
+ --component-button-background-standard-secondary-active: var(--color-background-none);
336
+ --component-button-background-standard-tertiary-default: var(--color-background-none);
337
+ --component-button-background-standard-tertiary-hover: var(--color-background-none);
338
+ --component-button-background-standard-tertiary-active: var(--color-background-none);
339
+ --component-button-background-danger-primary-default: var(--color-system-danger-default);
340
+ --component-button-background-danger-primary-hover: var(--traton-color-red-400);
341
+ --component-button-background-danger-primary-active: var(--traton-color-red-500);
342
+ --component-button-background-danger-secondary-default: var(--color-background-none);
343
+ --component-button-background-danger-secondary-hover: var(--color-background-none);
344
+ --component-button-background-danger-secondary-active: var(--color-background-none);
345
+ --component-button-background-danger-tertiary-default: var(--color-background-none);
346
+ --component-button-background-danger-tertiary-hover: var(--color-background-none);
347
+ --component-button-background-danger-tertiary-active: var(--color-background-none);
348
+ --component-button-border-radius-default: var(--traton-unit-56);
349
+ --component-button-border-standard-primary-default: var(--color-border-none);
350
+ --component-button-border-standard-primary-hover: var(--color-border-none);
351
+ --component-button-border-standard-primary-active: var(--color-border-none);
352
+ --component-button-border-standard-secondary-default: var(--color-border-soft);
353
+ --component-button-border-standard-secondary-hover: var(--color-border-subtle);
354
+ --component-button-border-standard-secondary-active: var(--color-border-strong);
355
+ --component-button-border-standard-tertiary-default: var(--color-border-none);
356
+ --component-button-border-standard-tertiary-hover: var(--color-border-subtle);
357
+ --component-button-border-standard-tertiary-active: var(--color-border-strong);
358
+ --component-button-border-danger-primary-default: var(--color-border-none);
359
+ --component-button-border-danger-primary-hover: var(--color-border-none);
360
+ --component-button-border-danger-primary-active: var(--color-border-none);
361
+ --component-button-border-danger-secondary-default: var(--color-system-danger-default);
362
+ --component-button-border-danger-secondary-hover: var(--traton-color-red-400);
363
+ --component-button-border-danger-secondary-active: var(--traton-color-red-500);
364
+ --component-button-border-danger-tertiary-default: var(--color-border-none);
365
+ --component-button-border-danger-tertiary-hover: var(--traton-color-red-400);
366
+ --component-button-border-danger-tertiary-active: var(--traton-color-red-500);
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);
369
+ --component-button-icon-standard-primary-hover: var(
370
+ --component-button-text-standard-primary-default
371
+ );
372
+ --component-button-icon-standard-primary-active: var(
373
+ --component-button-text-standard-primary-default
374
+ );
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);
390
+ --component-button-icon-danger-primary-hover: var(--component-button-icon-danger-primary-default);
391
+ --component-button-icon-danger-primary-active: var(
392
+ --component-button-icon-danger-primary-default
393
+ );
394
+ --component-button-icon-danger-secondary-default: var(--color-system-danger-default);
395
+ --component-button-icon-danger-secondary-hover: var(
396
+ --component-button-text-danger-secondary-default
397
+ );
398
+ --component-button-icon-danger-secondary-active: var(
399
+ --component-button-text-danger-secondary-default
400
+ );
401
+ --component-button-icon-danger-tertiary-default: var(--color-system-danger-default);
402
+ --component-button-icon-danger-tertiary-hover: var(
403
+ --component-button-text-danger-tertiary-default
404
+ );
405
+ --component-button-icon-danger-tertiary-active: var(
406
+ --component-button-text-danger-tertiary-default
407
+ );
408
+ --component-button-opacity-disabled: var(--traton-opacity-25);
409
+ --component-button-text-standard-primary-default: var(--traton-color-base-black);
410
+ --component-button-text-standard-primary-hover: var(
411
+ --component-button-text-standard-primary-default
412
+ );
413
+ --component-button-text-standard-primary-active: var(
414
+ --component-button-text-standard-primary-default
415
+ );
416
+ --component-button-text-standard-secondary-default: var(--color-text-strong);
417
+ --component-button-text-standard-secondary-hover: var(--color-text-strong);
418
+ --component-button-text-standard-secondary-active: var(--color-text-strong);
419
+ --component-button-text-standard-tertiary-default: var(--color-text-strong);
420
+ --component-button-text-standard-tertiary-hover: var(--color-text-strong);
421
+ --component-button-text-standard-tertiary-active: var(--color-text-strong);
422
+ --component-button-text-danger-primary-default: var(--traton-color-base-white);
423
+ --component-button-text-danger-primary-hover: var(--component-button-text-danger-primary-default);
424
+ --component-button-text-danger-primary-active: var(
425
+ --component-button-text-danger-primary-default
426
+ );
427
+ --component-button-text-danger-secondary-default: var(--color-system-danger-default);
428
+ --component-button-text-danger-secondary-hover: var(
429
+ --component-button-text-danger-secondary-default
430
+ );
431
+ --component-button-text-danger-secondary-active: var(
432
+ --component-button-text-danger-secondary-default
433
+ );
434
+ --component-button-text-danger-tertiary-default: var(--color-system-danger-default);
435
+ --component-button-text-danger-tertiary-hover: var(
436
+ --component-button-text-danger-tertiary-default
437
+ );
438
+ --component-button-text-danger-tertiary-active: var(
439
+ --component-button-text-danger-tertiary-default
440
+ );
18
441
  }
19
442
 
20
443
  .tl-button {
21
- --button-transparent: transparent;
22
- --button-white: var(--color-brand-neutral-white);
23
- --button-black: var(--color-brand-neutral-black);
24
- --button-radius: var(--dimension-radius-for-surface-clickable);
444
+ --button-radius: calc(var(--component-button-border-radius-default) * 1px);
25
445
  --button-sm-only-icon-padding: 11px;
26
446
  --button-md-only-icon-padding: 13px;
27
447
  --button-lg-only-icon-padding: 17px;
28
- --button-primary-background: var(--color-background-accent-primary-default);
29
- --button-primary-background-hover: var(--color-background-accent-primary-hover);
30
- --button-primary-background-active: var(--color-background-accent-primary-pressed);
31
- --button-primary-background-disabled: var(--color-background-accent-primary-disabled);
32
- --button-primary-color: var(--component-button-primary-text);
33
- --button-primary-color-disabled: var(--color-foreground-text-disabled);
34
- --button-primary-border-color: var(--button-transparent);
35
- --button-primary-border-color-disabled: var(--button-transparent);
36
- --button-primary-background-focus: var(--color-background-accent-primary-focus);
37
- --button-primary-color-focus: var(--component-button-primary-text);
38
- --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);
39
457
  --button-primary-outline-color-focus: var(--color-foreground-border-accent-focus);
40
- --button-secondary-background: var(--button-transparent);
41
- --button-secondary-color: var(--color-foreground-text-strong);
42
- --button-secondary-border-color: var(--color-foreground-border-soft);
43
- --button-secondary-border-color-hover: var(--color-foreground-border-subtle);
44
- --button-secondary-border-color-active: var(--color-foreground-border-strong);
45
- --button-secondary-background-disabled: var(--button-transparent);
46
- --button-secondary-color-disabled: var(--color-foreground-text-disabled);
47
- --button-secondary-border-color-disabled: var(--color-foreground-border-discrete);
48
- --button-secondary-background-focus: var(--button-transparent);
49
- --button-secondary-color-focus: var(--color-foreground-text-strong);
50
- --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);
51
469
  --button-secondary-outline-color-focus: var(--color-foreground-border-accent-focus);
52
- --button-ghost-background: var(--button-transparent);
53
- --button-ghost-color: var(--color-foreground-text-strong);
54
- --button-ghost-border-color: var(--button-transparent);
55
- --button-ghost-border-color-hover: var(--color-foreground-border-subtle);
56
- --button-ghost-border-color-active: var(--color-foreground-border-strong);
57
- --button-ghost-color-disabled: var(--color-foreground-text-disabled);
58
- --button-ghost-border-color-disabled: var(--button-transparent);
59
- --button-ghost-background-focus: var(--button-transparent);
60
- --button-ghost-color-focus: var(--color-foreground-text-strong);
61
- --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);
62
479
  --button-ghost-outline-color-focus: var(--color-foreground-border-accent-focus);
63
- --button-danger-background: var(--color-background-accent-danger-default);
64
- --button-danger-color: var(--button-white);
65
- --button-danger-border-color: var(--button-transparent);
66
- --button-danger-background-hover: var(--color-background-accent-danger-hover);
67
- --button-danger-background-active: var(--color-background-accent-danger-pressed);
68
- --button-danger-background-disabled: var(--color-background-accent-danger-disabled);
69
- --button-danger-color-disabled: var(--color-foreground-text-disabled);
70
- --button-danger-border-color-disabled: var(--button-transparent);
71
- --button-danger-border-color-active: var(--color-background-accent-danger-pressed);
72
- --button-danger-background-focus: var(--color-background-accent-danger-focus);
73
- --button-danger-color-focus: var(--button-white);
74
- --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);
75
490
  --button-danger-outline-color-focus: var(--color-foreground-border-accent-focus);
76
- }
77
- .tl-button .tl-button--primary {
78
- --button-primary-background-disabled: var(--color-background-accent-primary-disabled);
79
- --button-danger-background-disabled: var(--color-background-accent-danger-disabled);
80
- }
81
- .tl-button .tl-button--secondary {
82
- --button-primary-background-disabled: var(--button-white);
83
- --button-danger-background-disabled: var(--button-white);
491
+ --button-danger-icon-color: var(--component-button-icon-danger-primary-default);
84
492
  }
85
493
 
86
494
  .scania .tl-button {
@@ -118,8 +526,10 @@ tds-button,
118
526
  cursor: pointer;
119
527
  }
120
528
  .tl-button:focus-visible {
121
- outline: var(--button-outline-width) solid var(--color-foreground-border-accent-focus);
122
- 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;
123
533
  }
124
534
  .tl-button {
125
535
  /* Variants */
@@ -129,25 +539,24 @@ tds-button,
129
539
  color: var(--button-primary-color);
130
540
  border-color: var(--button-primary-border-color);
131
541
  }
542
+ .tl-button--primary .tl-icon {
543
+ color: var(--button-primary-icon-color);
544
+ }
132
545
  .tl-button--primary:hover:not(:disabled) {
133
546
  background-color: var(--button-primary-background-hover);
134
547
  }
135
548
  .tl-button--primary:disabled {
136
- background-color: var(--button-primary-background-disabled);
137
- color: var(--button-primary-color-disabled);
138
- border-color: var(--button-primary-border-color-disabled);
139
549
  cursor: not-allowed;
140
- opacity: 0.6;
550
+ opacity: var(--button-opacity-disabled);
141
551
  }
142
552
  .tl-button--primary:focus-visible:not(:disabled) {
143
553
  background: var(--button-primary-background-focus);
144
554
  border-color: var(--button-primary-border-color-focus);
145
555
  color: var(--button-primary-color-focus);
146
- outline-color: var(--button-primary-outline-color-focus);
147
556
  }
148
557
  .tl-button--primary:active:not(:disabled):focus-visible {
149
558
  outline: none;
150
- outline-offset: none;
559
+ box-shadow: none;
151
560
  }
152
561
  .tl-button--primary:active:not(:disabled) {
153
562
  background-color: var(--button-primary-background-active);
@@ -158,24 +567,24 @@ tds-button,
158
567
  color: var(--button-secondary-color);
159
568
  border-color: var(--button-secondary-border-color);
160
569
  }
570
+ .tl-button--secondary .tl-icon {
571
+ color: var(--button-secondary-icon-color);
572
+ }
161
573
  .tl-button--secondary:hover:not(:disabled) {
162
574
  border-color: var(--button-secondary-border-color-hover);
163
575
  }
164
576
  .tl-button--secondary:disabled {
165
- background-color: var(--button-secondary-background-disabled);
166
- color: var(--button-secondary-color-disabled);
167
- border-color: var(--button-secondary-border-color-disabled);
168
577
  cursor: not-allowed;
169
- opacity: 0.6;
578
+ opacity: var(--button-opacity-disabled);
170
579
  }
171
580
  .tl-button--secondary:focus-visible:not(:disabled) {
172
581
  background: var(--button-secondary-background-focus);
173
582
  border-color: var(--button-secondary-border-color-focus);
174
583
  color: var(--button-secondary-color-focus);
175
- outline-color: var(--button-secondary-outline-color-focus);
176
584
  }
177
585
  .tl-button--secondary:active:not(:disabled):focus-visible {
178
586
  outline: none;
587
+ box-shadow: none;
179
588
  }
180
589
  .tl-button--secondary:active:not(:disabled) {
181
590
  border-color: var(--button-secondary-border-color-active);
@@ -185,22 +594,24 @@ tds-button,
185
594
  color: var(--button-ghost-color);
186
595
  border-color: var(--button-ghost-border-color);
187
596
  }
597
+ .tl-button--ghost .tl-icon {
598
+ color: var(--button-ghost-icon-color);
599
+ }
188
600
  .tl-button--ghost:hover:not(:disabled) {
189
601
  border-color: var(--button-ghost-border-color-hover);
190
602
  }
191
603
  .tl-button--ghost:disabled {
192
- color: var(--button-ghost-color-disabled);
193
604
  cursor: not-allowed;
194
- opacity: 0.6;
605
+ opacity: var(--button-opacity-disabled);
195
606
  }
196
607
  .tl-button--ghost:focus-visible:not(:disabled) {
197
608
  background: var(--button-ghost-background-focus);
198
609
  border-color: var(--button-ghost-border-color-focus);
199
610
  color: var(--button-ghost-color-focus);
200
- outline-color: var(--button-ghost-outline-color-focus);
201
611
  }
202
612
  .tl-button--ghost:active:not(:disabled):focus-visible {
203
613
  outline: none;
614
+ box-shadow: none;
204
615
  }
205
616
  .tl-button--ghost:active:not(:disabled) {
206
617
  border-color: var(--button-ghost-border-color-active);
@@ -210,24 +621,24 @@ tds-button,
210
621
  color: var(--button-danger-color);
211
622
  border-color: var(--button-danger-border-color);
212
623
  }
624
+ .tl-button--danger .tl-icon {
625
+ color: var(--button-danger-icon-color);
626
+ }
213
627
  .tl-button--danger:hover:not(:disabled) {
214
628
  background-color: var(--button-danger-background-hover);
215
629
  }
216
630
  .tl-button--danger:disabled {
217
- background-color: var(--button-danger-background-disabled);
218
- color: var(--button-danger-color-disabled);
219
- border-color: var(--button-danger-border-color-disabled);
220
631
  cursor: not-allowed;
221
- opacity: 0.6;
632
+ opacity: var(--button-opacity-disabled);
222
633
  }
223
634
  .tl-button--danger:focus-visible:not(:disabled) {
224
635
  background: var(--button-danger-background-focus);
225
636
  border-color: var(--button-danger-border-color-focus);
226
637
  color: var(--button-danger-color-focus);
227
- outline-color: var(--button-danger-outline-color-focus);
228
638
  }
229
639
  .tl-button--danger:active:not(:disabled):focus-visible {
230
640
  outline: none;
641
+ box-shadow: none;
231
642
  }
232
643
  .tl-button--danger:active:not(:disabled) {
233
644
  background-color: var(--button-danger-background-active);