@lumx/core 3.1.4 → 3.2.0

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 (13) hide show
  1. package/css/design-tokens.css +532 -538
  2. package/js/constants/design-tokens.js +28 -17
  3. package/js/constants/design-tokens.min.js +1 -1
  4. package/js/constants/design-tokens.min.js.map +1 -1
  5. package/js/constants/design-tokens.ts +22 -17
  6. package/lumx.css +1 -1
  7. package/lumx.min.css +1 -1
  8. package/package.json +1 -1
  9. package/scss/_components.scss +1 -0
  10. package/scss/_design-tokens.scss +1079 -1107
  11. package/scss/components/navigation/_index.scss +234 -0
  12. package/scss/components/navigation/_mixins.scss +23 -0
  13. package/scss/lumx.scss +1 -0
package/scss/_design-tokens.scss CHANGED
@@ -1,6 +1,6 @@
1
1
  /**
2
2
  * Do not edit directly
3
- * Generated on Wed, 26 Oct 2022 13:20:02 GMT
3
+ * Generated on Wed, 22 Mar 2023 12:12:52 GMT
4
4
  */
5
5
 
6
6
  $lumx-button-height: 36px !default;
@@ -179,25 +179,19 @@ $lumx-navigation-item-emphasis-low-state-active-theme-light-background-color: va
179
179
  $lumx-navigation-item-emphasis-low-state-active-theme-light-border-color: var(--lumx-color-dark-L5) !default;
180
180
  $lumx-navigation-item-emphasis-low-state-active-theme-light-icon-color: var(--lumx-color-dark-L1) !default;
181
181
  $lumx-navigation-item-emphasis-low-state-active-theme-light-label-color: var(--lumx-color-dark-N) !default;
182
- $lumx-navigation-item-emphasis-low-state-active-theme-light-chevron-background-color: var(
183
- --lumx-color-dark-L4
184
- ) !default;
182
+ $lumx-navigation-item-emphasis-low-state-active-theme-light-chevron-background-color: var(--lumx-color-dark-L4) !default;
185
183
  $lumx-navigation-item-emphasis-low-state-active-theme-light-chevron-color: var(--lumx-color-dark-L1) !default;
186
184
  $lumx-navigation-item-emphasis-low-state-active-theme-dark-background-color: var(--lumx-color-light-L4) !default;
187
185
  $lumx-navigation-item-emphasis-low-state-active-theme-dark-border-color: var(--lumx-color-light-L5) !default;
188
186
  $lumx-navigation-item-emphasis-low-state-active-theme-dark-icon-color: var(--lumx-color-light-N) !default;
189
187
  $lumx-navigation-item-emphasis-low-state-active-theme-dark-label-color: var(--lumx-color-light-N) !default;
190
- $lumx-navigation-item-emphasis-low-state-active-theme-dark-chevron-background-color: var(
191
- --lumx-color-light-L4
192
- ) !default;
188
+ $lumx-navigation-item-emphasis-low-state-active-theme-dark-chevron-background-color: var(--lumx-color-light-L4) !default;
193
189
  $lumx-navigation-item-emphasis-low-state-active-theme-dark-chevron-color: var(--lumx-color-light-N) !default;
194
190
  $lumx-navigation-item-emphasis-selected-state-default-border-top-width: 0 !default;
195
191
  $lumx-navigation-item-emphasis-selected-state-default-border-right-width: 0 !default;
196
192
  $lumx-navigation-item-emphasis-selected-state-default-border-bottom-width: 0 !default;
197
193
  $lumx-navigation-item-emphasis-selected-state-default-border-left-width: 0 !default;
198
- $lumx-navigation-item-emphasis-selected-state-default-theme-light-background-color: var(
199
- --lumx-color-primary-L5
200
- ) !default;
194
+ $lumx-navigation-item-emphasis-selected-state-default-theme-light-background-color: var(--lumx-color-primary-L5) !default;
201
195
  $lumx-navigation-item-emphasis-selected-state-default-theme-light-border-color: var(--lumx-color-primary-N) !default;
202
196
  $lumx-navigation-item-emphasis-selected-state-default-theme-light-icon-color: var(--lumx-color-primary-D2) !default;
203
197
  $lumx-navigation-item-emphasis-selected-state-default-theme-light-label-color: var(--lumx-color-primary-D2) !default;
@@ -217,39 +211,29 @@ $lumx-navigation-item-emphasis-selected-state-hover-theme-light-background-color
217
211
  $lumx-navigation-item-emphasis-selected-state-hover-theme-light-border-color: var(--lumx-color-primary-N) !default;
218
212
  $lumx-navigation-item-emphasis-selected-state-hover-theme-light-icon-color: var(--lumx-color-primary-D2) !default;
219
213
  $lumx-navigation-item-emphasis-selected-state-hover-theme-light-label-color: var(--lumx-color-primary-D2) !default;
220
- $lumx-navigation-item-emphasis-selected-state-hover-theme-light-chevron-background-color: var(
221
- --lumx-color-primary-L4
222
- ) !default;
214
+ $lumx-navigation-item-emphasis-selected-state-hover-theme-light-chevron-background-color: var(--lumx-color-primary-L4) !default;
223
215
  $lumx-navigation-item-emphasis-selected-state-hover-theme-light-chevron-color: var(--lumx-color-primary-D2) !default;
224
216
  $lumx-navigation-item-emphasis-selected-state-hover-theme-dark-background-color: var(--lumx-color-light-L4) !default;
225
217
  $lumx-navigation-item-emphasis-selected-state-hover-theme-dark-border-color: var(--lumx-color-light-L5) !default;
226
218
  $lumx-navigation-item-emphasis-selected-state-hover-theme-dark-icon-color: var(--lumx-color-light-N) !default;
227
219
  $lumx-navigation-item-emphasis-selected-state-hover-theme-dark-label-color: var(--lumx-color-light-N) !default;
228
- $lumx-navigation-item-emphasis-selected-state-hover-theme-dark-chevron-background-color: var(
229
- --lumx-color-light-L4
230
- ) !default;
220
+ $lumx-navigation-item-emphasis-selected-state-hover-theme-dark-chevron-background-color: var(--lumx-color-light-L4) !default;
231
221
  $lumx-navigation-item-emphasis-selected-state-hover-theme-dark-chevron-color: var(--lumx-color-light-N) !default;
232
222
  $lumx-navigation-item-emphasis-selected-state-active-border-top-width: 0 !default;
233
223
  $lumx-navigation-item-emphasis-selected-state-active-border-right-width: 0 !default;
234
224
  $lumx-navigation-item-emphasis-selected-state-active-border-bottom-width: 0 !default;
235
225
  $lumx-navigation-item-emphasis-selected-state-active-border-left-width: 0 !default;
236
- $lumx-navigation-item-emphasis-selected-state-active-theme-light-background-color: var(
237
- --lumx-color-primary-L3
238
- ) !default;
226
+ $lumx-navigation-item-emphasis-selected-state-active-theme-light-background-color: var(--lumx-color-primary-L3) !default;
239
227
  $lumx-navigation-item-emphasis-selected-state-active-theme-light-border-color: var(--lumx-color-primary-N) !default;
240
228
  $lumx-navigation-item-emphasis-selected-state-active-theme-light-icon-color: var(--lumx-color-primary-D2) !default;
241
229
  $lumx-navigation-item-emphasis-selected-state-active-theme-light-label-color: var(--lumx-color-primary-D2) !default;
242
- $lumx-navigation-item-emphasis-selected-state-active-theme-light-chevron-background-color: var(
243
- --lumx-color-primary-L3
244
- ) !default;
230
+ $lumx-navigation-item-emphasis-selected-state-active-theme-light-chevron-background-color: var(--lumx-color-primary-L3) !default;
245
231
  $lumx-navigation-item-emphasis-selected-state-active-theme-light-chevron-color: var(--lumx-color-primary-D2) !default;
246
232
  $lumx-navigation-item-emphasis-selected-state-active-theme-dark-background-color: var(--lumx-color-light-L5) !default;
247
233
  $lumx-navigation-item-emphasis-selected-state-active-theme-dark-border-color: var(--lumx-color-light-L5) !default;
248
234
  $lumx-navigation-item-emphasis-selected-state-active-theme-dark-icon-color: var(--lumx-color-light-N) !default;
249
235
  $lumx-navigation-item-emphasis-selected-state-active-theme-dark-label-color: var(--lumx-color-light-N) !default;
250
- $lumx-navigation-item-emphasis-selected-state-active-theme-dark-chevron-background-color: var(
251
- --lumx-color-light-L5
252
- ) !default;
236
+ $lumx-navigation-item-emphasis-selected-state-active-theme-dark-chevron-background-color: var(--lumx-color-light-L5) !default;
253
237
  $lumx-navigation-item-emphasis-selected-state-active-theme-dark-chevron-color: var(--lumx-color-light-N) !default;
254
238
  $lumx-tabs-link-height: 48px !default;
255
239
  $lumx-tabs-link-border-radius: 0 !default;
