@lumx/core 3.9.6-alpha.1 → 3.9.6-alpha.3

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 (14) hide show
  1. package/css/design-tokens.css +64 -64
  2. package/js/constants/design-tokens.js +90 -230
  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 +87 -143
  6. package/lumx.css +1 -1
  7. package/lumx.min.css +1 -1
  8. package/package.json +1 -1
  9. package/scss/_design-tokens.scss +64 -64
  10. package/scss/components/button/_index.scss +17 -15
  11. package/scss/components/button/_mixins.scss +7 -5
  12. package/scss/components/date-picker/_index.scss +0 -4
  13. package/scss/components/navigation/_index.scss +16 -2
  14. package/scss/components/navigation/_mixins.scss +10 -16
package/js/constants/design-tokens.ts CHANGED
@@ -1,6 +1,6 @@
1
1
  /**
2
2
  * Do not edit directly
3
- * Generated on Tue, 03 Dec 2024 14:32:53 GMT
3
+ * Generated on Fri, 06 Dec 2024 10:54:50 GMT
4
4
  */
5
5
 
6
6
  export const DESIGN_TOKENS = {
@@ -283,24 +283,20 @@ export const DESIGN_TOKENS = {
283
283
  },
284
284
  'emphasis-selected': {
285
285
  'state-default': {
286
- padding: { horizontal: { value: 'var(--lumx-spacing-unit-big)', $aliasedFrom: 'spacing.unit.big' } },
287
- 'border-width': { value: '1px' },
286
+ padding: { horizontal: { comment: 'deprecated (use base emphasis padding)', value: 'inherit' } },
287
+ 'border-width': { value: '0' },
288
288
  'theme-light': {
289
289
  'background-color': {
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',
290
+ value: 'var(--lumx-color-primary-L5)',
291
+ attributes: { hex: '245be7', rgb: { r: 36, g: 91, b: 231, a: 0.1 } },
292
+ $aliasedFrom: 'color.primary.L5',
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': {
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
- },
299
+ 'border-color': { value: 'transparent' },
304
300
  },
305
301
  'theme-dark': {
306
302
  'background-color': {
@@ -313,32 +309,24 @@ export const DESIGN_TOKENS = {
313
309
  attributes: { hex: 'ffffff', rgb: { r: 255, g: 255, b: 255, a: 1 } },
314
310
  $aliasedFrom: 'color.light.N',
315
311
  },
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
- },
312
+ 'border-color': { value: 'transparent' },
321
313
  },
322
314
  },
323
315
  'state-hover': {
324
- padding: { horizontal: { value: 'var(--lumx-spacing-unit-big)', $aliasedFrom: 'spacing.unit.big' } },
325
- 'border-width': { value: '1px' },
316
+ padding: { horizontal: { comment: 'deprecated (use base emphasis padding)', value: 'inherit' } },
317
+ 'border-width': { value: '0' },
326
318
  'theme-light': {
327
319
  'background-color': {
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',
320
+ value: 'var(--lumx-color-primary-L4)',
321
+ attributes: { hex: '245be7', rgb: { r: 36, g: 91, b: 231, a: 0.2 } },
322
+ $aliasedFrom: 'color.primary.L4',
331
323
  },
332
324
  color: {
333
325
  value: 'var(--lumx-color-primary-D2)',
334
326
  attributes: { hex: '1546c1', rgb: { r: 21, g: 70, b: 193, a: 1 } },
335
327
  $aliasedFrom: 'color.primary.D2',
336
328
  },
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
- },
329
+ 'border-color': { value: 'transparent' },
342
330
  },
343
331
  'theme-dark': {
344
332
  'background-color': {
@@ -351,32 +339,24 @@ export const DESIGN_TOKENS = {
351
339
  attributes: { hex: 'ffffff', rgb: { r: 255, g: 255, b: 255, a: 1 } },
352
340
  $aliasedFrom: 'color.light.N',
353
341
  },
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
- },
342
+ 'border-color': { value: 'transparent' },
359
343
  },
360
344
  },
361
345
  'state-active': {
362
- padding: { horizontal: { value: 'var(--lumx-spacing-unit-big)', $aliasedFrom: 'spacing.unit.big' } },
363
- 'border-width': { value: '1px' },
346
+ padding: { horizontal: { comment: 'deprecated (use base emphasis padding)', value: 'inherit' } },
347
+ 'border-width': { value: '0' },
364
348
  'theme-light': {
365
349
  'background-color': {
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',
350
+ value: 'var(--lumx-color-primary-L3)',
351
+ attributes: { hex: '245be7', rgb: { r: 36, g: 91, b: 231, a: 0.4 } },
352
+ $aliasedFrom: 'color.primary.L3',
369
353
  },
370
354
  color: {
371
355
  value: 'var(--lumx-color-primary-D2)',
372
356
  attributes: { hex: '1546c1', rgb: { r: 21, g: 70, b: 193, a: 1 } },
373
357
  $aliasedFrom: 'color.primary.D2',
374
358
  },
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
- },
359
+ 'border-color': { value: 'transparent' },
380
360
  },
381
361
  'theme-dark': {
382
362
  'background-color': {
@@ -389,11 +369,7 @@ export const DESIGN_TOKENS = {
389
369
  attributes: { hex: 'ffffff', rgb: { r: 255, g: 255, b: 255, a: 1 } },
390
370
  $aliasedFrom: 'color.light.N',
391
371
  },
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
- },
372
+ 'border-color': { value: 'transparent' },
397
373
  },
398
374
  },
