@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-text-field.css CHANGED
@@ -1,64 +1,229 @@
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-opacity-disabled: var(--scania-opacity-25);
32
+ --component--input-text-counter-default: var(--color-text-defined);
33
+ --component--input-text-label-default: var(--color-text-strong);
34
+ --component--input-text-helper-default: var(--color-text-defined);
35
+ --component--input-text-placeholder-default: var(--color-text-soft);
36
+ --component--input-text-value-default: var(--color-text-strong);
37
+ --component--input-text-error-default: var(--color-system-danger-default);
38
+ }
39
+
40
+ .traton .tds-mode-light,
41
+ .traton.tds-mode-light,
42
+ .traton .tl-mode-light,
43
+ .traton.tl-mode-light {
44
+ --component--input-background-primary: var(--color-background-layer-01);
45
+ --component--input-background-secondary: var(--color-background-layer-02);
46
+ --component--input-border-default: var(--color-border-soft);
47
+ --component--input-border-hover: var(--color-border-strong);
48
+ --component--input-border-success-default: var(--color-border-strong);
49
+ --component--input-border-error-default: var(--color-system-danger-default);
50
+ --component--input-border-radius-default: var(--traton-unit-4);
51
+ --component--input-border-radius-none: var(--traton-unit-0);
52
+ --component--input-border-radius-top-left: var(--component--input-border-radius-default);
53
+ --component--input-border-radius-top-right: var(--component--input-border-radius-default);
54
+ --component--input-border-radius-bottom-left: var(--component--input-border-radius-default);
55
+ --component--input-border-radius-bottom-right: var(--component--input-border-radius-default);
56
+ --component--input-border-width-default: var(--traton-unit-1);
57
+ --component--input-border-width-none: var(--traton-unit-0);
58
+ --component--input-border-width-top: var(--component--input-border-width-default);
59
+ --component--input-border-width-right: var(--component--input-border-width-default);
60
+ --component--input-border-width-bottom: var(--component--input-border-width-default);
61
+ --component--input-border-width-left: var(--component--input-border-width-default);
62
+ --component--input-icon-prefix-default: var(--color-text-defined);
63
+ --component--input-icon-suffix-default: var(--color-text-defined);
64
+ --component--input-icon-error-default: var(--color-system-danger-default);
65
+ --component--input-opacity-disabled: var(--traton-opacity-25);
66
+ --component--input-text-counter-default: var(--color-text-defined);
67
+ --component--input-text-label-default: var(--color-text-strong);
68
+ --component--input-text-helper-default: var(--color-text-defined);
69
+ --component--input-text-placeholder-default: var(--color-text-subtle);
70
+ --component--input-text-value-default: var(--color-text-strong);
71
+ --component--input-text-error-default: var(--color-system-danger-default);
72
+ }
73
+
74
+ .tds-mode-dark,
75
+ .scania .tds-mode-dark,
76
+ .scania.tds-mode-dark,
77
+ .scania .tl-mode-dark,
78
+ .scania.tl-mode-dark {
79
+ --component--input-background-primary: var(--color-background-layer-01);
80
+ --component--input-background-secondary: var(--color-background-layer-02);
81
+ --component--input-border-default: var(--color-border-soft);
82
+ --component--input-border-hover: var(--color-border-strong);
83
+ --component--input-border-success-default: var(--color-border-strong);
84
+ --component--input-border-error-default: var(--color-system-danger-default);
85
+ --component--input-border-radius-default: var(--scania-unit-4);
86
+ --component--input-border-radius-none: var(--scania-unit-0);
87
+ --component--input-border-radius-top-left: var(--component--input-border-radius-default);
88
+ --component--input-border-radius-top-right: var(--component--input-border-radius-default);
89
+ --component--input-border-radius-bottom-left: var(--component--input-border-radius-none);
90
+ --component--input-border-radius-bottom-right: var(--component--input-border-radius-none);
91
+ --component--input-border-width-default: var(--scania-unit-1);
92
+ --component--input-border-width-none: var(--scania-unit-0);
93
+ --component--input-border-width-top: var(--component--input-border-width-none);
94
+ --component--input-border-width-right: var(--component--input-border-width-none);
95
+ --component--input-border-width-bottom: var(--component--input-border-width-default);
96
+ --component--input-border-width-left: var(--component--input-border-width-none);
97
+ --component--input-icon-prefix-default: var(--color-text-defined);
98
+ --component--input-icon-suffix-default: var(--color-text-defined);
99
+ --component--input-icon-error-default: var(--color-system-danger-default);
100
+ --component--input-opacity-disabled: var(--scania-opacity-25);
101
+ --component--input-text-counter-default: var(--color-text-defined);
102
+ --component--input-text-label-default: var(--color-text-strong);
103
+ --component--input-text-helper-default: var(--color-text-defined);
104
+ --component--input-text-placeholder-default: var(--color-text-soft);
105
+ --component--input-text-value-default: var(--color-text-strong);
106
+ --component--input-text-error-default: var(--color-system-danger-default);
107
+ }
108
+
109
+ .traton .tds-mode-dark,
110
+ .traton.tds-mode-dark,
111
+ .traton .tl-mode-dark,
112
+ .traton.tl-mode-dark {
113
+ --component--input-background-primary: var(--color-background-layer-01);
114
+ --component--input-background-secondary: var(--color-background-layer-02);
115
+ --component--input-border-default: var(--color-border-soft);
116
+ --component--input-border-hover: var(--color-border-strong);
117
+ --component--input-border-success-default: var(--color-border-strong);
118
+ --component--input-border-error-default: var(--color-system-danger-default);
119
+ --component--input-border-radius-default: var(--traton-unit-4);
120
+ --component--input-border-radius-none: var(--traton-unit-0);
121
+ --component--input-border-radius-top-left: var(--component--input-border-radius-default);
122
+ --component--input-border-radius-top-right: var(--component--input-border-radius-default);
123
+ --component--input-border-radius-bottom-left: var(--component--input-border-radius-default);
124
+ --component--input-border-radius-bottom-right: var(--component--input-border-radius-default);
125
+ --component--input-border-width-default: var(--traton-unit-1);
126
+ --component--input-border-width-none: var(--traton-unit-0);
127
+ --component--input-border-width-top: var(--component--input-border-width-default);
128
+ --component--input-border-width-right: var(--component--input-border-width-default);
129
+ --component--input-border-width-bottom: var(--component--input-border-width-default);
130
+ --component--input-border-width-left: var(--component--input-border-width-default);
131
+ --component--input-icon-prefix-default: var(--color-text-defined);
132
+ --component--input-icon-suffix-default: var(--color-text-defined);
133
+ --component--input-icon-error-default: var(--color-system-danger-default);
134
+ --component--input-opacity-disabled: var(--traton-opacity-25);
135
+ --component--input-text-counter-default: var(--color-text-defined);
136
+ --component--input-text-label-default: var(--color-text-strong);
137
+ --component--input-text-helper-default: var(--color-text-defined);
138
+ --component--input-text-placeholder-default: var(--color-text-subtle);
139
+ --component--input-text-value-default: var(--color-text-strong);
140
+ --component--input-text-error-default: var(--color-system-danger-default);
141
+ }
142
+
143
+ /**
144
+ * Do not edit directly, this file was auto-generated.
145
+ */
146
+ :root,
147
+ .tds-mode-light,
148
+ .scania .tds-mode-light,
149
+ .scania.tds-mode-light,
150
+ .scania .tl-mode-light,
151
+ .scania.tl-mode-light {
152
+ --component-text-field-focus-ring-radius-primary: var(--component--focus-ring-radius-extra-large);
153
+ --component-text-field-focus-ring-radius-secondary: var(--component--focus-ring-radius-none);
154
+ }
155
+
156
+ .traton .tds-mode-light,
157
+ .traton.tds-mode-light,
158
+ .traton .tl-mode-light,
159
+ .traton.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(
162
+ --component--focus-ring-radius-extra-large
163
+ );
164
+ }
165
+
166
+ .tds-mode-dark,
167
+ .scania .tds-mode-dark,
168
+ .scania.tds-mode-dark,
169
+ .scania .tl-mode-dark,
170
+ .scania.tl-mode-dark {
171
+ --component-text-field-focus-ring-radius-primary: var(--component--focus-ring-radius-extra-large);
172
+ --component-text-field-focus-ring-radius-secondary: var(--component--focus-ring-radius-none);
173
+ }
174
+
175
+ .traton .tds-mode-dark,
176
+ .traton.tds-mode-dark,
177
+ .traton .tl-mode-dark,
178
+ .traton.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(
181
+ --component--focus-ring-radius-extra-large
182
+ );
183
+ }
184
+
1
185
  .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);
