@scania/tegel-lite 0.1.0-var-work-beta.6 → 0.1.0-var-work-beta.7

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 (5) hide show
  1. package/dist/components.css +214 -11
  2. package/dist/tl-breadcrumbs.css +50 -4
  3. package/dist/tl-divider.css +61 -3
  4. package/dist/tl-link.css +103 -4
  5. package/package.json +1 -1
package/dist/components.css CHANGED
@@ -531,11 +531,57 @@
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-text-strong);
536
- --breadcrumb-hover: var(--color-text-strong);
537
- --breadcrumb-current: var(--color-text-soft);
538
- --breadcrumb-separator-color: var(--color-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;
@@ -2316,10 +2362,68 @@
2316
2362
  color: var(--color-foreground-text-disabled);
2317
2363
  }
2318
2364
 
2365
+ /**
2366
+ * Do not edit directly, this file was auto-generated.
2367
+ */
2368
+ :root,
2369
+ .tds-mode-light,
2370
+ .scania .tds-mode-light,
2371
+ .scania.tds-mode-light,
2372
+ .scania .tl-mode-light,
2373
+ .scania.tl-mode-light {
2374
+ --component-divider-border-discrete-default: var(--scania-color-grey-200);
2375
+ --component-divider-border-subtle-default: var(--scania-color-grey-350);
2376
+ --component-divider-border-soft-default: var(--scania-color-grey-500);
2377
+ --component-divider-border-defined-default: var(--scania-color-grey-650);
2378
+ --component-divider-border-strong-default: var(--color-border-strong);
2379
+ --component-divider-border-expressive-default: var(--scania-color-blue-700);
2380
+ }
2381
+
2382
+ .traton .tds-mode-light,
2383
+ .traton.tds-mode-light,
2384
+ .traton .tl-mode-light,
2385
+ .traton.tl-mode-light {
2386
+ --component-divider-border-discrete-default: var(--color-border-discrete);
2387
+ --component-divider-border-subtle-default: var(--color-border-subtle);
2388
+ --component-divider-border-soft-default: var(--color-border-soft);
2389
+ --component-divider-border-defined-default: var(--color-border-defined);
2390
+ --component-divider-border-strong-default: var(--color-border-strong);
2391
+ --component-divider-border-expressive-default: var(--component-divider-border-strong-default);
2392
+ }
2393
+
2394
+ .tds-mode-dark,
2395
+ .scania .tds-mode-dark,
2396
+ .scania.tds-mode-dark,
2397
+ .scania .tl-mode-dark,
2398
+ .scania.tl-mode-dark {
2399
+ --component-divider-border-discrete-default: var(--color-border-discrete);
2400
+ --component-divider-border-subtle-default: var(--color-border-subtle);
2401
+ --component-divider-border-soft-default: var(--color-border-soft);
2402
+ --component-divider-border-defined-default: var(--color-border-defined);
2403
+ --component-divider-border-strong-default: var(--color-border-strong);
2404
+ --component-divider-border-expressive-default: var(--scania-color-blue-800);
2405
+ }
2406
+
2407
+ .traton .tds-mode-dark,
2408
+ .traton.tds-mode-dark,
2409
+ .traton .tl-mode-dark,
2410
+ .traton.tl-mode-dark {
2411
+ --component-divider-border-discrete-default: var(--color-border-discrete);
2412
+ --component-divider-border-subtle-default: var(--color-border-subtle);
2413
+ --component-divider-border-soft-default: var(--color-border-soft);
2414
+ --component-divider-border-defined-default: var(--color-border-defined);
2415
+ --component-divider-border-strong-default: var(--color-border-strong);
2416
+ --component-divider-border-expressive-default: var(--component-divider-border-strong-default);
2417
+ }
2418
+
2319
2419
  .tl-divider {
2320
- --divider-background: var(--color-border-discrete);
2321
- --divider-background-strong: var(--color-border-strong);
2322
- --divider-background-discrete: var(--color-border-discrete);
2420
+ --divider-background: var(--component-divider-border-discrete-default);
2421
+ --divider-background-discrete: var(--component-divider-border-discrete-default);
2422
+ --divider-background-subtle: var(--component-divider-border-subtle-default);
2423
+ --divider-background-soft: var(--component-divider-border-soft-default);
2424
+ --divider-background-defined: var(--component-divider-border-defined-default);
2425
+ --divider-background-strong: var(--component-divider-border-strong-default);
2426
+ --divider-background-expressive: var(--component-divider-border-expressive-default);
2323
2427
  }
