@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-chip.css CHANGED
@@ -1,69 +1,21 @@
1
1
  /* Typography Usage mixins */
2
2
  .tl-chip {
3
- --chip-text: var(--color-foreground-text-strong);
4
- --chip-text-active: var(--component-chip-foreground-inverse);
5
- --chip-background: var(--component-chip-color-default);
6
- --chip-background-active: var(--component-chip-color-selected);
7
- --chip-background-disabled: var(--component-chip-color-disabled);
8
- --chip-text-disabled: var(--color-foreground-text-disabled);
9
- --chip-text-checked-disabled: var(--component-chip-foreground-foreground-disabled-selected);
10
- --chip-background-active-hover: var(--component-chip-color-hover-on-selected);
11
- --chip-background-hover: var(--component-chip-color-hover);
12
- --chip-background-focus: var(--component-chip-color-focused);
13
- --chip-border-radius: var(--component-chip-border-radius);
14
- --chip-focused-on-selected: var(--component-chip-color-focused-on-selected);
15
- --component-chip-color-focused-on-selected: var(--color-system-info-subtle);
16
- --component-chip-color-disabled: var(--color-background-surface-100);
17
- --component-chip-color-focused: var(--color-background-layer-02);
18
- --component-chip-color-hover: var(--color-background-surface-600);
19
- --component-chip-color-selected: var(--color-brand-primary-400);
20
- --component-chip-color-disabled-selected: var(--color-brand-primary-400);
21
- --component-chip-color-hover-on-selected: var(--color-system-info-default);
22
- --component-chip-color-default: var(--color-background-surface-200);
23
- --component-chip-foreground-inverse: var(--color-foreground-text-inverse-strong);
24
- --component-chip-foreground-foreground-disabled-selected: var(
25
- --color-foreground-text-inverse-subtle
26
- );
27
- --component-chip-border-selected-focus-border: var(--color-system-info-default);
28
- }
29
-
30
- :root .tl-chip,
31
- .scania .tl-chip {
32
- --component-chip-border-radius: 16px;
33
- }
34
- :root .tds-mode-light .tl-chip,
35
- .scania .tds-mode-light .tl-chip {
36
- --component-chip-color-hover: var(--color-background-surface-300);
37
- --component-chip-foreground-foreground-disabled-selected: var(
38
- --color-foreground-text-inverse-subtle
39
- );
40
- }
41
- :root .tds-mode-dark .tl-chip,
42
- .scania .tds-mode-dark .tl-chip {
43
- --component-chip-color-default: var(--color-background-surface-400);
44
- --component-chip-color-focused-on-selected: var(--color-system-info-discrete);
45
- --component-chip-color-hover-on-selected: var(--color-system-info-default);
46
- --component-chip-foreground-foreground-disabled-selected: var(--color-foreground-text-subtle);
47
- --component-chip-foreground-inverse: var(--color-foreground-text-strong);
48
- }
49
-
50
- .traton .tl-chip {
51
- --component-chip-border-radius: 2px;
52
- }
53
- .traton .tds-mode-light .tl-chip {
54
- --component-chip-color-default: var(--color-background-surface-200);
55
- --component-chip-color-selected: var(--color-background-surface-300);
56
- --component-chip-color-hover-on-selected: var(--color-background-surface-400);
57
- --component-chip-foreground-inverse: var(--color-foreground-text-strong);
58
- --component-chip-color-focused-on-selected: var(--component-chip-color-focused);
59
- --component-chip-foreground-foreground-disabled-selected: var(--color-background-surface-200);
60
- }
61
- .traton .tds-mode-dark .tl-chip {
62
- --component-chip-color-default: var(--color-background-surface-300);
63
- --component-chip-color-disabled: var(--color-background-surface-200);
64
- --component-chip-foreground-inverse: var(--color-foreground-text-inverse-strong);
65
- --component-chip-color-focused-on-selected: var(--color-background-surface-700);
66
- --component-chip-color-hover-on-selected: var(--color-background-surface-800);
3
+ --chip-text: var(--component-chip-text-default);
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);
8
+ --chip-background-active: var(--component-chip-background-selected-default);
9
+ --chip-background-active-hover: var(--component-chip-background-selected-hover);
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);
13
+ --chip-border-selected: var(--component-chip-border-selected-default);
14
+ --chip-border-selected-hover: var(--component-chip-border-selected-hover);
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);
18
+ --chip-icon-fill-active: var(--component-chip-text-selected-default);
67
19
  }
