@scania/tegel 1.30.0 → 1.31.1-textarea-reactive-value-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 (55) hide show
  1. package/dist/cjs/loader.cjs.js +1 -1
  2. package/dist/cjs/tds-accordion-item.cjs.entry.js +25 -3
  3. package/dist/cjs/tds-button.cjs.entry.js +1 -1
  4. package/dist/cjs/tds-modal.cjs.entry.js +14 -4
  5. package/dist/cjs/tds-popover-core.cjs.entry.js +1 -1
  6. package/dist/cjs/tds-textarea.cjs.entry.js +4 -4
  7. package/dist/cjs/tds-toast.cjs.entry.js +1 -1
  8. package/dist/cjs/tegel.cjs.js +1 -1
  9. package/dist/collection/components/accordion/accordion-item/accordion-item.js +77 -4
  10. package/dist/collection/components/button/button.css +11 -11
  11. package/dist/collection/components/modal/modal.js +45 -4
  12. package/dist/collection/components/popover-core/tds-popover-core.css +843 -12
  13. package/dist/collection/components/textarea/textarea.js +4 -4
  14. package/dist/collection/components/toast/toast.js +1 -1
  15. package/dist/components/{p-a2dafd0e.js → p-4420365f.js} +1 -1
  16. package/dist/components/{p-d4fa1832.js → p-516d8085.js} +1 -1
  17. package/dist/components/p-96e83134.js +2098 -0
  18. package/dist/components/tds-accordion-item.js +30 -5
  19. package/dist/components/tds-button.js +1 -1
  20. package/dist/components/tds-header-dropdown.js +2 -2
  21. package/dist/components/tds-header-launcher.js +2 -2
  22. package/dist/components/tds-modal.js +15 -4
  23. package/dist/components/tds-popover-canvas.js +1 -1
  24. package/dist/components/tds-popover-core.js +1 -1
  25. package/dist/components/tds-popover-menu.js +1 -1
  26. package/dist/components/tds-textarea.js +6 -6
  27. package/dist/components/tds-toast.js +1 -1
  28. package/dist/components/tds-tooltip.js +1 -1
  29. package/dist/esm/loader.js +1 -1
  30. package/dist/esm/tds-accordion-item.entry.js +25 -3
  31. package/dist/esm/tds-button.entry.js +1 -1
  32. package/dist/esm/tds-modal.entry.js +14 -4
  33. package/dist/esm/tds-popover-core.entry.js +1 -1
  34. package/dist/esm/tds-textarea.entry.js +4 -4
  35. package/dist/esm/tds-toast.entry.js +1 -1
  36. package/dist/esm/tegel.js +1 -1
  37. package/dist/tegel/p-2b8e97e1.entry.js +1 -0
  38. package/dist/tegel/p-30c88c69.entry.js +1 -0
  39. package/dist/tegel/p-3e4707fb.entry.js +1 -0
  40. package/dist/tegel/p-554644a9.entry.js +1 -0
  41. package/dist/tegel/p-b58c7bed.entry.js +1 -0
  42. package/dist/tegel/p-b9603974.entry.js +1 -0
  43. package/dist/tegel/tegel.css +2 -2
  44. package/dist/tegel/tegel.esm.js +1 -1
  45. package/dist/types/components/accordion/accordion-item/accordion-item.d.ts +6 -0
  46. package/dist/types/components/modal/modal.d.ts +6 -2
  47. package/dist/types/components.d.ts +21 -0
  48. package/package.json +6 -1
  49. package/dist/components/p-2e25c35b.js +0 -2098
  50. package/dist/tegel/p-0955d5fc.entry.js +0 -1
  51. package/dist/tegel/p-26e8f033.entry.js +0 -1
  52. package/dist/tegel/p-b6a4f459.entry.js +0 -1
  53. package/dist/tegel/p-c3d91dfa.entry.js +0 -1
  54. package/dist/tegel/p-d38039b3.entry.js +0 -1
  55. package/dist/tegel/p-d56f426f.entry.js +0 -1
package/dist/collection/components/popover-core/tds-popover-core.css CHANGED
@@ -344,6 +344,838 @@
344
344
  --system-danger-subtle: var(--scania-extended-red-800);
345
345
  }
346
346
 
