@lumx/core 2.1.8-alpha.0 → 2.1.8

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 +99 -154
  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 +99 -159
  13. package/scss/components/badge/_index.scss +1 -5
  14. package/scss/components/chip/_index.scss +0 -6
  15. package/scss/components/flag/_index.scss +3 -8
  16. package/scss/components/icon/_index.scss +0 -22
  17. package/scss/components/icon/_mixins.scss +3 -12
  18. package/scss/components/list/_mixins.scss +1 -2
  19. package/scss/components/message/_index.scss +5 -1
  20. package/scss/components/notification/_index.scss +1 -6
  21. package/scss/components/side-navigation/_mixins.scss +1 -0
  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 +6 -32
package/css/design-tokens.css CHANGED
@@ -1,6 +1,6 @@
1
1
  /**
2
2
  * Do not edit directly
3
- * Generated on Wed, 08 Dec 2021 08:10:59 GMT
3
+ * Generated on Tue, 19 Oct 2021 08:35:24 GMT
4
4
  */
5
5
 
6
6
  :root {
@@ -48,12 +48,7 @@
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(
52
- 0,
53
- 0,
54
- 0,
55
- 0.7
56
- ); /* Base dark color with 70% opacity */
51
+ --lumx-button-emphasis-medium-state-default-theme-light-color: rgba(0, 0, 0, 0.87); /* Neutral dark color */
57
52
  --lumx-button-emphasis-medium-state-default-theme-light-border-color: transparent;
58
53
  --lumx-button-emphasis-medium-state-default-theme-dark-background-color: rgba(
59
54
  255,
@@ -71,12 +66,7 @@
71
66
  0,
72
67
  0.2
73
68
  ); /* Base dark color with 20% opacity */
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 */
69
+ --lumx-button-emphasis-medium-state-hover-theme-light-color: rgba(0, 0, 0, 0.87); /* Neutral dark color */
80
70
  --lumx-button-emphasis-medium-state-hover-theme-light-border-color: transparent;
81
71
  --lumx-button-emphasis-medium-state-hover-theme-dark-background-color: rgba(
82
72
  255,
@@ -94,12 +84,7 @@
94
84
  0,
95
85
  0.38
96
86
  ); /* Base dark color with 38% opacity */
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 */
87
+ --lumx-button-emphasis-medium-state-active-theme-light-color: rgba(0, 0, 0, 0.87); /* Neutral dark color */
103
88
  --lumx-button-emphasis-medium-state-active-theme-light-border-color: transparent;
104
89
  --lumx-button-emphasis-medium-state-active-theme-dark-background-color: rgba(
105
90
  255,
@@ -112,12 +97,7 @@
112
97
  --lumx-button-emphasis-low-state-default-padding-horizontal: 8px;
113
98
  --lumx-button-emphasis-low-state-default-border-width: 0;
114
99
  --lumx-button-emphasis-low-state-default-theme-light-background-color: transparent;
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 */
100
+ --lumx-button-emphasis-low-state-default-theme-light-color: rgba(0, 0, 0, 0.87); /* Neutral dark color */
121
101
  --lumx-button-emphasis-low-state-default-theme-light-border-color: transparent;
122
102
  --lumx-button-emphasis-low-state-default-theme-dark-background-color: transparent;
123
103
  --lumx-button-emphasis-low-state-default-theme-dark-color: #fff; /* Neutral light color */
@@ -130,7 +110,7 @@
130
110
  0,
131
111
  0.12
132
112
  ); /* Base dark color with 12% opacity */
133
- --lumx-button-emphasis-low-state-hover-theme-light-color: rgba(0, 0, 0, 0.7); /* Base dark color with 70% opacity */
113
+ --lumx-button-emphasis-low-state-hover-theme-light-color: rgba(0, 0, 0, 0.87); /* Neutral dark color */
134
114
  --lumx-button-emphasis-low-state-hover-theme-light-border-color: transparent;
135
115
  --lumx-button-emphasis-low-state-hover-theme-dark-background-color: rgba(
136
116
  255,
@@ -148,12 +128,7 @@
148
128
  0,
149
129
  0.2
150
130
  ); /* Base dark color with 20% opacity */
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 */
131
+ --lumx-button-emphasis-low-state-active-theme-light-color: rgba(0, 0, 0, 0.87); /* Neutral dark color */
157
132
  --lumx-button-emphasis-low-state-active-theme-light-border-color: transparent;
158
133
  --lumx-button-emphasis-low-state-active-theme-dark-background-color: rgba(
159
134
  255,
@@ -255,8 +230,8 @@
255
230
  0,
256
231
  0,
257
232
  0,
258
- 0.7
259
- ); /* Base dark color with 70% opacity */
233
+ 0.87
234
+ ); /* Neutral dark color */
260
235
  --lumx-navigation-item-emphasis-low-state-default-theme-light-label-color: rgba(
261
236
  0,
262
237
  0,
@@ -268,8 +243,8 @@
268
243
  0,
269
244
  0,
270
245
  0,
271
- 0.7
272
- ); /* Base dark color with 70% opacity */
246
+ 0.87
247
+ ); /* Neutral dark color */
273
248
  --lumx-navigation-item-emphasis-low-state-default-theme-dark-background-color: transparent;
