@lumx/core 3.9.8 → 3.9.9-alpha.1
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/css/design-tokens.css +64 -64
- package/js/constants/design-tokens.js +268 -118
- package/js/constants/design-tokens.min.js +1 -1
- package/js/constants/design-tokens.min.js.map +1 -1
- package/js/constants/design-tokens.ts +178 -118
- package/lumx.css +1 -1
- package/lumx.min.css +1 -1
- package/package.json +1 -1
- package/scss/_design-tokens.scss +64 -64
- package/scss/components/button/_index.scss +8 -4
- package/scss/components/slideshow/_index.scss +7 -3
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
/**
|
|
2
2
|
* Do not edit directly
|
|
3
|
-
* Generated on
|
|
3
|
+
* Generated on Mon, 13 Jan 2025 09:24:38 GMT
|
|
4
4
|
*/
|
|
5
5
|
|
|
6
6
|
export const DESIGN_TOKENS = {
|
|
@@ -284,92 +284,116 @@ export const DESIGN_TOKENS = {
|
|
|
284
284
|
'emphasis-selected': {
|
|
285
285
|
'state-default': {
|
|
286
286
|
padding: { horizontal: { comment: 'deprecated (use base emphasis padding)', value: '16px' } },
|
|
287
|
-
'border-width': { value: '
|
|
287
|
+
'border-width': { value: '1px' },
|
|
288
288
|
'theme-light': {
|
|
289
289
|
'background-color': {
|
|
290
|
-
value: 'var(--lumx-color-primary-
|
|
291
|
-
attributes: { hex: '245be7', rgb: { r: 36, g: 91, b: 231, a: 0.
|
|
292
|
-
$aliasedFrom: 'color.primary.
|
|
290
|
+
value: 'var(--lumx-color-primary-L6)',
|
|
291
|
+
attributes: { hex: '245be7', rgb: { r: 36, g: 91, b: 231, a: 0.05 } },
|
|
292
|
+
$aliasedFrom: 'color.primary.L6',
|
|
293
293
|
},
|
|
294
294
|
color: {
|
|
295
295
|
value: 'var(--lumx-color-primary-D2)',
|
|
296
296
|
attributes: { hex: '1546c1', rgb: { r: 21, g: 70, b: 193, a: 1 } },
|
|
297
297
|
$aliasedFrom: 'color.primary.D2',
|
|
298
298
|
},
|
|
299
|
-
'border-color': {
|
|
299
|
+
'border-color': {
|
|
300
|
+
value: 'var(--lumx-color-primary-N)',
|
|
301
|
+
attributes: { hex: '245be7', rgb: { r: 36, g: 91, b: 231, a: 1 } },
|
|
302
|
+
$aliasedFrom: 'color.primary.N',
|
|
303
|
+
},
|
|
300
304
|
},
|
|
301
305
|
'theme-dark': {
|
|
302
306
|
'background-color': {
|
|
303
|
-
value: 'var(--lumx-color-light-
|
|
304
|
-
attributes: { hex: 'ffffff', rgb: { r: 255, g: 255, b: 255, a: 0.
|
|
305
|
-
$aliasedFrom: 'color.light.
|
|
307
|
+
value: 'var(--lumx-color-light-L6)',
|
|
308
|
+
attributes: { hex: 'ffffff', rgb: { r: 255, g: 255, b: 255, a: 0.1 } },
|
|
309
|
+
$aliasedFrom: 'color.light.L6',
|
|
306
310
|
},
|
|
307
311
|
color: {
|
|
308
312
|
value: 'var(--lumx-color-light-N)',
|
|
309
313
|
attributes: { hex: 'ffffff', rgb: { r: 255, g: 255, b: 255, a: 1 } },
|
|
310
314
|
$aliasedFrom: 'color.light.N',
|
|
311
315
|
},
|
|
312
|
-
'border-color': {
|
|
316
|
+
'border-color': {
|
|
317
|
+
value: 'var(--lumx-color-light-N)',
|
|
318
|
+
attributes: { hex: 'ffffff', rgb: { r: 255, g: 255, b: 255, a: 1 } },
|
|
319
|
+
$aliasedFrom: 'color.light.N',
|
|
320
|
+
},
|
|
313
321
|
},
|
|
314
322
|
},
|
|
315
323
|
'state-hover': {
|
|
316
324
|
padding: { horizontal: { comment: 'deprecated (use base emphasis padding)', value: '16px' } },
|
|
317
|
-
'border-width': { value: '
|
|
325
|
+
'border-width': { value: '1px' },
|
|
318
326
|
'theme-light': {
|
|
319
327
|
'background-color': {
|
|
320
|
-
value: 'var(--lumx-color-primary-
|
|
321
|
-
attributes: { hex: '245be7', rgb: { r: 36, g: 91, b: 231, a: 0.
|
|
322
|
-
$aliasedFrom: 'color.primary.
|
|
328
|
+
value: 'var(--lumx-color-primary-L5)',
|
|
329
|
+
attributes: { hex: '245be7', rgb: { r: 36, g: 91, b: 231, a: 0.1 } },
|
|
330
|
+
$aliasedFrom: 'color.primary.L5',
|
|
323
331
|
},
|
|
324
332
|
color: {
|
|
325
333
|
value: 'var(--lumx-color-primary-D2)',
|
|
326
334
|
attributes: { hex: '1546c1', rgb: { r: 21, g: 70, b: 193, a: 1 } },
|
|
327
335
|
$aliasedFrom: 'color.primary.D2',
|
|
328
336
|
},
|
|
329
|
-
'border-color': {
|
|
337
|
+
'border-color': {
|
|
338
|
+
value: 'var(--lumx-color-primary-N)',
|
|
339
|
+
attributes: { hex: '245be7', rgb: { r: 36, g: 91, b: 231, a: 1 } },
|
|
340
|
+
$aliasedFrom: 'color.primary.N',
|
|
341
|
+
},
|
|
330
342
|
},
|
|
331
343
|
'theme-dark': {
|
|
332
344
|
'background-color': {
|
|
333
|
-
value: 'var(--lumx-color-light-
|
|
334
|
-
attributes: { hex: 'ffffff', rgb: { r: 255, g: 255, b: 255, a: 0.
|
|
335
|
-
$aliasedFrom: 'color.light.
|
|
345
|
+
value: 'var(--lumx-color-light-L5)',
|
|
346
|
+
attributes: { hex: 'ffffff', rgb: { r: 255, g: 255, b: 255, a: 0.2 } },
|
|
347
|
+
$aliasedFrom: 'color.light.L5',
|
|
336
348
|
},
|
|
337
349
|
color: {
|
|
338
350
|
value: 'var(--lumx-color-light-N)',
|
|
339
351
|
attributes: { hex: 'ffffff', rgb: { r: 255, g: 255, b: 255, a: 1 } },
|
|
340
352
|
$aliasedFrom: 'color.light.N',
|
|
341
353
|
},
|
|
342
|
-
'border-color': {
|
|
354
|
+
'border-color': {
|
|
355
|
+
value: 'var(--lumx-color-light-N)',
|
|
356
|
+
attributes: { hex: 'ffffff', rgb: { r: 255, g: 255, b: 255, a: 1 } },
|
|
357
|
+
$aliasedFrom: 'color.light.N',
|
|
358
|
+
},
|
|
343
359
|
},
|
|
344
360
|
},
|
|
345
361
|
'state-active': {
|
|
346
362
|
padding: { horizontal: { comment: 'deprecated (use base emphasis padding)', value: '16px' } },
|
|
347
|
-
'border-width': { value: '
|
|
363
|
+
'border-width': { value: '1px' },
|
|
348
364
|
'theme-light': {
|
|
349
365
|
'background-color': {
|
|
350
|
-
value: 'var(--lumx-color-primary-
|
|
351
|
-
attributes: { hex: '245be7', rgb: { r: 36, g: 91, b: 231, a: 0.
|
|
352
|
-
$aliasedFrom: 'color.primary.
|
|
366
|
+
value: 'var(--lumx-color-primary-L4)',
|
|
367
|
+
attributes: { hex: '245be7', rgb: { r: 36, g: 91, b: 231, a: 0.2 } },
|
|
368
|
+
$aliasedFrom: 'color.primary.L4',
|
|
353
369
|
},
|
|
354
370
|
color: {
|
|
355
371
|
value: 'var(--lumx-color-primary-D2)',
|
|
356
372
|
attributes: { hex: '1546c1', rgb: { r: 21, g: 70, b: 193, a: 1 } },
|
|
357
373
|
$aliasedFrom: 'color.primary.D2',
|
|
358
374
|
},
|
|
359
|
-
'border-color': {
|
|
375
|
+
'border-color': {
|
|
376
|
+
value: 'var(--lumx-color-primary-N)',
|
|
377
|
+
attributes: { hex: '245be7', rgb: { r: 36, g: 91, b: 231, a: 1 } },
|
|
378
|
+
$aliasedFrom: 'color.primary.N',
|
|
379
|
+
},
|
|
360
380
|
},
|
|
361
381
|
'theme-dark': {
|
|
362
382
|
'background-color': {
|
|
363
|
-
value: 'var(--lumx-color-light-
|
|
364
|
-
attributes: { hex: 'ffffff', rgb: { r: 255, g: 255, b: 255, a: 0.
|
|
365
|
-
$aliasedFrom: 'color.light.
|
|
383
|
+
value: 'var(--lumx-color-light-L4)',
|
|
384
|
+
attributes: { hex: 'ffffff', rgb: { r: 255, g: 255, b: 255, a: 0.4 } },
|
|
385
|
+
$aliasedFrom: 'color.light.L4',
|
|
366
386
|
},
|
|
367
387
|
color: {
|
|
368
388
|
value: 'var(--lumx-color-light-N)',
|
|
369
389
|
attributes: { hex: 'ffffff', rgb: { r: 255, g: 255, b: 255, a: 1 } },
|
|
370
390
|
$aliasedFrom: 'color.light.N',
|
|
371
391
|
},
|
|
372
|
-
'border-color': {
|
|
392
|
+
'border-color': {
|
|
393
|
+
value: 'var(--lumx-color-light-N)',
|
|
394
|
+
attributes: { hex: 'ffffff', rgb: { r: 255, g: 255, b: 255, a: 1 } },
|
|
395
|
+
$aliasedFrom: 'color.light.N',
|
|
396
|
+
},
|
|
373
397
|
},
|
|
374
398
|
},
|
|
375
399
|
},
|
|
@@ -377,59 +401,83 @@ export const DESIGN_TOKENS = {
|
|
|
377
401
|
chip: {
|
|
378
402
|
'emphasis-selected': {
|
|
379
403
|
'state-default': {
|
|
380
|
-
'border-width': { value: '
|
|
404
|
+
'border-width': { value: '1px' },
|
|
381
405
|
'theme-light': {
|
|
382
|
-
'border-color': {
|
|
406
|
+
'border-color': {
|
|
407
|
+
value: 'var(--lumx-color-primary-N)',
|
|
408
|
+
attributes: { hex: '245be7', rgb: { r: 36, g: 91, b: 231, a: 1 } },
|
|
409
|
+
$aliasedFrom: 'color.primary.N',
|
|
410
|
+
},
|
|
383
411
|
'background-color': {
|
|
384
|
-
value: 'var(--lumx-color-primary-
|
|
385
|
-
attributes: { hex: '245be7', rgb: { r: 36, g: 91, b: 231, a: 0.
|
|
386
|
-
$aliasedFrom: 'color.primary.
|
|
412
|
+
value: 'var(--lumx-color-primary-L6)',
|
|
413
|
+
attributes: { hex: '245be7', rgb: { r: 36, g: 91, b: 231, a: 0.05 } },
|
|
414
|
+
$aliasedFrom: 'color.primary.L6',
|
|
387
415
|
},
|
|
388
416
|
},
|
|
389
417
|
'theme-dark': {
|
|
390
|
-
'border-color': {
|
|
418
|
+
'border-color': {
|
|
419
|
+
value: 'var(--lumx-color-light-N)',
|
|
420
|
+
attributes: { hex: 'ffffff', rgb: { r: 255, g: 255, b: 255, a: 1 } },
|
|
421
|
+
$aliasedFrom: 'color.light.N',
|
|
422
|
+
},
|
|
391
423
|
'background-color': {
|
|
392
|
-
value: 'var(--lumx-color-light-
|
|
393
|
-
attributes: { hex: 'ffffff', rgb: { r: 255, g: 255, b: 255, a: 0.
|
|
394
|
-
$aliasedFrom: 'color.light.
|
|
424
|
+
value: 'var(--lumx-color-light-L6)',
|
|
425
|
+
attributes: { hex: 'ffffff', rgb: { r: 255, g: 255, b: 255, a: 0.1 } },
|
|
426
|
+
$aliasedFrom: 'color.light.L6',
|
|
395
427
|
},
|
|
396
428
|
},
|
|
397
429
|
},
|
|
398
430
|
'state-hover': {
|
|
399
|
-
'border-width': { value: '
|
|
431
|
+
'border-width': { value: '1px' },
|
|
400
432
|
'theme-light': {
|
|
401
|
-
'border-color': {
|
|
433
|
+
'border-color': {
|
|
434
|
+
value: 'var(--lumx-color-primary-N)',
|
|
435
|
+
attributes: { hex: '245be7', rgb: { r: 36, g: 91, b: 231, a: 1 } },
|
|
436
|
+
$aliasedFrom: 'color.primary.N',
|
|
437
|
+
},
|
|
402
438
|
'background-color': {
|
|
403
|
-
value: 'var(--lumx-color-primary-
|
|
404
|
-
attributes: { hex: '245be7', rgb: { r: 36, g: 91, b: 231, a: 0.
|
|
405
|
-
$aliasedFrom: 'color.primary.
|
|
439
|
+
value: 'var(--lumx-color-primary-L5)',
|
|
440
|
+
attributes: { hex: '245be7', rgb: { r: 36, g: 91, b: 231, a: 0.1 } },
|
|
441
|
+
$aliasedFrom: 'color.primary.L5',
|
|
406
442
|
},
|
|
407
443
|
},
|
|
408
444
|
'theme-dark': {
|
|
409
|
-
'border-color': {
|
|
445
|
+
'border-color': {
|
|
446
|
+
value: 'var(--lumx-color-light-N)',
|
|
447
|
+
attributes: { hex: 'ffffff', rgb: { r: 255, g: 255, b: 255, a: 1 } },
|
|
448
|
+
$aliasedFrom: 'color.light.N',
|
|
449
|
+
},
|
|
410
450
|
'background-color': {
|
|
411
|
-
value: 'var(--lumx-color-light-
|
|
412
|
-
attributes: { hex: 'ffffff', rgb: { r: 255, g: 255, b: 255, a: 0.
|
|
413
|
-
$aliasedFrom: 'color.light.
|
|
451
|
+
value: 'var(--lumx-color-light-L5)',
|
|
452
|
+
attributes: { hex: 'ffffff', rgb: { r: 255, g: 255, b: 255, a: 0.2 } },
|
|
453
|
+
$aliasedFrom: 'color.light.L5',
|
|
414
454
|
},
|
|
415
455
|
},
|
|
416
456
|
},
|
|
417
457
|
'state-active': {
|
|
418
|
-
'border-width': { value: '
|
|
458
|
+
'border-width': { value: '1px' },
|
|
419
459
|
'theme-light': {
|
|
420
|
-
'border-color': {
|
|
460
|
+
'border-color': {
|
|
461
|
+
value: 'var(--lumx-color-primary-N)',
|
|
462
|
+
attributes: { hex: '245be7', rgb: { r: 36, g: 91, b: 231, a: 1 } },
|
|
463
|
+
$aliasedFrom: 'color.primary.N',
|
|
464
|
+
},
|
|
421
465
|
'background-color': {
|
|
422
|
-
value: 'var(--lumx-color-primary-
|
|
423
|
-
attributes: { hex: '245be7', rgb: { r: 36, g: 91, b: 231, a: 0.
|
|
424
|
-
$aliasedFrom: 'color.primary.
|
|
466
|
+
value: 'var(--lumx-color-primary-L4)',
|
|
467
|
+
attributes: { hex: '245be7', rgb: { r: 36, g: 91, b: 231, a: 0.2 } },
|
|
468
|
+
$aliasedFrom: 'color.primary.L4',
|
|
425
469
|
},
|
|
426
470
|
},
|
|
427
471
|
'theme-dark': {
|
|
428
|
-
'border-color': {
|
|
472
|
+
'border-color': {
|
|
473
|
+
value: 'var(--lumx-color-light-N)',
|
|
474
|
+
attributes: { hex: 'ffffff', rgb: { r: 255, g: 255, b: 255, a: 1 } },
|
|
475
|
+
$aliasedFrom: 'color.light.N',
|
|
476
|
+
},
|
|
429
477
|
'background-color': {
|
|
430
|
-
value: 'var(--lumx-color-light-
|
|
431
|
-
attributes: { hex: 'ffffff', rgb: { r: 255, g: 255, b: 255, a: 0.
|
|
432
|
-
$aliasedFrom: 'color.light.
|
|
478
|
+
value: 'var(--lumx-color-light-L4)',
|
|
479
|
+
attributes: { hex: 'ffffff', rgb: { r: 255, g: 255, b: 255, a: 0.4 } },
|
|
480
|
+
$aliasedFrom: 'color.light.L4',
|
|
433
481
|
},
|
|
434
482
|
},
|
|
435
483
|
},
|
|
@@ -702,16 +750,16 @@ export const DESIGN_TOKENS = {
|
|
|
702
750
|
'emphasis-selected': {
|
|
703
751
|
'state-default': {
|
|
704
752
|
border: {
|
|
705
|
-
top: { width: { value: '
|
|
706
|
-
right: { width: { value: '
|
|
707
|
-
bottom: { width: { value: '
|
|
708
|
-
left: { width: { value: '
|
|
753
|
+
top: { width: { value: '1px' } },
|
|
754
|
+
right: { width: { value: '1px' } },
|
|
755
|
+
bottom: { width: { value: '1px' } },
|
|
756
|
+
left: { width: { value: '1px' } },
|
|
709
757
|
},
|
|
710
758
|
'theme-light': {
|
|
711
759
|
'background-color': {
|
|
712
|
-
value: 'var(--lumx-color-primary-
|
|
713
|
-
attributes: { hex: '245be7', rgb: { r: 36, g: 91, b: 231, a: 0.
|
|
714
|
-
$aliasedFrom: 'color.primary.
|
|
760
|
+
value: 'var(--lumx-color-primary-L6)',
|
|
761
|
+
attributes: { hex: '245be7', rgb: { r: 36, g: 91, b: 231, a: 0.05 } },
|
|
762
|
+
$aliasedFrom: 'color.primary.L6',
|
|
715
763
|
},
|
|
716
764
|
'border-color': {
|
|
717
765
|
value: 'var(--lumx-color-primary-N)',
|
|
@@ -737,9 +785,9 @@ export const DESIGN_TOKENS = {
|
|
|
737
785
|
},
|
|
738
786
|
'theme-dark': {
|
|
739
787
|
'background-color': {
|
|
740
|
-
value: 'var(--lumx-color-light-
|
|
741
|
-
attributes: { hex: 'ffffff', rgb: { r: 255, g: 255, b: 255, a: 0.
|
|
742
|
-
$aliasedFrom: 'color.light.
|
|
788
|
+
value: 'var(--lumx-color-light-L6)',
|
|
789
|
+
attributes: { hex: 'ffffff', rgb: { r: 255, g: 255, b: 255, a: 0.1 } },
|
|
790
|
+
$aliasedFrom: 'color.light.L6',
|
|
743
791
|
},
|
|
744
792
|
'border-color': {
|
|
745
793
|
value: 'var(--lumx-color-light-N)',
|
|
@@ -766,16 +814,16 @@ export const DESIGN_TOKENS = {
|
|
|
766
814
|
},
|
|
767
815
|
'state-hover': {
|
|
768
816
|
border: {
|
|
769
|
-
top: { width: { value: '
|
|
770
|
-
right: { width: { value: '
|
|
771
|
-
bottom: { width: { value: '
|
|
772
|
-
left: { width: { value: '
|
|
817
|
+
top: { width: { value: '1px' } },
|
|
818
|
+
right: { width: { value: '1px' } },
|
|
819
|
+
bottom: { width: { value: '1px' } },
|
|
820
|
+
left: { width: { value: '1px' } },
|
|
773
821
|
},
|
|
774
822
|
'theme-light': {
|
|
775
823
|
'background-color': {
|
|
776
|
-
value: 'var(--lumx-color-primary-
|
|
777
|
-
attributes: { hex: '245be7', rgb: { r: 36, g: 91, b: 231, a: 0.
|
|
778
|
-
$aliasedFrom: 'color.primary.
|
|
824
|
+
value: 'var(--lumx-color-primary-L5)',
|
|
825
|
+
attributes: { hex: '245be7', rgb: { r: 36, g: 91, b: 231, a: 0.1 } },
|
|
826
|
+
$aliasedFrom: 'color.primary.L5',
|
|
779
827
|
},
|
|
780
828
|
'border-color': {
|
|
781
829
|
value: 'var(--lumx-color-primary-N)',
|
|
@@ -793,9 +841,9 @@ export const DESIGN_TOKENS = {
|
|
|
793
841
|
$aliasedFrom: 'color.primary.D2',
|
|
794
842
|
},
|
|
795
843
|
'chevron-background-color': {
|
|
796
|
-
value: 'var(--lumx-color-primary-
|
|
797
|
-
attributes: { hex: '245be7', rgb: { r: 36, g: 91, b: 231, a: 0.
|
|
798
|
-
$aliasedFrom: 'color.primary.
|
|
844
|
+
value: 'var(--lumx-color-primary-L5)',
|
|
845
|
+
attributes: { hex: '245be7', rgb: { r: 36, g: 91, b: 231, a: 0.1 } },
|
|
846
|
+
$aliasedFrom: 'color.primary.L5',
|
|
799
847
|
},
|
|
800
848
|
'chevron-color': {
|
|
801
849
|
value: 'var(--lumx-color-primary-D2)',
|
|
@@ -805,9 +853,9 @@ export const DESIGN_TOKENS = {
|
|
|
805
853
|
},
|
|
806
854
|
'theme-dark': {
|
|
807
855
|
'background-color': {
|
|
808
|
-
value: 'var(--lumx-color-light-
|
|
809
|
-
attributes: { hex: 'ffffff', rgb: { r: 255, g: 255, b: 255, a: 0.
|
|
810
|
-
$aliasedFrom: 'color.light.
|
|
856
|
+
value: 'var(--lumx-color-light-L5)',
|
|
857
|
+
attributes: { hex: 'ffffff', rgb: { r: 255, g: 255, b: 255, a: 0.2 } },
|
|
858
|
+
$aliasedFrom: 'color.light.L5',
|
|
811
859
|
},
|
|
812
860
|
'border-color': {
|
|
813
861
|
value: 'var(--lumx-color-light-N)',
|
|
@@ -825,9 +873,9 @@ export const DESIGN_TOKENS = {
|
|
|
825
873
|
$aliasedFrom: 'color.light.N',
|
|
826
874
|
},
|
|
827
875
|
'chevron-background-color': {
|
|
828
|
-
value: 'var(--lumx-color-light-
|
|
829
|
-
attributes: { hex: 'ffffff', rgb: { r: 255, g: 255, b: 255, a: 0.
|
|
830
|
-
$aliasedFrom: 'color.light.
|
|
876
|
+
value: 'var(--lumx-color-light-L5)',
|
|
877
|
+
attributes: { hex: 'ffffff', rgb: { r: 255, g: 255, b: 255, a: 0.2 } },
|
|
878
|
+
$aliasedFrom: 'color.light.L5',
|
|
831
879
|
},
|
|
832
880
|
'chevron-color': {
|
|
833
881
|
value: 'var(--lumx-color-light-N)',
|
|
@@ -838,16 +886,16 @@ export const DESIGN_TOKENS = {
|
|
|
838
886
|
},
|
|
839
887
|
'state-active': {
|
|
840
888
|
border: {
|
|
841
|
-
top: { width: { value: '
|
|
842
|
-
right: { width: { value: '
|
|
843
|
-
bottom: { width: { value: '
|
|
844
|
-
left: { width: { value: '
|
|
889
|
+
top: { width: { value: '1px' } },
|
|
890
|
+
right: { width: { value: '1px' } },
|
|
891
|
+
bottom: { width: { value: '1px' } },
|
|
892
|
+
left: { width: { value: '1px' } },
|
|
845
893
|
},
|
|
846
894
|
'theme-light': {
|
|
847
895
|
'background-color': {
|
|
848
|
-
value: 'var(--lumx-color-primary-
|
|
849
|
-
attributes: { hex: '245be7', rgb: { r: 36, g: 91, b: 231, a: 0.
|
|
850
|
-
$aliasedFrom: 'color.primary.
|
|
896
|
+
value: 'var(--lumx-color-primary-L4)',
|
|
897
|
+
attributes: { hex: '245be7', rgb: { r: 36, g: 91, b: 231, a: 0.2 } },
|
|
898
|
+
$aliasedFrom: 'color.primary.L4',
|
|
851
899
|
},
|
|
852
900
|
'border-color': {
|
|
853
901
|
value: 'var(--lumx-color-primary-N)',
|
|
@@ -865,9 +913,9 @@ export const DESIGN_TOKENS = {
|
|
|
865
913
|
$aliasedFrom: 'color.primary.D2',
|
|
866
914
|
},
|
|
867
915
|
'chevron-background-color': {
|
|
868
|
-
value: 'var(--lumx-color-primary-
|
|
869
|
-
attributes: { hex: '245be7', rgb: { r: 36, g: 91, b: 231, a: 0.
|
|
870
|
-
$aliasedFrom: 'color.primary.
|
|
916
|
+
value: 'var(--lumx-color-primary-L4)',
|
|
917
|
+
attributes: { hex: '245be7', rgb: { r: 36, g: 91, b: 231, a: 0.2 } },
|
|
918
|
+
$aliasedFrom: 'color.primary.L4',
|
|
871
919
|
},
|
|
872
920
|
'chevron-color': {
|
|
873
921
|
value: 'var(--lumx-color-primary-D2)',
|
|
@@ -877,9 +925,9 @@ export const DESIGN_TOKENS = {
|
|
|
877
925
|
},
|
|
878
926
|
'theme-dark': {
|
|
879
927
|
'background-color': {
|
|
880
|
-
value: 'var(--lumx-color-light-
|
|
881
|
-
attributes: { hex: 'ffffff', rgb: { r: 255, g: 255, b: 255, a: 0.
|
|
882
|
-
$aliasedFrom: 'color.light.
|
|
928
|
+
value: 'var(--lumx-color-light-L4)',
|
|
929
|
+
attributes: { hex: 'ffffff', rgb: { r: 255, g: 255, b: 255, a: 0.4 } },
|
|
930
|
+
$aliasedFrom: 'color.light.L4',
|
|
883
931
|
},
|
|
884
932
|
'border-color': {
|
|
885
933
|
value: 'var(--lumx-color-light-N)',
|
|
@@ -897,9 +945,9 @@ export const DESIGN_TOKENS = {
|
|
|
897
945
|
$aliasedFrom: 'color.light.N',
|
|
898
946
|
},
|
|
899
947
|
'chevron-background-color': {
|
|
900
|
-
value: 'var(--lumx-color-light-
|
|
901
|
-
attributes: { hex: 'ffffff', rgb: { r: 255, g: 255, b: 255, a: 0.
|
|
902
|
-
$aliasedFrom: 'color.light.
|
|
948
|
+
value: 'var(--lumx-color-light-L4)',
|
|
949
|
+
attributes: { hex: 'ffffff', rgb: { r: 255, g: 255, b: 255, a: 0.4 } },
|
|
950
|
+
$aliasedFrom: 'color.light.L4',
|
|
903
951
|
},
|
|
904
952
|
'chevron-color': {
|
|
905
953
|
value: 'var(--lumx-color-light-N)',
|
|
@@ -915,35 +963,47 @@ export const DESIGN_TOKENS = {
|
|
|
915
963
|
item: {
|
|
916
964
|
'emphasis-selected': {
|
|
917
965
|
'state-default': {
|
|
918
|
-
'border-width': { value: '
|
|
966
|
+
'border-width': { value: '1px' },
|
|
919
967
|
'theme-light': {
|
|
920
|
-
'border-color': {
|
|
968
|
+
'border-color': {
|
|
969
|
+
value: 'var(--lumx-color-primary-N)',
|
|
970
|
+
attributes: { hex: '245be7', rgb: { r: 36, g: 91, b: 231, a: 1 } },
|
|
971
|
+
$aliasedFrom: 'color.primary.N',
|
|
972
|
+
},
|
|
921
973
|
'background-color': {
|
|
922
|
-
value: 'var(--lumx-color-primary-
|
|
923
|
-
attributes: { hex: '245be7', rgb: { r: 36, g: 91, b: 231, a: 0.
|
|
924
|
-
$aliasedFrom: 'color.primary.
|
|
974
|
+
value: 'var(--lumx-color-primary-L6)',
|
|
975
|
+
attributes: { hex: '245be7', rgb: { r: 36, g: 91, b: 231, a: 0.05 } },
|
|
976
|
+
$aliasedFrom: 'color.primary.L6',
|
|
925
977
|
},
|
|
926
978
|
},
|
|
927
979
|
},
|
|
928
980
|
'state-hover': {
|
|
929
|
-
'border-width': { value: '
|
|
981
|
+
'border-width': { value: '1px' },
|
|
930
982
|
'theme-light': {
|
|
931
|
-
'border-color': {
|
|
983
|
+
'border-color': {
|
|
984
|
+
value: 'var(--lumx-color-primary-N)',
|
|
985
|
+
attributes: { hex: '245be7', rgb: { r: 36, g: 91, b: 231, a: 1 } },
|
|
986
|
+
$aliasedFrom: 'color.primary.N',
|
|
987
|
+
},
|
|
932
988
|
'background-color': {
|
|
933
|
-
value: 'var(--lumx-color-primary-
|
|
934
|
-
attributes: { hex: '245be7', rgb: { r: 36, g: 91, b: 231, a: 0.
|
|
935
|
-
$aliasedFrom: 'color.primary.
|
|
989
|
+
value: 'var(--lumx-color-primary-L5)',
|
|
990
|
+
attributes: { hex: '245be7', rgb: { r: 36, g: 91, b: 231, a: 0.1 } },
|
|
991
|
+
$aliasedFrom: 'color.primary.L5',
|
|
936
992
|
},
|
|
937
993
|
},
|
|
938
994
|
},
|
|
939
995
|
'state-active': {
|
|
940
|
-
'border-width': { value: '
|
|
996
|
+
'border-width': { value: '1px' },
|
|
941
997
|
'theme-light': {
|
|
942
|
-
'border-color': {
|
|
998
|
+
'border-color': {
|
|
999
|
+
value: 'var(--lumx-color-primary-N)',
|
|
1000
|
+
attributes: { hex: '245be7', rgb: { r: 36, g: 91, b: 231, a: 1 } },
|
|
1001
|
+
$aliasedFrom: 'color.primary.N',
|
|
1002
|
+
},
|
|
943
1003
|
'background-color': {
|
|
944
|
-
value: 'var(--lumx-color-primary-
|
|
945
|
-
attributes: { hex: '245be7', rgb: { r: 36, g: 91, b: 231, a: 0.
|
|
946
|
-
$aliasedFrom: 'color.primary.
|
|
1004
|
+
value: 'var(--lumx-color-primary-L4)',
|
|
1005
|
+
attributes: { hex: '245be7', rgb: { r: 36, g: 91, b: 231, a: 0.2 } },
|
|
1006
|
+
$aliasedFrom: 'color.primary.L4',
|
|
947
1007
|
},
|
|
948
1008
|
},
|
|
949
1009
|
},
|
|
@@ -1228,9 +1288,9 @@ export const DESIGN_TOKENS = {
|
|
|
1228
1288
|
$aliasedFrom: 'color.dark.L6',
|
|
1229
1289
|
},
|
|
1230
1290
|
'border-color': {
|
|
1231
|
-
value: 'var(--lumx-color-dark-
|
|
1232
|
-
attributes: { hex: '000000', rgb: { r: 0, g: 0, b: 0, a: 0.
|
|
1233
|
-
$aliasedFrom: 'color.dark.
|
|
1291
|
+
value: 'var(--lumx-color-dark-L3)',
|
|
1292
|
+
attributes: { hex: '000000', rgb: { r: 0, g: 0, b: 0, a: 0.38 } },
|
|
1293
|
+
$aliasedFrom: 'color.dark.L3',
|
|
1234
1294
|
},
|
|
1235
1295
|
content: {
|
|
1236
1296
|
color: {
|
|
@@ -1312,9 +1372,9 @@ export const DESIGN_TOKENS = {
|
|
|
1312
1372
|
$aliasedFrom: 'color.dark.L5',
|
|
1313
1373
|
},
|
|
1314
1374
|
'border-color': {
|
|
1315
|
-
value: 'var(--lumx-color-dark-
|
|
1316
|
-
attributes: { hex: '000000', rgb: { r: 0, g: 0, b: 0, a: 0.
|
|
1317
|
-
$aliasedFrom: 'color.dark.
|
|
1375
|
+
value: 'var(--lumx-color-dark-L3)',
|
|
1376
|
+
attributes: { hex: '000000', rgb: { r: 0, g: 0, b: 0, a: 0.38 } },
|
|
1377
|
+
$aliasedFrom: 'color.dark.L3',
|
|
1318
1378
|
},
|
|
1319
1379
|
content: {
|
|
1320
1380
|
color: {
|