@scania/tegel-lite 0.1.0-var-batch-4-beta.0 → 0.1.0-var-batch-4-beta.1

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 (8) hide show
  1. package/dist/components.css +261 -44
  2. package/dist/global.css +8 -1
  3. package/dist/tl-breadcrumbs.css +51 -5
  4. package/dist/tl-chip.css +8 -8
  5. package/dist/tl-divider.css +61 -3
  6. package/dist/tl-footer.css +35 -15
  7. package/dist/tl-link.css +106 -13
  8. package/package.json +1 -1
package/dist/components.css CHANGED
@@ -531,15 +531,61 @@
531
531
  text-transform: var(--detail-03-text-transform);
532
532
  }
533
533
 
534
+ /**
535
+ * Do not edit directly, this file was auto-generated.
536
+ */
537
+ :root,
538
+ .tds-mode-light,
539
+ .scania .tds-mode-light,
540
+ .scania.tds-mode-light,
541
+ .scania .tl-mode-light,
542
+ .scania.tl-mode-light {
543
+ --component-breadcrumbs-text-link-default: var(--color-text-strong);
544
+ --component-breadcrumbs-text-link-hover: var(--color-text-strong);
545
+ --component-breadcrumbs-text-current-default: var(--color-text-soft);
546
+ --component-breadcrumbs-text-separator-default: var(--color-text-strong);
547
+ }
548
+
549
+ .traton .tds-mode-light,
550
+ .traton.tds-mode-light,
551
+ .traton .tl-mode-light,
552
+ .traton.tl-mode-light {
553
+ --component-breadcrumbs-text-link-default: var(--color-text-strong);
554
+ --component-breadcrumbs-text-link-hover: var(--color-text-strong);
555
+ --component-breadcrumbs-text-current-default: var(--color-text-soft);
556
+ --component-breadcrumbs-text-separator-default: var(--color-text-strong);
557
+ }
558
+
559
+ .tds-mode-dark,
560
+ .scania .tds-mode-dark,
561
+ .scania.tds-mode-dark,
562
+ .scania .tl-mode-dark,
563
+ .scania.tl-mode-dark {
564
+ --component-breadcrumbs-text-link-default: var(--color-text-strong);
565
+ --component-breadcrumbs-text-link-hover: var(--color-text-strong);
566
+ --component-breadcrumbs-text-current-default: var(--color-text-soft);
567
+ --component-breadcrumbs-text-separator-default: var(--color-text-strong);
568
+ }
569
+
570
+ .traton .tds-mode-dark,
571
+ .traton.tds-mode-dark,
572
+ .traton .tl-mode-dark,
573
+ .traton.tl-mode-dark {
574
+ --component-breadcrumbs-text-link-default: var(--color-text-strong);
575
+ --component-breadcrumbs-text-link-hover: var(--color-text-strong);
576
+ --component-breadcrumbs-text-current-default: var(--color-text-soft);
577
+ --component-breadcrumbs-text-separator-default: var(--color-text-strong);
578
+ }
579
+
534
580
  .tl-breadcrumbs {
535
- --breadcrumb-label: var(--color-foreground-text-strong);
536
- --breadcrumb-hover: var(--color-foreground-text-strong);
537
- --breadcrumb-current: var(--color-foreground-text-subtle);
538
- --breadcrumb-separator-color: var(--color-foreground-text-strong);
581
+ --breadcrumb-label: var(--component-breadcrumbs-text-link-default);
582
+ --breadcrumb-hover: var(--component-breadcrumbs-text-link-hover);
583
+ --breadcrumb-current: var(--component-breadcrumbs-text-current-default);
584
+ --breadcrumb-separator-color: var(--component-breadcrumbs-text-separator-default);
539
585
  --breadcrumb-separator-margin: 4px;
540
586
  --breadcrumb-separator-width: 4px;
541
587
  --breadcrumb-separator-height: 8px;
542
- --breadcrumb-focus-outline-color: var(--color-foreground-border-accent-focus);
588
+ --breadcrumb-focus-outline-color: var(--color-system-info-default);
543
589
  --breadcrumb-focus-outline-width: 2px;
544
590
  }
545
591
 
@@ -1709,21 +1755,21 @@
1709
1755
  }
1710
1756
 
1711
1757
  .tl-chip {
1712
- --chip-text: var(--component-chip-text-default);
1758
+ --chip-text: var(--component-chip-text-standard-default);
1713
1759
  --chip-text-active: var(--component-chip-text-selected-default);
1714
- --chip-background: var(--component-chip-background-default);
1715
- --chip-background-hover: var(--component-chip-background-hover);
1716
- --chip-background-focus: var(--component-chip-background-hover);
1760
+ --chip-background: var(--component-chip-background-standard-default);
1761
+ --chip-background-hover: var(--component-chip-background-standard-hover);
1762
+ --chip-background-focus: var(--component-chip-background-standard-hover);
1717
1763
  --chip-background-active: var(--component-chip-background-selected-default);
1718
1764
  --chip-background-active-hover: var(--component-chip-background-selected-hover);
1719
1765
  --chip-focused-on-selected: var(--component-chip-background-selected-default);
1720
- --chip-border: var(--component-chip-border-default);
1721
- --chip-border-hover: var(--component-chip-border-hover);
1766
+ --chip-border: var(--component-chip-border-standard-default);
1767
+ --chip-border-hover: var(--component-chip-border-standard-hover);
1722
1768
  --chip-border-selected: var(--component-chip-border-selected-default);
1723
1769
  --chip-border-selected-hover: var(--component-chip-border-selected-hover);
1724
1770
  --chip-border-radius: calc(var(--component-chip-border-radius-default) * 1px);
1725
- --chip-opacity-disabled: var(--component-chip-opacity-disabled);
1726
- --chip-icon-fill: var(--component-chip-text-default);
1771
+ --chip-opacity-disabled: calc(var(--component-chip-opacity-disabled) / 100);
1772
+ --chip-icon-fill: var(--component-chip-text-standard-default);
1727
1773
  --chip-icon-fill-active: var(--component-chip-text-selected-default);
1728
1774
  }
