@scania/tegel-lite 0.1.0-variables-beta.1 → 1.0.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 (62) hide show
  1. package/README.dev.md +1 -5
  2. package/README.md +12 -12
  3. package/dist/assets/fonts/traton/TratonTypeDisplay-Bold.woff +0 -0
  4. package/dist/assets/fonts/traton/TratonTypeDisplay-Bold.woff2 +0 -0
  5. package/dist/assets/fonts/traton/TratonTypeDisplay-Medium.woff +0 -0
  6. package/dist/assets/fonts/traton/TratonTypeDisplay-Medium.woff2 +0 -0
  7. package/dist/assets/fonts/traton/TratonTypeText-Bold.woff +0 -0
  8. package/dist/assets/fonts/traton/TratonTypeText-Bold.woff2 +0 -0
  9. package/dist/assets/fonts/traton/TratonTypeText-BoldItalic.woff +0 -0
  10. package/dist/assets/fonts/traton/TratonTypeText-BoldItalic.woff2 +0 -0
  11. package/dist/assets/fonts/traton/TratonTypeText-Italic.woff +0 -0
  12. package/dist/assets/fonts/traton/TratonTypeText-Italic.woff2 +0 -0
  13. package/dist/assets/fonts/traton/TratonTypeText-Medium.woff +0 -0
  14. package/dist/assets/fonts/traton/TratonTypeText-Medium.woff2 +0 -0
  15. package/dist/assets/fonts/traton/TratonTypeText-MediumItalic.woff +0 -0
  16. package/dist/assets/fonts/traton/TratonTypeText-MediumItalic.woff2 +0 -0
  17. package/dist/assets/fonts/traton/TratonTypeText-Regular.woff +0 -0
  18. package/dist/assets/fonts/traton/TratonTypeText-Regular.woff2 +0 -0
  19. package/dist/assets/fonts/traton/TratonTypeText-SemiBold.woff +0 -0
  20. package/dist/assets/fonts/traton/TratonTypeText-SemiBold.woff2 +0 -0
  21. package/dist/assets/fonts/traton/TratonTypeText-SemiBoldItalic.woff2 +0 -0
  22. package/dist/assets/icons/traton/placeholder.svg +3 -0
  23. package/dist/components.css +3552 -7157
  24. package/dist/global.css +134 -11
  25. package/dist/scania-variables.css +357 -136
  26. package/dist/tl-accordion.css +88 -35
  27. package/dist/tl-banner.css +88 -13
  28. package/dist/tl-block.css +62 -7
  29. package/dist/tl-breadcrumbs.css +55 -6
  30. package/dist/tl-button.css +192 -160
  31. package/dist/tl-card.css +54 -66
  32. package/dist/tl-checkbox.css +195 -115
  33. package/dist/tl-divider.css +61 -3
  34. package/dist/tl-footer.css +98 -38
  35. package/dist/tl-icon.css +4 -0
  36. package/dist/tl-link.css +114 -16
  37. package/dist/tl-message.css +128 -14
  38. package/dist/tl-modal.css +123 -20
  39. package/dist/tl-radio-button.css +158 -96
  40. package/dist/tl-text-field.css +256 -76
  41. package/dist/tl-textarea.css +274 -76
  42. package/dist/tl-toast.css +119 -10
  43. package/dist/tl-toggle.css +149 -44
  44. package/dist/tl-tooltip.css +17 -15
  45. package/dist/traton-variables.css +365 -23
  46. package/package.json +5 -26
  47. package/dist/tl-badge.css +0 -45
  48. package/dist/tl-checkbox-vars.css +0 -38
  49. package/dist/tl-chip.css +0 -99
  50. package/dist/tl-dropdown.css +0 -913
  51. package/dist/tl-folder-tabs.css +0 -139
  52. package/dist/tl-header.css +0 -935
  53. package/dist/tl-inline-tabs.css +0 -173
  54. package/dist/tl-navigation-tabs.css +0 -171
  55. package/dist/tl-popover-canvas.css +0 -70
  56. package/dist/tl-popover-menu.css +0 -123
  57. package/dist/tl-side-menu.css +0 -695
  58. package/dist/tl-slider.css +0 -2242
  59. package/dist/tl-spinner.css +0 -78
  60. package/dist/tl-step.css +0 -239
  61. package/dist/tl-stepper.css +0 -83
  62. package/dist/tl-table.css +0 -849
