@scania/tegel-lite 1.8.0 → 1.9.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 (11) hide show
  1. package/README.dev.md +2 -5
  2. package/dist/assets/icons/scania/email_open.svg +5 -0
  3. package/dist/assets/icons/traton/email_open.svg +5 -0
  4. package/dist/components.css +290 -398
  5. package/dist/scania-variables.css +2 -0
  6. package/dist/tl-datetime.css +222 -247
  7. package/dist/tl-dropdown.css +505 -0
  8. package/dist/tl-icon.css +4 -0
  9. package/dist/tl-text-field.css +5 -1
  10. package/dist/traton-variables.css +2 -0
  11. package/package.json +2 -2
package/dist/scania-variables.css CHANGED
@@ -1213,6 +1213,7 @@ h6 {
1213
1213
  --scania-icon-edit-svg: url(./assets/icons/scania/edit.svg);
1214
1214
  --scania-icon-edit_inactive-svg: url(./assets/icons/scania/edit_inactive.svg);
1215
1215
  --scania-icon-email-svg: url(./assets/icons/scania/email.svg);
1216
+ --scania-icon-email_open-svg: url(./assets/icons/scania/email_open.svg);
1216
1217
  --scania-icon-employee-svg: url(./assets/icons/scania/employee.svg);
1217
1218
  --scania-icon-engine-svg: url(./assets/icons/scania/engine.svg);
1218
1219
  --scania-icon-engine_inactive-svg: url(./assets/icons/scania/engine_inactive.svg);
@@ -1483,6 +1484,7 @@ h6 {
1483
1484
  --icon-edit-svg: var(--scania-icon-edit-svg);
1484
1485
  --icon-edit_inactive-svg: var(--scania-icon-edit_inactive-svg);
1485
1486
  --icon-email-svg: var(--scania-icon-email-svg);
1487
+ --icon-email_open-svg: var(--scania-icon-email_open-svg);
1486
1488
  --icon-employee-svg: var(--scania-icon-employee-svg);
1487
1489
  --icon-engine-svg: var(--scania-icon-engine-svg);
1488
1490
  --icon-engine_inactive-svg: var(--scania-icon-engine_inactive-svg);
package/dist/tl-datetime.css CHANGED
@@ -1,126 +1,172 @@
1
1
  @charset "UTF-8";
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--input-background-primary: var(--color-background-layer-01);
12
+ --component--input-background-secondary: var(--color-background-layer-02);
13
+ --component--input-border-default: var(--color-border-soft);
14
+ --component--input-border-hover: var(--color-border-strong);
15
+ --component--input-border-success-default: var(--color-border-strong);
16
+ --component--input-border-error-default: var(--color-system-danger-default);
17
+ --component--input-border-radius-default: var(--scania-unit-4);
18
+ --component--input-border-radius-none: var(--scania-unit-0);
19
+ --component--input-border-radius-top-left: var(--component--input-border-radius-default);
20
+ --component--input-border-radius-top-right: var(--component--input-border-radius-default);
21
+ --component--input-border-radius-bottom-left: var(--component--input-border-radius-none);
22
+ --component--input-border-radius-bottom-right: var(--component--input-border-radius-none);
23
+ --component--input-border-width-default: var(--scania-unit-1);
24
+ --component--input-border-width-none: var(--scania-unit-0);
25
+ --component--input-border-width-top: var(--component--input-border-width-none);
26
+ --component--input-border-width-right: var(--component--input-border-width-none);
27
+ --component--input-border-width-bottom: var(--component--input-border-width-default);
28
+ --component--input-border-width-left: var(--component--input-border-width-none);
29
+ --component--input-icon-prefix-default: var(--color-text-defined);
30
+ --component--input-icon-suffix-default: var(--color-text-defined);
31
+ --component--input-icon-error-default: var(--color-system-danger-default);
32
+ --component--input-icon-control-default: var(--color-icon-strong);
33
+ --component--input-icon-control-hover: var(--component--input-icon-control-default);
34
+ --component--input-opacity-disabled: var(--scania-opacity-25);
35
+ --component--input-text-counter-default: var(--color-text-defined);
36
+ --component--input-text-label-default: var(--color-text-strong);
37
+ --component--input-text-helper-default: var(--color-text-defined);
38
+ --component--input-text-placeholder-default: var(--color-text-soft);
39
+ --component--input-text-value-default: var(--color-text-strong);
40
+ --component--input-text-error-default: var(--color-system-danger-default);
41
+ }
42
+
43
+ .traton .tds-mode-light,
44
+ .traton.tds-mode-light,
45
+ .traton .tl-mode-light,
46
+ .traton.tl-mode-light {
47
+ --component--input-background-primary: var(--color-background-layer-01);
48
+ --component--input-background-secondary: var(--color-background-layer-02);
49
+ --component--input-border-default: var(--color-border-soft);
50
+ --component--input-border-hover: var(--color-border-strong);
51
+ --component--input-border-success-default: var(--color-border-strong);
52
+ --component--input-border-error-default: var(--color-system-danger-default);
53
+ --component--input-border-radius-default: var(--traton-unit-4);
54
+ --component--input-border-radius-none: var(--traton-unit-0);
55
+ --component--input-border-radius-top-left: var(--component--input-border-radius-default);
56
+ --component--input-border-radius-top-right: var(--component--input-border-radius-default);
57
+ --component--input-border-radius-bottom-left: var(--component--input-border-radius-default);
58
+ --component--input-border-radius-bottom-right: var(--component--input-border-radius-default);
59
+ --component--input-border-width-default: var(--traton-unit-1);
60
+ --component--input-border-width-none: var(--traton-unit-0);
61
+ --component--input-border-width-top: var(--component--input-border-width-default);
62
+ --component--input-border-width-right: var(--component--input-border-width-default);
63
+ --component--input-border-width-bottom: var(--component--input-border-width-default);
64
+ --component--input-border-width-left: var(--component--input-border-width-default);
65
+ --component--input-icon-prefix-default: var(--color-text-defined);
66
+ --component--input-icon-suffix-default: var(--color-text-defined);
67
+ --component--input-icon-error-default: var(--color-system-danger-default);
68
+ --component--input-icon-control-default: var(--color-icon-subtle);
69
+ --component--input-icon-control-hover: var(--component--input-icon-control-default);
70
+ --component--input-opacity-disabled: var(--traton-opacity-25);
71
+ --component--input-text-counter-default: var(--color-text-defined);
72
+ --component--input-text-label-default: var(--color-text-strong);
73
+ --component--input-text-helper-default: var(--color-text-defined);
74
+ --component--input-text-placeholder-default: var(--color-text-subtle);
75
+ --component--input-text-value-default: var(--color-text-strong);
76
+ --component--input-text-error-default: var(--color-system-danger-default);
77
+ }
78
+
79
+ .tds-mode-dark,
80
+ .scania .tds-mode-dark,
81
+ .scania.tds-mode-dark,
82
+ .scania .tl-mode-dark,
83
+ .scania.tl-mode-dark {
84
+ --component--input-background-primary: var(--color-background-layer-01);
85
+ --component--input-background-secondary: var(--color-background-layer-02);
86
+ --component--input-border-default: var(--color-border-soft);
87
+ --component--input-border-hover: var(--color-border-strong);
88
+ --component--input-border-success-default: var(--color-border-strong);
89
+ --component--input-border-error-default: var(--color-system-danger-default);
90
+ --component--input-border-radius-default: var(--scania-unit-4);
91
+ --component--input-border-radius-none: var(--scania-unit-0);
92
+ --component--input-border-radius-top-left: var(--component--input-border-radius-default);
93
+ --component--input-border-radius-top-right: var(--component--input-border-radius-default);
94
+ --component--input-border-radius-bottom-left: var(--component--input-border-radius-none);
95
+ --component--input-border-radius-bottom-right: var(--component--input-border-radius-none);
96
+ --component--input-border-width-default: var(--scania-unit-1);
97
+ --component--input-border-width-none: var(--scania-unit-0);
98
+ --component--input-border-width-top: var(--component--input-border-width-none);
99
+ --component--input-border-width-right: var(--component--input-border-width-none);
100
+ --component--input-border-width-bottom: var(--component--input-border-width-default);
101
+ --component--input-border-width-left: var(--component--input-border-width-none);
102
+ --component--input-icon-prefix-default: var(--color-text-defined);
103
+ --component--input-icon-suffix-default: var(--color-text-defined);
104
+ --component--input-icon-error-default: var(--color-system-danger-default);
105
+ --component--input-icon-control-default: var(--color-icon-strong);
106
+ --component--input-icon-control-hover: var(--component--input-icon-control-default);
107
+ --component--input-opacity-disabled: var(--scania-opacity-25);
108
+ --component--input-text-counter-default: var(--color-text-defined);
109
+ --component--input-text-label-default: var(--color-text-strong);
110
+ --component--input-text-helper-default: var(--color-text-defined);
111
+ --component--input-text-placeholder-default: var(--color-text-soft);
112
+ --component--input-text-value-default: var(--color-text-strong);
113
+ --component--input-text-error-default: var(--color-system-danger-default);
114
+ }
115
+
116
+ .traton .tds-mode-dark,
117
+ .traton.tds-mode-dark,
118
+ .traton .tl-mode-dark,
119
+ .traton.tl-mode-dark {
120
+ --component--input-background-primary: var(--color-background-layer-01);
121
+ --component--input-background-secondary: var(--color-background-layer-02);
122
+ --component--input-border-default: var(--color-border-soft);
123
+ --component--input-border-hover: var(--color-border-strong);
124
+ --component--input-border-success-default: var(--color-border-strong);
125
+ --component--input-border-error-default: var(--color-system-danger-default);
126
+ --component--input-border-radius-default: var(--traton-unit-4);
127
+ --component--input-border-radius-none: var(--traton-unit-0);
128
+ --component--input-border-radius-top-left: var(--component--input-border-radius-default);
129
+ --component--input-border-radius-top-right: var(--component--input-border-radius-default);
130
+ --component--input-border-radius-bottom-left: var(--component--input-border-radius-default);
131
+ --component--input-border-radius-bottom-right: var(--component--input-border-radius-default);
132
+ --component--input-border-width-default: var(--traton-unit-1);
133
+ --component--input-border-width-none: var(--traton-unit-0);
134
+ --component--input-border-width-top: var(--component--input-border-width-default);
135
+ --component--input-border-width-right: var(--component--input-border-width-default);
136
+ --component--input-border-width-bottom: var(--component--input-border-width-default);
137
+ --component--input-border-width-left: var(--component--input-border-width-default);
138
+ --component--input-icon-prefix-default: var(--color-text-defined);
139
+ --component--input-icon-suffix-default: var(--color-text-defined);
140
+ --component--input-icon-error-default: var(--color-system-danger-default);
141
+ --component--input-icon-control-default: var(--color-icon-subtle);
142
+ --component--input-icon-control-hover: var(--component--input-icon-control-default);
143
+ --component--input-opacity-disabled: var(--traton-opacity-25);
144
+ --component--input-text-counter-default: var(--color-text-defined);
145
+ --component--input-text-label-default: var(--color-text-strong);
146
+ --component--input-text-helper-default: var(--color-text-defined);
147
+ --component--input-text-placeholder-default: var(--color-text-subtle);
148
+ --component--input-text-value-default: var(--color-text-strong);
149
+ --component--input-text-error-default: var(--color-system-danger-default);
150
+ }
151
+
2
152
  .tl-datetime {
3
- --datetime-background-primary: var(--color-background-layer-01);
4
- --datetime-background-secondary: var(--color-background-layer-02);
153
+ --datetime-background-primary: var(--component--input-background-primary);
154
+ --datetime-background-secondary: var(--component--input-background-secondary);
5
155
  --datetime-background: var(--datetime-background-primary);
6
- --datetime-text: var(--color-foreground-text-strong);
7
- --datetime-icon: var(--color-foreground-icon-strong);
8
- --datetime-placeholder: var(--color-text-subtle);
9
- --datetime-background-disabled-primary: var(--color-background-layer-01);
10
- --datetime-background-disabled-secondary: var(--color-background-layer-02);
11
- --datetime-background-disabled: var(--datetime-background-disabled-primary);
12
- --datetime-text-disabled: var(--color-foreground-text-disabled);
13
- --datetime-placeholder-disabled: var(--color-text-disabled);
14
- --datetime-label-disabled: var(--color-foreground-text-disabled);
15
- --datetime-icon-disabled: var(--color-foreground-text-disabled);
16
- --datetime-label: var(--color-foreground-text-strong);
17
- --datetime-label-inside: var(--color-foreground-text-strong);
18
- --datetime-placeholder-focus: var(--color-text-subtle);
19
- --datetime-highlight-bar: var(--color-foreground-border-accent-focus);
20
- --datetime-helper: var(--color-foreground-text-defined);
21
- --datetime-helper-error: var(--color-system-danger-default);
22
- --datetime-icon-error: var(--color-system-danger-default);
156
+ --datetime-text: var(--component--input-text-value-default);
157
+ --datetime-placeholder: var(--component--input-text-placeholder-default);
158
+ --datetime-label: var(--component--input-text-label-default);
159
+ --datetime-helper: var(--component--input-text-helper-default);
160
+ --datetime-helper-error: var(--component--input-text-error-default);
161
+ --datetime-icon: var(--component--input-icon-suffix-default);
162
+ --datetime-icon-error: var(--component--input-text-error-default);
163
+ --datetime-opacity-disabled: calc(var(--component--input-opacity-disabled) / 100);
23
164
  }
24
165
  .tl-datetime--primary {
25
166
  --datetime-background: var(--datetime-background-primary);
26
- --datetime-background-disabled: var(--datetime-background-disabled-primary);
27
167
  }
28
168
  .tl-datetime--secondary {
29
169
  --datetime-background: var(--datetime-background-secondary);
30
- --datetime-background-disabled: var(--datetime-background-disabled-secondary);
31
- }
32
-
33
- .tl-datetime,
34
- .scania .tl-datetime {
35
- /* Datetime: units */
36
- --datetime-border-radius: 4px 4px 0 0;
37
- /* Datetime: box-shadow */
38
- --datetime-box-shadow: 0 -1px 0 0 var(--color-foreground-border-soft);
39
- --datetime-box-shadow-hover: 0 -1px 0 0 var(--color-foreground-border-strong);
40
- --datetime-box-shadow-focus: 0 -2px 0 0 var(--color-foreground-border-accent-focus);
41
- --datetime-box-shadow-disabled: none;
42
- --datetime-box-shadow-error: 0 -1px 0 0 var(--color-system-danger-default);
43
- --datetime-box-shadow-error-hover: 0 -1px 0 0 var(--color-system-danger-default);
44
- --datetime-box-shadow-error-focus: 0 -2px 0 0 var(--color-system-danger-default);
45
- --datetime-highlight: var(--datetime-highlight-bar);
46
- --datetime-highlight-error: var(--color-system-danger-default);
47
- /* Datetime: border colors */
48
- --datetime-border-color-left: transparent;
49
- --datetime-border-color-right: transparent;
50
- --datetime-border-color-bottom: var(--color-foreground-border-soft);
51
- --datetime-border-color-top: transparent;
52
- /* Datetime: border colors on hover */
53
- --datetime-border-color-left-hover: transparent;
54
- --datetime-border-color-right-hover: transparent;
55
- --datetime-border-color-bottom-hover: var(--color-foreground-border-strong);
56
- --datetime-border-color-top-hover: transparent;
57
- /* Datetime: border colors on success */
58
- --datetime-border-color-left-success: transparent;
59
- --datetime-border-color-right-success: transparent;
60
- --datetime-border-color-bottom-success: var(--color-foreground-border-strong);
61
- --datetime-border-color-top-success: transparent;
62
- /* Datetime: border colors on focus */
63
- --datetime-border-color-left-focus: transparent;
64
- --datetime-border-color-right-focus: transparent;
65
- --datetime-border-color-bottom-focus: var(--color-foreground-border-strong);
66
- --datetime-border-color-top-focus: transparent;
67
- --datetime-outline-color-focus: none;
68
- /* Datetime: border colors on error */
69
- --datetime-border-color-left-error: transparent;
70
- --datetime-border-color-right-error: transparent;
71
- --datetime-border-color-bottom-error: var(--color-system-danger-default);
72
- --datetime-border-color-top-error: transparent;
73
- /* Datetime: bar colors */
74
- --datetime-bar-color-focus: var(--color-foreground-border-accent-focus);
75
- --datetime-bar-color-error: var(--color-system-danger-default);
76
- /* Datetime: disabled */
77
- --datetime-disabled-bottom-bar: transparent;
78
- }
79
-
80
- .traton .tl-datetime {
81
- /* Datetime: units */
82
- --datetime-border-radius: 4px 4px 4px 4px;
83
- /* Datetime: box-shadow */
84
- --datetime-box-shadow: 0 0 0 1px var(--color-foreground-border-soft);
85
- --datetime-box-shadow-hover: 0 0 0 1px var(--color-foreground-border-strong);
86
- --datetime-box-shadow-focus: 0 0 0 2px var(--color-foreground-border-accent-focus);
87
- --datetime-box-shadow-disabled: none;
88
- --datetime-box-shadow-error: 0 0 0 1px var(--color-system-danger-default);
89
- --datetime-box-shadow-error-hover: 0 0 0 1px var(--color-system-danger-default);
90
- --datetime-box-shadow-error-focus: 0 0 0 2px var(--color-system-danger-default);
91
- --datetime-highlight: transparent;
92
- --datetime-highlight-error: transparent;
93
- /* Datetime: border colors */
94
- --datetime-border-color-left: var(--color-foreground-border-soft);
95
- --datetime-border-color-right: var(--color-foreground-border-soft);
96
- --datetime-border-color-bottom: var(--color-foreground-border-soft);
97
- --datetime-border-color-top: var(--color-foreground-border-soft);
98
- /* Datetime: border colors on hover */
99
- --datetime-border-color-left-hover: var(--color-foreground-border-strong);
100
- --datetime-border-color-right-hover: var(--color-foreground-border-strong);
101
- --datetime-border-color-bottom-hover: var(--color-foreground-border-strong);
102
- --datetime-border-color-top-hover: var(--color-foreground-border-strong);
103
- /* Datetime: border colors on success */
104
- --datetime-border-color-left-success: var(--color-foreground-border-strong);
105
- --datetime-border-color-right-success: var(--color-foreground-border-strong);
106
- --datetime-border-color-bottom-success: var(--color-foreground-border-strong);
107
- --datetime-border-color-top-success: var(--color-foreground-border-strong);
108
- /* Datetime: border colors on focus */
109
- --datetime-border-color-left-focus: var(--color-foreground-border-accent-focus);
110
- --datetime-border-color-right-focus: var(--color-foreground-border-accent-focus);
111
- --datetime-border-color-bottom-focus: var(--color-foreground-border-accent-focus);
112
- --datetime-border-color-top-focus: var(--color-foreground-border-accent-focus);
113
- --datetime-outline-color-focus: var(--color-foreground-border-accent-focus);
114
- /* Datetime: border colors on error */
115
- --datetime-border-color-left-error: var(--color-system-danger-default);
116
- --datetime-border-color-right-error: var(--color-system-danger-default);
117
- --datetime-border-color-bottom-error: var(--color-system-danger-default);
118
- --datetime-border-color-top-error: var(--color-system-danger-default);
119
- /* Datetime: bar colors */
120
- --datetime-bar-color-focus: transparent;
121
- --datetime-bar-color-error: transparent;
122
- /* Datetime: disabled */
123
- --datetime-disabled-bottom-bar: none;
124
170
  }
125
171
 
126
172
  /* Typography Usage mixins */
@@ -146,25 +192,36 @@
146
192
  .tl-datetime input[type=time]::-webkit-calendar-picker-indicator {
147
193
  opacity: 0;
148
194
  }
195
+ @supports selector(input::-webkit-datetime-edit) {
196
+ .tl-datetime:not(.tl-datetime--success, .tl-datetime--error) .tl-datetime__input-placeholder:not(:focus)::-webkit-datetime-edit, .tl-datetime:not(.tl-datetime--success, .tl-datetime--error) .tl-datetime__input-placeholder:not(:focus)::-webkit-datetime-edit-fields-wrapper {
197
+ color: var(--datetime-placeholder);
198
+ -webkit-text-fill-color: var(--datetime-placeholder);
199
+ }
200
+ .tl-datetime:not(.tl-datetime--success, .tl-datetime--error) .tl-datetime__input-placeholder:focus::-webkit-datetime-edit, .tl-datetime:not(.tl-datetime--success, .tl-datetime--error) .tl-datetime__input-placeholder:focus::-webkit-datetime-edit-fields-wrapper {
201
+ color: var(--datetime-text);
202
+ -webkit-text-fill-color: var(--datetime-text);
203
+ }
204
+ }
205
+
206
+ .tl-datetime:has(input:disabled) {
207
+ opacity: var(--datetime-opacity-disabled);
208
+ }
149
209
 
150
210
  .tl-datetime__label {
151
- font-family: var(--detail-05-font-family);
152
- font-size: var(--detail-05-font-size);
153
- line-height: var(--detail-05-line-height);
154
- font-weight: var(--detail-05-font-weight);
155
- letter-spacing: var(--detail-05-letter-spacing);
156
- text-transform: var(--detail-05-text-transform);
211
+ font-family: var(--type-system-label-01-font-family);
212
+ font-size: calc(var(--type-system-label-01-font-size) * 1px);
213
+ line-height: calc(var(--type-system-label-01-line-height) * 1px);
214
+ font-weight: var(--type-system-label-01-font-weight);
215
+ letter-spacing: calc(var(--type-system-label-01-letter-spacing) * 1px);
157
216
  display: block;
158
- margin-bottom: var(--tds-spacing-element-8);
217
+ margin-bottom: var(--unit-4);
159
218
  color: var(--datetime-label);
160
219
  }
161
220
  .tl-datetime:has(input:disabled) .tl-datetime__label {
162
- color: var(--datetime-label-disabled);
163
221
  cursor: not-allowed;
164
222
  }
165
223
 
166
224
  .tl-datetime__wrapper {
167
- border-radius: var(--datetime-border-radius);
168
225
  position: relative;
169
226
  height: 56px;
170
227
  box-sizing: border-box;
@@ -194,12 +251,6 @@
194
251
  display: none;
195
252
  }
196
253
  }
