@scania/tegel-lite 0.1.0-dev-test-beta.0 → 0.1.0-focus-ring-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 (39) hide show
  1. package/dist/assets/fonts/traton/TratonTypeDisplay-Bold.woff +0 -0
  2. package/dist/assets/fonts/traton/TratonTypeDisplay-Bold.woff2 +0 -0
  3. package/dist/assets/fonts/traton/TratonTypeDisplay-Medium.woff +0 -0
  4. package/dist/assets/fonts/traton/TratonTypeDisplay-Medium.woff2 +0 -0
  5. package/dist/assets/fonts/traton/TratonTypeText-Bold.woff +0 -0
  6. package/dist/assets/fonts/traton/TratonTypeText-Bold.woff2 +0 -0
  7. package/dist/assets/fonts/traton/TratonTypeText-BoldItalic.woff +0 -0
  8. package/dist/assets/fonts/traton/TratonTypeText-BoldItalic.woff2 +0 -0
  9. package/dist/assets/fonts/traton/TratonTypeText-Italic.woff +0 -0
  10. package/dist/assets/fonts/traton/TratonTypeText-Italic.woff2 +0 -0
  11. package/dist/assets/fonts/traton/TratonTypeText-Medium.woff +0 -0
  12. package/dist/assets/fonts/traton/TratonTypeText-Medium.woff2 +0 -0
  13. package/dist/assets/fonts/traton/TratonTypeText-MediumItalic.woff +0 -0
  14. package/dist/assets/fonts/traton/TratonTypeText-MediumItalic.woff2 +0 -0
  15. package/dist/assets/fonts/traton/TratonTypeText-Regular.woff +0 -0
  16. package/dist/assets/fonts/traton/TratonTypeText-Regular.woff2 +0 -0
  17. package/dist/assets/fonts/traton/TratonTypeText-SemiBold.woff +0 -0
  18. package/dist/assets/fonts/traton/TratonTypeText-SemiBold.woff2 +0 -0
  19. package/dist/assets/fonts/traton/TratonTypeText-SemiBoldItalic.woff2 +0 -0
  20. package/dist/assets/icons/traton/placeholder.svg +3 -0
  21. package/dist/components.css +530 -244
  22. package/dist/global.css +66 -0
  23. package/dist/scania-variables.css +185 -136
  24. package/dist/tl-banner.css +2 -2
  25. package/dist/tl-breadcrumbs.css +51 -5
  26. package/dist/tl-button.css +172 -149
  27. package/dist/tl-card.css +20 -8
  28. package/dist/tl-chip.css +8 -8
  29. package/dist/tl-divider.css +61 -3
  30. package/dist/tl-footer.css +83 -31
  31. package/dist/tl-link.css +106 -13
  32. package/dist/tl-modal.css +2 -2
  33. package/dist/tl-side-menu.css +4 -4
  34. package/dist/tl-slider.css +172 -149
  35. package/dist/tl-toast.css +2 -2
  36. package/dist/tl-toggle.css +2 -2
  37. package/dist/tl-tooltip.css +17 -15
  38. package/dist/traton-variables.css +35 -23
  39. package/package.json +1 -1
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
@@ -8,20 +8,36 @@
8
8
  .scania.tds-mode-light,
9
9
  .scania .tl-mode-light,
10
10
  .scania.tl-mode-light {
11
- --component-footer-border: var(--scania-color-blue-700);
12
- --component-footer-primary: var(--scania-color-blue-800);
13
- --component-footer-color-text-link-default: var(--color-text-brand);
14
- --component-footer-color-text-copyright-default: var(--color-text-inverse-soft);
11
+ --component-footer-border-divider-default: var(--scania-color-blue-700);
12
+ --component-footer-background-main-default: var(--scania-color-blue-800);
13
+ --component-footer-background-top-default: var(--color-background-layer-01);
14
+ --component-footer-background-top-secondary: var(--color-background-base);
15
+ --component-footer-background-list-item-default: var(--component-footer-background-top-default);
16
+ --component-footer-background-list-item-active: var(--scania-color-grey-150);
17
+ --component-footer-text-copyright-default: var(--color-text-inverse-soft);
18
+ --component-footer-text-link-default: var(--color-text-strong);
19
+ --component-footer-text-title-default: var(--color-text-strong);
20
+ --component-footer-text-inverse-link-default: var(--scania-color-base-white);
21
+ --component-footer-icon-link-default: var(--color-icon-strong);
22
+ --component-footer-icon-social-default: var(--color-icon-inverse-strong);
15
23
  }
16
24
 
17
25
  .traton .tds-mode-light,
18
26
  .traton.tds-mode-light,
19
27
  .traton .tl-mode-light,
