@lumx/core 2.2.3 → 2.2.6

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 (21) hide show
  1. package/css/design-tokens.css +73 -73
  2. package/js/constants/design-tokens.js +485 -485
  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 +178 -178
  6. package/js/custom-colors.min.js.map +1 -1
  7. package/js/date-picker.min.js.map +1 -1
  8. package/js/utils.min.js.map +1 -1
  9. package/lumx.css +1 -1
  10. package/lumx.min.css +1 -1
  11. package/package.json +2 -2
  12. package/scss/_design-tokens.scss +73 -73
  13. package/scss/components/badge/_index.scss +5 -1
  14. package/scss/components/flag/_index.scss +3 -3
  15. package/scss/components/icon/_index.scss +22 -0
  16. package/scss/components/icon/_mixins.scss +7 -2
  17. package/scss/components/message/_index.scss +1 -5
  18. package/scss/components/notification/_index.scss +6 -1
  19. package/scss/components/skeleton/_mixins.scss +0 -1
  20. package/scss/components/thumbnail/_index.scss +5 -2
  21. package/scss/core/state/_mixins.scss +12 -2
package/css/design-tokens.css CHANGED
@@ -1,6 +1,6 @@
1
1
  /**
2
2
  * Do not edit directly
3
- * Generated on Wed, 12 Jan 2022 16:44:48 GMT
3
+ * Generated on Wed, 02 Mar 2022 10:51:14 GMT
4
4
  */
5
5
 