package/dist/tl-toggle.css CHANGED
@@ -1,11 +1,115 @@
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-toggle-background-selected-default: var(--scania-color-green-300);
12
+ --component-toggle-background-standard-default: var(--scania-color-grey-350);
13
+ --component-toggle-background-selected-hover: var(--scania-color-green-400);
14
+ --component-toggle-background-standard-hover: var(--scania-color-grey-500);
15
+ --component-toggle-background-selected-active: var(--scania-color-green-500);
16
+ --component-toggle-background-standard-active: var(--scania-color-grey-600);
17
+ --component-toggle-border-radius-default: var(--scania-unit-9999);
18
+ --component-toggle-focus-ring-radius-default: var(--component--focus-ring-radius-full);
19
+ --component-toggle-icon-standard-default: var(--scania-color-base-white);
20
+ --component-toggle-icon-standard-hover: var(--scania-color-base-white);
21
+ --component-toggle-icon-standard-active: var(--scania-color-base-white);
22
+ --component-toggle-icon-selected-default: var(--scania-color-base-white);
23
+ --component-toggle-icon-selected-hover: var(--scania-color-base-white);
24
+ --component-toggle-icon-selected-active: var(--scania-color-base-white);
25
+ --component-toggle-opacity-disabled: var(--scania-opacity-25);
26
+ --component-toggle-text-default: var(--color-text-strong);
27
+ }
28
+
29
+ .traton .tds-mode-light,
30
+ .traton.tds-mode-light,
31
+ .traton .tl-mode-light,
32
+ .traton.tl-mode-light {
33
+ --component-toggle-background-selected-default: var(--traton-color-green-300);
34
+ --component-toggle-background-standard-default: var(--traton-color-grey-400);
35
+ --component-toggle-background-selected-hover: var(--traton-color-green-400);
36
+ --component-toggle-background-standard-hover: var(--traton-color-grey-500);
37
+ --component-toggle-background-selected-active: var(--traton-color-green-500);
38
+ --component-toggle-background-standard-active: var(--traton-color-grey-600);
39
+ --component-toggle-border-radius-default: var(--traton-unit-9999);
40
+ --component-toggle-focus-ring-radius-default: var(--component--focus-ring-radius-full);
41
+ --component-toggle-icon-standard-default: var(--traton-color-base-white);
42
+ --component-toggle-icon-standard-hover: var(--traton-color-base-white);
43
+ --component-toggle-icon-standard-active: var(--traton-color-base-white);
44
+ --component-toggle-icon-selected-default: var(--traton-color-base-white);
45
+ --component-toggle-icon-selected-hover: var(--traton-color-base-white);
46
+ --component-toggle-icon-selected-active: var(--traton-color-base-white);
47
+ --component-toggle-opacity-disabled: var(--traton-opacity-25);
48
+ --component-toggle-text-default: var(--color-text-strong);
49
+ }
50
+
51
+ .tds-mode-dark,
52
+ .scania .tds-mode-dark,
53
+ .scania.tds-mode-dark,
54
+ .scania .tl-mode-dark,
55
+ .scania.tl-mode-dark {
56
+ --component-toggle-background-selected-default: var(--scania-color-green-300);
57
+ --component-toggle-background-standard-default: var(--scania-color-grey-350);
58
+ --component-toggle-background-selected-hover: var(--scania-color-green-400);
59
+ --component-toggle-background-standard-hover: var(--scania-color-grey-500);
60
+ --component-toggle-background-selected-active: var(--scania-color-green-500);
61
+ --component-toggle-background-standard-active: var(--scania-color-grey-600);
62
+ --component-toggle-border-radius-default: var(--scania-unit-9999);
63
+ --component-toggle-focus-ring-radius-default: var(--component--focus-ring-radius-full);
64
+ --component-toggle-icon-standard-default: var(--scania-color-base-white);
65
+ --component-toggle-icon-standard-hover: var(--scania-color-base-white);
66
+ --component-toggle-icon-standard-active: var(--scania-color-base-white);
67
+ --component-toggle-icon-selected-default: var(--scania-color-base-white);
68
+ --component-toggle-icon-selected-hover: var(--scania-color-base-white);
69
+ --component-toggle-icon-selected-active: var(--scania-color-base-white);
70
+ --component-toggle-opacity-disabled: var(--scania-opacity-25);
71
+ --component-toggle-text-default: var(--color-text-strong);
72
+ }
73
+
74
+ .traton .tds-mode-dark,
75
+ .traton.tds-mode-dark,
76
+ .traton .tl-mode-dark,
77
+ .traton.tl-mode-dark {
78
+ --component-toggle-background-selected-default: var(--traton-color-green-300);
79
+ --component-toggle-background-standard-default: var(--traton-color-grey-400);
80
+ --component-toggle-background-selected-hover: var(--traton-color-green-400);
81
+ --component-toggle-background-standard-hover: var(--traton-color-grey-500);
82
+ --component-toggle-background-selected-active: var(--traton-color-green-500);
83
+ --component-toggle-background-standard-active: var(--traton-color-grey-600);
84
+ --component-toggle-border-radius-default: var(--traton-unit-9999);
85
+ --component-toggle-focus-ring-radius-default: var(--component--focus-ring-radius-full);
86
+ --component-toggle-icon-standard-default: var(--traton-color-base-white);
87
+ --component-toggle-icon-standard-hover: var(--traton-color-base-white);
88
+ --component-toggle-icon-standard-active: var(--traton-color-base-white);
89
+ --component-toggle-icon-selected-default: var(--traton-color-base-white);
90
+ --component-toggle-icon-selected-hover: var(--traton-color-base-white);
91
+ --component-toggle-icon-selected-active: var(--traton-color-base-white);
92
+ --component-toggle-opacity-disabled: var(--traton-opacity-25);
93
+ --component-toggle-text-default: var(--color-text-strong);
94
+ }
95
+
2
96
  .tl-toggle {
3
- --toggle-switch: var(--color-brand-neutral-white);
4
- --toggle-text: var(--color-foreground-text-strong);
5
- --toggle-disabled: var(--color-foreground-icon-disabled);
6
- --toggle-background-on: var(--color-system-success-default);
7
- --toggle-background-off: var(--color-foreground-icon-subtle);
8
- --toggle-border-focus: var(--color-foreground-border-accent-focus);
97
+ --toggle-text: var(--component-toggle-text-default);
98
+ --toggle-off: var(--component-toggle-background-standard-default);
99
+ --toggle-off-hover: var(--component-toggle-background-standard-hover);
100
+ --toggle-off-active: var(--component-toggle-background-standard-active);
101
+ --toggle-on: var(--component-toggle-background-selected-default);
102
+ --toggle-on-hover: var(--component-toggle-background-selected-hover);
103
+ --toggle-on-active: var(--component-toggle-background-selected-active);
104
+ --toggle-knob: var(--component-toggle-icon-standard-default);
105
+ --toggle-knob-hover: var(--component-toggle-icon-standard-hover);
106
+ --toggle-knob-active: var(--component-toggle-icon-standard-active);
107
+ --toggle-knob-on: var(--component-toggle-icon-selected-default);
108
+ --toggle-knob-on-hover: var(--component-toggle-icon-selected-hover);
109
+ --toggle-knob-on-active: var(--component-toggle-icon-selected-active);
110
+ --toggle-border-radius: calc(var(--component-toggle-border-radius-default) * 1px);
111
+ --toggle-focus-ring-radius: calc(var(--component-toggle-focus-ring-radius-default) * 1px);
112
+ --toggle-opacity-disabled: calc(var(--component-toggle-opacity-disabled) / 100);
9
113
  }