20
28
  .traton.tl-mode-light {
21
- --component-footer-border: var(--traton-color-transparent-invisible-light);
22
- --component-footer-primary: var(--traton-color-grey-50);
23
- --component-footer-color-text-link-default: var(--color-text-strong);
24
- --component-footer-color-text-copyright-default: var(--traton-color-transparent-600);
29
+ --component-footer-border-divider-default: var(--traton-color-transparent-invisible-light);
30
+ --component-footer-background-main-default: var(--traton-color-grey-50);
31
+ --component-footer-background-top-default: var(--color-background-layer-01);
32
+ --component-footer-background-top-secondary: var(--color-background-layer-01);
33
+ --component-footer-background-list-item-default: var(--component-footer-background-top-default);
34
+ --component-footer-background-list-item-active: var(--traton-color-grey-300);
35
+ --component-footer-text-copyright-default: var(--color-text-soft);
36
+ --component-footer-text-link-default: var(--color-text-strong);
37
+ --component-footer-text-title-default: var(--color-text-strong);
38
+ --component-footer-text-inverse-link-default: var(--component-footer-text-link-default);
39
+ --component-footer-icon-link-default: var(--color-icon-strong);
40
+ --component-footer-icon-social-default: var(--color-icon-strong);
25
41
  }
26
42
 
27
43
  .tds-mode-dark,
@@ -29,35 +45,51 @@
29
45
  .scania.tds-mode-dark,
30
46
  .scania .tl-mode-dark,
31
47
  .scania.tl-mode-dark {
32
- --component-footer-border: var(--scania-color-blue-800);
33
- --component-footer-primary: var(--scania-color-blue-900);
34
- --component-footer-color-text-link-default: #d8dde5;
35
- --component-footer-color-text-copyright-default: var(--color-text-soft);
48
+ --component-footer-border-divider-default: var(--scania-color-blue-800);
49
+ --component-footer-background-main-default: var(--scania-color-blue-900);
50
+ --component-footer-background-top-default: var(--color-background-layer-01);
51
+ --component-footer-background-top-secondary: var(--color-background-layer-02);
52
+ --component-footer-background-list-item-default: var(--component-footer-background-top-default);
53
+ --component-footer-background-list-item-active: var(--scania-color-grey-800);
54
+ --component-footer-text-copyright-default: var(--color-text-soft);
55
+ --component-footer-text-link-default: var(--color-text-strong);
56
+ --component-footer-text-title-default: var(--color-text-strong);
57
+ --component-footer-text-inverse-link-default: var(--scania-color-base-white);
58
+ --component-footer-icon-link-default: var(--color-icon-strong);
59
+ --component-footer-icon-social-default: var(--color-icon-strong);
36
60
  }
37
61
 
38
62
  .traton .tds-mode-dark,
39
63
  .traton.tds-mode-dark,
40
64
  .traton .tl-mode-dark,
41
65
  .traton.tl-mode-dark {
42
- --component-footer-border: var(--traton-color-transparent-invisible-light);
43
- --component-footer-primary: var(--traton-color-blue-1000);
44
- --component-footer-color-text-link-default: var(--color-text-strong);
45
- --component-footer-color-text-copyright-default: var(--traton-color-transparent-inverse-600);
66
+ --component-footer-border-divider-default: var(--traton-color-transparent-invisible-light);
67
+ --component-footer-background-main-default: var(--traton-color-blue-1000);
68
+ --component-footer-background-top-default: var(--color-background-layer-01);
69
+ --component-footer-background-top-secondary: var(--color-background-layer-01);
70
+ --component-footer-background-list-item-default: var(--component-footer-background-top-default);
71
+ --component-footer-background-list-item-active: var(--traton-color-blue-800);
72
+ --component-footer-text-copyright-default: var(--color-text-soft);
73
+ --component-footer-text-link-default: var(--color-text-strong);
74
+ --component-footer-text-title-default: var(--color-text-strong);
75
+ --component-footer-text-inverse-link-default: var(--component-footer-text-link-default);
76
+ --component-footer-icon-link-default: var(--color-icon-strong);
77
+ --component-footer-icon-social-default: var(--color-icon-strong);
46
78
  }
47
79
 
48
80
  .tl-footer {
49
- --footer-top-background-primary: var(--color-background-layer-01);
50
- --footer-top-background-secondary: var(--color-background-base);
51
- --footer-top-background: var(--color-background-layer-01);
52
- --footer-top-divider: var(--color-foreground-border-discrete);
53
- --footer-top-links-desktop: var(--color-foreground-text-subtle);
54
- --footer-top-links: var(--component-footer-text-color-link-text);
55
- --footer-top-links-background-hover: var(--color-background-surface-300);
56
- --footer-top-button-active: var(--color-background-surface-300);
57
- --footer-main-background: var(--component-footer-primary);
58
- --footer-main-links: var(--color-foreground-text-accent-brand);
59
- --footer-main-divider: var(--component-footer-border);
60
- --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);
61
93
  }