197
- .tl-datetime--error .tl-datetime__icon {
198
- color: var(--datetime-icon-error);
199
- }
200
- .tl-datetime:has(input:disabled) .tl-datetime__icon {
201
- color: var(--datetime-icon-disabled);
202
- }
203
254
 
204
255
  .tl-datetime__input {
205
256
  box-sizing: border-box;
@@ -208,49 +259,48 @@
208
259
  box-sizing: border-box;
209
260
  }
210
261
  .tl-datetime__input {
211
- font-family: var(--detail-02-font-family);
212
- font-size: var(--detail-02-font-size);
213
- line-height: var(--detail-02-line-height);
214
- font-weight: var(--detail-02-font-weight);
215
- letter-spacing: var(--detail-02-letter-spacing);
216
- text-transform: var(--detail-02-text-transform);
217
- border-radius: var(--datetime-border-radius);
262
+ font-family: var(--type-system-body-01-font-family);
263
+ font-size: calc(var(--type-system-body-01-font-size) * 1px);
264
+ line-height: calc(var(--type-system-body-01-line-height) * 1px);
265
+ font-weight: var(--type-system-body-01-font-weight);
266
+ letter-spacing: calc(var(--type-system-body-01-letter-spacing) * 1px);
267
+ text-transform: var(--type-system-body-01-text-transform);
268
+ 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);
269
+ border-radius: calc(var(--component--input-border-radius-top-left) * 1px) calc(var(--component--input-border-radius-top-right) * 1px) calc(var(--component--input-border-radius-bottom-right) * 1px) calc(var(--component--input-border-radius-bottom-left) * 1px);
270
+ border-style: solid;
271
+ border-color: var(--component--input-border-default);
218
272
  width: 100%;
