@lumx/core 2.1.9 → 2.2.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 (19) hide show
  1. package/css/design-tokens.css +176 -605
  2. package/css/material.css +2 -0
  3. package/js/constants/design-tokens.js +2315 -2707
  4. package/js/constants/design-tokens.min.js +1 -1
  5. package/js/constants/design-tokens.min.js.map +1 -1
  6. package/js/constants/design-tokens.ts +992 -4311
  7. package/js/custom-colors.min.js.map +1 -1
  8. package/js/date-picker.min.js.map +1 -1
  9. package/js/utils.min.js.map +1 -1
  10. package/lumx.css +1 -1
  11. package/lumx.min.css +1 -1
  12. package/package.json +2 -2
  13. package/scss/_components.scss +1 -0
  14. package/scss/_design-tokens.scss +190 -610
  15. package/scss/components/skeleton/_index.scss +4 -7
  16. package/scss/components/skeleton/_mixins.scss +10 -0
  17. package/scss/components/thumbnail/_index.scss +100 -49
  18. package/scss/components/user-block/_index.scss +1 -10
  19. package/scss/core/color/_functions.scss +2 -6
package/scss/_design-tokens.scss CHANGED
@@ -1,210 +1,105 @@
1
1
  /**
2
2
  * Do not edit directly
3
- * Generated on Tue, 30 Nov 2021 09:20:09 GMT
3
+ * Generated on Wed, 12 Jan 2022 16:44:48 GMT
4
4
  */
5
5
 
6
6
  $lumx-button-height: 36px !default;
7
- $lumx-button-border-radius: var(--lumx-border-radius) !default;
7
+ $lumx-button-border-radius: 4px !default;
8
8
  $lumx-button-emphasis-high-state-default-padding-horizontal: 16px !default;
9
9
  $lumx-button-emphasis-high-state-default-border-width: 0 !default;
10
10
  $lumx-button-emphasis-high-state-default-theme-light-background-color: var(--lumx-color-primary-N) !default;
11
- $lumx-button-emphasis-high-state-default-theme-light-color: #fff !default; // Neutral light color
11
+ $lumx-button-emphasis-high-state-default-theme-light-color: var(--lumx-color-light-N) !default;
12
12
  $lumx-button-emphasis-high-state-default-theme-light-border-color: transparent !default;
13
- $lumx-button-emphasis-high-state-default-theme-dark-background-color: #fff !default; // Neutral light color
13
+ $lumx-button-emphasis-high-state-default-theme-dark-background-color: var(--lumx-color-light-N) !default;
14
14
  $lumx-button-emphasis-high-state-default-theme-dark-color: var(--lumx-color-primary-N) !default;
15
15
  $lumx-button-emphasis-high-state-default-theme-dark-border-color: transparent !default;
16
16
  $lumx-button-emphasis-high-state-hover-padding-horizontal: 16px !default;
17
17
  $lumx-button-emphasis-high-state-hover-border-width: 0 !default;
18
18
  $lumx-button-emphasis-high-state-hover-theme-light-background-color: var(--lumx-color-primary-D1) !default;
19
- $lumx-button-emphasis-high-state-hover-theme-light-color: #fff !default; // Neutral light color
19
+ $lumx-button-emphasis-high-state-hover-theme-light-color: var(--lumx-color-light-N) !default;
20
20
  $lumx-button-emphasis-high-state-hover-theme-light-border-color: transparent !default;
21
- $lumx-button-emphasis-high-state-hover-theme-dark-background-color: rgba(
22
- 255,
23
- 255,
24
- 255,
25
- 0.9
26
- ) !default; // Base light color with 90% opacity
21
+ $lumx-button-emphasis-high-state-hover-theme-dark-background-color: var(--lumx-color-light-L1) !default;
27
22
  $lumx-button-emphasis-high-state-hover-theme-dark-color: var(--lumx-color-primary-N) !default;
28
23
  $lumx-button-emphasis-high-state-hover-theme-dark-border-color: transparent !default;
29
24
  $lumx-button-emphasis-high-state-active-padding-horizontal: 16px !default;
30
25
  $lumx-button-emphasis-high-state-active-border-width: 0 !default;
31
26
  $lumx-button-emphasis-high-state-active-theme-light-background-color: var(--lumx-color-primary-D2) !default;
32
- $lumx-button-emphasis-high-state-active-theme-light-color: #fff !default; // Neutral light color
27
+ $lumx-button-emphasis-high-state-active-theme-light-color: var(--lumx-color-light-N) !default;
33
28
  $lumx-button-emphasis-high-state-active-theme-light-border-color: transparent !default;
34
- $lumx-button-emphasis-high-state-active-theme-dark-background-color: rgba(
35
- 255,
36
- 255,
37
- 255,
38
- 0.8
39
- ) !default; // Base light color with 80% opacity
29
+ $lumx-button-emphasis-high-state-active-theme-dark-background-color: var(--lumx-color-light-L2) !default;
40
30
  $lumx-button-emphasis-high-state-active-theme-dark-color: var(--lumx-color-primary-N) !default;
41
31
  $lumx-button-emphasis-high-state-active-theme-dark-border-color: transparent !default;
42
32
  $lumx-button-emphasis-medium-state-default-padding-horizontal: 16px !default;
43
33
  $lumx-button-emphasis-medium-state-default-border-width: 0 !default;
44
- $lumx-button-emphasis-medium-state-default-theme-light-background-color: rgba(
45
- 0,
46
- 0,
47
- 0,
48
- 0.12
49
- ) !default; // Base dark color with 12% opacity
50
- $lumx-button-emphasis-medium-state-default-theme-light-color: rgba(
51
- 0,
52
- 0,
53
- 0,
54
- 0.7
55
- ) !default; // Base dark color with 70% opacity
34
+ $lumx-button-emphasis-medium-state-default-theme-light-background-color: var(--lumx-color-dark-L5) !default;
35
+ $lumx-button-emphasis-medium-state-default-theme-light-color: var(--lumx-color-dark-L1) !default;
56
36
  $lumx-button-emphasis-medium-state-default-theme-light-border-color: transparent !default;
57
- $lumx-button-emphasis-medium-state-default-theme-dark-background-color: rgba(
58
- 255,
59
- 255,
60
- 255,
61
- 0.2
62
- ) !default; // Base light color with 20% opacity
63
- $lumx-button-emphasis-medium-state-default-theme-dark-color: #fff !default; // Neutral light color
37
+ $lumx-button-emphasis-medium-state-default-theme-dark-background-color: var(--lumx-color-light-L5) !default;
38
+ $lumx-button-emphasis-medium-state-default-theme-dark-color: var(--lumx-color-light-N) !default;
64
39
  $lumx-button-emphasis-medium-state-default-theme-dark-border-color: transparent !default;
65
40
  $lumx-button-emphasis-medium-state-hover-padding-horizontal: 16px !default;
66
41
  $lumx-button-emphasis-medium-state-hover-border-width: 0 !default;
67
- $lumx-button-emphasis-medium-state-hover-theme-light-background-color: rgba(
68
- 0,
69
- 0,
70
- 0,
71
- 0.2
72
- ) !default; // Base dark color with 20% opacity
73
- $lumx-button-emphasis-medium-state-hover-theme-light-color: rgba(
74
- 0,
75
- 0,
76
- 0,
77
- 0.7
78
- ) !default; // Base dark color with 70% opacity
42
+ $lumx-button-emphasis-medium-state-hover-theme-light-background-color: var(--lumx-color-dark-L4) !default;
43
+ $lumx-button-emphasis-medium-state-hover-theme-light-color: var(--lumx-color-dark-L1) !default;
79
44
  $lumx-button-emphasis-medium-state-hover-theme-light-border-color: transparent !default;
80
- $lumx-button-emphasis-medium-state-hover-theme-dark-background-color: rgba(
81
- 255,
82
- 255,
83
- 255,
84
- 0.4
85
- ) !default; // Base light color with 40% opacity
86
- $lumx-button-emphasis-medium-state-hover-theme-dark-color: #fff !default; // Neutral light color
45
+ $lumx-button-emphasis-medium-state-hover-theme-dark-background-color: var(--lumx-color-light-L4) !default;
46
+ $lumx-button-emphasis-medium-state-hover-theme-dark-color: var(--lumx-color-light-N) !default;
87
47
  $lumx-button-emphasis-medium-state-hover-theme-dark-border-color: transparent !default;
88
48
  $lumx-button-emphasis-medium-state-active-padding-horizontal: 16px !default;
89
49
  $lumx-button-emphasis-medium-state-active-border-width: 0 !default;
90
- $lumx-button-emphasis-medium-state-active-theme-light-background-color: rgba(
91
- 0,
92
- 0,
93
- 0,
94
- 0.38
95
- ) !default; // Base dark color with 38% opacity
96
- $lumx-button-emphasis-medium-state-active-theme-light-color: rgba(
97
- 0,
98
- 0,
99
- 0,
100
- 0.7
101
- ) !default; // Base dark color with 70% opacity
50
+ $lumx-button-emphasis-medium-state-active-theme-light-background-color: var(--lumx-color-dark-L3) !default;
51
+ $lumx-button-emphasis-medium-state-active-theme-light-color: var(--lumx-color-dark-L1) !default;
102
52
  $lumx-button-emphasis-medium-state-active-theme-light-border-color: transparent !default;
