@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-accordion.css CHANGED
@@ -18,26 +18,26 @@
18
18
  }
19
19
 
20
20
  /* Mode variants */
21
- .tds-mode-light .tl-accordion--primary,
22
- .tds-mode-light .tl-accordion .tl-accordion--primary {
21
+ .tl-mode-light .tl-accordion--primary,
22
+ .tl-mode-light .tl-accordion .tl-accordion--primary {
23
23
  background-color: var(--accordion-background-hover-secondary);
24
24
  --accordion-background-hover: var(--accordion-background-hover-primary);
25
25
  }
26
26
 
27
- .tds-mode-light .tl-accordion--secondary,
28
- .tds-mode-light .tl-accordion .tl-accordion--secondary {
27
+ .tl-mode-light .tl-accordion--secondary,
28
+ .tl-mode-light .tl-accordion .tl-accordion--secondary {
29
29
  background-color: var(--accordion-background-hover-primary);
30
30
  --accordion-background-hover: var(--accordion-background-hover-secondary);
31
31
  }
32
32
 
33
- .tds-mode-dark .tl-accordion--primary,
34
- .tds-mode-dark .tl-accordion .tl-accordion--primary {
33
+ .tl-mode-dark .tl-accordion--primary,
34
+ .tl-mode-dark .tl-accordion .tl-accordion--primary {
35
35
  background-color: var(--accordion-background-hover-secondary);
36
36
  --accordion-background-hover: var(--accordion-background-hover-primary);
37
37
  }
38
38
 
39
- .tds-mode-dark .tl-accordion--secondary,
40
- .tds-mode-dark .tl-accordion .tl-accordion--secondary {
39
+ .tl-mode-dark .tl-accordion--secondary,
40
+ .tl-mode-dark .tl-accordion .tl-accordion--secondary {
41
41
  background-color: var(--accordion-background-hover-primary);
42
42
  --accordion-background-hover: var(--accordion-background-hover-secondary);
43
43
  }
package/dist/tl-badge.css CHANGED
@@ -1,21 +1,7 @@
1
- /**
2
- * Do not edit directly, this file was auto-generated.
3
- */
4
- .tl-badge,
5
- tds-badge {
6
- --component-badge-text: var(--color-brand-neutral-white);
7
- --component-badge-background: var(--color-system-danger-subtle);
8
- }
9
-
10
- .traton .tl-badge,
11
- .traton tds-badge {
12
- --component-badge-text: var(--color-brand-neutral-black);
13
- --component-badge-background: var(--color-system-warning-subtle);
14
- }
15
-
16
1
  .tl-badge {
17
- --badge-background-color: var(--component-badge-background);
18
- --badge-color-text: var(--component-badge-text);
2
+ --badge-background-color: var(--component-badge-background-default);
3
+ --badge-color-text: var(--component-badge-text-default);
4
+ --badge-border-radius: calc(var(--component-badge-border-radius-default) * 1px);
19
5
  }
20
6
 
21
7
  /* Typography Usage mixins */
@@ -27,7 +13,7 @@ tds-badge {
27
13
  }
28
14
  .tl-badge {
29
15
  display: block;
30
- border-radius: 12px;
16
+ border-radius: var(--badge-border-radius);
31
17
  background-color: var(--badge-background-color);
32
18
  text-align: center;
33
19
  }
package/dist/tl-banner.css CHANGED
@@ -1,6 +1,6 @@
1
1
  :root,
2
- .tds-mode-light,
3
- .tds-mode-dark {
2
+ .tl-mode-light,
3
+ .tl-mode-dark {
4
4
  --banner-text: var(--color-foreground-text-strong);
5
5
  --banner-close-icon: var(--color-foreground-icon-strong);
6
6
  --banner-background-default: var(--color-background-layer-01);
package/dist/tl-button.css CHANGED
@@ -1,20 +1,407 @@
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-700);
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(--color-system-danger-default);
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(--color-system-danger-default);
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-icon-standard-primary-default: var(--color-text-inverse-brand);
48
+ --component-button-icon-standard-primary-hover: var(
49
+ --component-button-text-standard-primary-default
50
+ );
51
+ --component-button-icon-standard-primary-active: var(
52
+ --component-button-text-standard-primary-default
53
+ );
54
+ --component-button-icon-standard-secondary-default: var(--color-text-strong);
55
+ --component-button-icon-standard-secondary-hover: var(--color-text-strong);
56
+ --component-button-icon-standard-secondary-active: var(--color-text-strong);
57
+ --component-button-icon-standard-tertiary-default: var(--color-text-strong);
58
+ --component-button-icon-standard-tertiary-hover: var(--color-text-strong);
59
+ --component-button-icon-standard-tertiary-active: var(--color-text-strong);
60
+ --component-button-icon-danger-primary-default: var(--color-text-inverse-strong);
61
+ --component-button-icon-danger-primary-hover: var(--component-button-text-danger-primary-default);
62
+ --component-button-icon-danger-primary-active: var(
63
+ --component-button-text-danger-primary-default
64
+ );
65
+ --component-button-icon-danger-secondary-default: var(--color-system-danger-default);
66
+ --component-button-icon-danger-secondary-hover: var(--scania-color-red-500);
67
+ --component-button-icon-danger-secondary-active: var(--scania-color-red-600);
68
+ --component-button-icon-danger-tertiary-default: var(--color-system-danger-default);
69
+ --component-button-icon-danger-tertiary-hover: var(--scania-color-red-500);
70
+ --component-button-icon-danger-tertiary-active: var(--scania-color-red-600);
71
+ --component-button-opacity-disabled: var(--scania-opacity-25);
72
+ --component-button-text-standard-primary-default: var(--color-text-inverse-brand);
73
+ --component-button-text-standard-primary-hover: var(
74
+ --component-button-text-standard-primary-default
75
+ );
76
+ --component-button-text-standard-primary-active: var(
77
+ --component-button-text-standard-primary-default
78
+ );
79
+ --component-button-text-standard-secondary-default: var(--color-text-strong);
80
+ --component-button-text-standard-secondary-hover: var(--color-text-strong);
81
+ --component-button-text-standard-secondary-active: var(--color-text-strong);
82
+ --component-button-text-standard-tertiary-default: var(--color-text-strong);
83
+ --component-button-text-standard-tertiary-hover: var(--color-text-strong);
84
+ --component-button-text-standard-tertiary-active: var(--color-text-strong);
85
+ --component-button-text-danger-primary-default: var(--color-text-inverse-strong);
86
+ --component-button-text-danger-primary-hover: var(--component-button-text-danger-primary-default);
87
+ --component-button-text-danger-primary-active: var(
88
+ --component-button-text-danger-primary-default
89
+ );
90
+ --component-button-text-danger-secondary-default: var(--color-system-danger-default);
91
+ --component-button-text-danger-secondary-hover: var(--scania-color-red-500);
92
+ --component-button-text-danger-secondary-active: var(--scania-color-red-600);
93
+ --component-button-text-danger-tertiary-default: var(--color-system-danger-default);
94
+ --component-button-text-danger-tertiary-hover: var(--scania-color-red-500);
95
+ --component-button-text-danger-tertiary-active: var(--scania-color-red-600);
8
96
  }
9
97
 
10
- .scania .tds-mode-dark tds-button,
11
- .scania .tds-mode-dark .tl-button {
12
- --component-button-primary-text: var(--color-brand-neutral-white);
98
+ .traton .tds-mode-light,
99
+ .traton.tds-mode-light,
100
+ .traton .tl-mode-light,
101
+ .traton.tl-mode-light {
102
+ --component-button-background-standard-primary-default: #004852;
103
+ --component-button-background-standard-primary-hover: #003137;
104
+ --component-button-background-standard-primary-active: #002429;
105
+ --component-button-background-standard-secondary-default: var(--color-background-none);
106
+ --component-button-background-standard-secondary-hover: var(--color-background-none);
107
+ --component-button-background-standard-secondary-active: var(--color-background-none);
108
+ --component-button-background-standard-tertiary-default: var(--color-background-none);
109
+ --component-button-background-standard-tertiary-hover: var(--color-background-none);
110
+ --component-button-background-standard-tertiary-active: var(--color-background-none);
111
+ --component-button-background-danger-primary-default: var(--color-system-danger-default);
112
+ --component-button-background-danger-primary-hover: var(--traton-color-red-400);
113
+ --component-button-background-danger-primary-active: var(--traton-color-red-500);
114
+ --component-button-background-danger-secondary-default: var(--color-background-none);
115
+ --component-button-background-danger-secondary-hover: var(--color-background-none);
116
+ --component-button-background-danger-secondary-active: var(--color-background-none);
117
+ --component-button-background-danger-tertiary-default: var(--color-background-none);
118
+ --component-button-background-danger-tertiary-hover: var(--color-background-none);
119
+ --component-button-background-danger-tertiary-active: var(--color-background-none);
120
+ --component-button-border-radius-default: var(--traton-unit-56);
121
+ --component-button-border-standard-primary-default: var(--color-border-none);
122
+ --component-button-border-standard-primary-hover: var(--color-border-none);
123
+ --component-button-border-standard-primary-active: var(--color-border-none);
124
+ --component-button-border-standard-secondary-default: var(--color-border-soft);
125
+ --component-button-border-standard-secondary-hover: var(--color-border-subtle);
126
+ --component-button-border-standard-secondary-active: var(--color-border-strong);
127
+ --component-button-border-standard-tertiary-default: var(--color-border-none);
128
+ --component-button-border-standard-tertiary-hover: var(--color-border-subtle);
129
+ --component-button-border-standard-tertiary-active: var(--color-border-strong);
130
+ --component-button-border-danger-primary-default: var(--color-border-none);
131
+ --component-button-border-danger-primary-hover: var(--color-border-none);
132
+ --component-button-border-danger-primary-active: var(--color-border-none);
133
+ --component-button-border-danger-secondary-default: var(--color-system-danger-default);
134
+ --component-button-border-danger-secondary-hover: var(--traton-color-red-400);
135
+ --component-button-border-danger-secondary-active: var(--traton-color-red-500);
136
+ --component-button-border-danger-tertiary-default: var(--color-border-none);
137
+ --component-button-border-danger-tertiary-hover: var(--traton-color-red-400);
138
+ --component-button-border-danger-tertiary-active: var(--traton-color-red-500);
139
+ --component-button-icon-standard-primary-default: #fff;
140
+ --component-button-icon-standard-primary-hover: var(
141
+ --component-button-text-standard-primary-default
142
+ );
143
+ --component-button-icon-standard-primary-active: var(
144
+ --component-button-text-standard-primary-default
145
+ );
146
+ --component-button-icon-standard-secondary-default: var(--color-text-strong);
147
+ --component-button-icon-standard-secondary-hover: var(--color-text-strong);
148
+ --component-button-icon-standard-secondary-active: var(--color-text-strong);
149
+ --component-button-icon-standard-tertiary-default: var(--color-text-strong);
150
+ --component-button-icon-standard-tertiary-hover: var(--color-text-strong);
151
+ --component-button-icon-standard-tertiary-active: var(--color-text-strong);
152
+ --component-button-icon-danger-primary-default: var(--color-text-inverse-strong);
153
+ --component-button-icon-danger-primary-hover: var(--component-button-text-danger-primary-default);
154
+ --component-button-icon-danger-primary-active: var(
155
+ --component-button-text-danger-primary-default
156
+ );
157
+ --component-button-icon-danger-secondary-default: var(--color-system-danger-default);
158
+ --component-button-icon-danger-secondary-hover: var(
159
+ --component-button-text-danger-secondary-default
160
+ );
161
+ --component-button-icon-danger-secondary-active: var(
162
+ --component-button-text-danger-secondary-default
163
+ );
164
+ --component-button-icon-danger-tertiary-default: var(--color-system-danger-default);
165
+ --component-button-icon-danger-tertiary-hover: var(
166
+ --component-button-text-danger-tertiary-default
167
+ );
168
+ --component-button-icon-danger-tertiary-active: var(
169
+ --component-button-text-danger-tertiary-default
170
+ );
171
+ --component-button-opacity-disabled: var(--traton-opacity-25);
172
+ --component-button-text-standard-primary-default: #fff;
173
+ --component-button-text-standard-primary-hover: var(
174
+ --component-button-text-standard-primary-default
175
+ );
176
+ --component-button-text-standard-primary-active: var(
177
+ --component-button-text-standard-primary-default
178
+ );
179
+ --component-button-text-standard-secondary-default: var(--color-text-strong);
180
+ --component-button-text-standard-secondary-hover: var(--color-text-strong);
181
+ --component-button-text-standard-secondary-active: var(--color-text-strong);
182
+ --component-button-text-standard-tertiary-default: var(--color-text-strong);
183
+ --component-button-text-standard-tertiary-hover: var(--color-text-strong);
184
+ --component-button-text-standard-tertiary-active: var(--color-text-strong);
185
+ --component-button-text-danger-primary-default: var(--color-text-inverse-strong);
186
+ --component-button-text-danger-primary-hover: var(--component-button-text-danger-primary-default);
187
+ --component-button-text-danger-primary-active: var(
188
+ --component-button-text-danger-primary-default
189
+ );
190
+ --component-button-text-danger-secondary-default: var(--color-system-danger-default);
191
+ --component-button-text-danger-secondary-hover: var(
192
+ --component-button-text-danger-secondary-default
193
+ );
194
+ --component-button-text-danger-secondary-active: var(
195
+ --component-button-text-danger-secondary-default
196
+ );
197
+ --component-button-text-danger-tertiary-default: var(--color-system-danger-default);
198
+ --component-button-text-danger-tertiary-hover: var(
199
+ --component-button-text-danger-tertiary-default
200
+ );
201
+ --component-button-text-danger-tertiary-active: var(
202
+ --component-button-text-danger-tertiary-default
203
+ );
13
204
  }
14
205
 
15
- .tds-mode-dark tds-button,
16
- .tds-mode-dark .tl-button {
17
- --component-button-primary-text: var(--color-brand-neutral-black);
206
+ .tds-mode-dark,
207
+ .scania .tds-mode-dark,
208
+ .scania.tds-mode-dark,
209
+ .scania .tl-mode-dark,
210
+ .scania.tl-mode-dark {
211
+ --component-button-background-standard-primary-default: var(--scania-color-blue-400);
212
+ --component-button-background-standard-primary-hover: var(--scania-color-blue-500);
213
+ --component-button-background-standard-primary-active: var(--scania-color-blue-600);
214
+ --component-button-background-standard-secondary-default: var(--color-background-none);
215
+ --component-button-background-standard-secondary-hover: var(--color-background-none);
216
+ --component-button-background-standard-secondary-active: var(--color-background-none);
217
+ --component-button-background-standard-tertiary-default: var(--color-background-none);
218
+ --component-button-background-standard-tertiary-hover: var(--color-background-none);
219
+ --component-button-background-standard-tertiary-active: var(--color-background-none);
220
+ --component-button-background-danger-primary-default: var(--color-system-danger-subtle);
221
+ --component-button-background-danger-primary-hover: var(--scania-color-red-500);
222
+ --component-button-background-danger-primary-active: var(--scania-color-red-600);
223
+ --component-button-background-danger-secondary-default: var(--color-background-none);
224
+ --component-button-background-danger-secondary-hover: var(--color-background-none);
225
+ --component-button-background-danger-secondary-active: var(--color-background-none);
226
+ --component-button-background-danger-tertiary-default: var(--color-background-none);
227
+ --component-button-background-danger-tertiary-hover: var(--color-background-none);
228
+ --component-button-background-danger-tertiary-active: var(--color-background-none);
229
+ --component-button-border-radius-default: var(--scania-unit-4);
230
+ --component-button-border-standard-primary-default: var(--color-border-none);
231
+ --component-button-border-standard-primary-hover: var(--color-border-none);
232
+ --component-button-border-standard-primary-active: var(--color-border-none);
233
+ --component-button-border-standard-secondary-default: var(--color-border-soft);
234
+ --component-button-border-standard-secondary-hover: var(--color-border-subtle);
235
+ --component-button-border-standard-secondary-active: var(--color-border-strong);
236
+ --component-button-border-standard-tertiary-default: var(--color-border-none);
237
+ --component-button-border-standard-tertiary-hover: var(--color-border-subtle);
238
+ --component-button-border-standard-tertiary-active: var(--color-border-strong);
239
+ --component-button-border-danger-primary-default: var(--color-border-none);
240
+ --component-button-border-danger-primary-hover: var(--color-border-none);
241
+ --component-button-border-danger-primary-active: var(--color-border-none);
242
+ --component-button-border-danger-secondary-default: var(--color-system-danger-default);
243
+ --component-button-border-danger-secondary-hover: var(--scania-color-red-500);
244
+ --component-button-border-danger-secondary-active: var(--scania-color-red-600);
245
+ --component-button-border-danger-tertiary-default: var(--color-border-none);
246
+ --component-button-border-danger-tertiary-hover: var(--scania-color-red-500);
247
+ --component-button-border-danger-tertiary-active: var(--scania-color-red-600);
248
+ --component-button-icon-standard-primary-default: var(--color-text-inverse-brand);
249
+ --component-button-icon-standard-primary-hover: var(
250
+ --component-button-text-standard-primary-default
251
+ );
252
+ --component-button-icon-standard-primary-active: var(
253
+ --component-button-text-standard-primary-default
254
+ );
255
+ --component-button-icon-standard-secondary-default: var(--color-text-strong);
256
+ --component-button-icon-standard-secondary-hover: var(--color-text-strong);
257
+ --component-button-icon-standard-secondary-active: var(--color-text-strong);
258
+ --component-button-icon-standard-tertiary-default: var(--color-text-strong);
259
+ --component-button-icon-standard-tertiary-hover: var(--color-text-strong);
260
+ --component-button-icon-standard-tertiary-active: var(--color-text-strong);
261
+ --component-button-icon-danger-primary-default: var(--color-text-strong);
262
+ --component-button-icon-danger-primary-hover: var(--component-button-icon-danger-primary-default);
263
+ --component-button-icon-danger-primary-active: var(
264
+ --component-button-icon-danger-primary-default
265
+ );
266
+ --component-button-icon-danger-secondary-default: var(--color-system-danger-default);
267
+ --component-button-icon-danger-secondary-hover: var(--scania-color-red-500);
268
+ --component-button-icon-danger-secondary-active: var(--scania-color-red-600);
269
+ --component-button-icon-danger-tertiary-default: var(--color-system-danger-default);
270
+ --component-button-icon-danger-tertiary-hover: var(--scania-color-red-500);
271
+ --component-button-icon-danger-tertiary-active: var(--scania-color-red-600);
272
+ --component-button-opacity-disabled: var(--scania-opacity-25);
273
+ --component-button-text-standard-primary-default: var(--color-text-brand);
274
+ --component-button-text-standard-primary-hover: var(
275
+ --component-button-text-standard-primary-default
276
+ );
277
+ --component-button-text-standard-primary-active: var(
278
+ --component-button-text-standard-primary-default
279
+ );
280
+ --component-button-text-standard-secondary-default: var(--color-text-strong);
281
+ --component-button-text-standard-secondary-hover: var(--color-text-strong);
282
+ --component-button-text-standard-secondary-active: var(--color-text-strong);
283
+ --component-button-text-standard-tertiary-default: var(--color-text-strong);
284
+ --component-button-text-standard-tertiary-hover: var(--color-text-strong);
285
+ --component-button-text-standard-tertiary-active: var(--color-text-strong);
286
+ --component-button-text-danger-primary-default: var(--color-text-strong);
287
+ --component-button-text-danger-primary-hover: var(--component-button-text-danger-primary-default);
288
+ --component-button-text-danger-primary-active: var(
289
+ --component-button-text-danger-primary-default
290
+ );
291
+ --component-button-text-danger-secondary-default: var(--color-system-danger-default);
292
+ --component-button-text-danger-secondary-hover: var(--scania-color-red-500);
293
+ --component-button-text-danger-secondary-active: var(--scania-color-red-600);
294
+ --component-button-text-danger-tertiary-default: var(--color-system-danger-default);
295
+ --component-button-text-danger-tertiary-hover: var(--scania-color-red-500);
296
+ --component-button-text-danger-tertiary-active: var(--scania-color-red-600);
297
+ }
298
+
299
+ .traton .tds-mode-dark,
300
+ .traton.tds-mode-dark,
301
+ .traton .tl-mode-dark,
302
+ .traton.tl-mode-dark {
303
+ --component-button-background-standard-primary-default: #c2bfb6;
304
+ --component-button-background-standard-primary-hover: #d6d4c9;
305
+ --component-button-background-standard-primary-active: #a6a49c;
306
+ --component-button-background-standard-secondary-default: var(--color-background-none);
307
+ --component-button-background-standard-secondary-hover: var(--color-background-none);
308
+ --component-button-background-standard-secondary-active: var(--color-background-none);
309
+ --component-button-background-standard-tertiary-default: var(--color-background-none);
310
+ --component-button-background-standard-tertiary-hover: var(--color-background-none);
311
+ --component-button-background-standard-tertiary-active: var(--color-background-none);
312
+ --component-button-background-danger-primary-default: var(--color-system-danger-default);
313
+ --component-button-background-danger-primary-hover: var(--traton-color-red-400);
314
+ --component-button-background-danger-primary-active: var(--traton-color-red-500);
315
+ --component-button-background-danger-secondary-default: var(--color-background-none);
316
+ --component-button-background-danger-secondary-hover: var(--color-background-none);
317
+ --component-button-background-danger-secondary-active: var(--color-background-none);
318
+ --component-button-background-danger-tertiary-default: var(--color-background-none);
319
+ --component-button-background-danger-tertiary-hover: var(--color-background-none);
320
+ --component-button-background-danger-tertiary-active: var(--color-background-none);
321
+ --component-button-border-radius-default: var(--traton-unit-56);
322
+ --component-button-border-standard-primary-default: var(--color-border-none);
323
+ --component-button-border-standard-primary-hover: var(--color-border-none);
324
+ --component-button-border-standard-primary-active: var(--color-border-none);
325
+ --component-button-border-standard-secondary-default: var(--color-border-soft);
326
+ --component-button-border-standard-secondary-hover: var(--color-border-subtle);
327
+ --component-button-border-standard-secondary-active: var(--color-border-strong);
328
+ --component-button-border-standard-tertiary-default: var(--color-border-none);
329
+ --component-button-border-standard-tertiary-hover: var(--color-border-subtle);
330
+ --component-button-border-standard-tertiary-active: var(--color-border-strong);
331
+ --component-button-border-danger-primary-default: var(--color-border-none);
332
+ --component-button-border-danger-primary-hover: var(--color-border-none);
333
+ --component-button-border-danger-primary-active: var(--color-border-none);
334
+ --component-button-border-danger-secondary-default: var(--color-system-danger-default);
335
+ --component-button-border-danger-secondary-hover: var(--traton-color-red-400);
336
+ --component-button-border-danger-secondary-active: var(--traton-color-red-500);
337
+ --component-button-border-danger-tertiary-default: var(--color-border-none);
338
+ --component-button-border-danger-tertiary-hover: var(--traton-color-red-400);
339
+ --component-button-border-danger-tertiary-active: var(--traton-color-red-500);
340
+ --component-button-icon-standard-primary-default: #000;
341
+ --component-button-icon-standard-primary-hover: var(
342
+ --component-button-text-standard-primary-default
343
+ );
344
+ --component-button-icon-standard-primary-active: var(
345
+ --component-button-text-standard-primary-default
346
+ );
347
+ --component-button-icon-standard-secondary-default: var(--color-text-strong);
348
+ --component-button-icon-standard-secondary-hover: var(--color-text-strong);
349
+ --component-button-icon-standard-secondary-active: var(--color-text-strong);
350
+ --component-button-icon-standard-tertiary-default: var(--color-text-strong);
351
+ --component-button-icon-standard-tertiary-hover: var(--color-text-strong);
352
+ --component-button-icon-standard-tertiary-active: var(--color-text-strong);
353
+ --component-button-icon-danger-primary-default: var(--color-text-strong);
354
+ --component-button-icon-danger-primary-hover: var(--component-button-icon-danger-primary-default);
355
+ --component-button-icon-danger-primary-active: var(
356
+ --component-button-icon-danger-primary-default
357
+ );
358
+ --component-button-icon-danger-secondary-default: var(--color-system-danger-default);
359
+ --component-button-icon-danger-secondary-hover: var(
360
+ --component-button-text-danger-secondary-default
361
+ );
362
+ --component-button-icon-danger-secondary-active: var(
363
+ --component-button-text-danger-secondary-default
364
+ );
365
+ --component-button-icon-danger-tertiary-default: var(--color-system-danger-default);
366
+ --component-button-icon-danger-tertiary-hover: var(
367
+ --component-button-text-danger-tertiary-default
368
+ );
369
+ --component-button-icon-danger-tertiary-active: var(
370
+ --component-button-text-danger-tertiary-default
371
+ );
372
+ --component-button-opacity-disabled: var(--traton-opacity-25);
373
+ --component-button-text-standard-primary-default: #000;
374
+ --component-button-text-standard-primary-hover: var(
375
+ --component-button-text-standard-primary-default
376
+ );
377
+ --component-button-text-standard-primary-active: var(
378
+ --component-button-text-standard-primary-default
379
+ );
380
+ --component-button-text-standard-secondary-default: var(--color-text-strong);
381
+ --component-button-text-standard-secondary-hover: var(--color-text-strong);
382
+ --component-button-text-standard-secondary-active: var(--color-text-strong);
383
+ --component-button-text-standard-tertiary-default: var(--color-text-strong);
384
+ --component-button-text-standard-tertiary-hover: var(--color-text-strong);
385
+ --component-button-text-standard-tertiary-active: var(--color-text-strong);
386
+ --component-button-text-danger-primary-default: var(--color-text-strong);
387
+ --component-button-text-danger-primary-hover: var(--component-button-text-danger-primary-default);
388
+ --component-button-text-danger-primary-active: var(
389
+ --component-button-text-danger-primary-default
390
+ );
391
+ --component-button-text-danger-secondary-default: var(--color-system-danger-default);
392
+ --component-button-text-danger-secondary-hover: var(
393
+ --component-button-text-danger-secondary-default
394
+ );
395
+ --component-button-text-danger-secondary-active: var(
396
+ --component-button-text-danger-secondary-default
397
+ );
398
+ --component-button-text-danger-tertiary-default: var(--color-system-danger-default);
399
+ --component-button-text-danger-tertiary-hover: var(
400
+ --component-button-text-danger-tertiary-default
401
+ );
402
+ --component-button-text-danger-tertiary-active: var(
403
+ --component-button-text-danger-tertiary-default
404
+ );
18
405
  }
19
406
 
20
407
  .tl-button {
package/dist/tl-card.css CHANGED
@@ -1,11 +1,47 @@
1
1
  /**
2
2
  * Do not edit directly, this file was auto-generated.
3
3
  */
4
- .tl-card,
5
- tds-card {
6
- --component-card-secondary: var(--color-background-layer-02);
7
- --component-card-primary: var(--color-background-layer-01);
8
- --component-card-padding-padding: var(--scania-unit-16);
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-card-background-primary: #fff;
11
+ --component-card-background-secondary: #fff;
12
+ --component-card-border-radius-default: var(--scania-unit-4);
13
+ --component-card-space-padding-default: var(--scania-unit-16);
14
+ }
15
+
16
+ .traton .tds-mode-light,
17
+ .traton.tds-mode-light,
18
+ .traton .tl-mode-light,
19
+ .traton.tl-mode-light {
20
+ --component-card-background-primary: var(--traton-color-transparent-invisible-light);
21
+ --component-card-background-secondary: var(--traton-color-transparent-invisible-light);
22
+ --component-card-border-radius-default: var(--traton-unit-0);
23
+ --component-card-space-padding-default: var(--traton-unit-0);
24
+ }
25
+
26
+ .tds-mode-dark,
27
+ .scania .tds-mode-dark,
28
+ .scania.tds-mode-dark,
29
+ .scania .tl-mode-dark,
30
+ .scania.tl-mode-dark {
31
+ --component-card-background-primary: var(--color-background-layer-01);
32
+ --component-card-background-secondary: var(--color-background-layer-02);
33
+ --component-card-border-radius-default: var(--scania-unit-4);
34
+ --component-card-space-padding-default: var(--scania-unit-16);
35
+ }
36
+
37
+ .traton .tds-mode-dark,
38
+ .traton.tds-mode-dark,
39
+ .traton .tl-mode-dark,
40
+ .traton.tl-mode-dark {
41
+ --component-card-background-primary: var(--traton-color-transparent-invisible-dark);
42
+ --component-card-background-secondary: var(--traton-color-transparent-invisible-dark);
43
+ --component-card-border-radius-default: var(--traton-unit-0);
44
+ --component-card-space-padding-default: var(--traton-unit-0);
9
45
  }
10
46
 
11
47
  .tl-card {
@@ -70,26 +106,26 @@ tds-card {
70
106
  }
71
107
 
72
108
  /* Dark mode */
73
- .tds-mode-dark {
109
+ .tl-mode-dark {
74
110
  --card-background-primary: var(--tds-grey-900);
75
111
  --card-background-secondary: var(--tds-grey-850);
76
112
  }
77
- .tds-mode-dark .tl-card {
113
+ .tl-mode-dark .tl-card {
78
114
  --card-background: var(--card-background-primary);
79
115
  }
80
- .tds-mode-dark .tl-card--primary {
116
+ .tl-mode-dark .tl-card--primary {
81
117
  --card-box: var(--card-box-primary);
82
118
  --card-background: var(--card-background-primary);
83
119
  }
84
- .tds-mode-dark .tl-card--secondary {
120
+ .tl-mode-dark .tl-card--secondary {
85
121
  --card-box: var(--card-box-primary);
86
122
  --card-background: var(--card-background-secondary);
87
123
  }
88
124
 
89
- .traton .tds-mode-dark .tl-card--primary {
125
+ .traton .tl-mode-dark .tl-card--primary {
90
126
  --card-background: transparent;
91
127
  }
92
- .traton .tds-mode-dark .tl-card--secondary {
128
+ .traton .tl-mode-dark .tl-card--secondary {
93
129
  --card-background: transparent;
94
130
  }
95
131
 
package/dist/tl-checkbox-vars.css CHANGED
@@ -16,7 +16,7 @@
16
16
  --checkbox-background-img-indeterminate-disabled: url("data:image/svg+xml;utf8,<svg width='8' height='2' viewBox='0 0 8 2' fill='none' xmlns='http://www.w3.org/2000/svg'><rect y='0.5' width='8' height='1' rx='0.5' fill='%23b0b7c4'/></svg>");
17
17
  }
18
18
 
19
- .tds-mode-dark .tl-checkbox {
19
+ .tl-mode-dark .tl-checkbox {
20
20
  --checkbox-background-img: url("data:image/svg+xml;utf8,<svg width='8' height='6' viewBox='0 0 8 6' fill='none' xmlns='http://www.w3.org/2000/svg'> <path d='M1 2.33333L3.4 5C4.80589 3.4379 5.59411 2.5621 7 1' stroke='%230D0F13' stroke-linecap='round' stroke-linejoin='round'/></svg>");
21
21
  --checkbox-background-img-indeterminate: url("data:image/svg+xml;utf8,<svg width='8' height='2' viewBox='0 0 8 2' fill='none' xmlns='http://www.w3.org/2000/svg'><rect y='0.5' width='8' height='1' rx='0.5' fill='%230D0F13'/></svg>");
22
22
  --checkbox-background-img-disabled: url("data:image/svg+xml;utf8,<svg width='8' height='6' viewBox='0 0 8 6' fill='none' xmlns='http://www.w3.org/2000/svg'> <path d='M1 2.33333L3.4 5C4.80589 3.4379 5.59411 2.5621 7 1' stroke='%2356657A' stroke-linecap='round' stroke-linejoin='round'/></svg>");
package/dist/tl-checkbox.css CHANGED
@@ -17,7 +17,7 @@
17
17
  --checkbox-background-img-indeterminate-disabled: url("data:image/svg+xml;utf8,<svg width='8' height='2' viewBox='0 0 8 2' fill='none' xmlns='http://www.w3.org/2000/svg'><rect y='0.5' width='8' height='1' rx='0.5' fill='%23b0b7c4'/></svg>");
18
18
  }
19
19
 
20
- .tds-mode-dark .tl-checkbox {
20
+ .tl-mode-dark .tl-checkbox {
21
21
  --checkbox-background-img: url("data:image/svg+xml;utf8,<svg width='8' height='6' viewBox='0 0 8 6' fill='none' xmlns='http://www.w3.org/2000/svg'> <path d='M1 2.33333L3.4 5C4.80589 3.4379 5.59411 2.5621 7 1' stroke='%230D0F13' stroke-linecap='round' stroke-linejoin='round'/></svg>");
22
22
  --checkbox-background-img-indeterminate: url("data:image/svg+xml;utf8,<svg width='8' height='2' viewBox='0 0 8 2' fill='none' xmlns='http://www.w3.org/2000/svg'><rect y='0.5' width='8' height='1' rx='0.5' fill='%230D0F13'/></svg>");
23
23
  --checkbox-background-img-disabled: url("data:image/svg+xml;utf8,<svg width='8' height='6' viewBox='0 0 8 6' fill='none' xmlns='http://www.w3.org/2000/svg'> <path d='M1 2.33333L3.4 5C4.80589 3.4379 5.59411 2.5621 7 1' stroke='%2356657A' stroke-linecap='round' stroke-linejoin='round'/></svg>");