186
+ --text-field-background: var(--component--input-background-primary);
187
+ --text-field-text: var(--component--input-text-value-default);
188
+ --text-field-placeholder: var(--component--input-text-placeholder-default);
189
+ --text-field-affix: var(--component--input-icon-prefix-default);
190
+ --text-field-affix-suffix: var(--component--input-icon-suffix-default);
191
+ --text-field-label: var(--component--input-text-label-default);
192
+ --text-field-label-inside: var(--component--input-text-label-default);
8
193
  --text-field-label-inside-left: 16px;
9
194
  --text-field-affix-width-icon: 35px;
10
195
  --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);
196
+ --text-field-helper: var(--component--input-text-helper-default);
197
+ --text-field-error: var(--component--input-text-error-default);
198
+ --text-field-error-icon: var(--component--input-icon-error-default);
199
+ --text-field-affix-error: var(--component--input-icon-error-default);
200
+ --text-field-background-disabled: var(--component--input-background-primary);
201
+ --text-field-text-disabled: var(--color-text-disabled);
202
+ --text-field-placeholder-disabled: var(--color-text-disabled);
203
+ --text-field-label-disabled: var(--color-text-disabled);
204
+ --text-field-affix-disabled: var(--color-text-disabled);
205
+ --text-field-textcounter: var(--component--input-text-counter-default);
206
+ --text-field-opacity-disabled: var(--component--input-opacity-disabled);
207
+ --text-field-border-radius: calc(var(--component--input-border-radius-top-left) * 1px)
208
+ calc(var(--component--input-border-radius-top-right) * 1px)
209
+ calc(var(--component--input-border-radius-bottom-right) * 1px)
210
+ calc(var(--component--input-border-radius-bottom-left) * 1px);
211
+ --text-field-border-color: var(--component--input-border-default);
212
+ --text-field-border-color-hover: var(--component--input-border-hover);
213
+ --text-field-border-color-success: var(--component--input-border-success-default);
214
+ --text-field-border-color-error: var(--component--input-border-error-default);
215
+ --text-field-border-color-readonly: var(--color-border-strong);
216
+ --text-field-focus-ring-radius: var(--component-text-field-focus-ring-radius-primary);
21
217
  }