103
- $lumx-button-emphasis-medium-state-active-theme-dark-background-color: rgba(
104
- 255,
105
- 255,
106
- 255,
107
- 0.6
108
- ) !default; // Base light color with 60% opacity
109
- $lumx-button-emphasis-medium-state-active-theme-dark-color: #fff !default; // Neutral light color
53
+ $lumx-button-emphasis-medium-state-active-theme-dark-background-color: var(--lumx-color-light-L3) !default;
54
+ $lumx-button-emphasis-medium-state-active-theme-dark-color: var(--lumx-color-light-N) !default;
110
55
  $lumx-button-emphasis-medium-state-active-theme-dark-border-color: transparent !default;
111
56
  $lumx-button-emphasis-low-state-default-padding-horizontal: 8px !default;
112
57
  $lumx-button-emphasis-low-state-default-border-width: 0 !default;
113
58
  $lumx-button-emphasis-low-state-default-theme-light-background-color: transparent !default;
114
- $lumx-button-emphasis-low-state-default-theme-light-color: rgba(
115
- 0,
116
- 0,
117
- 0,
118
- 0.7
119
- ) !default; // Base dark color with 70% opacity
59
+ $lumx-button-emphasis-low-state-default-theme-light-color: var(--lumx-color-dark-L1) !default;
120
60
  $lumx-button-emphasis-low-state-default-theme-light-border-color: transparent !default;
121
61
  $lumx-button-emphasis-low-state-default-theme-dark-background-color: transparent !default;
122
- $lumx-button-emphasis-low-state-default-theme-dark-color: #fff !default; // Neutral light color
62
+ $lumx-button-emphasis-low-state-default-theme-dark-color: var(--lumx-color-light-N) !default;
123
63
  $lumx-button-emphasis-low-state-default-theme-dark-border-color: transparent !default;
124
64
  $lumx-button-emphasis-low-state-hover-padding-horizontal: 8px !default;
125
65
  $lumx-button-emphasis-low-state-hover-border-width: 0 !default;
126
- $lumx-button-emphasis-low-state-hover-theme-light-background-color: rgba(
127
- 0,
128
- 0,
129
- 0,
130
- 0.12
131
- ) !default; // Base dark color with 12% opacity
132
- $lumx-button-emphasis-low-state-hover-theme-light-color: rgba(
133
- 0,
134
- 0,
135
- 0,
136
- 0.7
137
- ) !default; // Base dark color with 70% opacity
66
+ $lumx-button-emphasis-low-state-hover-theme-light-background-color: var(--lumx-color-dark-L5) !default;
67
+ $lumx-button-emphasis-low-state-hover-theme-light-color: var(--lumx-color-dark-L1) !default;
138
68
  $lumx-button-emphasis-low-state-hover-theme-light-border-color: transparent !default;
139
- $lumx-button-emphasis-low-state-hover-theme-dark-background-color: rgba(
140
- 255,
141
- 255,
142
- 255,
143
- 0.2
144
- ) !default; // Base light color with 20% opacity
145
- $lumx-button-emphasis-low-state-hover-theme-dark-color: #fff !default; // Neutral light color
69
+ $lumx-button-emphasis-low-state-hover-theme-dark-background-color: var(--lumx-color-light-L5) !default;
70
+ $lumx-button-emphasis-low-state-hover-theme-dark-color: var(--lumx-color-light-N) !default;
146
71
  $lumx-button-emphasis-low-state-hover-theme-dark-border-color: transparent !default;
147
72
  $lumx-button-emphasis-low-state-active-padding-horizontal: 8px !default;
148
73
  $lumx-button-emphasis-low-state-active-border-width: 0 !default;
149
- $lumx-button-emphasis-low-state-active-theme-light-background-color: rgba(
150
- 0,
151
- 0,
152
- 0,
153
- 0.2
154
- ) !default; // Base dark color with 20% opacity
155
- $lumx-button-emphasis-low-state-active-theme-light-color: rgba(
156
- 0,
157
- 0,
158
- 0,
159
- 0.7
160
- ) !default; // Base dark color with 70% opacity
74
+ $lumx-button-emphasis-low-state-active-theme-light-background-color: var(--lumx-color-dark-L4) !default;
75
+ $lumx-button-emphasis-low-state-active-theme-light-color: var(--lumx-color-dark-L1) !default;
161
76
  $lumx-button-emphasis-low-state-active-theme-light-border-color: transparent !default;
162
- $lumx-button-emphasis-low-state-active-theme-dark-background-color: rgba(
163
- 255,
164
- 255,
165
- 255,
166
- 0.4
167
- ) !default; // Base light color with 40% opacity
168
- $lumx-button-emphasis-low-state-active-theme-dark-color: #fff !default; // Neutral light color
77
+ $lumx-button-emphasis-low-state-active-theme-dark-background-color: var(--lumx-color-light-L4) !default;
78
+ $lumx-button-emphasis-low-state-active-theme-dark-color: var(--lumx-color-light-N) !default;
169
79
  $lumx-button-emphasis-low-state-active-theme-dark-border-color: transparent !default;
170
80
  $lumx-button-emphasis-selected-state-default-padding-horizontal: 16px !default;
171
81
  $lumx-button-emphasis-selected-state-default-border-width: 0 !default;
172
82
  $lumx-button-emphasis-selected-state-default-theme-light-background-color: var(--lumx-color-primary-L5) !default;
173
83
  $lumx-button-emphasis-selected-state-default-theme-light-color: var(--lumx-color-primary-D2) !default;
174
84
  $lumx-button-emphasis-selected-state-default-theme-light-border-color: transparent !default;
175
- $lumx-button-emphasis-selected-state-default-theme-dark-background-color: rgba(
176
- 255,
177
- 255,
178
- 255,
179
- 0.6
180
- ) !default; // Base light color with 60% opacity
181
- $lumx-button-emphasis-selected-state-default-theme-dark-color: #fff !default; // Neutral light color
85
+ $lumx-button-emphasis-selected-state-default-theme-dark-background-color: var(--lumx-color-light-L3) !default;
86
+ $lumx-button-emphasis-selected-state-default-theme-dark-color: var(--lumx-color-light-N) !default;
182
87
  $lumx-button-emphasis-selected-state-default-theme-dark-border-color: transparent !default;
183
88
  $lumx-button-emphasis-selected-state-hover-padding-horizontal: 16px !default;
184
89
  $lumx-button-emphasis-selected-state-hover-border-width: 0 !default;
185
90
  $lumx-button-emphasis-selected-state-hover-theme-light-background-color: var(--lumx-color-primary-L4) !default;
186
91
  $lumx-button-emphasis-selected-state-hover-theme-light-color: var(--lumx-color-primary-D2) !default;
187
92
  $lumx-button-emphasis-selected-state-hover-theme-light-border-color: transparent !default;
188
- $lumx-button-emphasis-selected-state-hover-theme-dark-background-color: rgba(
189
- 255,
190
- 255,
191
- 255,
192
- 0.4
193
- ) !default; // Base light color with 40% opacity
194
- $lumx-button-emphasis-selected-state-hover-theme-dark-color: #fff !default; // Neutral light color
93
+ $lumx-button-emphasis-selected-state-hover-theme-dark-background-color: var(--lumx-color-light-L4) !default;
94
+ $lumx-button-emphasis-selected-state-hover-theme-dark-color: var(--lumx-color-light-N) !default;
195
95
  $lumx-button-emphasis-selected-state-hover-theme-dark-border-color: transparent !default;
196
96
  $lumx-button-emphasis-selected-state-active-padding-horizontal: 16px !default;
197
97
  $lumx-button-emphasis-selected-state-active-border-width: 0 !default;
198
98
  $lumx-button-emphasis-selected-state-active-theme-light-background-color: var(--lumx-color-primary-L3) !default;
199
99
  $lumx-button-emphasis-selected-state-active-theme-light-color: var(--lumx-color-primary-D2) !default;
200
100
  $lumx-button-emphasis-selected-state-active-theme-light-border-color: transparent !default;
201
- $lumx-button-emphasis-selected-state-active-theme-dark-background-color: rgba(
202
- 255,
203
- 255,
204
- 255,
205
- 0.2
206
- ) !default; // Base light color with 20% opacity
207
- $lumx-button-emphasis-selected-state-active-theme-dark-color: #fff !default; // Neutral light color
101
+ $lumx-button-emphasis-selected-state-active-theme-dark-background-color: var(--lumx-color-light-L5) !default;
102
+ $lumx-button-emphasis-selected-state-active-theme-dark-color: var(--lumx-color-light-N) !default;
208
103
  $lumx-button-emphasis-selected-state-active-theme-dark-border-color: transparent !default;
209
104
  $lumx-material-button-text-transform: none !default;
210
105
  $lumx-material-checkbox-wrapper-size: 20px !default;
