@scania/tegel-lite 0.1.0-dev-test-beta.0 → 0.1.0-dropdown-vars-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 (153) 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/back.svg +1 -0
  23. package/dist/assets/icons/traton/calendar_inactive.svg +1 -0
  24. package/dist/assets/icons/traton/card.svg +1 -0
  25. package/dist/assets/icons/traton/cart.svg +1 -0
  26. package/dist/assets/icons/traton/clock.svg +1 -0
  27. package/dist/assets/icons/traton/clock_inactive.svg +1 -0
  28. package/dist/assets/icons/traton/contact.svg +1 -0
  29. package/dist/assets/icons/traton/contact_inactive.svg +1 -0
  30. package/dist/assets/icons/traton/copy.svg +1 -0
  31. package/dist/assets/icons/traton/document.svg +1 -0
  32. package/dist/assets/icons/traton/document_check.svg +1 -0
  33. package/dist/assets/icons/traton/document_doc.svg +1 -0
  34. package/dist/assets/icons/traton/document_eye.svg +1 -0
  35. package/dist/assets/icons/traton/document_pdf.svg +1 -0
  36. package/dist/assets/icons/traton/document_tool.svg +1 -0
  37. package/dist/assets/icons/traton/document_word.svg +1 -0
  38. package/dist/assets/icons/traton/document_wrong.svg +1 -0
  39. package/dist/assets/icons/traton/document_xls.svg +1 -0
  40. package/dist/assets/icons/traton/dollar.svg +1 -0
  41. package/dist/assets/icons/traton/doner.svg +1 -0
  42. package/dist/assets/icons/traton/double_kebab.svg +1 -0
  43. package/dist/assets/icons/traton/download.svg +1 -0
  44. package/dist/assets/icons/traton/edit_inactive.svg +1 -1
  45. package/dist/assets/icons/traton/email.svg +1 -0
  46. package/dist/assets/icons/traton/export.svg +1 -0
  47. package/dist/assets/icons/traton/export_inactive.svg +1 -0
  48. package/dist/assets/icons/traton/eye.svg +1 -0
  49. package/dist/assets/icons/traton/eye_inactive.svg +1 -0
  50. package/dist/assets/icons/traton/face_dissatisfied.svg +1 -0
  51. package/dist/assets/icons/traton/face_neutral.svg +1 -0
  52. package/dist/assets/icons/traton/face_satisfied.svg +1 -0
  53. package/dist/assets/icons/traton/filters.svg +1 -0
  54. package/dist/assets/icons/traton/filters_inactive.svg +1 -0
  55. package/dist/assets/icons/traton/folder.svg +1 -0
  56. package/dist/assets/icons/traton/fuel_gauge.svg +1 -0
  57. package/dist/assets/icons/traton/fuel_gauge_inactive.svg +1 -0
  58. package/dist/assets/icons/traton/global.svg +1 -0
  59. package/dist/assets/icons/traton/heart.svg +1 -0
  60. package/dist/assets/icons/traton/heart_inactive.svg +1 -0
  61. package/dist/assets/icons/traton/home.svg +1 -0
  62. package/dist/assets/icons/traton/home_inactive.svg +1 -0
  63. package/dist/assets/icons/traton/image.svg +1 -0
  64. package/dist/assets/icons/traton/image_add.svg +1 -0
  65. package/dist/assets/icons/traton/image_inactive.svg +1 -0
  66. package/dist/assets/icons/traton/image_set.svg +1 -0
  67. package/dist/assets/icons/traton/kebab.svg +1 -0
  68. package/dist/assets/icons/traton/link.svg +1 -0
  69. package/dist/assets/icons/traton/link_broken.svg +1 -0
  70. package/dist/assets/icons/traton/lock.svg +1 -0
  71. package/dist/assets/icons/traton/meatballs.svg +1 -0
  72. package/dist/assets/icons/traton/message.svg +1 -0
  73. package/dist/assets/icons/traton/message_inactive.svg +1 -0
  74. package/dist/assets/icons/traton/mileage.svg +1 -0
  75. package/dist/assets/icons/traton/mileage_inactive.svg +1 -0
  76. package/dist/assets/icons/traton/notification_inactive.svg +1 -0
  77. package/dist/assets/icons/traton/phone.svg +1 -0
  78. package/dist/assets/icons/traton/phone_inactive.svg +1 -0
  79. package/dist/assets/icons/traton/pin.svg +1 -0
  80. package/dist/assets/icons/traton/pin_inactive.svg +1 -0
  81. package/dist/assets/icons/traton/placeholder.svg +1 -0
  82. package/dist/assets/icons/traton/print_inactive.svg +1 -0
  83. package/dist/assets/icons/traton/profile.svg +1 -0
  84. package/dist/assets/icons/traton/profile_inactive.svg +1 -0
  85. package/dist/assets/icons/traton/proportions.svg +1 -0
  86. package/dist/assets/icons/traton/proportions_inactive.svg +1 -0
  87. package/dist/assets/icons/traton/redirect.svg +1 -0
  88. package/dist/assets/icons/traton/report.svg +1 -0
  89. package/dist/assets/icons/traton/report_inactive.svg +1 -0
  90. package/dist/assets/icons/traton/save.svg +1 -0
  91. package/dist/assets/icons/traton/save_inactive.svg +1 -0
  92. package/dist/assets/icons/traton/send.svg +1 -0
  93. package/dist/assets/icons/traton/send_inactive.svg +1 -0
  94. package/dist/assets/icons/traton/settings.svg +1 -0
  95. package/dist/assets/icons/traton/skip_backwards.svg +1 -1
  96. package/dist/assets/icons/traton/skip_forward.svg +1 -1
  97. package/dist/assets/icons/traton/smartphone.svg +1 -0
  98. package/dist/assets/icons/traton/smartphone_inactive.svg +1 -0
  99. package/dist/assets/icons/traton/speedometer.svg +1 -0
  100. package/dist/assets/icons/traton/speedometer_inactive.svg +1 -0
  101. package/dist/assets/icons/traton/support.svg +1 -0
  102. package/dist/assets/icons/traton/timer.svg +1 -0
  103. package/dist/assets/icons/traton/tool.svg +1 -0
  104. package/dist/assets/icons/traton/tool_inactive.svg +1 -0
  105. package/dist/assets/icons/traton/trash.svg +1 -0
  106. package/dist/assets/icons/traton/trash_inactive.svg +1 -0
  107. package/dist/assets/icons/traton/unlock.svg +1 -0
  108. package/dist/assets/icons/traton/upload.svg +1 -0
  109. package/dist/assets/icons/traton/wallet.svg +1 -0
  110. package/dist/assets/icons/traton/warning.svg +1 -1
  111. package/dist/assets/icons/traton/wifi.svg +1 -0
  112. package/dist/assets/icons/traton/wifi_inactive.svg +1 -0
  113. package/dist/components.css +3751 -3642
  114. package/dist/global.css +148 -17
  115. package/dist/scania-variables.css +521 -310
  116. package/dist/tl-accordion.css +92 -36
  117. package/dist/tl-banner.css +88 -13
  118. package/dist/tl-block.css +62 -7
  119. package/dist/tl-breadcrumbs.css +55 -6
  120. package/dist/tl-button.css +181 -156
  121. package/dist/tl-card.css +43 -62
  122. package/dist/tl-checkbox.css +195 -115
  123. package/dist/tl-chip.css +152 -12
  124. package/dist/tl-datetime.css +45 -34
  125. package/dist/tl-divider.css +76 -6
  126. package/dist/tl-dropdown.css +387 -230
  127. package/dist/tl-folder-tabs.css +167 -51
  128. package/dist/tl-footer.css +88 -34
  129. package/dist/tl-header.css +469 -387
  130. package/dist/tl-icon.css +5 -1
  131. package/dist/tl-inline-tabs.css +164 -61
  132. package/dist/tl-link.css +114 -16
  133. package/dist/tl-message.css +128 -14
  134. package/dist/tl-modal.css +111 -16
  135. package/dist/tl-navigation-tabs.css +167 -51
  136. package/dist/tl-popover-canvas.css +112 -9
  137. package/dist/tl-popover-menu.css +134 -28
  138. package/dist/tl-radio-button.css +159 -96
  139. package/dist/tl-side-menu.css +346 -326
  140. package/dist/tl-text-field.css +265 -77
  141. package/dist/tl-textarea.css +282 -76
  142. package/dist/tl-toast.css +119 -10
  143. package/dist/tl-toggle.css +149 -44
  144. package/dist/tl-tooltip.css +63 -15
  145. package/dist/traton-variables.css +361 -30
  146. package/package.json +12 -24
  147. package/dist/tl-badge.css +0 -45
  148. package/dist/tl-checkbox-vars.css +0 -38
  149. package/dist/tl-slider.css +0 -2250
  150. package/dist/tl-spinner.css +0 -78
  151. package/dist/tl-step.css +0 -247
  152. package/dist/tl-stepper.css +0 -91
  153. package/dist/tl-table.css +0 -857
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,54 @@
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-tooltip-background-default: var(--color-background-inverse-layer-03);
11
+ --component-tooltip-border-radius-none: var(--scania-unit-0);
12
+ --component-tooltip-border-radius-default: var(--scania-unit-4);
13
+ --component-tooltip-text-default: var(--color-text-inverse-strong);
14
+ }
15
+
16
+ .traton .tds-mode-light,
17
+ .traton.tds-mode-light,
18
+ .traton .tl-mode-light,
19
+ .traton.tl-mode-light {
20
+ --component-tooltip-background-default: var(--color-background-inverse-layer-03);
21
+ --component-tooltip-border-radius-none: var(--traton-unit-0);
22
+ --component-tooltip-border-radius-default: var(--traton-unit-4);
23
+ --component-tooltip-text-default: var(--color-text-inverse-strong);
24
+ }
25
+
26
+ .tds-mode-dark,
27
+ .scania .tds-mode-dark,
28
+ .scania.tds-mode-dark,
29
+ .scania .tl-mode-dark,
30
+ .scania.tl-mode-dark {
31
+ --component-tooltip-background-default: var(--color-background-inverse-layer-03);
32
+ --component-tooltip-border-radius-none: var(--scania-unit-0);
33
+ --component-tooltip-border-radius-default: var(--scania-unit-4);
34
+ --component-tooltip-text-default: var(--color-text-inverse-strong);
35
+ }
36
+
37
+ .traton .tds-mode-dark,
38
+ .traton.tds-mode-dark,
39
+ .traton .tl-mode-dark,
40
+ .traton.tl-mode-dark {
41
+ --component-tooltip-background-default: var(--color-background-inverse-layer-03);
42
+ --component-tooltip-border-radius-none: var(--traton-unit-0);
43
+ --component-tooltip-border-radius-default: var(--traton-unit-4);
44
+ --component-tooltip-text-default: var(--color-text-inverse-strong);
45
+ }
46
+
1
47
  .tl-tooltip {
2
- --tooltip-text: var(--color-foreground-text-inverse-strong);
3
- --tooltip-background: var(--color-background-inverse-layer-03);
48
+ --tooltip-color: var(--component-tooltip-text-default);
49
+ --tooltip-background: var(--component-tooltip-background-default);
50
+ --tooltip-border-radius: calc(var(--component-tooltip-border-radius-default) * 1px);
51
+ --tooltip-border-radius-none: calc(var(--component-tooltip-border-radius-none) * 1px);
4
52
  }