10
114
 
11
115
  .tl-toggle:has(input[type=checkbox]:disabled) {
@@ -28,60 +132,70 @@
28
132
  position: absolute;
29
133
  box-sizing: border-box;
30
134
  }
135
+ .tl-toggle__input {
136
+ /* Track */
137
+ }
31
138
  .tl-toggle__input::before {
32
- /* Slider */
33
- background-color: var(--toggle-background-off);
34
- border: 2px solid transparent;
35
- border-radius: 16px;
139
+ background-color: var(--toggle-off);
140
+ border: 1px solid transparent;
141
+ border-radius: var(--toggle-border-radius);
36
142
  left: 0;
37
143
  height: 24px;
38
144
  width: 44px;
39
145
  }
40
146
  .tl-toggle__input {
41
- /* Switch */
147
+ /* Knob */
42
148
  }
43
149
  .tl-toggle__input::after {
44
- background-color: var(--toggle-switch);
150
+ background-color: var(--toggle-knob);
45
151
  border-radius: 50%;
46
152
  left: 4px;
47
153
  top: 4px;
48
154
  width: 16px;
49
155
  height: 16px;
50
156
  }
157
+ .tl-toggle__input:not(:disabled):hover::before {
158
+ background-color: var(--toggle-off-hover);
159
+ }
160
+ .tl-toggle__input:not(:disabled):hover::after {
161
+ background-color: var(--toggle-knob-hover);
162
+ }
163
+ .tl-toggle__input:not(:disabled):active::before {
164
+ background-color: var(--toggle-off-active);
165
+ }
166
+ .tl-toggle__input:not(:disabled):active::after {
167
+ background-color: var(--toggle-knob-active);
168
+ }
51
169
  .tl-toggle__input:focus-visible {
52
- outline: 2px solid var(--tds-focus-outline-color);
53
- box-shadow: 0 0 0 1px var(--tds-white);
170
+ outline: 2px solid var(--component--focus-ring-color-strong);
171
+ box-shadow: 0 0 0 1px var(--component--focus-ring-color-discrete);
54
172
  outline-offset: 1px;
55
173
  z-index: 1;
56
- border-radius: 16px;
57
- }
58
- .tl-toggle__input:focus-visible::before {
59
- background-color: var(--toggle-disabled);
60
- }
61
- .tl-toggle__input:hover::before {
62
- background-color: var(--toggle-background-off);
174
+ border-radius: var(--toggle-focus-ring-radius);
63
175
  }
