@scania/tegel-lite 0.1.0-beta.updated-globals → 0.1.0-dev-test-beta.0

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (32) hide show
  1. package/dist/assets/icons/scania/configurator.svg +1 -0
  2. package/dist/assets/icons/traton/edit_inactive.svg +1 -0
  3. package/dist/assets/icons/traton/skip_backwards.svg +1 -0
  4. package/dist/assets/icons/traton/skip_forward.svg +1 -0
  5. package/dist/components.css +1044 -447
  6. package/dist/global.css +45 -3560
  7. package/dist/scania-variables.css +328 -453
  8. package/dist/tl-accordion.css +8 -8
  9. package/dist/tl-badge.css +4 -18
  10. package/dist/tl-banner.css +2 -2
  11. package/dist/tl-button.css +397 -10
  12. package/dist/tl-card.css +47 -11
  13. package/dist/tl-checkbox-vars.css +1 -1
  14. package/dist/tl-checkbox.css +1 -1
  15. package/dist/tl-chip.css +21 -71
  16. package/dist/tl-datetime.css +7 -4
  17. package/dist/tl-dropdown.css +55 -8
  18. package/dist/tl-footer.css +34 -52
  19. package/dist/tl-header.css +189 -103
  20. package/dist/tl-icon.css +2 -2
  21. package/dist/tl-modal.css +33 -14
  22. package/dist/tl-side-menu.css +131 -42
  23. package/dist/tl-slider.css +416 -20
  24. package/dist/tl-spinner.css +10 -18
  25. package/dist/tl-step.css +28 -2
  26. package/dist/tl-stepper.css +28 -2
  27. package/dist/tl-table.css +42 -9
  28. package/dist/tl-text-field.css +19 -67
  29. package/dist/tl-toggle.css +1 -1
  30. package/dist/traton-variables.css +330 -437
  31. package/package.json +1 -1
  32. /package/dist/assets/icons/scania/{gift inactive.svg → gift_inactive.svg} +0 -0
package/dist/tl-slider.css CHANGED
@@ -12,6 +12,8 @@
12
12
  --slider-disabled-text: var(--color-foreground-text-disabled);
13
13
  --slider-value-tooltip-background: var(--color-background-inverse-layer-03);
14
14
  --slider-value-tooltip: var(--color-foreground-text-inverse-strong);
15
+ --slider-input-background: var(--color-background-layer-01);
16
+ --slider-input-box-shadow: 0 -1px 0 0 var(--color-foreground-border-soft);
15
17
  }
16
18
 
17
19
  .tl-slider,
@@ -21,25 +23,413 @@
21
23
 
22
24
  .traton .tl-slider {
23
25
  --slider-border-radius: 4px;
26
+ --slider-input-box-shadow: 0 0 0 1px var(--color-foreground-border-soft);
24
27
  }
25
28
 
26
29
  /**
27
30
  * Do not edit directly, this file was auto-generated.
28
31
  */
