@lumx/core 2.1.8 → 2.1.9-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.
Files changed (24) hide show
  1. package/css/design-tokens.css +154 -99
  2. package/js/constants/design-tokens.js +210 -210
  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 +210 -210
  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 +159 -99
  13. package/scss/components/badge/_index.scss +5 -1
  14. package/scss/components/chip/_index.scss +6 -0
  15. package/scss/components/flag/_index.scss +8 -3
  16. package/scss/components/icon/_index.scss +22 -0
  17. package/scss/components/icon/_mixins.scss +12 -3
  18. package/scss/components/list/_mixins.scss +2 -1
  19. package/scss/components/message/_index.scss +1 -5
  20. package/scss/components/notification/_index.scss +6 -1
  21. package/scss/components/side-navigation/_mixins.scss +0 -1
  22. package/scss/components/thumbnail/_variables.scss +1 -1
  23. package/scss/components/uploader/_index.scss +2 -2
  24. package/scss/core/state/_mixins.scss +12 -6
package/css/design-tokens.css CHANGED
@@ -1,6 +1,6 @@
1
1
  /**
2
2
  * Do not edit directly
3
- * Generated on Tue, 19 Oct 2021 08:35:24 GMT
3
+ * Generated on Wed, 08 Dec 2021 08:10:59 GMT
4
4
  */
5
5
 
6
6
  :root {
@@ -48,7 +48,12 @@
48
48
  0,
49
49
  0.12
50
50
  ); /* Base dark color with 12% opacity */
51
- --lumx-button-emphasis-medium-state-default-theme-light-color: rgba(0, 0, 0, 0.87); /* Neutral dark color */
51
+ --lumx-button-emphasis-medium-state-default-theme-light-color: rgba(
52
+ 0,
53
+ 0,
54
+ 0,
55
+ 0.7
56
+ ); /* Base dark color with 70% opacity */
52
57
  --lumx-button-emphasis-medium-state-default-theme-light-border-color: transparent;
53
58
  --lumx-button-emphasis-medium-state-default-theme-dark-background-color: rgba(
54
59
  255,
@@ -66,7 +71,12 @@
66
71
  0,
67
72
  0.2
68
73
  ); /* Base dark color with 20% opacity */
69
- --lumx-button-emphasis-medium-state-hover-theme-light-color: rgba(0, 0, 0, 0.87); /* Neutral dark color */
74
+ --lumx-button-emphasis-medium-state-hover-theme-light-color: rgba(
75
+ 0,
76
+ 0,
77
+ 0,
78
+ 0.7
79
+ ); /* Base dark color with 70% opacity */
70
80
  --lumx-button-emphasis-medium-state-hover-theme-light-border-color: transparent;
71
81
  --lumx-button-emphasis-medium-state-hover-theme-dark-background-color: rgba(
72
82
  255,
@@ -84,7 +94,12 @@
84
94
  0,
85
95
  0.38
86
96
  ); /* Base dark color with 38% opacity */
87
- --lumx-button-emphasis-medium-state-active-theme-light-color: rgba(0, 0, 0, 0.87); /* Neutral dark color */
97
+ --lumx-button-emphasis-medium-state-active-theme-light-color: rgba(
98
+ 0,
99
+ 0,
100
+ 0,
101
+ 0.7
102
+ ); /* Base dark color with 70% opacity */
88
103
  --lumx-button-emphasis-medium-state-active-theme-light-border-color: transparent;
89
104
  --lumx-button-emphasis-medium-state-active-theme-dark-background-color: rgba(
90
105
  255,
@@ -97,7 +112,12 @@
97
112
  --lumx-button-emphasis-low-state-default-padding-horizontal: 8px;
98
113
  --lumx-button-emphasis-low-state-default-border-width: 0;
99
114
  --lumx-button-emphasis-low-state-default-theme-light-background-color: transparent;
100
- --lumx-button-emphasis-low-state-default-theme-light-color: rgba(0, 0, 0, 0.87); /* Neutral dark color */
115
+ --lumx-button-emphasis-low-state-default-theme-light-color: rgba(
116
+ 0,
117
+ 0,
118
+ 0,
119
+ 0.7
120
+ ); /* Base dark color with 70% opacity */
101
121
  --lumx-button-emphasis-low-state-default-theme-light-border-color: transparent;
102
122
  --lumx-button-emphasis-low-state-default-theme-dark-background-color: transparent;
103
123
  --lumx-button-emphasis-low-state-default-theme-dark-color: #fff; /* Neutral light color */
@@ -110,7 +130,7 @@
110
130
  0,
111
131
  0.12
112
132
  ); /* Base dark color with 12% opacity */