68
20
 
69
21
  .tl-chip {
@@ -78,7 +30,7 @@
78
30
  gap: 8px;
79
31
  padding: 8px 16px;
80
32
  border-radius: var(--chip-border-radius);
81
- border: none;
33
+ border: 1px solid var(--chip-border);
82
34
  background-color: var(--chip-background);
83
35
  color: var(--chip-text);
84
36
  cursor: pointer;
@@ -89,6 +41,7 @@
89
41
  }
90
42
  .tl-chip:hover {
91
43
  background-color: var(--chip-background-hover);
44
+ border-color: var(--chip-border-hover);
92
45
  }
93
46
  .tl-chip:focus-visible {
94
47
  outline: var(--dimension-radius-focus-width) solid var(--color-foreground-border-accent-focus);
@@ -109,9 +62,11 @@
109
62
  .tl-chip--selected {
110
63
  background-color: var(--chip-background-active);
111
64
  color: var(--chip-text-active);
65
+ border-color: var(--chip-border-selected);
112
66
  }
113
67
  .tl-chip--selected:hover {
114
68
  background-color: var(--chip-background-active-hover);
69
+ border-color: var(--chip-border-selected-hover);
115
70
  }
116
71
  .tl-chip--selected:focus-visible {
117
72
  outline: var(--dimension-radius-focus-width) solid var(--color-foreground-border-accent-focus);
@@ -122,12 +77,7 @@
122
77
  .tl-chip:disabled {
123
78
  cursor: not-allowed;
124
79
  pointer-events: none;
125
- background-color: var(--chip-background-disabled);
126
- color: var(--chip-text-disabled);
127
- }
128
- .tl-chip:disabled.tl-chip--selected {
129
- background-color: var(--chip-background-active);
130
- color: var(--chip-text-checked-disabled);
80
+ opacity: var(--chip-opacity-disabled);
131
81
  }
132
82
  .tl-chip--lg.tl-chip--prefix:not(.tl-chip--suffix) {
133
83
  padding: 0 16px 0 8px;
package/dist/tl-datetime.css CHANGED
@@ -213,9 +213,9 @@
213
213
  background-color: var(--datetime-icon-error);
214
214
  }
215
215
  .tl-datetime__wrapper {
216
- /* Disabled state (should not override error state) */
216
+ /* Disabled state */
217
217
  }
218
- .tl-datetime:has(input:disabled):not(.tl-datetime--error) .tl-datetime__wrapper::after {
218
+ .tl-datetime:has(input:disabled) .tl-datetime__wrapper::after {
219
219
  background-color: var(--datetime-icon-disabled);
220
220
  }
221
221
 
@@ -248,7 +248,7 @@
248
248
  .tl-datetime__input:focus {
249
249
  box-shadow: inset var(--datetime-box-shadow-focus);
250
250
  }
251
- .tl-datetime:hover .tl-datetime__input:not(:focus) {
251
+ .tl-datetime:hover .tl-datetime__input:not(:focus):not(:disabled) {
252
252
  box-shadow: inset var(--datetime-box-shadow-hover);
253
253
  }
254
254
  .tl-datetime--error .tl-datetime__input {
@@ -257,9 +257,12 @@
257
257
  .tl-datetime--error .tl-datetime__input:focus {
258
258
  box-shadow: inset var(--datetime-box-shadow-error-focus);
259
259
  }
260
- .tl-datetime--error:hover .tl-datetime__input:not(:focus) {
260
+ .tl-datetime--error:hover .tl-datetime__input:not(:focus):not(:disabled) {
261
261
  box-shadow: inset var(--datetime-box-shadow-error-hover);
262
262
  }
263
+ .tl-datetime--error .tl-datetime__input:disabled {
264
+ box-shadow: inset var(--datetime-box-shadow-error);
265
+ }
263
266
  .tl-datetime__input::placeholder {
264
267
  opacity: 1;
265
268
  color: var(--datetime-placeholder);
package/dist/tl-dropdown.css CHANGED
@@ -1,16 +1,63 @@
1
1
  /**
2
2
  * Do not edit directly, this file was auto-generated.
3
3
  */
4
- .tl-dropdown,
5
- tds-dropdown {
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-dropdown-hover: #edeff3;
11
+ --component-dropdown-focus: #edeff3;
12
+ --component-dropdown-secondary-hover: #edeff3;
13
+ --component-dropdown-secondary-focus: #edeff3;
14
+ --component-dropdown-list-item-hover: #edeff3;
15
+ --component-dropdown-list-item-focus: #edeff3;
16
+ --component-dropdown-list-item-secondary-hover: #edeff3;
17
+ --component-dropdown-list-item-secondary-focus: #edeff3;
18
+ }
19
+
20
+ .traton .tds-mode-light,
21
+ .traton.tds-mode-light,
22
+ .traton .tl-mode-light,
23
+ .traton.tl-mode-light {
24
+ --component-dropdown-hover: #ebe7dd;
25
+ --component-dropdown-focus: var(--color-background-layer-01);
26
+ --component-dropdown-secondary-hover: #ebe7dd;
27
+ --component-dropdown-secondary-focus: var(--color-background-layer-02);
28
+ --component-dropdown-list-item-hover: #ebe7dd;
29
+ --component-dropdown-list-item-focus: var(--color-background-layer-01);
30
+ --component-dropdown-list-item-secondary-hover: #ebe7dd;
31
+ --component-dropdown-list-item-secondary-focus: var(--color-background-layer-02);
32
+ }
33
+
34
+ .tds-mode-dark,
35
+ .scania .tds-mode-dark,
36
+ .scania.tds-mode-dark,
37
+ .scania .tl-mode-dark,
38
+ .scania.tl-mode-dark {
39
+ --component-dropdown-hover: var(--color-background-layer-02);
40
+ --component-dropdown-focus: var(--color-background-layer-02);
41
+ --component-dropdown-secondary-hover: var(--color-background-layer-03);
42
+ --component-dropdown-secondary-focus: var(--color-background-layer-03);
43
+ --component-dropdown-list-item-hover: var(--color-background-layer-02);
44
+ --component-dropdown-list-item-focus: var(--color-background-layer-02);
6
45
  --component-dropdown-list-item-secondary-hover: var(--color-background-layer-03);
7
46
  --component-dropdown-list-item-secondary-focus: var(--color-background-layer-03);
8
- --component-dropdown-list-item-focus: var(--color-background-layer-02);
9
- --component-dropdown-list-item-hover: var(--color-background-layer-02);
47
+ }
48
+
49
+ .traton .tds-mode-dark,
50
+ .traton.tds-mode-dark,
51
+ .traton .tl-mode-dark,
52
+ .traton.tl-mode-dark {
53
+ --component-dropdown-hover: var(--color-background-layer-02);
54
+ --component-dropdown-focus: var(--color-background-layer-01);
10
55
  --component-dropdown-secondary-hover: var(--color-background-layer-03);
11
- --component-dropdown-secondary-focus: var(--color-background-layer-03);
12
- --component-dropdown-focus: var(--color-background-surface-300);
13
- --component-dropdown-hover: var(--color-background-surface-100);
56
+ --component-dropdown-secondary-focus: var(--color-background-layer-02);
57
+ --component-dropdown-list-item-hover: var(--color-background-layer-02);
58
+ --component-dropdown-list-item-focus: var(--color-background-layer-01);
59
+ --component-dropdown-list-item-secondary-hover: var(--color-background-layer-03);
60
+ --component-dropdown-list-item-secondary-focus: var(--color-background-layer-02);
14
61
  }
15
62
 
16
63
  .tl-dropdown-option {
@@ -622,7 +669,7 @@ body {
622
669
  scrollbar-width: var(--tl-scrollbar-width-standard);
623
670
  }
624
671
  }
625
- .tds-mode-dark .tl-dropdown__list {
672
+ .tl-mode-dark .tl-dropdown__list {
626
673
  box-shadow: none;
627
674
  }
628
675
  .tl-dropdown--dropup .tl-dropdown__list {
package/dist/tl-footer.css CHANGED
@@ -2,65 +2,47 @@
2
2
  /**
3
3
  * Do not edit directly, this file was auto-generated.
4
4
  */
5
- .tl-footer,
6
- tds-footer {
7
- --component-footer-text-color-copyright: var(--color-foreground-text-soft);
8
- --component-footer-text-color-link-text: var(--color-brand-primary-50);
9
- --component-footer-primary: var(--scania-color-blue-900);
10
- --component-footer-border: var(--scania-color-blue-800);
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-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);
15
+ }
16
+
17
+ .traton .tds-mode-light,
18
+ .traton.tds-mode-light,
19
+ .traton .tl-mode-light,
20
+ .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);
11
25
  }
12
26
 
13
- :root .tl-footer,
14
- :root tds-footer,
15
- .scania .tl-footer,
16
- .scania tds-footer {
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-footer-border: var(--scania-color-blue-800);
17
33
  --component-footer-primary: var(--scania-color-blue-900);
18
- --component-footer-border: var(--scania-color-blue-700);
19
- --component-footer-text-color-copyright: var(--color-foreground-text-inverse-soft);
20
- --component-footer-text-color-link-text: var(--color-foreground-text-brand);
21
- --component-footer-logotype-cdn: var(--tds-background-image-scania-wordmark-white-svg);
22
- --component-footer-logotype-local: var(--tds-background-image-scania-wordmark-white-svg-local);
23
- }
24
- :root .tds-mode-light tds-footer,
25
- :root .tds-mode-light .tl-footer,
26
- .scania .tds-mode-light tds-footer,
27
- .scania .tds-mode-light .tl-footer {
28
- --component-footer-text-color-copyright: var(--color-foreground-text-inverse-soft);
29
- --component-footer-text-color-link-text: var(--color-foreground-text-brand);
30
- --component-footer-logotype-cdn: var(--tds-background-image-scania-wordmark-white-svg);
31
- --component-footer-logotype-local: var(--tds-background-image-scania-wordmark-white-svg-local);
32
- }
33
- :root .tds-mode-dark tds-footer,
34
- :root .tds-mode-dark .tl-footer,
35
- .scania .tds-mode-dark tds-footer,
36
- .scania .tds-mode-dark .tl-footer {
37
- --component-footer-text-color-copyright: var(--color-foreground-text-soft);
38
- --component-footer-text-color-link-text: var(--color-brand-primary-50);
39
- --component-footer-logotype-cdn: var(--tds-background-image-scania-wordmark-white-svg);
40
- --component-footer-logotype-local: var(--tds-background-image-scania-wordmark-white-svg-local);
34
+ --component-footer-color-text-link-default: #d8dde5;
35
+ --component-footer-color-text-copyright-default: var(--color-text-soft);
41
36
  }
42
37
 
43
- .traton tds-footer,
44
- .traton .tl-footer {
45
- --component-footer-primary: var(--traton-color-grey-50);
38
+ .traton .tds-mode-dark,
39
+ .traton.tds-mode-dark,
40
+ .traton .tl-mode-dark,
41
+ .traton.tl-mode-dark {
46
42
  --component-footer-border: var(--traton-color-transparent-invisible-light);
47
- --component-footer-text-color-copyright: var(--traton-color-transparent-600);
48
- --component-footer-text-color-link-text: var(--color-foreground-text-strong);
49
- --component-footer-logotype-cdn: var(--traton-logotype-black-svg);
50
- --component-footer-logotype-local: var(--traton-logotype-black-svg-local);
51
- }
52
- .traton .tds-mode-light tds-footer,
53
- .traton .tds-mode-light .tl-footer {
54
- --component-footer-text-color-copyright: var(--traton-color-transparent-600);
55
- --component-footer-logotype-cdn: var(--traton-logotype-black-svg);
56
- --component-footer-logotype-local: var(--traton-logotype-black-svg-local);
57
- }
58
- .traton .tds-mode-dark tds-footer,
59
- .traton .tds-mode-dark .tl-footer {
60
- --component-footer-text-color-copyright: var(--traton-color-transparent-inverse-600);
61
43
  --component-footer-primary: var(--traton-color-blue-1000);
62
- --component-footer-logotype-cdn: var(--traton-logotype-white-svg);
63
- --component-footer-logotype-local: var(--traton-logotype-white-svg-local);
44
+ --component-footer-color-text-link-default: var(--color-text-strong);
45
+ --component-footer-color-text-copyright-default: var(--traton-color-transparent-inverse-600);
64
46
  }
65
47
 
66
48
  .tl-footer {