@scania/tegel-lite 0.1.0-dev-test-beta.0 → 0.1.0-dropdown-vars-beta.1

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-text-field.css CHANGED
@@ -1,69 +1,242 @@
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--input-background-primary: var(--color-background-layer-01);
11
+ --component--input-background-secondary: var(--color-background-layer-02);
12
+ --component--input-border-default: var(--color-border-soft);
13
+ --component--input-border-hover: var(--color-border-strong);
14
+ --component--input-border-success-default: var(--color-border-strong);
15
+ --component--input-border-error-default: var(--color-system-danger-default);
16
+ --component--input-border-radius-default: var(--scania-unit-4);
17
+ --component--input-border-radius-none: var(--scania-unit-0);
18
+ --component--input-border-radius-top-left: var(--component--input-border-radius-default);
19
+ --component--input-border-radius-top-right: var(--component--input-border-radius-default);
20
+ --component--input-border-radius-bottom-left: var(--component--input-border-radius-none);
21
+ --component--input-border-radius-bottom-right: var(--component--input-border-radius-none);
22
+ --component--input-border-width-default: var(--scania-unit-1);
23
+ --component--input-border-width-none: var(--scania-unit-0);
24
+ --component--input-border-width-top: var(--component--input-border-width-none);
25
+ --component--input-border-width-right: var(--component--input-border-width-none);
26
+ --component--input-border-width-bottom: var(--component--input-border-width-default);
27
+ --component--input-border-width-left: var(--component--input-border-width-none);
28
+ --component--input-icon-prefix-default: var(--color-text-defined);
29
+ --component--input-icon-suffix-default: var(--color-text-defined);
30
+ --component--input-icon-error-default: var(--color-system-danger-default);
31
+ --component--input-icon-control-default: var(--color-icon-strong);
32
+ --component--input-icon-control-hover: var(--component--input-icon-control-default);
33
+ --component--input-opacity-disabled: var(--scania-opacity-25);
34
+ --component--input-text-counter-default: var(--color-text-defined);
35
+ --component--input-text-label-default: var(--color-text-strong);
36
+ --component--input-text-helper-default: var(--color-text-defined);
37
+ --component--input-text-placeholder-default: var(--color-text-soft);
38
+ --component--input-text-value-default: var(--color-text-strong);
39
+ --component--input-text-error-default: var(--color-system-danger-default);
40
+ }
41
+
42
+ .traton .tds-mode-light,
43
+ .traton.tds-mode-light,
44
+ .traton .tl-mode-light,
45
+ .traton.tl-mode-light {
46
+ --component--input-background-primary: var(--color-background-layer-01);
47
+ --component--input-background-secondary: var(--color-background-layer-02);
48
+ --component--input-border-default: var(--color-border-soft);
49
+ --component--input-border-hover: var(--color-border-strong);
50
+ --component--input-border-success-default: var(--color-border-strong);
51
+ --component--input-border-error-default: var(--color-system-danger-default);
52
+ --component--input-border-radius-default: var(--traton-unit-4);
53
+ --component--input-border-radius-none: var(--traton-unit-0);
54
+ --component--input-border-radius-top-left: var(--component--input-border-radius-default);
55
+ --component--input-border-radius-top-right: var(--component--input-border-radius-default);
56
+ --component--input-border-radius-bottom-left: var(--component--input-border-radius-default);
57
+ --component--input-border-radius-bottom-right: var(--component--input-border-radius-default);
58
+ --component--input-border-width-default: var(--traton-unit-1);
59
+ --component--input-border-width-none: var(--traton-unit-0);
60
+ --component--input-border-width-top: var(--component--input-border-width-default);
61
+ --component--input-border-width-right: var(--component--input-border-width-default);
62
+ --component--input-border-width-bottom: var(--component--input-border-width-default);
63
+ --component--input-border-width-left: var(--component--input-border-width-default);
64
+ --component--input-icon-prefix-default: var(--color-text-defined);
65
+ --component--input-icon-suffix-default: var(--color-text-defined);
66
+ --component--input-icon-error-default: var(--color-system-danger-default);
67
+ --component--input-icon-control-default: var(--color-icon-subtle);
68
+ --component--input-icon-control-hover: var(--component--input-icon-control-default);
69
+ --component--input-opacity-disabled: var(--traton-opacity-25);
70
+ --component--input-text-counter-default: var(--color-text-defined);
71
+ --component--input-text-label-default: var(--color-text-strong);
72
+ --component--input-text-helper-default: var(--color-text-defined);
73
+ --component--input-text-placeholder-default: var(--color-text-subtle);
74
+ --component--input-text-value-default: var(--color-text-strong);
75
+ --component--input-text-error-default: var(--color-system-danger-default);
76
+ }
77
+
78
+ .tds-mode-dark,
79
+ .scania .tds-mode-dark,
80
+ .scania.tds-mode-dark,
81
+ .scania .tl-mode-dark,
82
+ .scania.tl-mode-dark {
83
+ --component--input-background-primary: var(--color-background-layer-01);
84
+ --component--input-background-secondary: var(--color-background-layer-02);
85
+ --component--input-border-default: var(--color-border-soft);
86
+ --component--input-border-hover: var(--color-border-strong);
87
+ --component--input-border-success-default: var(--color-border-strong);
88
+ --component--input-border-error-default: var(--color-system-danger-default);
89
+ --component--input-border-radius-default: var(--scania-unit-4);
90
+ --component--input-border-radius-none: var(--scania-unit-0);
91
+ --component--input-border-radius-top-left: var(--component--input-border-radius-default);
92
+ --component--input-border-radius-top-right: var(--component--input-border-radius-default);
93
+ --component--input-border-radius-bottom-left: var(--component--input-border-radius-none);
94
+ --component--input-border-radius-bottom-right: var(--component--input-border-radius-none);
95
+ --component--input-border-width-default: var(--scania-unit-1);
96
+ --component--input-border-width-none: var(--scania-unit-0);
97
+ --component--input-border-width-top: var(--component--input-border-width-none);
98
+ --component--input-border-width-right: var(--component--input-border-width-none);
99
+ --component--input-border-width-bottom: var(--component--input-border-width-default);
100
+ --component--input-border-width-left: var(--component--input-border-width-none);
101
+ --component--input-icon-prefix-default: var(--color-text-defined);
102
+ --component--input-icon-suffix-default: var(--color-text-defined);
103
+ --component--input-icon-error-default: var(--color-system-danger-default);
104
+ --component--input-icon-control-default: var(--color-icon-strong);
105
+ --component--input-icon-control-hover: var(--component--input-icon-control-default);
106
+ --component--input-opacity-disabled: var(--scania-opacity-25);
107
+ --component--input-text-counter-default: var(--color-text-defined);
108
+ --component--input-text-label-default: var(--color-text-strong);
109
+ --component--input-text-helper-default: var(--color-text-defined);
110
+ --component--input-text-placeholder-default: var(--color-text-soft);
111
+ --component--input-text-value-default: var(--color-text-strong);
112
+ --component--input-text-error-default: var(--color-system-danger-default);
113
+ }
114
+
115
+ .traton .tds-mode-dark,
116
+ .traton.tds-mode-dark,
117
+ .traton .tl-mode-dark,
118
+ .traton.tl-mode-dark {
119
+ --component--input-background-primary: var(--color-background-layer-01);
120
+ --component--input-background-secondary: var(--color-background-layer-02);
121
+ --component--input-border-default: var(--color-border-soft);
122
+ --component--input-border-hover: var(--color-border-strong);
123
+ --component--input-border-success-default: var(--color-border-strong);
124
+ --component--input-border-error-default: var(--color-system-danger-default);
125
+ --component--input-border-radius-default: var(--traton-unit-4);
126
+ --component--input-border-radius-none: var(--traton-unit-0);
127
+ --component--input-border-radius-top-left: var(--component--input-border-radius-default);
128
+ --component--input-border-radius-top-right: var(--component--input-border-radius-default);
129
+ --component--input-border-radius-bottom-left: var(--component--input-border-radius-default);
130
+ --component--input-border-radius-bottom-right: var(--component--input-border-radius-default);
131
+ --component--input-border-width-default: var(--traton-unit-1);
132
+ --component--input-border-width-none: var(--traton-unit-0);
133
+ --component--input-border-width-top: var(--component--input-border-width-default);
134
+ --component--input-border-width-right: var(--component--input-border-width-default);
135
+ --component--input-border-width-bottom: var(--component--input-border-width-default);
136
+ --component--input-border-width-left: var(--component--input-border-width-default);
137
+ --component--input-icon-prefix-default: var(--color-text-defined);
138
+ --component--input-icon-suffix-default: var(--color-text-defined);
139
+ --component--input-icon-error-default: var(--color-system-danger-default);
140
+ --component--input-icon-control-default: var(--color-icon-subtle);
141
+ --component--input-icon-control-hover: var(--component--input-icon-control-default);
142
+ --component--input-opacity-disabled: var(--traton-opacity-25);
143
+ --component--input-text-counter-default: var(--color-text-defined);
144
+ --component--input-text-label-default: var(--color-text-strong);
145
+ --component--input-text-helper-default: var(--color-text-defined);
146
+ --component--input-text-placeholder-default: var(--color-text-subtle);
147
+ --component--input-text-value-default: var(--color-text-strong);
148
+ --component--input-text-error-default: var(--color-system-danger-default);
149
+ }
150
+
151
+ /**
152
+ * Do not edit directly, this file was auto-generated.
153
+ */
154
+ :root,
155
+ .tds-mode-light,
156
+ .scania .tds-mode-light,
157
+ .scania.tds-mode-light,
158
+ .scania .tl-mode-light,
159
+ .scania.tl-mode-light {
160
+ --component-text-field-focus-ring-radius-primary: var(--component--focus-ring-radius-extra-large);
161
+ --component-text-field-focus-ring-radius-secondary: var(--component--focus-ring-radius-none);
162
+ }
163
+
164
+ .traton .tds-mode-light,
165
+ .traton.tds-mode-light,
166
+ .traton .tl-mode-light,
167
+ .traton.tl-mode-light {
168
+ --component-text-field-focus-ring-radius-primary: var(--component--focus-ring-radius-extra-large);
169
+ --component-text-field-focus-ring-radius-secondary: var(
170
+ --component--focus-ring-radius-extra-large
171
+ );
172
+ }
173
+
174
+ .tds-mode-dark,
175
+ .scania .tds-mode-dark,
176
+ .scania.tds-mode-dark,
177
+ .scania .tl-mode-dark,
178
+ .scania.tl-mode-dark {
179
+ --component-text-field-focus-ring-radius-primary: var(--component--focus-ring-radius-extra-large);
180
+ --component-text-field-focus-ring-radius-secondary: var(--component--focus-ring-radius-none);
181
+ }
182
+
183
+ .traton .tds-mode-dark,
184
+ .traton.tds-mode-dark,
185
+ .traton .tl-mode-dark,
186
+ .traton.tl-mode-dark {
187
+ --component-text-field-focus-ring-radius-primary: var(--component--focus-ring-radius-extra-large);
188
+ --component-text-field-focus-ring-radius-secondary: var(
189
+ --component--focus-ring-radius-extra-large
190
+ );
191
+ }
192
+
1
193
  .tl-text-field {
2
- --text-field-background: var(--color-background-layer-01);
3
- --text-field-text: var(--color-foreground-text-strong);
4
- --text-field-placeholder: var(--color-foreground-text-subtle);
5
- --text-field-affix: var(--color-foreground-text-defined);
6
- --text-field-label: var(--color-foreground-text-strong);
7
- --text-field-label-inside: var(--color-foreground-text-strong);
194
+ --text-field-background: var(--component--input-background-primary);
195
+ --text-field-text: var(--component--input-text-value-default);
196
+ --text-field-placeholder: var(--component--input-text-placeholder-default);
197
+ --text-field-affix: var(--component--input-icon-prefix-default);
198
+ --text-field-affix-suffix: var(--component--input-icon-suffix-default);
199
+ --text-field-label: var(--component--input-text-label-default);
200
+ --text-field-label-inside: var(--component--input-text-label-default);
8
201
  --text-field-label-inside-left: 16px;
9
202
  --text-field-affix-width-icon: 35px;
10
203
  --text-field-affix-width-text: 8px;
11
- --text-field-border-bottom-readonly: var(--color-foreground-border-strong);
12
- --text-field-helper: var(--color-foreground-text-defined);
13
- --text-field-error: var(--color-system-danger-default);
14
- --text-field-affix-error: var(--color-foreground-text-defined);
15
- --text-field-background-disabled: var(--color-background-layer-01);
16
- --text-field-text-disabled: var(--color-foreground-text-disabled);
17
- --text-field-placeholder-disabled: var(--color-foreground-text-disabled);
18
- --text-field-label-disabled: var(--color-foreground-text-disabled);
19
- --text-field-affix-disabled: var(--color-foreground-text-disabled);
20
- --text-field-textcounter: var(--color-foreground-text-defined);
204
+ --text-field-helper: var(--component--input-text-helper-default);
205
+ --text-field-error: var(--component--input-text-error-default);
206
+ --text-field-error-icon: var(--component--input-icon-error-default);
207
+ --text-field-affix-error: var(--component--input-icon-error-default);
208
+ --text-field-background-disabled: var(--component--input-background-primary);
209
+ --text-field-text-disabled: var(--color-text-disabled);
210
+ --text-field-placeholder-disabled: var(--color-text-disabled);
211
+ --text-field-label-disabled: var(--color-text-disabled);
212
+ --text-field-affix-disabled: var(--color-text-disabled);
213
+ --text-field-textcounter: var(--component--input-text-counter-default);
214
+ --text-field-opacity-disabled: var(--component--input-opacity-disabled);
215
+ --text-field-border-radius: calc(var(--component--input-border-radius-top-left) * 1px)
216
+ calc(var(--component--input-border-radius-top-right) * 1px)
217
+ calc(var(--component--input-border-radius-bottom-right) * 1px)
218
+ calc(var(--component--input-border-radius-bottom-left) * 1px);
219
+ --text-field-border-color: var(--component--input-border-default);
220
+ --text-field-border-color-hover: var(--component--input-border-hover);
221
+ --text-field-border-color-success: var(--component--input-border-success-default);
222
+ --text-field-border-color-error: var(--component--input-border-error-default);
223
+ --text-field-border-color-readonly: var(--color-border-strong);
224
+ --text-field-focus-ring-radius: var(--component-text-field-focus-ring-radius-primary);
21
225
  }