@@ -243,170 +138,59 @@ $lumx-material-text-field-input-content-font-weight: var(--lumx-typography-font-
243
138
  $lumx-material-text-field-input-content-line-height: 20px !default;
244
139
  $lumx-navigation-item-padding-horizontal: 8px !default;
245
140
  $lumx-navigation-item-min-height: 36px !default;
246
- $lumx-navigation-item-border-radius: var(--lumx-border-radius) !default;
141
+ $lumx-navigation-item-border-radius: 4px !default;
247
142
  $lumx-navigation-item-emphasis-low-state-default-border-top-width: 0 !default;
248
143
  $lumx-navigation-item-emphasis-low-state-default-border-right-width: 0 !default;
249
144
  $lumx-navigation-item-emphasis-low-state-default-border-bottom-width: 0 !default;
250
145
  $lumx-navigation-item-emphasis-low-state-default-border-left-width: 0 !default;
251
146
  $lumx-navigation-item-emphasis-low-state-default-theme-light-background-color: transparent !default;
252
- $lumx-navigation-item-emphasis-low-state-default-theme-light-border-color: rgba(
253
- 0,
254
- 0,
255
- 0,
256
- 0.12
257
- ) !default; // Base dark color with 12% opacity
258
- $lumx-navigation-item-emphasis-low-state-default-theme-light-icon-color: rgba(
259
- 0,
260
- 0,
261
- 0,
262
- 0.7
263
- ) !default; // Base dark color with 70% opacity
264
- $lumx-navigation-item-emphasis-low-state-default-theme-light-label-color: rgba(
265
- 0,
266
- 0,
267
- 0,
268
- 0.87
269
- ) !default; // Neutral dark color
147
+ $lumx-navigation-item-emphasis-low-state-default-theme-light-border-color: var(--lumx-color-dark-L5) !default;
148
+ $lumx-navigation-item-emphasis-low-state-default-theme-light-icon-color: var(--lumx-color-dark-L1) !default;
149
+ $lumx-navigation-item-emphasis-low-state-default-theme-light-label-color: var(--lumx-color-dark-N) !default;
270
150
  $lumx-navigation-item-emphasis-low-state-default-theme-light-chevron-background-color: transparent !default;
271
- $lumx-navigation-item-emphasis-low-state-default-theme-light-chevron-color: rgba(
272
- 0,
273
- 0,
274
- 0,
275
- 0.7
276
- ) !default; // Base dark color with 70% opacity
151
+ $lumx-navigation-item-emphasis-low-state-default-theme-light-chevron-color: var(--lumx-color-dark-L1) !default;
277
152
  $lumx-navigation-item-emphasis-low-state-default-theme-dark-background-color: transparent !default;
278
- $lumx-navigation-item-emphasis-low-state-default-theme-dark-border-color: rgba(
279
- 255,
280
- 255,
281
- 255,
282
- 0.2
283
- ) !default; // Base light color with 20% opacity
284
- $lumx-navigation-item-emphasis-low-state-default-theme-dark-icon-color: #fff !default; // Neutral light color
285
- $lumx-navigation-item-emphasis-low-state-default-theme-dark-label-color: #fff !default; // Neutral light color
153
+ $lumx-navigation-item-emphasis-low-state-default-theme-dark-border-color: var(--lumx-color-light-L5) !default;
154
+ $lumx-navigation-item-emphasis-low-state-default-theme-dark-icon-color: var(--lumx-color-light-N) !default;
155
+ $lumx-navigation-item-emphasis-low-state-default-theme-dark-label-color: var(--lumx-color-light-N) !default;
286
156
  $lumx-navigation-item-emphasis-low-state-default-theme-dark-chevron-background-color: transparent !default;
287
- $lumx-navigation-item-emphasis-low-state-default-theme-dark-chevron-color: #fff !default; // Neutral light color
157
+ $lumx-navigation-item-emphasis-low-state-default-theme-dark-chevron-color: var(--lumx-color-light-N) !default;
288
158
  $lumx-navigation-item-emphasis-low-state-hover-border-top-width: 0 !default;
289
159
  $lumx-navigation-item-emphasis-low-state-hover-border-right-width: 0 !default;
290
160
  $lumx-navigation-item-emphasis-low-state-hover-border-bottom-width: 0 !default;
291
161
  $lumx-navigation-item-emphasis-low-state-hover-border-left-width: 0 !default;
292
- $lumx-navigation-item-emphasis-low-state-hover-theme-light-background-color: rgba(
293
- 0,
294
- 0,
295
- 0,
296
- 0.12
297
- ) !default; // Base dark color with 12% opacity
298
- $lumx-navigation-item-emphasis-low-state-hover-theme-light-border-color: rgba(
299
- 0,
300
- 0,
301
- 0,
302
- 0.12
303
- ) !default; // Base dark color with 12% opacity
304
- $lumx-navigation-item-emphasis-low-state-hover-theme-light-icon-color: rgba(
305
- 0,
306
- 0,
307
- 0,
308
- 0.7
309
- ) !default; // Base dark color with 70% opacity
310
- $lumx-navigation-item-emphasis-low-state-hover-theme-light-label-color: rgba(
311
- 0,
312
- 0,
313
- 0,
314
- 0.87
315
- ) !default; // Neutral dark color
316
- $lumx-navigation-item-emphasis-low-state-hover-theme-light-chevron-background-color: rgba(
317
- 0,
318
- 0,
319
- 0,
320
- 0.12
321
- ) !default; // Base dark color with 12% opacity
322
- $lumx-navigation-item-emphasis-low-state-hover-theme-light-chevron-color: rgba(
323
- 0,
324
- 0,
325
- 0,
326
- 0.7
327
- ) !default; // Base dark color with 70% opacity
328
- $lumx-navigation-item-emphasis-low-state-hover-theme-dark-background-color: rgba(
329
- 255,
330
- 255,
331
- 255,
332
- 0.2
333
- ) !default; // Base light color with 20% opacity
334
- $lumx-navigation-item-emphasis-low-state-hover-theme-dark-border-color: rgba(
335
- 255,
336
- 255,
337
- 255,
338
- 0.2
339
- ) !default; // Base light color with 20% opacity
340
- $lumx-navigation-item-emphasis-low-state-hover-theme-dark-icon-color: #fff !default; // Neutral light color
341
- $lumx-navigation-item-emphasis-low-state-hover-theme-dark-label-color: #fff !default; // Neutral light color
342
- $lumx-navigation-item-emphasis-low-state-hover-theme-dark-chevron-background-color: rgba(
343
- 255,
344
- 255,
345
- 255,
346
- 0.2
347
- ) !default; // Base light color with 20% opacity
348
- $lumx-navigation-item-emphasis-low-state-hover-theme-dark-chevron-color: #fff !default; // Neutral light color
162
+ $lumx-navigation-item-emphasis-low-state-hover-theme-light-background-color: var(--lumx-color-dark-L5) !default;
163
+ $lumx-navigation-item-emphasis-low-state-hover-theme-light-border-color: var(--lumx-color-dark-L5) !default;
164
+ $lumx-navigation-item-emphasis-low-state-hover-theme-light-icon-color: var(--lumx-color-dark-L1) !default;
165
+ $lumx-navigation-item-emphasis-low-state-hover-theme-light-label-color: var(--lumx-color-dark-N) !default;
166
+ $lumx-navigation-item-emphasis-low-state-hover-theme-light-chevron-background-color: var(--lumx-color-dark-L5) !default;
167
+ $lumx-navigation-item-emphasis-low-state-hover-theme-light-chevron-color: var(--lumx-color-dark-L1) !default;
168
+ $lumx-navigation-item-emphasis-low-state-hover-theme-dark-background-color: var(--lumx-color-light-L5) !default;
169
+ $lumx-navigation-item-emphasis-low-state-hover-theme-dark-border-color: var(--lumx-color-light-L5) !default;
170
+ $lumx-navigation-item-emphasis-low-state-hover-theme-dark-icon-color: var(--lumx-color-light-N) !default;
171
+ $lumx-navigation-item-emphasis-low-state-hover-theme-dark-label-color: var(--lumx-color-light-N) !default;
172
+ $lumx-navigation-item-emphasis-low-state-hover-theme-dark-chevron-background-color: var(--lumx-color-light-L5) !default;
173
+ $lumx-navigation-item-emphasis-low-state-hover-theme-dark-chevron-color: var(--lumx-color-light-N) !default;
349
174
  $lumx-navigation-item-emphasis-low-state-active-border-top-width: 0 !default;
350
175
  $lumx-navigation-item-emphasis-low-state-active-border-right-width: 0 !default;
351
176
  $lumx-navigation-item-emphasis-low-state-active-border-bottom-width: 0 !default;
352
177
  $lumx-navigation-item-emphasis-low-state-active-border-left-width: 0 !default;
353
- $lumx-navigation-item-emphasis-low-state-active-theme-light-background-color: rgba(
354
- 0,
355
- 0,
356
- 0,
357
- 0.2
358
- ) !default; // Base dark color with 20% opacity
359
- $lumx-navigation-item-emphasis-low-state-active-theme-light-border-color: rgba(
360
- 0,
361
- 0,
362
- 0,
363
- 0.12
364
- ) !default; // Base dark color with 12% opacity
365
- $lumx-navigation-item-emphasis-low-state-active-theme-light-icon-color: rgba(
366
- 0,
367
- 0,
368
- 0,
369
- 0.7
370
- ) !default; // Base dark color with 70% opacity
371
- $lumx-navigation-item-emphasis-low-state-active-theme-light-label-color: rgba(
372
- 0,
373
- 0,
374
- 0,
375
- 0.87
376
- ) !default; // Neutral dark color
377
- $lumx-navigation-item-emphasis-low-state-active-theme-light-chevron-background-color: rgba(
378
- 0,
379
- 0,
380
- 0,
381
- 0.2
382
- ) !default; // Base dark color with 20% opacity
383
- $lumx-navigation-item-emphasis-low-state-active-theme-light-chevron-color: rgba(
384
- 0,
385
- 0,
386
- 0,
387
- 0.7
388
- ) !default; // Base dark color with 70% opacity
389
- $lumx-navigation-item-emphasis-low-state-active-theme-dark-background-color: rgba(
390
- 255,
391
- 255,
392
- 255,
393
- 0.4
394
- ) !default; // Base light color with 40% opacity
395
- $lumx-navigation-item-emphasis-low-state-active-theme-dark-border-color: rgba(
396
- 255,
397
- 255,
398
- 255,
399
- 0.2
400
- ) !default; // Base light color with 20% opacity
401
- $lumx-navigation-item-emphasis-low-state-active-theme-dark-icon-color: #fff !default; // Neutral light color
402
- $lumx-navigation-item-emphasis-low-state-active-theme-dark-label-color: #fff !default; // Neutral light color
403
- $lumx-navigation-item-emphasis-low-state-active-theme-dark-chevron-background-color: rgba(
404
- 255,
405
- 255,
406
- 255,
407
- 0.4
408
- ) !default; // Base light color with 40% opacity
409
- $lumx-navigation-item-emphasis-low-state-active-theme-dark-chevron-color: #fff !default; // Neutral light color
178
+ $lumx-navigation-item-emphasis-low-state-active-theme-light-background-color: var(--lumx-color-dark-L4) !default;
179
+ $lumx-navigation-item-emphasis-low-state-active-theme-light-border-color: var(--lumx-color-dark-L5) !default;
180
+ $lumx-navigation-item-emphasis-low-state-active-theme-light-icon-color: var(--lumx-color-dark-L1) !default;
181
+ $lumx-navigation-item-emphasis-low-state-active-theme-light-label-color: var(--lumx-color-dark-N) !default;
182
+ $lumx-navigation-item-emphasis-low-state-active-theme-light-chevron-background-color: var(
183
+ --lumx-color-dark-L4
184
+ ) !default;
185
+ $lumx-navigation-item-emphasis-low-state-active-theme-light-chevron-color: var(--lumx-color-dark-L1) !default;
186
+ $lumx-navigation-item-emphasis-low-state-active-theme-dark-background-color: var(--lumx-color-light-L4) !default;
187
+ $lumx-navigation-item-emphasis-low-state-active-theme-dark-border-color: var(--lumx-color-light-L5) !default;
188
+ $lumx-navigation-item-emphasis-low-state-active-theme-dark-icon-color: var(--lumx-color-light-N) !default;
189
+ $lumx-navigation-item-emphasis-low-state-active-theme-dark-label-color: var(--lumx-color-light-N) !default;
190
+ $lumx-navigation-item-emphasis-low-state-active-theme-dark-chevron-background-color: var(
191
+ --lumx-color-light-L4
192
+ ) !default;
193
+ $lumx-navigation-item-emphasis-low-state-active-theme-dark-chevron-color: var(--lumx-color-light-N) !default;
410
194
  $lumx-navigation-item-emphasis-selected-state-default-border-top-width: 0 !default;
411
195
  $lumx-navigation-item-emphasis-selected-state-default-border-right-width: 0 !default;
412
196
  $lumx-navigation-item-emphasis-selected-state-default-border-bottom-width: 0 !default;
@@ -419,22 +203,12 @@ $lumx-navigation-item-emphasis-selected-state-default-theme-light-icon-color: va
419
203
  $lumx-navigation-item-emphasis-selected-state-default-theme-light-label-color: var(--lumx-color-primary-D2) !default;
420
204
  $lumx-navigation-item-emphasis-selected-state-default-theme-light-chevron-background-color: transparent !default;
421
205
  $lumx-navigation-item-emphasis-selected-state-default-theme-light-chevron-color: var(--lumx-color-primary-D2) !default;
422
- $lumx-navigation-item-emphasis-selected-state-default-theme-dark-background-color: rgba(
423
- 255,
424
- 255,
425
- 255,
426
- 0.6
427
- ) !default; // Base light color with 60% opacity
428
- $lumx-navigation-item-emphasis-selected-state-default-theme-dark-border-color: rgba(
429
- 255,
430
- 255,
431
- 255,
432
- 0.2
433
- ) !default; // Base light color with 20% opacity
434
- $lumx-navigation-item-emphasis-selected-state-default-theme-dark-icon-color: #fff !default; // Neutral light color
435
- $lumx-navigation-item-emphasis-selected-state-default-theme-dark-label-color: #fff !default; // Neutral light color
206
+ $lumx-navigation-item-emphasis-selected-state-default-theme-dark-background-color: var(--lumx-color-light-L3) !default;
207
+ $lumx-navigation-item-emphasis-selected-state-default-theme-dark-border-color: var(--lumx-color-light-L5) !default;
208
+ $lumx-navigation-item-emphasis-selected-state-default-theme-dark-icon-color: var(--lumx-color-light-N) !default;
209
+ $lumx-navigation-item-emphasis-selected-state-default-theme-dark-label-color: var(--lumx-color-light-N) !default;
436
210
  $lumx-navigation-item-emphasis-selected-state-default-theme-dark-chevron-background-color: transparent !default;
437
- $lumx-navigation-item-emphasis-selected-state-default-theme-dark-chevron-color: #fff !default; // Neutral light color
211
+ $lumx-navigation-item-emphasis-selected-state-default-theme-dark-chevron-color: var(--lumx-color-light-N) !default;
438
212
  $lumx-navigation-item-emphasis-selected-state-hover-border-top-width: 0 !default;
439
213
  $lumx-navigation-item-emphasis-selected-state-hover-border-right-width: 0 !default;
440
214
  $lumx-navigation-item-emphasis-selected-state-hover-border-bottom-width: 0 !default;
@@ -447,27 +221,14 @@ $lumx-navigation-item-emphasis-selected-state-hover-theme-light-chevron-backgrou
447
221
  --lumx-color-primary-L4
448
222
  ) !default;
