@lumx/core 2.1.9-alpha.0 → 2.1.9-prefer-css-color-variables3

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 (23) hide show
  1. package/css/design-tokens.css +222 -651
  2. package/css/material.css +2 -0
  3. package/js/constants/design-tokens.js +2502 -2894
  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 +1016 -4335
  7. package/js/custom-colors.min.js.map +1 -1
  8. package/js/date-picker.min.js.map +1 -1
  9. package/js/utils.min.js.map +1 -1
  10. package/lumx.css +1 -1
  11. package/lumx.min.css +1 -1
  12. package/package.json +2 -2
  13. package/scss/_design-tokens.scss +236 -656
  14. package/scss/components/badge/_index.scss +1 -5
  15. package/scss/components/flag/_index.scss +3 -3
  16. package/scss/components/icon/_index.scss +0 -22
  17. package/scss/components/icon/_mixins.scss +2 -7
  18. package/scss/components/message/_index.scss +5 -1
  19. package/scss/components/notification/_index.scss +1 -6
  20. package/scss/components/thumbnail/_index.scss +5 -7
  21. package/scss/components/user-block/_index.scss +1 -1
  22. package/scss/core/color/_functions.scss +2 -6
  23. package/scss/core/state/_mixins.scss +2 -12
package/css/design-tokens.css CHANGED
@@ -1,206 +1,106 @@
1
1
  /**
2
2
  * Do not edit directly
3
- * Generated on Wed, 08 Dec 2021 08:10:59 GMT
3
+ * Generated on Wed, 12 Jan 2022 13:55:35 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 primary 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,83 +359,83 @@
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: #1546c1; /* Darkest blue color */
799
- --lumx-color-blue-D1: #184ed8; /* Dark blue color */
800
- --lumx-color-blue-N: #245be7; /* Neutral blue color */
801
- --lumx-color-blue-L1: rgba(36, 91, 231, 0.8); /* Base blue color with 80% opacity */
802
- --lumx-color-blue-L2: rgba(36, 91, 231, 0.6); /* Base blue color with 60% opacity */
803
- --lumx-color-blue-L3: rgba(36, 91, 231, 0.4); /* Base blue color with 40% opacity */
804
- --lumx-color-blue-L4: rgba(36, 91, 231, 0.2); /* Base blue color with 20% opacity */
805
- --lumx-color-blue-L5: rgba(36, 91, 231, 0.1); /* Base blue color with 10% opacity */
806
- --lumx-color-blue-L6: rgba(36, 91, 231, 0.05); /* Base blue color with 5% opacity */
807
- --lumx-color-green-D2: #1a6e59; /* Darkest green color */
808
- --lumx-color-green-D1: #177a61; /* Dark green color */
809
- --lumx-color-green-N: #138669; /* Neutral green color */
810
- --lumx-color-green-L1: rgba(19, 134, 105, 0.8); /* Base green color with 80% opacity */
811
- --lumx-color-green-L2: rgba(19, 134, 105, 0.6); /* Base green color with 60% opacity */
812
- --lumx-color-green-L3: rgba(19, 134, 105, 0.4); /* Base green color with 40% opacity */
813
- --lumx-color-green-L4: rgba(19, 134, 105, 0.2); /* Base green color with 20% opacity */
814
- --lumx-color-green-L5: rgba(19, 134, 105, 0.1); /* Base green color with 10% opacity */
815
- --lumx-color-green-L6: rgba(19, 134, 105, 0.05); /* Base green color with 5% opacity */
816
- --lumx-color-yellow-D2: #ffa125; /* Darkest yellow color */
817
- --lumx-color-yellow-D1: #ffb325; /* Dark yellow color */
818
- --lumx-color-yellow-N: #ffc425; /* Neutral yellow color */
819
- --lumx-color-yellow-L1: rgba(255, 196, 37, 0.9); /* Base yellow color with 80% opacity */
820
- --lumx-color-yellow-L2: rgba(255, 196, 37, 0.8); /* Base yellow color with 70% opacity */
821
- --lumx-color-yellow-L3: rgba(255, 196, 37, 0.6); /* Base yellow color with 60% opacity */
822
- --lumx-color-yellow-L4: rgba(255, 196, 37, 0.48); /* Base yellow color with 40% opacity */
823
- --lumx-color-yellow-L5: rgba(255, 196, 37, 0.24); /* Base yellow color with 20% opacity */
824
- --lumx-color-yellow-L6: rgba(255, 196, 37, 0.12); /* Base yellow color with 10% opacity */
825
- --lumx-color-red-D2: #be1e46; /* Darkest red color */
826
- --lumx-color-red-D1: #d42148; /* Dark red color */
827
- --lumx-color-red-N: #df3050; /* Neutral red color */
828
- --lumx-color-red-L1: rgba(223, 48, 80, 0.8); /* Base red color with 80% opacity */
829
- --lumx-color-red-L2: rgba(223, 48, 80, 0.6); /* Base red color with 60% opacity */
830
- --lumx-color-red-L3: rgba(223, 48, 80, 0.4); /* Base red color with 40% opacity */
831
- --lumx-color-red-L4: rgba(223, 48, 80, 0.2); /* Base red color with 20% opacity */
832
- --lumx-color-red-L5: rgba(223, 48, 80, 0.1); /* Base red color with 10% opacity */
833
- --lumx-color-red-L6: rgba(223, 48, 80, 0.05); /* Base red color with 5% opacity */
834
- --lumx-color-grey-N: #757575; /* Neutral grey 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 */
372
+ --lumx-color-blue-L1: rgba(33, 150, 243, 0.8); /* Base blue color with 80% opacity */
373
+ --lumx-color-blue-L2: rgba(33, 150, 243, 0.6); /* Base blue color with 60% opacity */
374
+ --lumx-color-blue-L3: rgba(33, 150, 243, 0.4); /* Base blue color with 40% opacity */
375
+ --lumx-color-blue-L4: rgba(33, 150, 243, 0.2); /* Base blue color with 20% opacity */
376
+ --lumx-color-blue-L5: rgba(33, 150, 243, 0.1); /* Base blue color with 10% opacity */
377
+ --lumx-color-blue-L6: rgba(33, 150, 243, 0.05); /* Base blue color with 5% opacity */
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 */
381
+ --lumx-color-green-L1: rgba(76, 175, 80, 0.8); /* Base green color with 80% opacity */
382
+ --lumx-color-green-L2: rgba(76, 175, 80, 0.6); /* Base green color with 60% opacity */
383
+ --lumx-color-green-L3: rgba(76, 175, 80, 0.4); /* Base green color with 40% opacity */
384
+ --lumx-color-green-L4: rgba(76, 175, 80, 0.2); /* Base green color with 20% opacity */
385
+ --lumx-color-green-L5: rgba(76, 175, 80, 0.1); /* Base green color with 10% opacity */
386
+ --lumx-color-green-L6: rgba(76, 175, 80, 0.05); /* Base green color with 5% opacity */
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 */
390
+ --lumx-color-yellow-L1: rgba(255, 179, 0, 0.8); /* Base yellow color with 80% opacity */
391
+ --lumx-color-yellow-L2: rgba(255, 179, 0, 0.7); /* Base yellow color with 70% opacity */
392
+ --lumx-color-yellow-L3: rgba(255, 179, 0, 0.6); /* Base yellow color with 60% opacity */
393
+ --lumx-color-yellow-L4: rgba(255, 179, 0, 0.4); /* Base yellow color with 40% opacity */
394
+ --lumx-color-yellow-L5: rgba(255, 179, 0, 0.2); /* Base yellow color with 20% opacity */
395
+ --lumx-color-yellow-L6: rgba(255, 179, 0, 0.1); /* Base yellow color with 10% opacity */
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 */
399
+ --lumx-color-red-L1: rgba(244, 67, 54, 0.8); /* Base red color with 80% opacity */
400
+ --lumx-color-red-L2: rgba(244, 67, 54, 0.6); /* Base red color with 60% opacity */
401
+ --lumx-color-red-L3: rgba(244, 67, 54, 0.4); /* Base red color with 40% opacity */
402
+ --lumx-color-red-L4: rgba(244, 67, 54, 0.2); /* Base red color with 20% opacity */
403
+ --lumx-color-red-L5: rgba(244, 67, 54, 0.1); /* Base red color with 10% opacity */
404
+ --lumx-color-red-L6: rgba(244, 67, 54, 0.05); /* Base red color with 5% opacity */
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 primary color */
842
- --lumx-color-primary-D1: #1e88e5; /* Dark primary color */
843
- --lumx-color-primary-N: #2196f3; /* Neutral primary color */
844
- --lumx-color-primary-L1: rgba(33, 150, 243, 0.8); /* Base primary color with 80% opacity */
845
- --lumx-color-primary-L2: rgba(33, 150, 243, 0.6); /* Base primary color with 60% opacity */
846
- --lumx-color-primary-L3: rgba(33, 150, 243, 0.4); /* Base primary color with 40% opacity */
847
- --lumx-color-primary-L4: rgba(33, 150, 243, 0.2); /* Base primary color with 20% opacity */
848
- --lumx-color-primary-L5: rgba(33, 150, 243, 0.1); /* Base primary color with 10% opacity */
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 */
415
+ --lumx-color-primary-L1: rgba(33, 150, 243, 0.8); /* Base blue color with 80% opacity */
416
+ --lumx-color-primary-L2: rgba(33, 150, 243, 0.6); /* Base blue color with 60% opacity */
417
+ --lumx-color-primary-L3: rgba(33, 150, 243, 0.4); /* Base blue color with 40% opacity */
418
+ --lumx-color-primary-L4: rgba(33, 150, 243, 0.2); /* Base blue color with 20% opacity */
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 secondary color */
851
- --lumx-color-secondary-D1: #43a047; /* Dark secondary color */
852
- --lumx-color-secondary-N: #4caf50; /* Neutral secondary color */
853
- --lumx-color-secondary-L1: rgba(76, 175, 80, 0.8); /* Base secondary color with 80% opacity */
854
- --lumx-color-secondary-L2: rgba(76, 175, 80, 0.6); /* Base secondary color with 60% opacity */
855
- --lumx-color-secondary-L3: rgba(76, 175, 80, 0.4); /* Base secondary color with 40% opacity */
856
- --lumx-color-secondary-L4: rgba(76, 175, 80, 0.2); /* Base secondary color with 20% opacity */
857
- --lumx-color-secondary-L5: rgba(76, 175, 80, 0.1); /* Base secondary color with 10% opacity */
858
- --lumx-color-secondary-L6: rgba(76, 175, 80, 0.05); /* Base secondary color with 5% opacity */
859
- --lumx-color-accent-D2: #388e3c; /* Darkest secondary color */
860
- --lumx-color-accent-D1: #43a047; /* Dark secondary color */
861
- --lumx-color-accent-N: #4caf50; /* Neutral secondary color */
862
- --lumx-color-accent-L1: rgba(76, 175, 80, 0.8); /* Base secondary color with 80% opacity */
863
- --lumx-color-accent-L2: rgba(76, 175, 80, 0.6); /* Base secondary color with 60% opacity */
864
- --lumx-color-accent-L3: rgba(76, 175, 80, 0.4); /* Base secondary color with 40% opacity */
865
- --lumx-color-accent-L4: rgba(76, 175, 80, 0.2); /* Base secondary color with 20% opacity */
866
- --lumx-color-accent-L5: rgba(76, 175, 80, 0.1); /* Base secondary color with 10% opacity */
867
- --lumx-color-accent-L6: rgba(76, 175, 80, 0.05); /* Base secondary color with 5% opacity */
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 */
424
+ --lumx-color-secondary-L1: rgba(76, 175, 80, 0.8); /* Base green color with 80% opacity */
425
+ --lumx-color-secondary-L2: rgba(76, 175, 80, 0.6); /* Base green color with 60% opacity */
426
+ --lumx-color-secondary-L3: rgba(76, 175, 80, 0.4); /* Base green color with 40% opacity */
427
+ --lumx-color-secondary-L4: rgba(76, 175, 80, 0.2); /* Base green color with 20% opacity */
428
+ --lumx-color-secondary-L5: rgba(76, 175, 80, 0.1); /* Base green color with 10% opacity */
429
+ --lumx-color-secondary-L6: rgba(76, 175, 80, 0.05); /* Base green color with 5% opacity */
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 */
433
+ --lumx-color-accent-L1: rgba(76, 175, 80, 0.8); /* Base green color with 80% opacity */
434
+ --lumx-color-accent-L2: rgba(76, 175, 80, 0.6); /* Base green color with 60% opacity */
435
+ --lumx-color-accent-L3: rgba(76, 175, 80, 0.4); /* Base green color with 40% opacity */
436
+ --lumx-color-accent-L4: rgba(76, 175, 80, 0.2); /* Base green color with 20% opacity */
437
+ --lumx-color-accent-L5: rgba(76, 175, 80, 0.1); /* Base green color with 10% opacity */
438
+ --lumx-color-accent-L6: rgba(76, 175, 80, 0.05); /* Base green color with 5% opacity */
868
439
  --lumx-color-black-N: rgba(0, 0, 0, 0.87); /* Neutral dark color */