274
249
  --lumx-navigation-item-emphasis-low-state-default-theme-dark-border-color: rgba(
275
250
  255,
@@ -301,8 +276,8 @@
301
276
  0,
302
277
  0,
303
278
  0,
304
- 0.7
305
- ); /* Base dark color with 70% opacity */
279
+ 0.87
280
+ ); /* Neutral dark color */
306
281
  --lumx-navigation-item-emphasis-low-state-hover-theme-light-label-color: rgba(
307
282
  0,
308
283
  0,
@@ -319,8 +294,8 @@
319
294
  0,
320
295
  0,
321
296
  0,
322
- 0.7
323
- ); /* Base dark color with 70% opacity */
297
+ 0.87
298
+ ); /* Neutral dark color */
324
299
  --lumx-navigation-item-emphasis-low-state-hover-theme-dark-background-color: rgba(
325
300
  255,
326
301
  255,
@@ -362,8 +337,8 @@
362
337
  0,
363
338
  0,
364
339
  0,
365
- 0.7
366
- ); /* Base dark color with 70% opacity */
340
+ 0.87
341
+ ); /* Neutral dark color */
367
342
  --lumx-navigation-item-emphasis-low-state-active-theme-light-label-color: rgba(
368
343
  0,
369
344
  0,
@@ -380,8 +355,8 @@
380
355
  0,
381
356
  0,
382
357
  0,
383
- 0.7
384
- ); /* Base dark color with 70% opacity */
358
+ 0.87
359
+ ); /* Neutral dark color */
385
360
  --lumx-navigation-item-emphasis-low-state-active-theme-dark-background-color: rgba(
386
361
  255,
387
362
  255,
@@ -502,12 +477,7 @@
502
477
  --lumx-tabs-link-emphasis-low-state-default-border-bottom-width: 2px;
503
478
  --lumx-tabs-link-emphasis-low-state-default-border-left-width: 0;
504
479
  --lumx-tabs-link-emphasis-low-state-default-theme-light-background-color: transparent;
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 */
480
+ --lumx-tabs-link-emphasis-low-state-default-theme-light-color: rgba(0, 0, 0, 0.87); /* Neutral dark color */
511
481
  --lumx-tabs-link-emphasis-low-state-default-theme-light-border-color: rgba(
512
482
  0,
513
483
  0,
@@ -532,12 +502,7 @@
532
502
  0,
533
503
  0.12
534
504
  ); /* Base dark color with 12% opacity */
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 */
505
+ --lumx-tabs-link-emphasis-low-state-hover-theme-light-color: rgba(0, 0, 0, 0.87); /* Neutral dark color */
541
506
  --lumx-tabs-link-emphasis-low-state-hover-theme-light-border-color: rgba(
542
507
  0,
543
508
  0,
@@ -567,12 +532,7 @@
567
532
  0,
568
533
  0.2
569
534
  ); /* Base dark color with 20% opacity */
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 */
535
+ --lumx-tabs-link-emphasis-low-state-active-theme-light-color: rgba(0, 0, 0, 0.87); /* Neutral dark color */
576
536
  --lumx-tabs-link-emphasis-low-state-active-theme-light-border-color: rgba(
577
537
  0,
578
538
  0,
@@ -597,12 +557,7 @@
597
557
  --lumx-tabs-link-emphasis-selected-state-default-border-bottom-width: 2px;
598
558
  --lumx-tabs-link-emphasis-selected-state-default-border-left-width: 0;
599
559
  --lumx-tabs-link-emphasis-selected-state-default-theme-light-background-color: transparent;
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 */
560
+ --lumx-tabs-link-emphasis-selected-state-default-theme-light-color: rgba(0, 0, 0, 0.87); /* Neutral dark color */
606
561
  --lumx-tabs-link-emphasis-selected-state-default-theme-light-border-color: var(--lumx-color-primary-N);
607
562
  --lumx-tabs-link-emphasis-selected-state-default-theme-dark-background-color: transparent;
608
563
  --lumx-tabs-link-emphasis-selected-state-default-theme-dark-color: #fff; /* Neutral light color */
@@ -617,12 +572,7 @@
617
572
  0,
618
573
  0.12
619
574
  ); /* Base dark color with 12% opacity */
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 */
575
+ --lumx-tabs-link-emphasis-selected-state-hover-theme-light-color: rgba(0, 0, 0, 0.87); /* Neutral dark color */
626
576
  --lumx-tabs-link-emphasis-selected-state-hover-theme-light-border-color: var(--lumx-color-primary-N);
627
577
  --lumx-tabs-link-emphasis-selected-state-hover-theme-dark-background-color: rgba(
628
578
  255,
@@ -642,12 +592,7 @@
642
592
  0,
643
593
  0.2
644
594
  ); /* Base dark color with 20% opacity */
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 */
595
+ --lumx-tabs-link-emphasis-selected-state-active-theme-light-color: rgba(0, 0, 0, 0.87); /* Neutral dark color */
651
596
  --lumx-tabs-link-emphasis-selected-state-active-theme-light-border-color: var(--lumx-color-primary-N);
652
597
  --lumx-tabs-link-emphasis-selected-state-active-theme-dark-background-color: rgba(
653
598
  255,
@@ -757,7 +702,7 @@
757
702
  150,
758
703
  243,
759
704
  0.6
760
- ); /* Base primary color with 60% opacity */
705
+ ); /* Base blue color with 60% opacity */
761
706
  --lumx-text-field-state-focus-theme-light-input-content-color: rgba(0, 0, 0, 0.87); /* Neutral dark color */