347
+ /**
348
+ * Do not edit directly, this file was auto-generated.
349
+ */
350
+ .scania-light, .tds-mode-light {
351
+ --component-header-color-dropdown-text-transform: none;
352
+ --component-header-color-dropdown-letter-spacing: -0.14px;
353
+ --component-header-color-dropdown-font-size: 14px;
354
+ --component-header-color-dropdown-line-height: 16px;
355
+ --component-header-text-component-title-01-menu-text-transform: none;
356
+ --component-header-text-component-title-01-menu-font-size: 14px;
357
+ --component-header-text-component-title-01-menu-line-height: 16px;
358
+ --component-header-text-component-title-01-menu-letter-spacing: -0.14px;
359
+ --component-header-text-application-name-text-transform: none;
360
+ --component-header-text-application-name-font-size: 14px;
361
+ --component-header-text-application-name-line-height: 16px;
362
+ --component-header-text-application-name-letter-spacing: 0px;
363
+ --component-side-menu-padding-sub-menu-item-chevron-right-padding: 12px;
364
+ --component-side-menu-padding-top-level-top: 14px;
365
+ --component-side-menu-padding-collapsed-item-left-right-inner-icon-padding: 12px;
366
+ --component-side-menu-padding-collapsed-item-top-bottom-inner-icon-padding: 12px;
367
+ --component-side-menu-padding-sub-page-left-no-icon: 14px;
368
+ --component-side-menu-padding-sub-page-selected-marker-height: 34px;
369
+ --component-logo-visibility-footer-right-logo: true;
370
+ --component-logo-visibility-tra-left-logo: false;
371
+ --component-logo-visibility-tds-right-logo: true;
372
+ --component-logo-visibility-tra-right-logo: false;
373
+ --component-logo-visibility-tds-left-logo: true;
374
+ --component-logo-string-wordmark: Scania;
375
+ --component-text-detail-01-bold-text-transform: none;
376
+ --component-text-detail-01-bold-line-height: 16px;
377
+ --component-text-detail-01-bold-letter-spacing: 0px;
378
+ --component-text-detail-01-bold-font-size: 12px;
379
+ --text-display-01-text-transform: uppercase;
380
+ --text-display-01-letter-spacing: 0px;
381
+ --text-display-01-font-size: 216px;
382
+ --text-display-01-line-height: 183px;
383
+ --text-display-02-text-transform: uppercase;
384
+ --text-display-02-font-size: 156px;
385
+ --text-display-02-line-height: 148px;
386
+ --text-display-02-letter-spacing: 0px;
387
+ --text-display-03-text-transform: uppercase;
388
+ --text-display-03-font-size: 112px;
389
+ --text-display-03-line-height: 106px;
390
+ --text-display-03-letter-spacing: 0px;
391
+ --text-display-04-text-transform: uppercase;
392
+ --text-display-04-font-size: 80px;
393
+ --text-display-04-line-height: 80px;
394
+ --text-display-04-letter-spacing: 0px;
395
+ --text-display-05-text-transform: uppercase;
396
+ --text-display-05-font-size: 56px;
397
+ --text-display-05-line-height: 56px;
398
+ --text-display-05-letter-spacing: 0px;
399
+ --text-headline-01-text-transform: uppercase;
400
+ --text-headline-01-font-size: 40px;
401
+ --text-headline-01-line-height: 40px;
402
+ --text-headline-01-letter-spacing: 0px;
403
+ --text-headline-02-text-transform: none;
404
+ --text-headline-02-font-size: 32px;
405
+ --text-headline-02-line-height: 32px;
406
+ --text-headline-02-letter-spacing: -1.28px;
407
+ --text-headline-03-text-transform: none;
408
+ --text-headline-03-font-size: 24px;
409
+ --text-headline-03-line-height: 24px;
410
+ --text-headline-03-letter-spacing: -0.72px;
411
+ --text-headline-04-text-transform: none;
412
+ --text-headline-04-font-size: 20px;
413
+ --text-headline-04-line-height: 24px;
414
+ --text-headline-04-letter-spacing: -0.4px;
415
+ --text-headline-05-text-transform: none;
416
+ --text-headline-05-font-size: 16px;
417
+ --text-headline-05-line-height: 24px;
418
+ --text-headline-05-letter-spacing: -0.32px;
419
+ --text-headline-06-text-transform: uppercase;
420
+ --text-headline-06-font-size: 14px;
421
+ --text-headline-06-line-height: 16px;
422
+ --text-headline-06-letter-spacing: -0.28px;
423
+ --text-paragraph-01-text-transform: none;
424
+ --text-paragraph-01-font-size: 24px;
425
+ --text-paragraph-01-line-height: 32px;
426
+ --text-paragraph-01-letter-spacing: -0.72px;
427
+ --text-paragraph-02-text-transform: none;
428
+ --text-paragraph-02-font-size: 20px;
429
+ --text-paragraph-02-line-height: 24px;
430
+ --text-paragraph-02-letter-spacing: -0.2px;
431
+ --text-body-01-text-transform: none;
432
+ --text-body-01-font-size: 16px;
433
+ --text-body-01-line-height: 24px;
434
+ --text-body-01-letter-spacing: -0.32px;
435
+ --text-body-02-text-transform: none;
436
+ --text-body-02-font-size: 14px;
437
+ --text-body-02-line-height: 20px;
438
+ --text-body-02-letter-spacing: -0.14px;
439
+ --text-component-text-01-text-transform: none;
440
+ --text-component-text-01-font-size: 14px;
441
+ --text-component-text-01-line-height: 16px;
442
+ --text-component-text-01-letter-spacing: -0.14px;
443
+ --text-component-text-02-text-transform: none;
444
+ --text-component-text-02-font-size: 14px;
445
+ --text-component-text-02-line-height: 20px;
446
+ --text-component-text-02-letter-spacing: -0.14px;
447
+ --text-component-label-01-text-transform: none;
448
+ --text-component-label-01-font-size: 12px;
449
+ --text-component-label-01-line-height: 16px;
450
+ --text-component-label-01-letter-spacing: 0px;
451
+ --text-component-label-02-transform: none;
452
+ --text-component-label-02-font-size: 10px;
453
+ --text-component-label-02-line-height: 8px;
454
+ --text-component-label-02-letter-spacing: 0px;
455
+ --text-component-title-01-text-transform: none;
456
+ --text-component-title-01-text-transform-2: none;
457
+ --text-component-title-01-font-size: 14px;
458
+ --text-component-title-01-line-height: 16px;
459
+ --text-component-title-01-letter-spacing: -0.14px;
460
+ --text-component-title-01-letter-spacing-2: -0.14px;
461
+ --text-component-title-01-font-size-2: 14px;
462
+ --text-component-title-01-line-height-2: 16px;
463
+ --text-component-title-02-text-transform: uppercase;
464
+ --text-component-title-02-font-size: 10px;
465
+ --text-component-title-02-line-height: 16px;
466
+ --text-component-title-02-letter-spacing: 0.8px;
467
+ --text-link-01-text-transform: none;
468
+ --text-link-01-font-size: 16px;
469
+ --text-link-01-line-height: 24px;
470
+ --text-link-01-letter-spacing: -0.32px;
471
+ --text-link-02-text-transform: none;
472
+ --text-link-02-font-size: 14px;
473
+ --text-link-02-line-height: 20px;
474
+ --text-link-02-letter-spacing: -0.14px;
475
+ --color-background-base: var(--scania-color-grey-00);
476
+ --color-background-accent-primary-default: var(--scania-color-blue-600);
477
+ --color-background-accent-primary-disabled: var(--scania-color-grey-50);
478
+ --color-background-accent-primary-hover: var(--scania-color-blue-500);
479
+ --color-background-accent-primary-pressed: var(--scania-color-blue-700);
480
+ --color-background-accent-primary-focus: var(--scania-color-blue-400);
481
+ --color-background-accent-primary-inverse-default: var(--scania-color-blue-400);
482
+ --color-background-accent-primary-inverse-hover: var(--scania-color-blue-500);
483
+ --color-background-accent-primary-inverse-pressed: var(--scania-color-blue-300);
484
+ --color-background-accent-primary-inverse-focus: var(--scania-color-blue-600);
485
+ --color-background-accent-primary-inverse-disabled: var(--scania-color-grey-850);
486
+ --color-background-accent-danger-default: var(--scania-color-red-400);
487
+ --color-background-accent-danger-hover: var(--scania-color-red-600);
488
+ --color-background-accent-danger-pressed: var(--scania-color-red-700);
489
+ --color-background-accent-danger-focus: var(--scania-color-red-400);
490
+ --color-background-accent-danger-disabled: var(--scania-color-grey-50);
491
+ --color-background-layer-01: var(--scania-color-grey-50);
492
+ --color-background-layer-02: var(--scania-color-grey-00);
493
+ --color-background-layer-03: var(--scania-color-grey-50);
494
+ --color-background-overlay: var(--scania-color-transparent-scrim-light);
495
+ --color-background-inverse-base: var(--scania-color-grey-950);
496
+ --color-background-inverse-layer-01: var(--scania-color-grey-900);
497
+ --color-background-inverse-layer-02: var(--scania-color-grey-850);
498
+ --color-background-inverse-layer-03: var(--scania-color-grey-800);
499
+ --color-background-inverse-top: var(--scania-color-grey-900);
500
+ --color-background-inverse-overlay: var(--scania-color-transparent-scrim-light);
501
+ --color-background-surface-100: var(--scania-color-grey-100);
502
+ --color-background-surface-200: var(--scania-color-grey-150);
503
+ --color-background-surface-300: var(--scania-color-grey-200);
504
+ --color-background-surface-400: var(--scania-color-grey-250);
505
+ --color-background-surface-500: var(--scania-color-grey-350);
506
+ --color-background-surface-600: var(--scania-color-grey-600);
507
+ --color-background-surface-700: var(--scania-color-grey-700);
508
+ --color-background-surface-800: var(--scania-color-grey-750);
509
+ --color-background-surface-900: var(--scania-color-grey-800);
510
+ --color-background-surface-1000: var(--scania-color-grey-850);
511
+ --color-background-top: var(--scania-color-grey-00);
512
+ --color-system-warning-default: var(--scania-color-yellow-500);
513
+ --color-system-warning-discrete: var(--scania-color-yellow-50);
514
+ --color-system-warning-strong: var(--scania-color-yellow-900);
515
+ --color-system-warning-defined: var(--scania-color-yellow-600);
516
+ --color-system-warning-subtle: var(--scania-color-yellow-400);
517
+ --color-system-success-default: var(--scania-color-green-300);
518
+ --color-system-success-discrete: var(--scania-color-green-50);
519
+ --color-system-success-strong: var(--scania-color-green-800);
520
+ --color-system-success-defined: var(--scania-color-green-500);
521
+ --color-system-success-subtle: var(--scania-color-green-200);
522
+ --color-system-info-default: var(--scania-color-blue-400);
523
+ --color-system-info-discrete: var(--scania-color-blue-50);
524
+ --color-system-info-strong: var(--scania-color-blue-800);
525
+ --color-system-info-defined: var(--scania-color-blue-600);
526
+ --color-system-info-subtle: var(--scania-color-blue-300);
527
+ --color-system-danger-default: var(--scania-color-red-400);
528
+ --color-system-danger-discrete: var(--scania-color-red-50);
529
+ --color-system-danger-strong: var(--scania-color-red-800);
530
+ --color-system-danger-defined: var(--scania-color-red-500);
531
+ --color-system-danger-subtle: var(--scania-color-red-300);
532
+ --color-foreground-text-accent-default: var(--scania-color-blue-400);
533
+ --color-foreground-text-accent-brand: var(--scania-color-grey-00);
534
+ --color-foreground-text-accent-brand-inverse: var(--scania-color-grey-950);
535
+ --color-foreground-text-accent-visited: var(--scania-color-blue-700);
536
+ --color-foreground-text-strong: var(--scania-color-transparent-950);
537
+ --color-foreground-text-defined: var(--scania-color-transparent-650);
538
+ --color-foreground-text-subtle: var(--scania-color-transparent-350);
539
+ --color-foreground-text-inverse-strong: var(--scania-color-transparent-inverse-50);
540
+ --color-foreground-text-inverse-soft: var(--scania-color-transparent-inverse-300);
541
+ --color-foreground-text-inverse-subtle: var(--scania-color-transparent-inverse-400);
542
+ --color-foreground-text-inverse-defined: var(--scania-color-transparent-inverse-200);
543
+ --color-foreground-text-inverse-disabled: var(--scania-color-transparent-inverse-500);
544
+ --color-foreground-text-inverse-brand: var(--scania-color-grey-00);
545
+ --color-foreground-text-brand: var(--scania-color-blue-800);
546
+ --color-foreground-text-disabled: var(--scania-color-transparent-250);
547
+ --color-foreground-text-soft: var(--scania-color-transparent-500);
548
+ --color-foreground-border-inverse-strong: var(--scania-color-transparent-inverse-50);
549
+ --color-foreground-border-inverse-soft: var(--scania-color-transparent-inverse-300);
550
+ --color-foreground-border-inverse-subtle: var(--scania-color-transparent-inverse-400);
551
+ --color-foreground-border-inverse-discrete: var(--scania-color-transparent-inverse-600);
552
+ --color-foreground-border-inverse-defined: var(--scania-color-transparent-inverse-200);
553
+ --color-foreground-border-inverse-disabled: var(--scania-color-transparent-inverse-500);
554
+ --color-foreground-border-strong: var(--scania-color-transparent-950);
555
+ --color-foreground-border-soft: var(--scania-color-transparent-500);
556
+ --color-foreground-border-subtle: var(--scania-color-transparent-350);
557
+ --color-foreground-border-discrete: var(--scania-color-transparent-200);
558
+ --color-foreground-border-accent-link: var(--scania-color-blue-400);
559
+ --color-foreground-border-accent-focus: var(--scania-color-blue-400);
560
+ --color-foreground-border-defined: var(--scania-color-transparent-650);
561
+ --color-foreground-border-disabled: var(--scania-color-transparent-250);
562
+ --color-foreground-icon-strong: var(--scania-color-transparent-950);
563
+ --color-foreground-icon-defined: var(--scania-color-transparent-650);
564
+ --color-foreground-icon-soft: var(--scania-color-transparent-500);
565
+ --color-foreground-icon-subtle: var(--scania-color-transparent-350);
566
+ --color-foreground-icon-disabled: var(--scania-color-transparent-250);
567
+ --color-foreground-icon-discrete: var(--scania-color-transparent-200);
568
+ --color-foreground-icon-inverse-strong: var(--scania-color-transparent-inverse-50);
569
+ --color-foreground-icon-inverse-defined: var(--scania-color-transparent-inverse-200);
570
+ --color-foreground-icon-inverse-soft: var(--scania-color-transparent-inverse-300);
571
+ --color-foreground-icon-inverse-subtle: var(--scania-color-transparent-inverse-400);
572
+ --color-foreground-icon-inverse-disabled: var(--scania-color-transparent-inverse-500);
573
+ --color-foreground-icon-inverse-discrete: var(--scania-color-transparent-inverse-600);
574
+ --color-foreground-icon-accent-default: var(--scania-color-blue-400);
575
+ --color-foreground-icon-accent-visited: var(--scania-color-blue-700);
576
+ --color-foreground-icon-accent-brand: var(--scania-color-grey-00);
577
+ --color-foreground-icon-accent-brand-inverse: var(--scania-color-grey-950);
578
+ --color-brand-neutral-white: var(--scania-color-grey-00);
579
+ --color-brand-neutral-black: var(--scania-color-grey-1000);
580
+ --color-brand-primary-50: var(--scania-color-blue-50);
581
+ --color-brand-primary-100: var(--scania-color-blue-100);
582
+ --color-brand-primary-200: var(--scania-color-blue-200);
583
+ --color-brand-primary-300: var(--scania-color-blue-300);
584
+ --color-brand-primary-400: var(--scania-color-blue-400);
585
+ --color-brand-primary-500: var(--scania-color-blue-500);
586
+ --color-brand-primary-600: var(--scania-color-blue-600);
587
+ --color-brand-primary-700: var(--scania-color-blue-700);
588
+ --color-brand-primary-800: var(--scania-color-blue-800);
589
+ --color-brand-primary-900: var(--scania-color-blue-900);
590
+ --color-brand-secondary-50: var(--scania-color-red-50);
591
+ --color-brand-secondary-100: var(--scania-color-red-100);
592
+ --color-brand-secondary-200: var(--scania-color-red-200);
593
+ --color-brand-secondary-300: var(--scania-color-red-300);
594
+ --color-brand-secondary-400: var(--scania-color-red-400);
595
+ --color-brand-secondary-500: var(--scania-color-red-500);
596
+ --color-brand-secondary-600: var(--scania-color-red-600);
597
+ --color-brand-secondary-700: var(--scania-color-red-700);
598
+ --color-brand-secondary-800: var(--scania-color-red-800);
599
+ --color-brand-secondary-900: var(--scania-color-red-900);
600
+ --component-header-color-expressive-mobile-menu-primary: var(--scania-color-blue-800);
601
+ --component-header-color-expressive-mobile-menu-focus: var(--scania-color-blue-800);
602
+ --component-header-color-expressive-mobile-menu-pressed: var(--scania-color-blue-700);
603
+ --component-header-color-expressive-mobile-menu-selected: var(--scania-color-grey-00);
604
+ --component-header-color-expressive-mobile-menu-selected-expressive: var(--scania-color-blue-800);
605
+ --component-header-color-background: var(--scania-color-blue-800);
606
+ --component-header-color-dropdown-focus: var(--traton-color-blue-1000);
607
+ --component-header-color-dropdown-font-family: var(--scania-font-family-semi-condensed);
608
+ --component-header-color-dropdown-font-weight: var(--scania-font-weight-bold);
609
+ --component-header-text-component-title-01-menu-font-family: var(--scania-font-family-semi-condensed);
610
+ --component-header-text-component-title-01-menu-font-weight: var(--scania-font-weight-regular);
611
+ --component-header-text-application-name-font-family: var(--scania-font-family-display);
612
+ --component-header-text-application-name-font-weight: var(--scania-font-weight-regular);
613
+ --component-side-menu-states-default: var(--scania-color-grey-00);
614
+ --component-side-menu-states-hover: var(--scania-color-grey-50);
615
+ --component-side-menu-states-pressed: var(--scania-color-grey-100);
616
+ --component-side-menu-states-focus: var(--scania-color-grey-00);
617
+ --component-side-menu-states-selected: var(--scania-color-grey-50);
618
+ --component-side-menu-icons-icon-size: var(--scania-unit-16);
619
+ --component-side-menu-icons-close-icon-size: var(--scania-unit-20);
620
+ --component-side-menu-padding-sub-menu-item-top-and-bottom: var(--scania-unit-8);
621
+ --component-side-menu-padding-sub-menu-item-left: var(--scania-unit-12);
622
+ --component-side-menu-padding-sub-menu-item-profile-left: var(--scania-unit-4);
623
+ --component-side-menu-padding-sub-menu-item-profile-gap: var(--scania-unit-12);
624
+ --component-side-menu-padding-sub-menu-item-profile-top-bottom: var(--scania-unit-4);
625
+ --component-side-menu-padding-sub-menu-item-selected-marker-height: var(--traton-unit-40);
626
+ --component-side-menu-padding-top-level-left: var(--scania-unit-16);
627
+ --component-side-menu-padding-top-level-horizontal-gap-padding: var(--scania-unit-4);
628
+ --component-side-menu-padding-top-level-bottom-collapsible: var(--scania-unit-16);
629
+ --component-side-menu-padding-sub-page-top-bottom: var(--scania-unit-8);
630
+ --component-side-menu-padding-sub-page-left-with-icon: var(--scania-unit-40);
631
+ --component-side-menu-padding-sub-page-left-profile: var(--scania-unit-48);
632
+ --component-side-menu-padding-sub-page-top-group: var(--scania-unit-4);
633
+ --component-side-menu-padding-sub-page-selected-marker-width: var(--scania-unit-8);
634
+ --component-side-menu-radius-corner-radius: var(--scania-unit-8);
635
+ --component-footer-primary: var(--scania-color-blue-800);
636
+ --component-footer-border: var(--scania-color-blue-700);
637
+ --component-card-padding-padding: var(--scania-unit-16);
638
+ --component-shadow-hover: var(--scania-color-transparent-shadow-250);
639
+ --component-shadow-default: var(--scania-color-transparent-shadow-150);
640
+ --component-shadow-pressed: var(--scania-color-transparent-shadow-250);
641
+ --component-shadow-dragged: var(--scania-color-transparent-shadow-200);
642
+ --component-shadow-base-modifier: var(--scania-color-transparent-shadow-100);
643
+ --component-shadow-focus: var(--scania-color-transparent-shadow-350);
644
+ --component-text-detail-01-bold-font-family: var(--scania-font-family-semi-condensed);
645
+ --component-text-detail-01-bold-font-weight: var(--scania-font-weight-bold);
646
+ --component-input-field-radius-top-left: var(--scania-unit-4);
647
+ --component-input-field-radius-top-right: var(--scania-unit-4);
648
+ --component-input-field-radius-bottom-left: var(--scania-unit-0);
649
+ --component-input-field-radius-bottom-right: var(--scania-unit-0);
650
+ --component-input-field-border-width-top: var(--scania-unit-0);
651
+ --component-input-field-border-width-right: var(--scania-unit-0);
652
+ --component-input-field-border-width-bottom: var(--scania-unit-1);
653
+ --component-input-field-border-width-left: var(--scania-unit-0);
654
+ --component-input-field-border-focus-top: var(--scania-unit-0);
655
+ --component-input-field-border-focus-right: var(--scania-unit-0);
656
+ --component-input-field-border-focus-bottom: var(--scania-unit-2);
657
+ --component-input-field-border-focus-left: var(--scania-unit-0);
658
+ --text-display-01-font-family: var(--scania-font-family-display);
659
+ --text-display-01-font-weight: var(--scania-font-weight-bold);
660
+ --text-display-02-font-family: var(--scania-font-family-display);
661
+ --text-display-02-font-weight: var(--scania-font-weight-bold);
662
+ --text-display-03-font-family: var(--scania-font-family-display);
663
+ --text-display-03-font-weight: var(--scania-font-weight-bold);
664
+ --text-display-04-font-family: var(--scania-font-family-display);
665
+ --text-display-04-font-weight: var(--scania-font-weight-bold);
666
+ --text-display-05-font-family: var(--scania-font-family-display);
667
+ --text-display-05-font-weight: var(--scania-font-weight-bold);
668
+ --text-headline-01-font-family: var(--scania-font-family-display);
669
+ --text-headline-01-font-weight: var(--scania-font-weight-bold);
670
+ --text-headline-02-font-family: var(--scania-font-family-default);
671
+ --text-headline-02-font-weight: var(--scania-font-weight-bold);
672
+ --text-headline-03-font-family: var(--scania-font-family-default);
673
+ --text-headline-03-font-weight: var(--scania-font-weight-bold);
674
+ --text-headline-04-font-family: var(--scania-font-family-default);
675
+ --text-headline-04-font-weight: var(--scania-font-weight-bold);
676
+ --text-headline-05-font-family: var(--scania-font-family-default);
677
+ --text-headline-05-font-weight: var(--scania-font-weight-bold);
678
+ --text-headline-06-font-family: var(--scania-font-family-default);
679
+ --text-headline-06-font-weight: var(--scania-font-weight-bold);
680
+ --text-paragraph-01-font-family: var(--scania-font-family-default);
681
+ --text-paragraph-01-font-weight: var(--scania-font-weight-regular);
682
+ --text-paragraph-02-font-family: var(--scania-font-family-default);
683
+ --text-paragraph-02-font-weight: var(--scania-font-weight-regular);
684
+ --text-body-01-font-family: var(--scania-font-family-default);
685
+ --text-body-01-font-weight: var(--scania-font-weight-regular);
686
+ --text-body-02-font-family: var(--scania-font-family-default);
687
+ --text-body-02-font-weight: var(--scania-font-weight-regular);
688
+ --text-component-text-01-font-family: var(--scania-font-family-semi-condensed);
689
+ --text-component-text-01-font-weight: var(--scania-font-weight-regular);
690
+ --text-component-text-02-font-family: var(--scania-font-family-semi-condensed);
691
+ --text-component-text-02-font-weight: var(--scania-font-weight-regular);
692
+ --text-component-label-01-font-family: var(--scania-font-family-semi-condensed);
693
+ --text-component-label-01-font-weight: var(--scania-font-weight-regular);
694
+ --text-component-label-02-font-family: var(--scania-font-family-semi-condensed);
695
+ --text-component-label-02-font-weight: var(--scania-font-weight-regular);
696
+ --text-component-title-01-font-family: var(--scania-font-family-semi-condensed);
697
+ --text-component-title-01-font-family-2: var(--scania-font-family-semi-condensed);
698
+ --text-component-title-01-font-weight: var(--scania-font-weight-bold);
699
+ --text-component-title-01-font-weight-2: var(--scania-font-weight-bold);
700
+ --text-component-title-02-font-family: var(--scania-font-family-default);
701
+ --text-component-title-02-font-weight: var(--scania-font-weight-bold);
702
+ --text-link-01-font-family: var(--scania-font-family-default);
703
+ --text-link-01-font-weight: var(--scania-font-weight-regular);
704
+ --text-link-02-font-family: var(--scania-font-family-default);
705
+ --text-link-02-font-weight: var(--scania-font-weight-regular);
706
+ --dimension-space-tiny: var(--scania-unit-4);
707
+ --dimension-space-small: var(--scania-unit-16);
708
+ --dimension-space-medium: var(--scania-unit-24);
709
+ --dimension-space-large: var(--scania-unit-48);
710
+ --dimension-space-huge: var(--scania-unit-80);
711
+ --dimension-radius-for-surface-clickable: var(--scania-unit-4);
712
+ --dimension-radius-for-surface-field: var(--scania-unit-4);
713
+ --dimension-radius-for-surface-inverse: var(--scania-unit-9999);
714
+ --dimension-radius-narrow: var(--scania-unit-4);
715
+ --dimension-radius-soft: var(--scania-unit-8);
716
+ --dimension-radius-rounded: var(--scania-unit-32);
717
+ --dimension-radius-circle: var(--scania-unit-9999);
718
+ --dimension-radius-for-area-large: var(--scania-unit-16);
719
+ --dimension-radius-for-area-small: var(--scania-unit-2);
720
+ --dimension-radius-focus-width: var(--scania-unit-2);
721
+ --component-header-color-dropdown-hover: var(--color-background-surface-100);
722
+ --component-header-color-foreground-strong: var(--color-brand-neutral-white);
723
+ --component-header-color-foreground-selected: var(--color-foreground-icon-strong);
724
+ --component-header-color-foreground-defined: var(--color-foreground-text-inverse-defined);
725
+ --component-side-menu-dividers-default: var(--color-foreground-border-discrete);
726
+ --component-table-secondary-cell: var(--color-background-layer-02);
727
+ --component-table-pagination-dropdown: var(--color-background-base);
728
+ --component-table-pagination-base: var(--color-background-surface-200);
729
+ --component-table-cell-hover: var(--color-background-surface-100);
730
+ --component-table-cell: var(--color-background-layer-01);
731
+ --component-stepper-success: var(--color-system-success-default);
732
+ --component-spinner-color: var(--color-system-info-default);
733
+ --component-footer-text-color-copyright: var(--color-foreground-text-inverse-soft);
734
+ --component-footer-text-color-link-text: var(--color-foreground-text-brand);
735
+ --component-dropdown-list-item-secondary-hover: var(--color-background-surface-100);
736
+ --component-dropdown-list-item-secondary-focus: var(--color-background-surface-100);
737
+ --component-dropdown-list-item-focus: var(--color-background-surface-100);
738
+ --component-dropdown-list-item-hover: var(--color-background-surface-100);
739
+ --component-dropdown-secondary-hover: var(--color-background-surface-100);
740
+ --component-dropdown-secondary-focus: var(--color-background-surface-100);
741
+ --component-dropdown-focus: var(--color-background-surface-100);
742
+ --component-dropdown-hover: var(--color-background-surface-100);
743
+ --component-badge-text: var(--color-brand-neutral-white);
744
+ --component-badge-background: var(--color-system-danger-default);
745
+ --component-button-primary-text: var(--color-brand-neutral-white);
746
+ --component-card-secondary: var(--color-brand-neutral-white);
747
+ --component-card-primary: var(--color-brand-neutral-white);
748
+ --component-chip-color-focused-on-selected: var(--color-system-info-subtle);
749
+ --component-chip-color-disabled: var(--color-background-surface-200);
750
+ --component-chip-color-focused: var(--color-background-layer-01);
751
+ --component-chip-color-hover: var(--color-background-surface-300);
752
+ --component-chip-color-selected: var(--color-brand-primary-500);
753
+ --component-chip-color-disabled-selected: var(--color-brand-primary-500);
754
+ --component-chip-color-hover-on-selected: var(--color-system-info-defined);
755
+ --component-chip-color-default: var(--color-background-surface-200);
756
+ --component-chip-foreground-inverse: var(--color-foreground-text-inverse-strong);
757
+ --component-chip-foreground-foreground-disabled-selected: var(--color-foreground-text-inverse-subtle);
758
+ --component-chip-border-selected-focus-border: var(--color-system-info-defined);
759
+ --component-logo-fill: var(--color-brand-neutral-white);
760
+ --component-cookie-primary-text-inverse: var(--color-brand-neutral-white);
761
+ }
762
+
763
+ /**
764
+ * Do not edit directly, this file was auto-generated.
765
+ */
766
+ .scania-dark, .tds-mode-dark {
767
+ --component-header-color-dropdown-text-transform: none;
768
+ --component-header-color-dropdown-letter-spacing: -0.14px;
769
+ --component-header-color-dropdown-font-size: 14px;
770
+ --component-header-color-dropdown-line-height: 16px;
771
+ --component-header-text-component-title-01-menu-text-transform: none;
772
+ --component-header-text-component-title-01-menu-font-size: 14px;
773
+ --component-header-text-component-title-01-menu-line-height: 16px;
774
+ --component-header-text-component-title-01-menu-letter-spacing: -0.14px;
775
+ --component-header-text-application-name-text-transform: none;
776
+ --component-header-text-application-name-font-size: 14px;
777
+ --component-header-text-application-name-line-height: 16px;
778
+ --component-header-text-application-name-letter-spacing: 0px;
779
+ --component-side-menu-padding-sub-menu-item-chevron-right-padding: 12px;
780
+ --component-side-menu-padding-sub-menu-item-selected-marker-height: 40px;
781
+ --component-side-menu-padding-top-level-top: 14px;
782
+ --component-side-menu-padding-collapsed-item-left-right-inner-icon-padding: 12px;
783
+ --component-side-menu-padding-collapsed-item-top-bottom-inner-icon-padding: 12px;
784
+ --component-side-menu-padding-sub-page-left-no-icon: 14px;
785
+ --component-side-menu-padding-sub-page-selected-marker-height: 34px;
786
+ --component-logo-visibility-footer-right-logo: true;
787
+ --component-logo-visibility-tra-left-logo: false;
788
+ --component-logo-visibility-tds-right-logo: true;
789
+ --component-logo-visibility-tra-right-logo: false;
790
+ --component-logo-visibility-tds-left-logo: true;
791
+ --component-logo-string-wordmark: Scania;
792
+ --component-text-detail-01-bold-text-transform: none;
793
+ --component-text-detail-01-bold-line-height: 16px;
794
+ --component-text-detail-01-bold-letter-spacing: 0px;
795
+ --component-text-detail-01-bold-font-size: 12px;
796
+ --text-display-01-text-transform: uppercase;
797
+ --text-display-01-letter-spacing: 0px;
798
+ --text-display-01-font-size: 216px;
799
+ --text-display-01-line-height: 183px;
800
+ --text-display-02-text-transform: uppercase;
801
+ --text-display-02-font-size: 156px;
802
+ --text-display-02-line-height: 148px;
803
+ --text-display-02-letter-spacing: 0px;
804
+ --text-display-03-text-transform: uppercase;
805
+ --text-display-03-font-size: 112px;
806
+ --text-display-03-line-height: 106px;
807
+ --text-display-03-letter-spacing: 0px;
808
+ --text-display-04-text-transform: uppercase;
809
+ --text-display-04-font-size: 80px;
810
+ --text-display-04-line-height: 80px;
811
+ --text-display-04-letter-spacing: 0px;
812
+ --text-display-05-text-transform: uppercase;
813
+ --text-display-05-font-size: 56px;
814
+ --text-display-05-line-height: 56px;
815
+ --text-display-05-letter-spacing: 0px;
816
+ --text-headline-01-text-transform: uppercase;
817
+ --text-headline-01-font-size: 40px;
818
+ --text-headline-01-line-height: 40px;
819
+ --text-headline-01-letter-spacing: 0px;
820
+ --text-headline-02-text-transform: none;
821
+ --text-headline-02-font-size: 32px;
822
+ --text-headline-02-line-height: 32px;
823
+ --text-headline-02-letter-spacing: -1.28px;
824
+ --text-headline-03-text-transform: none;
825
+ --text-headline-03-font-size: 24px;
826
+ --text-headline-03-line-height: 24px;
827
+ --text-headline-03-letter-spacing: -0.72px;
828
+ --text-headline-04-text-transform: none;
829
+ --text-headline-04-font-size: 20px;
830
+ --text-headline-04-line-height: 24px;
831
+ --text-headline-04-letter-spacing: -0.4px;
832
+ --text-headline-05-text-transform: none;
833
+ --text-headline-05-font-size: 16px;
834
+ --text-headline-05-line-height: 24px;
835
+ --text-headline-05-letter-spacing: -0.32px;
836
+ --text-headline-06-text-transform: uppercase;
837
+ --text-headline-06-font-size: 14px;
838
+ --text-headline-06-line-height: 16px;
839
+ --text-headline-06-letter-spacing: -0.28px;
840
+ --text-paragraph-01-text-transform: none;
841
+ --text-paragraph-01-font-size: 24px;
842
+ --text-paragraph-01-line-height: 32px;
843
+ --text-paragraph-01-letter-spacing: -0.72px;
844
+ --text-paragraph-02-text-transform: none;
845
+ --text-paragraph-02-font-size: 20px;
846
+ --text-paragraph-02-line-height: 24px;
847
+ --text-paragraph-02-letter-spacing: -0.2px;
848
+ --text-body-01-text-transform: none;
849
+ --text-body-01-font-size: 16px;
850
+ --text-body-01-line-height: 24px;
851
+ --text-body-01-letter-spacing: -0.32px;
852
+ --text-body-02-text-transform: none;
853
+ --text-body-02-font-size: 14px;
854
+ --text-body-02-line-height: 20px;
855
+ --text-body-02-letter-spacing: -0.14px;
856
+ --text-component-text-01-text-transform: none;
857
+ --text-component-text-01-font-size: 14px;
858
+ --text-component-text-01-line-height: 16px;
859
+ --text-component-text-01-letter-spacing: -0.14px;
860
+ --text-component-text-02-text-transform: none;
861
+ --text-component-text-02-font-size: 14px;
862
+ --text-component-text-02-line-height: 20px;
863
+ --text-component-text-02-letter-spacing: -0.14px;
864
+ --text-component-label-01-text-transform: none;
865
+ --text-component-label-01-font-size: 12px;
866
+ --text-component-label-01-line-height: 16px;
867
+ --text-component-label-01-letter-spacing: 0px;
868
+ --text-component-label-02-transform: none;
869
+ --text-component-label-02-font-size: 10px;
870
+ --text-component-label-02-line-height: 8px;
871
+ --text-component-label-02-letter-spacing: 0px;
872
+ --text-component-title-01-text-transform: none;
873
+ --text-component-title-01-text-transform-2: none;
874
+ --text-component-title-01-font-size: 14px;
875
+ --text-component-title-01-line-height: 16px;
876
+ --text-component-title-01-letter-spacing: -0.14px;
877
+ --text-component-title-01-letter-spacing-2: -0.14px;
878
+ --text-component-title-01-font-size-2: 14px;
879
+ --text-component-title-01-line-height-2: 16px;
880
+ --text-component-title-02-text-transform: uppercase;
881
+ --text-component-title-02-font-size: 10px;
882
+ --text-component-title-02-line-height: 16px;
883
+ --text-component-title-02-letter-spacing: 0.8px;
884
+ --text-link-01-text-transform: none;
885
+ --text-link-01-font-size: 16px;
886
+ --text-link-01-line-height: 24px;
887
+ --text-link-01-letter-spacing: -0.32px;
888
+ --text-link-02-text-transform: none;
889
+ --text-link-02-font-size: 14px;
890
+ --text-link-02-line-height: 20px;
891
+ --text-link-02-letter-spacing: -0.14px;
892
+ --color-background-base: var(--scania-color-grey-950);
893
+ --color-background-accent-primary-default: var(--scania-color-blue-400);
894
+ --color-background-accent-primary-disabled: var(--scania-color-grey-850);
895
+ --color-background-accent-primary-hover: var(--scania-color-blue-500);
896
+ --color-background-accent-primary-pressed: var(--scania-color-blue-300);
897
+ --color-background-accent-primary-focus: var(--scania-color-blue-600);
898
+ --color-background-accent-primary-inverse-default: var(--scania-color-blue-600);
899
+ --color-background-accent-primary-inverse-hover: var(--scania-color-blue-500);
900
+ --color-background-accent-primary-inverse-pressed: var(--scania-color-blue-700);
901
+ --color-background-accent-primary-inverse-focus: var(--scania-color-blue-400);
902
+ --color-background-accent-primary-inverse-disabled: var(--scania-color-grey-50);
903
+ --color-background-accent-danger-default: var(--scania-color-red-400);
904
+ --color-background-accent-danger-hover: var(--scania-color-red-600);
905
+ --color-background-accent-danger-pressed: var(--scania-color-red-700);
906
+ --color-background-accent-danger-focus: var(--scania-color-red-400);
907
+ --color-background-accent-danger-disabled: var(--scania-color-grey-900);
908
+ --color-background-layer-01: var(--scania-color-grey-900);
909
+ --color-background-layer-02: var(--scania-color-grey-850);
910
+ --color-background-layer-03: var(--scania-color-grey-800);
911
+ --color-background-overlay: var(--scania-color-transparent-scrim-dark);
912
+ --color-background-inverse-base: var(--scania-color-grey-00);
913
+ --color-background-inverse-layer-01: var(--scania-color-grey-50);
914
+ --color-background-inverse-layer-02: var(--scania-color-grey-00);
915
+ --color-background-inverse-layer-03: var(--scania-color-grey-50);
916
+ --color-background-inverse-top: var(--scania-color-grey-00);
917
+ --color-background-inverse-overlay: var(--scania-color-transparent-scrim-dark);
918
+ --color-background-surface-100: var(--scania-color-grey-850);
919
+ --color-background-surface-200: var(--scania-color-grey-800);
920
+ --color-background-surface-300: var(--scania-color-grey-750);
921
+ --color-background-surface-400: var(--scania-color-grey-700);
922
+ --color-background-surface-500: var(--scania-color-grey-600);
923
+ --color-background-surface-600: var(--scania-color-grey-350);
924
+ --color-background-surface-700: var(--scania-color-grey-250);
925
+ --color-background-surface-800: var(--scania-color-grey-200);
926
+ --color-background-surface-900: var(--scania-color-grey-150);
927
+ --color-background-surface-1000: var(--scania-color-grey-100);
928
+ --color-background-top: var(--scania-color-grey-900);
929
+ --color-system-warning-default: var(--traton-color-yellow-300);
930
+ --color-system-warning-discrete: var(--scania-color-yellow-800);
931
+ --color-system-warning-strong: var(--traton-color-yellow-50);
932
+ --color-system-warning-defined: var(--scania-color-yellow-100);
933
+ --color-system-warning-subtle: var(--scania-color-yellow-400);
934
+ --color-system-success-default: var(--scania-color-green-200);
935
+ --color-system-success-discrete: var(--scania-color-green-700);
936
+ --color-system-success-strong: var(--scania-color-green-50);
937
+ --color-system-success-defined: var(--scania-color-green-100);
938
+ --color-system-success-subtle: var(--scania-color-green-300);
939
+ --color-system-info-default: var(--scania-color-blue-300);
940
+ --color-system-info-discrete: var(--scania-color-blue-700);
941
+ --color-system-info-strong: var(--scania-color-blue-50);
942
+ --color-system-info-defined: var(--scania-color-blue-200);
943
+ --color-system-info-subtle: var(--scania-color-blue-400);
944
+ --color-system-danger-default: var(--scania-color-red-300);
945
+ --color-system-danger-discrete: var(--scania-color-red-800);
946
+ --color-system-danger-strong: var(--scania-color-red-50);
947
+ --color-system-danger-defined: var(--scania-color-red-100);
948
+ --color-system-danger-subtle: var(--scania-color-red-400);
949
+ --color-foreground-text-accent-default: var(--scania-color-blue-300);
950
+ --color-foreground-text-accent-brand: var(--scania-color-grey-00);
951
+ --color-foreground-text-accent-brand-inverse: var(--scania-color-grey-00);
952
+ --color-foreground-text-accent-visited: var(--scania-color-blue-100);
953
+ --color-foreground-text-strong: var(--scania-color-transparent-inverse-50);
954
+ --color-foreground-text-defined: var(--scania-color-transparent-inverse-200);
955
+ --color-foreground-text-subtle: var(--scania-color-transparent-inverse-400);
956
+ --color-foreground-text-inverse-strong: var(--scania-color-transparent-950);
957
+ --color-foreground-text-inverse-soft: var(--scania-color-transparent-500);
958
+ --color-foreground-text-inverse-subtle: var(--scania-color-transparent-350);
959
+ --color-foreground-text-inverse-defined: var(--scania-color-transparent-650);
960
+ --color-foreground-text-inverse-disabled: var(--scania-color-transparent-250);
961
+ --color-foreground-text-inverse-brand: var(--scania-color-blue-800);
962
+ --color-foreground-text-brand: var(--scania-color-grey-00);
963
+ --color-foreground-text-disabled: var(--scania-color-transparent-inverse-500);
964
+ --color-foreground-text-soft: var(--scania-color-transparent-inverse-300);
965
+ --color-foreground-border-inverse-strong: var(--scania-color-transparent-950);
966
+ --color-foreground-border-inverse-soft: var(--scania-color-transparent-500);
967
+ --color-foreground-border-inverse-subtle: var(--scania-color-transparent-350);
968
+ --color-foreground-border-inverse-discrete: var(--scania-color-transparent-200);
969
+ --color-foreground-border-inverse-defined: var(--scania-color-transparent-650);
970
+ --color-foreground-border-inverse-disabled: var(--scania-color-transparent-250);
971
+ --color-foreground-border-strong: var(--scania-color-transparent-inverse-50);
972
+ --color-foreground-border-soft: var(--scania-color-transparent-inverse-300);
973
+ --color-foreground-border-subtle: var(--scania-color-transparent-inverse-400);
974
+ --color-foreground-border-discrete: var(--scania-color-transparent-inverse-600);
975
+ --color-foreground-border-accent-link: var(--scania-color-blue-300);
976
+ --color-foreground-border-accent-focus: var(--scania-color-blue-300);
977
+ --color-foreground-border-defined: var(--scania-color-transparent-inverse-200);
978
+ --color-foreground-border-disabled: var(--scania-color-transparent-inverse-500);
979
+ --color-foreground-icon-strong: var(--scania-color-transparent-inverse-50);
980
+ --color-foreground-icon-defined: var(--scania-color-transparent-inverse-200);
981
+ --color-foreground-icon-soft: var(--scania-color-transparent-inverse-300);
982
+ --color-foreground-icon-subtle: var(--scania-color-transparent-inverse-400);
983
+ --color-foreground-icon-disabled: var(--scania-color-transparent-inverse-500);
984
+ --color-foreground-icon-discrete: var(--scania-color-transparent-inverse-600);
985
+ --color-foreground-icon-inverse-strong: var(--scania-color-transparent-950);
986
+ --color-foreground-icon-inverse-defined: var(--scania-color-transparent-650);
987
+ --color-foreground-icon-inverse-soft: var(--scania-color-transparent-500);
988
+ --color-foreground-icon-inverse-subtle: var(--scania-color-transparent-350);
989
+ --color-foreground-icon-inverse-disabled: var(--scania-color-transparent-250);
990
+ --color-foreground-icon-inverse-discrete: var(--scania-color-transparent-200);
991
+ --color-foreground-icon-accent-default: var(--scania-color-blue-300);
992
+ --color-foreground-icon-accent-visited: var(--scania-color-blue-100);
993
+ --color-foreground-icon-accent-brand: var(--scania-color-grey-00);
994
+ --color-foreground-icon-accent-brand-inverse: var(--scania-color-grey-00);
995
+ --color-brand-neutral-white: var(--scania-color-grey-00);
996
+ --color-brand-neutral-black: var(--scania-color-grey-1000);
997
+ --color-brand-primary-50: var(--scania-color-blue-50);
998
+ --color-brand-primary-100: var(--scania-color-blue-100);
999
+ --color-brand-primary-200: var(--scania-color-blue-200);
1000
+ --color-brand-primary-300: var(--scania-color-blue-300);
1001
+ --color-brand-primary-400: var(--scania-color-blue-400);
1002
+ --color-brand-primary-500: var(--scania-color-blue-500);
1003
+ --color-brand-primary-600: var(--scania-color-blue-600);
1004
+ --color-brand-primary-700: var(--scania-color-blue-700);
1005
+ --color-brand-primary-800: var(--scania-color-blue-800);
1006
+ --color-brand-primary-900: var(--scania-color-blue-900);
1007
+ --color-brand-secondary-50: var(--scania-color-red-50);
1008
+ --color-brand-secondary-100: var(--scania-color-red-100);
1009
+ --color-brand-secondary-200: var(--scania-color-red-200);
1010
+ --color-brand-secondary-300: var(--scania-color-red-300);
1011
+ --color-brand-secondary-400: var(--scania-color-red-400);
1012
+ --color-brand-secondary-500: var(--scania-color-red-500);
1013
+ --color-brand-secondary-600: var(--scania-color-red-600);
1014
+ --color-brand-secondary-700: var(--scania-color-red-700);
1015
+ --color-brand-secondary-800: var(--scania-color-red-800);
1016
+ --color-brand-secondary-900: var(--scania-color-red-900);
1017
+ --component-header-color-expressive-mobile-menu-primary: var(--scania-color-blue-900);
1018
+ --component-header-color-expressive-mobile-menu-focus: var(--scania-color-blue-900);
1019
+ --component-header-color-expressive-mobile-menu-pressed: var(--scania-color-blue-800);
1020
+ --component-header-color-expressive-mobile-menu-selected: var(--scania-color-blue-800);
1021
+ --component-header-color-expressive-mobile-menu-selected-expressive: var(--scania-color-blue-900);
1022
+ --component-header-color-background: var(--scania-color-blue-900);
1023
+ --component-header-color-dropdown-hover: var(--traton-color-blue-900);
1024
+ --component-header-color-dropdown-focus: var(--traton-color-blue-1000);
1025
+ --component-header-color-dropdown-font-family: var(--scania-font-family-semi-condensed);
1026
+ --component-header-color-dropdown-font-weight: var(--scania-font-weight-bold);
1027
+ --component-header-text-component-title-01-menu-font-family: var(--scania-font-family-semi-condensed);
1028
+ --component-header-text-component-title-01-menu-font-weight: var(--scania-font-weight-regular);
1029
+ --component-header-text-application-name-font-family: var(--scania-font-family-display);
1030
+ --component-header-text-application-name-font-weight: var(--scania-font-weight-regular);
1031
+ --component-side-menu-states-default: var(--scania-color-grey-950);
1032
+ --component-side-menu-states-hover: var(--scania-color-grey-900);
1033
+ --component-side-menu-states-pressed: var(--scania-color-grey-850);
1034
+ --component-side-menu-states-focus: var(--scania-color-grey-950);
1035
+ --component-side-menu-states-selected: var(--scania-color-grey-900);
1036
+ --component-side-menu-icons-icon-size: var(--scania-unit-16);
1037
+ --component-side-menu-icons-close-icon-size: var(--scania-unit-20);
1038
+ --component-side-menu-padding-sub-menu-item-top-and-bottom: var(--scania-unit-8);
1039
+ --component-side-menu-padding-sub-menu-item-left: var(--scania-unit-12);
1040
+ --component-side-menu-padding-sub-menu-item-profile-left: var(--scania-unit-4);
1041
+ --component-side-menu-padding-sub-menu-item-profile-gap: var(--scania-unit-12);
1042
+ --component-side-menu-padding-sub-menu-item-profile-top-bottom: var(--scania-unit-4);
1043
+ --component-side-menu-padding-top-level-left: var(--scania-unit-16);
1044
+ --component-side-menu-padding-top-level-horizontal-gap-padding: var(--scania-unit-4);
1045
+ --component-side-menu-padding-top-level-bottom-collapsible: var(--scania-unit-16);
1046
+ --component-side-menu-padding-sub-page-top-bottom: var(--scania-unit-8);
1047
+ --component-side-menu-padding-sub-page-left-with-icon: var(--scania-unit-40);
1048
+ --component-side-menu-padding-sub-page-left-profile: var(--scania-unit-48);
1049
+ --component-side-menu-padding-sub-page-top-group: var(--scania-unit-4);
1050
+ --component-side-menu-padding-sub-page-selected-marker-width: var(--scania-unit-8);
1051
+ --component-side-menu-radius-corner-radius: var(--scania-unit-8);
1052
+ --component-footer-primary: var(--scania-color-blue-900);
1053
+ --component-footer-border: var(--scania-color-blue-800);
1054
+ --component-card-padding-padding: var(--scania-unit-16);
1055
+ --component-shadow-hover: var(--scania-color-transparent-invisible-dark);
1056
+ --component-shadow-default: var(--scania-color-transparent-invisible-dark);
1057
+ --component-shadow-pressed: var(--scania-color-transparent-invisible-dark);
1058
+ --component-shadow-dragged: var(--scania-color-transparent-invisible-dark);
1059
+ --component-shadow-base-modifier: var(--scania-color-transparent-invisible-dark);
1060
+ --component-shadow-focus: var(--scania-color-transparent-invisible-dark);
1061
+ --component-text-detail-01-bold-font-family: var(--scania-font-family-semi-condensed);
1062
+ --component-text-detail-01-bold-font-weight: var(--scania-font-weight-bold);
1063
+ --component-input-field-radius-top-left: var(--scania-unit-4);
1064
+ --component-input-field-radius-top-right: var(--scania-unit-4);
1065
+ --component-input-field-radius-bottom-left: var(--scania-unit-0);
1066
+ --component-input-field-radius-bottom-right: var(--scania-unit-0);
1067
+ --component-input-field-border-width-top: var(--scania-unit-0);
1068
+ --component-input-field-border-width-right: var(--scania-unit-0);
1069
+ --component-input-field-border-width-bottom: var(--scania-unit-1);
1070
+ --component-input-field-border-width-left: var(--scania-unit-0);
1071
+ --component-input-field-border-focus-top: var(--scania-unit-0);
1072
+ --component-input-field-border-focus-right: var(--scania-unit-0);
1073
+ --component-input-field-border-focus-bottom: var(--scania-unit-2);
1074
+ --component-input-field-border-focus-left: var(--scania-unit-0);
1075
+ --text-display-01-font-family: var(--scania-font-family-display);
1076
+ --text-display-01-font-weight: var(--scania-font-weight-bold);
1077
+ --text-display-02-font-family: var(--scania-font-family-display);
1078
+ --text-display-02-font-weight: var(--scania-font-weight-bold);
1079
+ --text-display-03-font-family: var(--scania-font-family-display);
1080
+ --text-display-03-font-weight: var(--scania-font-weight-bold);
1081
+ --text-display-04-font-family: var(--scania-font-family-display);
1082
+ --text-display-04-font-weight: var(--scania-font-weight-bold);
1083
+ --text-display-05-font-family: var(--scania-font-family-display);
1084
+ --text-display-05-font-weight: var(--scania-font-weight-bold);
1085
+ --text-headline-01-font-family: var(--scania-font-family-display);
1086
+ --text-headline-01-font-weight: var(--scania-font-weight-bold);
1087
+ --text-headline-02-font-family: var(--scania-font-family-default);
1088
+ --text-headline-02-font-weight: var(--scania-font-weight-bold);
1089
+ --text-headline-03-font-family: var(--scania-font-family-default);
1090
+ --text-headline-03-font-weight: var(--scania-font-weight-bold);
1091
+ --text-headline-04-font-family: var(--scania-font-family-default);
1092
+ --text-headline-04-font-weight: var(--scania-font-weight-bold);
1093
+ --text-headline-05-font-family: var(--scania-font-family-default);
1094
+ --text-headline-05-font-weight: var(--scania-font-weight-bold);
1095
+ --text-headline-06-font-family: var(--scania-font-family-default);
1096
+ --text-headline-06-font-weight: var(--scania-font-weight-bold);
1097
+ --text-paragraph-01-font-family: var(--scania-font-family-default);
1098
+ --text-paragraph-01-font-weight: var(--scania-font-weight-regular);
1099
+ --text-paragraph-02-font-family: var(--scania-font-family-default);
1100
+ --text-paragraph-02-font-weight: var(--scania-font-weight-regular);
1101
+ --text-body-01-font-family: var(--scania-font-family-default);
1102
+ --text-body-01-font-weight: var(--scania-font-weight-regular);
1103
+ --text-body-02-font-family: var(--scania-font-family-default);
1104
+ --text-body-02-font-weight: var(--scania-font-weight-regular);
1105
+ --text-component-text-01-font-family: var(--scania-font-family-semi-condensed);
1106
+ --text-component-text-01-font-weight: var(--scania-font-weight-regular);
1107
+ --text-component-text-02-font-family: var(--scania-font-family-semi-condensed);
1108
+ --text-component-text-02-font-weight: var(--scania-font-weight-regular);
1109
+ --text-component-label-01-font-family: var(--scania-font-family-semi-condensed);
1110
+ --text-component-label-01-font-weight: var(--scania-font-weight-regular);
1111
+ --text-component-label-02-font-family: var(--scania-font-family-semi-condensed);
1112
+ --text-component-label-02-font-weight: var(--scania-font-weight-regular);
1113
+ --text-component-title-01-font-family: var(--scania-font-family-semi-condensed);
1114
+ --text-component-title-01-font-family-2: var(--scania-font-family-semi-condensed);
1115
+ --text-component-title-01-font-weight: var(--scania-font-weight-bold);
1116
+ --text-component-title-01-font-weight-2: var(--scania-font-weight-bold);
1117
+ --text-component-title-02-font-family: var(--scania-font-family-default);
1118
+ --text-component-title-02-font-weight: var(--scania-font-weight-bold);
1119
+ --text-link-01-font-family: var(--scania-font-family-default);
1120
+ --text-link-01-font-weight: var(--scania-font-weight-regular);
1121
+ --text-link-02-font-family: var(--scania-font-family-default);
1122
+ --text-link-02-font-weight: var(--scania-font-weight-regular);
1123
+ --dimension-space-tiny: var(--scania-unit-4);
1124
+ --dimension-space-small: var(--scania-unit-16);
1125
+ --dimension-space-medium: var(--scania-unit-24);
1126
+ --dimension-space-large: var(--scania-unit-48);
1127
+ --dimension-space-huge: var(--scania-unit-80);
1128
+ --dimension-radius-for-surface-clickable: var(--scania-unit-4);
1129
+ --dimension-radius-for-surface-field: var(--scania-unit-4);
1130
+ --dimension-radius-for-surface-inverse: var(--scania-unit-9999);
1131
+ --dimension-radius-narrow: var(--scania-unit-4);
1132
+ --dimension-radius-soft: var(--scania-unit-8);
1133
+ --dimension-radius-rounded: var(--scania-unit-32);
1134
+ --dimension-radius-circle: var(--scania-unit-9999);
1135
+ --dimension-radius-for-area-large: var(--scania-unit-16);
1136
+ --dimension-radius-for-area-small: var(--scania-unit-2);
1137
+ --dimension-radius-focus-width: var(--traton-unit-2);
1138
+ --component-header-color-foreground-strong: var(--color-brand-neutral-white);
1139
+ --component-header-color-foreground-selected: var(--color-foreground-icon-strong);
1140
+ --component-header-color-foreground-defined: var(--color-foreground-text-defined);
1141
+ --component-side-menu-dividers-default: var(--color-foreground-border-discrete);
1142
+ --component-table-secondary-cell: var(--color-background-layer-02);
1143
+ --component-table-pagination-dropdown: var(--color-background-layer-01);
1144
+ --component-table-pagination-base: var(--color-background-surface-200);
1145
+ --component-table-cell-hover: var(--color-background-surface-100);
1146
+ --component-table-cell: var(--color-background-layer-01);
1147
+ --component-stepper-success: var(--color-system-success-default);
1148
+ --component-spinner-color: var(--color-system-info-default);
1149
+ --component-footer-text-color-copyright: var(--color-foreground-text-soft);
1150
+ --component-footer-text-color-link-text: var(--color-brand-primary-50);
1151
+ --component-dropdown-list-item-secondary-hover: var(--color-background-layer-03);
1152
+ --component-dropdown-list-item-secondary-focus: var(--color-background-layer-03);
1153
+ --component-dropdown-list-item-focus: var(--color-background-layer-02);
1154
+ --component-dropdown-list-item-hover: var(--color-background-layer-02);
1155
+ --component-dropdown-secondary-hover: var(--color-background-layer-03);
1156
+ --component-dropdown-secondary-focus: var(--color-background-layer-03);
1157
+ --component-dropdown-focus: var(--color-background-layer-02);
1158
+ --component-dropdown-hover: var(--color-background-layer-02);
1159
+ --component-badge-text: var(--color-brand-neutral-white);
1160
+ --component-badge-background: var(--color-system-danger-subtle);
1161
+ --component-button-primary-text: var(--color-brand-neutral-white);
1162
+ --component-card-secondary: var(--color-background-layer-02);
1163
+ --component-card-primary: var(--color-background-layer-01);
1164
+ --component-chip-color-focused-on-selected: var(--color-system-info-discrete);
1165
+ --component-chip-color-disabled: var(--color-background-surface-400);
1166
+ --component-chip-color-focused: var(--color-background-layer-01);
1167
+ --component-chip-color-hover: var(--color-background-surface-600);
1168
+ --component-chip-color-selected: var(--color-brand-primary-400);
1169
+ --component-chip-color-disabled-selected: var(--color-brand-primary-400);
1170
+ --component-chip-color-hover-on-selected: var(--color-system-info-default);
1171
+ --component-chip-color-default: var(--color-background-surface-400);
1172
+ --component-chip-foreground-inverse: var(--color-foreground-text-strong);
1173
+ --component-chip-foreground-foreground-disabled-selected: var(--color-foreground-text-subtle);
1174
+ --component-chip-border-selected-focus-border: var(--color-system-info-default);
1175
+ --component-logo-fill: var(--color-brand-neutral-white);
1176
+ --component-cookie-primary-text-inverse: var(--color-brand-neutral-white);
1177
+ }
1178
+
347
1179
  /* Multibrand tokens: Scania typography */
