@scania/tegel-lite 0.1.0-beta.updated-globals → 0.1.0-dev-test-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 (32) hide show
  1. package/dist/assets/icons/scania/configurator.svg +1 -0
  2. package/dist/assets/icons/traton/edit_inactive.svg +1 -0
  3. package/dist/assets/icons/traton/skip_backwards.svg +1 -0
  4. package/dist/assets/icons/traton/skip_forward.svg +1 -0
  5. package/dist/components.css +1044 -447
  6. package/dist/global.css +45 -3560
  7. package/dist/scania-variables.css +328 -453
  8. package/dist/tl-accordion.css +8 -8
  9. package/dist/tl-badge.css +4 -18
  10. package/dist/tl-banner.css +2 -2
  11. package/dist/tl-button.css +397 -10
  12. package/dist/tl-card.css +47 -11
  13. package/dist/tl-checkbox-vars.css +1 -1
  14. package/dist/tl-checkbox.css +1 -1
  15. package/dist/tl-chip.css +21 -71
  16. package/dist/tl-datetime.css +7 -4
  17. package/dist/tl-dropdown.css +55 -8
  18. package/dist/tl-footer.css +34 -52
  19. package/dist/tl-header.css +189 -103
  20. package/dist/tl-icon.css +2 -2
  21. package/dist/tl-modal.css +33 -14
  22. package/dist/tl-side-menu.css +131 -42
  23. package/dist/tl-slider.css +416 -20
  24. package/dist/tl-spinner.css +10 -18
  25. package/dist/tl-step.css +28 -2
  26. package/dist/tl-stepper.css +28 -2
  27. package/dist/tl-table.css +42 -9
  28. package/dist/tl-text-field.css +19 -67
  29. package/dist/tl-toggle.css +1 -1
  30. package/dist/traton-variables.css +330 -437
  31. package/package.json +1 -1
  32. /package/dist/assets/icons/scania/{gift inactive.svg → gift_inactive.svg} +0 -0
package/dist/tl-header.css CHANGED
@@ -2,107 +2,193 @@
2
2
  /**
3
3
  * Do not edit directly, this file was auto-generated.
4
4
  */