62
94
  .tl-footer.tl-footer--primary {
63
95
  --footer-top-background: var(--footer-top-background-primary);
@@ -66,6 +98,26 @@
66
98
  --footer-top-background: var(--footer-top-background-secondary);
67
99
  }
68
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
+
69
121
  .tl-footer__group {
70
122
  display: block;
71
123
  }
@@ -107,7 +159,7 @@
107
159
  text-decoration: underline;
108
160
  }
109
161
  .tl-footer__link:focus-visible {
110
- 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);
111
163
  box-shadow: 0 0 0 1px var(--color-brand-neutral-white);
112
164
  outline-offset: 1px;
113
165
  z-index: 1;
@@ -167,7 +219,7 @@
167
219
  background-color: var(--footer-top-button-active);
168
220
  }
169
221
  .tl-footer__top-title:focus-visible {
170
- 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);
171
223
  box-shadow: 0 0 0 1px var(--color-brand-neutral-white);
172
224
  outline-offset: -2px;
173
225
  z-index: 1;
@@ -188,7 +240,7 @@
188
240
  text-decoration: none;
189
241
  }
190
242
  .tl-footer__main .tl-footer__link:focus-visible {
191
- 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);
192
244
  box-shadow: 0 0 0 1px var(--color-brand-neutral-white);
193
245
  outline-offset: 1px;
194
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/dist/tl-modal.css CHANGED
@@ -300,8 +300,8 @@ body {
300
300
  cursor: pointer;
301
301
  }
302
302
  .tl-modal__close:focus {
303
- outline: 2px solid var(--tds-focus-outline-color);
304
- box-shadow: 0 0 0 1px var(--tds-white);
303
+ outline: 2px solid var(--component--focus-ring-color-strong);
304
+ box-shadow: 0 0 0 1px var(--component--focus-ring-color-discrete);
305
305
  outline-offset: 1px;
306
306
  z-index: 1;
307
307
  }
package/dist/tl-side-menu.css CHANGED
@@ -45,7 +45,7 @@ body {
45
45
  --component-side-menu-space-sub-page-selected-marker-width: var(--scania-unit-4);
46
46
  --component-side-menu-space-collapsed-item-inner-icon-left-and-right-padding: 22;
47
47
  --component-side-menu-space-collapsed-item-inner-icon-top-and-bottom-padding: 22;
48
- --component-side-menu-radius-default: var(--scania-unit-0);
48
+ --component-side-menu-radius-radius-default: var(--scania-unit-0);
49
49
  --component-side-menu-text-items-font-family: var(--scania-font-family-semi-condensed);
50
50
  --component-side-menu-text-items-font-weight: var(--scania-font-weight-bold);
51
51
  --component-side-menu-text-items-font-size: 14;
@@ -86,7 +86,7 @@ body {
86
86
  --component-side-menu-space-collapsed-item-inner-icon-top-and-bottom-padding: var(
87
87
  --traton-unit-12
88
88
  );
89
- --component-side-menu-radius-default: var(--traton-unit-8);
89
+ --component-side-menu-radius-radius-default: var(--traton-unit-8);
90
90
  --component-side-menu-text-items-font-family: var(--traton-font-family-default);
91
91
  --component-side-menu-text-items-font-weight: var(--traton-font-weight-medium);
92
92
  --component-side-menu-text-items-font-size: 14;
@@ -123,7 +123,7 @@ body {
123
123
  --component-side-menu-space-sub-page-selected-marker-width: var(--scania-unit-4);
124
124
  --component-side-menu-space-collapsed-item-inner-icon-left-and-right-padding: 22;
125
125
  --component-side-menu-space-collapsed-item-inner-icon-top-and-bottom-padding: 22;
126
- --component-side-menu-radius-default: var(--scania-unit-0);
126
+ --component-side-menu-radius-radius-default: var(--scania-unit-0);
127
127
  --component-side-menu-text-items-font-family: var(--scania-font-family-semi-condensed);
128
128
  --component-side-menu-text-items-font-weight: var(--scania-font-weight-bold);
129
129
  --component-side-menu-text-items-font-size: 14;
@@ -164,7 +164,7 @@ body {
164
164
  --component-side-menu-space-collapsed-item-inner-icon-top-and-bottom-padding: var(
165
165
  --traton-unit-12
166
166
  );
167
- --component-side-menu-radius-default: var(--traton-unit-8);
167
+ --component-side-menu-radius-radius-default: var(--traton-unit-8);
168
168
  --component-side-menu-text-items-font-family: var(--traton-font-family-default);
169
169
  --component-side-menu-text-items-font-weight: var(--traton-font-weight-medium);
170
170
  --component-side-menu-text-items-font-size: 14;