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

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
@@ -1,181 +1,106 @@
1
1
  /**
2
2
  * Do not edit directly
3
- * Generated on Tue, 19 Oct 2021 08:35:24 GMT
3
+ * Generated on Wed, 12 Jan 2022 16:44:48 GMT
4
4
  */
5
5
 
6
6
  :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(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;
@@ -214,170 +139,55 @@
214
139
  --lumx-material-text-field-input-content-line-height: 20px;
215
140
  --lumx-navigation-item-padding-horizontal: 8px;
216
141
  --lumx-navigation-item-min-height: 36px;
217
- --lumx-navigation-item-border-radius: var(--lumx-border-radius);
142
+ --lumx-navigation-item-border-radius: 4px;
218
143
  --lumx-navigation-item-emphasis-low-state-default-border-top-width: 0;
219
144
  --lumx-navigation-item-emphasis-low-state-default-border-right-width: 0;
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,123 @@
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-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);
694
340
  --lumx-text-field-state-focus-input-border-top-width: 2px;
695
341
  --lumx-text-field-state-focus-input-border-right-width: 2px;
696
342
  --lumx-text-field-state-focus-input-border-bottom-width: 2px;
697
343
  --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 */
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);
714
350
  --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 */
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);
728
354
  --lumx-border-radius: 4px;
729
355
  --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 */
356
+ --lumx-color-dark-L1: rgba(0, 0, 0, 0.7); /* Base dark color with 70% opacity */
731
357
  --lumx-color-dark-L2: rgba(0, 0, 0, 0.54); /* Base dark color with 54% opacity */
732
358
  --lumx-color-dark-L3: rgba(0, 0, 0, 0.38); /* Base dark color with 38% opacity */
733
359
  --lumx-color-dark-L4: rgba(0, 0, 0, 0.2); /* Base dark color with 20% opacity */
734
360
  --lumx-color-dark-L5: rgba(0, 0, 0, 0.12); /* Base dark color with 12% opacity */
735
361
  --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 */
362
+ --lumx-color-light-N: rgb(255, 255, 255); /* Neutral light color */
737
363
  --lumx-color-light-L1: rgba(255, 255, 255, 0.9); /* Base light color with 90% opacity */
738
364
  --lumx-color-light-L2: rgba(255, 255, 255, 0.8); /* Base light color with 80% opacity */
739
365
  --lumx-color-light-L3: rgba(255, 255, 255, 0.6); /* Base light color with 60% opacity */
740
366
  --lumx-color-light-L4: rgba(255, 255, 255, 0.4); /* Base light color with 40% opacity */
741
367
  --lumx-color-light-L5: rgba(255, 255, 255, 0.2); /* Base light color with 20% opacity */
742
368
  --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 */
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 */
746
372
  --lumx-color-blue-L1: rgba(33, 150, 243, 0.8); /* Base blue color with 80% opacity */
747
373
  --lumx-color-blue-L2: rgba(33, 150, 243, 0.6); /* Base blue color with 60% opacity */
748
374
  --lumx-color-blue-L3: rgba(33, 150, 243, 0.4); /* Base blue color with 40% opacity */
749
375
  --lumx-color-blue-L4: rgba(33, 150, 243, 0.2); /* Base blue color with 20% opacity */
750
376
  --lumx-color-blue-L5: rgba(33, 150, 243, 0.1); /* Base blue color with 10% opacity */
751
377
  --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 */
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 */
755
381
  --lumx-color-green-L1: rgba(76, 175, 80, 0.8); /* Base green color with 80% opacity */
756
382
  --lumx-color-green-L2: rgba(76, 175, 80, 0.6); /* Base green color with 60% opacity */
757
383
  --lumx-color-green-L3: rgba(76, 175, 80, 0.4); /* Base green color with 40% opacity */
758
384
  --lumx-color-green-L4: rgba(76, 175, 80, 0.2); /* Base green color with 20% opacity */
759
385
  --lumx-color-green-L5: rgba(76, 175, 80, 0.1); /* Base green color with 10% opacity */
760
386
  --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 */
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 */
764
390
  --lumx-color-yellow-L1: rgba(255, 179, 0, 0.8); /* Base yellow color with 80% opacity */
765
391
  --lumx-color-yellow-L2: rgba(255, 179, 0, 0.7); /* Base yellow color with 70% opacity */
766
392
  --lumx-color-yellow-L3: rgba(255, 179, 0, 0.6); /* Base yellow color with 60% opacity */
767
393
  --lumx-color-yellow-L4: rgba(255, 179, 0, 0.4); /* Base yellow color with 40% opacity */
768
394
  --lumx-color-yellow-L5: rgba(255, 179, 0, 0.2); /* Base yellow color with 20% opacity */
769
395
  --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 */
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 */
773
399
  --lumx-color-red-L1: rgba(244, 67, 54, 0.8); /* Base red color with 80% opacity */
774
400
  --lumx-color-red-L2: rgba(244, 67, 54, 0.6); /* Base red color with 60% opacity */
775
401
  --lumx-color-red-L3: rgba(244, 67, 54, 0.4); /* Base red color with 40% opacity */
776
402
  --lumx-color-red-L4: rgba(244, 67, 54, 0.2); /* Base red color with 20% opacity */
777
403
  --lumx-color-red-L5: rgba(244, 67, 54, 0.1); /* Base red color with 10% opacity */