22
226
  .tl-text-field--primary {
23
- --text-field-background: var(--color-background-layer-01);
24
- --text-field-background-disabled: var(--color-background-layer-01);
227
+ --text-field-background: var(--component--input-background-primary);
228
+ --text-field-background-disabled: var(--component--input-background-primary);
229
+ --text-field-focus-ring-radius: var(--component-text-field-focus-ring-radius-primary);
25
230
  }
26
231
  .tl-text-field--secondary {
27
- --text-field-background: var(--color-background-layer-02);
28
- --text-field-background-disabled: var(--color-background-layer-02);
29
- }
30
-
31
- .tl-text-field,
32
- .scania .tl-text-field {
33
- --text-field-border-radius: 4px 4px 0 0;
34
- --text-field-box-shadow: 0 -1px 0 0 var(--color-foreground-border-soft);
35
- --text-field-box-shadow-hover: 0 -1px 0 0 var(--color-foreground-border-strong);
36
- --text-field-box-shadow-focus: 0 -2px 0 0 var(--color-foreground-border-accent-focus);
37
- --text-field-box-shadow-error: 0 -1px 0 0 var(--color-system-danger-default);
38
- --text-field-box-shadow-error-hover: 0 -1px 0 0 var(--color-system-danger-default);
39
- --text-field-box-shadow-error-focus: 0 -2px 0 0 var(--color-system-danger-default);
40
- --text-field-box-shadow-success: 0 -1px 0 0 var(--color-foreground-border-strong);
41
- --text-field-bar-focus: var(--color-foreground-border-accent-focus);
42
- --text-field-bar-error: var(--color-system-danger-default);
43
- --text-field-focus-outline: none;
44
- --text-field-focus-outline-error: none;
45
- --text-field-focus-outline-offset: 0;
46
- }
47
-
48
- .traton .tl-text-field {
49
- --text-field-border-radius: 4px 4px 4px 4px;
50
- --text-field-box-shadow: 0 0 0 1px var(--color-foreground-border-soft);
51
- --text-field-box-shadow-hover: 0 0 0 1px var(--color-foreground-border-strong);
52
- --text-field-box-shadow-focus: 0 0 0 2px var(--color-foreground-border-accent-focus);
53
- --text-field-box-shadow-success: 0 0 0 1px var(--color-foreground-border-strong);
54
- --text-field-box-shadow-error: 0 0 0 1px var(--color-system-danger-default);
55
- --text-field-box-shadow-error-hover: 0 0 0 1px var(--color-system-danger-default);
56
- --text-field-box-shadow-error-focus: 0 0 0 2px var(--color-system-danger-default);
57
- --text-field-focus-outline: 2px solid var(--color-foreground-border-accent-focus);
58
- --text-field-focus-outline-error: 2px solid var(--color-system-danger-default);
59
- --text-field-focus-outline-offset: 0;
60
- --text-field-bar-focus: transparent;
61
- --text-field-bar-error: transparent;
232
+ --text-field-background: var(--component--input-background-secondary);
233
+ --text-field-background-disabled: var(--component--input-background-secondary);
234
+ --text-field-focus-ring-radius: var(--component-text-field-focus-ring-radius-secondary);
62
235
  }