@@ -359,63 +343,63 @@ $lumx-text-field-state-focus-theme-dark-input-border-color: var(--lumx-color-lig
359
343
  $lumx-text-field-state-focus-theme-dark-input-content-color: var(--lumx-color-light-N) !default;
360
344
  $lumx-text-field-state-focus-theme-dark-input-placeholder-color: var(--lumx-color-light-L2) !default;
361
345
  $lumx-border-radius: 4px !default;
362
- $lumx-color-dark-N: rgba(0, 0, 0, 0.87) !default; // Neutral dark color
363
- $lumx-color-dark-L1: rgba(0, 0, 0, 0.7) !default; // Base dark color with 70% opacity
364
- $lumx-color-dark-L2: rgba(0, 0, 0, 0.54) !default; // Base dark color with 54% opacity
365
- $lumx-color-dark-L3: rgba(0, 0, 0, 0.38) !default; // Base dark color with 38% opacity
366
- $lumx-color-dark-L4: rgba(0, 0, 0, 0.2) !default; // Base dark color with 20% opacity
367
- $lumx-color-dark-L5: rgba(0, 0, 0, 0.12) !default; // Base dark color with 12% opacity
368
- $lumx-color-dark-L6: rgba(0, 0, 0, 0.05) !default; // Base dark color with 5% opacity
369
- $lumx-color-light-N: rgb(255, 255, 255) !default; // Neutral light color
370
- $lumx-color-light-L1: rgba(255, 255, 255, 0.9) !default; // Base light color with 90% opacity
371
- $lumx-color-light-L2: rgba(255, 255, 255, 0.8) !default; // Base light color with 80% opacity
372
- $lumx-color-light-L3: rgba(255, 255, 255, 0.6) !default; // Base light color with 60% opacity
373
- $lumx-color-light-L4: rgba(255, 255, 255, 0.4) !default; // Base light color with 40% opacity
374
- $lumx-color-light-L5: rgba(255, 255, 255, 0.2) !default; // Base light color with 20% opacity
375
- $lumx-color-light-L6: rgba(255, 255, 255, 0.1) !default; // Base light color with 10% opacity
376
- $lumx-color-blue-D2: rgb(21, 70, 193) !default; // Darkest blue color
377
- $lumx-color-blue-D1: rgb(24, 78, 216) !default; // Dark blue color
378
- $lumx-color-blue-N: rgb(36, 91, 231) !default; // Neutral blue color
379
- $lumx-color-blue-L1: rgba(36, 91, 231, 0.8) !default; // Base blue color with 80% opacity
380
- $lumx-color-blue-L2: rgba(36, 91, 231, 0.6) !default; // Base blue color with 60% opacity
381
- $lumx-color-blue-L3: rgba(36, 91, 231, 0.4) !default; // Base blue color with 40% opacity
382
- $lumx-color-blue-L4: rgba(36, 91, 231, 0.2) !default; // Base blue color with 20% opacity
383
- $lumx-color-blue-L5: rgba(36, 91, 231, 0.1) !default; // Base blue color with 10% opacity
384
- $lumx-color-blue-L6: rgba(36, 91, 231, 0.05) !default; // Base blue color with 5% opacity
385
- $lumx-color-green-D2: rgb(26, 110, 89) !default; // Darkest green color
386
- $lumx-color-green-D1: rgb(23, 122, 97) !default; // Dark green color
387
- $lumx-color-green-N: rgb(19, 134, 105) !default; // Neutral green color
388
- $lumx-color-green-L1: rgba(19, 134, 105, 0.8) !default; // Base green color with 80% opacity
389
- $lumx-color-green-L2: rgba(19, 134, 105, 0.6) !default; // Base green color with 60% opacity
390
- $lumx-color-green-L3: rgba(19, 134, 105, 0.4) !default; // Base green color with 40% opacity
391
- $lumx-color-green-L4: rgba(19, 134, 105, 0.2) !default; // Base green color with 20% opacity
392
- $lumx-color-green-L5: rgba(19, 134, 105, 0.1) !default; // Base green color with 10% opacity
393
- $lumx-color-green-L6: rgba(19, 134, 105, 0.05) !default; // Base green color with 5% opacity
394
- $lumx-color-yellow-D2: rgb(255, 161, 37) !default; // Darkest yellow color
395
- $lumx-color-yellow-D1: rgb(255, 179, 37) !default; // Dark yellow color
396
- $lumx-color-yellow-N: rgb(255, 196, 37) !default; // Neutral yellow color
397
- $lumx-color-yellow-L1: rgba(255, 196, 37, 0.9) !default; // Base yellow color with 80% opacity
398
- $lumx-color-yellow-L2: rgba(255, 196, 37, 0.8) !default; // Base yellow color with 70% opacity
399
- $lumx-color-yellow-L3: rgba(255, 196, 37, 0.6) !default; // Base yellow color with 60% opacity
400
- $lumx-color-yellow-L4: rgba(255, 196, 37, 0.48) !default; // Base yellow color with 40% opacity
401
- $lumx-color-yellow-L5: rgba(255, 196, 37, 0.24) !default; // Base yellow color with 20% opacity
402
- $lumx-color-yellow-L6: rgba(255, 196, 37, 0.12) !default; // Base yellow color with 10% opacity
403
- $lumx-color-red-D2: rgb(190, 30, 70) !default; // Darkest red color
404
- $lumx-color-red-D1: rgb(212, 33, 72) !default; // Dark red color
405
- $lumx-color-red-N: rgb(223, 48, 80) !default; // Neutral red color
406
- $lumx-color-red-L1: rgba(223, 48, 80, 0.8) !default; // Base red color with 80% opacity
407
- $lumx-color-red-L2: rgba(223, 48, 80, 0.6) !default; // Base red color with 60% opacity
408
- $lumx-color-red-L3: rgba(223, 48, 80, 0.4) !default; // Base red color with 40% opacity
409
- $lumx-color-red-L4: rgba(223, 48, 80, 0.2) !default; // Base red color with 20% opacity
410
- $lumx-color-red-L5: rgba(223, 48, 80, 0.1) !default; // Base red color with 10% opacity
411
- $lumx-color-red-L6: rgba(223, 48, 80, 0.05) !default; // Base red color with 5% opacity
412
- $lumx-color-grey-N: rgb(117, 117, 117) !default; // Neutral grey color
413
- $lumx-color-grey-L1: rgba(117, 117, 117, 0.8) !default; // Base grey color with 80% opacity
414
- $lumx-color-grey-L2: rgba(117, 117, 117, 0.6) !default; // Base grey color with 60% opacity
415
- $lumx-color-grey-L3: rgba(117, 117, 117, 0.4) !default; // Base grey color with 40% opacity
416
- $lumx-color-grey-L4: rgba(117, 117, 117, 0.2) !default; // Base grey color with 20% opacity
417
- $lumx-color-grey-L5: rgba(117, 117, 117, 0.1) !default; // Base grey color with 10% opacity
418
- $lumx-color-grey-L6: rgba(117, 117, 117, 0.05) !default; // Base grey color with 5% opacity
346
+ $lumx-color-dark-N: rgb(0 0 0 / 0.87) !default; // Neutral dark color
347
+ $lumx-color-dark-L1: rgb(0 0 0 / 0.7) !default; // Base dark color with 70% opacity
348
+ $lumx-color-dark-L2: rgb(0 0 0 / 0.6) !default; // Base dark color with 60% opacity
349
+ $lumx-color-dark-L3: rgb(0 0 0 / 0.38) !default; // Base dark color with 38% opacity
350
+ $lumx-color-dark-L4: rgb(0 0 0 / 0.2) !default; // Base dark color with 20% opacity
351
+ $lumx-color-dark-L5: rgb(0 0 0 / 0.12) !default; // Base dark color with 12% opacity
352
+ $lumx-color-dark-L6: rgb(0 0 0 / 0.03) !default; // Base dark color with 3% opacity
353
+ $lumx-color-light-N: rgb(255 255 255) !default; // Neutral light color
354
+ $lumx-color-light-L1: rgb(255 255 255 / 0.9) !default; // Base light color with 90% opacity
355
+ $lumx-color-light-L2: rgb(255 255 255 / 0.8) !default; // Base light color with 80% opacity
356
+ $lumx-color-light-L3: rgb(255 255 255 / 0.6) !default; // Base light color with 60% opacity
357
+ $lumx-color-light-L4: rgb(255 255 255 / 0.4) !default; // Base light color with 40% opacity
358
+ $lumx-color-light-L5: rgb(255 255 255 / 0.2) !default; // Base light color with 20% opacity
359
+ $lumx-color-light-L6: rgb(255 255 255 / 0.1) !default; // Base light color with 10% opacity
360
+ $lumx-color-blue-D2: rgb(21 70 193) !default; // Darkest blue color
361
+ $lumx-color-blue-D1: rgb(24 78 216) !default; // Dark blue color
362
+ $lumx-color-blue-N: rgb(36 91 231) !default; // Neutral blue color
363
+ $lumx-color-blue-L1: rgb(36 91 231 / 0.8) !default; // Base blue color with 80% opacity
364
+ $lumx-color-blue-L2: rgb(36 91 231 / 0.6) !default; // Base blue color with 60% opacity
365
+ $lumx-color-blue-L3: rgb(36 91 231 / 0.4) !default; // Base blue color with 40% opacity
366
+ $lumx-color-blue-L4: rgb(36 91 231 / 0.2) !default; // Base blue color with 20% opacity
367
+ $lumx-color-blue-L5: rgb(36 91 231 / 0.1) !default; // Base blue color with 10% opacity
368
+ $lumx-color-blue-L6: rgb(36 91 231 / 0.05) !default; // Base blue color with 5% opacity
369
+ $lumx-color-green-D2: rgb(26 110 89) !default; // Darkest green color
370
+ $lumx-color-green-D1: rgb(23 122 97) !default; // Dark green color
371
+ $lumx-color-green-N: rgb(19 134 105) !default; // Neutral green color
372
+ $lumx-color-green-L1: rgb(19 134 105 / 0.8) !default; // Base green color with 80% opacity
373
+ $lumx-color-green-L2: rgb(19 134 105 / 0.6) !default; // Base green color with 60% opacity
374
+ $lumx-color-green-L3: rgb(19 134 105 / 0.4) !default; // Base green color with 40% opacity
375
+ $lumx-color-green-L4: rgb(19 134 105 / 0.2) !default; // Base green color with 20% opacity
376
+ $lumx-color-green-L5: rgb(19 134 105 / 0.1) !default; // Base green color with 10% opacity
377
+ $lumx-color-green-L6: rgb(19 134 105 / 0.05) !default; // Base green color with 5% opacity
378
+ $lumx-color-yellow-D2: rgb(255 161 37) !default; // Darkest yellow color
379
+ $lumx-color-yellow-D1: rgb(255 179 37) !default; // Dark yellow color
380
+ $lumx-color-yellow-N: rgb(255 196 37) !default; // Neutral yellow color
381
+ $lumx-color-yellow-L1: rgb(255 196 37 / 0.9) !default; // Base yellow color with 80% opacity
382
+ $lumx-color-yellow-L2: rgb(255 196 37 / 0.8) !default; // Base yellow color with 70% opacity
383
+ $lumx-color-yellow-L3: rgb(255 196 37 / 0.6) !default; // Base yellow color with 60% opacity
384
+ $lumx-color-yellow-L4: rgb(255 196 37 / 0.48) !default; // Base yellow color with 40% opacity
385
+ $lumx-color-yellow-L5: rgb(255 196 37 / 0.24) !default; // Base yellow color with 20% opacity
386
+ $lumx-color-yellow-L6: rgb(255 196 37 / 0.12) !default; // Base yellow color with 10% opacity
387
+ $lumx-color-red-D2: rgb(190 30 70) !default; // Darkest red color
388
+ $lumx-color-red-D1: rgb(212 33 72) !default; // Dark red color
389
+ $lumx-color-red-N: rgb(223 48 80) !default; // Neutral red color
390
+ $lumx-color-red-L1: rgb(223 48 80 / 0.8) !default; // Base red color with 80% opacity
391
+ $lumx-color-red-L2: rgb(223 48 80 / 0.6) !default; // Base red color with 60% opacity
392
+ $lumx-color-red-L3: rgb(223 48 80 / 0.4) !default; // Base red color with 40% opacity
393
+ $lumx-color-red-L4: rgb(223 48 80 / 0.2) !default; // Base red color with 20% opacity
394
+ $lumx-color-red-L5: rgb(223 48 80 / 0.1) !default; // Base red color with 10% opacity
395
+ $lumx-color-red-L6: rgb(223 48 80 / 0.05) !default; // Base red color with 5% opacity
396
+ $lumx-color-grey-N: rgb(117 117 117) !default; // Neutral grey color
397
+ $lumx-color-grey-L1: rgb(117 117 117 / 0.8) !default; // Base grey color with 80% opacity
398
+ $lumx-color-grey-L2: rgb(117 117 117 / 0.6) !default; // Base grey color with 60% opacity
399
+ $lumx-color-grey-L3: rgb(117 117 117 / 0.4) !default; // Base grey color with 40% opacity
400
+ $lumx-color-grey-L4: rgb(117 117 117 / 0.2) !default; // Base grey color with 20% opacity
401
+ $lumx-color-grey-L5: rgb(117 117 117 / 0.1) !default; // Base grey color with 10% opacity
402
+ $lumx-color-grey-L6: rgb(117 117 117 / 0.05) !default; // Base grey color with 5% opacity
419
403
  $lumx-color-primary-D2: var(--lumx-color-primary-D2) !default; // Darkest blue color
420
404
  $lumx-color-primary-D1: var(--lumx-color-primary-D1) !default; // Dark blue color
421
405
  $lumx-color-primary-N: var(--lumx-color-primary-N) !default; // Neutral blue color
@@ -443,29 +427,29 @@ $lumx-color-accent-L3: var(--lumx-color-accent-L3) !default; // Base green color
443
427
  $lumx-color-accent-L4: var(--lumx-color-accent-L4) !default; // Base green color with 20% opacity
444
428
  $lumx-color-accent-L5: var(--lumx-color-accent-L5) !default; // Base green color with 10% opacity
445
429
  $lumx-color-accent-L6: var(--lumx-color-accent-L6) !default; // Base green color with 5% opacity
446
- $lumx-color-black-N: rgba(0, 0, 0, 0.87) !default; // Neutral dark color
447
- $lumx-color-black-L1: rgba(0, 0, 0, 0.7) !default; // Base dark color with 70% opacity
448
- $lumx-color-black-L2: rgba(0, 0, 0, 0.54) !default; // Base dark color with 54% opacity
449
- $lumx-color-black-L3: rgba(0, 0, 0, 0.38) !default; // Base dark color with 38% opacity
450
- $lumx-color-black-L4: rgba(0, 0, 0, 0.2) !default; // Base dark color with 20% opacity
451
- $lumx-color-black-L5: rgba(0, 0, 0, 0.12) !default; // Base dark color with 12% opacity
452
- $lumx-color-black-L6: rgba(0, 0, 0, 0.05) !default; // Base dark color with 5% opacity
453
- $lumx-color-white-N: rgb(255, 255, 255) !default; // Neutral light color
454
- $lumx-color-white-L1: rgba(255, 255, 255, 0.9) !default; // Base light color with 90% opacity
455
- $lumx-color-white-L2: rgba(255, 255, 255, 0.8) !default; // Base light color with 80% opacity
456
- $lumx-color-white-L3: rgba(255, 255, 255, 0.6) !default; // Base light color with 60% opacity
457
- $lumx-color-white-L4: rgba(255, 255, 255, 0.4) !default; // Base light color with 40% opacity
458
- $lumx-color-white-L5: rgba(255, 255, 255, 0.2) !default; // Base light color with 20% opacity
459
- $lumx-color-white-L6: rgba(255, 255, 255, 0.1) !default; // Base light color with 10% opacity
460
- $lumx-color-orange-D2: rgb(255, 161, 37) !default; // Darkest yellow color
461
- $lumx-color-orange-D1: rgb(255, 179, 37) !default; // Dark yellow color
462
- $lumx-color-orange-N: rgb(255, 196, 37) !default; // Neutral yellow color
463
- $lumx-color-orange-L1: rgba(255, 196, 37, 0.9) !default; // Base yellow color with 80% opacity
464
- $lumx-color-orange-L2: rgba(255, 196, 37, 0.8) !default; // Base yellow color with 70% opacity
465
- $lumx-color-orange-L3: rgba(255, 196, 37, 0.6) !default; // Base yellow color with 60% opacity
466
- $lumx-color-orange-L4: rgba(255, 196, 37, 0.48) !default; // Base yellow color with 40% opacity
467
- $lumx-color-orange-L5: rgba(255, 196, 37, 0.24) !default; // Base yellow color with 20% opacity
468
- $lumx-color-orange-L6: rgba(255, 196, 37, 0.12) !default; // Base yellow color with 10% opacity
430
+ $lumx-color-black-N: rgb(0 0 0 / 0.87) !default; // Neutral dark color
431
+ $lumx-color-black-L1: rgb(0 0 0 / 0.7) !default; // Base dark color with 70% opacity
432
+ $lumx-color-black-L2: rgb(0 0 0 / 0.6) !default; // Base dark color with 60% opacity
433
+ $lumx-color-black-L3: rgb(0 0 0 / 0.38) !default; // Base dark color with 38% opacity
434
+ $lumx-color-black-L4: rgb(0 0 0 / 0.2) !default; // Base dark color with 20% opacity
435
+ $lumx-color-black-L5: rgb(0 0 0 / 0.12) !default; // Base dark color with 12% opacity
436
+ $lumx-color-black-L6: rgb(0 0 0 / 0.03) !default; // Base dark color with 3% opacity
437
+ $lumx-color-white-N: rgb(255 255 255) !default; // Neutral light color
438
+ $lumx-color-white-L1: rgb(255 255 255 / 0.9) !default; // Base light color with 90% opacity
439
+ $lumx-color-white-L2: rgb(255 255 255 / 0.8) !default; // Base light color with 80% opacity
440
+ $lumx-color-white-L3: rgb(255 255 255 / 0.6) !default; // Base light color with 60% opacity
441
+ $lumx-color-white-L4: rgb(255 255 255 / 0.4) !default; // Base light color with 40% opacity
442
+ $lumx-color-white-L5: rgb(255 255 255 / 0.2) !default; // Base light color with 20% opacity
443
+ $lumx-color-white-L6: rgb(255 255 255 / 0.1) !default; // Base light color with 10% opacity
444
+ $lumx-color-orange-D2: rgb(255 161 37) !default; // Darkest yellow color
445
+ $lumx-color-orange-D1: rgb(255 179 37) !default; // Dark yellow color
446
+ $lumx-color-orange-N: rgb(255 196 37) !default; // Neutral yellow color
447
+ $lumx-color-orange-L1: rgb(255 196 37 / 0.9) !default; // Base yellow color with 80% opacity
448
+ $lumx-color-orange-L2: rgb(255 196 37 / 0.8) !default; // Base yellow color with 70% opacity
449
+ $lumx-color-orange-L3: rgb(255 196 37 / 0.6) !default; // Base yellow color with 60% opacity
450
+ $lumx-color-orange-L4: rgb(255 196 37 / 0.48) !default; // Base yellow color with 40% opacity
451
+ $lumx-color-orange-L5: rgb(255 196 37 / 0.24) !default; // Base yellow color with 20% opacity
452
+ $lumx-color-orange-L6: rgb(255 196 37 / 0.12) !default; // Base yellow color with 10% opacity
469
453
  $lumx-size-xxs: 14px !default;
470
454
  $lumx-size-xs: 20px !default;
471
455
  $lumx-size-s: 24px !default;
@@ -478,8 +462,7 @@ $lumx-spacing-unit-regular: 8px !default;
478
462
  $lumx-spacing-unit-medium: 12px !default;
479
463
  $lumx-spacing-unit-big: 16px !default;
480
464
  $lumx-spacing-unit-huge: 24px !default;
481
- $lumx-typography-font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', 'Roboto', 'Oxygen', 'Ubuntu', 'Fira Sans',
482
- 'Droid Sans', 'Helvetica Neue', sans-serif !default;
465
+ $lumx-typography-font-family: -apple-system, blinkmacsystemfont, "Segoe UI", "Roboto", "Oxygen", "Ubuntu", "Fira Sans", "Droid Sans", "Helvetica Neue", sans-serif !default;
483
466
  $lumx-typography-font-weight-regular: 400 !default;
484
467
  $lumx-typography-font-weight-bold: 700 !default;
485
468
  $lumx-typography-font-weight-light: 300 !default;
@@ -548,1120 +531,1109 @@ $lumx-typography-custom-button-size-m-font-size: 14px !default;
548
531
  $lumx-typography-custom-button-size-m-font-weight: var(--lumx-typography-font-weight-bold) !default;
549
532
  $lumx-typography-custom-button-size-s-font-size: 12px !default;
550
533
  $lumx-typography-custom-button-size-s-font-weight: var(--lumx-typography-font-weight-bold) !default;
551
-
534
+ $lumx-typography-custom-navigation-item-font-size: 14px !default;
535
+ $lumx-typography-custom-navigation-item-font-weight: var(--lumx-typography-font-weight-bold) !default;
536
+ $lumx-typography-custom-navigation-item-line-height: 20px !default;
552
537
  $lumx-design-tokens: (
553
- 'button': (
554
- 'height': $lumx-button-height,
555
- 'border-radius': $lumx-button-border-radius,
556
- 'emphasis-high': (
557
- 'state-default': (
558
- 'padding': (
559
- 'horizontal': $lumx-button-emphasis-high-state-default-padding-horizontal,
560
- ),
561
- 'border-width': $lumx-button-emphasis-high-state-default-border-width,
562
- 'theme-light': (
563
- 'background-color': $lumx-button-emphasis-high-state-default-theme-light-background-color,
564
- 'color': $lumx-button-emphasis-high-state-default-theme-light-color,
565
- 'border-color': $lumx-button-emphasis-high-state-default-theme-light-border-color,
566
- ),
567
- 'theme-dark': (
568
- 'background-color': $lumx-button-emphasis-high-state-default-theme-dark-background-color,
569
- 'color': $lumx-button-emphasis-high-state-default-theme-dark-color,
570
- 'border-color': $lumx-button-emphasis-high-state-default-theme-dark-border-color,
571
- ),
538
+ "button": (
539
+ "height": $lumx-button-height,
540
+ "border-radius": $lumx-button-border-radius,
541
+ "emphasis-high": (
542
+ "state-default": (
543
+ "padding": (
544
+ "horizontal": $lumx-button-emphasis-high-state-default-padding-horizontal
545
+ ),
546
+ "border-width": $lumx-button-emphasis-high-state-default-border-width,
547
+ "theme-light": (
548
+ "background-color": $lumx-button-emphasis-high-state-default-theme-light-background-color,
549
+ "color": $lumx-button-emphasis-high-state-default-theme-light-color,
550
+ "border-color": $lumx-button-emphasis-high-state-default-theme-light-border-color
551
+ ),
552
+ "theme-dark": (
553
+ "background-color": $lumx-button-emphasis-high-state-default-theme-dark-background-color,
554
+ "color": $lumx-button-emphasis-high-state-default-theme-dark-color,
555
+ "border-color": $lumx-button-emphasis-high-state-default-theme-dark-border-color
556
+ )
572
557
  ),
573
- 'state-hover': (
574
- 'padding': (
575
- 'horizontal': $lumx-button-emphasis-high-state-hover-padding-horizontal,
576
- ),
577
- 'border-width': $lumx-button-emphasis-high-state-hover-border-width,
578
- 'theme-light': (
579
- 'background-color': $lumx-button-emphasis-high-state-hover-theme-light-background-color,
580
- 'color': $lumx-button-emphasis-high-state-hover-theme-light-color,
581
- 'border-color': $lumx-button-emphasis-high-state-hover-theme-light-border-color,
582
- ),
583
- 'theme-dark': (
584
- 'background-color': $lumx-button-emphasis-high-state-hover-theme-dark-background-color,
585
- 'color': $lumx-button-emphasis-high-state-hover-theme-dark-color,
586
- 'border-color': $lumx-button-emphasis-high-state-hover-theme-dark-border-color,
587
- ),
588
- ),
589
- 'state-active': (
590
- 'padding': (
591
- 'horizontal': $lumx-button-emphasis-high-state-active-padding-horizontal,
592
- ),
593
- 'border-width': $lumx-button-emphasis-high-state-active-border-width,
594
- 'theme-light': (
595
- 'background-color': $lumx-button-emphasis-high-state-active-theme-light-background-color,
596
- 'color': $lumx-button-emphasis-high-state-active-theme-light-color,
597
- 'border-color': $lumx-button-emphasis-high-state-active-theme-light-border-color,
598
- ),
599
- 'theme-dark': (
600
- 'background-color': $lumx-button-emphasis-high-state-active-theme-dark-background-color,
601
- 'color': $lumx-button-emphasis-high-state-active-theme-dark-color,
602
- 'border-color': $lumx-button-emphasis-high-state-active-theme-dark-border-color,
603
- ),
558
+ "state-hover": (
559
+ "padding": (
560
+ "horizontal": $lumx-button-emphasis-high-state-hover-padding-horizontal
561
+ ),
562
+ "border-width": $lumx-button-emphasis-high-state-hover-border-width,
563
+ "theme-light": (
564
+ "background-color": $lumx-button-emphasis-high-state-hover-theme-light-background-color,
565
+ "color": $lumx-button-emphasis-high-state-hover-theme-light-color,
566
+ "border-color": $lumx-button-emphasis-high-state-hover-theme-light-border-color
567
+ ),
568
+ "theme-dark": (
569
+ "background-color": $lumx-button-emphasis-high-state-hover-theme-dark-background-color,
570
+ "color": $lumx-button-emphasis-high-state-hover-theme-dark-color,
571
+ "border-color": $lumx-button-emphasis-high-state-hover-theme-dark-border-color
572
+ )
604
573
  ),
574
+ "state-active": (
575
+ "padding": (
576
+ "horizontal": $lumx-button-emphasis-high-state-active-padding-horizontal
577
+ ),
578
+ "border-width": $lumx-button-emphasis-high-state-active-border-width,
579
+ "theme-light": (
580
+ "background-color": $lumx-button-emphasis-high-state-active-theme-light-background-color,
581
+ "color": $lumx-button-emphasis-high-state-active-theme-light-color,
582
+ "border-color": $lumx-button-emphasis-high-state-active-theme-light-border-color
583
+ ),
584
+ "theme-dark": (
585
+ "background-color": $lumx-button-emphasis-high-state-active-theme-dark-background-color,
586
+ "color": $lumx-button-emphasis-high-state-active-theme-dark-color,
587
+ "border-color": $lumx-button-emphasis-high-state-active-theme-dark-border-color
588
+ )
589
+ )
605
590
  ),
606
- 'emphasis-medium': (
607
- 'state-default': (
608
- 'padding': (
609
- 'horizontal': $lumx-button-emphasis-medium-state-default-padding-horizontal,
610
- ),
611
- 'border-width': $lumx-button-emphasis-medium-state-default-border-width,
612
- 'theme-light': (
613
- 'background-color': $lumx-button-emphasis-medium-state-default-theme-light-background-color,
614
- 'color': $lumx-button-emphasis-medium-state-default-theme-light-color,
615
- 'border-color': $lumx-button-emphasis-medium-state-default-theme-light-border-color,
616
- ),
617
- 'theme-dark': (
618
- 'background-color': $lumx-button-emphasis-medium-state-default-theme-dark-background-color,
619
- 'color': $lumx-button-emphasis-medium-state-default-theme-dark-color,
620
- 'border-color': $lumx-button-emphasis-medium-state-default-theme-dark-border-color,
621
- ),
591
+ "emphasis-medium": (
592
+ "state-default": (
593
+ "padding": (
594
+ "horizontal": $lumx-button-emphasis-medium-state-default-padding-horizontal
595
+ ),
596
+ "border-width": $lumx-button-emphasis-medium-state-default-border-width,
597
+ "theme-light": (
598
+ "background-color": $lumx-button-emphasis-medium-state-default-theme-light-background-color,
599
+ "color": $lumx-button-emphasis-medium-state-default-theme-light-color,
600
+ "border-color": $lumx-button-emphasis-medium-state-default-theme-light-border-color
601
+ ),
602
+ "theme-dark": (
603
+ "background-color": $lumx-button-emphasis-medium-state-default-theme-dark-background-color,
604
+ "color": $lumx-button-emphasis-medium-state-default-theme-dark-color,
605
+ "border-color": $lumx-button-emphasis-medium-state-default-theme-dark-border-color
606
+ )
622
607
  ),
623
- 'state-hover': (
624
- 'padding': (
625
- 'horizontal': $lumx-button-emphasis-medium-state-hover-padding-horizontal,
626
- ),
627
- 'border-width': $lumx-button-emphasis-medium-state-hover-border-width,
628
- 'theme-light': (
629
- 'background-color': $lumx-button-emphasis-medium-state-hover-theme-light-background-color,
630
- 'color': $lumx-button-emphasis-medium-state-hover-theme-light-color,
631
- 'border-color': $lumx-button-emphasis-medium-state-hover-theme-light-border-color,
632
- ),
633
- 'theme-dark': (
634
- 'background-color': $lumx-button-emphasis-medium-state-hover-theme-dark-background-color,
635
- 'color': $lumx-button-emphasis-medium-state-hover-theme-dark-color,
636
- 'border-color': $lumx-button-emphasis-medium-state-hover-theme-dark-border-color,
637
- ),
638
- ),
639
- 'state-active': (
640
- 'padding': (
641
- 'horizontal': $lumx-button-emphasis-medium-state-active-padding-horizontal,
642
- ),
643
- 'border-width': $lumx-button-emphasis-medium-state-active-border-width,
644
- 'theme-light': (
645
- 'background-color': $lumx-button-emphasis-medium-state-active-theme-light-background-color,
646
- 'color': $lumx-button-emphasis-medium-state-active-theme-light-color,
647
- 'border-color': $lumx-button-emphasis-medium-state-active-theme-light-border-color,
648
- ),
649
- 'theme-dark': (
650
- 'background-color': $lumx-button-emphasis-medium-state-active-theme-dark-background-color,
651
- 'color': $lumx-button-emphasis-medium-state-active-theme-dark-color,
652
- 'border-color': $lumx-button-emphasis-medium-state-active-theme-dark-border-color,
653
- ),
608
+ "state-hover": (
609
+ "padding": (
610
+ "horizontal": $lumx-button-emphasis-medium-state-hover-padding-horizontal
611
+ ),
612
+ "border-width": $lumx-button-emphasis-medium-state-hover-border-width,
613
+ "theme-light": (
614
+ "background-color": $lumx-button-emphasis-medium-state-hover-theme-light-background-color,
615
+ "color": $lumx-button-emphasis-medium-state-hover-theme-light-color,
616
+ "border-color": $lumx-button-emphasis-medium-state-hover-theme-light-border-color
617
+ ),
618
+ "theme-dark": (
619
+ "background-color": $lumx-button-emphasis-medium-state-hover-theme-dark-background-color,
620
+ "color": $lumx-button-emphasis-medium-state-hover-theme-dark-color,
621
+ "border-color": $lumx-button-emphasis-medium-state-hover-theme-dark-border-color
622
+ )
654
623
  ),
624
+ "state-active": (
625
+ "padding": (
626
+ "horizontal": $lumx-button-emphasis-medium-state-active-padding-horizontal
627
+ ),
628
+ "border-width": $lumx-button-emphasis-medium-state-active-border-width,
629
+ "theme-light": (
630
+ "background-color": $lumx-button-emphasis-medium-state-active-theme-light-background-color,
631
+ "color": $lumx-button-emphasis-medium-state-active-theme-light-color,
632
+ "border-color": $lumx-button-emphasis-medium-state-active-theme-light-border-color
633
+ ),
634
+ "theme-dark": (
635
+ "background-color": $lumx-button-emphasis-medium-state-active-theme-dark-background-color,
636
+ "color": $lumx-button-emphasis-medium-state-active-theme-dark-color,
637
+ "border-color": $lumx-button-emphasis-medium-state-active-theme-dark-border-color
638
+ )
639
+ )
655
640
  ),
656
- 'emphasis-low': (
657
- 'state-default': (
658
- 'padding': (
659
- 'horizontal': $lumx-button-emphasis-low-state-default-padding-horizontal,
660
- ),
661
- 'border-width': $lumx-button-emphasis-low-state-default-border-width,
662
- 'theme-light': (
663
- 'background-color': $lumx-button-emphasis-low-state-default-theme-light-background-color,
664
- 'color': $lumx-button-emphasis-low-state-default-theme-light-color,
665
- 'border-color': $lumx-button-emphasis-low-state-default-theme-light-border-color,
666
- ),
667
- 'theme-dark': (
668
- 'background-color': $lumx-button-emphasis-low-state-default-theme-dark-background-color,
669
- 'color': $lumx-button-emphasis-low-state-default-theme-dark-color,
670
- 'border-color': $lumx-button-emphasis-low-state-default-theme-dark-border-color,
671
- ),
672
- ),
673
- 'state-hover': (
674
- 'padding': (
675
- 'horizontal': $lumx-button-emphasis-low-state-hover-padding-horizontal,
676
- ),
677
- 'border-width': $lumx-button-emphasis-low-state-hover-border-width,
678
- 'theme-light': (
679
- 'background-color': $lumx-button-emphasis-low-state-hover-theme-light-background-color,
680
- 'color': $lumx-button-emphasis-low-state-hover-theme-light-color,
681
- 'border-color': $lumx-button-emphasis-low-state-hover-theme-light-border-color,
682
- ),
683
- 'theme-dark': (
684
- 'background-color': $lumx-button-emphasis-low-state-hover-theme-dark-background-color,
685
- 'color': $lumx-button-emphasis-low-state-hover-theme-dark-color,
686
- 'border-color': $lumx-button-emphasis-low-state-hover-theme-dark-border-color,
687
- ),
641
+ "emphasis-low": (
642
+ "state-default": (
643
+ "padding": (
644
+ "horizontal": $lumx-button-emphasis-low-state-default-padding-horizontal
645
+ ),
646
+ "border-width": $lumx-button-emphasis-low-state-default-border-width,
647
+ "theme-light": (
648
+ "background-color": $lumx-button-emphasis-low-state-default-theme-light-background-color,
649
+ "color": $lumx-button-emphasis-low-state-default-theme-light-color,
650
+ "border-color": $lumx-button-emphasis-low-state-default-theme-light-border-color
651
+ ),
652
+ "theme-dark": (
653
+ "background-color": $lumx-button-emphasis-low-state-default-theme-dark-background-color,
654
+ "color": $lumx-button-emphasis-low-state-default-theme-dark-color,
655
+ "border-color": $lumx-button-emphasis-low-state-default-theme-dark-border-color
656
+ )
688
657
  ),
689
- 'state-active': (
690
- 'padding': (
691
- 'horizontal': $lumx-button-emphasis-low-state-active-padding-horizontal,
692
- ),
693
- 'border-width': $lumx-button-emphasis-low-state-active-border-width,
694
- 'theme-light': (
695
- 'background-color': $lumx-button-emphasis-low-state-active-theme-light-background-color,
696
- 'color': $lumx-button-emphasis-low-state-active-theme-light-color,
697
- 'border-color': $lumx-button-emphasis-low-state-active-theme-light-border-color,
698
- ),
699
- 'theme-dark': (
700
- 'background-color': $lumx-button-emphasis-low-state-active-theme-dark-background-color,
701
- 'color': $lumx-button-emphasis-low-state-active-theme-dark-color,
702
- 'border-color': $lumx-button-emphasis-low-state-active-theme-dark-border-color,
703
- ),
658
+ "state-hover": (
659
+ "padding": (
660
+ "horizontal": $lumx-button-emphasis-low-state-hover-padding-horizontal
661
+ ),
662
+ "border-width": $lumx-button-emphasis-low-state-hover-border-width,
663
+ "theme-light": (
664
+ "background-color": $lumx-button-emphasis-low-state-hover-theme-light-background-color,
665
+ "color": $lumx-button-emphasis-low-state-hover-theme-light-color,
666
+ "border-color": $lumx-button-emphasis-low-state-hover-theme-light-border-color
667
+ ),
668
+ "theme-dark": (
669
+ "background-color": $lumx-button-emphasis-low-state-hover-theme-dark-background-color,
670
+ "color": $lumx-button-emphasis-low-state-hover-theme-dark-color,
671
+ "border-color": $lumx-button-emphasis-low-state-hover-theme-dark-border-color
672
+ )
704
673
  ),
674
+ "state-active": (
675
+ "padding": (
676
+ "horizontal": $lumx-button-emphasis-low-state-active-padding-horizontal
677
+ ),
678
+ "border-width": $lumx-button-emphasis-low-state-active-border-width,
679
+ "theme-light": (
680
+ "background-color": $lumx-button-emphasis-low-state-active-theme-light-background-color,
681
+ "color": $lumx-button-emphasis-low-state-active-theme-light-color,
682
+ "border-color": $lumx-button-emphasis-low-state-active-theme-light-border-color
683
+ ),
684
+ "theme-dark": (
685
+ "background-color": $lumx-button-emphasis-low-state-active-theme-dark-background-color,
686
+ "color": $lumx-button-emphasis-low-state-active-theme-dark-color,
687
+ "border-color": $lumx-button-emphasis-low-state-active-theme-dark-border-color
688
+ )
689
+ )
705
690
  ),
706
- 'emphasis-selected': (
707
- 'state-default': (
708
- 'padding': (
709
- 'horizontal': $lumx-button-emphasis-selected-state-default-padding-horizontal,
710
- ),
711
- 'border-width': $lumx-button-emphasis-selected-state-default-border-width,
712
- 'theme-light': (
713
- 'background-color': $lumx-button-emphasis-selected-state-default-theme-light-background-color,
714
- 'color': $lumx-button-emphasis-selected-state-default-theme-light-color,
715
- 'border-color': $lumx-button-emphasis-selected-state-default-theme-light-border-color,
716
- ),
717
- 'theme-dark': (
718
- 'background-color': $lumx-button-emphasis-selected-state-default-theme-dark-background-color,
719
- 'color': $lumx-button-emphasis-selected-state-default-theme-dark-color,
720
- 'border-color': $lumx-button-emphasis-selected-state-default-theme-dark-border-color,
721
- ),
691
+ "emphasis-selected": (
692
+ "state-default": (
693
+ "padding": (
694
+ "horizontal": $lumx-button-emphasis-selected-state-default-padding-horizontal
695
+ ),
696
+ "border-width": $lumx-button-emphasis-selected-state-default-border-width,
697
+ "theme-light": (
698
+ "background-color": $lumx-button-emphasis-selected-state-default-theme-light-background-color,
699
+ "color": $lumx-button-emphasis-selected-state-default-theme-light-color,
700
+ "border-color": $lumx-button-emphasis-selected-state-default-theme-light-border-color
701
+ ),
702
+ "theme-dark": (
703
+ "background-color": $lumx-button-emphasis-selected-state-default-theme-dark-background-color,
704
+ "color": $lumx-button-emphasis-selected-state-default-theme-dark-color,
705
+ "border-color": $lumx-button-emphasis-selected-state-default-theme-dark-border-color
706
+ )
722
707
  ),
723
- 'state-hover': (
724
- 'padding': (
725
- 'horizontal': $lumx-button-emphasis-selected-state-hover-padding-horizontal,
726
- ),
727
- 'border-width': $lumx-button-emphasis-selected-state-hover-border-width,
728
- 'theme-light': (
729
- 'background-color': $lumx-button-emphasis-selected-state-hover-theme-light-background-color,
730
- 'color': $lumx-button-emphasis-selected-state-hover-theme-light-color,
731
- 'border-color': $lumx-button-emphasis-selected-state-hover-theme-light-border-color,
732
- ),
733
- 'theme-dark': (
734
- 'background-color': $lumx-button-emphasis-selected-state-hover-theme-dark-background-color,
735
- 'color': $lumx-button-emphasis-selected-state-hover-theme-dark-color,
736
- 'border-color': $lumx-button-emphasis-selected-state-hover-theme-dark-border-color,
737
- ),
708
+ "state-hover": (
709
+ "padding": (
710
+ "horizontal": $lumx-button-emphasis-selected-state-hover-padding-horizontal
711
+ ),
712
+ "border-width": $lumx-button-emphasis-selected-state-hover-border-width,
713
+ "theme-light": (
714
+ "background-color": $lumx-button-emphasis-selected-state-hover-theme-light-background-color,
715
+ "color": $lumx-button-emphasis-selected-state-hover-theme-light-color,
716
+ "border-color": $lumx-button-emphasis-selected-state-hover-theme-light-border-color
717
+ ),
718
+ "theme-dark": (
719
+ "background-color": $lumx-button-emphasis-selected-state-hover-theme-dark-background-color,
720
+ "color": $lumx-button-emphasis-selected-state-hover-theme-dark-color,
721
+ "border-color": $lumx-button-emphasis-selected-state-hover-theme-dark-border-color
722
+ )
738
723
  ),
739
- 'state-active': (
740
- 'padding': (
741
- 'horizontal': $lumx-button-emphasis-selected-state-active-padding-horizontal,
742
- ),
743
- 'border-width': $lumx-button-emphasis-selected-state-active-border-width,
744
- 'theme-light': (
745
- 'background-color': $lumx-button-emphasis-selected-state-active-theme-light-background-color,
746
- 'color': $lumx-button-emphasis-selected-state-active-theme-light-color,
747
- 'border-color': $lumx-button-emphasis-selected-state-active-theme-light-border-color,
748
- ),
749
- 'theme-dark': (
750
- 'background-color': $lumx-button-emphasis-selected-state-active-theme-dark-background-color,
751
- 'color': $lumx-button-emphasis-selected-state-active-theme-dark-color,
752
- 'border-color': $lumx-button-emphasis-selected-state-active-theme-dark-border-color,
753
- ),
754
- ),
755
- ),
724
+ "state-active": (
725
+ "padding": (
726
+ "horizontal": $lumx-button-emphasis-selected-state-active-padding-horizontal
727
+ ),
728
+ "border-width": $lumx-button-emphasis-selected-state-active-border-width,
729
+ "theme-light": (
730
+ "background-color": $lumx-button-emphasis-selected-state-active-theme-light-background-color,
731
+ "color": $lumx-button-emphasis-selected-state-active-theme-light-color,
732
+ "border-color": $lumx-button-emphasis-selected-state-active-theme-light-border-color
733
+ ),
734
+ "theme-dark": (
735
+ "background-color": $lumx-button-emphasis-selected-state-active-theme-dark-background-color,
736
+ "color": $lumx-button-emphasis-selected-state-active-theme-dark-color,
737
+ "border-color": $lumx-button-emphasis-selected-state-active-theme-dark-border-color
738
+ )
739
+ )
740
+ )
756
741
  ),
757
- 'material': (
758
- 'button': (
759
- 'text-transform': $lumx-material-button-text-transform,
760
- 'variant-icon-border-radius': (),
742
+ "material": (
743
+ "button": (
744
+ "text-transform": $lumx-material-button-text-transform,
745
+ "variant-icon-border-radius": (
746
+ )
761
747
  ),
762
- 'checkbox': (
763
- 'wrapper-size': $lumx-material-checkbox-wrapper-size,
764
- 'control-size': $lumx-material-checkbox-control-size,
748
+ "checkbox": (
749
+ "wrapper-size": $lumx-material-checkbox-wrapper-size,
750
+ "control-size": $lumx-material-checkbox-control-size
765
751
  ),
766
- 'chip': (
767
- 'size-m': (
768
- 'height': $lumx-material-chip-size-m-height,
769
- 'border-radius': $lumx-material-chip-size-m-border-radius,
770
- 'padding-vertical': $lumx-material-chip-size-m-padding-vertical,
771
- ),
772
- 'size-s': (
773
- 'height': $lumx-material-chip-size-s-height,
774
- 'border-radius': $lumx-material-chip-size-s-border-radius,
775
- 'padding-vertical': $lumx-material-chip-size-s-padding-vertical,
752
+ "chip": (
753
+ "size-m": (
754
+ "height": $lumx-material-chip-size-m-height,
755
+ "border-radius": $lumx-material-chip-size-m-border-radius,
756
+ "padding-vertical": $lumx-material-chip-size-m-padding-vertical
776
757
  ),
758
+ "size-s": (
759
+ "height": $lumx-material-chip-size-s-height,
760
+ "border-radius": $lumx-material-chip-size-s-border-radius,
761
+ "padding-vertical": $lumx-material-chip-size-s-padding-vertical
762
+ )
777
763
  ),
778
- 'input-helper': (
779
- 'font-size': $lumx-material-input-helper-font-size,
780
- 'font-weight': $lumx-material-input-helper-font-weight,
781
- 'line-height': $lumx-material-input-helper-line-height,
764
+ "input-helper": (
765
+ "font-size": $lumx-material-input-helper-font-size,
766
+ "font-weight": $lumx-material-input-helper-font-weight,
767
+ "line-height": $lumx-material-input-helper-line-height
782
768
  ),
783
- 'input-label': (
784
- 'font-size': $lumx-material-input-label-font-size,
785
- 'font-weight': $lumx-material-input-label-font-weight,
786
- 'line-height': $lumx-material-input-label-line-height,
769
+ "input-label": (
770
+ "font-size": $lumx-material-input-label-font-size,
771
+ "font-weight": $lumx-material-input-label-font-weight,
772
+ "line-height": $lumx-material-input-label-line-height
787
773
  ),
788
- 'progress': (
789
- 'bounce': $lumx-material-progress-bounce,
790
- 'rotate': $lumx-material-progress-rotate,
774
+ "progress": (
775
+ "bounce": $lumx-material-progress-bounce,
776
+ "rotate": $lumx-material-progress-rotate
791
777
  ),
792
- 'radio-button': (
793
- 'wrapper-size': $lumx-material-radio-button-wrapper-size,
794
- 'control-size': $lumx-material-radio-button-control-size,
795
- 'indicator-size': $lumx-material-radio-button-indicator-size,
778
+ "radio-button": (
779
+ "wrapper-size": $lumx-material-radio-button-wrapper-size,
780
+ "control-size": $lumx-material-radio-button-control-size,
781
+ "indicator-size": $lumx-material-radio-button-indicator-size
796
782
  ),
797
- 'switch': (
798
- 'wrapper': (
799
- 'width': $lumx-material-switch-wrapper-width,
800
- 'height': $lumx-material-switch-wrapper-height,
783
+ "switch": (
784
+ "wrapper": (
785
+ "width": $lumx-material-switch-wrapper-width,
786
+ "height": $lumx-material-switch-wrapper-height
801
787
  ),
802
- 'control': (
803
- 'width': $lumx-material-switch-control-width,
804
- 'height': $lumx-material-switch-control-height,
805
- ),
806
- 'indicator': (
807
- 'size': $lumx-material-switch-indicator-size,
808
- 'offset': $lumx-material-switch-indicator-offset,
788
+ "control": (
789
+ "width": $lumx-material-switch-control-width,
790
+ "height": $lumx-material-switch-control-height
809
791
  ),
792
+ "indicator": (
793
+ "size": $lumx-material-switch-indicator-size,
794
+ "offset": $lumx-material-switch-indicator-offset
795
+ )
810
796
  ),
811
- 'text-field': (
812
- 'padding': (
813
- 'top': $lumx-material-text-field-padding-top,
814
- 'bottom': $lumx-material-text-field-padding-bottom,
797
+ "text-field": (
798
+ "padding": (
799
+ "top": $lumx-material-text-field-padding-top,
800
+ "bottom": $lumx-material-text-field-padding-bottom
815
801
  ),
816
- 'header': (
817
- 'wrapper': (
818
- 'margin-bottom': $lumx-material-text-field-header-wrapper-margin-bottom,
819
- ),
820
- 'label': (
821
- 'font-size': $lumx-material-text-field-header-label-font-size,
822
- 'font-weight': $lumx-material-text-field-header-label-font-weight,
823
- 'line-height': $lumx-material-text-field-header-label-line-height,
824
- ),
825
- ),
826
- 'input': (
827
- 'content': (
828
- 'font-size': $lumx-material-text-field-input-content-font-size,
829
- 'font-weight': $lumx-material-text-field-input-content-font-weight,
830
- 'line-height': $lumx-material-text-field-input-content-line-height,
831
- ),
802
+ "header": (
803
+ "wrapper": (
804
+ "margin-bottom": $lumx-material-text-field-header-wrapper-margin-bottom
805
+ ),
806
+ "label": (
807
+ "font-size": $lumx-material-text-field-header-label-font-size,
808
+ "font-weight": $lumx-material-text-field-header-label-font-weight,
809
+ "line-height": $lumx-material-text-field-header-label-line-height
810
+ )
832
811
  ),
833
- ),
812
+ "input": (
813
+ "content": (
814
+ "font-size": $lumx-material-text-field-input-content-font-size,
815
+ "font-weight": $lumx-material-text-field-input-content-font-weight,
816
+ "line-height": $lumx-material-text-field-input-content-line-height
817
+ )
818
+ )
819
+ )
834
820
  ),
835
- 'navigation': (
836
- 'item': (
837
- 'padding': (
838
- 'horizontal': $lumx-navigation-item-padding-horizontal,
821
+ "navigation": (
822
+ "item": (
823
+ "padding": (
824
+ "horizontal": $lumx-navigation-item-padding-horizontal
839
825
  ),
840
- 'min-height': $lumx-navigation-item-min-height,
841
- 'border-radius': $lumx-navigation-item-border-radius,
842
- 'emphasis-low': (
843
- 'state-default': (
844
- 'border': (
845
- 'top': (
846
- 'width': $lumx-navigation-item-emphasis-low-state-default-border-top-width,
847
- ),
848
- 'right': (
849
- 'width': $lumx-navigation-item-emphasis-low-state-default-border-right-width,
826
+ "min-height": $lumx-navigation-item-min-height,
827
+ "border-radius": $lumx-navigation-item-border-radius,
828
+ "emphasis-low": (
829
+ "state-default": (
830
+ "border": (
831
+ "top": (
832
+ "width": $lumx-navigation-item-emphasis-low-state-default-border-top-width
850
833
  ),
851
- 'bottom': (
852
- 'width': $lumx-navigation-item-emphasis-low-state-default-border-bottom-width,
834
+ "right": (
835
+ "width": $lumx-navigation-item-emphasis-low-state-default-border-right-width
853
836
  ),
854
- 'left': (
855
- 'width': $lumx-navigation-item-emphasis-low-state-default-border-left-width,
837
+ "bottom": (
838
+ "width": $lumx-navigation-item-emphasis-low-state-default-border-bottom-width
856
839
  ),
857
- ),
858
- 'theme-light': (
859
- 'background-color':
860
- $lumx-navigation-item-emphasis-low-state-default-theme-light-background-color,
861
- 'border-color': $lumx-navigation-item-emphasis-low-state-default-theme-light-border-color,
862
- 'icon-color': $lumx-navigation-item-emphasis-low-state-default-theme-light-icon-color,
863
- 'label-color': $lumx-navigation-item-emphasis-low-state-default-theme-light-label-color,
864
- 'chevron-background-color':
865
- $lumx-navigation-item-emphasis-low-state-default-theme-light-chevron-background-color,
866
- 'chevron-color': $lumx-navigation-item-emphasis-low-state-default-theme-light-chevron-color,
867
- ),
868
- 'theme-dark': (
869
- 'background-color': $lumx-navigation-item-emphasis-low-state-default-theme-dark-background-color,
870
- 'border-color': $lumx-navigation-item-emphasis-low-state-default-theme-dark-border-color,
871
- 'icon-color': $lumx-navigation-item-emphasis-low-state-default-theme-dark-icon-color,
872
- 'label-color': $lumx-navigation-item-emphasis-low-state-default-theme-dark-label-color,
873
- 'chevron-background-color':
874
- $lumx-navigation-item-emphasis-low-state-default-theme-dark-chevron-background-color,
875
- 'chevron-color': $lumx-navigation-item-emphasis-low-state-default-theme-dark-chevron-color,
876
- ),
877
- ),
878
- 'state-hover': (
879
- 'border': (
880
- 'top': (
881
- 'width': $lumx-navigation-item-emphasis-low-state-hover-border-top-width,
840
+ "left": (
841
+ "width": $lumx-navigation-item-emphasis-low-state-default-border-left-width
842
+ )
843
+ ),
844
+ "theme-light": (
845
+ "background-color": $lumx-navigation-item-emphasis-low-state-default-theme-light-background-color,
846
+ "border-color": $lumx-navigation-item-emphasis-low-state-default-theme-light-border-color,
847
+ "icon-color": $lumx-navigation-item-emphasis-low-state-default-theme-light-icon-color,
848
+ "label-color": $lumx-navigation-item-emphasis-low-state-default-theme-light-label-color,
849
+ "chevron-background-color": $lumx-navigation-item-emphasis-low-state-default-theme-light-chevron-background-color,
850
+ "chevron-color": $lumx-navigation-item-emphasis-low-state-default-theme-light-chevron-color
851
+ ),
852
+ "theme-dark": (
853
+ "background-color": $lumx-navigation-item-emphasis-low-state-default-theme-dark-background-color,
854
+ "border-color": $lumx-navigation-item-emphasis-low-state-default-theme-dark-border-color,
855
+ "icon-color": $lumx-navigation-item-emphasis-low-state-default-theme-dark-icon-color,
856
+ "label-color": $lumx-navigation-item-emphasis-low-state-default-theme-dark-label-color,
857
+ "chevron-background-color": $lumx-navigation-item-emphasis-low-state-default-theme-dark-chevron-background-color,
858
+ "chevron-color": $lumx-navigation-item-emphasis-low-state-default-theme-dark-chevron-color
859
+ )
860
+ ),
861
+ "state-hover": (
862
+ "border": (
863
+ "top": (
864
+ "width": $lumx-navigation-item-emphasis-low-state-hover-border-top-width
882
865
  ),
883
- 'right': (
884
- 'width': $lumx-navigation-item-emphasis-low-state-hover-border-right-width,
866
+ "right": (
867
+ "width": $lumx-navigation-item-emphasis-low-state-hover-border-right-width
885
868
  ),
886
- 'bottom': (
887
- 'width': $lumx-navigation-item-emphasis-low-state-hover-border-bottom-width,
888
- ),
889
- 'left': (
890
- 'width': $lumx-navigation-item-emphasis-low-state-hover-border-left-width,
891
- ),
892
- ),
893
- 'theme-light': (
894
- 'background-color': $lumx-navigation-item-emphasis-low-state-hover-theme-light-background-color,
895
- 'border-color': $lumx-navigation-item-emphasis-low-state-hover-theme-light-border-color,
896
- 'icon-color': $lumx-navigation-item-emphasis-low-state-hover-theme-light-icon-color,
897
- 'label-color': $lumx-navigation-item-emphasis-low-state-hover-theme-light-label-color,
898
- 'chevron-background-color':
899
- $lumx-navigation-item-emphasis-low-state-hover-theme-light-chevron-background-color,
900
- 'chevron-color': $lumx-navigation-item-emphasis-low-state-hover-theme-light-chevron-color,
901
- ),
902
- 'theme-dark': (
903
- 'background-color': $lumx-navigation-item-emphasis-low-state-hover-theme-dark-background-color,
904
- 'border-color': $lumx-navigation-item-emphasis-low-state-hover-theme-dark-border-color,
905
- 'icon-color': $lumx-navigation-item-emphasis-low-state-hover-theme-dark-icon-color,
906
- 'label-color': $lumx-navigation-item-emphasis-low-state-hover-theme-dark-label-color,
907
- 'chevron-background-color':
908
- $lumx-navigation-item-emphasis-low-state-hover-theme-dark-chevron-background-color,
909
- 'chevron-color': $lumx-navigation-item-emphasis-low-state-hover-theme-dark-chevron-color,
910
- ),
911
- ),
912
- 'state-active': (
913
- 'border': (
914
- 'top': (
915
- 'width': $lumx-navigation-item-emphasis-low-state-active-border-top-width,
869
+ "bottom": (
870
+ "width": $lumx-navigation-item-emphasis-low-state-hover-border-bottom-width
916
871
  ),
917
- 'right': (
918
- 'width': $lumx-navigation-item-emphasis-low-state-active-border-right-width,
872
+ "left": (
873
+ "width": $lumx-navigation-item-emphasis-low-state-hover-border-left-width
874
+ )
875
+ ),
876
+ "theme-light": (
877
+ "background-color": $lumx-navigation-item-emphasis-low-state-hover-theme-light-background-color,
878
+ "border-color": $lumx-navigation-item-emphasis-low-state-hover-theme-light-border-color,
879
+ "icon-color": $lumx-navigation-item-emphasis-low-state-hover-theme-light-icon-color,
880
+ "label-color": $lumx-navigation-item-emphasis-low-state-hover-theme-light-label-color,
881
+ "chevron-background-color": $lumx-navigation-item-emphasis-low-state-hover-theme-light-chevron-background-color,
882
+ "chevron-color": $lumx-navigation-item-emphasis-low-state-hover-theme-light-chevron-color
883
+ ),
884
+ "theme-dark": (
885
+ "background-color": $lumx-navigation-item-emphasis-low-state-hover-theme-dark-background-color,
886
+ "border-color": $lumx-navigation-item-emphasis-low-state-hover-theme-dark-border-color,
887
+ "icon-color": $lumx-navigation-item-emphasis-low-state-hover-theme-dark-icon-color,
888
+ "label-color": $lumx-navigation-item-emphasis-low-state-hover-theme-dark-label-color,
889
+ "chevron-background-color": $lumx-navigation-item-emphasis-low-state-hover-theme-dark-chevron-background-color,
890
+ "chevron-color": $lumx-navigation-item-emphasis-low-state-hover-theme-dark-chevron-color
891
+ )
892
+ ),
893
+ "state-active": (
894
+ "border": (
895
+ "top": (
896
+ "width": $lumx-navigation-item-emphasis-low-state-active-border-top-width
919
897
  ),
920
- 'bottom': (
921
- 'width': $lumx-navigation-item-emphasis-low-state-active-border-bottom-width,
898
+ "right": (
899
+ "width": $lumx-navigation-item-emphasis-low-state-active-border-right-width
922
900
  ),
923
- 'left': (
924
- 'width': $lumx-navigation-item-emphasis-low-state-active-border-left-width,
901
+ "bottom": (
902
+ "width": $lumx-navigation-item-emphasis-low-state-active-border-bottom-width
925
903
  ),
926
- ),
927
- 'theme-light': (
928
- 'background-color': $lumx-navigation-item-emphasis-low-state-active-theme-light-background-color,
929
- 'border-color': $lumx-navigation-item-emphasis-low-state-active-theme-light-border-color,
930
- 'icon-color': $lumx-navigation-item-emphasis-low-state-active-theme-light-icon-color,
931
- 'label-color': $lumx-navigation-item-emphasis-low-state-active-theme-light-label-color,
932
- 'chevron-background-color':
933
- $lumx-navigation-item-emphasis-low-state-active-theme-light-chevron-background-color,
934
- 'chevron-color': $lumx-navigation-item-emphasis-low-state-active-theme-light-chevron-color,
935
- ),
936
- 'theme-dark': (
937
- 'background-color': $lumx-navigation-item-emphasis-low-state-active-theme-dark-background-color,
938
- 'border-color': $lumx-navigation-item-emphasis-low-state-active-theme-dark-border-color,
939
- 'icon-color': $lumx-navigation-item-emphasis-low-state-active-theme-dark-icon-color,
940
- 'label-color': $lumx-navigation-item-emphasis-low-state-active-theme-dark-label-color,
941
- 'chevron-background-color':
942
- $lumx-navigation-item-emphasis-low-state-active-theme-dark-chevron-background-color,
943
- 'chevron-color': $lumx-navigation-item-emphasis-low-state-active-theme-dark-chevron-color,
944
- ),
945
- ),
904
+ "left": (
905
+ "width": $lumx-navigation-item-emphasis-low-state-active-border-left-width
906
+ )
907
+ ),
908
+ "theme-light": (
909
+ "background-color": $lumx-navigation-item-emphasis-low-state-active-theme-light-background-color,
910
+ "border-color": $lumx-navigation-item-emphasis-low-state-active-theme-light-border-color,
911
+ "icon-color": $lumx-navigation-item-emphasis-low-state-active-theme-light-icon-color,
912
+ "label-color": $lumx-navigation-item-emphasis-low-state-active-theme-light-label-color,
913
+ "chevron-background-color": $lumx-navigation-item-emphasis-low-state-active-theme-light-chevron-background-color,
914
+ "chevron-color": $lumx-navigation-item-emphasis-low-state-active-theme-light-chevron-color
915
+ ),
916
+ "theme-dark": (
917
+ "background-color": $lumx-navigation-item-emphasis-low-state-active-theme-dark-background-color,
918
+ "border-color": $lumx-navigation-item-emphasis-low-state-active-theme-dark-border-color,
919
+ "icon-color": $lumx-navigation-item-emphasis-low-state-active-theme-dark-icon-color,
920
+ "label-color": $lumx-navigation-item-emphasis-low-state-active-theme-dark-label-color,
921
+ "chevron-background-color": $lumx-navigation-item-emphasis-low-state-active-theme-dark-chevron-background-color,
922
+ "chevron-color": $lumx-navigation-item-emphasis-low-state-active-theme-dark-chevron-color
923
+ )
924
+ )
946
925
  ),
947
- 'emphasis-selected': (
948
- 'state-default': (
949
- 'border': (
950
- 'top': (
951
- 'width': $lumx-navigation-item-emphasis-selected-state-default-border-top-width,
952
- ),
953
- 'right': (
954
- 'width': $lumx-navigation-item-emphasis-selected-state-default-border-right-width,
926
+ "emphasis-selected": (
927
+ "state-default": (
928
+ "border": (
929
+ "top": (
930
+ "width": $lumx-navigation-item-emphasis-selected-state-default-border-top-width
955
931
  ),
956
- 'bottom': (
957
- 'width': $lumx-navigation-item-emphasis-selected-state-default-border-bottom-width,
958
- ),
959
- 'left': (
960
- 'width': $lumx-navigation-item-emphasis-selected-state-default-border-left-width,
961
- ),
962
- ),
963
- 'theme-light': (
964
- 'background-color':
965
- $lumx-navigation-item-emphasis-selected-state-default-theme-light-background-color,
966
- 'border-color': $lumx-navigation-item-emphasis-selected-state-default-theme-light-border-color,
967
- 'icon-color': $lumx-navigation-item-emphasis-selected-state-default-theme-light-icon-color,
968
- 'label-color': $lumx-navigation-item-emphasis-selected-state-default-theme-light-label-color,
969
- 'chevron-background-color':
970
- $lumx-navigation-item-emphasis-selected-state-default-theme-light-chevron-background-color,
971
- 'chevron-color': $lumx-navigation-item-emphasis-selected-state-default-theme-light-chevron-color,
972
- ),
973
- 'theme-dark': (
974
- 'background-color':
975
- $lumx-navigation-item-emphasis-selected-state-default-theme-dark-background-color,
976
- 'border-color': $lumx-navigation-item-emphasis-selected-state-default-theme-dark-border-color,
977
- 'icon-color': $lumx-navigation-item-emphasis-selected-state-default-theme-dark-icon-color,
978
- 'label-color': $lumx-navigation-item-emphasis-selected-state-default-theme-dark-label-color,
979
- 'chevron-background-color':
980
- $lumx-navigation-item-emphasis-selected-state-default-theme-dark-chevron-background-color,
981
- 'chevron-color': $lumx-navigation-item-emphasis-selected-state-default-theme-dark-chevron-color,
982
- ),
983
- ),
984
- 'state-hover': (
985
- 'border': (
986
- 'top': (
987
- 'width': $lumx-navigation-item-emphasis-selected-state-hover-border-top-width,
932
+ "right": (
933
+ "width": $lumx-navigation-item-emphasis-selected-state-default-border-right-width
988
934
  ),
989
- 'right': (
990
- 'width': $lumx-navigation-item-emphasis-selected-state-hover-border-right-width,
935
+ "bottom": (
936
+ "width": $lumx-navigation-item-emphasis-selected-state-default-border-bottom-width
991
937
  ),
992
- 'bottom': (
993
- 'width': $lumx-navigation-item-emphasis-selected-state-hover-border-bottom-width,
938
+ "left": (
939
+ "width": $lumx-navigation-item-emphasis-selected-state-default-border-left-width
940
+ )
941
+ ),
942
+ "theme-light": (
943
+ "background-color": $lumx-navigation-item-emphasis-selected-state-default-theme-light-background-color,
944
+ "border-color": $lumx-navigation-item-emphasis-selected-state-default-theme-light-border-color,
945
+ "icon-color": $lumx-navigation-item-emphasis-selected-state-default-theme-light-icon-color,
946
+ "label-color": $lumx-navigation-item-emphasis-selected-state-default-theme-light-label-color,
947
+ "chevron-background-color": $lumx-navigation-item-emphasis-selected-state-default-theme-light-chevron-background-color,
948
+ "chevron-color": $lumx-navigation-item-emphasis-selected-state-default-theme-light-chevron-color
949
+ ),
950
+ "theme-dark": (
951
+ "background-color": $lumx-navigation-item-emphasis-selected-state-default-theme-dark-background-color,
952
+ "border-color": $lumx-navigation-item-emphasis-selected-state-default-theme-dark-border-color,
953
+ "icon-color": $lumx-navigation-item-emphasis-selected-state-default-theme-dark-icon-color,
954
+ "label-color": $lumx-navigation-item-emphasis-selected-state-default-theme-dark-label-color,
955
+ "chevron-background-color": $lumx-navigation-item-emphasis-selected-state-default-theme-dark-chevron-background-color,
956
+ "chevron-color": $lumx-navigation-item-emphasis-selected-state-default-theme-dark-chevron-color
957
+ )
958
+ ),
959
+ "state-hover": (
960
+ "border": (
961
+ "top": (
962
+ "width": $lumx-navigation-item-emphasis-selected-state-hover-border-top-width
994
963
  ),
995
- 'left': (
996
- 'width': $lumx-navigation-item-emphasis-selected-state-hover-border-left-width,
964
+ "right": (
965
+ "width": $lumx-navigation-item-emphasis-selected-state-hover-border-right-width
997
966
  ),
998
- ),
999
- 'theme-light': (
1000
- 'background-color':
1001
- $lumx-navigation-item-emphasis-selected-state-hover-theme-light-background-color,
1002
- 'border-color': $lumx-navigation-item-emphasis-selected-state-hover-theme-light-border-color,
1003
- 'icon-color': $lumx-navigation-item-emphasis-selected-state-hover-theme-light-icon-color,
1004
- 'label-color': $lumx-navigation-item-emphasis-selected-state-hover-theme-light-label-color,
1005
- 'chevron-background-color':
1006
- $lumx-navigation-item-emphasis-selected-state-hover-theme-light-chevron-background-color,
1007
- 'chevron-color': $lumx-navigation-item-emphasis-selected-state-hover-theme-light-chevron-color,
1008
- ),
1009
- 'theme-dark': (
1010
- 'background-color':
1011
- $lumx-navigation-item-emphasis-selected-state-hover-theme-dark-background-color,
1012
- 'border-color': $lumx-navigation-item-emphasis-selected-state-hover-theme-dark-border-color,
1013
- 'icon-color': $lumx-navigation-item-emphasis-selected-state-hover-theme-dark-icon-color,
1014
- 'label-color': $lumx-navigation-item-emphasis-selected-state-hover-theme-dark-label-color,
1015
- 'chevron-background-color':
1016
- $lumx-navigation-item-emphasis-selected-state-hover-theme-dark-chevron-background-color,
1017
- 'chevron-color': $lumx-navigation-item-emphasis-selected-state-hover-theme-dark-chevron-color,
1018
- ),
1019
- ),
1020
- 'state-active': (
1021
- 'border': (
1022
- 'top': (
1023
- 'width': $lumx-navigation-item-emphasis-selected-state-active-border-top-width,
967
+ "bottom": (
968
+ "width": $lumx-navigation-item-emphasis-selected-state-hover-border-bottom-width
1024
969
  ),
1025
- 'right': (
1026
- 'width': $lumx-navigation-item-emphasis-selected-state-active-border-right-width,
970
+ "left": (
971
+ "width": $lumx-navigation-item-emphasis-selected-state-hover-border-left-width
972
+ )
973
+ ),
974
+ "theme-light": (
975
+ "background-color": $lumx-navigation-item-emphasis-selected-state-hover-theme-light-background-color,
976
+ "border-color": $lumx-navigation-item-emphasis-selected-state-hover-theme-light-border-color,
977
+ "icon-color": $lumx-navigation-item-emphasis-selected-state-hover-theme-light-icon-color,
978
+ "label-color": $lumx-navigation-item-emphasis-selected-state-hover-theme-light-label-color,
979
+ "chevron-background-color": $lumx-navigation-item-emphasis-selected-state-hover-theme-light-chevron-background-color,
980
+ "chevron-color": $lumx-navigation-item-emphasis-selected-state-hover-theme-light-chevron-color
981
+ ),
982
+ "theme-dark": (
983
+ "background-color": $lumx-navigation-item-emphasis-selected-state-hover-theme-dark-background-color,
984
+ "border-color": $lumx-navigation-item-emphasis-selected-state-hover-theme-dark-border-color,
985
+ "icon-color": $lumx-navigation-item-emphasis-selected-state-hover-theme-dark-icon-color,
986
+ "label-color": $lumx-navigation-item-emphasis-selected-state-hover-theme-dark-label-color,
987
+ "chevron-background-color": $lumx-navigation-item-emphasis-selected-state-hover-theme-dark-chevron-background-color,
988
+ "chevron-color": $lumx-navigation-item-emphasis-selected-state-hover-theme-dark-chevron-color
989
+ )
990
+ ),
991
+ "state-active": (
992
+ "border": (
993
+ "top": (
994
+ "width": $lumx-navigation-item-emphasis-selected-state-active-border-top-width
1027
995
  ),
1028
- 'bottom': (
1029
- 'width': $lumx-navigation-item-emphasis-selected-state-active-border-bottom-width,
996
+ "right": (
997
+ "width": $lumx-navigation-item-emphasis-selected-state-active-border-right-width
1030
998
  ),
1031
- 'left': (
1032
- 'width': $lumx-navigation-item-emphasis-selected-state-active-border-left-width,
999
+ "bottom": (
1000
+ "width": $lumx-navigation-item-emphasis-selected-state-active-border-bottom-width
1033
1001
  ),
1034
- ),
1035
- 'theme-light': (
1036
- 'background-color':
1037
- $lumx-navigation-item-emphasis-selected-state-active-theme-light-background-color,
1038
- 'border-color': $lumx-navigation-item-emphasis-selected-state-active-theme-light-border-color,
1039
- 'icon-color': $lumx-navigation-item-emphasis-selected-state-active-theme-light-icon-color,
1040
- 'label-color': $lumx-navigation-item-emphasis-selected-state-active-theme-light-label-color,
1041
- 'chevron-background-color':
1042
- $lumx-navigation-item-emphasis-selected-state-active-theme-light-chevron-background-color,
1043
- 'chevron-color': $lumx-navigation-item-emphasis-selected-state-active-theme-light-chevron-color,
1044
- ),
1045
- 'theme-dark': (
1046
- 'background-color':
1047
- $lumx-navigation-item-emphasis-selected-state-active-theme-dark-background-color,
1048
- 'border-color': $lumx-navigation-item-emphasis-selected-state-active-theme-dark-border-color,
1049
- 'icon-color': $lumx-navigation-item-emphasis-selected-state-active-theme-dark-icon-color,
1050
- 'label-color': $lumx-navigation-item-emphasis-selected-state-active-theme-dark-label-color,
1051
- 'chevron-background-color':
1052
- $lumx-navigation-item-emphasis-selected-state-active-theme-dark-chevron-background-color,
1053
- 'chevron-color': $lumx-navigation-item-emphasis-selected-state-active-theme-dark-chevron-color,
1054
- ),
1055
- ),
1056
- ),
1057
- ),
1002
+ "left": (
1003
+ "width": $lumx-navigation-item-emphasis-selected-state-active-border-left-width
1004
+ )
1005
+ ),
1006
+ "theme-light": (
1007
+ "background-color": $lumx-navigation-item-emphasis-selected-state-active-theme-light-background-color,
1008
+ "border-color": $lumx-navigation-item-emphasis-selected-state-active-theme-light-border-color,
1009
+ "icon-color": $lumx-navigation-item-emphasis-selected-state-active-theme-light-icon-color,
1010
+ "label-color": $lumx-navigation-item-emphasis-selected-state-active-theme-light-label-color,
1011
+ "chevron-background-color": $lumx-navigation-item-emphasis-selected-state-active-theme-light-chevron-background-color,
1012
+ "chevron-color": $lumx-navigation-item-emphasis-selected-state-active-theme-light-chevron-color
1013
+ ),
1014
+ "theme-dark": (
1015
+ "background-color": $lumx-navigation-item-emphasis-selected-state-active-theme-dark-background-color,
1016
+ "border-color": $lumx-navigation-item-emphasis-selected-state-active-theme-dark-border-color,
1017
+ "icon-color": $lumx-navigation-item-emphasis-selected-state-active-theme-dark-icon-color,
1018
+ "label-color": $lumx-navigation-item-emphasis-selected-state-active-theme-dark-label-color,
1019
+ "chevron-background-color": $lumx-navigation-item-emphasis-selected-state-active-theme-dark-chevron-background-color,
1020
+ "chevron-color": $lumx-navigation-item-emphasis-selected-state-active-theme-dark-chevron-color
1021
+ )
1022
+ )
1023
+ )
1024
+ )
1058
1025
  ),
1059
- 'tabs': (
1060
- 'link': (
1061
- 'height': $lumx-tabs-link-height,
1062
- 'border-radius': $lumx-tabs-link-border-radius,
1063
- 'emphasis-low': (
1064
- 'state-default': (
1065
- 'border': (
1066
- 'top': (
1067
- 'width': $lumx-tabs-link-emphasis-low-state-default-border-top-width,
1026
+ "tabs": (
1027
+ "link": (
1028
+ "height": $lumx-tabs-link-height,
1029
+ "border-radius": $lumx-tabs-link-border-radius,
1030
+ "emphasis-low": (
1031
+ "state-default": (
1032
+ "border": (
1033
+ "top": (
1034
+ "width": $lumx-tabs-link-emphasis-low-state-default-border-top-width
1068
1035
  ),
1069
- 'right': (
1070
- 'width': $lumx-tabs-link-emphasis-low-state-default-border-right-width,
1036
+ "right": (
1037
+ "width": $lumx-tabs-link-emphasis-low-state-default-border-right-width
1071
1038
  ),
1072
- 'bottom': (
1073
- 'width': $lumx-tabs-link-emphasis-low-state-default-border-bottom-width,
1039
+ "bottom": (
1040
+ "width": $lumx-tabs-link-emphasis-low-state-default-border-bottom-width
1074
1041
  ),
1075
- 'left': (
1076
- 'width': $lumx-tabs-link-emphasis-low-state-default-border-left-width,
1042
+ "left": (
1043
+ "width": $lumx-tabs-link-emphasis-low-state-default-border-left-width
1044
+ )
1045
+ ),
1046
+ "theme-light": (
1047
+ "background-color": $lumx-tabs-link-emphasis-low-state-default-theme-light-background-color,
1048
+ "color": $lumx-tabs-link-emphasis-low-state-default-theme-light-color,
1049
+ "border-color": $lumx-tabs-link-emphasis-low-state-default-theme-light-border-color
1050
+ ),
1051
+ "theme-dark": (
1052
+ "background-color": $lumx-tabs-link-emphasis-low-state-default-theme-dark-background-color,
1053
+ "color": $lumx-tabs-link-emphasis-low-state-default-theme-dark-color,
1054
+ "border-color": $lumx-tabs-link-emphasis-low-state-default-theme-dark-border-color
1055
+ )
1056
+ ),
1057
+ "state-hover": (
1058
+ "border": (
1059
+ "top": (
1060
+ "width": $lumx-tabs-link-emphasis-low-state-hover-border-top-width
1077
1061
  ),
1078
- ),
1079
- 'theme-light': (
1080
- 'background-color': $lumx-tabs-link-emphasis-low-state-default-theme-light-background-color,
1081
- 'color': $lumx-tabs-link-emphasis-low-state-default-theme-light-color,
1082
- 'border-color': $lumx-tabs-link-emphasis-low-state-default-theme-light-border-color,
1083
- ),
1084
- 'theme-dark': (
1085
- 'background-color': $lumx-tabs-link-emphasis-low-state-default-theme-dark-background-color,
1086
- 'color': $lumx-tabs-link-emphasis-low-state-default-theme-dark-color,
1087
- 'border-color': $lumx-tabs-link-emphasis-low-state-default-theme-dark-border-color,
1088
- ),
1089
- ),
1090
- 'state-hover': (
1091
- 'border': (
1092
- 'top': (
1093
- 'width': $lumx-tabs-link-emphasis-low-state-hover-border-top-width,
1094
- ),
1095
- 'right': (
1096
- 'width': $lumx-tabs-link-emphasis-low-state-hover-border-right-width,
1097
- ),
1098
- 'bottom': (
1099
- 'width': $lumx-tabs-link-emphasis-low-state-hover-border-bottom-width,
1062
+ "right": (
1063
+ "width": $lumx-tabs-link-emphasis-low-state-hover-border-right-width
1100
1064
  ),
1101
- 'left': (
1102
- 'width': $lumx-tabs-link-emphasis-low-state-hover-border-left-width,
1103
- ),
1104
- ),
1105
- 'theme-light': (
1106
- 'background-color': $lumx-tabs-link-emphasis-low-state-hover-theme-light-background-color,
1107
- 'color': $lumx-tabs-link-emphasis-low-state-hover-theme-light-color,
1108
- 'border-color': $lumx-tabs-link-emphasis-low-state-hover-theme-light-border-color,
1109
- ),
1110
- 'theme-dark': (
1111
- 'background-color': $lumx-tabs-link-emphasis-low-state-hover-theme-dark-background-color,
1112
- 'color': $lumx-tabs-link-emphasis-low-state-hover-theme-dark-color,
1113
- 'border-color': $lumx-tabs-link-emphasis-low-state-hover-theme-dark-border-color,
1114
- ),
1115
- ),
1116
- 'state-active': (
1117
- 'border': (
1118
- 'top': (
1119
- 'width': $lumx-tabs-link-emphasis-low-state-active-border-top-width,
1065
+ "bottom": (
1066
+ "width": $lumx-tabs-link-emphasis-low-state-hover-border-bottom-width
1120
1067
  ),
1121
- 'right': (
1122
- 'width': $lumx-tabs-link-emphasis-low-state-active-border-right-width,
1068
+ "left": (
1069
+ "width": $lumx-tabs-link-emphasis-low-state-hover-border-left-width
1070
+ )
1071
+ ),
1072
+ "theme-light": (
1073
+ "background-color": $lumx-tabs-link-emphasis-low-state-hover-theme-light-background-color,
1074
+ "color": $lumx-tabs-link-emphasis-low-state-hover-theme-light-color,
1075
+ "border-color": $lumx-tabs-link-emphasis-low-state-hover-theme-light-border-color
1076
+ ),
1077
+ "theme-dark": (
1078
+ "background-color": $lumx-tabs-link-emphasis-low-state-hover-theme-dark-background-color,
1079
+ "color": $lumx-tabs-link-emphasis-low-state-hover-theme-dark-color,
1080
+ "border-color": $lumx-tabs-link-emphasis-low-state-hover-theme-dark-border-color
1081
+ )
1082
+ ),
1083
+ "state-active": (
1084
+ "border": (
1085
+ "top": (
1086
+ "width": $lumx-tabs-link-emphasis-low-state-active-border-top-width
1123
1087
  ),
1124
- 'bottom': (
1125
- 'width': $lumx-tabs-link-emphasis-low-state-active-border-bottom-width,
1088
+ "right": (
1089
+ "width": $lumx-tabs-link-emphasis-low-state-active-border-right-width
1126
1090
  ),
1127
- 'left': (
1128
- 'width': $lumx-tabs-link-emphasis-low-state-active-border-left-width,
1091
+ "bottom": (
1092
+ "width": $lumx-tabs-link-emphasis-low-state-active-border-bottom-width
1129
1093
  ),
1130
- ),
1131
- 'theme-light': (
1132
- 'background-color': $lumx-tabs-link-emphasis-low-state-active-theme-light-background-color,
1133
- 'color': $lumx-tabs-link-emphasis-low-state-active-theme-light-color,
1134
- 'border-color': $lumx-tabs-link-emphasis-low-state-active-theme-light-border-color,
1135
- ),
1136
- 'theme-dark': (
1137
- 'background-color': $lumx-tabs-link-emphasis-low-state-active-theme-dark-background-color,
1138
- 'color': $lumx-tabs-link-emphasis-low-state-active-theme-dark-color,
1139
- 'border-color': $lumx-tabs-link-emphasis-low-state-active-theme-dark-border-color,
1140
- ),
1141
- ),
1094
+ "left": (
1095
+ "width": $lumx-tabs-link-emphasis-low-state-active-border-left-width
1096
+ )
1097
+ ),
1098
+ "theme-light": (
1099
+ "background-color": $lumx-tabs-link-emphasis-low-state-active-theme-light-background-color,
1100
+ "color": $lumx-tabs-link-emphasis-low-state-active-theme-light-color,
1101
+ "border-color": $lumx-tabs-link-emphasis-low-state-active-theme-light-border-color
1102
+ ),
1103
+ "theme-dark": (
1104
+ "background-color": $lumx-tabs-link-emphasis-low-state-active-theme-dark-background-color,
1105
+ "color": $lumx-tabs-link-emphasis-low-state-active-theme-dark-color,
1106
+ "border-color": $lumx-tabs-link-emphasis-low-state-active-theme-dark-border-color
1107
+ )
1108
+ )
1142
1109
  ),
1143
- 'emphasis-selected': (
1144
- 'state-default': (
1145
- 'border': (
1146
- 'top': (
1147
- 'width': $lumx-tabs-link-emphasis-selected-state-default-border-top-width,
1148
- ),
1149
- 'right': (
1150
- 'width': $lumx-tabs-link-emphasis-selected-state-default-border-right-width,
1151
- ),
1152
- 'bottom': (
1153
- 'width': $lumx-tabs-link-emphasis-selected-state-default-border-bottom-width,
1110
+ "emphasis-selected": (
1111
+ "state-default": (
1112
+ "border": (
1113
+ "top": (
1114
+ "width": $lumx-tabs-link-emphasis-selected-state-default-border-top-width
1154
1115
  ),
1155
- 'left': (
1156
- 'width': $lumx-tabs-link-emphasis-selected-state-default-border-left-width,
1157
- ),
1158
- ),
1159
- 'theme-light': (
1160
- 'background-color': $lumx-tabs-link-emphasis-selected-state-default-theme-light-background-color,
1161
- 'color': $lumx-tabs-link-emphasis-selected-state-default-theme-light-color,
1162
- 'border-color': $lumx-tabs-link-emphasis-selected-state-default-theme-light-border-color,
1163
- ),
1164
- 'theme-dark': (
1165
- 'background-color': $lumx-tabs-link-emphasis-selected-state-default-theme-dark-background-color,
1166
- 'color': $lumx-tabs-link-emphasis-selected-state-default-theme-dark-color,
1167
- 'border-color': $lumx-tabs-link-emphasis-selected-state-default-theme-dark-border-color,
1168
- ),
1169
- ),
1170
- 'state-hover': (
1171
- 'border': (
1172
- 'top': (
1173
- 'width': $lumx-tabs-link-emphasis-selected-state-hover-border-top-width,
1116
+ "right": (
1117
+ "width": $lumx-tabs-link-emphasis-selected-state-default-border-right-width
1174
1118
  ),
1175
- 'right': (
1176
- 'width': $lumx-tabs-link-emphasis-selected-state-hover-border-right-width,
1119
+ "bottom": (
1120
+ "width": $lumx-tabs-link-emphasis-selected-state-default-border-bottom-width
1177
1121
  ),
1178
- 'bottom': (
1179
- 'width': $lumx-tabs-link-emphasis-selected-state-hover-border-bottom-width,
1122
+ "left": (
1123
+ "width": $lumx-tabs-link-emphasis-selected-state-default-border-left-width
1124
+ )
1125
+ ),
1126
+ "theme-light": (
1127
+ "background-color": $lumx-tabs-link-emphasis-selected-state-default-theme-light-background-color,
1128
+ "color": $lumx-tabs-link-emphasis-selected-state-default-theme-light-color,
1129
+ "border-color": $lumx-tabs-link-emphasis-selected-state-default-theme-light-border-color
1130
+ ),
1131
+ "theme-dark": (
1132
+ "background-color": $lumx-tabs-link-emphasis-selected-state-default-theme-dark-background-color,
1133
+ "color": $lumx-tabs-link-emphasis-selected-state-default-theme-dark-color,
1134
+ "border-color": $lumx-tabs-link-emphasis-selected-state-default-theme-dark-border-color
1135
+ )
1136
+ ),
1137
+ "state-hover": (
1138
+ "border": (
1139
+ "top": (
1140
+ "width": $lumx-tabs-link-emphasis-selected-state-hover-border-top-width
1180
1141
  ),
1181
- 'left': (
1182
- 'width': $lumx-tabs-link-emphasis-selected-state-hover-border-left-width,
1142
+ "right": (
1143
+ "width": $lumx-tabs-link-emphasis-selected-state-hover-border-right-width
1183
1144
  ),
1184
- ),
1185
- 'theme-light': (
1186
- 'background-color': $lumx-tabs-link-emphasis-selected-state-hover-theme-light-background-color,
1187
- 'color': $lumx-tabs-link-emphasis-selected-state-hover-theme-light-color,
1188
- 'border-color': $lumx-tabs-link-emphasis-selected-state-hover-theme-light-border-color,
1189
- ),
1190
- 'theme-dark': (
1191
- 'background-color': $lumx-tabs-link-emphasis-selected-state-hover-theme-dark-background-color,
1192
- 'color': $lumx-tabs-link-emphasis-selected-state-hover-theme-dark-color,
1193
- 'border-color': $lumx-tabs-link-emphasis-selected-state-hover-theme-dark-border-color,
1194
- ),
1195
- ),
1196
- 'state-active': (
1197
- 'border': (
1198
- 'top': (
1199
- 'width': $lumx-tabs-link-emphasis-selected-state-active-border-top-width,
1145
+ "bottom": (
1146
+ "width": $lumx-tabs-link-emphasis-selected-state-hover-border-bottom-width
1200
1147
  ),
1201
- 'right': (
1202
- 'width': $lumx-tabs-link-emphasis-selected-state-active-border-right-width,
1148
+ "left": (
1149
+ "width": $lumx-tabs-link-emphasis-selected-state-hover-border-left-width
1150
+ )
1151
+ ),
1152
+ "theme-light": (
1153
+ "background-color": $lumx-tabs-link-emphasis-selected-state-hover-theme-light-background-color,
1154
+ "color": $lumx-tabs-link-emphasis-selected-state-hover-theme-light-color,
1155
+ "border-color": $lumx-tabs-link-emphasis-selected-state-hover-theme-light-border-color
1156
+ ),
1157
+ "theme-dark": (
1158
+ "background-color": $lumx-tabs-link-emphasis-selected-state-hover-theme-dark-background-color,
1159
+ "color": $lumx-tabs-link-emphasis-selected-state-hover-theme-dark-color,
1160
+ "border-color": $lumx-tabs-link-emphasis-selected-state-hover-theme-dark-border-color
1161
+ )
1162
+ ),
1163
+ "state-active": (
1164
+ "border": (
1165
+ "top": (
1166
+ "width": $lumx-tabs-link-emphasis-selected-state-active-border-top-width
1203
1167
  ),
1204
- 'bottom': (
1205
- 'width': $lumx-tabs-link-emphasis-selected-state-active-border-bottom-width,
1168
+ "right": (
1169
+ "width": $lumx-tabs-link-emphasis-selected-state-active-border-right-width
1206
1170
  ),
1207
- 'left': (
1208
- 'width': $lumx-tabs-link-emphasis-selected-state-active-border-left-width,
1171
+ "bottom": (
1172
+ "width": $lumx-tabs-link-emphasis-selected-state-active-border-bottom-width
1209
1173
  ),
1210
- ),
1211
- 'theme-light': (
1212
- 'background-color': $lumx-tabs-link-emphasis-selected-state-active-theme-light-background-color,
1213
- 'color': $lumx-tabs-link-emphasis-selected-state-active-theme-light-color,
1214
- 'border-color': $lumx-tabs-link-emphasis-selected-state-active-theme-light-border-color,
1215
- ),
1216
- 'theme-dark': (
1217
- 'background-color': $lumx-tabs-link-emphasis-selected-state-active-theme-dark-background-color,
1218
- 'color': $lumx-tabs-link-emphasis-selected-state-active-theme-dark-color,
1219
- 'border-color': $lumx-tabs-link-emphasis-selected-state-active-theme-dark-border-color,
1220
- ),
1221
- ),
1222
- ),
1223
- ),
1174
+ "left": (
1175
+ "width": $lumx-tabs-link-emphasis-selected-state-active-border-left-width
1176
+ )
1177
+ ),
1178
+ "theme-light": (
1179
+ "background-color": $lumx-tabs-link-emphasis-selected-state-active-theme-light-background-color,
1180
+ "color": $lumx-tabs-link-emphasis-selected-state-active-theme-light-color,
1181
+ "border-color": $lumx-tabs-link-emphasis-selected-state-active-theme-light-border-color
1182
+ ),
1183
+ "theme-dark": (
1184
+ "background-color": $lumx-tabs-link-emphasis-selected-state-active-theme-dark-background-color,
1185
+ "color": $lumx-tabs-link-emphasis-selected-state-active-theme-dark-color,
1186
+ "border-color": $lumx-tabs-link-emphasis-selected-state-active-theme-dark-border-color
1187
+ )
1188
+ )
1189
+ )
1190
+ )
1224
1191
  ),
1225
- 'text-field': (
1226
- 'input': (
1227
- 'min-height': $lumx-text-field-input-min-height,
1228
- 'padding': (
1229
- 'horizontal': $lumx-text-field-input-padding-horizontal,
1192
+ "text-field": (
1193
+ "input": (
1194
+ "min-height": $lumx-text-field-input-min-height,
1195
+ "padding": (
1196
+ "horizontal": $lumx-text-field-input-padding-horizontal
1230
1197
  ),
1231
- 'border-radius': $lumx-text-field-input-border-radius,
1198
+ "border-radius": $lumx-text-field-input-border-radius
1232
1199
  ),
1233
- 'state-default': (
1234
- 'input': (
1235
- 'border': (
1236
- 'top': (
1237
- 'width': $lumx-text-field-state-default-input-border-top-width,
1238
- ),
1239
- 'right': (
1240
- 'width': $lumx-text-field-state-default-input-border-right-width,
1241
- ),
1242
- 'bottom': (
1243
- 'width': $lumx-text-field-state-default-input-border-bottom-width,
1244
- ),
1245
- 'left': (
1246
- 'width': $lumx-text-field-state-default-input-border-left-width,
1247
- ),
1248
- ),
1200
+ "state-default": (
1201
+ "input": (
1202
+ "border": (
1203
+ "top": (
1204
+ "width": $lumx-text-field-state-default-input-border-top-width
1205
+ ),
1206
+ "right": (
1207
+ "width": $lumx-text-field-state-default-input-border-right-width
1208
+ ),
1209
+ "bottom": (
1210
+ "width": $lumx-text-field-state-default-input-border-bottom-width
1211
+ ),
1212
+ "left": (
1213
+ "width": $lumx-text-field-state-default-input-border-left-width
1214
+ )
1215
+ )
1249
1216
  ),
1250
- 'theme-light': (
1251
- 'header': (
1252
- 'label': (
1253
- 'color': $lumx-text-field-state-default-theme-light-header-label-color,
1254
- ),
1255
- ),
1256
- 'input': (
1257
- 'background-color': $lumx-text-field-state-default-theme-light-input-background-color,
1258
- 'border-color': $lumx-text-field-state-default-theme-light-input-border-color,
1259
- 'content': (
1260
- 'color': $lumx-text-field-state-default-theme-light-input-content-color,
1261
- ),
1262
- 'placeholder': (
1263
- 'color': $lumx-text-field-state-default-theme-light-input-placeholder-color,
1264
- ),
1265
- ),
1266
- ),
1267
- 'theme-dark': (
1268
- 'header': (
1269
- 'label': (
1270
- 'color': $lumx-text-field-state-default-theme-dark-header-label-color,
1271
- ),
1272
- ),
1273
- 'input': (
1274
- 'background-color': $lumx-text-field-state-default-theme-dark-input-background-color,
1275
- 'border-color': $lumx-text-field-state-default-theme-dark-input-border-color,
1276
- 'content': (
1277
- 'color': $lumx-text-field-state-default-theme-dark-input-content-color,
1278
- ),
1279
- 'placeholder': (
1280
- 'color': $lumx-text-field-state-default-theme-dark-input-placeholder-color,
1281
- ),
1282
- ),
1217
+ "theme-light": (
1218
+ "header": (
1219
+ "label": (
1220
+ "color": $lumx-text-field-state-default-theme-light-header-label-color
1221
+ )
1222
+ ),
1223
+ "input": (
1224
+ "background-color": $lumx-text-field-state-default-theme-light-input-background-color,
1225
+ "border-color": $lumx-text-field-state-default-theme-light-input-border-color,
1226
+ "content": (
1227
+ "color": $lumx-text-field-state-default-theme-light-input-content-color
1228
+ ),
1229
+ "placeholder": (
1230
+ "color": $lumx-text-field-state-default-theme-light-input-placeholder-color
1231
+ )
1232
+ )
1283
1233
  ),
1234
+ "theme-dark": (
1235
+ "header": (
1236
+ "label": (
1237
+ "color": $lumx-text-field-state-default-theme-dark-header-label-color
1238
+ )
1239
+ ),
1240
+ "input": (
1241
+ "background-color": $lumx-text-field-state-default-theme-dark-input-background-color,
1242
+ "border-color": $lumx-text-field-state-default-theme-dark-input-border-color,
1243
+ "content": (
1244
+ "color": $lumx-text-field-state-default-theme-dark-input-content-color
1245
+ ),
1246
+ "placeholder": (
1247
+ "color": $lumx-text-field-state-default-theme-dark-input-placeholder-color
1248
+ )
1249
+ )
1250
+ )
1284
1251
  ),
1285
- 'state-hover': (
1286
- 'input': (
1287
- 'border': (
1288
- 'top': (
1289
- 'width': $lumx-text-field-state-hover-input-border-top-width,
1290
- ),
1291
- 'right': (
1292
- 'width': $lumx-text-field-state-hover-input-border-right-width,
1293
- ),
1294
- 'bottom': (
1295
- 'width': $lumx-text-field-state-hover-input-border-bottom-width,
1296
- ),
1297
- 'left': (
1298
- 'width': $lumx-text-field-state-hover-input-border-left-width,
1299
- ),
1300
- ),
1301
- ),
1302
- 'theme-light': (
1303
- 'header': (
1304
- 'label': (
1305
- 'color': $lumx-text-field-state-hover-theme-light-header-label-color,
1306
- ),
1307
- ),
1308
- 'input': (
1309
- 'background-color': $lumx-text-field-state-hover-theme-light-input-background-color,
1310
- 'border-color': $lumx-text-field-state-hover-theme-light-input-border-color,
1311
- 'content': (
1312
- 'color': $lumx-text-field-state-hover-theme-light-input-content-color,
1313
- ),
1314
- 'placeholder': (
1315
- 'color': $lumx-text-field-state-hover-theme-light-input-placeholder-color,
1316
- ),
1317
- ),
1252
+ "state-hover": (
1253
+ "input": (
1254
+ "border": (
1255
+ "top": (
1256
+ "width": $lumx-text-field-state-hover-input-border-top-width
1257
+ ),
1258
+ "right": (
1259
+ "width": $lumx-text-field-state-hover-input-border-right-width
1260
+ ),
1261
+ "bottom": (
1262
+ "width": $lumx-text-field-state-hover-input-border-bottom-width
1263
+ ),
1264
+ "left": (
1265
+ "width": $lumx-text-field-state-hover-input-border-left-width
1266
+ )
1267
+ )
1318
1268
  ),
1319
- 'theme-dark': (
1320
- 'header': (
1321
- 'label': (
1322
- 'color': $lumx-text-field-state-hover-theme-dark-header-label-color,
1323
- ),
1324
- ),
1325
- 'input': (
1326
- 'background-color': $lumx-text-field-state-hover-theme-dark-input-background-color,
1327
- 'border-color': $lumx-text-field-state-hover-theme-dark-input-border-color,
1328
- 'content': (
1329
- 'color': $lumx-text-field-state-hover-theme-dark-input-content-color,
1330
- ),
1331
- 'placeholder': (
1332
- 'color': $lumx-text-field-state-hover-theme-dark-input-placeholder-color,
1333
- ),
1334
- ),
1269
+ "theme-light": (
1270
+ "header": (
1271
+ "label": (
1272
+ "color": $lumx-text-field-state-hover-theme-light-header-label-color
1273
+ )
1274
+ ),
1275
+ "input": (
1276
+ "background-color": $lumx-text-field-state-hover-theme-light-input-background-color,
1277
+ "border-color": $lumx-text-field-state-hover-theme-light-input-border-color,
1278
+ "content": (
1279
+ "color": $lumx-text-field-state-hover-theme-light-input-content-color
1280
+ ),
1281
+ "placeholder": (
1282
+ "color": $lumx-text-field-state-hover-theme-light-input-placeholder-color
1283
+ )
1284
+ )
1335
1285
  ),
1286
+ "theme-dark": (
1287
+ "header": (
1288
+ "label": (
1289
+ "color": $lumx-text-field-state-hover-theme-dark-header-label-color
1290
+ )
1291
+ ),
1292
+ "input": (
1293
+ "background-color": $lumx-text-field-state-hover-theme-dark-input-background-color,
1294
+ "border-color": $lumx-text-field-state-hover-theme-dark-input-border-color,
1295
+ "content": (
1296
+ "color": $lumx-text-field-state-hover-theme-dark-input-content-color
1297
+ ),
1298
+ "placeholder": (
1299
+ "color": $lumx-text-field-state-hover-theme-dark-input-placeholder-color
1300
+ )
1301
+ )
1302
+ )
1336
1303
  ),
1337
- 'state-focus': (
1338
- 'input': (
1339
- 'border': (
1340
- 'top': (
1341
- 'width': $lumx-text-field-state-focus-input-border-top-width,
1342
- ),
1343
- 'right': (
1344
- 'width': $lumx-text-field-state-focus-input-border-right-width,
1345
- ),
1346
- 'bottom': (
1347
- 'width': $lumx-text-field-state-focus-input-border-bottom-width,
1348
- ),
1349
- 'left': (
1350
- 'width': $lumx-text-field-state-focus-input-border-left-width,
1351
- ),
1352
- ),
1304
+ "state-focus": (
1305
+ "input": (
1306
+ "border": (
1307
+ "top": (
1308
+ "width": $lumx-text-field-state-focus-input-border-top-width
1309
+ ),
1310
+ "right": (
1311
+ "width": $lumx-text-field-state-focus-input-border-right-width
1312
+ ),
1313
+ "bottom": (
1314
+ "width": $lumx-text-field-state-focus-input-border-bottom-width
1315
+ ),
1316
+ "left": (
1317
+ "width": $lumx-text-field-state-focus-input-border-left-width
1318
+ )
1319
+ )
1353
1320
  ),
1354
- 'theme-light': (
1355
- 'header': (
1356
- 'label': (
1357
- 'color': $lumx-text-field-state-focus-theme-light-header-label-color,
1358
- ),
1359
- ),
1360
- 'input': (
1361
- 'background-color': $lumx-text-field-state-focus-theme-light-input-background-color,
1362
- 'border-color': $lumx-text-field-state-focus-theme-light-input-border-color,
1363
- 'content': (
1364
- 'color': $lumx-text-field-state-focus-theme-light-input-content-color,
1365
- ),
1366
- 'placeholder': (
1367
- 'color': $lumx-text-field-state-focus-theme-light-input-placeholder-color,
1368
- ),
1369
- ),
1370
- ),
1371
- 'theme-dark': (
1372
- 'header': (
1373
- 'label': (
1374
- 'color': $lumx-text-field-state-focus-theme-dark-header-label-color,
1375
- ),
1376
- ),
1377
- 'input': (
1378
- 'background-color': $lumx-text-field-state-focus-theme-dark-input-background-color,
1379
- 'border-color': $lumx-text-field-state-focus-theme-dark-input-border-color,
1380
- 'content': (
1381
- 'color': $lumx-text-field-state-focus-theme-dark-input-content-color,
1382
- ),
1383
- 'placeholder': (
1384
- 'color': $lumx-text-field-state-focus-theme-dark-input-placeholder-color,
1385
- ),
1386
- ),
1321
+ "theme-light": (
1322
+ "header": (
1323
+ "label": (
1324
+ "color": $lumx-text-field-state-focus-theme-light-header-label-color
1325
+ )
1326
+ ),
1327
+ "input": (
1328
+ "background-color": $lumx-text-field-state-focus-theme-light-input-background-color,
1329
+ "border-color": $lumx-text-field-state-focus-theme-light-input-border-color,
1330
+ "content": (
1331
+ "color": $lumx-text-field-state-focus-theme-light-input-content-color
1332
+ ),
1333
+ "placeholder": (
1334
+ "color": $lumx-text-field-state-focus-theme-light-input-placeholder-color
1335
+ )
1336
+ )
1387
1337
  ),
1388
- ),
1338
+ "theme-dark": (
1339
+ "header": (
1340
+ "label": (
1341
+ "color": $lumx-text-field-state-focus-theme-dark-header-label-color
1342
+ )
1343
+ ),
1344
+ "input": (
1345
+ "background-color": $lumx-text-field-state-focus-theme-dark-input-background-color,
1346
+ "border-color": $lumx-text-field-state-focus-theme-dark-input-border-color,
1347
+ "content": (
1348
+ "color": $lumx-text-field-state-focus-theme-dark-input-content-color
1349
+ ),
1350
+ "placeholder": (
1351
+ "color": $lumx-text-field-state-focus-theme-dark-input-placeholder-color
1352
+ )
1353
+ )
1354
+ )
1355
+ )
1389
1356
  ),
1390
- 'border-radius': $lumx-border-radius,
1391
- 'color': (
1392
- 'dark': (
1393
- 'N': $lumx-color-dark-N,
1394
- 'L1': $lumx-color-dark-L1,
1395
- 'L2': $lumx-color-dark-L2,
1396
- 'L3': $lumx-color-dark-L3,
1397
- 'L4': $lumx-color-dark-L4,
1398
- 'L5': $lumx-color-dark-L5,
1399
- 'L6': $lumx-color-dark-L6,
1400
- ),
1401
- 'light': (
1402
- 'N': $lumx-color-light-N,
1403
- 'L1': $lumx-color-light-L1,
1404
- 'L2': $lumx-color-light-L2,
1405
- 'L3': $lumx-color-light-L3,
1406
- 'L4': $lumx-color-light-L4,
1407
- 'L5': $lumx-color-light-L5,
1408
- 'L6': $lumx-color-light-L6,
1357
+ "border-radius": $lumx-border-radius,
1358
+ "color": (
1359
+ "dark": (
1360
+ "N": $lumx-color-dark-N,
1361
+ "L1": $lumx-color-dark-L1,
1362
+ "L2": $lumx-color-dark-L2,
1363
+ "L3": $lumx-color-dark-L3,
1364
+ "L4": $lumx-color-dark-L4,
1365
+ "L5": $lumx-color-dark-L5,
1366
+ "L6": $lumx-color-dark-L6
1409
1367
  ),
1410
- 'blue': (
1411
- 'D2': $lumx-color-blue-D2,
1412
- 'D1': $lumx-color-blue-D1,
1413
- 'N': $lumx-color-blue-N,
1414
- 'L1': $lumx-color-blue-L1,
1415
- 'L2': $lumx-color-blue-L2,
1416
- 'L3': $lumx-color-blue-L3,
1417
- 'L4': $lumx-color-blue-L4,
1418
- 'L5': $lumx-color-blue-L5,
1419
- 'L6': $lumx-color-blue-L6,
1368
+ "light": (
1369
+ "N": $lumx-color-light-N,
1370
+ "L1": $lumx-color-light-L1,
1371
+ "L2": $lumx-color-light-L2,
1372
+ "L3": $lumx-color-light-L3,
1373
+ "L4": $lumx-color-light-L4,
1374
+ "L5": $lumx-color-light-L5,
1375
+ "L6": $lumx-color-light-L6
1420
1376
  ),
1421
- 'green': (
1422
- 'D2': $lumx-color-green-D2,
1423
- 'D1': $lumx-color-green-D1,
1424
- 'N': $lumx-color-green-N,
1425
- 'L1': $lumx-color-green-L1,
1426
- 'L2': $lumx-color-green-L2,
1427
- 'L3': $lumx-color-green-L3,
1428
- 'L4': $lumx-color-green-L4,
1429
- 'L5': $lumx-color-green-L5,
1430
- 'L6': $lumx-color-green-L6,
1377
+ "blue": (
1378
+ "D2": $lumx-color-blue-D2,
1379
+ "D1": $lumx-color-blue-D1,
1380
+ "N": $lumx-color-blue-N,
1381
+ "L1": $lumx-color-blue-L1,
1382
+ "L2": $lumx-color-blue-L2,
1383
+ "L3": $lumx-color-blue-L3,
1384
+ "L4": $lumx-color-blue-L4,
1385
+ "L5": $lumx-color-blue-L5,
1386
+ "L6": $lumx-color-blue-L6
1431
1387
  ),
1432
- 'yellow': (
1433
- 'D2': $lumx-color-yellow-D2,
1434
- 'D1': $lumx-color-yellow-D1,
1435
- 'N': $lumx-color-yellow-N,
1436
- 'L1': $lumx-color-yellow-L1,
1437
- 'L2': $lumx-color-yellow-L2,
1438
- 'L3': $lumx-color-yellow-L3,
1439
- 'L4': $lumx-color-yellow-L4,
1440
- 'L5': $lumx-color-yellow-L5,
1441
- 'L6': $lumx-color-yellow-L6,
1388
+ "green": (
1389
+ "D2": $lumx-color-green-D2,
1390
+ "D1": $lumx-color-green-D1,
1391
+ "N": $lumx-color-green-N,
1392
+ "L1": $lumx-color-green-L1,
1393
+ "L2": $lumx-color-green-L2,
1394
+ "L3": $lumx-color-green-L3,
1395
+ "L4": $lumx-color-green-L4,
1396
+ "L5": $lumx-color-green-L5,
1397
+ "L6": $lumx-color-green-L6
1442
1398
  ),
1443
- 'red': (
1444
- 'D2': $lumx-color-red-D2,
1445
- 'D1': $lumx-color-red-D1,
1446
- 'N': $lumx-color-red-N,
1447
- 'L1': $lumx-color-red-L1,
1448
- 'L2': $lumx-color-red-L2,
1449
- 'L3': $lumx-color-red-L3,
1450
- 'L4': $lumx-color-red-L4,
1451
- 'L5': $lumx-color-red-L5,
1452
- 'L6': $lumx-color-red-L6,
1399
+ "yellow": (
1400
+ "D2": $lumx-color-yellow-D2,
1401
+ "D1": $lumx-color-yellow-D1,
1402
+ "N": $lumx-color-yellow-N,
1403
+ "L1": $lumx-color-yellow-L1,
1404
+ "L2": $lumx-color-yellow-L2,
1405
+ "L3": $lumx-color-yellow-L3,
1406
+ "L4": $lumx-color-yellow-L4,
1407
+ "L5": $lumx-color-yellow-L5,
1408
+ "L6": $lumx-color-yellow-L6
1453
1409
  ),
1454
- 'grey': (
1455
- 'N': $lumx-color-grey-N,
1456
- 'L1': $lumx-color-grey-L1,
1457
- 'L2': $lumx-color-grey-L2,
1458
- 'L3': $lumx-color-grey-L3,
1459
- 'L4': $lumx-color-grey-L4,
1460
- 'L5': $lumx-color-grey-L5,
1461
- 'L6': $lumx-color-grey-L6,
1410
+ "red": (
1411
+ "D2": $lumx-color-red-D2,
1412
+ "D1": $lumx-color-red-D1,
1413
+ "N": $lumx-color-red-N,
1414
+ "L1": $lumx-color-red-L1,
1415
+ "L2": $lumx-color-red-L2,
1416
+ "L3": $lumx-color-red-L3,
1417
+ "L4": $lumx-color-red-L4,
1418
+ "L5": $lumx-color-red-L5,
1419
+ "L6": $lumx-color-red-L6
1462
1420
  ),
1463
- 'primary': (
1464
- 'D2': $lumx-color-primary-D2,
1465
- 'D1': $lumx-color-primary-D1,
1466
- 'N': $lumx-color-primary-N,
1467
- 'L1': $lumx-color-primary-L1,
1468
- 'L2': $lumx-color-primary-L2,
1469
- 'L3': $lumx-color-primary-L3,
1470
- 'L4': $lumx-color-primary-L4,
1471
- 'L5': $lumx-color-primary-L5,
1472
- 'L6': $lumx-color-primary-L6,
1421
+ "grey": (
1422
+ "N": $lumx-color-grey-N,
1423
+ "L1": $lumx-color-grey-L1,
1424
+ "L2": $lumx-color-grey-L2,
1425
+ "L3": $lumx-color-grey-L3,
1426
+ "L4": $lumx-color-grey-L4,
1427
+ "L5": $lumx-color-grey-L5,
1428
+ "L6": $lumx-color-grey-L6
1473
1429
  ),
1474
- 'secondary': (
1475
- 'D2': $lumx-color-secondary-D2,
1476
- 'D1': $lumx-color-secondary-D1,
1477
- 'N': $lumx-color-secondary-N,
1478
- 'L1': $lumx-color-secondary-L1,
1479
- 'L2': $lumx-color-secondary-L2,
1480
- 'L3': $lumx-color-secondary-L3,
1481
- 'L4': $lumx-color-secondary-L4,
1482
- 'L5': $lumx-color-secondary-L5,
1483
- 'L6': $lumx-color-secondary-L6,
1430
+ "primary": (
1431
+ "D2": $lumx-color-primary-D2,
1432
+ "D1": $lumx-color-primary-D1,
1433
+ "N": $lumx-color-primary-N,
1434
+ "L1": $lumx-color-primary-L1,
1435
+ "L2": $lumx-color-primary-L2,
1436
+ "L3": $lumx-color-primary-L3,
1437
+ "L4": $lumx-color-primary-L4,
1438
+ "L5": $lumx-color-primary-L5,
1439
+ "L6": $lumx-color-primary-L6
1484
1440
  ),
1485
- 'accent': (
1486
- 'D2': $lumx-color-accent-D2,
1487
- 'D1': $lumx-color-accent-D1,
1488
- 'N': $lumx-color-accent-N,
1489
- 'L1': $lumx-color-accent-L1,
1490
- 'L2': $lumx-color-accent-L2,
1491
- 'L3': $lumx-color-accent-L3,
1492
- 'L4': $lumx-color-accent-L4,
1493
- 'L5': $lumx-color-accent-L5,
1494
- 'L6': $lumx-color-accent-L6,
1441
+ "secondary": (
1442
+ "D2": $lumx-color-secondary-D2,
1443
+ "D1": $lumx-color-secondary-D1,
1444
+ "N": $lumx-color-secondary-N,
1445
+ "L1": $lumx-color-secondary-L1,
1446
+ "L2": $lumx-color-secondary-L2,
1447
+ "L3": $lumx-color-secondary-L3,
1448
+ "L4": $lumx-color-secondary-L4,
1449
+ "L5": $lumx-color-secondary-L5,
1450
+ "L6": $lumx-color-secondary-L6
1495
1451
  ),
1496
- 'black': (
1497
- 'N': $lumx-color-black-N,
1498
- 'L1': $lumx-color-black-L1,
1499
- 'L2': $lumx-color-black-L2,
1500
- 'L3': $lumx-color-black-L3,
1501
- 'L4': $lumx-color-black-L4,
1502
- 'L5': $lumx-color-black-L5,
1503
- 'L6': $lumx-color-black-L6,
1452
+ "accent": (
1453
+ "D2": $lumx-color-accent-D2,
1454
+ "D1": $lumx-color-accent-D1,
1455
+ "N": $lumx-color-accent-N,
1456
+ "L1": $lumx-color-accent-L1,
1457
+ "L2": $lumx-color-accent-L2,
1458
+ "L3": $lumx-color-accent-L3,
1459
+ "L4": $lumx-color-accent-L4,
1460
+ "L5": $lumx-color-accent-L5,
1461
+ "L6": $lumx-color-accent-L6
1504
1462
  ),
1505
- 'white': (
1506
- 'N': $lumx-color-white-N,
1507
- 'L1': $lumx-color-white-L1,
1508
- 'L2': $lumx-color-white-L2,
1509
- 'L3': $lumx-color-white-L3,
1510
- 'L4': $lumx-color-white-L4,
1511
- 'L5': $lumx-color-white-L5,
1512
- 'L6': $lumx-color-white-L6,
1463
+ "black": (
1464
+ "N": $lumx-color-black-N,
1465
+ "L1": $lumx-color-black-L1,
1466
+ "L2": $lumx-color-black-L2,
1467
+ "L3": $lumx-color-black-L3,
1468
+ "L4": $lumx-color-black-L4,
1469
+ "L5": $lumx-color-black-L5,
1470
+ "L6": $lumx-color-black-L6
1513
1471
  ),
1514
- 'orange': (
1515
- 'D2': $lumx-color-orange-D2,
1516
- 'D1': $lumx-color-orange-D1,
1517
- 'N': $lumx-color-orange-N,
1518
- 'L1': $lumx-color-orange-L1,
1519
- 'L2': $lumx-color-orange-L2,
1520
- 'L3': $lumx-color-orange-L3,
1521
- 'L4': $lumx-color-orange-L4,
1522
- 'L5': $lumx-color-orange-L5,
1523
- 'L6': $lumx-color-orange-L6,
1472
+ "white": (
1473
+ "N": $lumx-color-white-N,
1474
+ "L1": $lumx-color-white-L1,
1475
+ "L2": $lumx-color-white-L2,
1476
+ "L3": $lumx-color-white-L3,
1477
+ "L4": $lumx-color-white-L4,
1478
+ "L5": $lumx-color-white-L5,
1479
+ "L6": $lumx-color-white-L6
1524
1480
  ),
1481
+ "orange": (
1482
+ "D2": $lumx-color-orange-D2,
1483
+ "D1": $lumx-color-orange-D1,
1484
+ "N": $lumx-color-orange-N,
1485
+ "L1": $lumx-color-orange-L1,
1486
+ "L2": $lumx-color-orange-L2,
1487
+ "L3": $lumx-color-orange-L3,
1488
+ "L4": $lumx-color-orange-L4,
1489
+ "L5": $lumx-color-orange-L5,
1490
+ "L6": $lumx-color-orange-L6
1491
+ )
1525
1492
  ),
1526
- 'size': (
1527
- 'xxs': $lumx-size-xxs,
1528
- 'xs': $lumx-size-xs,
1529
- 's': $lumx-size-s,
1530
- 'm': $lumx-size-m,
1531
- 'l': $lumx-size-l,
1532
- 'xl': $lumx-size-xl,
1533
- 'xxl': $lumx-size-xxl,
1493
+ "size": (
1494
+ "xxs": $lumx-size-xxs,
1495
+ "xs": $lumx-size-xs,
1496
+ "s": $lumx-size-s,
1497
+ "m": $lumx-size-m,
1498
+ "l": $lumx-size-l,
1499
+ "xl": $lumx-size-xl,
1500
+ "xxl": $lumx-size-xxl
1534
1501
  ),
1535
- 'spacing': (
1536
- 'unit': (
1537
- 'tiny': $lumx-spacing-unit-tiny,
1538
- 'regular': $lumx-spacing-unit-regular,
1539
- 'medium': $lumx-spacing-unit-medium,
1540
- 'big': $lumx-spacing-unit-big,
1541
- 'huge': $lumx-spacing-unit-huge,
1542
- ),
1502
+ "spacing": (
1503
+ "unit": (
1504
+ "tiny": $lumx-spacing-unit-tiny,
1505
+ "regular": $lumx-spacing-unit-regular,
1506
+ "medium": $lumx-spacing-unit-medium,
1507
+ "big": $lumx-spacing-unit-big,
1508
+ "huge": $lumx-spacing-unit-huge
1509
+ )
1543
1510
  ),
1544
- 'typography': (
1545
- 'font-family': $lumx-typography-font-family,
1546
- 'font-weight': (
1547
- 'regular': $lumx-typography-font-weight-regular,
1548
- 'bold': $lumx-typography-font-weight-bold,
1549
- 'light': $lumx-typography-font-weight-light,
1511
+ "typography": (
1512
+ "font-family": $lumx-typography-font-family,
1513
+ "font-weight": (
1514
+ "regular": $lumx-typography-font-weight-regular,
1515
+ "bold": $lumx-typography-font-weight-bold,
1516
+ "light": $lumx-typography-font-weight-light
1550
1517
  ),
1551
- 'interface': (
1552
- 'display1': (
1553
- 'font-size': $lumx-typography-interface-display1-font-size,
1554
- 'font-weight': $lumx-typography-interface-display1-font-weight,
1555
- 'line-height': $lumx-typography-interface-display1-line-height,
1518
+ "interface": (
1519
+ "display1": (
1520
+ "font-size": $lumx-typography-interface-display1-font-size,
1521
+ "font-weight": $lumx-typography-interface-display1-font-weight,
1522
+ "line-height": $lumx-typography-interface-display1-line-height
1556
1523
  ),
1557
- 'headline': (
1558
- 'font-size': $lumx-typography-interface-headline-font-size,
1559
- 'font-weight': $lumx-typography-interface-headline-font-weight,
1560
- 'line-height': $lumx-typography-interface-headline-line-height,
1524
+ "headline": (
1525
+ "font-size": $lumx-typography-interface-headline-font-size,
1526
+ "font-weight": $lumx-typography-interface-headline-font-weight,
1527
+ "line-height": $lumx-typography-interface-headline-line-height
1561
1528
  ),
1562
- 'title': (
1563
- 'font-size': $lumx-typography-interface-title-font-size,
1564
- 'font-weight': $lumx-typography-interface-title-font-weight,
1565
- 'line-height': $lumx-typography-interface-title-line-height,
1529
+ "title": (
1530
+ "font-size": $lumx-typography-interface-title-font-size,
1531
+ "font-weight": $lumx-typography-interface-title-font-weight,
1532
+ "line-height": $lumx-typography-interface-title-line-height
1566
1533
  ),
1567
- 'subtitle2': (
1568
- 'font-size': $lumx-typography-interface-subtitle2-font-size,
1569
- 'font-weight': $lumx-typography-interface-subtitle2-font-weight,
1570
- 'line-height': $lumx-typography-interface-subtitle2-line-height,
1534
+ "subtitle2": (
1535
+ "font-size": $lumx-typography-interface-subtitle2-font-size,
1536
+ "font-weight": $lumx-typography-interface-subtitle2-font-weight,
1537
+ "line-height": $lumx-typography-interface-subtitle2-line-height
1571
1538
  ),
1572
- 'subtitle1': (
1573
- 'font-size': $lumx-typography-interface-subtitle1-font-size,
1574
- 'font-weight': $lumx-typography-interface-subtitle1-font-weight,
1575
- 'line-height': $lumx-typography-interface-subtitle1-line-height,
1539
+ "subtitle1": (
1540
+ "font-size": $lumx-typography-interface-subtitle1-font-size,
1541
+ "font-weight": $lumx-typography-interface-subtitle1-font-weight,
1542
+ "line-height": $lumx-typography-interface-subtitle1-line-height
1576
1543
  ),
1577
- 'body2': (
1578
- 'font-size': $lumx-typography-interface-body2-font-size,
1579
- 'font-weight': $lumx-typography-interface-body2-font-weight,
1580
- 'line-height': $lumx-typography-interface-body2-line-height,
1544
+ "body2": (
1545
+ "font-size": $lumx-typography-interface-body2-font-size,
1546
+ "font-weight": $lumx-typography-interface-body2-font-weight,
1547
+ "line-height": $lumx-typography-interface-body2-line-height
1581
1548
  ),
1582
- 'body1': (
1583
- 'font-size': $lumx-typography-interface-body1-font-size,
1584
- 'font-weight': $lumx-typography-interface-body1-font-weight,
1585
- 'line-height': $lumx-typography-interface-body1-line-height,
1549
+ "body1": (
1550
+ "font-size": $lumx-typography-interface-body1-font-size,
1551
+ "font-weight": $lumx-typography-interface-body1-font-weight,
1552
+ "line-height": $lumx-typography-interface-body1-line-height
1586
1553
  ),
1587
- 'caption': (
1588
- 'font-size': $lumx-typography-interface-caption-font-size,
1589
- 'font-weight': $lumx-typography-interface-caption-font-weight,
1590
- 'line-height': $lumx-typography-interface-caption-line-height,
1591
- ),
1592
- 'overline': (
1593
- 'font-size': $lumx-typography-interface-overline-font-size,
1594
- 'font-weight': $lumx-typography-interface-overline-font-weight,
1595
- 'line-height': $lumx-typography-interface-overline-line-height,
1554
+ "caption": (
1555
+ "font-size": $lumx-typography-interface-caption-font-size,
1556
+ "font-weight": $lumx-typography-interface-caption-font-weight,
1557
+ "line-height": $lumx-typography-interface-caption-line-height
1596
1558
  ),
1559
+ "overline": (
1560
+ "font-size": $lumx-typography-interface-overline-font-size,
1561
+ "font-weight": $lumx-typography-interface-overline-font-weight,
1562
+ "line-height": $lumx-typography-interface-overline-line-height
1563
+ )
1597
1564
  ),
1598
- 'custom': (
1599
- 'title1': (
1600
- 'font-size': $lumx-typography-custom-title1-font-size,
1601
- 'font-weight': $lumx-typography-custom-title1-font-weight,
1602
- 'line-height': $lumx-typography-custom-title1-line-height,
1565
+ "custom": (
1566
+ "title1": (
1567
+ "font-size": $lumx-typography-custom-title1-font-size,
1568
+ "font-weight": $lumx-typography-custom-title1-font-weight,
1569
+ "line-height": $lumx-typography-custom-title1-line-height
1603
1570
  ),
1604
- 'title2': (
1605
- 'font-size': $lumx-typography-custom-title2-font-size,
1606
- 'font-weight': $lumx-typography-custom-title2-font-weight,
1607
- 'line-height': $lumx-typography-custom-title2-line-height,
1571
+ "title2": (
1572
+ "font-size": $lumx-typography-custom-title2-font-size,
1573
+ "font-weight": $lumx-typography-custom-title2-font-weight,
1574
+ "line-height": $lumx-typography-custom-title2-line-height
1608
1575
  ),
1609
- 'title3': (
1610
- 'font-size': $lumx-typography-custom-title3-font-size,
1611
- 'font-weight': $lumx-typography-custom-title3-font-weight,
1612
- 'line-height': $lumx-typography-custom-title3-line-height,
1576
+ "title3": (
1577
+ "font-size": $lumx-typography-custom-title3-font-size,
1578
+ "font-weight": $lumx-typography-custom-title3-font-weight,
1579
+ "line-height": $lumx-typography-custom-title3-line-height
1613
1580
  ),
1614
- 'title4': (
1615
- 'font-size': $lumx-typography-custom-title4-font-size,
1616
- 'font-weight': $lumx-typography-custom-title4-font-weight,
1617
- 'line-height': $lumx-typography-custom-title4-line-height,
1581
+ "title4": (
1582
+ "font-size": $lumx-typography-custom-title4-font-size,
1583
+ "font-weight": $lumx-typography-custom-title4-font-weight,
1584
+ "line-height": $lumx-typography-custom-title4-line-height
1618
1585
  ),
1619
- 'title5': (
1620
- 'font-size': $lumx-typography-custom-title5-font-size,
1621
- 'font-weight': $lumx-typography-custom-title5-font-weight,
1622
- 'line-height': $lumx-typography-custom-title5-line-height,
1586
+ "title5": (
1587
+ "font-size": $lumx-typography-custom-title5-font-size,
1588
+ "font-weight": $lumx-typography-custom-title5-font-weight,
1589
+ "line-height": $lumx-typography-custom-title5-line-height
1623
1590
  ),
1624
- 'title6': (
1625
- 'font-size': $lumx-typography-custom-title6-font-size,
1626
- 'font-weight': $lumx-typography-custom-title6-font-weight,
1627
- 'line-height': $lumx-typography-custom-title6-line-height,
1591
+ "title6": (
1592
+ "font-size": $lumx-typography-custom-title6-font-size,
1593
+ "font-weight": $lumx-typography-custom-title6-font-weight,
1594
+ "line-height": $lumx-typography-custom-title6-line-height
1628
1595
  ),
1629
- 'intro': (
1630
- 'font-size': $lumx-typography-custom-intro-font-size,
1631
- 'font-weight': $lumx-typography-custom-intro-font-weight,
1632
- 'line-height': $lumx-typography-custom-intro-line-height,
1596
+ "intro": (
1597
+ "font-size": $lumx-typography-custom-intro-font-size,
1598
+ "font-weight": $lumx-typography-custom-intro-font-weight,
1599
+ "line-height": $lumx-typography-custom-intro-line-height
1633
1600
  ),
1634
- 'body-large': (
1635
- 'font-size': $lumx-typography-custom-body-large-font-size,
1636
- 'font-weight': $lumx-typography-custom-body-large-font-weight,
1637
- 'line-height': $lumx-typography-custom-body-large-line-height,
1601
+ "body-large": (
1602
+ "font-size": $lumx-typography-custom-body-large-font-size,
1603
+ "font-weight": $lumx-typography-custom-body-large-font-weight,
1604
+ "line-height": $lumx-typography-custom-body-large-line-height
1638
1605
  ),
1639
- 'body': (
1640
- 'font-size': $lumx-typography-custom-body-font-size,
1641
- 'font-weight': $lumx-typography-custom-body-font-weight,
1642
- 'line-height': $lumx-typography-custom-body-line-height,
1606
+ "body": (
1607
+ "font-size": $lumx-typography-custom-body-font-size,
1608
+ "font-weight": $lumx-typography-custom-body-font-weight,
1609
+ "line-height": $lumx-typography-custom-body-line-height
1643
1610
  ),
1644
- 'quote': (
1645
- 'font-size': $lumx-typography-custom-quote-font-size,
1646
- 'font-weight': $lumx-typography-custom-quote-font-weight,
1647
- 'font-style': $lumx-typography-custom-quote-font-style,
1648
- 'line-height': $lumx-typography-custom-quote-line-height,
1611
+ "quote": (
1612
+ "font-size": $lumx-typography-custom-quote-font-size,
1613
+ "font-weight": $lumx-typography-custom-quote-font-weight,
1614
+ "font-style": $lumx-typography-custom-quote-font-style,
1615
+ "line-height": $lumx-typography-custom-quote-line-height
1649
1616
  ),
1650
- 'publish-info': (
1651
- 'font-size': $lumx-typography-custom-publish-info-font-size,
1652
- 'font-weight': $lumx-typography-custom-publish-info-font-weight,
1653
- 'line-height': $lumx-typography-custom-publish-info-line-height,
1617
+ "publish-info": (
1618
+ "font-size": $lumx-typography-custom-publish-info-font-size,
1619
+ "font-weight": $lumx-typography-custom-publish-info-font-weight,
1620
+ "line-height": $lumx-typography-custom-publish-info-line-height
1654
1621
  ),
1655
- 'button': (
1656
- 'size-m': (
1657
- 'font-size': $lumx-typography-custom-button-size-m-font-size,
1658
- 'font-weight': $lumx-typography-custom-button-size-m-font-weight,
1659
- ),
1660
- 'size-s': (
1661
- 'font-size': $lumx-typography-custom-button-size-s-font-size,
1662
- 'font-weight': $lumx-typography-custom-button-size-s-font-weight,
1663
- ),
1622
+ "button": (
1623
+ "size-m": (
1624
+ "font-size": $lumx-typography-custom-button-size-m-font-size,
1625
+ "font-weight": $lumx-typography-custom-button-size-m-font-weight
1626
+ ),
1627
+ "size-s": (
1628
+ "font-size": $lumx-typography-custom-button-size-s-font-size,
1629
+ "font-weight": $lumx-typography-custom-button-size-s-font-weight
1630
+ )
1664
1631
  ),
1665
- ),
1666
- ),
1632
+ "navigation-item": (
1633
+ "font-size": $lumx-typography-custom-navigation-item-font-size,
1634
+ "font-weight": $lumx-typography-custom-navigation-item-font-weight,
1635
+ "line-height": $lumx-typography-custom-navigation-item-line-height
1636
+ )
1637
+ )
1638
+ )
1667
1639
  ) !default;