29
- .tl-button,
30
- tds-button,
31
- .tds-mode-light tds-button {
32
- --component-button-primary-text: var(--color-brand-neutral-white);
32
+ :root,
33
+ .tds-mode-light,
34
+ .scania .tds-mode-light,
35
+ .scania.tds-mode-light,
36
+ .scania .tl-mode-light,
37
+ .scania.tl-mode-light {
38
+ --component-button-background-standard-primary-default: var(--scania-color-blue-600);
39
+ --component-button-background-standard-primary-hover: var(--scania-color-blue-700);
40
+ --component-button-background-standard-primary-active: var(--scania-color-blue-700);
41
+ --component-button-background-standard-secondary-default: var(--color-background-none);
42
+ --component-button-background-standard-secondary-hover: var(--color-background-none);
43
+ --component-button-background-standard-secondary-active: var(--color-background-none);
44
+ --component-button-background-standard-tertiary-default: var(--color-background-none);
45
+ --component-button-background-standard-tertiary-hover: var(--color-background-none);
46
+ --component-button-background-standard-tertiary-active: var(--color-background-none);
47
+ --component-button-background-danger-primary-default: var(--color-system-danger-default);
48
+ --component-button-background-danger-primary-hover: var(--scania-color-red-500);
49
+ --component-button-background-danger-primary-active: var(--scania-color-red-600);
50
+ --component-button-background-danger-secondary-default: var(--color-background-none);
51
+ --component-button-background-danger-secondary-hover: var(--color-background-none);
52
+ --component-button-background-danger-secondary-active: var(--color-background-none);
53
+ --component-button-background-danger-tertiary-default: var(--color-background-none);
54
+ --component-button-background-danger-tertiary-hover: var(--color-background-none);
55
+ --component-button-background-danger-tertiary-active: var(--color-background-none);
56
+ --component-button-border-radius-default: var(--scania-unit-4);
57
+ --component-button-border-standard-primary-default: var(--color-border-none);
58
+ --component-button-border-standard-primary-hover: var(--color-border-none);
59
+ --component-button-border-standard-primary-active: var(--color-border-none);
60
+ --component-button-border-standard-secondary-default: var(--color-border-soft);
61
+ --component-button-border-standard-secondary-hover: var(--color-border-subtle);
62
+ --component-button-border-standard-secondary-active: var(--color-border-strong);
63
+ --component-button-border-standard-tertiary-default: var(--color-border-none);
64
+ --component-button-border-standard-tertiary-hover: var(--color-border-subtle);
65
+ --component-button-border-standard-tertiary-active: var(--color-border-strong);
66
+ --component-button-border-danger-primary-default: var(--color-border-none);
67
+ --component-button-border-danger-primary-hover: var(--color-border-none);
68
+ --component-button-border-danger-primary-active: var(--color-border-none);
69
+ --component-button-border-danger-secondary-default: var(--color-system-danger-default);
70
+ --component-button-border-danger-secondary-hover: var(--scania-color-red-500);
71
+ --component-button-border-danger-secondary-active: var(--scania-color-red-600);
72
+ --component-button-border-danger-tertiary-default: var(--color-border-none);
73
+ --component-button-border-danger-tertiary-hover: var(--scania-color-red-500);
74
+ --component-button-border-danger-tertiary-active: var(--scania-color-red-600);
75
+ --component-button-icon-standard-primary-default: var(--color-text-inverse-brand);
76
+ --component-button-icon-standard-primary-hover: var(
77
+ --component-button-text-standard-primary-default
78
+ );
79
+ --component-button-icon-standard-primary-active: var(
80
+ --component-button-text-standard-primary-default
81
+ );
82
+ --component-button-icon-standard-secondary-default: var(--color-text-strong);
83
+ --component-button-icon-standard-secondary-hover: var(--color-text-strong);
84
+ --component-button-icon-standard-secondary-active: var(--color-text-strong);
85
+ --component-button-icon-standard-tertiary-default: var(--color-text-strong);
86
+ --component-button-icon-standard-tertiary-hover: var(--color-text-strong);
87
+ --component-button-icon-standard-tertiary-active: var(--color-text-strong);
88
+ --component-button-icon-danger-primary-default: var(--color-text-inverse-strong);
89
+ --component-button-icon-danger-primary-hover: var(--component-button-text-danger-primary-default);
90
+ --component-button-icon-danger-primary-active: var(
91
+ --component-button-text-danger-primary-default
92
+ );
93
+ --component-button-icon-danger-secondary-default: var(--color-system-danger-default);
94
+ --component-button-icon-danger-secondary-hover: var(--scania-color-red-500);
95
+ --component-button-icon-danger-secondary-active: var(--scania-color-red-600);
96
+ --component-button-icon-danger-tertiary-default: var(--color-system-danger-default);
97
+ --component-button-icon-danger-tertiary-hover: var(--scania-color-red-500);
98
+ --component-button-icon-danger-tertiary-active: var(--scania-color-red-600);
99
+ --component-button-opacity-disabled: var(--scania-opacity-25);
100
+ --component-button-text-standard-primary-default: var(--color-text-inverse-brand);
101
+ --component-button-text-standard-primary-hover: var(
102
+ --component-button-text-standard-primary-default
103
+ );
104
+ --component-button-text-standard-primary-active: var(
105
+ --component-button-text-standard-primary-default
106
+ );
107
+ --component-button-text-standard-secondary-default: var(--color-text-strong);
108
+ --component-button-text-standard-secondary-hover: var(--color-text-strong);
109
+ --component-button-text-standard-secondary-active: var(--color-text-strong);
110
+ --component-button-text-standard-tertiary-default: var(--color-text-strong);
111
+ --component-button-text-standard-tertiary-hover: var(--color-text-strong);
112
+ --component-button-text-standard-tertiary-active: var(--color-text-strong);
113
+ --component-button-text-danger-primary-default: var(--color-text-inverse-strong);
114
+ --component-button-text-danger-primary-hover: var(--component-button-text-danger-primary-default);
115
+ --component-button-text-danger-primary-active: var(
116
+ --component-button-text-danger-primary-default
117
+ );
118
+ --component-button-text-danger-secondary-default: var(--color-system-danger-default);
119
+ --component-button-text-danger-secondary-hover: var(--scania-color-red-500);
120
+ --component-button-text-danger-secondary-active: var(--scania-color-red-600);
121
+ --component-button-text-danger-tertiary-default: var(--color-system-danger-default);
122
+ --component-button-text-danger-tertiary-hover: var(--scania-color-red-500);
123
+ --component-button-text-danger-tertiary-active: var(--scania-color-red-600);
33
124
  }
34
125
 
35
- .scania .tds-mode-dark tds-button,
36
- .scania .tds-mode-dark .tl-button {
37
- --component-button-primary-text: var(--color-brand-neutral-white);
126
+ .traton .tds-mode-light,
127
+ .traton.tds-mode-light,
128
+ .traton .tl-mode-light,
129
+ .traton.tl-mode-light {
130
+ --component-button-background-standard-primary-default: #004852;
131
+ --component-button-background-standard-primary-hover: #003137;
132
+ --component-button-background-standard-primary-active: #002429;
133
+ --component-button-background-standard-secondary-default: var(--color-background-none);
134
+ --component-button-background-standard-secondary-hover: var(--color-background-none);
135
+ --component-button-background-standard-secondary-active: var(--color-background-none);
136
+ --component-button-background-standard-tertiary-default: var(--color-background-none);
137
+ --component-button-background-standard-tertiary-hover: var(--color-background-none);
138
+ --component-button-background-standard-tertiary-active: var(--color-background-none);
139
+ --component-button-background-danger-primary-default: var(--color-system-danger-default);
140
+ --component-button-background-danger-primary-hover: var(--traton-color-red-400);
141
+ --component-button-background-danger-primary-active: var(--traton-color-red-500);
142
+ --component-button-background-danger-secondary-default: var(--color-background-none);
143
+ --component-button-background-danger-secondary-hover: var(--color-background-none);
144
+ --component-button-background-danger-secondary-active: var(--color-background-none);
145
+ --component-button-background-danger-tertiary-default: var(--color-background-none);
146
+ --component-button-background-danger-tertiary-hover: var(--color-background-none);
147
+ --component-button-background-danger-tertiary-active: var(--color-background-none);
148
+ --component-button-border-radius-default: var(--traton-unit-56);
149
+ --component-button-border-standard-primary-default: var(--color-border-none);
150
+ --component-button-border-standard-primary-hover: var(--color-border-none);
151
+ --component-button-border-standard-primary-active: var(--color-border-none);
152
+ --component-button-border-standard-secondary-default: var(--color-border-soft);
153
+ --component-button-border-standard-secondary-hover: var(--color-border-subtle);
154
+ --component-button-border-standard-secondary-active: var(--color-border-strong);
155
+ --component-button-border-standard-tertiary-default: var(--color-border-none);
156
+ --component-button-border-standard-tertiary-hover: var(--color-border-subtle);
157
+ --component-button-border-standard-tertiary-active: var(--color-border-strong);
158
+ --component-button-border-danger-primary-default: var(--color-border-none);
159
+ --component-button-border-danger-primary-hover: var(--color-border-none);
160
+ --component-button-border-danger-primary-active: var(--color-border-none);
161
+ --component-button-border-danger-secondary-default: var(--color-system-danger-default);
162
+ --component-button-border-danger-secondary-hover: var(--traton-color-red-400);
163
+ --component-button-border-danger-secondary-active: var(--traton-color-red-500);
164
+ --component-button-border-danger-tertiary-default: var(--color-border-none);
165
+ --component-button-border-danger-tertiary-hover: var(--traton-color-red-400);
166
+ --component-button-border-danger-tertiary-active: var(--traton-color-red-500);
167
+ --component-button-icon-standard-primary-default: #fff;
168
+ --component-button-icon-standard-primary-hover: var(
169
+ --component-button-text-standard-primary-default
170
+ );
171
+ --component-button-icon-standard-primary-active: var(
172
+ --component-button-text-standard-primary-default
173
+ );
174
+ --component-button-icon-standard-secondary-default: var(--color-text-strong);
175
+ --component-button-icon-standard-secondary-hover: var(--color-text-strong);
176
+ --component-button-icon-standard-secondary-active: var(--color-text-strong);
177
+ --component-button-icon-standard-tertiary-default: var(--color-text-strong);
178
+ --component-button-icon-standard-tertiary-hover: var(--color-text-strong);
179
+ --component-button-icon-standard-tertiary-active: var(--color-text-strong);
180
+ --component-button-icon-danger-primary-default: var(--color-text-inverse-strong);
181
+ --component-button-icon-danger-primary-hover: var(--component-button-text-danger-primary-default);
182
+ --component-button-icon-danger-primary-active: var(
183
+ --component-button-text-danger-primary-default
184
+ );
185
+ --component-button-icon-danger-secondary-default: var(--color-system-danger-default);
186
+ --component-button-icon-danger-secondary-hover: var(
187
+ --component-button-text-danger-secondary-default
188
+ );
189
+ --component-button-icon-danger-secondary-active: var(
190
+ --component-button-text-danger-secondary-default
191
+ );
192
+ --component-button-icon-danger-tertiary-default: var(--color-system-danger-default);
193
+ --component-button-icon-danger-tertiary-hover: var(
194
+ --component-button-text-danger-tertiary-default
195
+ );
196
+ --component-button-icon-danger-tertiary-active: var(
197
+ --component-button-text-danger-tertiary-default
198
+ );
199
+ --component-button-opacity-disabled: var(--traton-opacity-25);
200
+ --component-button-text-standard-primary-default: #fff;
201
+ --component-button-text-standard-primary-hover: var(
202
+ --component-button-text-standard-primary-default
203
+ );
204
+ --component-button-text-standard-primary-active: var(
205
+ --component-button-text-standard-primary-default
206
+ );
207
+ --component-button-text-standard-secondary-default: var(--color-text-strong);
208
+ --component-button-text-standard-secondary-hover: var(--color-text-strong);
209
+ --component-button-text-standard-secondary-active: var(--color-text-strong);
210
+ --component-button-text-standard-tertiary-default: var(--color-text-strong);
211
+ --component-button-text-standard-tertiary-hover: var(--color-text-strong);
212
+ --component-button-text-standard-tertiary-active: var(--color-text-strong);
213
+ --component-button-text-danger-primary-default: var(--color-text-inverse-strong);
214
+ --component-button-text-danger-primary-hover: var(--component-button-text-danger-primary-default);
215
+ --component-button-text-danger-primary-active: var(
216
+ --component-button-text-danger-primary-default
217
+ );
218
+ --component-button-text-danger-secondary-default: var(--color-system-danger-default);
219
+ --component-button-text-danger-secondary-hover: var(
220
+ --component-button-text-danger-secondary-default
221
+ );
222
+ --component-button-text-danger-secondary-active: var(
223
+ --component-button-text-danger-secondary-default
224
+ );
225
+ --component-button-text-danger-tertiary-default: var(--color-system-danger-default);
226
+ --component-button-text-danger-tertiary-hover: var(
227
+ --component-button-text-danger-tertiary-default
228
+ );
229
+ --component-button-text-danger-tertiary-active: var(
230
+ --component-button-text-danger-tertiary-default
231
+ );
38
232
  }
39
233
 
40
- .tds-mode-dark tds-button,
41
- .tds-mode-dark .tl-button {
42
- --component-button-primary-text: var(--color-brand-neutral-black);
234
+ .tds-mode-dark,
235
+ .scania .tds-mode-dark,
236
+ .scania.tds-mode-dark,
237
+ .scania .tl-mode-dark,
238
+ .scania.tl-mode-dark {
239
+ --component-button-background-standard-primary-default: var(--scania-color-blue-400);
240
+ --component-button-background-standard-primary-hover: var(--scania-color-blue-500);
241
+ --component-button-background-standard-primary-active: var(--scania-color-blue-600);
242
+ --component-button-background-standard-secondary-default: var(--color-background-none);
243
+ --component-button-background-standard-secondary-hover: var(--color-background-none);
244
+ --component-button-background-standard-secondary-active: var(--color-background-none);
245
+ --component-button-background-standard-tertiary-default: var(--color-background-none);
246
+ --component-button-background-standard-tertiary-hover: var(--color-background-none);
247
+ --component-button-background-standard-tertiary-active: var(--color-background-none);
248
+ --component-button-background-danger-primary-default: var(--color-system-danger-subtle);
249
+ --component-button-background-danger-primary-hover: var(--scania-color-red-500);
250
+ --component-button-background-danger-primary-active: var(--scania-color-red-600);
251
+ --component-button-background-danger-secondary-default: var(--color-background-none);
252
+ --component-button-background-danger-secondary-hover: var(--color-background-none);
253
+ --component-button-background-danger-secondary-active: var(--color-background-none);
254
+ --component-button-background-danger-tertiary-default: var(--color-background-none);
255
+ --component-button-background-danger-tertiary-hover: var(--color-background-none);
256
+ --component-button-background-danger-tertiary-active: var(--color-background-none);
257
+ --component-button-border-radius-default: var(--scania-unit-4);
258
+ --component-button-border-standard-primary-default: var(--color-border-none);
259
+ --component-button-border-standard-primary-hover: var(--color-border-none);
260
+ --component-button-border-standard-primary-active: var(--color-border-none);
261
+ --component-button-border-standard-secondary-default: var(--color-border-soft);
262
+ --component-button-border-standard-secondary-hover: var(--color-border-subtle);
263
+ --component-button-border-standard-secondary-active: var(--color-border-strong);
264
+ --component-button-border-standard-tertiary-default: var(--color-border-none);
265
+ --component-button-border-standard-tertiary-hover: var(--color-border-subtle);
266
+ --component-button-border-standard-tertiary-active: var(--color-border-strong);
267
+ --component-button-border-danger-primary-default: var(--color-border-none);
268
+ --component-button-border-danger-primary-hover: var(--color-border-none);
269
+ --component-button-border-danger-primary-active: var(--color-border-none);
270
+ --component-button-border-danger-secondary-default: var(--color-system-danger-default);
271
+ --component-button-border-danger-secondary-hover: var(--scania-color-red-500);
272
+ --component-button-border-danger-secondary-active: var(--scania-color-red-600);
273
+ --component-button-border-danger-tertiary-default: var(--color-border-none);
274
+ --component-button-border-danger-tertiary-hover: var(--scania-color-red-500);
275
+ --component-button-border-danger-tertiary-active: var(--scania-color-red-600);
276
+ --component-button-icon-standard-primary-default: var(--color-text-inverse-brand);
277
+ --component-button-icon-standard-primary-hover: var(
278
+ --component-button-text-standard-primary-default
279
+ );
280
+ --component-button-icon-standard-primary-active: var(
281
+ --component-button-text-standard-primary-default
282
+ );
283
+ --component-button-icon-standard-secondary-default: var(--color-text-strong);
284
+ --component-button-icon-standard-secondary-hover: var(--color-text-strong);
285
+ --component-button-icon-standard-secondary-active: var(--color-text-strong);
286
+ --component-button-icon-standard-tertiary-default: var(--color-text-strong);
287
+ --component-button-icon-standard-tertiary-hover: var(--color-text-strong);
288
+ --component-button-icon-standard-tertiary-active: var(--color-text-strong);
289
+ --component-button-icon-danger-primary-default: var(--color-text-strong);
290
+ --component-button-icon-danger-primary-hover: var(--component-button-icon-danger-primary-default);
291
+ --component-button-icon-danger-primary-active: var(
292
+ --component-button-icon-danger-primary-default
293
+ );
294
+ --component-button-icon-danger-secondary-default: var(--color-system-danger-default);
295
+ --component-button-icon-danger-secondary-hover: var(--scania-color-red-500);
296
+ --component-button-icon-danger-secondary-active: var(--scania-color-red-600);
297
+ --component-button-icon-danger-tertiary-default: var(--color-system-danger-default);
298
+ --component-button-icon-danger-tertiary-hover: var(--scania-color-red-500);
299
+ --component-button-icon-danger-tertiary-active: var(--scania-color-red-600);
300
+ --component-button-opacity-disabled: var(--scania-opacity-25);
301
+ --component-button-text-standard-primary-default: var(--color-text-brand);
302
+ --component-button-text-standard-primary-hover: var(
303
+ --component-button-text-standard-primary-default
304
+ );
305
+ --component-button-text-standard-primary-active: var(
306
+ --component-button-text-standard-primary-default
307
+ );
308
+ --component-button-text-standard-secondary-default: var(--color-text-strong);
309
+ --component-button-text-standard-secondary-hover: var(--color-text-strong);
310
+ --component-button-text-standard-secondary-active: var(--color-text-strong);
311
+ --component-button-text-standard-tertiary-default: var(--color-text-strong);
312
+ --component-button-text-standard-tertiary-hover: var(--color-text-strong);
313
+ --component-button-text-standard-tertiary-active: var(--color-text-strong);
314
+ --component-button-text-danger-primary-default: var(--color-text-strong);
315
+ --component-button-text-danger-primary-hover: var(--component-button-text-danger-primary-default);
316
+ --component-button-text-danger-primary-active: var(
317
+ --component-button-text-danger-primary-default
318
+ );
319
+ --component-button-text-danger-secondary-default: var(--color-system-danger-default);
320
+ --component-button-text-danger-secondary-hover: var(--scania-color-red-500);
321
+ --component-button-text-danger-secondary-active: var(--scania-color-red-600);
322
+ --component-button-text-danger-tertiary-default: var(--color-system-danger-default);
323
+ --component-button-text-danger-tertiary-hover: var(--scania-color-red-500);
324
+ --component-button-text-danger-tertiary-active: var(--scania-color-red-600);
325
+ }
326
+
327
+ .traton .tds-mode-dark,
328
+ .traton.tds-mode-dark,
329
+ .traton .tl-mode-dark,
330
+ .traton.tl-mode-dark {
331
+ --component-button-background-standard-primary-default: #c2bfb6;
332
+ --component-button-background-standard-primary-hover: #d6d4c9;
333
+ --component-button-background-standard-primary-active: #a6a49c;
334
+ --component-button-background-standard-secondary-default: var(--color-background-none);
335
+ --component-button-background-standard-secondary-hover: var(--color-background-none);
336
+ --component-button-background-standard-secondary-active: var(--color-background-none);
337
+ --component-button-background-standard-tertiary-default: var(--color-background-none);
338
+ --component-button-background-standard-tertiary-hover: var(--color-background-none);
339
+ --component-button-background-standard-tertiary-active: var(--color-background-none);
340
+ --component-button-background-danger-primary-default: var(--color-system-danger-default);
341
+ --component-button-background-danger-primary-hover: var(--traton-color-red-400);
342
+ --component-button-background-danger-primary-active: var(--traton-color-red-500);
343
+ --component-button-background-danger-secondary-default: var(--color-background-none);
344
+ --component-button-background-danger-secondary-hover: var(--color-background-none);
345
+ --component-button-background-danger-secondary-active: var(--color-background-none);
346
+ --component-button-background-danger-tertiary-default: var(--color-background-none);
347
+ --component-button-background-danger-tertiary-hover: var(--color-background-none);
348
+ --component-button-background-danger-tertiary-active: var(--color-background-none);
349
+ --component-button-border-radius-default: var(--traton-unit-56);
350
+ --component-button-border-standard-primary-default: var(--color-border-none);
351
+ --component-button-border-standard-primary-hover: var(--color-border-none);
352
+ --component-button-border-standard-primary-active: var(--color-border-none);
353
+ --component-button-border-standard-secondary-default: var(--color-border-soft);
354
+ --component-button-border-standard-secondary-hover: var(--color-border-subtle);
355
+ --component-button-border-standard-secondary-active: var(--color-border-strong);
356
+ --component-button-border-standard-tertiary-default: var(--color-border-none);
357
+ --component-button-border-standard-tertiary-hover: var(--color-border-subtle);
358
+ --component-button-border-standard-tertiary-active: var(--color-border-strong);
359
+ --component-button-border-danger-primary-default: var(--color-border-none);
360
+ --component-button-border-danger-primary-hover: var(--color-border-none);
361
+ --component-button-border-danger-primary-active: var(--color-border-none);
362
+ --component-button-border-danger-secondary-default: var(--color-system-danger-default);
363
+ --component-button-border-danger-secondary-hover: var(--traton-color-red-400);
364
+ --component-button-border-danger-secondary-active: var(--traton-color-red-500);
365
+ --component-button-border-danger-tertiary-default: var(--color-border-none);
366
+ --component-button-border-danger-tertiary-hover: var(--traton-color-red-400);
367
+ --component-button-border-danger-tertiary-active: var(--traton-color-red-500);
368
+ --component-button-icon-standard-primary-default: #000;
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(--color-text-strong);
376
+ --component-button-icon-standard-secondary-hover: var(--color-text-strong);
377
+ --component-button-icon-standard-secondary-active: var(--color-text-strong);
378
+ --component-button-icon-standard-tertiary-default: var(--color-text-strong);
379
+ --component-button-icon-standard-tertiary-hover: var(--color-text-strong);
380
+ --component-button-icon-standard-tertiary-active: var(--color-text-strong);
381
+ --component-button-icon-danger-primary-default: var(--color-text-strong);
382
+ --component-button-icon-danger-primary-hover: var(--component-button-icon-danger-primary-default);
383
+ --component-button-icon-danger-primary-active: var(
384
+ --component-button-icon-danger-primary-default
385
+ );
386
+ --component-button-icon-danger-secondary-default: var(--color-system-danger-default);
387
+ --component-button-icon-danger-secondary-hover: var(
388
+ --component-button-text-danger-secondary-default
389
+ );
390
+ --component-button-icon-danger-secondary-active: var(
391
+ --component-button-text-danger-secondary-default
392
+ );
393
+ --component-button-icon-danger-tertiary-default: var(--color-system-danger-default);
394
+ --component-button-icon-danger-tertiary-hover: var(
395
+ --component-button-text-danger-tertiary-default
396
+ );
397
+ --component-button-icon-danger-tertiary-active: var(
398
+ --component-button-text-danger-tertiary-default
399
+ );
400
+ --component-button-opacity-disabled: var(--traton-opacity-25);
401
+ --component-button-text-standard-primary-default: #000;
402
+ --component-button-text-standard-primary-hover: var(
403
+ --component-button-text-standard-primary-default
404
+ );
405
+ --component-button-text-standard-primary-active: var(
406
+ --component-button-text-standard-primary-default
407
+ );
408
+ --component-button-text-standard-secondary-default: var(--color-text-strong);
409
+ --component-button-text-standard-secondary-hover: var(--color-text-strong);
410
+ --component-button-text-standard-secondary-active: var(--color-text-strong);
411
+ --component-button-text-standard-tertiary-default: var(--color-text-strong);
412
+ --component-button-text-standard-tertiary-hover: var(--color-text-strong);
413
+ --component-button-text-standard-tertiary-active: var(--color-text-strong);
414
+ --component-button-text-danger-primary-default: var(--color-text-strong);
415
+ --component-button-text-danger-primary-hover: var(--component-button-text-danger-primary-default);
416
+ --component-button-text-danger-primary-active: var(
417
+ --component-button-text-danger-primary-default
418
+ );
419
+ --component-button-text-danger-secondary-default: var(--color-system-danger-default);
420
+ --component-button-text-danger-secondary-hover: var(
421
+ --component-button-text-danger-secondary-default
422
+ );
423
+ --component-button-text-danger-secondary-active: var(
424
+ --component-button-text-danger-secondary-default
425
+ );
426
+ --component-button-text-danger-tertiary-default: var(--color-system-danger-default);
427
+ --component-button-text-danger-tertiary-hover: var(
428
+ --component-button-text-danger-tertiary-default
429
+ );
430
+ --component-button-text-danger-tertiary-active: var(
431
+ --component-button-text-danger-tertiary-default
432
+ );
43
433
  }
44
434
 
45
435
  .tl-button {
@@ -787,8 +1177,8 @@ tds-button,
787
1177
  mask-image: var(--icon-gift-svg);
788
1178
  background-color: currentcolor;
789
1179
  }
790
- .tl-icon--gift inactive {
791
- mask-image: var(--icon-gift inactive-svg);
1180
+ .tl-icon--gift_inactive {
1181
+ mask-image: var(--icon-gift_inactive-svg);
792
1182
  background-color: currentcolor;
793
1183
  }
794
1184
  .tl-icon--global {
@@ -1563,7 +1953,7 @@ tds-button,
1563
1953
  margin-bottom: 2px;
1564
1954
  margin-left: 0;
1565
1955
  }
1566
- :has(input[type=range]:disabled) .tl-slider__label {
1956
+ .tl-slider:has(input[type=range]:disabled) .tl-slider__label {
1567
1957
  color: var(--slider-disabled-text);
1568
1958
  }
1569
1959
 
@@ -1643,7 +2033,7 @@ tds-button,
1643
2033
  flex-shrink: 0;
1644
2034
  align-self: center;
1645
2035
  }
1646
- :has(input[type=range]:disabled) .tl-slider__value {
2036
+ .tl-slider:has(input[type=range]:disabled) .tl-slider__value {
1647
2037
  color: var(--slider-disabled-text);
1648
2038
  }
1649
2039
 
@@ -1654,6 +2044,7 @@ tds-button,
1654
2044
  min-width: auto;
1655
2045
  margin-left: 0;
1656
2046
  align-self: center;
2047
+ border-radius: var(--slider-border-radius);
1657
2048
  }
1658
2049
  .tl-slider__input-wrapper.tl-text-field:not(.tl-text-field--label-inside):has(.tl-text-field__input[readonly]):not(:has(.tl-text-field__input:disabled))::before {
1659
2050
  width: 16px;
@@ -1668,6 +2059,11 @@ tds-button,
1668
2059
  padding: 12px;
1669
2060
  text-align: center;
1670
2061
  appearance: textfield;
2062
+ border: none;
2063
+ background-color: var(--slider-input-background);
2064
+ color: var(--slider-input-value);
2065
+ border-radius: var(--slider-border-radius);
2066
+ box-shadow: inset var(--slider-input-box-shadow);
1671
2067
  }
1672
2068
  .tl-slider__input-wrapper .tl-slider__input-field--decimal {
1673
2069
  width: 56px;
@@ -1718,7 +2114,7 @@ tds-button,
1718
2114
  .tl-slider__thumb:hover .tl-slider__value-tooltip {
1719
2115
  display: block;
1720
2116
  }
1721
- :has(input[type=range]:disabled) .tl-slider__value-tooltip {
2117
+ .tl-slider:has(input[type=range]:disabled) .tl-slider__value-tooltip {
1722
2118
  display: none;
1723
2119
  }
1724
2120
 
@@ -1775,11 +2171,11 @@ tds-button,
1775
2171
  width: 20px;
1776
2172
  height: 20px;
1777
2173
  }
1778
- :has(input[type=range]:disabled) .tl-slider__thumb-inner {
2174
+ .tl-slider:has(input[type=range]:disabled) .tl-slider__thumb-inner {
1779
2175
  background-color: var(--slider-disabled);
1780
2176
  cursor: not-allowed;
1781
2177
  }
1782
- :has(input[type=range]:disabled) .tl-slider__thumb-inner::before {
2178
+ .tl-slider:has(input[type=range]:disabled) .tl-slider__thumb-inner::before {
1783
2179
  display: none;
1784
2180
  }
1785
2181
 
@@ -1810,7 +2206,7 @@ tds-button,
1810
2206
  left: 50%;
1811
2207
  transform: translate(-50%, -50%);
1812
2208
  }
1813
- :has(input[type=range]:disabled) .tl-slider__value-divider-line {
2209
+ .tl-slider:has(input[type=range]:disabled) .tl-slider__value-divider-line {
1814
2210
  background-color: var(--slider-disabled);
1815
2211
  }
1816
2212
 
@@ -1832,7 +2228,7 @@ tds-button,
1832
2228
  user-select: none;
1833
2229
  color: var(--slider-divider-values);
1834
2230
  }
1835
- :has(input[type=range]:disabled) .tl-slider__value-divider-label {
2231
+ .tl-slider:has(input[type=range]:disabled) .tl-slider__value-divider-label {
1836
2232
  color: var(--slider-disabled-text);
1837
2233
  }
1838
2234
 
@@ -1845,7 +2241,7 @@ tds-button,
1845
2241
  top: -1px;
1846
2242
  z-index: 1;
1847
2243
  }
1848
- :has(input[type=range]:disabled) .tl-slider__track-fill {
2244
+ .tl-slider:has(input[type=range]:disabled) .tl-slider__track-fill {
1849
2245
  background-color: var(--slider-disabled);
1850
2246
  }
1851
2247
 
package/dist/tl-spinner.css CHANGED
@@ -1,25 +1,17 @@
1
- /**
2
- * Do not edit directly, this file was auto-generated.
3
- */
4
- .tl-spinner,
5
- tds-spinner {
6
- --component-spinner-color: var(--color-system-info-default);
7
- }
8
-
9
1
  /* Component variables */
10
2
  .tl-spinner {
11
- --tl-spinner-background: var(--component-spinner-color);
12
- --tl-spinner-background-inverted: var(--color-brand-neutral-white);
3
+ --tl-spinner-background: var(--component-spinner-background-default);
4
+ --tl-spinner-background-inverted: var(--component-spinner-background-default-inverse);
13
5
  --tl-spinner-speed: 1.8s;
14
6
  --tl-spinner-speed-lg: 2s;
15
- --tl-spinner-radius-xs: 8px;
16
- --tl-spinner-radius-sm: 12px;
17
- --tl-spinner-radius-md: 26px;
18
- --tl-spinner-radius-lg: 42px;
19
- --tl-spinner-stroke-width-xs: 3px;
20
- --tl-spinner-stroke-width-sm: 4px;
21
- --tl-spinner-stroke-width-md: 6px;
22
- --tl-spinner-stroke-width-lg: 8px;
7
+ --tl-spinner-radius-xs: calc(var(--component-spinner-size-extra-small) / 2 * 1px);
8
+ --tl-spinner-radius-sm: calc(var(--component-spinner-size-small) / 2 * 1px);
9
+ --tl-spinner-radius-md: calc(var(--component-spinner-size-medium) / 2 * 1px);
10
+ --tl-spinner-radius-lg: calc(var(--component-spinner-size-large) / 2 * 1px);
11
+ --tl-spinner-stroke-width-xs: calc(var(--component-spinner-stroke-extra-small) * 1px);
12
+ --tl-spinner-stroke-width-sm: calc(var(--component-spinner-stroke-small) * 1px);
13
+ --tl-spinner-stroke-width-md: calc(var(--component-spinner-stroke-medium) * 1px);
14
+ --tl-spinner-stroke-width-lg: calc(var(--component-spinner-stroke-large) * 1px);
23
15
  --tl-spinner-PI: 3.14159265358979;
24
16
  --tl-spinner-radius: var(--tl-spinner-radius-lg);
25
17
  --tl-spinner-stroke-width: var(--tl-spinner-stroke-width-lg);
package/dist/tl-step.css CHANGED
@@ -2,8 +2,34 @@
2
2
  /**
3
3
  * Do not edit directly, this file was auto-generated.
4
4
  */
5
- .tl-stepper,
6
- tds-stepper {
5
+ :root,
6
+ .tds-mode-light,
7
+ .scania .tds-mode-light,
8
+ .scania.tds-mode-light,
9
+ .scania .tl-mode-light,
10
+ .scania.tl-mode-light {
11
+ --component-stepper-success: var(--color-system-success-default);
12
+ }
13
+
14
+ .traton .tds-mode-light,
15
+ .traton.tds-mode-light,
16
+ .traton .tl-mode-light,
17
+ .traton.tl-mode-light {
18
+ --component-stepper-success: var(--color-system-success-default);
19
+ }
20
+
21
+ .tds-mode-dark,
22
+ .scania .tds-mode-dark,
23
+ .scania.tds-mode-dark,
24
+ .scania .tl-mode-dark,
25
+ .scania.tl-mode-dark {
26
+ --component-stepper-success: var(--color-system-success-default);
27
+ }
28
+
29
+ .traton .tds-mode-dark,
30
+ .traton.tds-mode-dark,
31
+ .traton .tl-mode-dark,
32
+ .traton.tl-mode-dark {
7
33
  --component-stepper-success: var(--color-system-success-default);
8
34
  }
9
35
 
package/dist/tl-stepper.css CHANGED
@@ -1,8 +1,34 @@
1
1
  /**
2
2
  * Do not edit directly, this file was auto-generated.
3
3
  */
4
- .tl-stepper,
5
- tds-stepper {
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-stepper-success: var(--color-system-success-default);
11
+ }
12
+
13
+ .traton .tds-mode-light,
14
+ .traton.tds-mode-light,
15
+ .traton .tl-mode-light,
16
+ .traton.tl-mode-light {
17
+ --component-stepper-success: var(--color-system-success-default);
18
+ }
19
+
20
+ .tds-mode-dark,
21
+ .scania .tds-mode-dark,
22
+ .scania.tds-mode-dark,
23
+ .scania .tl-mode-dark,
24
+ .scania.tl-mode-dark {
25
+ --component-stepper-success: var(--color-system-success-default);
26
+ }
27
+
28
+ .traton .tds-mode-dark,
29
+ .traton.tds-mode-dark,
30
+ .traton .tl-mode-dark,
31
+ .traton.tl-mode-dark {
6
32
  --component-stepper-success: var(--color-system-success-default);
7
33
  }
8
34