6
6
  :root {
@@ -366,42 +366,42 @@
366
366
  --lumx-color-light-L4: rgba(255, 255, 255, 0.4); /* Base light color with 40% opacity */
367
367
  --lumx-color-light-L5: rgba(255, 255, 255, 0.2); /* Base light color with 20% opacity */
368
368
  --lumx-color-light-L6: rgba(255, 255, 255, 0.1); /* Base light color with 10% opacity */
369
- --lumx-color-blue-D2: rgb(25, 118, 210); /* Darkest blue color */
370
- --lumx-color-blue-D1: rgb(30, 136, 229); /* Dark blue color */
371
- --lumx-color-blue-N: rgb(33, 150, 243); /* Neutral blue color */
372
- --lumx-color-blue-L1: rgba(33, 150, 243, 0.8); /* Base blue color with 80% opacity */
373
- --lumx-color-blue-L2: rgba(33, 150, 243, 0.6); /* Base blue color with 60% opacity */
374
- --lumx-color-blue-L3: rgba(33, 150, 243, 0.4); /* Base blue color with 40% opacity */
375
- --lumx-color-blue-L4: rgba(33, 150, 243, 0.2); /* Base blue color with 20% opacity */
376
- --lumx-color-blue-L5: rgba(33, 150, 243, 0.1); /* Base blue color with 10% opacity */
377
- --lumx-color-blue-L6: rgba(33, 150, 243, 0.05); /* Base blue color with 5% opacity */
378
- --lumx-color-green-D2: rgb(56, 142, 60); /* Darkest green color */
379
- --lumx-color-green-D1: rgb(67, 160, 71); /* Dark green color */
380
- --lumx-color-green-N: rgb(76, 175, 80); /* Neutral green color */
381
- --lumx-color-green-L1: rgba(76, 175, 80, 0.8); /* Base green color with 80% opacity */
382
- --lumx-color-green-L2: rgba(76, 175, 80, 0.6); /* Base green color with 60% opacity */
383
- --lumx-color-green-L3: rgba(76, 175, 80, 0.4); /* Base green color with 40% opacity */
384
- --lumx-color-green-L4: rgba(76, 175, 80, 0.2); /* Base green color with 20% opacity */
385
- --lumx-color-green-L5: rgba(76, 175, 80, 0.1); /* Base green color with 10% opacity */
386
- --lumx-color-green-L6: rgba(76, 175, 80, 0.05); /* Base green color with 5% opacity */
387
- --lumx-color-yellow-D2: rgb(255, 111, 0); /* Darkest yellow color */
388
- --lumx-color-yellow-D1: rgb(255, 143, 0); /* Dark yellow color */
389
- --lumx-color-yellow-N: rgb(255, 179, 0); /* Neutral yellow color */
390
- --lumx-color-yellow-L1: rgba(255, 179, 0, 0.8); /* Base yellow color with 80% opacity */
391
- --lumx-color-yellow-L2: rgba(255, 179, 0, 0.7); /* Base yellow color with 70% opacity */
392
- --lumx-color-yellow-L3: rgba(255, 179, 0, 0.6); /* Base yellow color with 60% opacity */
393
- --lumx-color-yellow-L4: rgba(255, 179, 0, 0.4); /* Base yellow color with 40% opacity */
394
- --lumx-color-yellow-L5: rgba(255, 179, 0, 0.2); /* Base yellow color with 20% opacity */
395
- --lumx-color-yellow-L6: rgba(255, 179, 0, 0.1); /* Base yellow color with 10% opacity */
396
- --lumx-color-red-D2: rgb(211, 47, 47); /* Darkest red color */
397
- --lumx-color-red-D1: rgb(229, 57, 53); /* Dark red color */
398
- --lumx-color-red-N: rgb(244, 67, 54); /* Neutral red color */
399
- --lumx-color-red-L1: rgba(244, 67, 54, 0.8); /* Base red color with 80% opacity */
400
- --lumx-color-red-L2: rgba(244, 67, 54, 0.6); /* Base red color with 60% opacity */
401
- --lumx-color-red-L3: rgba(244, 67, 54, 0.4); /* Base red color with 40% opacity */
402
- --lumx-color-red-L4: rgba(244, 67, 54, 0.2); /* Base red color with 20% opacity */
403
- --lumx-color-red-L5: rgba(244, 67, 54, 0.1); /* Base red color with 10% opacity */
404
- --lumx-color-red-L6: rgba(244, 67, 54, 0.05); /* Base red color with 5% opacity */
369
+ --lumx-color-blue-D2: rgb(21, 70, 193); /* Darkest blue color */
370
+ --lumx-color-blue-D1: rgb(24, 78, 216); /* Dark blue color */
371
+ --lumx-color-blue-N: rgb(36, 91, 231); /* Neutral blue color */
372
+ --lumx-color-blue-L1: rgba(36, 91, 231, 0.8); /* Base blue color with 80% opacity */
373
+ --lumx-color-blue-L2: rgba(36, 91, 231, 0.6); /* Base blue color with 60% opacity */
374
+ --lumx-color-blue-L3: rgba(36, 91, 231, 0.4); /* Base blue color with 40% opacity */
375
+ --lumx-color-blue-L4: rgba(36, 91, 231, 0.2); /* Base blue color with 20% opacity */
376
+ --lumx-color-blue-L5: rgba(36, 91, 231, 0.1); /* Base blue color with 10% opacity */
377
+ --lumx-color-blue-L6: rgba(36, 91, 231, 0.05); /* Base blue color with 5% opacity */
378
+ --lumx-color-green-D2: rgb(26, 110, 89); /* Darkest green color */
379
+ --lumx-color-green-D1: rgb(23, 122, 97); /* Dark green color */
380
+ --lumx-color-green-N: rgb(19, 134, 105); /* Neutral green color */
381
+ --lumx-color-green-L1: rgba(19, 134, 105, 0.8); /* Base green color with 80% opacity */
382
+ --lumx-color-green-L2: rgba(19, 134, 105, 0.6); /* Base green color with 60% opacity */
383
+ --lumx-color-green-L3: rgba(19, 134, 105, 0.4); /* Base green color with 40% opacity */
384
+ --lumx-color-green-L4: rgba(19, 134, 105, 0.2); /* Base green color with 20% opacity */
385
+ --lumx-color-green-L5: rgba(19, 134, 105, 0.1); /* Base green color with 10% opacity */
386
+ --lumx-color-green-L6: rgba(19, 134, 105, 0.05); /* Base green color with 5% opacity */
387
+ --lumx-color-yellow-D2: rgb(255, 161, 37); /* Darkest yellow color */
388
+ --lumx-color-yellow-D1: rgb(255, 179, 37); /* Dark yellow color */
389
+ --lumx-color-yellow-N: rgb(255, 196, 37); /* Neutral yellow color */
390
+ --lumx-color-yellow-L1: rgba(255, 196, 37, 0.9); /* Base yellow color with 80% opacity */
391
+ --lumx-color-yellow-L2: rgba(255, 196, 37, 0.8); /* Base yellow color with 70% opacity */
392
+ --lumx-color-yellow-L3: rgba(255, 196, 37, 0.6); /* Base yellow color with 60% opacity */
393
+ --lumx-color-yellow-L4: rgba(255, 196, 37, 0.48); /* Base yellow color with 40% opacity */
394
+ --lumx-color-yellow-L5: rgba(255, 196, 37, 0.24); /* Base yellow color with 20% opacity */
395
+ --lumx-color-yellow-L6: rgba(255, 196, 37, 0.12); /* Base yellow color with 10% opacity */
396
+ --lumx-color-red-D2: rgb(190, 30, 70); /* Darkest red color */
397
+ --lumx-color-red-D1: rgb(212, 33, 72); /* Dark red color */
398
+ --lumx-color-red-N: rgb(223, 48, 80); /* Neutral red color */
399
+ --lumx-color-red-L1: rgba(223, 48, 80, 0.8); /* Base red color with 80% opacity */
400
+ --lumx-color-red-L2: rgba(223, 48, 80, 0.6); /* Base red color with 60% opacity */
401
+ --lumx-color-red-L3: rgba(223, 48, 80, 0.4); /* Base red color with 40% opacity */
402
+ --lumx-color-red-L4: rgba(223, 48, 80, 0.2); /* Base red color with 20% opacity */
403
+ --lumx-color-red-L5: rgba(223, 48, 80, 0.1); /* Base red color with 10% opacity */
404
+ --lumx-color-red-L6: rgba(223, 48, 80, 0.05); /* Base red color with 5% opacity */
405
405
  --lumx-color-grey-N: rgb(117, 117, 117); /* Neutral grey color */
406
406
  --lumx-color-grey-L1: rgba(117, 117, 117, 0.8); /* Base grey color with 80% opacity */
407
407
  --lumx-color-grey-L2: rgba(117, 117, 117, 0.6); /* Base grey color with 60% opacity */
@@ -409,33 +409,33 @@
409
409
  --lumx-color-grey-L4: rgba(117, 117, 117, 0.2); /* Base grey color with 20% opacity */
410
410
  --lumx-color-grey-L5: rgba(117, 117, 117, 0.1); /* Base grey color with 10% opacity */
411
411
  --lumx-color-grey-L6: rgba(117, 117, 117, 0.05); /* Base grey color with 5% opacity */
412
- --lumx-color-primary-D2: rgb(25, 118, 210); /* Darkest blue color */
413
- --lumx-color-primary-D1: rgb(30, 136, 229); /* Dark blue color */
414
- --lumx-color-primary-N: rgb(33, 150, 243); /* Neutral blue color */
415
- --lumx-color-primary-L1: rgba(33, 150, 243, 0.8); /* Base blue color with 80% opacity */
416
- --lumx-color-primary-L2: rgba(33, 150, 243, 0.6); /* Base blue color with 60% opacity */
417
- --lumx-color-primary-L3: rgba(33, 150, 243, 0.4); /* Base blue color with 40% opacity */
418
- --lumx-color-primary-L4: rgba(33, 150, 243, 0.2); /* Base blue color with 20% opacity */
419
- --lumx-color-primary-L5: rgba(33, 150, 243, 0.1); /* Base blue color with 10% opacity */
420
- --lumx-color-primary-L6: rgba(33, 150, 243, 0.05); /* Base blue color with 5% opacity */
421
- --lumx-color-secondary-D2: rgb(56, 142, 60); /* Darkest green color */
422
- --lumx-color-secondary-D1: rgb(67, 160, 71); /* Dark green color */
423
- --lumx-color-secondary-N: rgb(76, 175, 80); /* Neutral green color */
424
- --lumx-color-secondary-L1: rgba(76, 175, 80, 0.8); /* Base green color with 80% opacity */
425
- --lumx-color-secondary-L2: rgba(76, 175, 80, 0.6); /* Base green color with 60% opacity */
426
- --lumx-color-secondary-L3: rgba(76, 175, 80, 0.4); /* Base green color with 40% opacity */
427
- --lumx-color-secondary-L4: rgba(76, 175, 80, 0.2); /* Base green color with 20% opacity */
428
- --lumx-color-secondary-L5: rgba(76, 175, 80, 0.1); /* Base green color with 10% opacity */
429
- --lumx-color-secondary-L6: rgba(76, 175, 80, 0.05); /* Base green color with 5% opacity */
430
- --lumx-color-accent-D2: rgb(56, 142, 60); /* Darkest green color */
431
- --lumx-color-accent-D1: rgb(67, 160, 71); /* Dark green color */
432
- --lumx-color-accent-N: rgb(76, 175, 80); /* Neutral green color */
433
- --lumx-color-accent-L1: rgba(76, 175, 80, 0.8); /* Base green color with 80% opacity */
434
- --lumx-color-accent-L2: rgba(76, 175, 80, 0.6); /* Base green color with 60% opacity */
435
- --lumx-color-accent-L3: rgba(76, 175, 80, 0.4); /* Base green color with 40% opacity */
436
- --lumx-color-accent-L4: rgba(76, 175, 80, 0.2); /* Base green color with 20% opacity */
437
- --lumx-color-accent-L5: rgba(76, 175, 80, 0.1); /* Base green color with 10% opacity */
438
- --lumx-color-accent-L6: rgba(76, 175, 80, 0.05); /* Base green color with 5% opacity */
412
+ --lumx-color-primary-D2: rgb(21, 70, 193); /* Darkest blue color */
413
+ --lumx-color-primary-D1: rgb(24, 78, 216); /* Dark blue color */
414
+ --lumx-color-primary-N: rgb(36, 91, 231); /* Neutral blue color */
415
+ --lumx-color-primary-L1: rgba(36, 91, 231, 0.8); /* Base blue color with 80% opacity */
416
+ --lumx-color-primary-L2: rgba(36, 91, 231, 0.6); /* Base blue color with 60% opacity */
417
+ --lumx-color-primary-L3: rgba(36, 91, 231, 0.4); /* Base blue color with 40% opacity */
418
+ --lumx-color-primary-L4: rgba(36, 91, 231, 0.2); /* Base blue color with 20% opacity */
419
+ --lumx-color-primary-L5: rgba(36, 91, 231, 0.1); /* Base blue color with 10% opacity */
420
+ --lumx-color-primary-L6: rgba(36, 91, 231, 0.05); /* Base blue color with 5% opacity */
421
+ --lumx-color-secondary-D2: rgb(26, 110, 89); /* Darkest green color */
422
+ --lumx-color-secondary-D1: rgb(23, 122, 97); /* Dark green color */
423
+ --lumx-color-secondary-N: rgb(19, 134, 105); /* Neutral green color */
424
+ --lumx-color-secondary-L1: rgba(19, 134, 105, 0.8); /* Base green color with 80% opacity */
425
+ --lumx-color-secondary-L2: rgba(19, 134, 105, 0.6); /* Base green color with 60% opacity */
426
+ --lumx-color-secondary-L3: rgba(19, 134, 105, 0.4); /* Base green color with 40% opacity */
427
+ --lumx-color-secondary-L4: rgba(19, 134, 105, 0.2); /* Base green color with 20% opacity */
428
+ --lumx-color-secondary-L5: rgba(19, 134, 105, 0.1); /* Base green color with 10% opacity */
429
+ --lumx-color-secondary-L6: rgba(19, 134, 105, 0.05); /* Base green color with 5% opacity */
430
+ --lumx-color-accent-D2: rgb(26, 110, 89); /* Darkest green color */
431
+ --lumx-color-accent-D1: rgb(23, 122, 97); /* Dark green color */
432
+ --lumx-color-accent-N: rgb(19, 134, 105); /* Neutral green color */
433
+ --lumx-color-accent-L1: rgba(19, 134, 105, 0.8); /* Base green color with 80% opacity */
434
+ --lumx-color-accent-L2: rgba(19, 134, 105, 0.6); /* Base green color with 60% opacity */
435
+ --lumx-color-accent-L3: rgba(19, 134, 105, 0.4); /* Base green color with 40% opacity */
436
+ --lumx-color-accent-L4: rgba(19, 134, 105, 0.2); /* Base green color with 20% opacity */
437
+ --lumx-color-accent-L5: rgba(19, 134, 105, 0.1); /* Base green color with 10% opacity */
438
+ --lumx-color-accent-L6: rgba(19, 134, 105, 0.05); /* Base green color with 5% opacity */
439
439
  --lumx-color-black-N: rgba(0, 0, 0, 0.87); /* Neutral dark color */
440
440
  --lumx-color-black-L1: rgba(0, 0, 0, 0.7); /* Base dark color with 70% opacity */
441
441
  --lumx-color-black-L2: rgba(0, 0, 0, 0.54); /* Base dark color with 54% opacity */
@@ -450,15 +450,15 @@
450
450
  --lumx-color-white-L4: rgba(255, 255, 255, 0.4); /* Base light color with 40% opacity */
451
451
  --lumx-color-white-L5: rgba(255, 255, 255, 0.2); /* Base light color with 20% opacity */
452
452
  --lumx-color-white-L6: rgba(255, 255, 255, 0.1); /* Base light color with 10% opacity */
453
- --lumx-color-orange-D2: rgb(255, 111, 0); /* Darkest yellow color */
454
- --lumx-color-orange-D1: rgb(255, 143, 0); /* Dark yellow color */
455
- --lumx-color-orange-N: rgb(255, 179, 0); /* Neutral yellow color */
456
- --lumx-color-orange-L1: rgba(255, 179, 0, 0.8); /* Base yellow color with 80% opacity */
457
- --lumx-color-orange-L2: rgba(255, 179, 0, 0.7); /* Base yellow color with 70% opacity */
458
- --lumx-color-orange-L3: rgba(255, 179, 0, 0.6); /* Base yellow color with 60% opacity */
459
- --lumx-color-orange-L4: rgba(255, 179, 0, 0.4); /* Base yellow color with 40% opacity */
460
- --lumx-color-orange-L5: rgba(255, 179, 0, 0.2); /* Base yellow color with 20% opacity */
461
- --lumx-color-orange-L6: rgba(255, 179, 0, 0.1); /* Base yellow color with 10% opacity */
453
+ --lumx-color-orange-D2: rgb(255, 161, 37); /* Darkest yellow color */
454
+ --lumx-color-orange-D1: rgb(255, 179, 37); /* Dark yellow color */
455
+ --lumx-color-orange-N: rgb(255, 196, 37); /* Neutral yellow color */
456
+ --lumx-color-orange-L1: rgba(255, 196, 37, 0.9); /* Base yellow color with 80% opacity */
457
+ --lumx-color-orange-L2: rgba(255, 196, 37, 0.8); /* Base yellow color with 70% opacity */
458
+ --lumx-color-orange-L3: rgba(255, 196, 37, 0.6); /* Base yellow color with 60% opacity */
459
+ --lumx-color-orange-L4: rgba(255, 196, 37, 0.48); /* Base yellow color with 40% opacity */
460
+ --lumx-color-orange-L5: rgba(255, 196, 37, 0.24); /* Base yellow color with 20% opacity */
461
+ --lumx-color-orange-L6: rgba(255, 196, 37, 0.12); /* Base yellow color with 10% opacity */
462
462
  --lumx-size-xxs: 14px;
463
463
  --lumx-size-xs: 20px;
464
464
  --lumx-size-s: 24px;