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