762
707
  --lumx-text-field-state-focus-theme-light-input-placeholder-color: rgba(
763
708
  0,
@@ -782,7 +727,7 @@
782
727
  ); /* Base light color with 80% opacity */
783
728
  --lumx-border-radius: 4px;
784
729
  --lumx-color-dark-N: rgba(0, 0, 0, 0.87); /* Neutral dark color */
785
- --lumx-color-dark-L1: rgba(0, 0, 0, 0.7); /* Base dark color with 70% opacity */
730
+ --lumx-color-dark-L1: rgba(0, 0, 0, 0.8); /* Base dark color with 80% opacity */
786
731
  --lumx-color-dark-L2: rgba(0, 0, 0, 0.54); /* Base dark color with 54% opacity */
787
732
  --lumx-color-dark-L3: rgba(0, 0, 0, 0.38); /* Base dark color with 38% opacity */
788
733
  --lumx-color-dark-L4: rgba(0, 0, 0, 0.2); /* Base dark color with 20% opacity */
@@ -795,42 +740,42 @@
795
740
  --lumx-color-light-L4: rgba(255, 255, 255, 0.4); /* Base light color with 40% opacity */
796
741
  --lumx-color-light-L5: rgba(255, 255, 255, 0.2); /* Base light color with 20% opacity */
797
742
  --lumx-color-light-L6: rgba(255, 255, 255, 0.1); /* Base light color with 10% 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 */
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 */
834
779
  --lumx-color-grey-N: #757575; /* Neutral grey color */
835
780
  --lumx-color-grey-L1: rgba(117, 117, 117, 0.8); /* Base grey color with 80% opacity */
836
781
  --lumx-color-grey-L2: rgba(117, 117, 117, 0.6); /* Base grey color with 60% opacity */
@@ -838,35 +783,35 @@
838
783
  --lumx-color-grey-L4: rgba(117, 117, 117, 0.2); /* Base grey color with 20% opacity */
839
784
  --lumx-color-grey-L5: rgba(117, 117, 117, 0.1); /* Base grey color with 10% opacity */
840
785
  --lumx-color-grey-L6: rgba(117, 117, 117, 0.05); /* Base grey color with 5% 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 */
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 */
849
794
  --lumx-color-primary-L6: rgba(33, 150, 243, 0.05); /* Base blue 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 */
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 */
868
813
  --lumx-color-black-N: rgba(0, 0, 0, 0.87); /* Neutral dark color */
869
- --lumx-color-black-L1: rgba(0, 0, 0, 0.7); /* Base dark color with 70% opacity */
814
+ --lumx-color-black-L1: rgba(0, 0, 0, 0.8); /* Base dark color with 80% opacity */
870
815
  --lumx-color-black-L2: rgba(0, 0, 0, 0.54); /* Base dark color with 54% opacity */
871
816
  --lumx-color-black-L3: rgba(0, 0, 0, 0.38); /* Base dark color with 38% opacity */
872
817
  --lumx-color-black-L4: rgba(0, 0, 0, 0.2); /* Base dark color with 20% opacity */
@@ -879,15 +824,15 @@
879
824
  --lumx-color-white-L4: rgba(255, 255, 255, 0.4); /* Base light color with 40% opacity */
880
825
  --lumx-color-white-L5: rgba(255, 255, 255, 0.2); /* Base light color with 20% opacity */
881
826
  --lumx-color-white-L6: rgba(255, 255, 255, 0.1); /* Base light 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 */
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 */
891
836
  --lumx-size-xxs: 14px;
892
837
  --lumx-size-xs: 20px;
893
838
  --lumx-size-s: 24px;