@scania/tegel-lite 1.8.0 → 1.9.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 (11) hide show
  1. package/README.dev.md +2 -5
  2. package/dist/assets/icons/scania/email_open.svg +5 -0
  3. package/dist/assets/icons/traton/email_open.svg +5 -0
  4. package/dist/components.css +290 -398
  5. package/dist/scania-variables.css +2 -0
  6. package/dist/tl-datetime.css +222 -247
  7. package/dist/tl-dropdown.css +505 -0
  8. package/dist/tl-icon.css +4 -0
  9. package/dist/tl-text-field.css +5 -1
  10. package/dist/traton-variables.css +2 -0
  11. package/package.json +2 -2
package/dist/tl-dropdown.css CHANGED
@@ -226,6 +226,448 @@
226
226
  --component--input-text-error-default: var(--color-system-danger-default);
227
227
  }
228
228
 
229
+ /**
230
+ * Do not edit directly, this file was auto-generated.
231
+ */
232
+ :root,
233
+ .tds-mode-light,
234
+ .scania .tds-mode-light,
235
+ .scania.tds-mode-light,
236
+ .scania .tl-mode-light,
237
+ .scania.tl-mode-light {
238
+ --component-button-background-standard-primary-default: var(--scania-color-blue-600);
239
+ --component-button-background-standard-primary-hover: var(--scania-color-blue-700);
240
+ --component-button-background-standard-primary-active: var(--scania-color-blue-800);
241
+ --component-button-background-standard-secondary-default: var(--color-background-none);
242
+ --component-button-background-standard-secondary-hover: var(--color-background-none);
243
+ --component-button-background-standard-secondary-active: var(--color-background-none);
244
+ --component-button-background-standard-tertiary-default: var(--color-background-none);
245
+ --component-button-background-standard-tertiary-hover: var(--color-background-none);
246
+ --component-button-background-standard-tertiary-active: var(--color-background-none);
247
+ --component-button-background-danger-primary-default: var(--scania-color-red-400);
248
+ --component-button-background-danger-primary-hover: var(--scania-color-red-500);
249
+ --component-button-background-danger-primary-active: var(--scania-color-red-600);
250
+ --component-button-background-danger-secondary-default: var(--color-background-none);
251
+ --component-button-background-danger-secondary-hover: var(--color-background-none);
252
+ --component-button-background-danger-secondary-active: var(--color-background-none);
253
+ --component-button-background-danger-tertiary-default: var(--color-background-none);
254
+ --component-button-background-danger-tertiary-hover: var(--color-background-none);
255
+ --component-button-background-danger-tertiary-active: var(--color-background-none);
256
+ --component-button-border-radius-default: var(--scania-unit-4);
257
+ --component-button-border-standard-primary-default: var(--color-border-none);
258
+ --component-button-border-standard-primary-hover: var(--color-border-none);
259
+ --component-button-border-standard-primary-active: var(--color-border-none);
260
+ --component-button-border-standard-secondary-default: var(--color-border-soft);
261
+ --component-button-border-standard-secondary-hover: var(--color-border-subtle);
262
+ --component-button-border-standard-secondary-active: var(--color-border-strong);
263
+ --component-button-border-standard-tertiary-default: var(--color-border-none);
264
+ --component-button-border-standard-tertiary-hover: var(--color-border-subtle);
265
+ --component-button-border-standard-tertiary-active: var(--color-border-strong);
266
+ --component-button-border-danger-primary-default: var(--color-border-none);
267
+ --component-button-border-danger-primary-hover: var(--color-border-none);
268
+ --component-button-border-danger-primary-active: var(--color-border-none);
269
+ --component-button-border-danger-secondary-default: var(--scania-color-red-400);
270
+ --component-button-border-danger-secondary-hover: var(--scania-color-red-500);
271
+ --component-button-border-danger-secondary-active: var(--scania-color-red-600);
272
+ --component-button-border-danger-tertiary-default: var(--color-border-none);
273
+ --component-button-border-danger-tertiary-hover: var(--scania-color-red-500);
274
+ --component-button-border-danger-tertiary-active: var(--scania-color-red-600);
275
+ --component-button-focus-ring-radius-default: var(--component--focus-ring-radius-extra-large);
276
+ --component-button-icon-standard-primary-default: var(--scania-color-base-white);
277
+ --component-button-icon-standard-primary-hover: var(
278
+ --component-button-icon-standard-primary-default
279
+ );
280
+ --component-button-icon-standard-primary-active: var(
281
+ --component-button-icon-standard-primary-default
282
+ );
283
+ --component-button-icon-standard-secondary-default: var(--scania-color-base-black);
284
+ --component-button-icon-standard-secondary-hover: var(
285
+ --component-button-icon-standard-secondary-default
286
+ );
287
+ --component-button-icon-standard-secondary-active: var(
288
+ --component-button-icon-standard-secondary-default
289
+ );
290
+ --component-button-icon-standard-tertiary-default: var(--scania-color-base-black);
291
+ --component-button-icon-standard-tertiary-hover: var(
292
+ --component-button-icon-standard-tertiary-default
293
+ );
294
+ --component-button-icon-standard-tertiary-active: var(
295
+ --component-button-icon-standard-tertiary-default
296
+ );
297
+ --component-button-icon-danger-primary-default: var(--scania-color-base-white);
298
+ --component-button-icon-danger-primary-hover: var(--component-button-icon-danger-primary-default);
299
+ --component-button-icon-danger-primary-active: var(
300
+ --component-button-icon-danger-primary-default
301
+ );
302
+ --component-button-icon-danger-secondary-default: var(--scania-color-red-400);
303
+ --component-button-icon-danger-secondary-hover: var(--scania-color-red-500);
304
+ --component-button-icon-danger-secondary-active: var(--scania-color-red-600);
305
+ --component-button-icon-danger-tertiary-default: var(--scania-color-red-400);
306
+ --component-button-icon-danger-tertiary-hover: var(--scania-color-red-500);
307
+ --component-button-icon-danger-tertiary-active: var(--scania-color-red-600);
308
+ --component-button-opacity-disabled: var(--scania-opacity-25);
309
+ --component-button-text-standard-primary-default: var(--scania-color-base-white);
310
+ --component-button-text-standard-primary-hover: var(
311
+ --component-button-text-standard-primary-default
312
+ );
313
+ --component-button-text-standard-primary-active: var(
314
+ --component-button-text-standard-primary-default
315
+ );
316
+ --component-button-text-standard-secondary-default: var(--scania-color-base-black);
317
+ --component-button-text-standard-secondary-hover: var(--scania-color-base-black);
318
+ --component-button-text-standard-secondary-active: var(--scania-color-base-black);
319
+ --component-button-text-standard-tertiary-default: var(--scania-color-base-black);
320
+ --component-button-text-standard-tertiary-hover: var(--scania-color-base-black);
321
+ --component-button-text-standard-tertiary-active: var(--scania-color-base-black);
322
+ --component-button-text-danger-primary-default: var(--scania-color-base-white);
323
+ --component-button-text-danger-primary-hover: var(--component-button-text-danger-primary-default);
324
+ --component-button-text-danger-primary-active: var(
325
+ --component-button-text-danger-primary-default
326
+ );
327
+ --component-button-text-danger-secondary-default: var(--scania-color-red-400);
328
+ --component-button-text-danger-secondary-hover: var(--scania-color-red-500);
329
+ --component-button-text-danger-secondary-active: var(--scania-color-red-600);
330
+ --component-button-text-danger-tertiary-default: var(--scania-color-red-400);
331
+ --component-button-text-danger-tertiary-hover: var(--scania-color-red-500);
332
+ --component-button-text-danger-tertiary-active: var(--scania-color-red-600);
333
+ }
334
+
335
+ .traton .tds-mode-light,
336
+ .traton.tds-mode-light,
337
+ .traton .tl-mode-light,
338
+ .traton.tl-mode-light {
339
+ --component-button-background-standard-primary-default: var(--traton-color-blue-800);
340
+ --component-button-background-standard-primary-hover: var(--traton-color-blue-850);
341
+ --component-button-background-standard-primary-active: var(--traton-color-blue-900);
342
+ --component-button-background-standard-secondary-default: var(--color-background-none);
343
+ --component-button-background-standard-secondary-hover: var(--color-background-none);
344
+ --component-button-background-standard-secondary-active: var(--color-background-none);
345
+ --component-button-background-standard-tertiary-default: var(--color-background-none);
346
+ --component-button-background-standard-tertiary-hover: var(--color-background-none);
347
+ --component-button-background-standard-tertiary-active: var(--color-background-none);
348
+ --component-button-background-danger-primary-default: var(--color-system-danger-default);
349
+ --component-button-background-danger-primary-hover: var(--traton-color-red-400);
350
+ --component-button-background-danger-primary-active: var(--traton-color-red-500);
351
+ --component-button-background-danger-secondary-default: var(--color-background-none);
352
+ --component-button-background-danger-secondary-hover: var(--color-background-none);
353
+ --component-button-background-danger-secondary-active: var(--color-background-none);
354
+ --component-button-background-danger-tertiary-default: var(--color-background-none);
355
+ --component-button-background-danger-tertiary-hover: var(--color-background-none);
356
+ --component-button-background-danger-tertiary-active: var(--color-background-none);
357
+ --component-button-border-radius-default: var(--traton-unit-56);
358
+ --component-button-border-standard-primary-default: var(--color-border-none);
359
+ --component-button-border-standard-primary-hover: var(--color-border-none);
360
+ --component-button-border-standard-primary-active: var(--color-border-none);
361
+ --component-button-border-standard-secondary-default: var(--color-border-soft);
362
+ --component-button-border-standard-secondary-hover: var(--color-border-subtle);
363
+ --component-button-border-standard-secondary-active: var(--color-border-strong);
364
+ --component-button-border-standard-tertiary-default: var(--color-border-none);
365
+ --component-button-border-standard-tertiary-hover: var(--color-border-subtle);
366
+ --component-button-border-standard-tertiary-active: var(--color-border-strong);
367
+ --component-button-border-danger-primary-default: var(--color-border-none);
368
+ --component-button-border-danger-primary-hover: var(--color-border-none);
369
+ --component-button-border-danger-primary-active: var(--color-border-none);
370
+ --component-button-border-danger-secondary-default: var(--color-system-danger-default);
371
+ --component-button-border-danger-secondary-hover: var(--traton-color-red-400);
372
+ --component-button-border-danger-secondary-active: var(--traton-color-red-500);
373
+ --component-button-border-danger-tertiary-default: var(--color-border-none);
374
+ --component-button-border-danger-tertiary-hover: var(--traton-color-red-400);
375
+ --component-button-border-danger-tertiary-active: var(--traton-color-red-500);
376
+ --component-button-focus-ring-radius-default: var(--component--focus-ring-radius-full);
377
+ --component-button-icon-standard-primary-default: var(--traton-color-base-white);
378
+ --component-button-icon-standard-primary-hover: var(
379
+ --component-button-text-standard-primary-default
380
+ );
381
+ --component-button-icon-standard-primary-active: var(
382
+ --component-button-text-standard-primary-default
383
+ );
384
+ --component-button-icon-standard-secondary-default: var(--traton-color-base-black);
385
+ --component-button-icon-standard-secondary-hover: var(
386
+ --component-button-icon-standard-secondary-default
387
+ );
388
+ --component-button-icon-standard-secondary-active: var(
389
+ --component-button-icon-standard-secondary-default
390
+ );
391
+ --component-button-icon-standard-tertiary-default: var(--traton-color-base-black);
392
+ --component-button-icon-standard-tertiary-hover: var(
393
+ --component-button-icon-standard-tertiary-default
394
+ );
395
+ --component-button-icon-standard-tertiary-active: var(
396
+ --component-button-icon-standard-tertiary-default
397
+ );
398
+ --component-button-icon-danger-primary-default: var(--traton-color-base-white);
399
+ --component-button-icon-danger-primary-hover: var(--component-button-icon-danger-primary-default);
400
+ --component-button-icon-danger-primary-active: var(
401
+ --component-button-icon-danger-primary-default
402
+ );
403
+ --component-button-icon-danger-secondary-default: var(--color-system-danger-default);
404
+ --component-button-icon-danger-secondary-hover: var(
405
+ --component-button-text-danger-secondary-default
406
+ );
407
+ --component-button-icon-danger-secondary-active: var(
408
+ --component-button-text-danger-secondary-default
409
+ );
410
+ --component-button-icon-danger-tertiary-default: var(--color-system-danger-default);
411
+ --component-button-icon-danger-tertiary-hover: var(
412
+ --component-button-text-danger-tertiary-default
413
+ );
414
+ --component-button-icon-danger-tertiary-active: var(
415
+ --component-button-text-danger-tertiary-default
416
+ );
417
+ --component-button-opacity-disabled: var(--traton-opacity-25);
418
+ --component-button-text-standard-primary-default: var(--traton-color-base-white);
419
+ --component-button-text-standard-primary-hover: var(
420
+ --component-button-text-standard-primary-default
421
+ );
422
+ --component-button-text-standard-primary-active: var(
423
+ --component-button-text-standard-primary-default
424
+ );
425
+ --component-button-text-standard-secondary-default: var(--color-text-strong);
426
+ --component-button-text-standard-secondary-hover: var(--color-text-strong);
427
+ --component-button-text-standard-secondary-active: var(--color-text-strong);
428
+ --component-button-text-standard-tertiary-default: var(--color-text-strong);
429
+ --component-button-text-standard-tertiary-hover: var(--color-text-strong);
430
+ --component-button-text-standard-tertiary-active: var(--color-text-strong);
431
+ --component-button-text-danger-primary-default: var(--traton-color-base-white);
432
+ --component-button-text-danger-primary-hover: var(--component-button-text-danger-primary-default);
433
+ --component-button-text-danger-primary-active: var(
434
+ --component-button-text-danger-primary-default
435
+ );
436
+ --component-button-text-danger-secondary-default: var(--color-system-danger-default);
437
+ --component-button-text-danger-secondary-hover: var(
438
+ --component-button-text-danger-secondary-default
439
+ );
440
+ --component-button-text-danger-secondary-active: var(
441
+ --component-button-text-danger-secondary-default
442
+ );
443
+ --component-button-text-danger-tertiary-default: var(--color-system-danger-default);
444
+ --component-button-text-danger-tertiary-hover: var(
445
+ --component-button-text-danger-tertiary-default
446
+ );
447
+ --component-button-text-danger-tertiary-active: var(
448
+ --component-button-text-danger-tertiary-default
449
+ );
450
+ }
451
+
452
+ .tds-mode-dark,
453
+ .scania .tds-mode-dark,
454
+ .scania.tds-mode-dark,
455
+ .scania .tl-mode-dark,
456
+ .scania.tl-mode-dark {
457
+ --component-button-background-standard-primary-default: var(--scania-color-blue-400);
458
+ --component-button-background-standard-primary-hover: var(--scania-color-blue-500);
459
+ --component-button-background-standard-primary-active: var(--scania-color-blue-600);
460
+ --component-button-background-standard-secondary-default: var(--color-background-none);
461
+ --component-button-background-standard-secondary-hover: var(--color-background-none);
462
+ --component-button-background-standard-secondary-active: var(--color-background-none);
463
+ --component-button-background-standard-tertiary-default: var(--color-background-none);
464
+ --component-button-background-standard-tertiary-hover: var(--color-background-none);
465
+ --component-button-background-standard-tertiary-active: var(--color-background-none);
466
+ --component-button-background-danger-primary-default: var(--scania-color-red-400);
467
+ --component-button-background-danger-primary-hover: var(--scania-color-red-500);
468
+ --component-button-background-danger-primary-active: var(--scania-color-red-600);
469
+ --component-button-background-danger-secondary-default: var(--color-background-none);
470
+ --component-button-background-danger-secondary-hover: var(--color-background-none);
471
+ --component-button-background-danger-secondary-active: var(--color-background-none);
472
+ --component-button-background-danger-tertiary-default: var(--color-background-none);
473
+ --component-button-background-danger-tertiary-hover: var(--color-background-none);
474
+ --component-button-background-danger-tertiary-active: var(--color-background-none);
475
+ --component-button-border-radius-default: var(--scania-unit-4);
476
+ --component-button-border-standard-primary-default: var(--color-border-none);
477
+ --component-button-border-standard-primary-hover: var(--color-border-none);
478
+ --component-button-border-standard-primary-active: var(--color-border-none);
479
+ --component-button-border-standard-secondary-default: var(--color-border-soft);
480
+ --component-button-border-standard-secondary-hover: var(--color-border-subtle);
481
+ --component-button-border-standard-secondary-active: var(--color-border-strong);
482
+ --component-button-border-standard-tertiary-default: var(--color-border-none);
483
+ --component-button-border-standard-tertiary-hover: var(--color-border-subtle);
484
+ --component-button-border-standard-tertiary-active: var(--color-border-strong);
485
+ --component-button-border-danger-primary-default: var(--color-border-none);
486
+ --component-button-border-danger-primary-hover: var(--color-border-none);
487
+ --component-button-border-danger-primary-active: var(--color-border-none);
488
+ --component-button-border-danger-secondary-default: var(--scania-color-red-400);
489
+ --component-button-border-danger-secondary-hover: var(--scania-color-red-500);
490
+ --component-button-border-danger-secondary-active: var(--scania-color-red-600);
491
+ --component-button-border-danger-tertiary-default: var(--color-border-none);
492
+ --component-button-border-danger-tertiary-hover: var(--scania-color-red-500);
493
+ --component-button-border-danger-tertiary-active: var(--scania-color-red-600);
494
+ --component-button-focus-ring-radius-default: var(--component--focus-ring-radius-extra-large);
495
+ --component-button-icon-standard-primary-default: var(--scania-color-base-white);
496
+ --component-button-icon-standard-primary-hover: var(
497
+ --component-button-icon-standard-primary-default
498
+ );
499
+ --component-button-icon-standard-primary-active: var(
500
+ --component-button-icon-standard-primary-default
501
+ );
502
+ --component-button-icon-standard-secondary-default: var(--scania-color-base-white);
503
+ --component-button-icon-standard-secondary-hover: var(
504
+ --component-button-icon-standard-secondary-default
505
+ );
506
+ --component-button-icon-standard-secondary-active: var(
507
+ --component-button-icon-standard-secondary-default
508
+ );
509
+ --component-button-icon-standard-tertiary-default: var(--scania-color-base-white);
510
+ --component-button-icon-standard-tertiary-hover: var(
511
+ --component-button-icon-standard-tertiary-default
512
+ );
513
+ --component-button-icon-standard-tertiary-active: var(
514
+ --component-button-icon-standard-tertiary-default
515
+ );
516
+ --component-button-icon-danger-primary-default: var(--scania-color-base-white);
517
+ --component-button-icon-danger-primary-hover: var(--component-button-icon-danger-primary-default);
518
+ --component-button-icon-danger-primary-active: var(
519
+ --component-button-icon-danger-primary-default
520
+ );
521
+ --component-button-icon-danger-secondary-default: var(--scania-color-red-400);
522
+ --component-button-icon-danger-secondary-hover: var(--scania-color-red-500);
523
+ --component-button-icon-danger-secondary-active: var(--scania-color-red-600);
524
+ --component-button-icon-danger-tertiary-default: var(--scania-color-red-400);
525
+ --component-button-icon-danger-tertiary-hover: var(--scania-color-red-500);
526
+ --component-button-icon-danger-tertiary-active: var(--scania-color-red-600);
527
+ --component-button-opacity-disabled: var(--scania-opacity-25);
528
+ --component-button-text-standard-primary-default: var(--scania-color-base-white);
529
+ --component-button-text-standard-primary-hover: var(
530
+ --component-button-text-standard-primary-default
531
+ );
532
+ --component-button-text-standard-primary-active: var(
533
+ --component-button-text-standard-primary-default
534
+ );
535
+ --component-button-text-standard-secondary-default: var(--scania-color-base-white);
536
+ --component-button-text-standard-secondary-hover: var(--scania-color-base-white);
537
+ --component-button-text-standard-secondary-active: var(--scania-color-base-white);
538
+ --component-button-text-standard-tertiary-default: var(--scania-color-base-white);
539
+ --component-button-text-standard-tertiary-hover: var(--scania-color-base-white);
540
+ --component-button-text-standard-tertiary-active: var(--scania-color-base-white);
541
+ --component-button-text-danger-primary-default: var(--scania-color-base-white);
542
+ --component-button-text-danger-primary-hover: var(--component-button-text-danger-primary-default);
543
+ --component-button-text-danger-primary-active: var(
544
+ --component-button-text-danger-primary-default
545
+ );
546
+ --component-button-text-danger-secondary-default: var(--scania-color-red-400);
547
+ --component-button-text-danger-secondary-hover: var(--scania-color-red-500);
548
+ --component-button-text-danger-secondary-active: var(--scania-color-red-600);
549
+ --component-button-text-danger-tertiary-default: var(--scania-color-red-400);
550
+ --component-button-text-danger-tertiary-hover: var(--scania-color-red-500);
551
+ --component-button-text-danger-tertiary-active: var(--scania-color-red-600);
552
+ }
553
+
554
+ .traton .tds-mode-dark,
555
+ .traton.tds-mode-dark,
556
+ .traton .tl-mode-dark,
557
+ .traton.tl-mode-dark {
558
+ --component-button-background-standard-primary-default: var(--traton-color-grey-300);
559
+ --component-button-background-standard-primary-hover: var(--traton-color-grey-200);
560
+ --component-button-background-standard-primary-active: var(--traton-color-grey-400);
561
+ --component-button-background-standard-secondary-default: var(--color-background-none);
562
+ --component-button-background-standard-secondary-hover: var(--color-background-none);
563
+ --component-button-background-standard-secondary-active: var(--color-background-none);
564
+ --component-button-background-standard-tertiary-default: var(--color-background-none);
565
+ --component-button-background-standard-tertiary-hover: var(--color-background-none);
566
+ --component-button-background-standard-tertiary-active: var(--color-background-none);
567
+ --component-button-background-danger-primary-default: var(--color-system-danger-default);
568
+ --component-button-background-danger-primary-hover: var(--traton-color-red-400);
569
+ --component-button-background-danger-primary-active: var(--traton-color-red-500);
570
+ --component-button-background-danger-secondary-default: var(--color-background-none);
571
+ --component-button-background-danger-secondary-hover: var(--color-background-none);
572
+ --component-button-background-danger-secondary-active: var(--color-background-none);
573
+ --component-button-background-danger-tertiary-default: var(--color-background-none);
574
+ --component-button-background-danger-tertiary-hover: var(--color-background-none);
575
+ --component-button-background-danger-tertiary-active: var(--color-background-none);
576
+ --component-button-border-radius-default: var(--traton-unit-56);
577
+ --component-button-border-standard-primary-default: var(--color-border-none);
578
+ --component-button-border-standard-primary-hover: var(--color-border-none);
579
+ --component-button-border-standard-primary-active: var(--color-border-none);
580
+ --component-button-border-standard-secondary-default: var(--color-border-soft);
581
+ --component-button-border-standard-secondary-hover: var(--color-border-subtle);
582
+ --component-button-border-standard-secondary-active: var(--color-border-strong);
583
+ --component-button-border-standard-tertiary-default: var(--color-border-none);
584
+ --component-button-border-standard-tertiary-hover: var(--color-border-subtle);
585
+ --component-button-border-standard-tertiary-active: var(--color-border-strong);
586
+ --component-button-border-danger-primary-default: var(--color-border-none);
587
+ --component-button-border-danger-primary-hover: var(--color-border-none);
588
+ --component-button-border-danger-primary-active: var(--color-border-none);
589
+ --component-button-border-danger-secondary-default: var(--color-system-danger-default);
590
+ --component-button-border-danger-secondary-hover: var(--traton-color-red-400);
591
+ --component-button-border-danger-secondary-active: var(--traton-color-red-500);
592
+ --component-button-border-danger-tertiary-default: var(--color-border-none);
593
+ --component-button-border-danger-tertiary-hover: var(--traton-color-red-400);
594
+ --component-button-border-danger-tertiary-active: var(--traton-color-red-500);
595
+ --component-button-focus-ring-radius-default: var(--component--focus-ring-radius-full);
596
+ --component-button-icon-standard-primary-default: var(--traton-color-base-black);
597
+ --component-button-icon-standard-primary-hover: var(
598
+ --component-button-text-standard-primary-default
599
+ );
600
+ --component-button-icon-standard-primary-active: var(
601
+ --component-button-text-standard-primary-default
602
+ );
603
+ --component-button-icon-standard-secondary-default: var(--traton-color-base-white);
604
+ --component-button-icon-standard-secondary-hover: var(
605
+ --component-button-icon-standard-secondary-default
606
+ );
607
+ --component-button-icon-standard-secondary-active: var(
608
+ --component-button-icon-standard-secondary-default
609
+ );
610
+ --component-button-icon-standard-tertiary-default: var(--traton-color-base-white);
611
+ --component-button-icon-standard-tertiary-hover: var(
612
+ --component-button-icon-standard-tertiary-default
613
+ );
614
+ --component-button-icon-standard-tertiary-active: var(
615
+ --component-button-icon-standard-tertiary-default
616
+ );
617
+ --component-button-icon-danger-primary-default: var(--traton-color-base-white);
618
+ --component-button-icon-danger-primary-hover: var(--component-button-icon-danger-primary-default);
619
+ --component-button-icon-danger-primary-active: var(
620
+ --component-button-icon-danger-primary-default
621
+ );
622
+ --component-button-icon-danger-secondary-default: var(--color-system-danger-default);
623
+ --component-button-icon-danger-secondary-hover: var(
624
+ --component-button-text-danger-secondary-default
625
+ );
626
+ --component-button-icon-danger-secondary-active: var(
627
+ --component-button-text-danger-secondary-default
628
+ );
629
+ --component-button-icon-danger-tertiary-default: var(--color-system-danger-default);
630
+ --component-button-icon-danger-tertiary-hover: var(
631
+ --component-button-text-danger-tertiary-default
632
+ );
633
+ --component-button-icon-danger-tertiary-active: var(
634
+ --component-button-text-danger-tertiary-default
635
+ );
636
+ --component-button-opacity-disabled: var(--traton-opacity-25);
637
+ --component-button-text-standard-primary-default: var(--traton-color-base-black);
638
+ --component-button-text-standard-primary-hover: var(
639
+ --component-button-text-standard-primary-default
640
+ );
641
+ --component-button-text-standard-primary-active: var(
642
+ --component-button-text-standard-primary-default
643
+ );
644
+ --component-button-text-standard-secondary-default: var(--color-text-strong);
645
+ --component-button-text-standard-secondary-hover: var(--color-text-strong);
646
+ --component-button-text-standard-secondary-active: var(--color-text-strong);
647
+ --component-button-text-standard-tertiary-default: var(--color-text-strong);
648
+ --component-button-text-standard-tertiary-hover: var(--color-text-strong);
649
+ --component-button-text-standard-tertiary-active: var(--color-text-strong);
650
+ --component-button-text-danger-primary-default: var(--traton-color-base-white);
651
+ --component-button-text-danger-primary-hover: var(--component-button-text-danger-primary-default);
652
+ --component-button-text-danger-primary-active: var(
653
+ --component-button-text-danger-primary-default
654
+ );
655
+ --component-button-text-danger-secondary-default: var(--color-system-danger-default);
656
+ --component-button-text-danger-secondary-hover: var(
657
+ --component-button-text-danger-secondary-default
658
+ );
659
+ --component-button-text-danger-secondary-active: var(
660
+ --component-button-text-danger-secondary-default
661
+ );
662
+ --component-button-text-danger-tertiary-default: var(--color-system-danger-default);
663
+ --component-button-text-danger-tertiary-hover: var(
664
+ --component-button-text-danger-tertiary-default
665
+ );
666
+ --component-button-text-danger-tertiary-active: var(
667
+ --component-button-text-danger-tertiary-default
668
+ );
669
+ }
670
+
229
671
  .tl-dropdown {
230
672
  --dropdown-background: var(--component--input-background-primary);
231
673
  --dropdown-text: var(--component--input-text-value-default);
@@ -244,6 +686,7 @@
244
686
  --dropdown-option-background-selected: var(--component-dropdown-background-item-selected-default);
245
687
  --dropdown-option-opacity-disabled: calc(var(--component-dropdown-opacity-disabled) / 100);
246
688
  --dropdown-option-border: var(--component-dropdown-border-item-divider-default);
689
+ --dropdown-border-color: var(--component-button-border-standard-tertiary-hover);
247
690
  --dropdown-list-background-color: var(--component-dropdown-background-secondary);
248
691
  }