449
223
  $lumx-navigation-item-emphasis-selected-state-hover-theme-light-chevron-color: var(--lumx-color-primary-D2) !default;
450
- $lumx-navigation-item-emphasis-selected-state-hover-theme-dark-background-color: rgba(
451
- 255,
452
- 255,
453
- 255,
454
- 0.4
455
- ) !default; // Base light color with 40% opacity
456
- $lumx-navigation-item-emphasis-selected-state-hover-theme-dark-border-color: rgba(
457
- 255,
458
- 255,
459
- 255,
460
- 0.2
461
- ) !default; // Base light color with 20% opacity
462
- $lumx-navigation-item-emphasis-selected-state-hover-theme-dark-icon-color: #fff !default; // Neutral light color
463
- $lumx-navigation-item-emphasis-selected-state-hover-theme-dark-label-color: #fff !default; // Neutral light color
464
- $lumx-navigation-item-emphasis-selected-state-hover-theme-dark-chevron-background-color: rgba(
465
- 255,
466
- 255,
467
- 255,
468
- 0.4
469
- ) !default; // Base light color with 40% opacity
470
- $lumx-navigation-item-emphasis-selected-state-hover-theme-dark-chevron-color: #fff !default; // Neutral light color
224
+ $lumx-navigation-item-emphasis-selected-state-hover-theme-dark-background-color: var(--lumx-color-light-L4) !default;
225
+ $lumx-navigation-item-emphasis-selected-state-hover-theme-dark-border-color: var(--lumx-color-light-L5) !default;
226
+ $lumx-navigation-item-emphasis-selected-state-hover-theme-dark-icon-color: var(--lumx-color-light-N) !default;
227
+ $lumx-navigation-item-emphasis-selected-state-hover-theme-dark-label-color: var(--lumx-color-light-N) !default;
228
+ $lumx-navigation-item-emphasis-selected-state-hover-theme-dark-chevron-background-color: var(
229
+ --lumx-color-light-L4
230
+ ) !default;
231
+ $lumx-navigation-item-emphasis-selected-state-hover-theme-dark-chevron-color: var(--lumx-color-light-N) !default;
471
232
  $lumx-navigation-item-emphasis-selected-state-active-border-top-width: 0 !default;
472
233
  $lumx-navigation-item-emphasis-selected-state-active-border-right-width: 0 !default;
473
234
  $lumx-navigation-item-emphasis-selected-state-active-border-bottom-width: 0 !default;
@@ -482,27 +243,14 @@ $lumx-navigation-item-emphasis-selected-state-active-theme-light-chevron-backgro
482
243
  --lumx-color-primary-L3
483
244
  ) !default;
484
245
  $lumx-navigation-item-emphasis-selected-state-active-theme-light-chevron-color: var(--lumx-color-primary-D2) !default;
485
- $lumx-navigation-item-emphasis-selected-state-active-theme-dark-background-color: rgba(
486
- 255,
487
- 255,
488
- 255,
489
- 0.2
490
- ) !default; // Base light color with 20% opacity
491
- $lumx-navigation-item-emphasis-selected-state-active-theme-dark-border-color: rgba(
492
- 255,
493
- 255,
494
- 255,
495
- 0.2
496
- ) !default; // Base light color with 20% opacity
497
- $lumx-navigation-item-emphasis-selected-state-active-theme-dark-icon-color: #fff !default; // Neutral light color
498
- $lumx-navigation-item-emphasis-selected-state-active-theme-dark-label-color: #fff !default; // Neutral light color
499
- $lumx-navigation-item-emphasis-selected-state-active-theme-dark-chevron-background-color: rgba(
500
- 255,
501
- 255,
502
- 255,
503
- 0.2
504
- ) !default; // Base light color with 20% opacity
505
- $lumx-navigation-item-emphasis-selected-state-active-theme-dark-chevron-color: #fff !default; // Neutral light color
246
+ $lumx-navigation-item-emphasis-selected-state-active-theme-dark-background-color: var(--lumx-color-light-L5) !default;
247
+ $lumx-navigation-item-emphasis-selected-state-active-theme-dark-border-color: var(--lumx-color-light-L5) !default;
248
+ $lumx-navigation-item-emphasis-selected-state-active-theme-dark-icon-color: var(--lumx-color-light-N) !default;
249
+ $lumx-navigation-item-emphasis-selected-state-active-theme-dark-label-color: var(--lumx-color-light-N) !default;
250
+ $lumx-navigation-item-emphasis-selected-state-active-theme-dark-chevron-background-color: var(
251
+ --lumx-color-light-L5
252
+ ) !default;
253
+ $lumx-navigation-item-emphasis-selected-state-active-theme-dark-chevron-color: var(--lumx-color-light-N) !default;
506
254
  $lumx-tabs-link-height: 48px !default;