22
218
  .tl-text-field--primary {
23
- --text-field-background: var(--color-background-layer-01);
24
- --text-field-background-disabled: var(--color-background-layer-01);
219
+ --text-field-background: var(--component--input-background-primary);
220
+ --text-field-background-disabled: var(--component--input-background-primary);
221
+ --text-field-focus-ring-radius: var(--component-text-field-focus-ring-radius-primary);
25
222
  }
26
223
  .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;
224
+ --text-field-background: var(--component--input-background-secondary);
225
+ --text-field-background-disabled: var(--component--input-background-secondary);
226
+ --text-field-focus-ring-radius: var(--component-text-field-focus-ring-radius-secondary);
62
227
  }
63
228
 
64
229
  /* Typography Usage mixins */
@@ -348,6 +513,10 @@
348
513
  mask-image: var(--icon-document_tool-svg);
349
514
  background-color: currentcolor;
350
515
  }
516
+ .tl-icon--document_word {
517
+ mask-image: var(--icon-document_word-svg);
518
+ background-color: currentcolor;
519
+ }
351
520
  .tl-icon--document_wrong {
352
521
  mask-image: var(--icon-document_wrong-svg);
353
522
  background-color: currentcolor;
@@ -1271,12 +1440,12 @@
1271
1440
  .tl-text-field:has(.tl-text-field__input:disabled) {
1272
1441
  cursor: not-allowed;
1273
1442
  }
1443
+ .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 {
1444
+ opacity: var(--text-field-opacity-disabled);
1445
+ }
1274
1446
  .tl-text-field .tl-icon {
1275
1447
  background-color: var(--text-field-affix);
1276
1448
  }
1277
- :has(.tl-text-field__input:disabled) .tl-text-field .tl-icon {
1278
- background-color: var(--text-field-affix-disabled);
1279
- }
1280
1449
 
1281
1450
  .tl-text-field__input-wrapper {
1282
1451
  position: relative;
@@ -1305,8 +1474,11 @@
1305
1474
  width: 100%;
1306
1475
  box-sizing: border-box;
1307
1476
  margin: 0;
1308
- border: none;
1477
+ border-style: solid;
1478
+ border-color: var(--text-field-border-color);
1479
+ 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
1480
  outline: none;
1481
+ transition: border-color 200ms ease;
1310
1482
  }
1311
1483
  .tl-text-field__input::placeholder {
1312
1484
  color: var(--text-field-placeholder);
@@ -1331,42 +1503,46 @@
1331
1503
  color: var(--text-field-text);
1332
1504
  flex: 1;
1333
1505
  order: 2;
1334
- box-shadow: inset var(--text-field-box-shadow);
1335
- transition: box-shadow 0.2s;
1336
1506
  }
1337
1507
  .tl-text-field__input:focus {
1338
- box-shadow: inset var(--text-field-box-shadow-focus);
1508
+ outline: 2px solid var(--component--focus-ring-color-strong);
1509
+ box-shadow: 0 0 0 1px var(--component--focus-ring-color-discrete);
1510
+ outline-offset: 1px;
1511
+ z-index: 1;
1339
1512
  }
1340
1513
  .tl-text-field:hover .tl-text-field__input:not(:focus):not(:disabled) {
1341
- box-shadow: inset var(--text-field-box-shadow-hover);
1514
+ border-color: var(--text-field-border-color-hover);
1342
1515
  }
1343
1516
  .tl-text-field--error .tl-text-field__input {
1344
- box-shadow: inset var(--text-field-box-shadow-error);
1517
+ border-color: var(--text-field-border-color-error);
1345
1518
  }
1346
1519
  .tl-text-field--error .tl-text-field__input:focus {
1347
- box-shadow: inset var(--text-field-box-shadow-error-focus);
1520
+ outline: 2px solid var(--component--focus-ring-color-strong);
1521
+ box-shadow: 0 0 0 1px var(--component--focus-ring-color-discrete);
1522
+ outline-offset: 1px;
1523
+ z-index: 1;
1348
1524
  }
1349
1525
  .tl-text-field--error:hover .tl-text-field__input:not(:focus):not(:disabled) {
1350
- box-shadow: inset var(--text-field-box-shadow-error-hover);
1526
+ border-color: var(--text-field-border-color-error);
1351
1527
  }
1352
1528
  .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);
