@scania/tegel-lite 1.5.0 → 1.6.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 (7) hide show
  1. package/dist/components.css +1488 -172
  2. package/dist/global.css +4 -4
  3. package/dist/tl-dropdown.css +1030 -0
  4. package/dist/tl-stepper.css +441 -0
  5. package/dist/tl-text-field.css +8 -0
  6. package/dist/tl-textarea.css +8 -0
  7. package/package.json +3 -1
package/dist/tl-stepper.css ADDED
@@ -0,0 +1,441 @@
1
+ /**
2
+ * Do not edit directly, this file was auto-generated.
3
+ */
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-background-item-default: var(--color-background-none);
11
+ --component-stepper-background-current-default: var(--scania-color-grey-750);
12
+ --component-stepper-background-error-default: var(--color-background-none);
13
+ --component-stepper-background-success-default: var(--scania-color-green-400);
14
+ --component-stepper-border-item-default: var(--scania-color-grey-750);
15
+ --component-stepper-border-current-default: var(--color-border-none);
16
+ --component-stepper-border-error-default: var(--color-system-danger-default);
17
+ --component-stepper-border-success-default: var(--scania-color-green-400);
18
+ --component-stepper-border-divider-default: var(--scania-color-grey-750);
19
+ --component-stepper-border-radius-default: var(--scania-unit-9999);
20
+ --component-stepper-icon-error-default: var(--color-system-danger-default);
21
+ --component-stepper-icon-success-default: var(--scania-color-grey-50);
22
+ --component-stepper-text-label-default: var(--color-text-strong);
23
+ --component-stepper-text-label-success-default: var(--color-text-strong);
24
+ --component-stepper-text-label-current-default: var(--color-text-strong);
25
+ --component-stepper-text-label-error-default: var(--color-text-strong);
26
+ --component-stepper-text-index-default: var(--color-text-strong);
27
+ --component-stepper-text-index-current-default: var(--color-text-inverse-strong);
28
+ }
29
+
30
+ .traton .tds-mode-light,
31
+ .traton.tds-mode-light,
32
+ .traton .tl-mode-light,
33
+ .traton.tl-mode-light {
34
+ --component-stepper-background-item-default: var(--color-background-none);
35
+ --component-stepper-background-current-default: var(--color-background-none);
36
+ --component-stepper-background-error-default: var(--color-background-none);
37
+ --component-stepper-background-success-default: var(--color-system-success-default);
38
+ --component-stepper-border-item-default: var(--color-border-discrete);
39
+ --component-stepper-border-current-default: var(--color-border-strong);
40
+ --component-stepper-border-error-default: var(--color-system-danger-default);
41
+ --component-stepper-border-success-default: var(--color-system-success-default);
42
+ --component-stepper-border-divider-default: var(--color-border-disabled);
43
+ --component-stepper-border-radius-default: var(--traton-unit-9999);
44
+ --component-stepper-icon-error-default: var(--color-system-danger-default);
45
+ --component-stepper-icon-success-default: var(--color-icon-inverse-strong);
46
+ --component-stepper-text-label-default: var(--color-text-disabled);
47
+ --component-stepper-text-label-success-default: var(--color-text-strong);
48
+ --component-stepper-text-label-current-default: var(--color-text-strong);
49
+ --component-stepper-text-label-error-default: var(--color-text-strong);
50
+ --component-stepper-text-index-default: var(--color-text-disabled);
51
+ --component-stepper-text-index-current-default: var(--color-text-strong);
52
+ }
53
+
54
+ .tds-mode-dark,
55
+ .scania .tds-mode-dark,
56
+ .scania.tds-mode-dark,
57
+ .scania .tl-mode-dark,
58
+ .scania.tl-mode-dark {
59
+ --component-stepper-background-item-default: var(--color-background-none);
60
+ --component-stepper-background-current-default: var(--scania-color-grey-150);
61
+ --component-stepper-background-error-default: var(--color-background-none);
62
+ --component-stepper-background-success-default: var(--scania-color-green-300);
63
+ --component-stepper-border-item-default: var(--scania-color-grey-150);
64
+ --component-stepper-border-current-default: var(--color-border-none);
65
+ --component-stepper-border-error-default: var(--color-system-danger-default);
66
+ --component-stepper-border-success-default: var(--scania-color-green-300);
67
+ --component-stepper-border-divider-default: var(--scania-color-grey-250);
68
+ --component-stepper-border-radius-default: var(--scania-unit-9999);
69
+ --component-stepper-icon-error-default: var(--color-system-danger-default);
70
+ --component-stepper-icon-success-default: var(--scania-color-grey-50);
71
+ --component-stepper-text-label-default: var(--color-text-strong);
72
+ --component-stepper-text-label-success-default: var(--color-text-strong);
73
+ --component-stepper-text-label-current-default: var(--color-text-strong);
74
+ --component-stepper-text-label-error-default: var(--color-text-strong);
75
+ --component-stepper-text-index-default: var(--color-text-strong);
76
+ --component-stepper-text-index-current-default: var(--color-text-inverse-strong);
77
+ }
78
+
79
+ .traton .tds-mode-dark,
80
+ .traton.tds-mode-dark,
81
+ .traton .tl-mode-dark,
82
+ .traton.tl-mode-dark {
83
+ --component-stepper-background-item-default: var(--color-background-none);
84
+ --component-stepper-background-current-default: var(--color-background-none);
85
+ --component-stepper-background-error-default: var(--color-background-none);
86
+ --component-stepper-background-success-default: var(--color-system-success-default);
87
+ --component-stepper-border-item-default: var(--color-border-discrete);
88
+ --component-stepper-border-current-default: var(--color-border-strong);
89
+ --component-stepper-border-error-default: var(--color-system-danger-default);
90
+ --component-stepper-border-success-default: var(--color-system-success-default);
91
+ --component-stepper-border-divider-default: var(--color-border-disabled);
92
+ --component-stepper-border-radius-default: var(--traton-unit-9999);
93
+ --component-stepper-icon-error-default: var(--color-system-danger-default);
94
+ --component-stepper-icon-success-default: var(--color-icon-inverse-strong);
95
+ --component-stepper-text-label-default: var(--color-text-disabled);
96
+ --component-stepper-text-label-success-default: var(--color-text-strong);
97
+ --component-stepper-text-label-current-default: var(--color-text-strong);
98
+ --component-stepper-text-label-error-default: var(--color-text-strong);
99
+ --component-stepper-text-index-default: var(--color-text-disabled);
100
+ --component-stepper-text-index-current-default: var(--color-text-strong);
101
+ }
102
+
103
+ .tl-stepper {
104
+ --stepper-background-color-current: var(--component-stepper-background-current-default);
105
+ --stepper-border-color-current: var(--component-stepper-border-current-default);
106
+ --stepper-index-color-current: var(--component-stepper-text-index-current-default);
107
+ --stepper-label-text-color-current: var(--component-stepper-text-label-current-default);
108
+ --stepper-icon-step-background-warning: var(--component-stepper-background-error-default);
109
+ --stepper-icon-step-border-warning: var(--component-stepper-border-error-default);
110
+ --stepper-icon-step-color-warning: var(--component-stepper-icon-error-default);
111
+ --stepper-label-text-color-warning: var(--component-stepper-text-label-error-default);
112
+ --stepper-icon-step-background-success: var(--component-stepper-background-success-default);
113
+ --stepper-icon-step-border-success: var(--component-stepper-border-success-default);
114
+ --stepper-icon-step-color-success: var(--component-stepper-icon-success-default);
115
+ --stepper-label-text-color-success: var(--component-stepper-text-label-success-default);
116
+ --stepper-background-upcoming: var(--component-stepper-background-item-default);
117
+ --stepper-border-upcoming: var(--component-stepper-border-item-default);
118
+ --stepper-index-color-upcoming: var(--component-stepper-text-index-default);
119
+ --stepper-label-text-color-upcoming: var(--component-stepper-text-label-default);
120
+ --stepper-divider-line: var(--component-stepper-border-divider-default);
121
+ --stepper-border-radius: calc(var(--component-stepper-border-radius-default) * 1px);
122
+ }
123
+
124
+ /* Typography Usage mixins */
125
+ .tl-stepper__step {
126
+ position: relative;
127
+ display: flex;
128
+ justify-content: start;
129
+ flex-direction: row;
130
+ align-items: center;
131
+ gap: 8px;
132
+ }
133
+ .tl-stepper--label-below .tl-stepper__step {
134
+ flex-direction: column;
135
+ }
136
+ .tl-stepper--lg .tl-stepper__step {
137
+ font-family: var(--type-system-body-01-font-family);
138
+ font-size: calc(var(--type-system-body-01-font-size) * 1px);
139
+ line-height: calc(var(--type-system-body-01-line-height) * 1px);
140
+ font-weight: var(--type-system-body-01-font-weight);
141
+ letter-spacing: calc(var(--type-system-body-01-letter-spacing) * 1px);
142
+ text-transform: var(--type-system-body-01-text-transform);
143
+ padding: 0 20px;
144
+ }
145
+ .tl-stepper--sm .tl-stepper__step {
146
+ font-family: var(--type-system-label-01-font-family);
147
+ font-size: calc(var(--type-system-label-01-font-size) * 1px);
148
+ line-height: calc(var(--type-system-label-01-line-height) * 1px);
149
+ font-weight: var(--type-system-label-01-font-weight);
150
+ letter-spacing: calc(var(--type-system-label-01-letter-spacing) * 1px);
151
+ padding: 0 20px;
152
+ }
153
+ .tl-stepper--horizontal:not(.tl-stepper--label-aside) .tl-stepper__list > .tl-stepper__step {
154
+ min-inline-size: 60px;
155
+ }
156
+ .tl-stepper--horizontal.tl-stepper--label-aside .tl-stepper__list > .tl-stepper__step {
157
+ flex: 0 0 auto;
158
+ min-inline-size: auto;
159
+ }
160
+ .tl-stepper--horizontal.tl-stepper--label-aside.tl-stepper--hide-labels .tl-stepper__list > .tl-stepper__step {
161
+ min-inline-size: 40px;
162
+ }
163
+ .tl-stepper--horizontal.tl-stepper--sm:not(.tl-stepper--label-aside) .tl-stepper__list > .tl-stepper__step {
164
+ min-inline-size: 40px;
165
+ }
166
+ .tl-stepper--horizontal.tl-stepper--sm.tl-stepper--label-aside.tl-stepper--hide-labels .tl-stepper__list > .tl-stepper__step {
167
+ min-inline-size: 48px;
168
+ }
169
+ .tl-stepper--lg .tl-stepper__step:last-of-type::after, .tl-stepper--sm .tl-stepper__step:last-of-type::after {
170
+ display: none;
171
+ }
172
+ .tl-stepper--lg .tl-stepper__step:first-of-type::before, .tl-stepper--sm .tl-stepper__step:first-of-type::before {
173
+ display: none;
174
+ }
175
+ .tl-stepper--vertical.tl-stepper--lg .tl-stepper__step:last-of-type::after, .tl-stepper--vertical.tl-stepper--sm .tl-stepper__step:last-of-type::after {
176
+ display: none;
177
+ }
178
+ .tl-stepper--lg.tl-stepper--vertical .tl-stepper__step::after {
179
+ content: " ";
180
+ position: absolute;
181
+ background-color: var(--stepper-divider-line);
182
+ height: 36px;
183
+ width: 1px;
184
+ top: 40px;
185
+ left: 36px;
186
+ }
187
+ .tl-stepper--lg.tl-stepper--horizontal .tl-stepper__step::after {
188
+ content: " ";
189
+ position: absolute;
190
+ background-color: var(--stepper-divider-line);
191
+ height: 1px;
192
+ left: calc(50% + 32px);
193
+ right: 0;
194
+ top: 16px;
195
+ }
196
+ .tl-stepper--lg.tl-stepper--horizontal .tl-stepper__step::before {
197
+ content: " ";
198
+ position: absolute;
199
+ background-color: var(--stepper-divider-line);
200
+ height: 1px;
201
+ right: calc(50% + 32px);
202
+ left: 0;
203
+ top: 16px;
204
+ }
205
+ .tl-stepper--lg.tl-stepper--horizontal.tl-stepper--label-aside:not(.tl-stepper--hide-labels) .tl-stepper__step::after {
206
+ content: " ";
207
+ position: absolute;
208
+ background-color: var(--stepper-divider-line);
209
+ height: 1px;
210
+ top: 16px;
211
+ left: auto;
212
+ right: -10px;
213
+ width: 10px;
214
+ }
215
+ .tl-stepper--lg.tl-stepper--horizontal.tl-stepper--label-aside:not(.tl-stepper--hide-labels) .tl-stepper__step::before {
216
+ content: " ";
217
+ position: absolute;
218
+ background-color: var(--stepper-divider-line);
219
+ height: 1px;
220
+ top: 16px;
221
+ left: -10px;
222
+ right: auto;
223
+ width: 10px;
224
+ }
225
+ .tl-stepper--lg.tl-stepper--horizontal.tl-stepper--hide-labels .tl-stepper__step::after {
226
+ content: " ";
227
+ position: absolute;
228
+ background-color: var(--stepper-divider-line);
229
+ height: 1px;
230
+ left: calc(50% + 16px + 8px);
231
+ right: 0;
232
+ top: 16px;
233
+ }
234
+ .tl-stepper--lg.tl-stepper--horizontal.tl-stepper--hide-labels .tl-stepper__step::before {
235
+ content: " ";
236
+ position: absolute;
237
+ background-color: var(--stepper-divider-line);
238
+ height: 1px;
239
+ right: calc(50% + 16px + 8px);
240
+ left: 0;
241
+ top: 16px;
242
+ }
243
+ .tl-stepper--sm.tl-stepper--vertical .tl-stepper__step::after {
244
+ content: " ";
245
+ position: absolute;
246
+ background-color: var(--stepper-divider-line);
247
+ height: 20px;
248
+ width: 1px;
249
+ top: 34px;
250
+ left: 32px;
251
+ }
252
+ .tl-stepper--sm.tl-stepper--horizontal .tl-stepper__step::after {
253
+ content: " ";
254
+ position: absolute;
255
+ background-color: var(--stepper-divider-line);
256
+ height: 1px;
257
+ left: calc(50% + 12px + 16px);
258
+ right: 0;
259
+ top: 13px;
260
+ }
261
+ .tl-stepper--sm.tl-stepper--horizontal .tl-stepper__step::before {
262
+ content: " ";
263
+ position: absolute;
264
+ background-color: var(--stepper-divider-line);
265
+ height: 1px;
266
+ left: 0;
267
+ right: calc(50% + 12px + 16px);
268
+ top: 13px;
269
+ }
270
+ .tl-stepper--sm.tl-stepper--horizontal.tl-stepper--label-aside:not(.tl-stepper--hide-labels) .tl-stepper__step::after {
271
+ content: " ";
272
+ position: absolute;
273
+ background-color: var(--stepper-divider-line);
274
+ height: 1px;
275
+ left: auto;
276
+ right: -10px;
277
+ width: 10px;
278
+ top: 13px;
279
+ }
280
+ .tl-stepper--sm.tl-stepper--horizontal.tl-stepper--label-aside:not(.tl-stepper--hide-labels) .tl-stepper__step::before {
281
+ content: " ";
282
+ position: absolute;
283
+ background-color: var(--stepper-divider-line);
284
+ height: 1px;
285
+ top: 13px;
286
+ left: -10px;
287
+ right: auto;
288
+ width: 10px;
289
+ }
290
+ .tl-stepper--sm.tl-stepper--horizontal.tl-stepper--hide-labels .tl-stepper__step::after {
291
+ content: " ";
292
+ position: absolute;
293
+ background-color: var(--stepper-divider-line);
294
+ height: 1px;
295
+ left: calc(50% + 12px + 8px);
296
+ right: 0;
297
+ top: 13px;
298
+ }
299
+ .tl-stepper--sm.tl-stepper--horizontal.tl-stepper--hide-labels .tl-stepper__step::before {
300
+ content: " ";
301
+ position: absolute;
302
+ background-color: var(--stepper-divider-line);
303
+ height: 1px;
304
+ right: calc(50% + 12px + 8px);
305
+ left: 0;
306
+ top: 13px;
307
+ }
308
+
309
+ .tl-stepper__node {
310
+ display: flex;
311
+ align-items: center;
312
+ justify-content: space-around;
313
+ border-radius: var(--stepper-border-radius);
314
+ border-width: 1px;
315
+ border-style: solid;
316
+ text-align: center;
317
+ position: relative;
318
+ }
319
+ .tl-stepper--lg .tl-stepper__node {
320
+ height: 30px;
321
+ min-width: 30px;
322
+ }
323
+ .tl-stepper--sm .tl-stepper__node {
324
+ height: 24px;
325
+ min-width: 24px;
326
+ }
327
+ .tl-stepper__step--error .tl-stepper__node {
328
+ border: 1px solid var(--stepper-icon-step-border-warning);
329
+ color: var(--stepper-icon-step-color-warning);
330
+ background-color: var(--stepper-icon-step-background-warning);
331
+ }
332
+ .tl-stepper__step--success .tl-stepper__node {
333
+ background-color: var(--stepper-icon-step-background-success);
334
+ border: 1px solid var(--stepper-icon-step-border-success);
335
+ color: var(--stepper-icon-step-color-success);
336
+ }
337
+ .tl-stepper__step--current .tl-stepper__node {
338
+ color: var(--stepper-index-color-current);
339
+ border: 1px solid var(--stepper-border-color-current);
340
+ background-color: var(--stepper-background-color-current);
341
+ }
342
+ .tl-stepper__step--upcoming .tl-stepper__node {
343
+ border: 1px solid var(--stepper-border-upcoming);
344
+ color: var(--stepper-index-color-upcoming);
345
+ background-color: var(--stepper-background-upcoming);
346
+ }
347
+ .tl-stepper__step--success .tl-stepper__node, .tl-stepper__step--error .tl-stepper__node {
348
+ justify-content: center;
349
+ }
350
+ .tl-stepper__step--success .tl-stepper__node::after, .tl-stepper__step--error .tl-stepper__node::after {
351
+ content: "";
352
+ display: block;
353
+ width: 20px;
354
+ height: 20px;
355
+ mask-repeat: no-repeat;
356
+ mask-position: center;
357
+ mask-size: contain;
358
+ background-color: currentcolor;
359
+ }
360
+ .tl-stepper__step--success .tl-stepper__node::after {
361
+ mask-image: var(--icon-tick-svg);
362
+ }
363
+ .tl-stepper__step--error .tl-stepper__node::after {
364
+ mask-image: var(--icon-warning-svg);
365
+ }
366
+
367
+ .tl-stepper--sm .tl-stepper__step--success .tl-stepper__node::after,
368
+ .tl-stepper--sm .tl-stepper__step--error .tl-stepper__node::after {
369
+ width: 16px;
370
+ height: 16px;
371
+ }
372
+
373
+ .tl-stepper__label {
374
+ text-align: center;
375
+ }
376
+ .tl-stepper__step--error .tl-stepper__label {
377
+ color: var(--stepper-label-text-color-warning);
378
+ }
379
+ .tl-stepper__step--success .tl-stepper__label {
380
+ color: var(--stepper-label-text-color-success);
381
+ }
382
+ .tl-stepper__step--current .tl-stepper__label {
383
+ color: var(--stepper-label-text-color-current);
384
+ }
385
+ .tl-stepper__step--upcoming .tl-stepper__label {
386
+ color: var(--stepper-label-text-color-upcoming);
387
+ }
388
+ .tl-stepper--hide-labels .tl-stepper__label {
389
+ position: absolute;
390
+ inline-size: 1px;
391
+ block-size: 1px;
392
+ margin: -1px;
393
+ padding: 0;
394
+ border: 0;
395
+ overflow: hidden;
396
+ clip: rect(0 0 0 0);
397
+ clip-path: inset(50%);
398
+ white-space: nowrap;
399
+ }
400
+
401
+ .tl-stepper {
402
+ box-sizing: border-box;
403
+ }
404
+ .tl-stepper * {
405
+ box-sizing: border-box;
406
+ }
407
+
408
+ .tl-stepper__list {
409
+ display: flex;
410
+ justify-content: space-evenly;
411
+ min-width: 100%;
412
+ list-style: none;
413
+ margin: 0;
414
+ padding: 0;
415
+ }
416
+ .tl-stepper:not(.tl-stepper--label-aside) .tl-stepper__list {
417
+ width: 100%;
418
+ }
419
+ .tl-stepper--horizontal:not(.tl-stepper--label-aside) .tl-stepper__list {
420
+ justify-content: flex-start;
421
+ }
422
+ .tl-stepper--horizontal.tl-stepper--label-aside .tl-stepper__list {
423
+ display: flex;
424
+ justify-content: flex-start;
425
+ min-width: 100%;
426
+ }
427
+ .tl-stepper--horizontal.tl-stepper--label-aside.tl-stepper--hide-labels .tl-stepper__list {
428
+ display: flex;
429
+ justify-content: flex-start;
430
+ }
431
+ .tl-stepper--vertical .tl-stepper__list {
432
+ height: 100%;
433
+ display: flex;
434
+ flex-direction: column;
435
+ justify-content: flex-start;
436
+ gap: 52px;
437
+ min-width: 0;
438
+ }
439
+ .tl-stepper--vertical.tl-stepper--sm .tl-stepper__list {
440
+ gap: 36px;
441
+ }
package/dist/tl-text-field.css CHANGED
@@ -28,6 +28,8 @@
28
28
  --component--input-icon-prefix-default: var(--color-text-defined);
