@lumx/core 2.1.9-alpha-thumbnail2 → 2.1.9-alpha-thumbnail7

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