1729
1775
 
@@ -2223,10 +2269,68 @@
2223
2269
  color: var(--color-foreground-text-disabled);
2224
2270
  }
2225
2271
 
2272
+ /**
2273
+ * Do not edit directly, this file was auto-generated.
2274
+ */
2275
+ :root,
2276
+ .tds-mode-light,
2277
+ .scania .tds-mode-light,
2278
+ .scania.tds-mode-light,
2279
+ .scania .tl-mode-light,
2280
+ .scania.tl-mode-light {
2281
+ --component-divider-border-discrete-default: var(--scania-color-grey-200);
2282
+ --component-divider-border-subtle-default: var(--scania-color-grey-350);
2283
+ --component-divider-border-soft-default: var(--scania-color-grey-500);
2284
+ --component-divider-border-defined-default: var(--scania-color-grey-650);
2285
+ --component-divider-border-strong-default: var(--color-border-strong);
2286
+ --component-divider-border-expressive-default: var(--scania-color-blue-700);
2287
+ }
2288
+
2289
+ .traton .tds-mode-light,
2290
+ .traton.tds-mode-light,
2291
+ .traton .tl-mode-light,
2292
+ .traton.tl-mode-light {
2293
+ --component-divider-border-discrete-default: var(--color-border-discrete);
2294
+ --component-divider-border-subtle-default: var(--color-border-subtle);
2295
+ --component-divider-border-soft-default: var(--color-border-soft);
2296
+ --component-divider-border-defined-default: var(--color-border-defined);
2297
+ --component-divider-border-strong-default: var(--color-border-strong);
2298
+ --component-divider-border-expressive-default: var(--component-divider-border-strong-default);
2299
+ }
2300
+
2301
+ .tds-mode-dark,
2302
+ .scania .tds-mode-dark,
2303
+ .scania.tds-mode-dark,
2304
+ .scania .tl-mode-dark,
2305
+ .scania.tl-mode-dark {
2306
+ --component-divider-border-discrete-default: var(--color-border-discrete);
2307
+ --component-divider-border-subtle-default: var(--color-border-subtle);
2308
+ --component-divider-border-soft-default: var(--color-border-soft);
2309
+ --component-divider-border-defined-default: var(--color-border-defined);
2310
+ --component-divider-border-strong-default: var(--color-border-strong);
2311
+ --component-divider-border-expressive-default: var(--scania-color-blue-800);
2312
+ }
2313
+
2314
+ .traton .tds-mode-dark,
2315
+ .traton.tds-mode-dark,
2316
+ .traton .tl-mode-dark,
2317
+ .traton.tl-mode-dark {
2318
+ --component-divider-border-discrete-default: var(--color-border-discrete);
2319
+ --component-divider-border-subtle-default: var(--color-border-subtle);
2320
+ --component-divider-border-soft-default: var(--color-border-soft);
2321
+ --component-divider-border-defined-default: var(--color-border-defined);
2322
+ --component-divider-border-strong-default: var(--color-border-strong);
2323
+ --component-divider-border-expressive-default: var(--component-divider-border-strong-default);
2324
+ }
2325
+
2226
2326
  .tl-divider {
2227
- --divider-background: var(--color-foreground-border-discrete);
2228
- --divider-background-strong: var(--color-foreground-border-strong);
2229
- --divider-background-discrete: var(--color-foreground-border-discrete);
2327
+ --divider-background: var(--component-divider-border-discrete-default);
2328
+ --divider-background-discrete: var(--component-divider-border-discrete-default);
2329
+ --divider-background-subtle: var(--component-divider-border-subtle-default);
2330
+ --divider-background-soft: var(--component-divider-border-soft-default);
2331
+ --divider-background-defined: var(--component-divider-border-defined-default);
2332
+ --divider-background-strong: var(--component-divider-border-strong-default);
2333
+ --divider-background-expressive: var(--component-divider-border-expressive-default);
2230
2334
  }
2231
2335
 