778
404
  --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 */
405
+ --lumx-color-grey-N: rgb(117, 117, 117); /* Neutral grey color */
780
406
  --lumx-color-grey-L1: rgba(117, 117, 117, 0.8); /* Base grey color with 80% opacity */
781
407
  --lumx-color-grey-L2: rgba(117, 117, 117, 0.6); /* Base grey color with 60% opacity */
782
408
  --lumx-color-grey-L3: rgba(117, 117, 117, 0.4); /* Base grey color with 40% opacity */
783
409
  --lumx-color-grey-L4: rgba(117, 117, 117, 0.2); /* Base grey color with 20% opacity */
784
410
  --lumx-color-grey-L5: rgba(117, 117, 117, 0.1); /* Base grey color with 10% opacity */
785
411
  --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 */
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 */
789
415
  --lumx-color-primary-L1: rgba(33, 150, 243, 0.8); /* Base blue color with 80% opacity */
790
416
  --lumx-color-primary-L2: rgba(33, 150, 243, 0.6); /* Base blue color with 60% opacity */
791
417
  --lumx-color-primary-L3: rgba(33, 150, 243, 0.4); /* Base blue color with 40% opacity */
792
418
  --lumx-color-primary-L4: rgba(33, 150, 243, 0.2); /* Base blue color with 20% opacity */
793
419
  --lumx-color-primary-L5: rgba(33, 150, 243, 0.1); /* Base blue color with 10% opacity */
794
420
  --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 */
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 */
798
424
  --lumx-color-secondary-L1: rgba(76, 175, 80, 0.8); /* Base green color with 80% opacity */
799
425
  --lumx-color-secondary-L2: rgba(76, 175, 80, 0.6); /* Base green color with 60% opacity */
800
426
  --lumx-color-secondary-L3: rgba(76, 175, 80, 0.4); /* Base green color with 40% opacity */
801
427
  --lumx-color-secondary-L4: rgba(76, 175, 80, 0.2); /* Base green color with 20% opacity */
802
428
  --lumx-color-secondary-L5: rgba(76, 175, 80, 0.1); /* Base green color with 10% opacity */
803
429
  --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 */
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 */
807
433
  --lumx-color-accent-L1: rgba(76, 175, 80, 0.8); /* Base green color with 80% opacity */
808
434
  --lumx-color-accent-L2: rgba(76, 175, 80, 0.6); /* Base green color with 60% opacity */
809
435
  --lumx-color-accent-L3: rgba(76, 175, 80, 0.4); /* Base green color with 40% opacity */
@@ -811,22 +437,22 @@
811
437
  --lumx-color-accent-L5: rgba(76, 175, 80, 0.1); /* Base green color with 10% opacity */
812
438
  --lumx-color-accent-L6: rgba(76, 175, 80, 0.05); /* Base green color with 5% opacity */
813
439
  --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 */
440
+ --lumx-color-black-L1: rgba(0, 0, 0, 0.7); /* Base dark color with 70% opacity */
815
441
  --lumx-color-black-L2: rgba(0, 0, 0, 0.54); /* Base dark color with 54% opacity */
816
442
  --lumx-color-black-L3: rgba(0, 0, 0, 0.38); /* Base dark color with 38% opacity */
817
443
  --lumx-color-black-L4: rgba(0, 0, 0, 0.2); /* Base dark color with 20% opacity */
818
444
  --lumx-color-black-L5: rgba(0, 0, 0, 0.12); /* Base dark color with 12% opacity */
819
445
  --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 */
446
+ --lumx-color-white-N: rgb(255, 255, 255); /* Neutral light color */
821
447
  --lumx-color-white-L1: rgba(255, 255, 255, 0.9); /* Base light color with 90% opacity */
822
448
  --lumx-color-white-L2: rgba(255, 255, 255, 0.8); /* Base light color with 80% opacity */
823
449
  --lumx-color-white-L3: rgba(255, 255, 255, 0.6); /* Base light color with 60% opacity */
824
450
  --lumx-color-white-L4: rgba(255, 255, 255, 0.4); /* Base light color with 40% opacity */
825
451
  --lumx-color-white-L5: rgba(255, 255, 255, 0.2); /* Base light color with 20% opacity */
826
452
  --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 */
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 */
830
456
  --lumx-color-orange-L1: rgba(255, 179, 0, 0.8); /* Base yellow color with 80% opacity */
831
457
  --lumx-color-orange-L2: rgba(255, 179, 0, 0.7); /* Base yellow color with 70% opacity */
832
458
  --lumx-color-orange-L3: rgba(255, 179, 0, 0.6); /* Base yellow color with 60% opacity */
@@ -905,7 +531,7 @@
905
531
  --lumx-typography-custom-body-font-weight: var(--lumx-typography-font-weight-regular);
906
532
  --lumx-typography-custom-body-line-height: 20px;
907
533
  --lumx-typography-custom-quote-font-size: 16px;
908
- --lumx-typography-custom-quote-font-weight: var(--lumx-typography-font-weight-light);
534
+ --lumx-typography-custom-quote-font-weight: var(--lumx-typography-font-weight-regular);
909
535
  --lumx-typography-custom-quote-font-style: italic;
910
536
  --lumx-typography-custom-quote-line-height: 24px;
911
537
  --lumx-typography-custom-publish-info-font-size: 14px;