219
273
  box-sizing: border-box;
220
274
  margin: 0;
221
- border: none;
222
275
  outline: none;
223
276
  height: 100%;
224
277
  color: var(--datetime-text);
225
278
  background-color: var(--datetime-background);
226
279
  padding: var(--tds-spacing-element-20) var(--tds-spacing-element-16);
227
- box-shadow: inset var(--datetime-box-shadow);
228
- transition: box-shadow 0.2s;
229
280
  }
230
281
  .tl-datetime__input:focus {
231
- box-shadow: inset var(--datetime-box-shadow-focus);
282
+ outline: 2px solid var(--component--focus-ring-color-strong);
283
+ box-shadow: 0 0 0 1px var(--component--focus-ring-color-discrete);
284
+ outline-offset: 1px;
285
+ z-index: 1;
232
286
  }
233
- .tl-datetime:hover .tl-datetime__input:not(:focus, :disabled) {
234
- box-shadow: inset var(--datetime-box-shadow-hover);
287
+ .tl-datetime:hover .tl-datetime__input:not(:focus, :disabled) :not(.tl-datetime__input--error) {
288
+ 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);
289
+ border-radius: calc(var(--component--input-border-radius-top-left) * 1px) calc(var(--component--input-border-radius-top-right) * 1px) calc(var(--component--input-border-radius-bottom-right) * 1px) calc(var(--component--input-border-radius-bottom-left) * 1px);
290
+ border-style: solid;
291
+ border-color: var(--component--input-border-hover);
235
292
  }