113
- --lumx-button-emphasis-low-state-hover-theme-light-color: rgba(0, 0, 0, 0.87); /* Neutral dark color */
133
+ --lumx-button-emphasis-low-state-hover-theme-light-color: rgba(0, 0, 0, 0.7); /* Base dark color with 70% opacity */
114
134
  --lumx-button-emphasis-low-state-hover-theme-light-border-color: transparent;
115
135
  --lumx-button-emphasis-low-state-hover-theme-dark-background-color: rgba(
116
136
  255,
@@ -128,7 +148,12 @@
128
148
  0,
129
149
  0.2
130
150
  ); /* Base dark color with 20% opacity */
131
- --lumx-button-emphasis-low-state-active-theme-light-color: rgba(0, 0, 0, 0.87); /* Neutral dark color */
151
+ --lumx-button-emphasis-low-state-active-theme-light-color: rgba(
152
+ 0,
153
+ 0,
154
+ 0,
155
+ 0.7
156
+ ); /* Base dark color with 70% opacity */
132
157
  --lumx-button-emphasis-low-state-active-theme-light-border-color: transparent;
133
158
  --lumx-button-emphasis-low-state-active-theme-dark-background-color: rgba(
134
159
  255,
@@ -230,8 +255,8 @@
230
255
  0,
231
256
  0,
232
257
  0,
233
- 0.87
234
- ); /* Neutral dark color */
258
+ 0.7
259
+ ); /* Base dark color with 70% opacity */
235
260
  --lumx-navigation-item-emphasis-low-state-default-theme-light-label-color: rgba(
236
261
  0,
237
262
  0,
@@ -243,8 +268,8 @@
243
268
  0,
244
269
  0,
245
270
  0,
246
- 0.87
247
- ); /* Neutral dark color */
271
+ 0.7
272
+ ); /* Base dark color with 70% opacity */
248
273
  --lumx-navigation-item-emphasis-low-state-default-theme-dark-background-color: transparent;