507
255
  $lumx-tabs-link-border-radius: 0 !default;
508
256
  $lumx-tabs-link-emphasis-low-state-default-border-top-width: 0 !default;
@@ -510,161 +258,61 @@ $lumx-tabs-link-emphasis-low-state-default-border-right-width: 0 !default;
510
258
  $lumx-tabs-link-emphasis-low-state-default-border-bottom-width: 2px !default;
511
259
  $lumx-tabs-link-emphasis-low-state-default-border-left-width: 0 !default;
512
260
  $lumx-tabs-link-emphasis-low-state-default-theme-light-background-color: transparent !default;
513
- $lumx-tabs-link-emphasis-low-state-default-theme-light-color: rgba(
514
- 0,
515
- 0,
516
- 0,
517
- 0.7
518
- ) !default; // Base dark color with 70% opacity
519
- $lumx-tabs-link-emphasis-low-state-default-theme-light-border-color: rgba(
520
- 0,
521
- 0,
522
- 0,
523
- 0.12
524
- ) !default; // Base dark color with 12% opacity
261
+ $lumx-tabs-link-emphasis-low-state-default-theme-light-color: var(--lumx-color-dark-L1) !default;
262
+ $lumx-tabs-link-emphasis-low-state-default-theme-light-border-color: var(--lumx-color-dark-L5) !default;
525
263
  $lumx-tabs-link-emphasis-low-state-default-theme-dark-background-color: transparent !default;
526
- $lumx-tabs-link-emphasis-low-state-default-theme-dark-color: #fff !default; // Neutral light color
527
- $lumx-tabs-link-emphasis-low-state-default-theme-dark-border-color: rgba(
528
- 255,
529
- 255,
530
- 255,
531
- 0.2
532
- ) !default; // Base light color with 20% opacity
264
+ $lumx-tabs-link-emphasis-low-state-default-theme-dark-color: var(--lumx-color-light-N) !default;
265
+ $lumx-tabs-link-emphasis-low-state-default-theme-dark-border-color: var(--lumx-color-light-L5) !default;
533
266
  $lumx-tabs-link-emphasis-low-state-hover-border-top-width: 0 !default;
534
267
  $lumx-tabs-link-emphasis-low-state-hover-border-right-width: 0 !default;
535
268
  $lumx-tabs-link-emphasis-low-state-hover-border-bottom-width: 2px !default;
536
269
  $lumx-tabs-link-emphasis-low-state-hover-border-left-width: 0 !default;
537
- $lumx-tabs-link-emphasis-low-state-hover-theme-light-background-color: rgba(
538
- 0,
539
- 0,
540
- 0,
541
- 0.12
542
- ) !default; // Base dark color with 12% opacity
543
- $lumx-tabs-link-emphasis-low-state-hover-theme-light-color: rgba(
544
- 0,
545
- 0,
546
- 0,
547
- 0.7
548
- ) !default; // Base dark color with 70% opacity
549
- $lumx-tabs-link-emphasis-low-state-hover-theme-light-border-color: rgba(
550
- 0,
551
- 0,
552
- 0,
553
- 0.12
554
- ) !default; // Base dark color with 12% opacity
555
- $lumx-tabs-link-emphasis-low-state-hover-theme-dark-background-color: rgba(
556
- 255,
557
- 255,
558
- 255,
559
- 0.2
560
- ) !default; // Base light color with 20% opacity
561
- $lumx-tabs-link-emphasis-low-state-hover-theme-dark-color: #fff !default; // Neutral light color
562
- $lumx-tabs-link-emphasis-low-state-hover-theme-dark-border-color: rgba(
563
- 255,
564
- 255,
565
- 255,
566
- 0.2
567
- ) !default; // Base light color with 20% opacity
270
+ $lumx-tabs-link-emphasis-low-state-hover-theme-light-background-color: var(--lumx-color-dark-L5) !default;
271
+ $lumx-tabs-link-emphasis-low-state-hover-theme-light-color: var(--lumx-color-dark-L1) !default;
272
+ $lumx-tabs-link-emphasis-low-state-hover-theme-light-border-color: var(--lumx-color-dark-L5) !default;
273
+ $lumx-tabs-link-emphasis-low-state-hover-theme-dark-background-color: var(--lumx-color-light-L5) !default;
274
+ $lumx-tabs-link-emphasis-low-state-hover-theme-dark-color: var(--lumx-color-light-N) !default;
275
+ $lumx-tabs-link-emphasis-low-state-hover-theme-dark-border-color: var(--lumx-color-light-L5) !default;
568
276
  $lumx-tabs-link-emphasis-low-state-active-border-top-width: 0 !default;
569
277
  $lumx-tabs-link-emphasis-low-state-active-border-right-width: 0 !default;
570
278
  $lumx-tabs-link-emphasis-low-state-active-border-bottom-width: 2px !default;
571
279
  $lumx-tabs-link-emphasis-low-state-active-border-left-width: 0 !default;
572
- $lumx-tabs-link-emphasis-low-state-active-theme-light-background-color: rgba(
573
- 0,
574
- 0,
575
- 0,
576
- 0.2
577
- ) !default; // Base dark color with 20% opacity
578
- $lumx-tabs-link-emphasis-low-state-active-theme-light-color: rgba(
579
- 0,
580
- 0,
581
- 0,
582
- 0.7
583
- ) !default; // Base dark color with 70% opacity
584
- $lumx-tabs-link-emphasis-low-state-active-theme-light-border-color: rgba(
585
- 0,
586
- 0,
587
- 0,
588
- 0.12
589
- ) !default; // Base dark color with 12% opacity
590
- $lumx-tabs-link-emphasis-low-state-active-theme-dark-background-color: rgba(
591
- 255,
592
- 255,
593
- 255,
594
- 0.4
595
- ) !default; // Base light color with 40% opacity
596
- $lumx-tabs-link-emphasis-low-state-active-theme-dark-color: #fff !default; // Neutral light color
597
- $lumx-tabs-link-emphasis-low-state-active-theme-dark-border-color: rgba(
598
- 255,
599
- 255,
600
- 255,
601
- 0.2
602
- ) !default; // Base light color with 20% opacity
280
+ $lumx-tabs-link-emphasis-low-state-active-theme-light-background-color: var(--lumx-color-dark-L4) !default;
281
+ $lumx-tabs-link-emphasis-low-state-active-theme-light-color: var(--lumx-color-dark-L1) !default;
282
+ $lumx-tabs-link-emphasis-low-state-active-theme-light-border-color: var(--lumx-color-dark-L5) !default;
283
+ $lumx-tabs-link-emphasis-low-state-active-theme-dark-background-color: var(--lumx-color-light-L4) !default;
284
+ $lumx-tabs-link-emphasis-low-state-active-theme-dark-color: var(--lumx-color-light-N) !default;
285
+ $lumx-tabs-link-emphasis-low-state-active-theme-dark-border-color: var(--lumx-color-light-L5) !default;
603
286
  $lumx-tabs-link-emphasis-selected-state-default-border-top-width: 0 !default;
604
287
  $lumx-tabs-link-emphasis-selected-state-default-border-right-width: 0 !default;
605
288
  $lumx-tabs-link-emphasis-selected-state-default-border-bottom-width: 2px !default;
606
289
  $lumx-tabs-link-emphasis-selected-state-default-border-left-width: 0 !default;
607
290
  $lumx-tabs-link-emphasis-selected-state-default-theme-light-background-color: transparent !default;
608
- $lumx-tabs-link-emphasis-selected-state-default-theme-light-color: rgba(
609
- 0,
610
- 0,
611
- 0,
612
- 0.7
613
- ) !default; // Base dark color with 70% opacity
291
+ $lumx-tabs-link-emphasis-selected-state-default-theme-light-color: var(--lumx-color-dark-L1) !default;
614
292
  $lumx-tabs-link-emphasis-selected-state-default-theme-light-border-color: var(--lumx-color-primary-N) !default;
615
293
  $lumx-tabs-link-emphasis-selected-state-default-theme-dark-background-color: transparent !default;
616
- $lumx-tabs-link-emphasis-selected-state-default-theme-dark-color: #fff !default; // Neutral light color
617
- $lumx-tabs-link-emphasis-selected-state-default-theme-dark-border-color: #fff !default; // Neutral light color
294
+ $lumx-tabs-link-emphasis-selected-state-default-theme-dark-color: var(--lumx-color-light-N) !default;
295
+ $lumx-tabs-link-emphasis-selected-state-default-theme-dark-border-color: var(--lumx-color-light-N) !default;
618
296
  $lumx-tabs-link-emphasis-selected-state-hover-border-top-width: 0 !default;
619
297
  $lumx-tabs-link-emphasis-selected-state-hover-border-right-width: 0 !default;
620
298
  $lumx-tabs-link-emphasis-selected-state-hover-border-bottom-width: 2px !default;
621
299
  $lumx-tabs-link-emphasis-selected-state-hover-border-left-width: 0 !default;