29
29
  --component--input-icon-suffix-default: var(--color-text-defined);
30
30
  --component--input-icon-error-default: var(--color-system-danger-default);
31
+ --component--input-icon-control-default: var(--color-icon-strong);
32
+ --component--input-icon-control-hover: var(--component--input-icon-control-default);
31
33
  --component--input-opacity-disabled: var(--scania-opacity-25);
32
34
  --component--input-text-counter-default: var(--color-text-defined);
33
35
  --component--input-text-label-default: var(--color-text-strong);
@@ -62,6 +64,8 @@
62
64
  --component--input-icon-prefix-default: var(--color-text-defined);
63
65
  --component--input-icon-suffix-default: var(--color-text-defined);
64
66
  --component--input-icon-error-default: var(--color-system-danger-default);
67
+ --component--input-icon-control-default: var(--color-icon-subtle);
68
+ --component--input-icon-control-hover: var(--component--input-icon-control-default);
65
69
  --component--input-opacity-disabled: var(--traton-opacity-25);
66
70
  --component--input-text-counter-default: var(--color-text-defined);
67
71
  --component--input-text-label-default: var(--color-text-strong);
@@ -97,6 +101,8 @@
97
101
  --component--input-icon-prefix-default: var(--color-text-defined);
98
102
  --component--input-icon-suffix-default: var(--color-text-defined);