64
176
  .tl-toggle__input:checked::before {
65
- background-color: var(--toggle-background-on);
177
+ background-color: var(--toggle-on);
66
178
  }
67
179
  .tl-toggle__input:checked::after {
180
+ background-color: var(--toggle-knob-on);
68
181
  left: 24px;
69
182
  }
70
- .tl-toggle__input:disabled {
71
- pointer-events: none;
72
- cursor: not-allowed;
183
+ .tl-toggle__input:checked:not(:disabled):hover::before {
184
+ background-color: var(--toggle-on-hover);
73
185
  }
74
- .tl-toggle__input:disabled::before {
75
- background-color: var(--toggle-disabled);
186
+ .tl-toggle__input:checked:not(:disabled):hover::after {
187
+ background-color: var(--toggle-knob-on-hover);
76
188
  }
77
- .tl-toggle__input:disabled::after {
78
- background-color: var(--toggle-switch);
189
+ .tl-toggle__input:checked:not(:disabled):active::before {
190
+ background-color: var(--toggle-on-active);
79
191
  }
80
- .tl-toggle__input:disabled:checked::before {
81
- background-color: var(--toggle-disabled);
192
+ .tl-toggle__input:checked:not(:disabled):active::after {
193
+ background-color: var(--toggle-knob-on-active);
82
194
  }
83
- .tl-toggle__input:disabled:checked::after {
84
- background-color: var(--toggle-switch);
195
+ .tl-toggle__input:disabled {
196
+ pointer-events: none;
197
+ cursor: not-allowed;
198
+ opacity: var(--toggle-opacity-disabled);
85
199
  }
86
200
  .tl-toggle__input--sm {
87
201
  width: 28px;
@@ -95,18 +209,9 @@
95
209
  width: 8px;
96
210
  height: 8px;
97
211
  }
98
- .tl-toggle__input--sm:checked::before {
99
- background-color: var(--toggle-background-on);
100
- }
101
212
  .tl-toggle__input--sm:checked::after {
102
213
  left: 16px;
103
214
  }
104
- .tl-toggle__input--sm:disabled::before {
105
- background-color: var(--toggle-disabled);
106
- }
107
- .tl-toggle__input--sm:disabled::after {
108
- background-color: var(--toggle-switch);
109
- }
110
215
 
111
216
  .tl-toggle__headline {
112
217
  font-family: var(--detail-02-font-family);
@@ -119,7 +224,7 @@
119
224
  margin-bottom: 12px;
120
225
  }
121
226
  .tl-toggle:has(input[type=checkbox]:disabled) .tl-toggle__headline {
122
- color: var(--toggle-disabled);
227
+ opacity: var(--toggle-opacity-disabled);
123
228
  user-select: none;
124
229
  cursor: not-allowed;
125
230
  }
@@ -139,7 +244,7 @@
139
244
  padding-left: 8px;
140
245
  }
141
246
  input[type=checkbox]:disabled ~ .tl-toggle__label {
142
- color: var(--toggle-disabled);
247
+ opacity: var(--toggle-opacity-disabled);
143
248
  pointer-events: none;
144
249
  cursor: not-allowed;
145
250
  }
package/dist/tl-tooltip.css CHANGED
@@ -1,6 +1,8 @@
1
1
  .tl-tooltip {
2
- --tooltip-text: var(--color-foreground-text-inverse-strong);
3
- --tooltip-background: var(--color-background-inverse-layer-03);
2
+ --tooltip-color: var(--component-tooltip-text-default);
3
+ --tooltip-background: var(--component-tooltip-background-default);
4
+ --tooltip-border-radius: calc(var(--component-tooltip-border-radius-default) * 1px);
5
+ --tooltip-border-radius-none: calc(var(--component-tooltip-border-radius-none) * 1px);
4
6
  }
5
7
 
6
8
  .scania {
@@ -22,19 +24,19 @@
22
24
  position: fixed;
23
25
  z-index: var(--tds-z-index-tooltip, 1000);
24
26
  padding: 8px;
25
- max-width: 204px;
27
+ max-width: 208px;
26
28
  width: max-content;
27
29
  white-space: normal;
28
- word-wrap: break-word;
29
- background-color: var(--tooltip-background, #333);
30
- color: var(--tooltip-text, #fff);
30
+ overflow-wrap: break-word;
31
+ background-color: var(--tooltip-background);
32
+ color: var(--tooltip-color);
31
33
  box-sizing: border-box;
32
34
  line-height: var(--tl-tooltip-line-height);
33
35
  opacity: 0;
34
36
  visibility: hidden;
35
37
  pointer-events: none;
36
38
  transition: opacity 0.2s ease, visibility 0.2s ease;
37
- border-radius: 4px;
39
+ border-radius: var(--tooltip-border-radius);
38
40
  }
39
41
  .tl-tooltip--visible {
40
42
  opacity: 1;
@@ -42,26 +44,26 @@
42
44
  pointer-events: auto;
43
45
  }
44
46
  .tl-tooltip--top-start {
45
- border-radius: 4px 4px 4px 0;
47
+ border-radius: var(--tooltip-border-radius) var(--tooltip-border-radius) var(--tooltip-border-radius) var(--tooltip-border-radius-none);
46
48
  }
47
49
  .tl-tooltip--top-end {
48
- border-radius: 4px 4px 0;
50
+ border-radius: var(--tooltip-border-radius) var(--tooltip-border-radius) var(--tooltip-border-radius-none) var(--tooltip-border-radius);
49
51
  }
50
52
  .tl-tooltip--bottom-start {
51
- border-radius: 0 4px 4px;
53
+ border-radius: var(--tooltip-border-radius-none) var(--tooltip-border-radius) var(--tooltip-border-radius) var(--tooltip-border-radius);
52
54
  }
53
55
  .tl-tooltip--bottom-end {
54
- border-radius: 4px 0 4px 4px;
56
+ border-radius: var(--tooltip-border-radius) var(--tooltip-border-radius-none) var(--tooltip-border-radius) var(--tooltip-border-radius);
55
57
  }
56
58
  .tl-tooltip--left-start {
57
- border-radius: 4px 0 4px 4px;
59
+ border-radius: var(--tooltip-border-radius) var(--tooltip-border-radius-none) var(--tooltip-border-radius) var(--tooltip-border-radius);
58
60
  }
59
61
  .tl-tooltip--left-end {
60
- border-radius: 4px 4px 0;
62
+ border-radius: var(--tooltip-border-radius) var(--tooltip-border-radius) var(--tooltip-border-radius-none) var(--tooltip-border-radius);
61
63
  }
62
64
  .tl-tooltip--right-start {
63
- border-radius: 0 4px 4px;
65
+ border-radius: var(--tooltip-border-radius-none) var(--tooltip-border-radius) var(--tooltip-border-radius) var(--tooltip-border-radius);
64
66
  }
65
67
  .tl-tooltip--right-end {
66
- border-radius: 4px 4px 4px 0;
68
+ border-radius: var(--tooltip-border-radius) var(--tooltip-border-radius) var(--tooltip-border-radius) var(--tooltip-border-radius-none);
67
69
  }