2324
2428
 
2325
2429
  .tl-divider {
@@ -5758,13 +5862,112 @@ body {
5758
5862
  height: 96px;
5759
5863
  }
5760
5864
 
5865
+ /**
5866
+ * Do not edit directly, this file was auto-generated.
5867
+ */
5868
+ :root,
5869
+ .tds-mode-light,
5870
+ .scania .tds-mode-light,
5871
+ .scania.tds-mode-light,
5872
+ .scania .tl-mode-light,
5873
+ .scania.tl-mode-light {
5874
+ --component-link-icon-accent-default: var(--scania-color-blue-400);
5875
+ --component-link-icon-accent-hover: var(--scania-color-blue-400);
5876
+ --component-link-icon-accent-active: var(--scania-color-blue-600);
5877
+ --component-link-icon-accent-visited: var(--scania-color-blue-600);
5878
+ --component-link-icon-standard-default: var(--color-text-strong);
5879
+ --component-link-icon-standard-hover: var(--color-text-defined);
5880
+ --component-link-icon-standard-active: var(--color-text-soft);
5881
+ --component-link-icon-standard-visited: var(--color-text-strong);
5882
+ --component-link-opacity-disabled: var(--scania-opacity-25);
5883
+ --component-link-text-accent-default: var(--scania-color-blue-400);
5884
+ --component-link-text-accent-hover: var(--scania-color-blue-400);
5885
+ --component-link-text-accent-active: var(--scania-color-blue-600);
5886
+ --component-link-text-accent-visited: var(--scania-color-blue-600);
5887
+ --component-link-text-standard-default: var(--color-text-strong);
5888
+ --component-link-text-standard-hover: var(--color-text-defined);
5889
+ --component-link-text-standard-active: var(--color-text-soft);
5890
+ --component-link-text-standard-visited: var(--color-text-strong);
5891
+ }
5892
+
5893
+ .traton .tds-mode-light,
5894
+ .traton.tds-mode-light,
5895
+ .traton .tl-mode-light,
5896
+ .traton.tl-mode-light {
5897
+ --component-link-icon-accent-default: var(--traton-color-blue-700);
5898
+ --component-link-icon-accent-hover: var(--traton-color-blue-700);
5899
+ --component-link-icon-accent-active: var(--traton-color-blue-950);
5900
+ --component-link-icon-accent-visited: var(--traton-color-blue-950);
5901
+ --component-link-icon-standard-default: var(--color-text-strong);
5902
+ --component-link-icon-standard-hover: var(--color-text-defined);
5903
+ --component-link-icon-standard-active: var(--color-text-soft);
5904
+ --component-link-icon-standard-visited: var(--color-text-strong);
5905
+ --component-link-opacity-disabled: var(--traton-opacity-25);
5906
+ --component-link-text-accent-default: var(--traton-color-blue-700);
5907
+ --component-link-text-accent-hover: var(--traton-color-blue-700);
5908
+ --component-link-text-accent-active: var(--traton-color-blue-950);
5909
+ --component-link-text-accent-visited: var(--traton-color-blue-950);
5910
+ --component-link-text-standard-default: var(--color-text-strong);
5911
+ --component-link-text-standard-hover: var(--color-text-defined);
5912
+ --component-link-text-standard-active: var(--color-text-soft);
5913
+ --component-link-text-standard-visited: var(--color-text-strong);
5914
+ }
5915
+
5916
+ .tds-mode-dark,
5917
+ .scania .tds-mode-dark,
5918
+ .scania.tds-mode-dark,
5919
+ .scania .tl-mode-dark,
5920
+ .scania.tl-mode-dark {
5921
+ --component-link-icon-accent-default: var(--scania-color-blue-300);
5922
+ --component-link-icon-accent-hover: var(--scania-color-blue-300);
5923
+ --component-link-icon-accent-active: var(--scania-color-blue-100);
5924
+ --component-link-icon-accent-visited: var(--scania-color-blue-100);
5925
+ --component-link-icon-standard-default: var(--color-text-strong);
5926
+ --component-link-icon-standard-hover: var(--color-text-defined);
5927
+ --component-link-icon-standard-active: var(--color-text-soft);
5928
+ --component-link-icon-standard-visited: var(--color-text-strong);
5929
+ --component-link-opacity-disabled: var(--scania-opacity-25);
5930
+ --component-link-text-accent-default: var(--scania-color-blue-300);
5931
+ --component-link-text-accent-hover: var(--scania-color-blue-300);
5932
+ --component-link-text-accent-active: var(--scania-color-blue-100);
5933
+ --component-link-text-accent-visited: var(--scania-color-blue-100);
5934
+ --component-link-text-standard-default: var(--color-text-strong);
5935
+ --component-link-text-standard-hover: var(--color-text-defined);
5936
+ --component-link-text-standard-active: var(--color-text-soft);
5937
+ --component-link-text-standard-visited: var(--color-text-strong);
5938
+ }
5939
+
5940
+ .traton .tds-mode-dark,
5941
+ .traton.tds-mode-dark,
5942
+ .traton .tl-mode-dark,
5943
+ .traton.tl-mode-dark {
5944
+ --component-link-icon-accent-default: var(--traton-color-blue-400);
5945
+ --component-link-icon-accent-hover: var(--traton-color-blue-400);
5946
+ --component-link-icon-accent-active: var(--traton-color-blue-150);
5947
+ --component-link-icon-accent-visited: var(--traton-color-blue-150);
5948
+ --component-link-icon-standard-default: var(--color-text-strong);
5949
+ --component-link-icon-standard-hover: var(--color-text-defined);
5950
+ --component-link-icon-standard-active: var(--color-text-soft);
5951
+ --component-link-icon-standard-visited: var(--color-text-strong);
5952
+ --component-link-opacity-disabled: var(--traton-opacity-25);
5953
+ --component-link-text-accent-default: var(--traton-color-blue-400);
5954
+ --component-link-text-accent-hover: var(--traton-color-blue-400);
5955
+ --component-link-text-accent-active: var(--traton-color-blue-150);
5956
+ --component-link-text-accent-visited: var(--traton-color-blue-150);
5957
+ --component-link-text-standard-default: var(--color-text-strong);
5958
+ --component-link-text-standard-hover: var(--color-text-defined);
5959
+ --component-link-text-standard-active: var(--color-text-soft);
5960
+ --component-link-text-standard-visited: var(--color-text-strong);
5961
+ }
5962
+
5761
5963
  /* Component variables */
5762
5964
  .tl-link {
5763
- --link: var(--color-system-info-default);
5764
- --link-hover: var(--color-system-info-default);
5965
+ --link: var(--component-link-text-accent-default);
5966
+ --link-hover: var(--component-link-text-accent-hover);
5765
5967
  --link-focus-outline-width: 2px;
5766
- --link-visited: var(--color-system-info-defined);
5968
+ --link-visited: var(--component-link-text-accent-visited);
5767
5969
  --link-disabled: var(--color-text-disabled);
5970
+ --link-opacity-disabled: calc(var(--component-link-opacity-disabled) / 100);
5768
5971
  --link-focus-outline-color: var(--color-system-info-default);
5769
5972
  }
5770
5973
 
@@ -5778,7 +5981,7 @@ body {
5778
5981
  }
5779
5982
 
5780
5983
  .traton .tl-link {
5781
- --link-focus-outline-width: 4px;
5984
+ --link-focus-outline-width: 2px;
5782
5985
  }
5783
5986
 
5784
5987
  .tl-link-text {
package/dist/tl-breadcrumbs.css CHANGED
@@ -1,9 +1,55 @@
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-text-strong);
4
- --breadcrumb-hover: var(--color-text-strong);
5
- --breadcrumb-current: var(--color-text-soft);
6
- --breadcrumb-separator-color: var(--color-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;
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-border-discrete);
3
- --divider-background-strong: var(--color-border-strong);
4
- --divider-background-discrete: var(--color-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-link.css CHANGED
@@ -1,11 +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-system-info-default);
5
- --link-hover: var(--color-system-info-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-system-info-defined);
105
+ --link-visited: var(--component-link-text-accent-visited);
8
106
  --link-disabled: var(--color-text-disabled);
107
+ --link-opacity-disabled: calc(var(--component-link-opacity-disabled) / 100);
9
108
  --link-focus-outline-color: var(--color-system-info-default);
10
109
  }
11
110
 
@@ -19,7 +118,7 @@
19
118
  }
20
119
 
21
120
  .traton .tl-link {
22
- --link-focus-outline-width: 4px;
121
+ --link-focus-outline-width: 2px;
23
122
  }
24
123
 
25
124
  .tl-link-text {
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@scania/tegel-lite",
3
- "version": "0.1.0-var-work-beta.6",
3
+ "version": "0.1.0-var-work-beta.7",
4
4
  "description": "Styles-only library for Tegel Design System (Beta)",
5
5
  "type": "module",
6
6
  "keywords": [