@lumx/core 2.1.9-alpha-thumbnail3 → 2.1.9-prefer-css-color-variables

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