249
274
  --lumx-navigation-item-emphasis-low-state-default-theme-dark-border-color: rgba(
250
275
  255,
@@ -276,8 +301,8 @@
276
301
  0,
277
302
  0,
278
303
  0,
279
- 0.87
280
- ); /* Neutral dark color */
304
+ 0.7
305
+ ); /* Base dark color with 70% opacity */
281
306
  --lumx-navigation-item-emphasis-low-state-hover-theme-light-label-color: rgba(
282
307
  0,
283
308
  0,
@@ -294,8 +319,8 @@
294
319
  0,
295
320
  0,
296
321
  0,
297
- 0.87
298
- ); /* Neutral dark color */
322
+ 0.7
323
+ ); /* Base dark color with 70% opacity */
299
324
  --lumx-navigation-item-emphasis-low-state-hover-theme-dark-background-color: rgba(
300
325
  255,
301
326
  255,
@@ -337,8 +362,8 @@
337
362
  0,
338
363
  0,
339
364
  0,
340
- 0.87
341
- ); /* Neutral dark color */
365
+ 0.7
366
+ ); /* Base dark color with 70% opacity */
342
367
  --lumx-navigation-item-emphasis-low-state-active-theme-light-label-color: rgba(
343
368
  0,
344
369
  0,
@@ -355,8 +380,8 @@
355
380
  0,
356
381
  0,
357
382
  0,
358
- 0.87
359
- ); /* Neutral dark color */
383
+ 0.7
384
+ ); /* Base dark color with 70% opacity */
360
385
  --lumx-navigation-item-emphasis-low-state-active-theme-dark-background-color: rgba(
361
386
  255,
362
387
  255,
@@ -477,7 +502,12 @@
477
502
  --lumx-tabs-link-emphasis-low-state-default-border-bottom-width: 2px;
478
503
  --lumx-tabs-link-emphasis-low-state-default-border-left-width: 0;
479
504
  --lumx-tabs-link-emphasis-low-state-default-theme-light-background-color: transparent;
480
- --lumx-tabs-link-emphasis-low-state-default-theme-light-color: rgba(0, 0, 0, 0.87); /* Neutral dark color */
505
+ --lumx-tabs-link-emphasis-low-state-default-theme-light-color: rgba(
506
+ 0,
507
+ 0,
508
+ 0,
509
+ 0.7
510
+ ); /* Base dark color with 70% opacity */
481
511
  --lumx-tabs-link-emphasis-low-state-default-theme-light-border-color: rgba(
482
512
  0,
483
513
  0,
@@ -502,7 +532,12 @@
502
532
  0,
503
533
  0.12
504
534
  ); /* Base dark color with 12% opacity */
505
- --lumx-tabs-link-emphasis-low-state-hover-theme-light-color: rgba(0, 0, 0, 0.87); /* Neutral dark color */
535
+ --lumx-tabs-link-emphasis-low-state-hover-theme-light-color: rgba(
536
+ 0,
537
+ 0,
538
+ 0,
539
+ 0.7
540
+ ); /* Base dark color with 70% opacity */
506
541
  --lumx-tabs-link-emphasis-low-state-hover-theme-light-border-color: rgba(
507
542
  0,
508
543
  0,
@@ -532,7 +567,12 @@
532
567
  0,
533
568
  0.2
534
569
  ); /* Base dark color with 20% opacity */
535
- --lumx-tabs-link-emphasis-low-state-active-theme-light-color: rgba(0, 0, 0, 0.87); /* Neutral dark color */
570
+ --lumx-tabs-link-emphasis-low-state-active-theme-light-color: rgba(
571
+ 0,
572
+ 0,
573
+ 0,
574
+ 0.7
575
+ ); /* Base dark color with 70% opacity */
536
576
  --lumx-tabs-link-emphasis-low-state-active-theme-light-border-color: rgba(
537
577
  0,
538
578
  0,
@@ -557,7 +597,12 @@
557
597
  --lumx-tabs-link-emphasis-selected-state-default-border-bottom-width: 2px;
558
598
  --lumx-tabs-link-emphasis-selected-state-default-border-left-width: 0;
559
599
  --lumx-tabs-link-emphasis-selected-state-default-theme-light-background-color: transparent;
560
- --lumx-tabs-link-emphasis-selected-state-default-theme-light-color: rgba(0, 0, 0, 0.87); /* Neutral dark color */
600
+ --lumx-tabs-link-emphasis-selected-state-default-theme-light-color: rgba(
601
+ 0,
602
+ 0,
603
+ 0,
604
+ 0.7
605
+ ); /* Base dark color with 70% opacity */
561
606
  --lumx-tabs-link-emphasis-selected-state-default-theme-light-border-color: var(--lumx-color-primary-N);
562
607
  --lumx-tabs-link-emphasis-selected-state-default-theme-dark-background-color: transparent;
563
608
  --lumx-tabs-link-emphasis-selected-state-default-theme-dark-color: #fff; /* Neutral light color */
@@ -572,7 +617,12 @@
572
617
  0,
573
618
  0.12
574
619
  ); /* Base dark color with 12% opacity */
575
- --lumx-tabs-link-emphasis-selected-state-hover-theme-light-color: rgba(0, 0, 0, 0.87); /* Neutral dark color */
620
+ --lumx-tabs-link-emphasis-selected-state-hover-theme-light-color: rgba(
621
+ 0,
622
+ 0,
623
+ 0,
624
+ 0.7
625
+ ); /* Base dark color with 70% opacity */
576
626
  --lumx-tabs-link-emphasis-selected-state-hover-theme-light-border-color: var(--lumx-color-primary-N);
577
627
  --lumx-tabs-link-emphasis-selected-state-hover-theme-dark-background-color: rgba(
578
628
  255,
@@ -592,7 +642,12 @@
592
642
  0,
593
643
  0.2
594
644
  ); /* Base dark color with 20% opacity */
595
- --lumx-tabs-link-emphasis-selected-state-active-theme-light-color: rgba(0, 0, 0, 0.87); /* Neutral dark color */
645
+ --lumx-tabs-link-emphasis-selected-state-active-theme-light-color: rgba(
646
+ 0,
647
+ 0,
648
+ 0,
649
+ 0.7
650
+ ); /* Base dark color with 70% opacity */
596
651
  --lumx-tabs-link-emphasis-selected-state-active-theme-light-border-color: var(--lumx-color-primary-N);
597
652
  --lumx-tabs-link-emphasis-selected-state-active-theme-dark-background-color: rgba(
598
653
  255,
@@ -702,7 +757,7 @@
702
757
  150,
703
758
  243,
704
759
  0.6
705
- ); /* Base blue color with 60% opacity */
760
+ ); /* Base primary color with 60% opacity */
706
761
  --lumx-text-field-state-focus-theme-light-input-content-color: rgba(0, 0, 0, 0.87); /* Neutral dark color */