63
236
 
64
237
  /* Typography Usage mixins */
65
238
  /**
66
- * Do not edit directly, this file was auto-generated.
239
+ * Do not edit directly, this file was auto-generated with ./scripts/icon-token-generation.mts
67
240
  */
68
241
  .tl-icon {
69
242
  display: inline-block;
@@ -348,6 +521,10 @@
348
521
  mask-image: var(--icon-document_tool-svg);
349
522
  background-color: currentcolor;
350
523
  }
524
+ .tl-icon--document_word {
525
+ mask-image: var(--icon-document_word-svg);
526
+ background-color: currentcolor;
527
+ }
351
528
  .tl-icon--document_wrong {
352
529
  mask-image: var(--icon-document_wrong-svg);
353
530
  background-color: currentcolor;
@@ -1271,12 +1448,12 @@
1271
1448
  .tl-text-field:has(.tl-text-field__input:disabled) {
1272
1449
  cursor: not-allowed;
1273
1450
  }
1451
+ .tl-text-field:has(.tl-text-field__input:disabled) .tl-text-field__input-wrapper, .tl-text-field:has(.tl-text-field__input:disabled) .tl-text-field__label {
1452
+ opacity: var(--text-field-opacity-disabled);
1453
+ }
1274
1454
  .tl-text-field .tl-icon {
1275
1455
  background-color: var(--text-field-affix);
1276
1456
  }
1277
- :has(.tl-text-field__input:disabled) .tl-text-field .tl-icon {
1278
- background-color: var(--text-field-affix-disabled);
1279
- }
1280
1457
 
1281
1458
  .tl-text-field__input-wrapper {
1282
1459
  position: relative;
@@ -1305,8 +1482,11 @@
1305
1482
  width: 100%;
1306
1483
  box-sizing: border-box;
1307
1484
  margin: 0;
1308
- border: none;
1485
+ border-style: solid;
1486
+ border-color: var(--text-field-border-color);
1487
+ border-width: calc(var(--component--input-border-width-top) * 1px) calc(var(--component--input-border-width-right) * 1px) calc(var(--component--input-border-width-bottom) * 1px) calc(var(--component--input-border-width-left) * 1px);
1309
1488
  outline: none;
1489
+ transition: border-color 200ms ease;
1310
1490
  }
1311
1491
  .tl-text-field__input::placeholder {
1312
1492
  color: var(--text-field-placeholder);
@@ -1331,42 +1511,46 @@
1331
1511
  color: var(--text-field-text);
1332
1512
  flex: 1;
1333
1513
  order: 2;
1334
- box-shadow: inset var(--text-field-box-shadow);
1335
- transition: box-shadow 0.2s;
1336
1514
  }
1337
1515
  .tl-text-field__input:focus {
1338
- box-shadow: inset var(--text-field-box-shadow-focus);
1516
+ outline: 2px solid var(--component--focus-ring-color-strong);
1517
+ box-shadow: 0 0 0 1px var(--component--focus-ring-color-discrete);
1518
+ outline-offset: 1px;
1519
+ z-index: 1;
1339
1520
  }
1340
1521
  .tl-text-field:hover .tl-text-field__input:not(:focus):not(:disabled) {
1341
- box-shadow: inset var(--text-field-box-shadow-hover);
1522
+ border-color: var(--text-field-border-color-hover);
1342
1523
  }
1343
1524
  .tl-text-field--error .tl-text-field__input {
1344
- box-shadow: inset var(--text-field-box-shadow-error);
1525
+ border-color: var(--text-field-border-color-error);
1345
1526
  }
1346
1527
  .tl-text-field--error .tl-text-field__input:focus {
1347
- box-shadow: inset var(--text-field-box-shadow-error-focus);
1528
+ outline: 2px solid var(--component--focus-ring-color-strong);
1529
+ box-shadow: 0 0 0 1px var(--component--focus-ring-color-discrete);
1530
+ outline-offset: 1px;
1531
+ z-index: 1;
1348
1532
  }
1349
1533
  .tl-text-field--error:hover .tl-text-field__input:not(:focus):not(:disabled) {
1350
- box-shadow: inset var(--text-field-box-shadow-error-hover);
1534
+ border-color: var(--text-field-border-color-error);
1351
1535
  }
1352
1536
  .tl-text-field--success:not(:has(.tl-text-field__input[readonly])):not(:has(.tl-text-field__input:disabled)) .tl-text-field__input:not(:focus) {
1353
- box-shadow: inset var(--text-field-box-shadow-success);
1537
+ border-color: var(--text-field-border-color-success);
1354
1538
  }
1355
1539
  .tl-text-field__input:disabled {
1356
- box-shadow: none;
1357
- background-color: var(--text-field-background-disabled);
1358
- color: var(--text-field-text-disabled);
1359
1540
  cursor: not-allowed;
1360
1541
  pointer-events: none;
1361
1542
  }
1362
1543
  :has(.tl-text-field__input[readonly]):not(:has(.tl-text-field__input:disabled)) .tl-text-field__input {
1363
- box-shadow: inset var(--text-field-box-shadow);
1544
+ border-color: var(--text-field-border-color-readonly);
1364
1545
  }
1365
1546
  :has(.tl-text-field__input[readonly]):not(:has(.tl-text-field__input:disabled)) .tl-text-field__input:focus {
1366
- box-shadow: inset var(--text-field-box-shadow-focus);
1547
+ outline: 2px solid var(--component--focus-ring-color-strong);
1548
+ box-shadow: 0 0 0 1px var(--component--focus-ring-color-discrete);
1549
+ outline-offset: 1px;
1550
+ z-index: 1;
1367
1551
  }
1368
1552
  :has(.tl-text-field__input[readonly]):not(:has(.tl-text-field__input:disabled)):hover .tl-text-field__input:not(:focus) {
1369
- box-shadow: inset var(--text-field-box-shadow-hover);
1553
+ border-color: var(--text-field-border-color-hover);
1370
1554
  }
1371
1555
  :has(.tl-text-field__input[readonly]):not(:has(.tl-text-field__input:disabled)) .tl-text-field__input {
1372
1556
  user-select: auto;
@@ -1499,7 +1683,7 @@
1499
1683
  position: relative;
1500
1684
  }
1501
1685
  :has(.tl-text-field__input:disabled) .tl-text-field__helper {
1502
- color: var(--color-foreground-text-disabled);
1686
+ color: var(--color-text-disabled);
1503
1687
  }
1504
1688
  .tl-text-field--error .tl-text-field__helper {
1505
1689
  padding-left: 24px;
@@ -1511,7 +1695,7 @@
1511
1695
  top: 0;
1512
1696
  width: 16px;
1513
1697
  height: 16px;
1514
- background-color: var(--text-field-error);
1698
+ background-color: var(--text-field-error-icon);
1515
1699
  mask-image: var(--icon-error-svg);
1516
1700
  mask-size: contain;
1517
1701
  mask-repeat: no-repeat;
@@ -1527,7 +1711,7 @@
1527
1711
  color: var(--text-field-error);
1528
1712
  }
1529
1713
  .tl-text-field--error:has(.tl-text-field__input:disabled) .tl-text-field__helper::before {
1530
- background-color: var(--color-foreground-text-disabled);
1714
+ background-color: var(--color-text-disabled);
1531
1715
  }
1532
1716
 
1533
1717
  .tl-text-field__charcounter {
@@ -1541,7 +1725,7 @@
1541
1725
  color: var(--text-field-textcounter);
1542
1726
  }
1543
1727
  :has(.tl-text-field__input:disabled) .tl-text-field__charcounter {
1544
- color: var(--color-foreground-text-disabled);
1728
+ color: var(--color-text-disabled);
1545
1729
  }
1546
1730
  .tl-text-field--error:not(:has(.tl-text-field__input[readonly])):not(:has(.tl-text-field__input:disabled)) .tl-text-field__charcounter {
1547
1731
  color: var(--text-field-error);
@@ -1551,7 +1735,7 @@
1551
1735
  }
1552
1736
 
1553
1737
  .tl-text-field__charcounter-divider {
1554
- color: var(--color-foreground-text-disabled);
1738
+ color: var(--color-text-disabled);
1555
1739
  }
1556
1740
 
1557
1741
  .tl-text-field__prefix {
@@ -1601,6 +1785,10 @@
1601
1785
  align-items: center;
1602
1786
  z-index: 1;
1603
1787
  position: relative;
1788
+ color: var(--text-field-affix-suffix);
1789
+ }
1790
+ .tl-text-field__suffix--icon.tl-icon {
1791
+ background-color: var(--text-field-affix-suffix);
1604
1792
  }
1605
1793
  .tl-text-field__suffix--text, .tl-text-field__suffix--icon {
1606
1794
  position: absolute;