622
- $lumx-tabs-link-emphasis-selected-state-hover-theme-light-background-color: rgba(
623
- 0,
624
- 0,
625
- 0,
626
- 0.12
627
- ) !default; // Base dark color with 12% opacity
628
- $lumx-tabs-link-emphasis-selected-state-hover-theme-light-color: rgba(
629
- 0,
630
- 0,
631
- 0,
632
- 0.7
633
- ) !default; // Base dark color with 70% opacity
300
+ $lumx-tabs-link-emphasis-selected-state-hover-theme-light-background-color: var(--lumx-color-dark-L5) !default;
301
+ $lumx-tabs-link-emphasis-selected-state-hover-theme-light-color: var(--lumx-color-dark-L1) !default;
634
302
  $lumx-tabs-link-emphasis-selected-state-hover-theme-light-border-color: var(--lumx-color-primary-N) !default;
635
- $lumx-tabs-link-emphasis-selected-state-hover-theme-dark-background-color: rgba(
636
- 255,
637
- 255,
638
- 255,
639
- 0.2
640
- ) !default; // Base light color with 20% opacity
641
- $lumx-tabs-link-emphasis-selected-state-hover-theme-dark-color: #fff !default; // Neutral light color
642
- $lumx-tabs-link-emphasis-selected-state-hover-theme-dark-border-color: #fff !default; // Neutral light color
303
+ $lumx-tabs-link-emphasis-selected-state-hover-theme-dark-background-color: var(--lumx-color-light-L5) !default;
304
+ $lumx-tabs-link-emphasis-selected-state-hover-theme-dark-color: var(--lumx-color-light-N) !default;
305
+ $lumx-tabs-link-emphasis-selected-state-hover-theme-dark-border-color: var(--lumx-color-light-N) !default;
643
306
  $lumx-tabs-link-emphasis-selected-state-active-border-top-width: 0 !default;
644
307
  $lumx-tabs-link-emphasis-selected-state-active-border-right-width: 0 !default;
645
308
  $lumx-tabs-link-emphasis-selected-state-active-border-bottom-width: 2px !default;
646
309
  $lumx-tabs-link-emphasis-selected-state-active-border-left-width: 0 !default;
647
- $lumx-tabs-link-emphasis-selected-state-active-theme-light-background-color: rgba(
648
- 0,
649
- 0,
650
- 0,
651
- 0.2
652
- ) !default; // Base dark color with 20% opacity
653
- $lumx-tabs-link-emphasis-selected-state-active-theme-light-color: rgba(
654
- 0,
655
- 0,
656
- 0,
657
- 0.7
658
- ) !default; // Base dark color with 70% opacity
310
+ $lumx-tabs-link-emphasis-selected-state-active-theme-light-background-color: var(--lumx-color-dark-L4) !default;
311
+ $lumx-tabs-link-emphasis-selected-state-active-theme-light-color: var(--lumx-color-dark-L1) !default;
659
312
  $lumx-tabs-link-emphasis-selected-state-active-theme-light-border-color: var(--lumx-color-primary-N) !default;
660
- $lumx-tabs-link-emphasis-selected-state-active-theme-dark-background-color: rgba(
661
- 255,
662
- 255,
663
- 255,
664
- 0.4
665
- ) !default; // Base light color with 40% opacity
666
- $lumx-tabs-link-emphasis-selected-state-active-theme-dark-color: #fff !default; // Neutral light color
667
- $lumx-tabs-link-emphasis-selected-state-active-theme-dark-border-color: #fff !default; // Neutral light color
313
+ $lumx-tabs-link-emphasis-selected-state-active-theme-dark-background-color: var(--lumx-color-light-L4) !default;
314
+ $lumx-tabs-link-emphasis-selected-state-active-theme-dark-color: var(--lumx-color-light-N) !default;
315
+ $lumx-tabs-link-emphasis-selected-state-active-theme-dark-border-color: var(--lumx-color-light-N) !default;
668
316
  $lumx-text-field-input-min-height: 36px !default;
669
317
  $lumx-text-field-input-padding-horizontal: 12px !default;
670
318
  $lumx-text-field-input-border-radius: 4px !default;
@@ -672,122 +320,44 @@ $lumx-text-field-state-default-input-border-top-width: 1px !default;
672
320
  $lumx-text-field-state-default-input-border-right-width: 1px !default;
673
321
  $lumx-text-field-state-default-input-border-bottom-width: 1px !default;
674
322
  $lumx-text-field-state-default-input-border-left-width: 1px !default;
675
- $lumx-text-field-state-default-theme-light-header-label-color: rgba(0, 0, 0, 0.87) !default; // Neutral dark color
676
- $lumx-text-field-state-default-theme-light-input-background-color: rgba(
677
- 0,
678
- 0,
679
- 0,
680
- 0.05
681
- ) !default; // Base dark color with 5% opacity
682
- $lumx-text-field-state-default-theme-light-input-border-color: rgba(
683
- 0,
684
- 0,
685
- 0,
686
- 0.2
687
- ) !default; // Base dark color with 20% opacity
688
- $lumx-text-field-state-default-theme-light-input-content-color: rgba(0, 0, 0, 0.87) !default; // Neutral dark color
689
- $lumx-text-field-state-default-theme-light-input-placeholder-color: rgba(
690
- 0,
691
- 0,
692
- 0,
693
- 0.54
694
- ) !default; // Base dark color with 54% opacity
695
- $lumx-text-field-state-default-theme-dark-header-label-color: #fff !default; // Neutral light color
696
- $lumx-text-field-state-default-theme-dark-input-background-color: rgba(
697
- 255,
698
- 255,
699
- 255,
700
- 0.1
701
- ) !default; // Base light color with 10% opacity
702
- $lumx-text-field-state-default-theme-dark-input-border-color: rgba(
703
- 255,
704
- 255,
705
- 255,
706
- 0.4
707
- ) !default; // Base light color with 40% opacity
708
- $lumx-text-field-state-default-theme-dark-input-content-color: #fff !default; // Neutral light color
709
- $lumx-text-field-state-default-theme-dark-input-placeholder-color: rgba(
710
- 255,
711
- 255,
712
- 255,
713
- 0.8
714
- ) !default; // Base light color with 80% opacity
323
+ $lumx-text-field-state-default-theme-light-header-label-color: var(--lumx-color-dark-N) !default;
324
+ $lumx-text-field-state-default-theme-light-input-background-color: var(--lumx-color-dark-L6) !default;
325
+ $lumx-text-field-state-default-theme-light-input-border-color: var(--lumx-color-dark-L4) !default;
326
+ $lumx-text-field-state-default-theme-light-input-content-color: var(--lumx-color-dark-N) !default;
327
+ $lumx-text-field-state-default-theme-light-input-placeholder-color: var(--lumx-color-dark-L2) !default;
328
+ $lumx-text-field-state-default-theme-dark-header-label-color: var(--lumx-color-light-N) !default;
329
+ $lumx-text-field-state-default-theme-dark-input-background-color: var(--lumx-color-light-L6) !default;
330
+ $lumx-text-field-state-default-theme-dark-input-border-color: var(--lumx-color-light-L4) !default;
331
+ $lumx-text-field-state-default-theme-dark-input-content-color: var(--lumx-color-light-N) !default;
332
+ $lumx-text-field-state-default-theme-dark-input-placeholder-color: var(--lumx-color-light-L2) !default;
715
333
  $lumx-text-field-state-hover-input-border-top-width: 1px !default;
716
334
  $lumx-text-field-state-hover-input-border-right-width: 1px !default;
717
335
  $lumx-text-field-state-hover-input-border-bottom-width: 1px !default;
718
336
  $lumx-text-field-state-hover-input-border-left-width: 1px !default;
719
- $lumx-text-field-state-hover-theme-light-input-background-color: rgba(
720
- 0,
721
- 0,
722
- 0,
723
- 0.12
724
- ) !default; // Base dark color with 12% opacity
725
- $lumx-text-field-state-hover-theme-light-input-border-color: rgba(
726
- 0,
727
- 0,
728
- 0,
729
- 0.2
730
- ) !default; // Base dark color with 20% opacity
731
- $lumx-text-field-state-hover-theme-light-input-content-color: rgba(0, 0, 0, 0.87) !default; // Neutral dark color
732
- $lumx-text-field-state-hover-theme-light-input-placeholder-color: rgba(
733
- 0,
734
- 0,
735
- 0,
736
- 0.54
737
- ) !default; // Base dark color with 54% opacity
738
- $lumx-text-field-state-hover-theme-dark-input-background-color: rgba(
739
- 255,
740
- 255,
741
- 255,
742
- 0.2
743
- ) !default; // Base light color with 20% opacity
744
- $lumx-text-field-state-hover-theme-dark-input-border-color: rgba(
745
- 255,
746
- 255,
747
- 255,
748
- 0.4
749
- ) !default; // Base light color with 40% opacity
750
- $lumx-text-field-state-hover-theme-dark-input-content-color: #fff !default; // Neutral light color
751
- $lumx-text-field-state-hover-theme-dark-input-placeholder-color: rgba(
752
- 255,
753
- 255,
754
- 255,
755
- 0.8
756
- ) !default; // Base light color with 80% opacity
337
+ $lumx-text-field-state-hover-theme-light-header-label-color: var(--lumx-color-dark-N) !default;
338
+ $lumx-text-field-state-hover-theme-light-input-background-color: var(--lumx-color-dark-L5) !default;
339
+ $lumx-text-field-state-hover-theme-light-input-border-color: var(--lumx-color-dark-L4) !default;
340
+ $lumx-text-field-state-hover-theme-light-input-content-color: var(--lumx-color-dark-N) !default;
341
+ $lumx-text-field-state-hover-theme-light-input-placeholder-color: var(--lumx-color-dark-L2) !default;
342
+ $lumx-text-field-state-hover-theme-dark-header-label-color: var(--lumx-color-light-N) !default;
343
+ $lumx-text-field-state-hover-theme-dark-input-background-color: var(--lumx-color-light-L5) !default;
344
+ $lumx-text-field-state-hover-theme-dark-input-border-color: var(--lumx-color-light-L4) !default;
345
+ $lumx-text-field-state-hover-theme-dark-input-content-color: var(--lumx-color-light-N) !default;
346
+ $lumx-text-field-state-hover-theme-dark-input-placeholder-color: var(--lumx-color-light-L2) !default;
757
347
  $lumx-text-field-state-focus-input-border-top-width: 2px !default;
