@lumx/core 3.9.5 → 3.9.6-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.
Files changed (14) hide show
  1. package/css/design-tokens.css +52 -28
  2. package/js/constants/design-tokens.js +381 -39
  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 +195 -39
  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 +116 -28
  10. package/scss/components/chip/_index.scss +75 -30
  11. package/scss/components/list/_mixins.scss +10 -6
  12. package/scss/components/navigation/_index.scss +43 -134
  13. package/scss/components/side-navigation/_index.scss +1 -1
  14. package/scss/core/state/_mixins.scss +35 -8
package/js/constants/design-tokens.ts CHANGED
@@ -1,6 +1,6 @@
1
1
  /**
2
2
  * Do not edit directly
3
- * Generated on Tue, 19 Mar 2024 13:36:08 GMT
3
+ * Generated on Tue, 03 Dec 2024 14:32:53 GMT
4
4
  */
5
5
 
6
6
  export const DESIGN_TOKENS = {
@@ -284,19 +284,23 @@ export const DESIGN_TOKENS = {
284
284
  'emphasis-selected': {
285
285
  'state-default': {
286
286
  padding: { horizontal: { value: 'var(--lumx-spacing-unit-big)', $aliasedFrom: 'spacing.unit.big' } },
287
- 'border-width': { value: '0' },
287
+ 'border-width': { value: '1px' },
288
288
  'theme-light': {
289
289
  'background-color': {
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',
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': { value: 'transparent' },
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': { value: 'transparent' },
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: { value: 'var(--lumx-spacing-unit-big)', $aliasedFrom: 'spacing.unit.big' } },
317
- 'border-width': { value: '0' },
325
+ 'border-width': { value: '1px' },
318
326
  'theme-light': {
319
327
  'background-color': {
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',
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': { value: 'transparent' },
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': { value: 'transparent' },
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: { value: 'var(--lumx-spacing-unit-big)', $aliasedFrom: 'spacing.unit.big' } },
347
- 'border-width': { value: '0' },
363
+ 'border-width': { value: '1px' },
348
364
  'theme-light': {
349
365
  'background-color': {
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',
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': { value: 'transparent' },
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,92 @@ 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
  },
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
+ },
397
+ },
398
+ },
399
+ },
400
+ },
401
+ chip: {
402
+ 'emphasis-selected': {
403
+ 'state-default': {
404
+ 'border-width': { value: '1px' },
405
+ '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
+ },
411
+ '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',
415
+ },
416
+ },
417
+ '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
+ },
423
+ 'background-color': {
424
+ value: 'var(--lumx-color-light-L3)',
425
+ attributes: { hex: 'ffffff', rgb: { r: 255, g: 255, b: 255, a: 0.6 } },
426
+ $aliasedFrom: 'color.light.L3',
427
+ },
428
+ },
429
+ },
430
+ 'state-hover': {
431
+ 'border-width': { value: '1px' },
432
+ '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
+ },
438
+ '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',
442
+ },
443
+ },
444
+ 'theme-dark': {
372
445
  'border-color': { value: 'transparent' },
446
+ 'background-color': {
447
+ value: 'var(--lumx-color-light-L4)',
448
+ attributes: { hex: 'ffffff', rgb: { r: 255, g: 255, b: 255, a: 0.4 } },
449
+ $aliasedFrom: 'color.light.L4',
450
+ },
451
+ },
452
+ },
453
+ 'state-active': {
454
+ 'border-width': { value: '1px' },
455
+ '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
+ },
461
+ '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',
465
+ },
466
+ },
467
+ '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
+ },
473
+ 'background-color': {
474
+ value: 'var(--lumx-color-light-L5)',
475
+ attributes: { hex: 'ffffff', rgb: { r: 255, g: 255, b: 255, a: 0.2 } },
476
+ $aliasedFrom: 'color.light.L5',
477
+ },
373
478
  },
374
479
  },
375
480
  },
@@ -641,16 +746,16 @@ export const DESIGN_TOKENS = {
641
746
  'emphasis-selected': {
642
747
  'state-default': {
643
748
  border: {
644
- top: { width: { value: '0' } },
645
- right: { width: { value: '0' } },
646
- bottom: { width: { value: '0' } },
647
- left: { width: { value: '0' } },
749
+ top: { width: { value: '1px' } },
750
+ right: { width: { value: '1px' } },
751
+ bottom: { width: { value: '1px' } },
752
+ left: { width: { value: '1px' } },
648
753
  },
649
754
  'theme-light': {
650
755
  'background-color': {
651
- value: 'var(--lumx-color-primary-L5)',
652
- attributes: { hex: '245be7', rgb: { r: 36, g: 91, b: 231, a: 0.1 } },
653
- $aliasedFrom: 'color.primary.L5',
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',
654
759
  },
655
760
  'border-color': {
656
761
  value: 'var(--lumx-color-primary-N)',
@@ -705,16 +810,16 @@ export const DESIGN_TOKENS = {
705
810
  },
706
811
  'state-hover': {
707
812
  border: {
708
- top: { width: { value: '0' } },
709
- right: { width: { value: '0' } },
710
- bottom: { width: { value: '0' } },
711
- left: { width: { value: '0' } },
813
+ top: { width: { value: '1px' } },
814
+ right: { width: { value: '1px' } },
815
+ bottom: { width: { value: '1px' } },
816
+ left: { width: { value: '1px' } },
712
817
  },
713
818
  'theme-light': {
714
819
  'background-color': {
715
- value: 'var(--lumx-color-primary-L4)',
716
- attributes: { hex: '245be7', rgb: { r: 36, g: 91, b: 231, a: 0.2 } },
717
- $aliasedFrom: 'color.primary.L4',
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',
718
823
  },
719
824
  'border-color': {
720
825
  value: 'var(--lumx-color-primary-N)',
@@ -777,16 +882,16 @@ export const DESIGN_TOKENS = {
777
882
  },
778
883
  'state-active': {
779
884
  border: {
780
- top: { width: { value: '0' } },
781
- right: { width: { value: '0' } },
782
- bottom: { width: { value: '0' } },
783
- left: { width: { value: '0' } },
885
+ top: { width: { value: '1px' } },
886
+ right: { width: { value: '1px' } },
887
+ bottom: { width: { value: '1px' } },
888
+ left: { width: { value: '1px' } },
784
889
  },
785
890
  'theme-light': {
786
891
  'background-color': {
787
- value: 'var(--lumx-color-primary-L3)',
788
- attributes: { hex: '245be7', rgb: { r: 36, g: 91, b: 231, a: 0.4 } },
789
- $aliasedFrom: 'color.primary.L3',
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',
790
895
  },
791
896
  'border-color': {
792
897
  value: 'var(--lumx-color-primary-N)',
@@ -850,6 +955,57 @@ export const DESIGN_TOKENS = {
850
955
  },
851
956
  },
852
957
  },
958
+ 'side-navigation': {
959
+ item: {
960
+ 'emphasis-selected': {
961
+ 'state-default': {
962
+ 'border-width': { value: '1px' },
963
+ '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
+ },
969
+ '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',
973
+ },
974
+ },
975
+ },
976
+ 'state-hover': {
977
+ 'border-width': { value: '1px' },
978
+ '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
+ },
984
+ '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',
988
+ },
989
+ },
990
+ },
991
+ 'state-active': {
992
+ 'border-width': { value: '1px' },
993
+ '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
+ },
999
+ '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',
1003
+ },
1004
+ },
1005
+ },
1006
+ },
1007
+ },
1008
+ },
853
1009
  tabs: {
854
1010
  link: {
855
1011
  height: { value: '48px' },