2232
2336
  .tl-divider {
@@ -3253,18 +3357,18 @@ body {
3253
3357
  }
3254
3358
 
3255
3359
  .tl-footer {
3256
- --footer-top-background-primary: var(--color-background-layer-01);
3257
- --footer-top-background-secondary: var(--color-background-base);
3258
- --footer-top-background: var(--color-background-layer-01);
3259
- --footer-top-divider: var(--color-foreground-border-discrete);
3260
- --footer-top-links-desktop: var(--color-foreground-text-subtle);
3261
- --footer-top-links: var(--component-footer-text-color-link-text);
3262
- --footer-top-links-background-hover: var(--color-background-surface-300);
3263
- --footer-top-button-active: var(--color-background-surface-300);
3264
- --footer-main-background: var(--component-footer-primary);
3265
- --footer-main-links: var(--color-foreground-text-accent-brand);
3266
- --footer-main-divider: var(--component-footer-border);
3267
- --footer-main-copyright: var(--component-footer-text-color-copyright);
3360
+ --footer-top-background-primary: var(--component-footer-background-top-default);
3361
+ --footer-top-background-secondary: var(--component-footer-background-top-secondary);
3362
+ --footer-top-background: var(--component-footer-background-top-default);
3363
+ --footer-top-divider: var(--color-border-discrete);
3364
+ --footer-top-links-desktop: var(--component-footer-text-title-default);
3365
+ --footer-top-links: var(--component-footer-text-link-default);
3366
+ --footer-top-links-background-hover: var(--component-footer-background-list-item-active);
3367
+ --footer-top-button-active: var(--component-footer-background-list-item-active);
3368
+ --footer-main-background: var(--component-footer-background-main-default);
3369
+ --footer-main-links: var(--component-footer-text-inverse-link-default);
3370
+ --footer-main-divider: var(--component-footer-border-divider-default);
3371
+ --footer-main-copyright: var(--component-footer-text-copyright-default);
3268
3372
  }
3269
3373
  .tl-footer.tl-footer--primary {
3270
3374
  --footer-top-background: var(--footer-top-background-primary);
@@ -3273,6 +3377,26 @@ body {
3273
3377
  --footer-top-background: var(--footer-top-background-secondary);
3274
3378
  }
3275
3379
 
3380
+ .scania .tl-footer {
3381
+ --component-footer-logotype-local: var(--tds-background-image-scania-wordmark-white-svg-local);
3382
+ --component-footer-logotype-cdn: var(--tds-background-image-scania-wordmark-white-svg);
3383
+ }
3384
+
3385
+ .traton .tl-mode-dark .tl-footer {
3386
+ --component-footer-logotype-local: var(--traton-logotype-white-svg-local);
3387
+ --component-footer-logotype-cdn: var(--traton-logotype-white-svg);
3388
+ }
3389
+
3390
+ .traton .tl-mode-light .tl-footer {
3391
+ --component-footer-logotype-local: var(--traton-logotype-black-svg-local);
3392
+ --component-footer-logotype-cdn: var(--traton-logotype-black-svg);
3393
+ }
3394
+
3395
+ .traton .tl-footer {
3396
+ --component-footer-logotype-local: var(--traton-logotype-black-svg-local);
3397
+ --component-footer-logotype-cdn: var(--traton-logotype-black-svg);
3398
+ }
3399
+
3276
3400
  .tl-footer__group {
3277
3401
  display: block;
3278
3402
  }
@@ -3314,7 +3438,7 @@ body {
3314
3438
  text-decoration: underline;
3315
3439
  }
3316
3440
  .tl-footer__link:focus-visible {
3317
- outline: var(--dimension-radius-focus-width) solid var(--color-foreground-border-accent-focus);
3441
+ outline: var(--dimension-radius-focus-width) solid var(--color-system-info-default);
3318
3442
  box-shadow: 0 0 0 1px var(--color-brand-neutral-white);
3319
3443
  outline-offset: 1px;
3320
3444
  z-index: 1;
@@ -3374,7 +3498,7 @@ body {
3374
3498
  background-color: var(--footer-top-button-active);
3375
3499
  }
3376
3500
  .tl-footer__top-title:focus-visible {
3377
- outline: var(--dimension-radius-focus-width) solid var(--color-foreground-border-accent-focus);
3501
+ outline: var(--dimension-radius-focus-width) solid var(--color-system-info-default);
3378
3502
  box-shadow: 0 0 0 1px var(--color-brand-neutral-white);
3379
3503
  outline-offset: -2px;
3380
3504
  z-index: 1;
@@ -3395,7 +3519,7 @@ body {
3395
3519
  text-decoration: none;
3396
3520
  }
3397
3521
  .tl-footer__main .tl-footer__link:focus-visible {
3398
- outline: var(--dimension-radius-focus-width) solid var(--color-foreground-border-accent-focus);
3522
+ outline: var(--dimension-radius-focus-width) solid var(--color-system-info-default);
3399
3523
  box-shadow: 0 0 0 1px var(--color-brand-neutral-white);
3400
3524
  outline-offset: 1px;
3401
3525
  z-index: 1;
@@ -5645,14 +5769,112 @@ body {
5645
5769
  height: 96px;
5646
5770
  }
5647
5771
 
5772
+ /**
5773
+ * Do not edit directly, this file was auto-generated.
5774
+ */
5775
+ :root,
5776
+ .tds-mode-light,
5777
+ .scania .tds-mode-light,
5778
+ .scania.tds-mode-light,
5779
+ .scania .tl-mode-light,
5780
+ .scania.tl-mode-light {
5781
+ --component-link-icon-accent-default: var(--scania-color-blue-400);
5782
+ --component-link-icon-accent-hover: var(--scania-color-blue-400);
5783
+ --component-link-icon-accent-active: var(--scania-color-blue-600);
5784
+ --component-link-icon-accent-visited: var(--scania-color-blue-600);
5785
+ --component-link-icon-standard-default: var(--color-text-strong);
5786
+ --component-link-icon-standard-hover: var(--color-text-defined);
5787
+ --component-link-icon-standard-active: var(--color-text-soft);
5788
+ --component-link-icon-standard-visited: var(--color-text-strong);
5789
+ --component-link-opacity-disabled: var(--scania-opacity-25);
5790
+ --component-link-text-accent-default: var(--scania-color-blue-400);
5791
+ --component-link-text-accent-hover: var(--scania-color-blue-400);
5792
+ --component-link-text-accent-active: var(--scania-color-blue-600);
5793
+ --component-link-text-accent-visited: var(--scania-color-blue-600);
5794
+ --component-link-text-standard-default: var(--color-text-strong);
5795
+ --component-link-text-standard-hover: var(--color-text-defined);
5796
+ --component-link-text-standard-active: var(--color-text-soft);
5797
+ --component-link-text-standard-visited: var(--color-text-strong);
5798
+ }
5799
+
5800
+ .traton .tds-mode-light,
5801
+ .traton.tds-mode-light,
5802
+ .traton .tl-mode-light,
5803
+ .traton.tl-mode-light {
5804
+ --component-link-icon-accent-default: var(--traton-color-blue-700);
5805
+ --component-link-icon-accent-hover: var(--traton-color-blue-700);
5806
+ --component-link-icon-accent-active: var(--traton-color-blue-950);
5807
+ --component-link-icon-accent-visited: var(--traton-color-blue-950);
5808
+ --component-link-icon-standard-default: var(--color-text-strong);
5809
+ --component-link-icon-standard-hover: var(--color-text-defined);
5810
+ --component-link-icon-standard-active: var(--color-text-soft);
5811
+ --component-link-icon-standard-visited: var(--color-text-strong);
5812
+ --component-link-opacity-disabled: var(--traton-opacity-25);
5813
+ --component-link-text-accent-default: var(--traton-color-blue-700);
5814
+ --component-link-text-accent-hover: var(--traton-color-blue-700);
5815
+ --component-link-text-accent-active: var(--traton-color-blue-950);
5816
+ --component-link-text-accent-visited: var(--traton-color-blue-950);
5817
+ --component-link-text-standard-default: var(--color-text-strong);
5818
+ --component-link-text-standard-hover: var(--color-text-defined);
5819
+ --component-link-text-standard-active: var(--color-text-soft);
5820
+ --component-link-text-standard-visited: var(--color-text-strong);
5821
+ }
5822
+
5823
+ .tds-mode-dark,
5824
+ .scania .tds-mode-dark,
5825
+ .scania.tds-mode-dark,
5826
+ .scania .tl-mode-dark,
5827
+ .scania.tl-mode-dark {
5828
+ --component-link-icon-accent-default: var(--scania-color-blue-300);
5829
+ --component-link-icon-accent-hover: var(--scania-color-blue-300);
5830
+ --component-link-icon-accent-active: var(--scania-color-blue-100);
5831
+ --component-link-icon-accent-visited: var(--scania-color-blue-100);
5832
+ --component-link-icon-standard-default: var(--color-text-strong);
5833
+ --component-link-icon-standard-hover: var(--color-text-defined);
5834
+ --component-link-icon-standard-active: var(--color-text-soft);
5835
+ --component-link-icon-standard-visited: var(--color-text-strong);
5836
+ --component-link-opacity-disabled: var(--scania-opacity-25);
5837
+ --component-link-text-accent-default: var(--scania-color-blue-300);
5838
+ --component-link-text-accent-hover: var(--scania-color-blue-300);
5839
+ --component-link-text-accent-active: var(--scania-color-blue-100);
5840
+ --component-link-text-accent-visited: var(--scania-color-blue-100);
5841
+ --component-link-text-standard-default: var(--color-text-strong);
5842
+ --component-link-text-standard-hover: var(--color-text-defined);
5843
+ --component-link-text-standard-active: var(--color-text-soft);
5844
+ --component-link-text-standard-visited: var(--color-text-strong);
5845
+ }
5846
+
5847
+ .traton .tds-mode-dark,
5848
+ .traton.tds-mode-dark,
5849
+ .traton .tl-mode-dark,
5850
+ .traton.tl-mode-dark {
5851
+ --component-link-icon-accent-default: var(--traton-color-blue-400);
5852
+ --component-link-icon-accent-hover: var(--traton-color-blue-400);
5853
+ --component-link-icon-accent-active: var(--traton-color-blue-150);
5854
+ --component-link-icon-accent-visited: var(--traton-color-blue-150);
5855
+ --component-link-icon-standard-default: var(--color-text-strong);
5856
+ --component-link-icon-standard-hover: var(--color-text-defined);
5857
+ --component-link-icon-standard-active: var(--color-text-soft);
5858
+ --component-link-icon-standard-visited: var(--color-text-strong);
5859
+ --component-link-opacity-disabled: var(--traton-opacity-25);
5860
+ --component-link-text-accent-default: var(--traton-color-blue-400);
5861
+ --component-link-text-accent-hover: var(--traton-color-blue-400);
5862
+ --component-link-text-accent-active: var(--traton-color-blue-150);
5863
+ --component-link-text-accent-visited: var(--traton-color-blue-150);
5864
+ --component-link-text-standard-default: var(--color-text-strong);
5865
+ --component-link-text-standard-hover: var(--color-text-defined);
5866
+ --component-link-text-standard-active: var(--color-text-soft);
5867
+ --component-link-text-standard-visited: var(--color-text-strong);
5868
+ }
5869
+
5648
5870
  /* Component variables */
5649
5871
  .tl-link {
5650
- --link: var(--color-foreground-text-accent-default);
5651
- --link-hover: var(--color-foreground-text-accent-default);
5872
+ --link: var(--component-link-text-accent-default);
5873
+ --link-hover: var(--component-link-text-accent-hover);
5652
5874
  --link-focus-outline-width: 2px;
5653
- --link-visited: var(--color-foreground-text-accent-visited);
5654
- --link-disabled: var(--color-foreground-text-disabled);
5655
- --link-focus-outline-color: var(--color-foreground-border-accent-focus);
5875
+ --link-visited: var(--component-link-text-accent-visited);
5876
+ --link-opacity-disabled: calc(var(--component-link-opacity-disabled) / 100);
5877
+ --link-focus-outline-color: var(--color-system-info-default);
5656
5878
  }
5657
5879
 
5658
5880
  .tl-banner .tl-link {
@@ -5661,11 +5883,11 @@ body {
5661
5883
 
5662
5884
  .tl-toast .tl-link {
5663
5885
  --link: var(--color-system-info-default);
5664
- --link-hover: var(--color-foreground-text-accent-default);
5886
+ --link-hover: var(--color-system-info-default);
5665
5887
  }
5666
5888
 
5667
5889
  .traton .tl-link {
5668
- --link-focus-outline-width: 4px;
5890
+ --link-focus-outline-width: 2px;
5669
5891
  }
5670
5892
 
5671
5893
  .tl-link-text {
@@ -5706,15 +5928,10 @@ body {
5706
5928
  text-decoration-color: var(--link-visited);
5707
5929
  }
5708
5930
  .tl-link--disabled {
5709
- color: var(--link-disabled);
5710
- text-decoration-color: var(--link-disabled);
5931
+ opacity: var(--link-opacity-disabled);
5711
5932
  pointer-events: none;
5712
5933
  cursor: not-allowed;
5713
5934
  }
5714
- .tl-link--disabled:visited {
5715
- color: var(--link-disabled);
5716
- text-decoration-color: var(--link-disabled);
5717
- }
5718
5935
  .tl-link--underline {
5719
5936
  text-decoration: underline;
5720
5937
  }
package/dist/global.css CHANGED
@@ -1335,11 +1335,18 @@ html {
1335
1335
  --component-scrollbar-width-radius-hover: 6;
1336
1336
  }
1337
1337
 
1338
- :root {
1338
+ :root,
1339
+ .tl-mode-light,
1340
+ .tds-mode-light {
1339
1341
  --tl-scrollbar-track-color: transparent;
1340
1342
  --tl-scrollbar-thumb-color: var(--component-scrollbar-background-thumb-default);
1341
1343
  }
1342
1344
 
1345
+ .tl-mode-dark,
1346
+ .tds-mode-dark {
1347
+ --tl-scrollbar-thumb-color: var(--component-scrollbar-background-thumb-default);
1348
+ }
1349
+
1343
1350
  body {
1344
1351
  font-family: var(--body-01-font-family);
1345
1352
  font-size: 14px;
package/dist/tl-breadcrumbs.css CHANGED
@@ -1,13 +1,59 @@
1
1
  @charset "UTF-8";
2
+ /**
3
+ * Do not edit directly, this file was auto-generated.
4
+ */
5
+ :root,
6
+ .tds-mode-light,
7
+ .scania .tds-mode-light,
8
+ .scania.tds-mode-light,
9
+ .scania .tl-mode-light,
10
+ .scania.tl-mode-light {
11
+ --component-breadcrumbs-text-link-default: var(--color-text-strong);
12
+ --component-breadcrumbs-text-link-hover: var(--color-text-strong);
13
+ --component-breadcrumbs-text-current-default: var(--color-text-soft);
14
+ --component-breadcrumbs-text-separator-default: var(--color-text-strong);
15
+ }
16
+
17
+ .traton .tds-mode-light,
18
+ .traton.tds-mode-light,
19
+ .traton .tl-mode-light,
20
+ .traton.tl-mode-light {
21
+ --component-breadcrumbs-text-link-default: var(--color-text-strong);
22
+ --component-breadcrumbs-text-link-hover: var(--color-text-strong);
23
+ --component-breadcrumbs-text-current-default: var(--color-text-soft);
24
+ --component-breadcrumbs-text-separator-default: var(--color-text-strong);
25
+ }
26
+
27
+ .tds-mode-dark,
28
+ .scania .tds-mode-dark,
29
+ .scania.tds-mode-dark,
30
+ .scania .tl-mode-dark,
31
+ .scania.tl-mode-dark {
32
+ --component-breadcrumbs-text-link-default: var(--color-text-strong);
33
+ --component-breadcrumbs-text-link-hover: var(--color-text-strong);
34
+ --component-breadcrumbs-text-current-default: var(--color-text-soft);
35
+ --component-breadcrumbs-text-separator-default: var(--color-text-strong);
36
+ }
37
+
38
+ .traton .tds-mode-dark,
39
+ .traton.tds-mode-dark,
40
+ .traton .tl-mode-dark,
41
+ .traton.tl-mode-dark {
42
+ --component-breadcrumbs-text-link-default: var(--color-text-strong);
43
+ --component-breadcrumbs-text-link-hover: var(--color-text-strong);
44
+ --component-breadcrumbs-text-current-default: var(--color-text-soft);
45
+ --component-breadcrumbs-text-separator-default: var(--color-text-strong);
46
+ }
47
+
2
48
  .tl-breadcrumbs {
3
- --breadcrumb-label: var(--color-foreground-text-strong);
4
- --breadcrumb-hover: var(--color-foreground-text-strong);
5
- --breadcrumb-current: var(--color-foreground-text-subtle);
6
- --breadcrumb-separator-color: var(--color-foreground-text-strong);
49
+ --breadcrumb-label: var(--component-breadcrumbs-text-link-default);
50
+ --breadcrumb-hover: var(--component-breadcrumbs-text-link-hover);
51
+ --breadcrumb-current: var(--component-breadcrumbs-text-current-default);
52
+ --breadcrumb-separator-color: var(--component-breadcrumbs-text-separator-default);
7
53
  --breadcrumb-separator-margin: 4px;
8
54
  --breadcrumb-separator-width: 4px;
9
55
  --breadcrumb-separator-height: 8px;
10
- --breadcrumb-focus-outline-color: var(--color-foreground-border-accent-focus);
56
+ --breadcrumb-focus-outline-color: var(--color-system-info-default);
11
57
  --breadcrumb-focus-outline-width: 2px;
12
58
  }
13
59
 
package/dist/tl-chip.css CHANGED
@@ -1,20 +1,20 @@
1
1
  /* Typography Usage mixins */
2
2
  .tl-chip {
3
- --chip-text: var(--component-chip-text-default);
3
+ --chip-text: var(--component-chip-text-standard-default);
4
4
  --chip-text-active: var(--component-chip-text-selected-default);
5
- --chip-background: var(--component-chip-background-default);
6
- --chip-background-hover: var(--component-chip-background-hover);
7
- --chip-background-focus: var(--component-chip-background-hover);
5
+ --chip-background: var(--component-chip-background-standard-default);
6
+ --chip-background-hover: var(--component-chip-background-standard-hover);
7
+ --chip-background-focus: var(--component-chip-background-standard-hover);
8
8
  --chip-background-active: var(--component-chip-background-selected-default);
9
9
  --chip-background-active-hover: var(--component-chip-background-selected-hover);
10
10
  --chip-focused-on-selected: var(--component-chip-background-selected-default);
11
- --chip-border: var(--component-chip-border-default);
12
- --chip-border-hover: var(--component-chip-border-hover);
11
+ --chip-border: var(--component-chip-border-standard-default);
12
+ --chip-border-hover: var(--component-chip-border-standard-hover);
13
13
  --chip-border-selected: var(--component-chip-border-selected-default);
14
14
  --chip-border-selected-hover: var(--component-chip-border-selected-hover);
15
15
  --chip-border-radius: calc(var(--component-chip-border-radius-default) * 1px);
16
- --chip-opacity-disabled: var(--component-chip-opacity-disabled);
17
- --chip-icon-fill: var(--component-chip-text-default);
16
+ --chip-opacity-disabled: calc(var(--component-chip-opacity-disabled) / 100);
17
+ --chip-icon-fill: var(--component-chip-text-standard-default);
18
18
  --chip-icon-fill-active: var(--component-chip-text-selected-default);
19
19
  }
20
20
 
package/dist/tl-divider.css CHANGED
@@ -1,7 +1,65 @@
1
+ /**
2
+ * Do not edit directly, this file was auto-generated.
3
+ */
4
+ :root,
5
+ .tds-mode-light,
6
+ .scania .tds-mode-light,
7
+ .scania.tds-mode-light,
8
+ .scania .tl-mode-light,
9
+ .scania.tl-mode-light {
10
+ --component-divider-border-discrete-default: var(--scania-color-grey-200);
11
+ --component-divider-border-subtle-default: var(--scania-color-grey-350);
12
+ --component-divider-border-soft-default: var(--scania-color-grey-500);
13
+ --component-divider-border-defined-default: var(--scania-color-grey-650);
14
+ --component-divider-border-strong-default: var(--color-border-strong);
15
+ --component-divider-border-expressive-default: var(--scania-color-blue-700);
16
+ }
17
+
18
+ .traton .tds-mode-light,
19
+ .traton.tds-mode-light,
20
+ .traton .tl-mode-light,
21
+ .traton.tl-mode-light {
22
+ --component-divider-border-discrete-default: var(--color-border-discrete);
23
+ --component-divider-border-subtle-default: var(--color-border-subtle);
24
+ --component-divider-border-soft-default: var(--color-border-soft);
25
+ --component-divider-border-defined-default: var(--color-border-defined);
26
+ --component-divider-border-strong-default: var(--color-border-strong);
27
+ --component-divider-border-expressive-default: var(--component-divider-border-strong-default);
28
+ }
29
+
30
+ .tds-mode-dark,
31
+ .scania .tds-mode-dark,
32
+ .scania.tds-mode-dark,
33
+ .scania .tl-mode-dark,
34
+ .scania.tl-mode-dark {
35
+ --component-divider-border-discrete-default: var(--color-border-discrete);
36
+ --component-divider-border-subtle-default: var(--color-border-subtle);
37
+ --component-divider-border-soft-default: var(--color-border-soft);
38
+ --component-divider-border-defined-default: var(--color-border-defined);
39
+ --component-divider-border-strong-default: var(--color-border-strong);
40
+ --component-divider-border-expressive-default: var(--scania-color-blue-800);
41
+ }
42
+
43
+ .traton .tds-mode-dark,
44
+ .traton.tds-mode-dark,
45
+ .traton .tl-mode-dark,
46
+ .traton.tl-mode-dark {
47
+ --component-divider-border-discrete-default: var(--color-border-discrete);
48
+ --component-divider-border-subtle-default: var(--color-border-subtle);
49
+ --component-divider-border-soft-default: var(--color-border-soft);
50
+ --component-divider-border-defined-default: var(--color-border-defined);
51
+ --component-divider-border-strong-default: var(--color-border-strong);
52
+ --component-divider-border-expressive-default: var(--component-divider-border-strong-default);
53
+ }
54
+
1
55
  .tl-divider {
2
- --divider-background: var(--color-foreground-border-discrete);
3
- --divider-background-strong: var(--color-foreground-border-strong);
4
- --divider-background-discrete: var(--color-foreground-border-discrete);
56
+ --divider-background: var(--component-divider-border-discrete-default);
57
+ --divider-background-discrete: var(--component-divider-border-discrete-default);
58
+ --divider-background-subtle: var(--component-divider-border-subtle-default);
59
+ --divider-background-soft: var(--component-divider-border-soft-default);
60
+ --divider-background-defined: var(--component-divider-border-defined-default);
61
+ --divider-background-strong: var(--component-divider-border-strong-default);
62
+ --divider-background-expressive: var(--component-divider-border-expressive-default);
5
63
  }
6
64
 
7
65
  .tl-divider {
package/dist/tl-footer.css CHANGED
@@ -78,18 +78,18 @@
78
78
  }
79
79
 
80
80
  .tl-footer {
81
- --footer-top-background-primary: var(--color-background-layer-01);
82
- --footer-top-background-secondary: var(--color-background-base);
83
- --footer-top-background: var(--color-background-layer-01);
84
- --footer-top-divider: var(--color-foreground-border-discrete);
85
- --footer-top-links-desktop: var(--color-foreground-text-subtle);
86
- --footer-top-links: var(--component-footer-text-color-link-text);
87
- --footer-top-links-background-hover: var(--color-background-surface-300);
88
- --footer-top-button-active: var(--color-background-surface-300);
89
- --footer-main-background: var(--component-footer-primary);
90
- --footer-main-links: var(--color-foreground-text-accent-brand);
91
- --footer-main-divider: var(--component-footer-border);
92
- --footer-main-copyright: var(--component-footer-text-color-copyright);
81
+ --footer-top-background-primary: var(--component-footer-background-top-default);
82
+ --footer-top-background-secondary: var(--component-footer-background-top-secondary);
83
+ --footer-top-background: var(--component-footer-background-top-default);
84
+ --footer-top-divider: var(--color-border-discrete);
85
+ --footer-top-links-desktop: var(--component-footer-text-title-default);
86
+ --footer-top-links: var(--component-footer-text-link-default);
87
+ --footer-top-links-background-hover: var(--component-footer-background-list-item-active);
88
+ --footer-top-button-active: var(--component-footer-background-list-item-active);
89
+ --footer-main-background: var(--component-footer-background-main-default);
90
+ --footer-main-links: var(--component-footer-text-inverse-link-default);
91
+ --footer-main-divider: var(--component-footer-border-divider-default);
92
+ --footer-main-copyright: var(--component-footer-text-copyright-default);
93
93
  }
94
94
  .tl-footer.tl-footer--primary {
95
95
  --footer-top-background: var(--footer-top-background-primary);
@@ -98,6 +98,26 @@
98
98
  --footer-top-background: var(--footer-top-background-secondary);
99
99
  }
100
100
 
101
+ .scania .tl-footer {
102
+ --component-footer-logotype-local: var(--tds-background-image-scania-wordmark-white-svg-local);
103
+ --component-footer-logotype-cdn: var(--tds-background-image-scania-wordmark-white-svg);
104
+ }
105
+
106
+ .traton .tl-mode-dark .tl-footer {
107
+ --component-footer-logotype-local: var(--traton-logotype-white-svg-local);
108
+ --component-footer-logotype-cdn: var(--traton-logotype-white-svg);
109
+ }
110
+
111
+ .traton .tl-mode-light .tl-footer {
112
+ --component-footer-logotype-local: var(--traton-logotype-black-svg-local);
113
+ --component-footer-logotype-cdn: var(--traton-logotype-black-svg);
114
+ }
115
+
116
+ .traton .tl-footer {
117
+ --component-footer-logotype-local: var(--traton-logotype-black-svg-local);
118
+ --component-footer-logotype-cdn: var(--traton-logotype-black-svg);
119
+ }
120
+
101
121
  .tl-footer__group {
102
122
  display: block;
103
123
  }
@@ -139,7 +159,7 @@
139
159
  text-decoration: underline;
140
160
  }
141
161
  .tl-footer__link:focus-visible {
142
- outline: var(--dimension-radius-focus-width) solid var(--color-foreground-border-accent-focus);
162
+ outline: var(--dimension-radius-focus-width) solid var(--color-system-info-default);
143
163
  box-shadow: 0 0 0 1px var(--color-brand-neutral-white);
144
164
  outline-offset: 1px;
145
165
  z-index: 1;
@@ -199,7 +219,7 @@
199
219
  background-color: var(--footer-top-button-active);
200
220
  }
201
221
  .tl-footer__top-title:focus-visible {
202
- outline: var(--dimension-radius-focus-width) solid var(--color-foreground-border-accent-focus);
222
+ outline: var(--dimension-radius-focus-width) solid var(--color-system-info-default);
203
223
  box-shadow: 0 0 0 1px var(--color-brand-neutral-white);
204
224
  outline-offset: -2px;
205
225
  z-index: 1;
@@ -220,7 +240,7 @@
220
240
  text-decoration: none;
221
241
  }
222
242
  .tl-footer__main .tl-footer__link:focus-visible {
223
- outline: var(--dimension-radius-focus-width) solid var(--color-foreground-border-accent-focus);
243
+ outline: var(--dimension-radius-focus-width) solid var(--color-system-info-default);
224
244
  box-shadow: 0 0 0 1px var(--color-brand-neutral-white);
225
245
  outline-offset: 1px;
226
246
  z-index: 1;
package/dist/tl-link.css CHANGED
@@ -1,12 +1,110 @@
1
1
  /* Typography Usage mixins */
2
+ /**
3
+ * Do not edit directly, this file was auto-generated.
4
+ */
5
+ :root,
6
+ .tds-mode-light,
7
+ .scania .tds-mode-light,
8
+ .scania.tds-mode-light,
9
+ .scania .tl-mode-light,
10
+ .scania.tl-mode-light {
11
+ --component-link-icon-accent-default: var(--scania-color-blue-400);
12
+ --component-link-icon-accent-hover: var(--scania-color-blue-400);
13
+ --component-link-icon-accent-active: var(--scania-color-blue-600);
14
+ --component-link-icon-accent-visited: var(--scania-color-blue-600);
15
+ --component-link-icon-standard-default: var(--color-text-strong);
16
+ --component-link-icon-standard-hover: var(--color-text-defined);
17
+ --component-link-icon-standard-active: var(--color-text-soft);
18
+ --component-link-icon-standard-visited: var(--color-text-strong);
19
+ --component-link-opacity-disabled: var(--scania-opacity-25);
20
+ --component-link-text-accent-default: var(--scania-color-blue-400);
21
+ --component-link-text-accent-hover: var(--scania-color-blue-400);
22
+ --component-link-text-accent-active: var(--scania-color-blue-600);
23
+ --component-link-text-accent-visited: var(--scania-color-blue-600);
24
+ --component-link-text-standard-default: var(--color-text-strong);
25
+ --component-link-text-standard-hover: var(--color-text-defined);
26
+ --component-link-text-standard-active: var(--color-text-soft);
27
+ --component-link-text-standard-visited: var(--color-text-strong);
28
+ }
29
+
30
+ .traton .tds-mode-light,
31
+ .traton.tds-mode-light,
32
+ .traton .tl-mode-light,
33
+ .traton.tl-mode-light {
34
+ --component-link-icon-accent-default: var(--traton-color-blue-700);
35
+ --component-link-icon-accent-hover: var(--traton-color-blue-700);
36
+ --component-link-icon-accent-active: var(--traton-color-blue-950);
37
+ --component-link-icon-accent-visited: var(--traton-color-blue-950);
38
+ --component-link-icon-standard-default: var(--color-text-strong);
39
+ --component-link-icon-standard-hover: var(--color-text-defined);
40
+ --component-link-icon-standard-active: var(--color-text-soft);
41
+ --component-link-icon-standard-visited: var(--color-text-strong);
42
+ --component-link-opacity-disabled: var(--traton-opacity-25);
43
+ --component-link-text-accent-default: var(--traton-color-blue-700);
44
+ --component-link-text-accent-hover: var(--traton-color-blue-700);
45
+ --component-link-text-accent-active: var(--traton-color-blue-950);
46
+ --component-link-text-accent-visited: var(--traton-color-blue-950);
47
+ --component-link-text-standard-default: var(--color-text-strong);
48
+ --component-link-text-standard-hover: var(--color-text-defined);
49
+ --component-link-text-standard-active: var(--color-text-soft);
50
+ --component-link-text-standard-visited: var(--color-text-strong);
51
+ }
52
+
53
+ .tds-mode-dark,
54
+ .scania .tds-mode-dark,
55
+ .scania.tds-mode-dark,
56
+ .scania .tl-mode-dark,
57
+ .scania.tl-mode-dark {
58
+ --component-link-icon-accent-default: var(--scania-color-blue-300);
59
+ --component-link-icon-accent-hover: var(--scania-color-blue-300);
60
+ --component-link-icon-accent-active: var(--scania-color-blue-100);
61
+ --component-link-icon-accent-visited: var(--scania-color-blue-100);
62
+ --component-link-icon-standard-default: var(--color-text-strong);
63
+ --component-link-icon-standard-hover: var(--color-text-defined);
64
+ --component-link-icon-standard-active: var(--color-text-soft);
65
+ --component-link-icon-standard-visited: var(--color-text-strong);
66
+ --component-link-opacity-disabled: var(--scania-opacity-25);
67
+ --component-link-text-accent-default: var(--scania-color-blue-300);
68
+ --component-link-text-accent-hover: var(--scania-color-blue-300);
69
+ --component-link-text-accent-active: var(--scania-color-blue-100);
70
+ --component-link-text-accent-visited: var(--scania-color-blue-100);
71
+ --component-link-text-standard-default: var(--color-text-strong);
72
+ --component-link-text-standard-hover: var(--color-text-defined);
73
+ --component-link-text-standard-active: var(--color-text-soft);
74
+ --component-link-text-standard-visited: var(--color-text-strong);
75
+ }
76
+
77
+ .traton .tds-mode-dark,
78
+ .traton.tds-mode-dark,
79
+ .traton .tl-mode-dark,
80
+ .traton.tl-mode-dark {
81
+ --component-link-icon-accent-default: var(--traton-color-blue-400);
82
+ --component-link-icon-accent-hover: var(--traton-color-blue-400);
83
+ --component-link-icon-accent-active: var(--traton-color-blue-150);
84
+ --component-link-icon-accent-visited: var(--traton-color-blue-150);
85
+ --component-link-icon-standard-default: var(--color-text-strong);
86
+ --component-link-icon-standard-hover: var(--color-text-defined);
87
+ --component-link-icon-standard-active: var(--color-text-soft);
88
+ --component-link-icon-standard-visited: var(--color-text-strong);
89
+ --component-link-opacity-disabled: var(--traton-opacity-25);
90
+ --component-link-text-accent-default: var(--traton-color-blue-400);
91
+ --component-link-text-accent-hover: var(--traton-color-blue-400);
92
+ --component-link-text-accent-active: var(--traton-color-blue-150);
93
+ --component-link-text-accent-visited: var(--traton-color-blue-150);
94
+ --component-link-text-standard-default: var(--color-text-strong);
95
+ --component-link-text-standard-hover: var(--color-text-defined);
96
+ --component-link-text-standard-active: var(--color-text-soft);
97
+ --component-link-text-standard-visited: var(--color-text-strong);
98
+ }
99
+
2
100
  /* Component variables */
3
101
  .tl-link {
4
- --link: var(--color-foreground-text-accent-default);
5
- --link-hover: var(--color-foreground-text-accent-default);
102
+ --link: var(--component-link-text-accent-default);
103
+ --link-hover: var(--component-link-text-accent-hover);
6
104
  --link-focus-outline-width: 2px;
7
- --link-visited: var(--color-foreground-text-accent-visited);
8
- --link-disabled: var(--color-foreground-text-disabled);
9
- --link-focus-outline-color: var(--color-foreground-border-accent-focus);
105
+ --link-visited: var(--component-link-text-accent-visited);
106
+ --link-opacity-disabled: calc(var(--component-link-opacity-disabled) / 100);
107
+ --link-focus-outline-color: var(--color-system-info-default);
10
108
  }
11
109
 
12
110
  .tl-banner .tl-link {
@@ -15,11 +113,11 @@
15
113
 
16
114
  .tl-toast .tl-link {
17
115
  --link: var(--color-system-info-default);
18
- --link-hover: var(--color-foreground-text-accent-default);
116
+ --link-hover: var(--color-system-info-default);
19
117
  }
20
118
 
21
119
  .traton .tl-link {
22
- --link-focus-outline-width: 4px;
120
+ --link-focus-outline-width: 2px;
23
121
  }
24
122
 
25
123
  .tl-link-text {
@@ -60,15 +158,10 @@
60
158
  text-decoration-color: var(--link-visited);
61
159
  }
62
160
  .tl-link--disabled {
63
- color: var(--link-disabled);
64
- text-decoration-color: var(--link-disabled);
161
+ opacity: var(--link-opacity-disabled);
65
162
  pointer-events: none;
66
163
  cursor: not-allowed;
67
164
  }
68
- .tl-link--disabled:visited {
69
- color: var(--link-disabled);
70
- text-decoration-color: var(--link-disabled);
71
- }
72
165
  .tl-link--underline {
73
166
  text-decoration: underline;
74
167
  }
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@scania/tegel-lite",
3
- "version": "0.1.0-var-batch-4-beta.0",
3
+ "version": "0.1.0-var-batch-4-beta.1",
4
4
  "description": "Styles-only library for Tegel Design System (Beta)",
5
5
  "type": "module",
6
6
  "keywords": [