5
- .scania tds-header,
6
- .scania .tl-header {
7
- /* State & interaction colors */
8
- --component-header-color-background-open: var(--color-foreground-border-accent-focus);
9
- --component-header-color-foreground-selected: var(--color-foreground-icon-strong);
10
- --component-header-dropdown-item-background: var(--color-background-layer-02);
11
- --component-header-avatar-item-background: var(--color-background-layer-02);
12
- --component-header-app-launcher-meny-background: var(--color-background-layer-02);
13
- /* Sizing & spacing */
14
- --component-header-brand-logo-size: 30px;
15
- --component-header-space-profile-padding: 16px;
16
- --component-header-item-image-size: 34px;
17
- --component-header-item-image-left: 10px;
18
- --component-header-item-width: none;
19
- --component-header-item-border-right: 1px solid var(--header-basic-element-border);
20
- /* Borders */
21
- --component-header-border: none;
22
- /* Typography */
23
- --component-header-font-family-headline: var(--scania-font-family-display);
24
- --component-header-font-weight: var(--scania-font-weight-regular);
25
- --component-header-text-transform: none;
26
- }
27
- .scania {
28
- /* ── Light-mode overrides ───────────────────── */
29
- }
30
- .scania .tds-mode-light tds-header,
31
- .scania .tds-mode-light .tl-header {
32
- --component-header-color-background: var(--color-brand-primary-800);
33
- --component-header-color-foreground-strong: var(--color-foreground-icon-inverse-strong);
34
- --component-header-color-background-hover: var(--color-brand-primary-700);
35
- --component-header-color-background-border: var(--color-brand-primary-700);
36
- --component-header-color-background-pressed: var(--color-brand-neutral-white);
37
- --component-header-color-background-selected: var(--color-brand-primary-700);
38
- }
39
- .scania {
40
- /* ── Dark-mode overrides ───────────────────── */
41
- }
42
- .scania .tds-mode-dark tds-header,
43
- .scania .tds-mode-dark .tl-header {
44
- --component-header-color-background: var(--color-brand-primary-900);
45
- --component-header-color-foreground-strong: var(--color-foreground-icon-strong);
46
- --component-header-color-background-hover: var(--color-brand-primary-800);
47
- --component-header-color-background-border: var(--color-brand-primary-800);
48
- --component-header-color-background-pressed: var(--color-brand-primary-800);
49
- --component-header-color-background-selected: var(--color-brand-primary-800);
50
- }
51
-
52
- .traton tds-header,
53
- .traton .tl-header {
54
- /* Base colors */
55
- --component-header-color-background: var(--color-background-base);
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-header-color-popovers: var(--color-background-layer-02);
12
+ --component-header-color-icon-strong: var(--color-icon-inverse-strong);
13
+ --component-header-color-icon-defined: var(--color-text-inverse-defined);
14
+ --component-header-color-icon-selected: var(--color-icon-strong);
15
+ --component-header-color-background-default: #041e42;
16
+ --component-header-color-background-hover: #0f3263;
17
+ --component-header-color-background-focus: #041e42;
18
+ --component-header-color-background-pressed: #0f3263;
19
+ --component-header-color-background-selected: #fff;
20
+ --component-header-color-background-border: #0f3263;
21
+ --component-header-color-background-profile: #0f3263;
22
+ --component-header-color-expressive-mobile-menu-primary: #041e42;
23
+ --component-header-color-expressive-mobile-menu-focus: #041e42;
24
+ --component-header-color-expressive-mobile-menu-pressed: #0f3263;
25
+ --component-header-color-expressive-mobile-menu-selected: #fff;
26
+ --component-header-color-expressive-mobile-menu-selected-expressive: #041e42;
27
+ --component-header-text-application-name-font-family: var(--scania-font-family-display);
28
+ --component-header-text-application-name-font-weight: var(--scania-font-weight-regular);
29
+ --component-header-text-application-name-font-size: 14;
30
+ --component-header-text-application-name-line-height: 16;
31
+ --component-header-text-application-name-text-transform: none;
32
+ --component-header-text-item-font-family: var(--scania-font-family-semi-condensed);
33
+ --component-header-text-item-font-weight: var(--scania-font-weight-bold);
34
+ --component-header-text-item-font-size: 14;
35
+ --component-header-text-item-line-height: 16;
36
+ --component-header-text-item-letter-spacing: -0.14;
37
+ --component-header-text-item-text-transform: none;
38
+ --component-header-text-item-selected-font-family: var(--scania-font-family-semi-condensed);
39
+ --component-header-text-item-selected-font-weight: var(--scania-font-weight-bold);
40
+ --component-header-text-item-selected-font-size: 14;
41
+ --component-header-text-item-selected-line-height: 16;
42
+ --component-header-text-item-selected-letter-spacing: -0.14;
43
+ --component-header-text-item-selected-text-transform: none;
44
+ --component-header-text-item-profile-font-family: var(--scania-font-family-semi-condensed);
45
+ --component-header-text-item-profile-font-weight: var(--scania-font-weight-bold);
46
+ --component-header-text-item-profile-font-size: 14;
47
+ --component-header-text-item-profile-line-height: 16;
48
+ --component-header-text-item-profile-letter-spacing: -0.14;
49
+ --component-header-text-item-profile-text-transform: none;
50
+ --component-header-space-profile-padding: var(--scania-unit-16);
51
+ --component-header-space-profile-size: var(--scania-unit-32);
52
+ }
53
+
54
+ .traton .tds-mode-light,
55
+ .traton.tds-mode-light,
56
+ .traton .tl-mode-light,
57
+ .traton.tl-mode-light {
58
+ --component-header-color-popovers: var(--color-background-layer-01);
59
+ --component-header-color-icon-strong: var(--color-icon-strong);
60
+ --component-header-color-icon-defined: var(--color-icon-defined);
61
+ --component-header-color-icon-selected: var(--color-icon-strong);
62
+ --component-header-color-background-default: var(--traton-color-transparent-invisible-light);
56
63
  --component-header-color-background-hover: var(--color-background-layer-01);
57
- --component-header-color-background-open: transparent;
58
- --component-header-color-foreground-strong: var(--color-foreground-icon-strong);
64
+ --component-header-color-background-focus: var(--color-background-base);
65
+ --component-header-color-background-pressed: var(--color-background-layer-01);
66
+ --component-header-color-background-selected: var(--color-background-base);
59
67
  --component-header-color-background-border: var(--traton-color-transparent-invisible-light);
60
- --component-header-color-background-pressed: var(--color-background-base);
61
- --component-header-color-foreground-selected: var(--color-foreground-icon-strong);
62
- /* Dropdown & launcher */
63
- --component-header-dropdown-item-background: var(--color-background-layer-01);
64
- --component-header-avatar-item-background: var(--color-background-layer-01);
65
- --component-header-app-launcher-meny-background: var(--color-background-layer-01);
66
- /* Sizing & spacing */
67
- --component-header-brand-logo-size: 106px;
68
- --component-header-space-profile-padding: 20px;
69
- --component-header-item-image-size: 24px;
70
- --component-header-item-image-left: 15px;
71
- --component-header-item-width: 122px;
72
- --component-header-item-border-right: none;
73
- /* Borders */
74
- --component-header-border: 2px solid var(--header-nav-item-border-active);
75
- /* Typography */
76
- --component-header-font-family-headline: var(--traton-font-family-display);
77
- --component-header-font-weight: var(--traton-font-weight-medium);
78
- --component-header-text-transform: uppercase;
79
- }
80
- .traton {
81
- /* ── Light-mode overrides ───────────────────── */
82
- }
83
- .traton .tds-mode-light tds-header,
84
- .traton .tds-mode-light .tl-header {
85
- --component-header-color-background-selected: var(--color-background-layer-01);
86
- }
87
- .traton {
88
- /* ── Dark-mode overrides ───────────────────── */
89
- }
90
- .traton .tds-mode-dark tds-header,
91
- .traton .tds-mode-dark .tl-header {
92
- --component-header-color-background-selected: var(--color-background-surface-100);
93
- }
94
-
95
- /*
96
- Tegel Lite specific overrides
97
- Keep this in last to ensure it has the highest specificity for Tegel Lite
98
- */
99
- .scania .tl-header {
100
- --component-header-item-width: 30px;
101
- --component-header-dropdown-box-shadow: 0 3px 3px rgb(0 0 0 / 15%), 0 -1px 1px rgb(0 0 0 / 1%);
102
- }
103
-
104
- .traton .tl-header {
105
- --component-header-dropdown-box-shadow: none;
68
+ --component-header-color-background-profile: #ebe7dd;
69
+ --component-header-color-expressive-mobile-menu-primary: var(--color-background-base);
70
+ --component-header-color-expressive-mobile-menu-focus: var(--color-background-base);
71
+ --component-header-color-expressive-mobile-menu-pressed: #ebe7dd;
72
+ --component-header-color-expressive-mobile-menu-selected: var(--traton-color-base-white);
73
+ --component-header-color-expressive-mobile-menu-selected-expressive: var(
74
+ --traton-color-base-white
75
+ );
76
+ --component-header-text-application-name-font-family: var(--traton-font-family-display);
77
+ --component-header-text-application-name-font-weight: var(--traton-font-weight-medium);
78
+ --component-header-text-application-name-font-size: 14;
79
+ --component-header-text-application-name-line-height: 16;
80
+ --component-header-text-application-name-text-transform: none;
81
+ --component-header-text-item-font-family: var(--traton-font-family-default);
82
+ --component-header-text-item-font-weight: var(--traton-font-weight-medium);
83
+ --component-header-text-item-font-size: 14;
84
+ --component-header-text-item-line-height: 16;
85
+ --component-header-text-item-text-transform: none;
86
+ --component-header-text-item-selected-font-family: var(--traton-font-family-default);
87
+ --component-header-text-item-selected-font-weight: var(--traton-font-weight-semi-bold);
88
+ --component-header-text-item-selected-font-size: 14;
89
+ --component-header-text-item-selected-line-height: 18;
90
+ --component-header-text-item-selected-text-transform: none;
91
+ --component-header-text-item-profile-font-family: var(--traton-font-family-default);
92
+ --component-header-text-item-profile-font-weight: var(--traton-font-weight-semi-bold);
93
+ --component-header-text-item-profile-font-size: 12;
94
+ --component-header-text-item-profile-line-height: 18;
95
+ --component-header-text-item-profile-text-transform: none;
96
+ --component-header-space-profile-padding: var(--traton-unit-20);
97
+ --component-header-space-profile-size: var(--traton-unit-24);
98
+ }
99
+
100
+ .tds-mode-dark,
101
+ .scania .tds-mode-dark,
102
+ .scania.tds-mode-dark,
103
+ .scania .tl-mode-dark,
104
+ .scania.tl-mode-dark {
105
+ --component-header-color-popovers: var(--color-background-layer-02);
106
+ --component-header-color-icon-strong: var(--color-icon-strong);
107
+ --component-header-color-icon-defined: var(--color-text-defined);
108
+ --component-header-color-icon-selected: var(--color-icon-strong);
109
+ --component-header-color-background-default: #001533;
110
+ --component-header-color-background-hover: #041e42;
111
+ --component-header-color-background-focus: #001533;
112
+ --component-header-color-background-pressed: #041e42;
113
+ --component-header-color-background-selected: #041e42;
114
+ --component-header-color-background-border: #041e42;
115
+ --component-header-color-background-profile: #041e42;
116
+ --component-header-color-expressive-mobile-menu-primary: var(--scania-color-blue-900);
117
+ --component-header-color-expressive-mobile-menu-focus: var(--scania-color-blue-900);
118
+ --component-header-color-expressive-mobile-menu-pressed: var(--scania-color-blue-800);
119
+ --component-header-color-expressive-mobile-menu-selected: #041e42;
120
+ --component-header-color-expressive-mobile-menu-selected-expressive: #001533;
121
+ --component-header-text-application-name-font-family: var(--scania-font-family-display);
122
+ --component-header-text-application-name-font-weight: var(--scania-font-weight-regular);
123
+ --component-header-text-application-name-font-size: 14;
124
+ --component-header-text-application-name-line-height: 16;
125
+ --component-header-text-application-name-text-transform: none;
126
+ --component-header-text-item-font-family: var(--scania-font-family-semi-condensed);
127
+ --component-header-text-item-font-weight: var(--scania-font-weight-bold);
128
+ --component-header-text-item-font-size: 14;
129
+ --component-header-text-item-line-height: 16;
130
+ --component-header-text-item-letter-spacing: -0.14;
131
+ --component-header-text-item-text-transform: none;
132
+ --component-header-text-item-selected-font-family: var(--scania-font-family-semi-condensed);
133
+ --component-header-text-item-selected-font-weight: var(--scania-font-weight-bold);
134
+ --component-header-text-item-selected-font-size: 14;
135
+ --component-header-text-item-selected-line-height: 16;
136
+ --component-header-text-item-selected-letter-spacing: -0.14;
137
+ --component-header-text-item-selected-text-transform: none;
138
+ --component-header-text-item-profile-font-family: var(--scania-font-family-semi-condensed);
139
+ --component-header-text-item-profile-font-weight: var(--scania-font-weight-bold);
140
+ --component-header-text-item-profile-font-size: 14;
141
+ --component-header-text-item-profile-line-height: 16;
142
+ --component-header-text-item-profile-letter-spacing: -0.14;
143
+ --component-header-text-item-profile-text-transform: none;
144
+ --component-header-space-profile-padding: var(--scania-unit-16);
145
+ --component-header-space-profile-size: var(--scania-unit-32);
146
+ }
147
+
148
+ .traton .tds-mode-dark,
149
+ .traton.tds-mode-dark,
150
+ .traton .tl-mode-dark,
151
+ .traton.tl-mode-dark {
152
+ --component-header-color-popovers: var(--color-background-layer-01);
153
+ --component-header-color-icon-strong: var(--color-icon-strong);
154
+ --component-header-color-icon-defined: var(--color-icon-defined);
155
+ --component-header-color-icon-selected: var(--color-icon-strong);
156
+ --component-header-color-background-default: var(--traton-color-transparent-invisible-light);
157
+ --component-header-color-background-hover: var(--color-background-layer-01);
158
+ --component-header-color-background-focus: var(--color-background-base);
159
+ --component-header-color-background-pressed: #002429;
160
+ --component-header-color-background-selected: var(--color-background-base);
161
+ --component-header-color-background-border: var(--traton-color-transparent-invisible-light);
162
+ --component-header-color-background-profile: #002429;
163
+ --component-header-color-expressive-mobile-menu-primary: var(--color-background-base);
164
+ --component-header-color-expressive-mobile-menu-focus: var(--color-background-base);
165
+ --component-header-color-expressive-mobile-menu-pressed: #002429;
166
+ --component-header-color-expressive-mobile-menu-selected: var(--traton-color-base-white);
167
+ --component-header-color-expressive-mobile-menu-selected-expressive: var(
168
+ --traton-color-base-white
169
+ );
170
+ --component-header-text-application-name-font-family: var(--traton-font-family-display);
171
+ --component-header-text-application-name-font-weight: var(--traton-font-weight-medium);
172
+ --component-header-text-application-name-font-size: 14;
173
+ --component-header-text-application-name-line-height: 16;
174
+ --component-header-text-application-name-text-transform: none;
175
+ --component-header-text-item-font-family: var(--traton-font-family-default);
176
+ --component-header-text-item-font-weight: var(--traton-font-weight-medium);
177
+ --component-header-text-item-font-size: 14;
178
+ --component-header-text-item-line-height: 16;
179
+ --component-header-text-item-text-transform: none;
180
+ --component-header-text-item-selected-font-family: var(--traton-font-family-default);
181
+ --component-header-text-item-selected-font-weight: var(--traton-font-weight-semi-bold);
182
+ --component-header-text-item-selected-font-size: 14;
183
+ --component-header-text-item-selected-line-height: 18;
184
+ --component-header-text-item-selected-text-transform: none;
185
+ --component-header-text-item-profile-font-family: var(--traton-font-family-default);
186
+ --component-header-text-item-profile-font-weight: var(--traton-font-weight-semi-bold);
187
+ --component-header-text-item-profile-font-size: 12;
188
+ --component-header-text-item-profile-line-height: 18;
189
+ --component-header-text-item-profile-text-transform: none;
190
+ --component-header-space-profile-padding: var(--traton-unit-20);
191
+ --component-header-space-profile-size: var(--traton-unit-24);
106
192
  }