236
293
  .tl-datetime--error .tl-datetime__input {
237
- box-shadow: inset var(--datetime-box-shadow-error);
238
- }
239
- .tl-datetime--error .tl-datetime__input:focus {
240
- box-shadow: inset var(--datetime-box-shadow-error-focus);
241
- }
242
- .tl-datetime--error:hover .tl-datetime__input:not(:focus, :disabled) {
243
- box-shadow: inset var(--datetime-box-shadow-error-hover);
294
+ 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);
295
+ border-radius: calc(var(--component--input-border-radius-top-left) * 1px) calc(var(--component--input-border-radius-top-right) * 1px) calc(var(--component--input-border-radius-bottom-right) * 1px) calc(var(--component--input-border-radius-bottom-left) * 1px);
296
+ border-style: solid;
297
+ border-color: var(--component--input-text-error-default);
244
298
  }
245
- .tl-datetime--error .tl-datetime__input:disabled {
246
- box-shadow: inset var(--datetime-box-shadow-error);
247
- }
248
- .tl-datetime__input::placeholder {
249
- opacity: 1;
250
- color: var(--datetime-placeholder);
251
- }
252
- .tl-datetime__input:focus::placeholder {
253
- color: var(--datetime-placeholder-focus);
299
+ .tl-datetime--success .tl-datetime__input {
300
+ 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);
301
+ border-radius: calc(var(--component--input-border-radius-top-left) * 1px) calc(var(--component--input-border-radius-top-right) * 1px) calc(var(--component--input-border-radius-bottom-right) * 1px) calc(var(--component--input-border-radius-bottom-left) * 1px);
302
+ border-style: solid;
303
+ border-color: var(--component--input-border-success-default);
254
304
  }