5
53
 
6
54
  .scania {
@@ -22,19 +70,19 @@
22
70
  position: fixed;
23
71
  z-index: var(--tds-z-index-tooltip, 1000);
24
72
  padding: 8px;
25
- max-width: 204px;
73
+ max-width: 208px;
26
74
  width: max-content;
27
75
  white-space: normal;
28
- word-wrap: break-word;
29
- background-color: var(--tooltip-background, #333);
30
- color: var(--tooltip-text, #fff);
76
+ overflow-wrap: break-word;
77
+ background-color: var(--tooltip-background);
78
+ color: var(--tooltip-color);
31
79
  box-sizing: border-box;
32
80
  line-height: var(--tl-tooltip-line-height);
33
81
  opacity: 0;
34
82
  visibility: hidden;
35
83
  pointer-events: none;
36
84
  transition: opacity 0.2s ease, visibility 0.2s ease;
37
- border-radius: 4px;
85
+ border-radius: var(--tooltip-border-radius);
38
86
  }
39
87
  .tl-tooltip--visible {
40
88
  opacity: 1;
@@ -42,26 +90,26 @@
42
90
  pointer-events: auto;
43
91
  }
44
92
  .tl-tooltip--top-start {
45
- border-radius: 4px 4px 4px 0;
93
+ border-radius: var(--tooltip-border-radius) var(--tooltip-border-radius) var(--tooltip-border-radius) var(--tooltip-border-radius-none);
46
94
  }
47
95
  .tl-tooltip--top-end {
48
- border-radius: 4px 4px 0;
96
+ border-radius: var(--tooltip-border-radius) var(--tooltip-border-radius) var(--tooltip-border-radius-none) var(--tooltip-border-radius);
49
97
  }
50
98
  .tl-tooltip--bottom-start {
51
- border-radius: 0 4px 4px;
99
+ border-radius: var(--tooltip-border-radius-none) var(--tooltip-border-radius) var(--tooltip-border-radius) var(--tooltip-border-radius);
52
100
  }
53
101
  .tl-tooltip--bottom-end {
54
- border-radius: 4px 0 4px 4px;
102
+ border-radius: var(--tooltip-border-radius) var(--tooltip-border-radius-none) var(--tooltip-border-radius) var(--tooltip-border-radius);
55
103
  }
56
104
  .tl-tooltip--left-start {
57
- border-radius: 4px 0 4px 4px;
105
+ border-radius: var(--tooltip-border-radius) var(--tooltip-border-radius-none) var(--tooltip-border-radius) var(--tooltip-border-radius);
58
106
  }
59
107
  .tl-tooltip--left-end {
60
- border-radius: 4px 4px 0;
108
+ border-radius: var(--tooltip-border-radius) var(--tooltip-border-radius) var(--tooltip-border-radius-none) var(--tooltip-border-radius);
61
109
  }
62
110
  .tl-tooltip--right-start {
63
- border-radius: 0 4px 4px;
111
+ border-radius: var(--tooltip-border-radius-none) var(--tooltip-border-radius) var(--tooltip-border-radius) var(--tooltip-border-radius);
64
112
  }
65
113
  .tl-tooltip--right-end {
66
- border-radius: 4px 4px 4px 0;
114
+ border-radius: var(--tooltip-border-radius) var(--tooltip-border-radius) var(--tooltip-border-radius) var(--tooltip-border-radius-none);
67
115
  }