99
103
  --component--input-icon-error-default: var(--color-system-danger-default);
104
+ --component--input-icon-control-default: var(--color-icon-strong);
105
+ --component--input-icon-control-hover: var(--component--input-icon-control-default);
100
106
  --component--input-opacity-disabled: var(--scania-opacity-25);
101
107
  --component--input-text-counter-default: var(--color-text-defined);
102
108
  --component--input-text-label-default: var(--color-text-strong);
@@ -131,6 +137,8 @@
131
137
  --component--input-icon-prefix-default: var(--color-text-defined);
132
138
  --component--input-icon-suffix-default: var(--color-text-defined);
133
139
  --component--input-icon-error-default: var(--color-system-danger-default);
140
+ --component--input-icon-control-default: var(--color-icon-subtle);
141
+ --component--input-icon-control-hover: var(--component--input-icon-control-default);
134
142
  --component--input-opacity-disabled: var(--traton-opacity-25);
135
143
  --component--input-text-counter-default: var(--color-text-defined);
136
144
  --component--input-text-label-default: var(--color-text-strong);
package/dist/tl-textarea.css CHANGED
@@ -28,6 +28,8 @@
28
28
  --component--input-icon-prefix-default: var(--color-text-defined);
29
29
  --component--input-icon-suffix-default: var(--color-text-defined);