758
348
  $lumx-text-field-state-focus-input-border-right-width: 2px !default;
759
349
  $lumx-text-field-state-focus-input-border-bottom-width: 2px !default;
760
350
  $lumx-text-field-state-focus-input-border-left-width: 2px !default;
761
- $lumx-text-field-state-focus-theme-light-header-label-color: rgba(0, 0, 0, 0.87) !default; // Neutral dark color
762
- $lumx-text-field-state-focus-theme-light-input-background-color: #fff !default; // Neutral light color
763
- $lumx-text-field-state-focus-theme-light-input-border-color: rgba(
764
- 33,
765
- 150,
766
- 243,
767
- 0.6
768
- ) !default; // Base blue color with 60% opacity
769
- $lumx-text-field-state-focus-theme-light-input-content-color: rgba(0, 0, 0, 0.87) !default; // Neutral dark color
770
- $lumx-text-field-state-focus-theme-light-input-placeholder-color: rgba(
771
- 0,
772
- 0,
773
- 0,
774
- 0.54
775
- ) !default; // Base dark color with 54% opacity
776
- $lumx-text-field-state-focus-theme-dark-header-label-color: #fff !default; // Neutral light color
351
+ $lumx-text-field-state-focus-theme-light-header-label-color: var(--lumx-color-dark-N) !default;
352
+ $lumx-text-field-state-focus-theme-light-input-background-color: var(--lumx-color-light-N) !default;
353
+ $lumx-text-field-state-focus-theme-light-input-border-color: var(--lumx-color-primary-L2) !default;
354
+ $lumx-text-field-state-focus-theme-light-input-content-color: var(--lumx-color-dark-N) !default;
355
+ $lumx-text-field-state-focus-theme-light-input-placeholder-color: var(--lumx-color-dark-L2) !default;
356
+ $lumx-text-field-state-focus-theme-dark-header-label-color: var(--lumx-color-light-N) !default;
777
357
  $lumx-text-field-state-focus-theme-dark-input-background-color: transparent !default;
778
- $lumx-text-field-state-focus-theme-dark-input-border-color: rgba(
779
- 255,
780
- 255,
781
- 255,
782
- 0.8
783
- ) !default; // Base light color with 80% opacity
784
- $lumx-text-field-state-focus-theme-dark-input-content-color: #fff !default; // Neutral light color
785
- $lumx-text-field-state-focus-theme-dark-input-placeholder-color: rgba(
786
- 255,
787
- 255,
788
- 255,
789
- 0.8
790
- ) !default; // Base light color with 80% opacity
358
+ $lumx-text-field-state-focus-theme-dark-input-border-color: var(--lumx-color-light-L2) !default;
359
+ $lumx-text-field-state-focus-theme-dark-input-content-color: var(--lumx-color-light-N) !default;
360
+ $lumx-text-field-state-focus-theme-dark-input-placeholder-color: var(--lumx-color-light-L2) !default;
791
361
  $lumx-border-radius: 4px !default;
792
362
  $lumx-color-dark-N: rgba(0, 0, 0, 0.87) !default; // Neutral dark color
793
363
  $lumx-color-dark-L1: rgba(0, 0, 0, 0.7) !default; // Base dark color with 70% opacity
@@ -796,77 +366,77 @@ $lumx-color-dark-L3: rgba(0, 0, 0, 0.38) !default; // Base dark color with 38% o
796
366
  $lumx-color-dark-L4: rgba(0, 0, 0, 0.2) !default; // Base dark color with 20% opacity
797
367
  $lumx-color-dark-L5: rgba(0, 0, 0, 0.12) !default; // Base dark color with 12% opacity
798
368
  $lumx-color-dark-L6: rgba(0, 0, 0, 0.05) !default; // Base dark color with 5% opacity
799
- $lumx-color-light-N: #ffffff !default; // Neutral light color
369
+ $lumx-color-light-N: rgb(255, 255, 255) !default; // Neutral light color
800
370
  $lumx-color-light-L1: rgba(255, 255, 255, 0.9) !default; // Base light color with 90% opacity
801
371
  $lumx-color-light-L2: rgba(255, 255, 255, 0.8) !default; // Base light color with 80% opacity
802
372
  $lumx-color-light-L3: rgba(255, 255, 255, 0.6) !default; // Base light color with 60% opacity
803
373
  $lumx-color-light-L4: rgba(255, 255, 255, 0.4) !default; // Base light color with 40% opacity
804
374
  $lumx-color-light-L5: rgba(255, 255, 255, 0.2) !default; // Base light color with 20% opacity
805
375
  $lumx-color-light-L6: rgba(255, 255, 255, 0.1) !default; // Base light color with 10% opacity
806
- $lumx-color-blue-D2: #1976d2 !default; // Darkest blue color
807
- $lumx-color-blue-D1: #1e88e5 !default; // Dark blue color
808
- $lumx-color-blue-N: #2196f3 !default; // Neutral blue color
376
+ $lumx-color-blue-D2: rgb(25, 118, 210) !default; // Darkest blue color
377
+ $lumx-color-blue-D1: rgb(30, 136, 229) !default; // Dark blue color
378
+ $lumx-color-blue-N: rgb(33, 150, 243) !default; // Neutral blue color
809
379
  $lumx-color-blue-L1: rgba(33, 150, 243, 0.8) !default; // Base blue color with 80% opacity
810
380
  $lumx-color-blue-L2: rgba(33, 150, 243, 0.6) !default; // Base blue color with 60% opacity
811
381
  $lumx-color-blue-L3: rgba(33, 150, 243, 0.4) !default; // Base blue color with 40% opacity
812
382
  $lumx-color-blue-L4: rgba(33, 150, 243, 0.2) !default; // Base blue color with 20% opacity
813
383
  $lumx-color-blue-L5: rgba(33, 150, 243, 0.1) !default; // Base blue color with 10% opacity
814
384
  $lumx-color-blue-L6: rgba(33, 150, 243, 0.05) !default; // Base blue color with 5% opacity
815
- $lumx-color-green-D2: #388e3c !default; // Darkest green color
816
- $lumx-color-green-D1: #43a047 !default; // Dark green color
817
- $lumx-color-green-N: #4caf50 !default; // Neutral green color
385
+ $lumx-color-green-D2: rgb(56, 142, 60) !default; // Darkest green color
386
+ $lumx-color-green-D1: rgb(67, 160, 71) !default; // Dark green color
387
+ $lumx-color-green-N: rgb(76, 175, 80) !default; // Neutral green color
818
388
  $lumx-color-green-L1: rgba(76, 175, 80, 0.8) !default; // Base green color with 80% opacity
819
389
  $lumx-color-green-L2: rgba(76, 175, 80, 0.6) !default; // Base green color with 60% opacity
820
390
  $lumx-color-green-L3: rgba(76, 175, 80, 0.4) !default; // Base green color with 40% opacity
821
391
  $lumx-color-green-L4: rgba(76, 175, 80, 0.2) !default; // Base green color with 20% opacity
822
392
  $lumx-color-green-L5: rgba(76, 175, 80, 0.1) !default; // Base green color with 10% opacity
823
393
  $lumx-color-green-L6: rgba(76, 175, 80, 0.05) !default; // Base green color with 5% opacity
824
- $lumx-color-yellow-D2: #ff6f00 !default; // Darkest yellow color
825
- $lumx-color-yellow-D1: #ff8f00 !default; // Dark yellow color
826
- $lumx-color-yellow-N: #ffb300 !default; // Neutral yellow color
394
+ $lumx-color-yellow-D2: rgb(255, 111, 0) !default; // Darkest yellow color
395
+ $lumx-color-yellow-D1: rgb(255, 143, 0) !default; // Dark yellow color
396
+ $lumx-color-yellow-N: rgb(255, 179, 0) !default; // Neutral yellow color
827
397
  $lumx-color-yellow-L1: rgba(255, 179, 0, 0.8) !default; // Base yellow color with 80% opacity
828
398
  $lumx-color-yellow-L2: rgba(255, 179, 0, 0.7) !default; // Base yellow color with 70% opacity
829
399
  $lumx-color-yellow-L3: rgba(255, 179, 0, 0.6) !default; // Base yellow color with 60% opacity
830
400
  $lumx-color-yellow-L4: rgba(255, 179, 0, 0.4) !default; // Base yellow color with 40% opacity
831
401
  $lumx-color-yellow-L5: rgba(255, 179, 0, 0.2) !default; // Base yellow color with 20% opacity
832
402
  $lumx-color-yellow-L6: rgba(255, 179, 0, 0.1) !default; // Base yellow color with 10% opacity
833
- $lumx-color-red-D2: #d32f2f !default; // Darkest red color
834
- $lumx-color-red-D1: #e53935 !default; // Dark red color
835
- $lumx-color-red-N: #f44336 !default; // Neutral red color
403
+ $lumx-color-red-D2: rgb(211, 47, 47) !default; // Darkest red color
404
+ $lumx-color-red-D1: rgb(229, 57, 53) !default; // Dark red color
405
+ $lumx-color-red-N: rgb(244, 67, 54) !default; // Neutral red color
836
406
  $lumx-color-red-L1: rgba(244, 67, 54, 0.8) !default; // Base red color with 80% opacity