707
762
  --lumx-text-field-state-focus-theme-light-input-placeholder-color: rgba(
708
763
  0,
@@ -727,7 +782,7 @@
727
782
  ); /* Base light color with 80% opacity */
728
783
  --lumx-border-radius: 4px;
729
784
  --lumx-color-dark-N: rgba(0, 0, 0, 0.87); /* Neutral dark color */
730
- --lumx-color-dark-L1: rgba(0, 0, 0, 0.8); /* Base dark color with 80% opacity */
785
+ --lumx-color-dark-L1: rgba(0, 0, 0, 0.7); /* Base dark color with 70% opacity */
731
786
  --lumx-color-dark-L2: rgba(0, 0, 0, 0.54); /* Base dark color with 54% opacity */
732
787
  --lumx-color-dark-L3: rgba(0, 0, 0, 0.38); /* Base dark color with 38% opacity */
733
788
  --lumx-color-dark-L4: rgba(0, 0, 0, 0.2); /* Base dark color with 20% opacity */
@@ -740,42 +795,42 @@
740
795
  --lumx-color-light-L4: rgba(255, 255, 255, 0.4); /* Base light color with 40% opacity */
741
796
  --lumx-color-light-L5: rgba(255, 255, 255, 0.2); /* Base light color with 20% opacity */
742
797
  --lumx-color-light-L6: rgba(255, 255, 255, 0.1); /* Base light color with 10% opacity */