348
1180
  /* Scania Typography Usage Tokens */
349
1181
  :root,
@@ -508,7 +1340,6 @@
508
1340
 
509
1341
  /* Multibrand tokens: Scania spacing */
510
1342
  :root {
511
- /* Base spacing units */
512
1343
  --unit-2: 2px;
513
1344
  --unit-4: 4px;
514
1345
  --unit-8: 8px;
@@ -5780,23 +6611,23 @@ html {
5780
6611
 
5781
6612
  :root,
5782
6613
  .tds-mode-light {
5783
- --tds-btn-primary-background: var(--tds-blue-600);
6614
+ --tds-btn-primary-background: var(--background-clickable-primary-primary);
6615
+ --tds-btn-primary-background-hover: var(--background-clickable-primary-primary-hover);
6616
+ --tds-btn-primary-background-active: var(--background-clickable-primary-pressed);
6617
+ --tds-btn-primary-background-focus: var(--background-clickable-primary-focus);
6618
+ --tds-btn-primary-background-disabled-primary: var(--background-clickable-primary-disabled);
6619
+ --tds-btn-primary-background-disabled-secondary: var(--tds-white);
6620
+ --tds-btn-primary-background-disabled: var(--tds-btn-primary-background-disabled-primary);
5784
6621
  --tds-btn-primary-color: var(--tds-white);
5785
- --tds-btn-primary-border-color: transparent;
5786
- --tds-btn-primary-background-hover: var(--tds-blue-500);
5787
6622
  --tds-btn-primary-color-hover: var(--tds-white);
5788
- --tds-btn-primary-border-color-hover: transparent;
5789
- --tds-btn-primary-background-active: var(--tds-blue-700);
5790
6623
  --tds-btn-primary-color-active: var(--tds-white);
5791
- --tds-btn-primary-border-color-active: var(--tds-blue-700);
5792
- --tds-btn-primary-background-focus: var(--tds-blue-400);
5793
6624
  --tds-btn-primary-color-focus: var(--tds-white);
6625
+ --tds-btn-primary-color-disabled: var(--tds-grey-400);
6626
+ --tds-btn-primary-border-color: transparent;
6627
+ --tds-btn-primary-border-color-hover: transparent;
6628
+ --tds-btn-primary-border-color-active: var(--tds-blue-700);
5794
6629
  --tds-btn-primary-border-color-focus: var(--tds-blue-600);
5795
6630
  --tds-btn-primary-outline-color-focus: var(--tds-blue-600);
5796
- --tds-btn-primary-background-disabled-primary: var(--tds-grey-50);
5797
- --tds-btn-primary-background-disabled-secondary: var(--tds-white);
5798
- --tds-btn-primary-background-disabled: var(--tds-btn-primary-background-disabled-primary);
5799
- --tds-btn-primary-color-disabled: var(--tds-grey-400);
5800
6631
  --tds-btn-primary-border-color-disabled: transparent;
5801
6632
  /* ICON */
5802
6633
  --tds-btn-icon-primary-fill: var(--tds-grey-50);