30
30
  --component--input-icon-error-default: var(--color-system-danger-default);
31
+ --component--input-icon-control-default: var(--color-icon-strong);
32
+ --component--input-icon-control-hover: var(--component--input-icon-control-default);
31
33
  --component--input-opacity-disabled: var(--scania-opacity-25);
32
34
  --component--input-text-counter-default: var(--color-text-defined);
33
35
  --component--input-text-label-default: var(--color-text-strong);
@@ -62,6 +64,8 @@
62
64
  --component--input-icon-prefix-default: var(--color-text-defined);
63
65
  --component--input-icon-suffix-default: var(--color-text-defined);
64
66
  --component--input-icon-error-default: var(--color-system-danger-default);
67
+ --component--input-icon-control-default: var(--color-icon-subtle);
68
+ --component--input-icon-control-hover: var(--component--input-icon-control-default);
65
69
  --component--input-opacity-disabled: var(--traton-opacity-25);
66
70
  --component--input-text-counter-default: var(--color-text-defined);
67
71
  --component--input-text-label-default: var(--color-text-strong);
@@ -97,6 +101,8 @@
97
101
  --component--input-icon-prefix-default: var(--color-text-defined);
98
102
  --component--input-icon-suffix-default: var(--color-text-defined);
99
103
  --component--input-icon-error-default: var(--color-system-danger-default);