399
375
  },
@@ -401,25 +377,17 @@ export const DESIGN_TOKENS = {
401
377
  chip: {
402
378
  'emphasis-selected': {
403
379
  'state-default': {
404
- 'border-width': { value: '1px' },
380
+ 'border-width': { value: '0' },
405
381
  'theme-light': {
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
- },
382
+ 'border-color': { value: 'transparent' },
411
383
  'background-color': {
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',
384
+ value: 'var(--lumx-color-primary-L5)',
385
+ attributes: { hex: '245be7', rgb: { r: 36, g: 91, b: 231, a: 0.1 } },
386
+ $aliasedFrom: 'color.primary.L5',
415
387
  },
416
388
  },
417
389
  'theme-dark': {
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
- },
390
+ 'border-color': { value: 'transparent' },
423
391
  'background-color': {
424
392
  value: 'var(--lumx-color-light-L3)',
425
393
  attributes: { hex: 'ffffff', rgb: { r: 255, g: 255, b: 255, a: 0.6 } },
@@ -428,17 +396,13 @@ export const DESIGN_TOKENS = {
428
396
  },
429
397
  },
430
398
  'state-hover': {
431
- 'border-width': { value: '1px' },
399
+ 'border-width': { value: '0' },
432
400
  'theme-light': {
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
- },
401
+ 'border-color': { value: 'transparent' },
438
402
  'background-color': {
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',
403
+ value: 'var(--lumx-color-primary-L4)',
404
+ attributes: { hex: '245be7', rgb: { r: 36, g: 91, b: 231, a: 0.2 } },
405
+ $aliasedFrom: 'color.primary.L4',
442
406
  },
443
407
  },
444
408
  'theme-dark': {
@@ -451,25 +415,17 @@ export const DESIGN_TOKENS = {
451
415
  },
452
416
  },
453
417
  'state-active': {
454
- 'border-width': { value: '1px' },
418
+ 'border-width': { value: '0' },
455
419
  'theme-light': {
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
- },
420
+ 'border-color': { value: 'transparent' },
461
421
  'background-color': {
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',
422
+ value: 'var(--lumx-color-primary-L3)',
423
+ attributes: { hex: '245be7', rgb: { r: 36, g: 91, b: 231, a: 0.4 } },
424
+ $aliasedFrom: 'color.primary.L3',
465
425
  },
466
426
  },
467
427
  'theme-dark': {
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
- },
428
+ 'border-color': { value: 'transparent' },
473
429
  'background-color': {
474
430
  value: 'var(--lumx-color-light-L5)',
475
431
  attributes: { hex: 'ffffff', rgb: { r: 255, g: 255, b: 255, a: 0.2 } },
@@ -544,10 +500,10 @@ export const DESIGN_TOKENS = {
544
500
  'emphasis-low': {
545
501
  'state-default': {
546
502
  border: {
547
- top: { width: { value: '0' } },
548
- right: { width: { value: '0' } },
549
- bottom: { width: { value: '0' } },
550
- left: { width: { value: '0' } },
503
+ top: { width: { value: '0px' } },
504
+ right: { width: { value: '0px' } },
505
+ bottom: { width: { value: '0px' } },
506
+ left: { width: { value: '0px' } },
551
507
  },
552
508
  'theme-light': {
553
509
  'background-color': { value: 'transparent' },
@@ -600,10 +556,10 @@ export const DESIGN_TOKENS = {
600
556
  },
601
557
  'state-hover': {
602
558
  border: {
603
- top: { width: { value: '0' } },
604
- right: { width: { value: '0' } },
605
- bottom: { width: { value: '0' } },
606
- left: { width: { value: '0' } },
559
+ top: { width: { value: '0px' } },
560
+ right: { width: { value: '0px' } },
561
+ bottom: { width: { value: '0px' } },
562
+ left: { width: { value: '0px' } },
607
563
  },
608
564
  'theme-light': {
609
565
  'background-color': {
@@ -672,10 +628,10 @@ export const DESIGN_TOKENS = {
672
628
  },
673
629
  'state-active': {
674
630
  border: {
675
- top: { width: { value: '0' } },
676
- right: { width: { value: '0' } },
677
- bottom: { width: { value: '0' } },
678
- left: { width: { value: '0' } },
631
+ top: { width: { value: '0px' } },
632
+ right: { width: { value: '0px' } },
633
+ bottom: { width: { value: '0px' } },
634
+ left: { width: { value: '0px' } },
679
635
  },
680
636
  'theme-light': {
681
637
  'background-color': {
@@ -746,16 +702,16 @@ export const DESIGN_TOKENS = {
746
702
  'emphasis-selected': {
747
703
  'state-default': {
748
704
  border: {
749
- top: { width: { value: '1px' } },
750
- right: { width: { value: '1px' } },
751
- bottom: { width: { value: '1px' } },
752
- left: { width: { value: '1px' } },
705
+ top: { width: { value: '0px' } },
706
+ right: { width: { value: '0px' } },
707
+ bottom: { width: { value: '0px' } },
708
+ left: { width: { value: '0px' } },
753
709
  },
754
710
  'theme-light': {
755
711
  'background-color': {
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',
712
+ value: 'var(--lumx-color-primary-L5)',
713
+ attributes: { hex: '245be7', rgb: { r: 36, g: 91, b: 231, a: 0.1 } },
714
+ $aliasedFrom: 'color.primary.L5',
759
715
  },
760
716
  'border-color': {
761
717
  value: 'var(--lumx-color-primary-N)',
@@ -810,16 +766,16 @@ export const DESIGN_TOKENS = {
810
766
  },
811
767
  'state-hover': {
812
768
  border: {
813
- top: { width: { value: '1px' } },
814
- right: { width: { value: '1px' } },
815
- bottom: { width: { value: '1px' } },
816
- left: { width: { value: '1px' } },
769
+ top: { width: { value: '0px' } },
770
+ right: { width: { value: '0px' } },
771
+ bottom: { width: { value: '0px' } },
772
+ left: { width: { value: '0px' } },
817
773
  },
818
774
  'theme-light': {
819
775
  'background-color': {
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',
776
+ value: 'var(--lumx-color-primary-L4)',
777
+ attributes: { hex: '245be7', rgb: { r: 36, g: 91, b: 231, a: 0.2 } },
778
+ $aliasedFrom: 'color.primary.L4',
823
779
  },
824
780
  'border-color': {
825
781
  value: 'var(--lumx-color-primary-N)',
@@ -882,16 +838,16 @@ export const DESIGN_TOKENS = {
882
838
  },
883
839
  'state-active': {
884
840
  border: {
885
- top: { width: { value: '1px' } },
886
- right: { width: { value: '1px' } },
887
- bottom: { width: { value: '1px' } },
888
- left: { width: { value: '1px' } },
841
+ top: { width: { value: '0px' } },
842
+ right: { width: { value: '0px' } },
843
+ bottom: { width: { value: '0px' } },
844
+ left: { width: { value: '0px' } },
889
845
  },
890
846
  'theme-light': {
891
847
  'background-color': {
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',
848
+ value: 'var(--lumx-color-primary-L3)',
849
+ attributes: { hex: '245be7', rgb: { r: 36, g: 91, b: 231, a: 0.4 } },
850
+ $aliasedFrom: 'color.primary.L3',
895
851
  },
896
852
  'border-color': {
897
853
  value: 'var(--lumx-color-primary-N)',
@@ -959,47 +915,35 @@ export const DESIGN_TOKENS = {
959
915
  item: {
960
916
  'emphasis-selected': {
961
917
  'state-default': {
962
- 'border-width': { value: '1px' },
918
+ 'border-width': { value: '0' },
963
919
  'theme-light': {
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
- },
920
+ 'border-color': { value: 'transparent' },
969
921
  'background-color': {
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',
922
+ value: 'var(--lumx-color-primary-L5)',
923
+ attributes: { hex: '245be7', rgb: { r: 36, g: 91, b: 231, a: 0.1 } },
924
+ $aliasedFrom: 'color.primary.L5',
973
925
  },
974
926
  },
975
927
  },
976
928
  'state-hover': {
977
- 'border-width': { value: '1px' },
929
+ 'border-width': { value: '0' },
978
930
  'theme-light': {
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
- },
931
+ 'border-color': { value: 'transparent' },
984
932
  'background-color': {
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',
933
+ value: 'var(--lumx-color-primary-L4)',
934
+ attributes: { hex: '245be7', rgb: { r: 36, g: 91, b: 231, a: 0.2 } },
935
+ $aliasedFrom: 'color.primary.L4',
988
936
  },
989
937
  },
990
938
  },
991
939
  'state-active': {
992
- 'border-width': { value: '1px' },
940
+ 'border-width': { value: '0' },
993
941
  'theme-light': {
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
- },
942
+ 'border-color': { value: 'transparent' },
999
943
  'background-color': {
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',
944
+ value: 'var(--lumx-color-primary-L3)',
945
+ attributes: { hex: '245be7', rgb: { r: 36, g: 91, b: 231, a: 0.4 } },
946
+ $aliasedFrom: 'color.primary.L3',
1003
947
  },
1004
948
  },
1005
949
  },