743
- --lumx-color-blue-D2: #1976d2; /* Darkest blue color */
744
- --lumx-color-blue-D1: #1e88e5; /* Dark blue color */
745
- --lumx-color-blue-N: #2196f3; /* Neutral blue color */
746
- --lumx-color-blue-L1: rgba(33, 150, 243, 0.8); /* Base blue color with 80% opacity */
747
- --lumx-color-blue-L2: rgba(33, 150, 243, 0.6); /* Base blue color with 60% opacity */
748
- --lumx-color-blue-L3: rgba(33, 150, 243, 0.4); /* Base blue color with 40% opacity */
749
- --lumx-color-blue-L4: rgba(33, 150, 243, 0.2); /* Base blue color with 20% opacity */
750
- --lumx-color-blue-L5: rgba(33, 150, 243, 0.1); /* Base blue color with 10% opacity */
751
- --lumx-color-blue-L6: rgba(33, 150, 243, 0.05); /* Base blue color with 5% opacity */
752
- --lumx-color-green-D2: #388e3c; /* Darkest green color */
753
- --lumx-color-green-D1: #43a047; /* Dark green color */
754
- --lumx-color-green-N: #4caf50; /* Neutral green color */
755
- --lumx-color-green-L1: rgba(76, 175, 80, 0.8); /* Base green color with 80% opacity */
756
- --lumx-color-green-L2: rgba(76, 175, 80, 0.6); /* Base green color with 60% opacity */
757
- --lumx-color-green-L3: rgba(76, 175, 80, 0.4); /* Base green color with 40% opacity */
758
- --lumx-color-green-L4: rgba(76, 175, 80, 0.2); /* Base green color with 20% opacity */
759
- --lumx-color-green-L5: rgba(76, 175, 80, 0.1); /* Base green color with 10% opacity */
760
- --lumx-color-green-L6: rgba(76, 175, 80, 0.05); /* Base green color with 5% opacity */
761
- --lumx-color-yellow-D2: #ff6f00; /* Darkest yellow color */
762
- --lumx-color-yellow-D1: #ff8f00; /* Dark yellow color */
763
- --lumx-color-yellow-N: #ffb300; /* Neutral yellow color */
764
- --lumx-color-yellow-L1: rgba(255, 179, 0, 0.8); /* Base yellow color with 80% opacity */
765
- --lumx-color-yellow-L2: rgba(255, 179, 0, 0.7); /* Base yellow color with 70% opacity */
766
- --lumx-color-yellow-L3: rgba(255, 179, 0, 0.6); /* Base yellow color with 60% opacity */
767
- --lumx-color-yellow-L4: rgba(255, 179, 0, 0.4); /* Base yellow color with 40% opacity */
768
- --lumx-color-yellow-L5: rgba(255, 179, 0, 0.2); /* Base yellow color with 20% opacity */
769
- --lumx-color-yellow-L6: rgba(255, 179, 0, 0.1); /* Base yellow color with 10% opacity */
770
- --lumx-color-red-D2: #d32f2f; /* Darkest red color */
771
- --lumx-color-red-D1: #e53935; /* Dark red color */
772
- --lumx-color-red-N: #f44336; /* Neutral red color */
773
- --lumx-color-red-L1: rgba(244, 67, 54, 0.8); /* Base red color with 80% opacity */
774
- --lumx-color-red-L2: rgba(244, 67, 54, 0.6); /* Base red color with 60% opacity */
775
- --lumx-color-red-L3: rgba(244, 67, 54, 0.4); /* Base red color with 40% opacity */
776
- --lumx-color-red-L4: rgba(244, 67, 54, 0.2); /* Base red color with 20% opacity */
777
- --lumx-color-red-L5: rgba(244, 67, 54, 0.1); /* Base red color with 10% opacity */
778
- --lumx-color-red-L6: rgba(244, 67, 54, 0.05); /* Base red color with 5% opacity */
798
+ --lumx-color-blue-D2: #1546c1; /* Darkest blue color */
799
+ --lumx-color-blue-D1: #184ed8; /* Dark blue color */
800
+ --lumx-color-blue-N: #245be7; /* Neutral blue color */
801
+ --lumx-color-blue-L1: rgba(36, 91, 231, 0.8); /* Base blue color with 80% opacity */
802
+ --lumx-color-blue-L2: rgba(36, 91, 231, 0.6); /* Base blue color with 60% opacity */
803
+ --lumx-color-blue-L3: rgba(36, 91, 231, 0.4); /* Base blue color with 40% opacity */
804
+ --lumx-color-blue-L4: rgba(36, 91, 231, 0.2); /* Base blue color with 20% opacity */
805
+ --lumx-color-blue-L5: rgba(36, 91, 231, 0.1); /* Base blue color with 10% opacity */
806
+ --lumx-color-blue-L6: rgba(36, 91, 231, 0.05); /* Base blue color with 5% opacity */
807
+ --lumx-color-green-D2: #1a6e59; /* Darkest green color */
808
+ --lumx-color-green-D1: #177a61; /* Dark green color */
809
+ --lumx-color-green-N: #138669; /* Neutral green color */
810
+ --lumx-color-green-L1: rgba(19, 134, 105, 0.8); /* Base green color with 80% opacity */
811
+ --lumx-color-green-L2: rgba(19, 134, 105, 0.6); /* Base green color with 60% opacity */
812
+ --lumx-color-green-L3: rgba(19, 134, 105, 0.4); /* Base green color with 40% opacity */
813
+ --lumx-color-green-L4: rgba(19, 134, 105, 0.2); /* Base green color with 20% opacity */
814
+ --lumx-color-green-L5: rgba(19, 134, 105, 0.1); /* Base green color with 10% opacity */
815
+ --lumx-color-green-L6: rgba(19, 134, 105, 0.05); /* Base green color with 5% opacity */
816
+ --lumx-color-yellow-D2: #ffa125; /* Darkest yellow color */
817
+ --lumx-color-yellow-D1: #ffb325; /* Dark yellow color */
818
+ --lumx-color-yellow-N: #ffc425; /* Neutral yellow color */
819
+ --lumx-color-yellow-L1: rgba(255, 196, 37, 0.9); /* Base yellow color with 80% opacity */
820
+ --lumx-color-yellow-L2: rgba(255, 196, 37, 0.8); /* Base yellow color with 70% opacity */
821
+ --lumx-color-yellow-L3: rgba(255, 196, 37, 0.6); /* Base yellow color with 60% opacity */
822
+ --lumx-color-yellow-L4: rgba(255, 196, 37, 0.48); /* Base yellow color with 40% opacity */
823
+ --lumx-color-yellow-L5: rgba(255, 196, 37, 0.24); /* Base yellow color with 20% opacity */
824
+ --lumx-color-yellow-L6: rgba(255, 196, 37, 0.12); /* Base yellow color with 10% opacity */
825
+ --lumx-color-red-D2: #be1e46; /* Darkest red color */
826
+ --lumx-color-red-D1: #d42148; /* Dark red color */
827
+ --lumx-color-red-N: #df3050; /* Neutral red color */
828
+ --lumx-color-red-L1: rgba(223, 48, 80, 0.8); /* Base red color with 80% opacity */
829
+ --lumx-color-red-L2: rgba(223, 48, 80, 0.6); /* Base red color with 60% opacity */
830
+ --lumx-color-red-L3: rgba(223, 48, 80, 0.4); /* Base red color with 40% opacity */
831
+ --lumx-color-red-L4: rgba(223, 48, 80, 0.2); /* Base red color with 20% opacity */
832
+ --lumx-color-red-L5: rgba(223, 48, 80, 0.1); /* Base red color with 10% opacity */
833
+ --lumx-color-red-L6: rgba(223, 48, 80, 0.05); /* Base red color with 5% opacity */
779
834
  --lumx-color-grey-N: #757575; /* Neutral grey color */