1529
+ border-color: var(--text-field-border-color-success);
1354
1530
  }
1355
1531
  .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
1532
  cursor: not-allowed;
1360
1533
  pointer-events: none;
1361
1534
  }
1362
1535
  :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);
1536
+ border-color: var(--text-field-border-color-readonly);
1364
1537
  }
1365
1538
  :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);
1539
+ outline: 2px solid var(--component--focus-ring-color-strong);
1540
+ box-shadow: 0 0 0 1px var(--component--focus-ring-color-discrete);
1541
+ outline-offset: 1px;
1542
+ z-index: 1;
1367
1543
  }
1368
1544
  :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);
1545
+ border-color: var(--text-field-border-color-hover);
1370
1546
  }
1371
1547
  :has(.tl-text-field__input[readonly]):not(:has(.tl-text-field__input:disabled)) .tl-text-field__input {
1372
1548
  user-select: auto;
@@ -1499,7 +1675,7 @@
1499
1675
  position: relative;
1500
1676
  }
1501
1677
  :has(.tl-text-field__input:disabled) .tl-text-field__helper {
1502
- color: var(--color-foreground-text-disabled);
1678
+ color: var(--color-text-disabled);
1503
1679
  }
1504
1680
  .tl-text-field--error .tl-text-field__helper {
1505
1681
  padding-left: 24px;
@@ -1511,7 +1687,7 @@
1511
1687
  top: 0;
1512
1688
  width: 16px;
1513
1689
  height: 16px;
1514
- background-color: var(--text-field-error);
1690
+ background-color: var(--text-field-error-icon);
1515
1691
  mask-image: var(--icon-error-svg);
1516
1692
  mask-size: contain;
1517
1693
  mask-repeat: no-repeat;
@@ -1527,7 +1703,7 @@
1527
1703
  color: var(--text-field-error);
1528
1704
  }
1529
1705
  .tl-text-field--error:has(.tl-text-field__input:disabled) .tl-text-field__helper::before {
1530
- background-color: var(--color-foreground-text-disabled);
1706
+ background-color: var(--color-text-disabled);
1531
1707
  }
1532
1708
 
1533
1709
  .tl-text-field__charcounter {
@@ -1541,7 +1717,7 @@
1541
1717
  color: var(--text-field-textcounter);
1542
1718
  }
1543
1719
  :has(.tl-text-field__input:disabled) .tl-text-field__charcounter {
1544
- color: var(--color-foreground-text-disabled);
1720
+ color: var(--color-text-disabled);
1545
1721
  }
1546
1722
  .tl-text-field--error:not(:has(.tl-text-field__input[readonly])):not(:has(.tl-text-field__input:disabled)) .tl-text-field__charcounter {
1547
1723
  color: var(--text-field-error);
@@ -1551,7 +1727,7 @@
1551
1727
  }
1552
1728
 
1553
1729
  .tl-text-field__charcounter-divider {
1554
- color: var(--color-foreground-text-disabled);
1730
+ color: var(--color-text-disabled);
1555
1731
  }
1556
1732
 
1557
1733
  .tl-text-field__prefix {
@@ -1601,6 +1777,10 @@
1601
1777
  align-items: center;
1602
1778
  z-index: 1;
1603
1779
  position: relative;
1780
+ color: var(--text-field-affix-suffix);
1781
+ }
1782
+ .tl-text-field__suffix--icon.tl-icon {
1783
+ background-color: var(--text-field-affix-suffix);
1604
1784
  }
1605
1785
  .tl-text-field__suffix--text, .tl-text-field__suffix--icon {
1606
1786
  position: absolute;