255
305
  .tl-datetime__input {
256
306
  /*
@@ -272,87 +322,14 @@
272
322
  */
273
323
  }
274
324
  @supports selector(input::-webkit-datetime-edit) {
275
- .tl-datetime__input:not(:focus)::-webkit-datetime-edit, .tl-datetime__input:not(:focus)::-webkit-datetime-edit-fields-wrapper {
276
- color: var(--datetime-placeholder);
277
- -webkit-text-fill-color: var(--datetime-placeholder);
278
- }
279
- .tl-datetime__input:focus::-webkit-datetime-edit, .tl-datetime__input:focus::-webkit-datetime-edit-fields-wrapper {
280
- color: var(--datetime-placeholder-focus);
281
- -webkit-text-fill-color: var(--datetime-placeholder-focus);
325
+ .tl-datetime__input::-webkit-datetime-edit, .tl-datetime__input::-webkit-datetime-edit-fields-wrapper {
326
+ color: var(--datetime-text);
327
+ -webkit-text-fill-color: var(--datetime-text);
282
328
  }
283
329
  }
284
- .tl-datetime__input {
285
- /* WebKit datetime fields */
286
- }
287
- .tl-datetime__input::-webkit-datetime-edit-text {
288
- -webkit-text-fill-color: var(--datetime-text);
289
- }
290
- .tl-datetime__input::-webkit-datetime-edit-month-field {
291
- -webkit-text-fill-color: var(--datetime-text);
292
- }
293
- .tl-datetime__input::-webkit-datetime-edit-day-field {
294
- -webkit-text-fill-color: var(--datetime-text);
295
- }
296
- .tl-datetime__input::-webkit-datetime-edit-year-field {
297
- -webkit-text-fill-color: var(--datetime-text);
298
- }
299
- .tl-datetime__input::-webkit-datetime-edit-hour-field {
300
- -webkit-text-fill-color: var(--datetime-text);
301
- }
302
- .tl-datetime__input::-webkit-datetime-edit-minute-field {
303
- -webkit-text-fill-color: var(--datetime-text);
304
- }
305
- .tl-datetime__input::-webkit-datetime-edit-second-field {
306
- -webkit-text-fill-color: var(--datetime-text);
307
- }
308
- .tl-datetime__input::-webkit-datetime-edit-millisecond-field {
309
- -webkit-text-fill-color: var(--datetime-text);
310
- }
311
- .tl-datetime__input::-webkit-datetime-edit-meridiem-field {
312
- -webkit-text-fill-color: var(--datetime-text);
313
- }
314
330
  .tl-datetime__input:disabled {
315
- background-color: var(--datetime-background-disabled);
316
- color: var(--datetime-text-disabled);
317
- box-shadow: inset var(--datetime-box-shadow-disabled);
318
331
  cursor: not-allowed;
319
332
  }
320
- .tl-datetime__input:disabled::placeholder {
321
- color: var(--datetime-placeholder-disabled);
322
- }
323
- .tl-datetime__input:disabled ~ .tl-datetime__label-inside {
324
- color: var(--datetime-label-disabled);
325
- }
326
- .tl-datetime__input:disabled {
327
- /* WebKit datetime fields - disabled state */
328
- }
329
- .tl-datetime__input:disabled::-webkit-datetime-edit-text {
330
- -webkit-text-fill-color: var(--datetime-text-disabled);
331
- }
332
- .tl-datetime__input:disabled::-webkit-datetime-edit-month-field {
333
- -webkit-text-fill-color: var(--datetime-text-disabled);
334
- }
335
- .tl-datetime__input:disabled::-webkit-datetime-edit-day-field {
336
- -webkit-text-fill-color: var(--datetime-text-disabled);
337
- }
338
- .tl-datetime__input:disabled::-webkit-datetime-edit-year-field {
339
- -webkit-text-fill-color: var(--datetime-text-disabled);
340
- }
341
- .tl-datetime__input:disabled::-webkit-datetime-edit-hour-field {
342
- -webkit-text-fill-color: var(--datetime-text-disabled);
343
- }
344
- .tl-datetime__input:disabled::-webkit-datetime-edit-minute-field {
345
- -webkit-text-fill-color: var(--datetime-text-disabled);
346
- }
347
- .tl-datetime__input:disabled::-webkit-datetime-edit-second-field {
348
- -webkit-text-fill-color: var(--datetime-text-disabled);
349
- }
350
- .tl-datetime__input:disabled::-webkit-datetime-edit-millisecond-field {
351
- -webkit-text-fill-color: var(--datetime-text-disabled);
352
- }
353
- .tl-datetime__input:disabled::-webkit-datetime-edit-meridiem-field {
354
- -webkit-text-fill-color: var(--datetime-text-disabled);
355
- }
356
333
  .tl-datetime--label-inside .tl-datetime__input {
357
334
  padding-top: var(--tds-spacing-element-24);
358
335
  padding-bottom: 15px;
@@ -366,12 +343,11 @@
366
343
  }
367
344
 
368
345
  .tl-datetime__label-inside {
369
- font-family: var(--detail-07-font-family);
370
- font-size: var(--detail-07-font-size);
371
- line-height: var(--detail-07-line-height);
372
- font-weight: var(--detail-07-font-weight);
373
- letter-spacing: var(--detail-07-letter-spacing);
374
- text-transform: var(--detail-07-text-transform);
346
+ font-family: var(--type-system-label-02-font-family);
347
+ font-size: calc(var(--type-system-label-02-font-size) * 1px);
348
+ line-height: calc(var(--type-system-label-02-line-height) * 1px);
349
+ font-weight: var(--type-system-label-02-font-weight);
350
+ letter-spacing: calc(var(--type-system-label-02-letter-spacing) * 1px);
375
351
  position: absolute;
376
352
  pointer-events: none;
377
353
  color: var(--datetime-label-inside);
@@ -389,12 +365,11 @@
389
365
  }
390
366
 
391
367
  .tl-datetime__helper {
392
- font-family: var(--detail-05-font-family);
393
- font-size: var(--detail-05-font-size);
394
- line-height: var(--detail-05-line-height);
395
- font-weight: var(--detail-05-font-weight);
396
- letter-spacing: var(--detail-05-letter-spacing);
397
- text-transform: var(--detail-05-text-transform);
368
+ font-family: var(--type-system-label-01-font-family);
369
+ font-size: calc(var(--type-system-label-01-font-size) * 1px);
370
+ line-height: calc(var(--type-system-label-01-line-height) * 1px);
371
+ font-weight: var(--type-system-label-01-font-weight);
372
+ letter-spacing: calc(var(--type-system-label-01-letter-spacing) * 1px);
398
373
  display: inline-flex;
399
374
  gap: 8px;
400
375
  padding-top: var(--tds-spacing-element-4);
@@ -423,5 +398,5 @@
423
398
  /* Disabled state (should not override error text/icon color) */
424
399
  }
425
400
  .tl-datetime:has(input:disabled):not(.tl-datetime--error) .tl-datetime__helper {
426
- color: var(--color-foreground-text-disabled);
401
+ color: var(--datetime-text);
427
402
  }