780
835
  --lumx-color-grey-L1: rgba(117, 117, 117, 0.8); /* Base grey color with 80% opacity */
781
836
  --lumx-color-grey-L2: rgba(117, 117, 117, 0.6); /* Base grey color with 60% opacity */
@@ -783,35 +838,35 @@
783
838
  --lumx-color-grey-L4: rgba(117, 117, 117, 0.2); /* Base grey color with 20% opacity */
784
839
  --lumx-color-grey-L5: rgba(117, 117, 117, 0.1); /* Base grey color with 10% opacity */
785
840
  --lumx-color-grey-L6: rgba(117, 117, 117, 0.05); /* Base grey color with 5% opacity */
786
- --lumx-color-primary-D2: #1976d2; /* Darkest blue color */
787
- --lumx-color-primary-D1: #1e88e5; /* Dark blue color */
788
- --lumx-color-primary-N: #2196f3; /* Neutral blue color */
789
- --lumx-color-primary-L1: rgba(33, 150, 243, 0.8); /* Base blue color with 80% opacity */
790
- --lumx-color-primary-L2: rgba(33, 150, 243, 0.6); /* Base blue color with 60% opacity */
791
- --lumx-color-primary-L3: rgba(33, 150, 243, 0.4); /* Base blue color with 40% opacity */
792
- --lumx-color-primary-L4: rgba(33, 150, 243, 0.2); /* Base blue color with 20% opacity */
793
- --lumx-color-primary-L5: rgba(33, 150, 243, 0.1); /* Base blue color with 10% opacity */
841
+ --lumx-color-primary-D2: #1976d2; /* Darkest primary color */
842
+ --lumx-color-primary-D1: #1e88e5; /* Dark primary color */
843
+ --lumx-color-primary-N: #2196f3; /* Neutral primary color */
844
+ --lumx-color-primary-L1: rgba(33, 150, 243, 0.8); /* Base primary color with 80% opacity */
845
+ --lumx-color-primary-L2: rgba(33, 150, 243, 0.6); /* Base primary color with 60% opacity */
846
+ --lumx-color-primary-L3: rgba(33, 150, 243, 0.4); /* Base primary color with 40% opacity */
847
+ --lumx-color-primary-L4: rgba(33, 150, 243, 0.2); /* Base primary color with 20% opacity */
848
+ --lumx-color-primary-L5: rgba(33, 150, 243, 0.1); /* Base primary color with 10% opacity */
794
849
  --lumx-color-primary-L6: rgba(33, 150, 243, 0.05); /* Base blue color with 5% opacity */