837
407
  $lumx-color-red-L2: rgba(244, 67, 54, 0.6) !default; // Base red color with 60% opacity
838
408
  $lumx-color-red-L3: rgba(244, 67, 54, 0.4) !default; // Base red color with 40% opacity
839
409
  $lumx-color-red-L4: rgba(244, 67, 54, 0.2) !default; // Base red color with 20% opacity
840
410
  $lumx-color-red-L5: rgba(244, 67, 54, 0.1) !default; // Base red color with 10% opacity
841
411
  $lumx-color-red-L6: rgba(244, 67, 54, 0.05) !default; // Base red color with 5% opacity
842
- $lumx-color-grey-N: #757575 !default; // Neutral grey color
412
+ $lumx-color-grey-N: rgb(117, 117, 117) !default; // Neutral grey color
843
413
  $lumx-color-grey-L1: rgba(117, 117, 117, 0.8) !default; // Base grey color with 80% opacity
844
414
  $lumx-color-grey-L2: rgba(117, 117, 117, 0.6) !default; // Base grey color with 60% opacity
845
415
  $lumx-color-grey-L3: rgba(117, 117, 117, 0.4) !default; // Base grey color with 40% opacity
846
416
  $lumx-color-grey-L4: rgba(117, 117, 117, 0.2) !default; // Base grey color with 20% opacity
847
417
  $lumx-color-grey-L5: rgba(117, 117, 117, 0.1) !default; // Base grey color with 10% opacity
848
418
  $lumx-color-grey-L6: rgba(117, 117, 117, 0.05) !default; // Base grey color with 5% opacity
849
- $lumx-color-primary-D2: #1976d2 !default; // Darkest blue color
850
- $lumx-color-primary-D1: #1e88e5 !default; // Dark blue color
851
- $lumx-color-primary-N: #2196f3 !default; // Neutral blue color
419
+ $lumx-color-primary-D2: rgb(25, 118, 210) !default; // Darkest blue color
420
+ $lumx-color-primary-D1: rgb(30, 136, 229) !default; // Dark blue color
421
+ $lumx-color-primary-N: rgb(33, 150, 243) !default; // Neutral blue color
852
422
  $lumx-color-primary-L1: rgba(33, 150, 243, 0.8) !default; // Base blue color with 80% opacity
853
423
  $lumx-color-primary-L2: rgba(33, 150, 243, 0.6) !default; // Base blue color with 60% opacity
854
424
  $lumx-color-primary-L3: rgba(33, 150, 243, 0.4) !default; // Base blue color with 40% opacity
855
425
  $lumx-color-primary-L4: rgba(33, 150, 243, 0.2) !default; // Base blue color with 20% opacity
856
426
  $lumx-color-primary-L5: rgba(33, 150, 243, 0.1) !default; // Base blue color with 10% opacity
857
427
  $lumx-color-primary-L6: rgba(33, 150, 243, 0.05) !default; // Base blue color with 5% opacity
858
- $lumx-color-secondary-D2: #388e3c !default; // Darkest green color
859
- $lumx-color-secondary-D1: #43a047 !default; // Dark green color
860
- $lumx-color-secondary-N: #4caf50 !default; // Neutral green color
428
+ $lumx-color-secondary-D2: rgb(56, 142, 60) !default; // Darkest green color
429
+ $lumx-color-secondary-D1: rgb(67, 160, 71) !default; // Dark green color
430
+ $lumx-color-secondary-N: rgb(76, 175, 80) !default; // Neutral green color
861
431
  $lumx-color-secondary-L1: rgba(76, 175, 80, 0.8) !default; // Base green color with 80% opacity
862
432
  $lumx-color-secondary-L2: rgba(76, 175, 80, 0.6) !default; // Base green color with 60% opacity
863
433
  $lumx-color-secondary-L3: rgba(76, 175, 80, 0.4) !default; // Base green color with 40% opacity
864
434
  $lumx-color-secondary-L4: rgba(76, 175, 80, 0.2) !default; // Base green color with 20% opacity
865
435
  $lumx-color-secondary-L5: rgba(76, 175, 80, 0.1) !default; // Base green color with 10% opacity
866
436
  $lumx-color-secondary-L6: rgba(76, 175, 80, 0.05) !default; // Base green color with 5% opacity
867
- $lumx-color-accent-D2: #388e3c !default; // Darkest green color
868
- $lumx-color-accent-D1: #43a047 !default; // Dark green color
869
- $lumx-color-accent-N: #4caf50 !default; // Neutral green color
437
+ $lumx-color-accent-D2: rgb(56, 142, 60) !default; // Darkest green color
438
+ $lumx-color-accent-D1: rgb(67, 160, 71) !default; // Dark green color
439
+ $lumx-color-accent-N: rgb(76, 175, 80) !default; // Neutral green color
870
440
  $lumx-color-accent-L1: rgba(76, 175, 80, 0.8) !default; // Base green color with 80% opacity
871
441
  $lumx-color-accent-L2: rgba(76, 175, 80, 0.6) !default; // Base green color with 60% opacity
872
442
  $lumx-color-accent-L3: rgba(76, 175, 80, 0.4) !default; // Base green color with 40% opacity
@@ -880,16 +450,16 @@ $lumx-color-black-L3: rgba(0, 0, 0, 0.38) !default; // Base dark color with 38%
880
450
  $lumx-color-black-L4: rgba(0, 0, 0, 0.2) !default; // Base dark color with 20% opacity
881
451
  $lumx-color-black-L5: rgba(0, 0, 0, 0.12) !default; // Base dark color with 12% opacity
882
452
  $lumx-color-black-L6: rgba(0, 0, 0, 0.05) !default; // Base dark color with 5% opacity
883
- $lumx-color-white-N: #ffffff !default; // Neutral light color
453
+ $lumx-color-white-N: rgb(255, 255, 255) !default; // Neutral light color
884
454
  $lumx-color-white-L1: rgba(255, 255, 255, 0.9) !default; // Base light color with 90% opacity
885
455
  $lumx-color-white-L2: rgba(255, 255, 255, 0.8) !default; // Base light color with 80% opacity
886
456
  $lumx-color-white-L3: rgba(255, 255, 255, 0.6) !default; // Base light color with 60% opacity
887
457
  $lumx-color-white-L4: rgba(255, 255, 255, 0.4) !default; // Base light color with 40% opacity
888
458
  $lumx-color-white-L5: rgba(255, 255, 255, 0.2) !default; // Base light color with 20% opacity
889
459
  $lumx-color-white-L6: rgba(255, 255, 255, 0.1) !default; // Base light color with 10% opacity
890
- $lumx-color-orange-D2: #ff6f00 !default; // Darkest yellow color
891
- $lumx-color-orange-D1: #ff8f00 !default; // Dark yellow color
892
- $lumx-color-orange-N: #ffb300 !default; // Neutral yellow color
460
+ $lumx-color-orange-D2: rgb(255, 111, 0) !default; // Darkest yellow color
461
+ $lumx-color-orange-D1: rgb(255, 143, 0) !default; // Dark yellow color
462
+ $lumx-color-orange-N: rgb(255, 179, 0) !default; // Neutral yellow color
893
463
  $lumx-color-orange-L1: rgba(255, 179, 0, 0.8) !default; // Base yellow color with 80% opacity
894
464
  $lumx-color-orange-L2: rgba(255, 179, 0, 0.7) !default; // Base yellow color with 70% opacity
895
465
  $lumx-color-orange-L3: rgba(255, 179, 0, 0.6) !default; // Base yellow color with 60% opacity
@@ -968,7 +538,7 @@ $lumx-typography-custom-body-font-size: 14px !default;
968
538
  $lumx-typography-custom-body-font-weight: var(--lumx-typography-font-weight-regular) !default;
969
539
  $lumx-typography-custom-body-line-height: 20px !default;
970
540
  $lumx-typography-custom-quote-font-size: 16px !default;
971
- $lumx-typography-custom-quote-font-weight: var(--lumx-typography-font-weight-light) !default;
541
+ $lumx-typography-custom-quote-font-weight: var(--lumx-typography-font-weight-regular) !default;
972
542
  $lumx-typography-custom-quote-font-style: italic !default;
973
543
  $lumx-typography-custom-quote-line-height: 24px !default;
974
544
  $lumx-typography-custom-publish-info-font-size: 14px !default;
@@ -1730,6 +1300,11 @@ $lumx-design-tokens: (
1730
1300
  ),
1731
1301
  ),
1732
1302
  'theme-light': (
1303
+ 'header': (
1304
+ 'label': (
1305
+ 'color': $lumx-text-field-state-hover-theme-light-header-label-color,
1306
+ ),
1307
+ ),
1733
1308
  'input': (
1734
1309
  'background-color': $lumx-text-field-state-hover-theme-light-input-background-color,
1735
1310
  'border-color': $lumx-text-field-state-hover-theme-light-input-border-color,
@@ -1742,6 +1317,11 @@ $lumx-design-tokens: (
1742
1317
  ),
1743
1318
  ),
1744
1319
  'theme-dark': (
1320
+ 'header': (
1321
+ 'label': (
1322
+ 'color': $lumx-text-field-state-hover-theme-dark-header-label-color,
1323
+ ),
1324
+ ),
1745
1325
  'input': (
1746
1326
  'background-color': $lumx-text-field-state-hover-theme-dark-input-background-color,
1747
1327
  'border-color': $lumx-text-field-state-hover-theme-dark-input-border-color,