104
+ --component--input-icon-control-default: var(--color-icon-strong);
105
+ --component--input-icon-control-hover: var(--component--input-icon-control-default);
100
106
  --component--input-opacity-disabled: var(--scania-opacity-25);
101
107
  --component--input-text-counter-default: var(--color-text-defined);
102
108
  --component--input-text-label-default: var(--color-text-strong);
@@ -131,6 +137,8 @@
131
137
  --component--input-icon-prefix-default: var(--color-text-defined);
132
138
  --component--input-icon-suffix-default: var(--color-text-defined);
133
139
  --component--input-icon-error-default: var(--color-system-danger-default);
140
+ --component--input-icon-control-default: var(--color-icon-subtle);
141
+ --component--input-icon-control-hover: var(--component--input-icon-control-default);
134
142
  --component--input-opacity-disabled: var(--traton-opacity-25);
135
143
  --component--input-text-counter-default: var(--color-text-defined);
136
144
  --component--input-text-label-default: var(--color-text-strong);
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@scania/tegel-lite",
3
- "version": "1.5.0",
3
+ "version": "1.6.0",
4
4
  "description": "Styles-only library for Tegel Design System (Beta)",
5
5
  "type": "module",
6
6
  "keywords": [
@@ -37,6 +37,7 @@
37
37
  "./tl-chip.css": "./dist/tl-chip.css",
38
38
  "./tl-datetime.css": "./dist/tl-datetime.css",
39
39
  "./tl-divider.css": "./dist/tl-divider.css",
40
+ "./tl-dropdown.css": "./dist/tl-dropdown.css",
40
41
  "./tl-folder-tabs.css": "./dist/tl-folder-tabs.css",
41
42
  "./tl-footer.css": "./dist/tl-footer.css",
42
43
  "./tl-header.css": "./dist/tl-header.css",
@@ -50,6 +51,7 @@
50
51
  "./tl-popover-menu.css": "./dist/tl-popover-menu.css",
51
52
  "./tl-radio-button.css": "./dist/tl-radio-button.css",
52
53
  "./tl-side-menu.css": "./dist/tl-side-menu.css",
54
+ "./tl-stepper.css": "./dist/tl-stepper.css",
53
55
  "./tl-text-field.css": "./dist/tl-text-field.css",
54
56
  "./tl-textarea.css": "./dist/tl-textarea.css",
55
57
  "./tl-toast.css": "./dist/tl-toast.css",