795
- --lumx-color-secondary-D2: #388e3c; /* Darkest green color */
796
- --lumx-color-secondary-D1: #43a047; /* Dark green color */
797
- --lumx-color-secondary-N: #4caf50; /* Neutral green color */
798
- --lumx-color-secondary-L1: rgba(76, 175, 80, 0.8); /* Base green color with 80% opacity */
799
- --lumx-color-secondary-L2: rgba(76, 175, 80, 0.6); /* Base green color with 60% opacity */
800
- --lumx-color-secondary-L3: rgba(76, 175, 80, 0.4); /* Base green color with 40% opacity */
801
- --lumx-color-secondary-L4: rgba(76, 175, 80, 0.2); /* Base green color with 20% opacity */
802
- --lumx-color-secondary-L5: rgba(76, 175, 80, 0.1); /* Base green color with 10% opacity */
803
- --lumx-color-secondary-L6: rgba(76, 175, 80, 0.05); /* Base green color with 5% opacity */
804
- --lumx-color-accent-D2: #388e3c; /* Darkest green color */
805
- --lumx-color-accent-D1: #43a047; /* Dark green color */
806
- --lumx-color-accent-N: #4caf50; /* Neutral green color */
807
- --lumx-color-accent-L1: rgba(76, 175, 80, 0.8); /* Base green color with 80% opacity */
808
- --lumx-color-accent-L2: rgba(76, 175, 80, 0.6); /* Base green color with 60% opacity */
809
- --lumx-color-accent-L3: rgba(76, 175, 80, 0.4); /* Base green color with 40% opacity */
810
- --lumx-color-accent-L4: rgba(76, 175, 80, 0.2); /* Base green color with 20% opacity */
811
- --lumx-color-accent-L5: rgba(76, 175, 80, 0.1); /* Base green color with 10% opacity */
812
- --lumx-color-accent-L6: rgba(76, 175, 80, 0.05); /* Base green color with 5% opacity */
850
+ --lumx-color-secondary-D2: #388e3c; /* Darkest secondary color */
851
+ --lumx-color-secondary-D1: #43a047; /* Dark secondary color */
852
+ --lumx-color-secondary-N: #4caf50; /* Neutral secondary color */
853
+ --lumx-color-secondary-L1: rgba(76, 175, 80, 0.8); /* Base secondary color with 80% opacity */
854
+ --lumx-color-secondary-L2: rgba(76, 175, 80, 0.6); /* Base secondary color with 60% opacity */
855
+ --lumx-color-secondary-L3: rgba(76, 175, 80, 0.4); /* Base secondary color with 40% opacity */
856
+ --lumx-color-secondary-L4: rgba(76, 175, 80, 0.2); /* Base secondary color with 20% opacity */
857
+ --lumx-color-secondary-L5: rgba(76, 175, 80, 0.1); /* Base secondary color with 10% opacity */
858
+ --lumx-color-secondary-L6: rgba(76, 175, 80, 0.05); /* Base secondary color with 5% opacity */
859
+ --lumx-color-accent-D2: #388e3c; /* Darkest secondary color */
860
+ --lumx-color-accent-D1: #43a047; /* Dark secondary color */
861
+ --lumx-color-accent-N: #4caf50; /* Neutral secondary color */
862
+ --lumx-color-accent-L1: rgba(76, 175, 80, 0.8); /* Base secondary color with 80% opacity */
863
+ --lumx-color-accent-L2: rgba(76, 175, 80, 0.6); /* Base secondary color with 60% opacity */
864
+ --lumx-color-accent-L3: rgba(76, 175, 80, 0.4); /* Base secondary color with 40% opacity */
865
+ --lumx-color-accent-L4: rgba(76, 175, 80, 0.2); /* Base secondary color with 20% opacity */
866
+ --lumx-color-accent-L5: rgba(76, 175, 80, 0.1); /* Base secondary color with 10% opacity */
867
+ --lumx-color-accent-L6: rgba(76, 175, 80, 0.05); /* Base secondary color with 5% opacity */
813
868
  --lumx-color-black-N: rgba(0, 0, 0, 0.87); /* Neutral dark color */