107
193
 
108
194
  .tl-header {
@@ -160,7 +246,7 @@
160
246
  .scania {
161
247
  /* Light mode - explicit light mode class */
162
248
  }
163
- .scania .tds-mode-light .tl-header {
249
+ .scania .tl-mode-light .tl-header {
164
250
  --header-background: var(--color-brand-primary-800);
165
251
  --header-nav-item: var(--color-foreground-icon-inverse-strong);
166
252
  --header-item-hover: var(--color-brand-primary-700);
@@ -171,7 +257,7 @@
171
257
  .scania {
172
258
  /* Dark mode - override with dark colors */
173
259
  }
174
- .scania .tds-mode-dark .tl-header {
260
+ .scania .tl-mode-dark .tl-header {
175
261
  --header-background: var(--color-brand-primary-900);
176
262
  --header-nav-item: var(--color-foreground-icon-strong);
177
263
  --header-item-hover: var(--color-brand-primary-800);
@@ -196,7 +282,7 @@
196
282
  --header-basic-element-background-selected: var(--color-brand-primary-700);
197
283
  }
198
284
 
199
- .traton .tds-mode-dark .tl-header {
285
+ .traton .tl-mode-dark .tl-header {
200
286
  /* Brand logo - White for dark mode */
201
287
  --header-logotype-local: var(--traton-logotype-white-svg-local);
202
288
  --header-logotype-cdn: var(--traton-logotype-white-svg);
@@ -208,7 +294,7 @@
208
294
  --header-basic-element-background-pressed: var(--color-background-base);
209
295
  --header-basic-element-background-selected: var(--color-background-surface-100);
210
296
  }
211
- .traton .tds-mode-light .tl-header {
297
+ .traton .tl-mode-light .tl-header {
212
298
  /* Brand logo - Black for light mode */
213
299
  --header-logotype-local: var(--traton-logotype-black-svg-local);
214
300
  --header-logotype-cdn: var(--traton-logotype-black-svg);
package/dist/tl-icon.css CHANGED
@@ -460,8 +460,8 @@
460
460
  mask-image: var(--icon-gift-svg);
461
461
  background-color: currentcolor;
462
462
  }
463
- .tl-icon--gift inactive {
464
- mask-image: var(--icon-gift inactive-svg);
463
+ .tl-icon--gift_inactive {
464
+ mask-image: var(--icon-gift_inactive-svg);
465
465
  background-color: currentcolor;
466
466
  }
467
467
  .tl-icon--global {
package/dist/tl-modal.css CHANGED
@@ -17,34 +17,53 @@ body {
17
17
  */
18
18
  :root,
19
19
  .tds-mode-light,
20
- .scania .tds-mode-light {
21
- --component-shadow-hover: var(--scania-color-transparent-shadow-250);
20
+ .scania .tds-mode-light,
21
+ .scania.tds-mode-light,
22
+ .scania .tl-mode-light,
23
+ .scania.tl-mode-light {
24
+ --component-shadow-base-modifier: var(--scania-color-transparent-shadow-100);
22
25
  --component-shadow-default: var(--scania-color-transparent-shadow-150);
26
+ --component-shadow-hover: var(--scania-color-transparent-shadow-250);
23
27
  --component-shadow-pressed: var(--scania-color-transparent-shadow-250);
24
- --component-shadow-dragged: var(--scania-color-transparent-shadow-200);
25
- --component-shadow-base-modifier: var(--scania-color-transparent-shadow-100);
26
28
  --component-shadow-focus: var(--scania-color-transparent-shadow-350);
29
+ --component-shadow-dragged: var(--scania-color-transparent-shadow-200);
30
+ }
31
+
32
+ .traton .tds-mode-light,
33
+ .traton.tds-mode-light,
34
+ .traton .tl-mode-light,
35
+ .traton.tl-mode-light {
36
+ --component-shadow-base-modifier: var(--traton-color-transparent-invisible-dark);
37
+ --component-shadow-default: var(--traton-color-transparent-invisible-dark);
38
+ --component-shadow-hover: var(--traton-color-transparent-invisible-dark);
39
+ --component-shadow-pressed: var(--traton-color-transparent-invisible-dark);
40
+ --component-shadow-focus: var(--traton-color-transparent-invisible-dark);
41
+ --component-shadow-dragged: var(--traton-color-transparent-invisible-dark);
27
42
  }
28
43
 
29
44
  .tds-mode-dark,
30
- .scania .tds-mode-dark {
31
- --component-shadow-hover: var(--scania-color-transparent-invisible-dark);
45
+ .scania .tds-mode-dark,
46
+ .scania.tds-mode-dark,
47
+ .scania .tl-mode-dark,
48
+ .scania.tl-mode-dark {
49
+ --component-shadow-base-modifier: var(--scania-color-transparent-invisible-dark);
32
50
  --component-shadow-default: var(--scania-color-transparent-invisible-dark);
51
+ --component-shadow-hover: var(--scania-color-transparent-invisible-dark);
33
52
  --component-shadow-pressed: var(--scania-color-transparent-invisible-dark);
34
- --component-shadow-dragged: var(--scania-color-transparent-invisible-dark);
35
- --component-shadow-base-modifier: var(--scania-color-transparent-invisible-dark);
36
53
  --component-shadow-focus: var(--scania-color-transparent-invisible-dark);
54
+ --component-shadow-dragged: var(--scania-color-transparent-invisible-dark);
37
55
  }
38
56
 
39
- .traton,
40
- .traton .tds-mode-light,
41
- .traton .tds-mode-dark {
42
- --component-shadow-hover: var(--traton-color-transparent-invisible-dark);
57
+ .traton .tds-mode-dark,
58
+ .traton.tds-mode-dark,
59
+ .traton .tl-mode-dark,
60
+ .traton.tl-mode-dark {
61
+ --component-shadow-base-modifier: var(--traton-color-transparent-invisible-dark);
43
62
  --component-shadow-default: var(--traton-color-transparent-invisible-dark);
63
+ --component-shadow-hover: var(--traton-color-transparent-invisible-dark);
44
64
  --component-shadow-pressed: var(--traton-color-transparent-invisible-dark);
45
- --component-shadow-dragged: var(--traton-color-transparent-invisible-dark);
46
- --component-shadow-base-modifier: var(--traton-color-transparent-invisible-dark);
47
65
  --component-shadow-focus: var(--traton-color-transparent-invisible-dark);
66
+ --component-shadow-dragged: var(--traton-color-transparent-invisible-dark);
48
67
  }
49
68
 
50
69
  /* Component variables */
package/dist/tl-side-menu.css CHANGED
@@ -15,71 +15,160 @@ body {
15
15
  /**
16
16
  * Do not edit directly, this file was auto-generated.
17
17
  */
18
- :root .tl-side-menu,
19
- :root tds-side-menu,
20
- .scania .tl-side-menu,
21
- .scania tds-side-menu {
22
- --component-side-menu-color-divider: var(--color-foreground-border-discrete);
23
- --component-side-menu-radius-corner: var(--scania-unit-0);
24
- --component-side-menu-size-close-icon-size: var(--scania-unit-20);
18
+ :root,
19
+ .tds-mode-light,
20
+ .scania .tds-mode-light,
21
+ .scania.tds-mode-light,
22
+ .scania .tl-mode-light,
23
+ .scania.tl-mode-light {
24
+ --component-side-menu-color-divider: var(--color-border-discrete);
25
25
  --component-side-menu-size-icon: var(--scania-unit-24);
26
- --component-side-menu-space-collapsed-item-left-right-inner-icon-padding: 22px;
27
- --component-side-menu-space-sub-menu-item-chevron-right-padding: var(--scania-unit-16);
28
- --component-side-menu-space-sub-menu-item-left: 22px;
29
- --component-side-menu-space-sub-menu-item-profile-gap: var(--scania-unit-16);
26
+ --component-side-menu-size-icon-close: var(--scania-unit-20);
27
+ --component-side-menu-space-top-level-bottom-collapsible: var(--scania-unit-0);
28
+ --component-side-menu-space-top-level-left: var(--scania-unit-0);
29
+ --component-side-menu-space-top-level-top: var(--scania-unit-0);
30
+ --component-side-menu-space-top-level-horizontal-gap-padding: var(--scania-unit-0);
31
+ --component-side-menu-space-top-level-vertical-gap-padding: var(--scania-unit-0);
32
+ --component-side-menu-space-sub-menu-item-left: 22;
33
+ --component-side-menu-space-sub-menu-item-top-bottom: 22;
34
+ --component-side-menu-space-sub-menu-item-right-padding-chevron: var(--scania-unit-16);
35
+ --component-side-menu-space-sub-menu-item-selected-marker-height: 68;
30
36
  --component-side-menu-space-sub-menu-item-profile-left: var(--scania-unit-16);
31
- --component-side-menu-space-sub-menu-item-profile-top-bottom: 18px;
32
- --component-side-menu-space-sub-menu-item-selected-marker-height: 68px;
33
- --component-side-menu-space-sub-menu-item-top-and-bottom: 22px;
37
+ --component-side-menu-space-sub-menu-item-profile-gap: var(--scania-unit-16);
38
+ --component-side-menu-space-sub-menu-item-profile-top-bottom: 18;
39
+ --component-side-menu-space-sub-page-top-bottom: var(--scania-unit-16);
40
+ --component-side-menu-space-sub-page-left-with-icon: 58;
34
41
  --component-side-menu-space-sub-page-left-no-icon: var(--scania-unit-24);
35
42
  --component-side-menu-space-sub-page-left-profile: var(--scania-unit-64);
36
- --component-side-menu-space-sub-page-left-with-icon: 58px;
43
+ --component-side-menu-space-sub-page-top-group: var(--scania-unit-0);
37
44
  --component-side-menu-space-sub-page-selected-marker-height: var(--scania-unit-48);
38
45
  --component-side-menu-space-sub-page-selected-marker-width: var(--scania-unit-4);
39
- --component-side-menu-space-sub-page-top-bottom: var(--scania-unit-16);
40
- --component-side-menu-space-sub-page-top-group: var(--scania-unit-0);
41
- --component-side-menu-space-top-level-bottom-collapsible: var(--scania-unit-0);
42
- --component-side-menu-space-top-level-left: var(--scania-unit-0);
43
- --component-side-menu-space-top-level-top: var(--scania-unit-0);
44
- --component-side-menu-space-top-level-vertical-gap-padding: var(--scania-unit-0);
46
+ --component-side-menu-space-collapsed-item-inner-icon-left-and-right-padding: 22;
47
+ --component-side-menu-space-collapsed-item-inner-icon-top-and-bottom-padding: 22;
48
+ --component-side-menu-radius-default: var(--scania-unit-0);
45
49
  --component-side-menu-text-items-font-family: var(--scania-font-family-semi-condensed);
46
50
  --component-side-menu-text-items-font-weight: var(--scania-font-weight-bold);
47
- --component-side-menu-text-items-font-size: 14px;
48
- --component-side-menu-text-items-line-height: 16px;
49
- --component-side-menu-text-items-letter-spacing: -0.14px;
51
+ --component-side-menu-text-items-font-size: 14;
52
+ --component-side-menu-text-items-line-height: 16;
53
+ --component-side-menu-text-items-letter-spacing: -0.14;
50
54
  --component-side-menu-text-items-text-transform: none;
51
55
  }
52
56
 
53
- .traton .tl-side-menu,
54
- .traton tds-side-menu {
57
+ .traton .tds-mode-light,
58
+ .traton.tds-mode-light,
59
+ .traton .tl-mode-light,
60
+ .traton.tl-mode-light {
55
61
  --component-side-menu-color-divider: var(--traton-color-transparent-invisible-light);
56
- --component-side-menu-radius-corner: var(--traton-unit-8);
57
- --component-side-menu-size-close-icon-size: var(--traton-unit-20);
58
62
  --component-side-menu-size-icon: var(--traton-unit-16);
59
- --component-side-menu-space-collapsed-item-left-right-inner-icon-padding: var(--traton-unit-12);
60
- --component-side-menu-space-sub-menu-item-chevron-right-padding: var(--traton-unit-12);
63
+ --component-side-menu-size-icon-close: var(--traton-unit-20);
64
+ --component-side-menu-space-top-level-bottom-collapsible: var(--traton-unit-16);
65
+ --component-side-menu-space-top-level-left: var(--traton-unit-16);
66
+ --component-side-menu-space-top-level-top: 14;
67
+ --component-side-menu-space-top-level-horizontal-gap-padding: var(--traton-unit-16);
68
+ --component-side-menu-space-top-level-vertical-gap-padding: var(--traton-unit-16);
61
69
  --component-side-menu-space-sub-menu-item-left: var(--traton-unit-12);
62
- --component-side-menu-space-sub-menu-item-profile-gap: var(--traton-unit-8);
70
+ --component-side-menu-space-sub-menu-item-top-bottom: var(--traton-unit-8);
71
+ --component-side-menu-space-sub-menu-item-right-padding-chevron: var(--traton-unit-12);
72
+ --component-side-menu-space-sub-menu-item-selected-marker-height: var(--traton-unit-40);
63
73
  --component-side-menu-space-sub-menu-item-profile-left: var(--traton-unit-8);
74
+ --component-side-menu-space-sub-menu-item-profile-gap: var(--traton-unit-8);
64
75
  --component-side-menu-space-sub-menu-item-profile-top-bottom: var(--traton-unit-4);
65
- --component-side-menu-space-sub-menu-item-selected-marker-height: var(--traton-unit-40);
66
- --component-side-menu-space-sub-menu-item-top-and-bottom: var(--traton-unit-8);
67
- --component-side-menu-space-sub-page-left-no-icon: 14px;
68
- --component-side-menu-space-sub-page-left-profile: var(--traton-unit-48);
69
- --component-side-menu-space-sub-page-left-with-icon: var(--traton-unit-40);
70
- --component-side-menu-space-sub-page-selected-marker-height: 32px;
71
- --component-side-menu-space-sub-page-selected-marker-width: var(--traton-unit-8);
72
76
  --component-side-menu-space-sub-page-top-bottom: var(--traton-unit-8);
77
+ --component-side-menu-space-sub-page-left-with-icon: var(--traton-unit-40);
78
+ --component-side-menu-space-sub-page-left-no-icon: 14;
79
+ --component-side-menu-space-sub-page-left-profile: var(--traton-unit-48);
73
80
  --component-side-menu-space-sub-page-top-group: var(--traton-unit-4);
81
+ --component-side-menu-space-sub-page-selected-marker-height: 34;
82
+ --component-side-menu-space-sub-page-selected-marker-width: var(--traton-unit-8);
83
+ --component-side-menu-space-collapsed-item-inner-icon-left-and-right-padding: var(
84
+ --traton-unit-12
85
+ );
86
+ --component-side-menu-space-collapsed-item-inner-icon-top-and-bottom-padding: var(
87
+ --traton-unit-12
88
+ );
89
+ --component-side-menu-radius-default: var(--traton-unit-8);
90
+ --component-side-menu-text-items-font-family: var(--traton-font-family-default);
91
+ --component-side-menu-text-items-font-weight: var(--traton-font-weight-medium);
92
+ --component-side-menu-text-items-font-size: 14;
93
+ --component-side-menu-text-items-line-height: 18;
94
+ --component-side-menu-text-items-text-transform: none;
95
+ }
96
+
97
+ .tds-mode-dark,
98
+ .scania .tds-mode-dark,
99
+ .scania.tds-mode-dark,
100
+ .scania .tl-mode-dark,
101
+ .scania.tl-mode-dark {
102
+ --component-side-menu-color-divider: var(--color-border-discrete);
103
+ --component-side-menu-size-icon: var(--scania-unit-24);
104
+ --component-side-menu-size-icon-close: var(--scania-unit-20);
105
+ --component-side-menu-space-top-level-bottom-collapsible: var(--scania-unit-0);
106
+ --component-side-menu-space-top-level-left: var(--scania-unit-0);
107
+ --component-side-menu-space-top-level-top: var(--scania-unit-0);
108
+ --component-side-menu-space-top-level-horizontal-gap-padding: var(--scania-unit-0);
109
+ --component-side-menu-space-top-level-vertical-gap-padding: var(--scania-unit-0);
110
+ --component-side-menu-space-sub-menu-item-left: 22;
111
+ --component-side-menu-space-sub-menu-item-top-bottom: 22;
112
+ --component-side-menu-space-sub-menu-item-right-padding-chevron: var(--scania-unit-16);
113
+ --component-side-menu-space-sub-menu-item-selected-marker-height: 68;
114
+ --component-side-menu-space-sub-menu-item-profile-left: var(--scania-unit-16);
115
+ --component-side-menu-space-sub-menu-item-profile-gap: var(--scania-unit-16);
116
+ --component-side-menu-space-sub-menu-item-profile-top-bottom: 18;
117
+ --component-side-menu-space-sub-page-top-bottom: var(--scania-unit-16);
118
+ --component-side-menu-space-sub-page-left-with-icon: 58;
119
+ --component-side-menu-space-sub-page-left-no-icon: var(--scania-unit-24);
120
+ --component-side-menu-space-sub-page-left-profile: var(--scania-unit-64);
121
+ --component-side-menu-space-sub-page-top-group: var(--scania-unit-0);
122
+ --component-side-menu-space-sub-page-selected-marker-height: var(--scania-unit-48);
123
+ --component-side-menu-space-sub-page-selected-marker-width: var(--scania-unit-4);
124
+ --component-side-menu-space-collapsed-item-inner-icon-left-and-right-padding: 22;
125
+ --component-side-menu-space-collapsed-item-inner-icon-top-and-bottom-padding: 22;
126
+ --component-side-menu-radius-default: var(--scania-unit-0);
127
+ --component-side-menu-text-items-font-family: var(--scania-font-family-semi-condensed);
128
+ --component-side-menu-text-items-font-weight: var(--scania-font-weight-bold);
129
+ --component-side-menu-text-items-font-size: 14;
130
+ --component-side-menu-text-items-line-height: 16;
131
+ --component-side-menu-text-items-letter-spacing: -0.14;
132
+ --component-side-menu-text-items-text-transform: none;
133
+ }
134
+
135
+ .traton .tds-mode-dark,
136
+ .traton.tds-mode-dark,
137
+ .traton .tl-mode-dark,
138
+ .traton.tl-mode-dark {
139
+ --component-side-menu-color-divider: var(--traton-color-transparent-invisible-dark);
140
+ --component-side-menu-size-icon: var(--traton-unit-16);
141
+ --component-side-menu-size-icon-close: var(--traton-unit-20);
74
142
  --component-side-menu-space-top-level-bottom-collapsible: var(--traton-unit-16);
75
143
  --component-side-menu-space-top-level-left: var(--traton-unit-16);
76
- --component-side-menu-space-top-level-top: var(--traton-unit-14);
144
+ --component-side-menu-space-top-level-top: 14;
145
+ --component-side-menu-space-top-level-horizontal-gap-padding: var(--traton-unit-16);
77
146
  --component-side-menu-space-top-level-vertical-gap-padding: var(--traton-unit-16);
147
+ --component-side-menu-space-sub-menu-item-left: var(--traton-unit-12);
148
+ --component-side-menu-space-sub-menu-item-top-bottom: var(--traton-unit-8);
149
+ --component-side-menu-space-sub-menu-item-right-padding-chevron: var(--traton-unit-12);
150
+ --component-side-menu-space-sub-menu-item-selected-marker-height: var(--traton-unit-40);
151
+ --component-side-menu-space-sub-menu-item-profile-left: var(--traton-unit-8);
152
+ --component-side-menu-space-sub-menu-item-profile-gap: var(--traton-unit-8);
153
+ --component-side-menu-space-sub-menu-item-profile-top-bottom: var(--traton-unit-4);
154
+ --component-side-menu-space-sub-page-top-bottom: var(--traton-unit-8);
155
+ --component-side-menu-space-sub-page-left-with-icon: var(--traton-unit-40);
156
+ --component-side-menu-space-sub-page-left-no-icon: 14;
157
+ --component-side-menu-space-sub-page-left-profile: var(--traton-unit-48);
158
+ --component-side-menu-space-sub-page-top-group: var(--traton-unit-4);
159
+ --component-side-menu-space-sub-page-selected-marker-height: 34;
160
+ --component-side-menu-space-sub-page-selected-marker-width: var(--traton-unit-8);
161
+ --component-side-menu-space-collapsed-item-inner-icon-left-and-right-padding: var(
162
+ --traton-unit-12
163
+ );
164
+ --component-side-menu-space-collapsed-item-inner-icon-top-and-bottom-padding: var(
165
+ --traton-unit-12
166
+ );
167
+ --component-side-menu-radius-default: var(--traton-unit-8);
78
168
  --component-side-menu-text-items-font-family: var(--traton-font-family-default);
79
169
  --component-side-menu-text-items-font-weight: var(--traton-font-weight-medium);
80
- --component-side-menu-text-items-font-size: 14px;
81
- --component-side-menu-text-items-line-height: 18px;
82
- --component-side-menu-text-items-letter-spacing: 0;
170
+ --component-side-menu-text-items-font-size: 14;
171
+ --component-side-menu-text-items-line-height: 18;
83
172
  --component-side-menu-text-items-text-transform: none;
84
173
  }
85
174