869
440
  --lumx-color-black-L1: rgba(0, 0, 0, 0.7); /* Base dark color with 70% opacity */
870
441
  --lumx-color-black-L2: rgba(0, 0, 0, 0.54); /* Base dark color with 54% opacity */
@@ -872,22 +443,22 @@
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: #ffa125; /* Darkest yellow color */
883
- --lumx-color-orange-D1: #ffb325; /* Dark yellow color */
884
- --lumx-color-orange-N: #ffc425; /* Neutral yellow color */
885
- --lumx-color-orange-L1: rgba(255, 196, 37, 0.9); /* Base yellow color with 80% opacity */
886
- --lumx-color-orange-L2: rgba(255, 196, 37, 0.8); /* Base yellow color with 70% opacity */
887
- --lumx-color-orange-L3: rgba(255, 196, 37, 0.6); /* Base yellow color with 60% opacity */
888
- --lumx-color-orange-L4: rgba(255, 196, 37, 0.48); /* Base yellow color with 40% opacity */
889
- --lumx-color-orange-L5: rgba(255, 196, 37, 0.24); /* Base yellow color with 20% opacity */
890
- --lumx-color-orange-L6: rgba(255, 196, 37, 0.12); /* Base yellow color with 10% opacity */
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 */
456
+ --lumx-color-orange-L1: rgba(255, 179, 0, 0.8); /* Base yellow color with 80% opacity */
457
+ --lumx-color-orange-L2: rgba(255, 179, 0, 0.7); /* Base yellow color with 70% opacity */
458
+ --lumx-color-orange-L3: rgba(255, 179, 0, 0.6); /* Base yellow color with 60% opacity */
459
+ --lumx-color-orange-L4: rgba(255, 179, 0, 0.4); /* Base yellow color with 40% opacity */
460
+ --lumx-color-orange-L5: rgba(255, 179, 0, 0.2); /* Base yellow color with 20% opacity */
461
+ --lumx-color-orange-L6: rgba(255, 179, 0, 0.1); /* Base yellow color with 10% opacity */
891
462
  --lumx-size-xxs: 14px;
892
463
  --lumx-size-xs: 20px;
893
464
  --lumx-size-s: 24px;