814
- --lumx-color-black-L1: rgba(0, 0, 0, 0.8); /* Base dark color with 80% opacity */
869
+ --lumx-color-black-L1: rgba(0, 0, 0, 0.7); /* Base dark color with 70% opacity */
815
870
  --lumx-color-black-L2: rgba(0, 0, 0, 0.54); /* Base dark color with 54% opacity */
816
871
  --lumx-color-black-L3: rgba(0, 0, 0, 0.38); /* Base dark color with 38% opacity */
817
872
  --lumx-color-black-L4: rgba(0, 0, 0, 0.2); /* Base dark color with 20% opacity */
@@ -824,15 +879,15 @@
824
879
  --lumx-color-white-L4: rgba(255, 255, 255, 0.4); /* Base light color with 40% opacity */
825
880
  --lumx-color-white-L5: rgba(255, 255, 255, 0.2); /* Base light color with 20% opacity */
826
881
  --lumx-color-white-L6: rgba(255, 255, 255, 0.1); /* Base light color with 10% opacity */
827
- --lumx-color-orange-D2: #ff6f00; /* Darkest yellow color */
828
- --lumx-color-orange-D1: #ff8f00; /* Dark yellow color */
829
- --lumx-color-orange-N: #ffb300; /* Neutral yellow color */
830
- --lumx-color-orange-L1: rgba(255, 179, 0, 0.8); /* Base yellow color with 80% opacity */
831
- --lumx-color-orange-L2: rgba(255, 179, 0, 0.7); /* Base yellow color with 70% opacity */
832
- --lumx-color-orange-L3: rgba(255, 179, 0, 0.6); /* Base yellow color with 60% opacity */
833
- --lumx-color-orange-L4: rgba(255, 179, 0, 0.4); /* Base yellow color with 40% opacity */
834
- --lumx-color-orange-L5: rgba(255, 179, 0, 0.2); /* Base yellow color with 20% opacity */
835
- --lumx-color-orange-L6: rgba(255, 179, 0, 0.1); /* Base yellow color with 10% opacity */
882
+ --lumx-color-orange-D2: #ffa125; /* Darkest yellow color */
883
+ --lumx-color-orange-D1: #ffb325; /* Dark yellow color */
884
+ --lumx-color-orange-N: #ffc425; /* Neutral yellow color */
885
+ --lumx-color-orange-L1: rgba(255, 196, 37, 0.9); /* Base yellow color with 80% opacity */
886
+ --lumx-color-orange-L2: rgba(255, 196, 37, 0.8); /* Base yellow color with 70% opacity */
887
+ --lumx-color-orange-L3: rgba(255, 196, 37, 0.6); /* Base yellow color with 60% opacity */
888
+ --lumx-color-orange-L4: rgba(255, 196, 37, 0.48); /* Base yellow color with 40% opacity */
889
+ --lumx-color-orange-L5: rgba(255, 196, 37, 0.24); /* Base yellow color with 20% opacity */
890
+ --lumx-color-orange-L6: rgba(255, 196, 37, 0.12); /* Base yellow color with 10% opacity */
836
891
  --lumx-size-xxs: 14px;
837
892
  --lumx-size-xs: 20px;
838
893
  --lumx-size-s: 24px;