@lumx/core 3.9.6-alpha.9 → 3.9.7-alpha.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.
- package/css/design-tokens.css +47 -47
- package/js/constants/design-tokens.js +211 -71
- 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 +127 -71
- package/lumx.css +1 -1
- package/lumx.min.css +1 -1
- package/package.json +1 -1
- package/scss/_design-tokens.scss +47 -47
|
@@ -284,19 +284,23 @@ 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': {
|
|
@@ -309,24 +313,32 @@ export const DESIGN_TOKENS = {
|
|
|
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': {
|
|
@@ -339,24 +351,32 @@ export const DESIGN_TOKENS = {
|
|
|
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': {
|
|
@@ -369,7 +389,11 @@ export const DESIGN_TOKENS = {
|
|
|
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,17 +401,25 @@ 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
424
|
value: 'var(--lumx-color-light-L3)',
|
|
393
425
|
attributes: { hex: 'ffffff', rgb: { r: 255, g: 255, b: 255, a: 0.6 } },
|
|
@@ -396,13 +428,17 @@ export const DESIGN_TOKENS = {
|
|
|
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': {
|
|
@@ -415,17 +451,25 @@ export const DESIGN_TOKENS = {
|
|
|
415
451
|
},
|
|
416
452
|
},
|
|
417
453
|
'state-active': {
|
|
418
|
-
'border-width': { value: '
|
|
454
|
+
'border-width': { value: '1px' },
|
|
419
455
|
'theme-light': {
|
|
420
|
-
'border-color': {
|
|
456
|
+
'border-color': {
|
|
457
|
+
value: 'var(--lumx-color-primary-N)',
|
|
458
|
+
attributes: { hex: '245be7', rgb: { r: 36, g: 91, b: 231, a: 1 } },
|
|
459
|
+
$aliasedFrom: 'color.primary.N',
|
|
460
|
+
},
|
|
421
461
|
'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.
|
|
462
|
+
value: 'var(--lumx-color-primary-L4)',
|
|
463
|
+
attributes: { hex: '245be7', rgb: { r: 36, g: 91, b: 231, a: 0.2 } },
|
|
464
|
+
$aliasedFrom: 'color.primary.L4',
|
|
425
465
|
},
|
|
426
466
|
},
|
|
427
467
|
'theme-dark': {
|
|
428
|
-
'border-color': {
|
|
468
|
+
'border-color': {
|
|
469
|
+
value: 'var(--lumx-color-light-N)',
|
|
470
|
+
attributes: { hex: 'ffffff', rgb: { r: 255, g: 255, b: 255, a: 1 } },
|
|
471
|
+
$aliasedFrom: 'color.light.N',
|
|
472
|
+
},
|
|
429
473
|
'background-color': {
|
|
430
474
|
value: 'var(--lumx-color-light-L5)',
|
|
431
475
|
attributes: { hex: 'ffffff', rgb: { r: 255, g: 255, b: 255, a: 0.2 } },
|
|
@@ -702,16 +746,16 @@ export const DESIGN_TOKENS = {
|
|
|
702
746
|
'emphasis-selected': {
|
|
703
747
|
'state-default': {
|
|
704
748
|
border: {
|
|
705
|
-
top: { width: { value: '
|
|
706
|
-
right: { width: { value: '
|
|
707
|
-
bottom: { width: { value: '
|
|
708
|
-
left: { width: { value: '
|
|
749
|
+
top: { width: { value: '1px' } },
|
|
750
|
+
right: { width: { value: '1px' } },
|
|
751
|
+
bottom: { width: { value: '1px' } },
|
|
752
|
+
left: { width: { value: '1px' } },
|
|
709
753
|
},
|
|
710
754
|
'theme-light': {
|
|
711
755
|
'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.
|
|
756
|
+
value: 'var(--lumx-color-primary-L6)',
|
|
757
|
+
attributes: { hex: '245be7', rgb: { r: 36, g: 91, b: 231, a: 0.05 } },
|
|
758
|
+
$aliasedFrom: 'color.primary.L6',
|
|
715
759
|
},
|
|
716
760
|
'border-color': {
|
|
717
761
|
value: 'var(--lumx-color-primary-N)',
|
|
@@ -766,16 +810,16 @@ export const DESIGN_TOKENS = {
|
|
|
766
810
|
},
|
|
767
811
|
'state-hover': {
|
|
768
812
|
border: {
|
|
769
|
-
top: { width: { value: '
|
|
770
|
-
right: { width: { value: '
|
|
771
|
-
bottom: { width: { value: '
|
|
772
|
-
left: { width: { value: '
|
|
813
|
+
top: { width: { value: '1px' } },
|
|
814
|
+
right: { width: { value: '1px' } },
|
|
815
|
+
bottom: { width: { value: '1px' } },
|
|
816
|
+
left: { width: { value: '1px' } },
|
|
773
817
|
},
|
|
774
818
|
'theme-light': {
|
|
775
819
|
'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.
|
|
820
|
+
value: 'var(--lumx-color-primary-L5)',
|
|
821
|
+
attributes: { hex: '245be7', rgb: { r: 36, g: 91, b: 231, a: 0.1 } },
|
|
822
|
+
$aliasedFrom: 'color.primary.L5',
|
|
779
823
|
},
|
|
780
824
|
'border-color': {
|
|
781
825
|
value: 'var(--lumx-color-primary-N)',
|
|
@@ -838,16 +882,16 @@ export const DESIGN_TOKENS = {
|
|
|
838
882
|
},
|
|
839
883
|
'state-active': {
|
|
840
884
|
border: {
|
|
841
|
-
top: { width: { value: '
|
|
842
|
-
right: { width: { value: '
|
|
843
|
-
bottom: { width: { value: '
|
|
844
|
-
left: { width: { value: '
|
|
885
|
+
top: { width: { value: '1px' } },
|
|
886
|
+
right: { width: { value: '1px' } },
|
|
887
|
+
bottom: { width: { value: '1px' } },
|
|
888
|
+
left: { width: { value: '1px' } },
|
|
845
889
|
},
|
|
846
890
|
'theme-light': {
|
|
847
891
|
'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.
|
|
892
|
+
value: 'var(--lumx-color-primary-L4)',
|
|
893
|
+
attributes: { hex: '245be7', rgb: { r: 36, g: 91, b: 231, a: 0.2 } },
|
|
894
|
+
$aliasedFrom: 'color.primary.L4',
|
|
851
895
|
},
|
|
852
896
|
'border-color': {
|
|
853
897
|
value: 'var(--lumx-color-primary-N)',
|
|
@@ -915,35 +959,47 @@ export const DESIGN_TOKENS = {
|
|
|
915
959
|
item: {
|
|
916
960
|
'emphasis-selected': {
|
|
917
961
|
'state-default': {
|
|
918
|
-
'border-width': { value: '
|
|
962
|
+
'border-width': { value: '1px' },
|
|
919
963
|
'theme-light': {
|
|
920
|
-
'border-color': {
|
|
964
|
+
'border-color': {
|
|
965
|
+
value: 'var(--lumx-color-primary-N)',
|
|
966
|
+
attributes: { hex: '245be7', rgb: { r: 36, g: 91, b: 231, a: 1 } },
|
|
967
|
+
$aliasedFrom: 'color.primary.N',
|
|
968
|
+
},
|
|
921
969
|
'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.
|
|
970
|
+
value: 'var(--lumx-color-primary-L6)',
|
|
971
|
+
attributes: { hex: '245be7', rgb: { r: 36, g: 91, b: 231, a: 0.05 } },
|
|
972
|
+
$aliasedFrom: 'color.primary.L6',
|
|
925
973
|
},
|
|
926
974
|
},
|
|
927
975
|
},
|
|
928
976
|
'state-hover': {
|
|
929
|
-
'border-width': { value: '
|
|
977
|
+
'border-width': { value: '1px' },
|
|
930
978
|
'theme-light': {
|
|
931
|
-
'border-color': {
|
|
979
|
+
'border-color': {
|
|
980
|
+
value: 'var(--lumx-color-primary-N)',
|
|
981
|
+
attributes: { hex: '245be7', rgb: { r: 36, g: 91, b: 231, a: 1 } },
|
|
982
|
+
$aliasedFrom: 'color.primary.N',
|
|
983
|
+
},
|
|
932
984
|
'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.
|
|
985
|
+
value: 'var(--lumx-color-primary-L5)',
|
|
986
|
+
attributes: { hex: '245be7', rgb: { r: 36, g: 91, b: 231, a: 0.1 } },
|
|
987
|
+
$aliasedFrom: 'color.primary.L5',
|
|
936
988
|
},
|
|
937
989
|
},
|
|
938
990
|
},
|
|
939
991
|
'state-active': {
|
|
940
|
-
'border-width': { value: '
|
|
992
|
+
'border-width': { value: '1px' },
|
|
941
993
|
'theme-light': {
|
|
942
|
-
'border-color': {
|
|
994
|
+
'border-color': {
|
|
995
|
+
value: 'var(--lumx-color-primary-N)',
|
|
996
|
+
attributes: { hex: '245be7', rgb: { r: 36, g: 91, b: 231, a: 1 } },
|
|
997
|
+
$aliasedFrom: 'color.primary.N',
|
|
998
|
+
},
|
|
943
999
|
'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.
|
|
1000
|
+
value: 'var(--lumx-color-primary-L5)',
|
|
1001
|
+
attributes: { hex: '245be7', rgb: { r: 36, g: 91, b: 231, a: 0.1 } },
|
|
1002
|
+
$aliasedFrom: 'color.primary.L5',
|
|
947
1003
|
},
|
|
948
1004
|
},
|
|
949
1005
|
},
|