249
692
  .tl-dropdown--primary {
@@ -814,6 +1257,68 @@ body {
814
1257
  transform: translateY(18px) scaleY(1);
815
1258
  }
816
1259
 
1260
+ .tl-dropdown__actions {
1261
+ font-family: var(--detail-05-font-family);
1262
+ font-size: var(--detail-05-font-size);
1263
+ line-height: var(--detail-05-line-height);
1264
+ font-weight: var(--detail-05-font-weight);
1265
+ letter-spacing: var(--detail-05-letter-spacing);
1266
+ text-transform: var(--detail-05-text-transform);
1267
+ position: sticky;
1268
+ height: 12px;
1269
+ top: auto;
1270
+ bottom: 0;
1271
+ background-color: var(--dropdown-background);
1272
+ display: flex;
1273
+ flex-direction: row;
1274
+ align-items: center;
1275
+ justify-content: space-between;
1276
+ border-top: 1px solid var(--dropdown-option-border);
1277
+ padding: 16px 8px;
1278
+ }
1279
+ .tl-dropdown__actions--select {
1280
+ all: unset;
1281
+ display: flex;
1282
+ align-items: center;
1283
+ justify-content: start;
1284
+ width: fit-content;
1285
+ height: 24px;
1286
+ padding: 8px;
1287
+ box-sizing: border-box;
1288
+ cursor: pointer;
1289
+ border: 1px solid transparent;
1290
+ border-radius: 4px;
1291
+ }
1292
+ .tl-dropdown__actions--select:hover:not(.tl-dropdown__actions--select:disabled) {
1293
+ border: 1px solid var(--dropdown-border-color);
1294
+ border-radius: 4px;
1295
+ }
1296
+ .tl-dropdown__actions--select:disabled {
1297
+ opacity: var(--dropdown-opacity-disabled);
1298
+ cursor: not-allowed;
1299
+ }
1300
+ .tl-dropdown__actions--clear {
1301
+ all: unset;
1302
+ display: flex;
1303
+ align-items: center;
1304
+ justify-content: end;
1305
+ width: fit-content;
1306
+ height: 24px;
1307
+ padding: 8px;
1308
+ box-sizing: border-box;
1309
+ cursor: pointer;
1310
+ border: 1px solid transparent;
1311
+ border-radius: 4px;
1312
+ }
1313
+ .tl-dropdown__actions--clear:hover:not(.tl-dropdown__actions--clear:disabled) {
1314
+ border: 1px solid var(--dropdown-border-color);
1315
+ border-radius: 4px;
1316
+ }
1317
+ .tl-dropdown__actions--clear:disabled {
1318
+ opacity: var(--dropdown-opacity-disabled);
1319
+ cursor: not-allowed;
1320
+ }
1321
+
817
1322
  .tl-dropdown__option {
818
1323
  font-family: var(--type-system-body-01-font-family);
819
1324
  font-size: calc(var(--type-system-body-01-font-size) * 1px);
package/dist/tl-icon.css CHANGED
@@ -344,6 +344,10 @@
344
344
  mask-image: var(--icon-email-svg);
345
345
  background-color: currentcolor;
346
346
  }
347
+ .tl-icon--email_open {
348
+ mask-image: var(--icon-email_open-svg);
349
+ background-color: currentcolor;
350
+ }
347
351
  .tl-icon--employee {
348
352
  mask-image: var(--icon-employee-svg);
349
353
  background-color: currentcolor;
package/dist/tl-text-field.css CHANGED
@@ -581,6 +581,10 @@
581
581
  mask-image: var(--icon-email-svg);
582
582
  background-color: currentcolor;
583
583
  }
584
+ .tl-icon--email_open {
585
+ mask-image: var(--icon-email_open-svg);
586
+ background-color: currentcolor;
587
+ }
584
588
  .tl-icon--employee {
585
589
  mask-image: var(--icon-employee-svg);
586
590
  background-color: currentcolor;
@@ -1666,7 +1670,7 @@
1666
1670
  letter-spacing: var(--detail-05-letter-spacing);
1667
1671
  text-transform: var(--detail-05-text-transform);
1668
1672
  display: block;
1669
- margin-bottom: 8px;
1673
+ margin-bottom: 4px;
1670
1674
  color: var(--text-field-label);
1671
1675
  }
1672
1676
  .tl-text-field--label-inside .tl-text-field__label {
package/dist/traton-variables.css CHANGED
@@ -768,6 +768,7 @@
768
768
  --traton-icon-edit-svg: url(./assets/icons/traton/edit.svg);
769
769
  --traton-icon-edit_inactive-svg: url(./assets/icons/traton/edit_inactive.svg);
770
770
  --traton-icon-email-svg: url(./assets/icons/traton/email.svg);
771
+ --traton-icon-email_open-svg: url(./assets/icons/traton/email_open.svg);
771
772
  --traton-icon-error-svg: url(./assets/icons/traton/error.svg);
772
773
  --traton-icon-export-svg: url(./assets/icons/traton/export.svg);
773
774
  --traton-icon-export_inactive-svg: url(./assets/icons/traton/export_inactive.svg);
@@ -907,6 +908,7 @@
907
908
  --icon-edit-svg: var(--traton-icon-edit-svg);
908
909
  --icon-edit_inactive-svg: var(--traton-icon-edit_inactive-svg);
909
910
  --icon-email-svg: var(--traton-icon-email-svg);
911
+ --icon-email_open-svg: var(--traton-icon-email_open-svg);
910
912
  --icon-error-svg: var(--traton-icon-error-svg);
911
913
  --icon-export-svg: var(--traton-icon-export-svg);
912
914
  --icon-export_inactive-svg: var(--traton-icon-export_inactive-svg);
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@scania/tegel-lite",
3
- "version": "1.8.0",
3
+ "version": "1.9.0",
4
4
  "description": "Styles-only library for Tegel Design System (Beta)",
5
5
  "type": "module",
6
6
  "keywords": [
@@ -71,7 +71,7 @@
71
71
  ],
72
72
  "devDependencies": {
73
73
  "@playwright/test": "1.63.0",
74
- "@types/node": "26.6.1",
74
+ "@types/node": "26.6.4",
75
75
  "serve": "^14.2.5"
76
76
  },
77
77
  "license": "MIT",