@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/package.json CHANGED
@@ -42,7 +42,7 @@
42
42
  "version": "yarn version-changelog ../../CHANGELOG.md && yarn changelog-verify ../../CHANGELOG.md && git add ../../CHANGELOG.md"
43
43
  },
44
44
  "sideEffects": false,
45
- "version": "2.1.8-alpha.0",
45
+ "version": "2.1.8",
46
46
  "devDependencies": {
47
47
  "@babel/core": "^7.8.3",
48
48
  "@babel/plugin-proposal-class-properties": "^7.8.3",
@@ -82,5 +82,5 @@
82
82
  "moment": "^2.24.0",
83
83
  "moment-range": "^4.0.2"
84
84
  },
85
- "gitHead": "6cbc4962664dd018c884f1006c1c6b20f7ae183a"
85
+ "gitHead": "e4e589f8924784b34e3a0dcdbbb71f0ed0ae82b8"
86
86
  }
package/scss/_design-tokens.scss 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
  $lumx-button-height: 36px !default;
@@ -47,12 +47,7 @@ $lumx-button-emphasis-medium-state-default-theme-light-background-color: rgba(
47
47
  0,
48
48
  0.12
49
49
  ) !default; // Base dark color with 12% opacity
50
- $lumx-button-emphasis-medium-state-default-theme-light-color: rgba(
51
- 0,
52
- 0,
53
- 0,
54
- 0.7
55
- ) !default; // Base dark color with 70% opacity
50
+ $lumx-button-emphasis-medium-state-default-theme-light-color: rgba(0, 0, 0, 0.87) !default; // Neutral dark color
56
51
  $lumx-button-emphasis-medium-state-default-theme-light-border-color: transparent !default;
57
52
  $lumx-button-emphasis-medium-state-default-theme-dark-background-color: rgba(
58
53
  255,
@@ -70,12 +65,7 @@ $lumx-button-emphasis-medium-state-hover-theme-light-background-color: rgba(
70
65
  0,
71
66
  0.2
72
67
  ) !default; // Base dark color with 20% opacity
73
- $lumx-button-emphasis-medium-state-hover-theme-light-color: rgba(
74
- 0,
75
- 0,
76
- 0,
77
- 0.7
78
- ) !default; // Base dark color with 70% opacity
68
+ $lumx-button-emphasis-medium-state-hover-theme-light-color: rgba(0, 0, 0, 0.87) !default; // Neutral dark color
79
69
  $lumx-button-emphasis-medium-state-hover-theme-light-border-color: transparent !default;
80
70
  $lumx-button-emphasis-medium-state-hover-theme-dark-background-color: rgba(
81
71
  255,
@@ -93,12 +83,7 @@ $lumx-button-emphasis-medium-state-active-theme-light-background-color: rgba(
93
83
  0,
94
84
  0.38
95
85
  ) !default; // Base dark color with 38% opacity
96
- $lumx-button-emphasis-medium-state-active-theme-light-color: rgba(
97
- 0,
98
- 0,
99
- 0,
100
- 0.7
101
- ) !default; // Base dark color with 70% opacity
86
+ $lumx-button-emphasis-medium-state-active-theme-light-color: rgba(0, 0, 0, 0.87) !default; // Neutral dark color
102
87
  $lumx-button-emphasis-medium-state-active-theme-light-border-color: transparent !default;
103
88
  $lumx-button-emphasis-medium-state-active-theme-dark-background-color: rgba(
104
89
  255,
@@ -111,12 +96,7 @@ $lumx-button-emphasis-medium-state-active-theme-dark-border-color: transparent !
111
96
  $lumx-button-emphasis-low-state-default-padding-horizontal: 8px !default;
112
97
  $lumx-button-emphasis-low-state-default-border-width: 0 !default;
113
98
  $lumx-button-emphasis-low-state-default-theme-light-background-color: transparent !default;
114
- $lumx-button-emphasis-low-state-default-theme-light-color: rgba(
115
- 0,
116
- 0,
117
- 0,
118
- 0.7
119
- ) !default; // Base dark color with 70% opacity
99
+ $lumx-button-emphasis-low-state-default-theme-light-color: rgba(0, 0, 0, 0.87) !default; // Neutral dark color
120
100
  $lumx-button-emphasis-low-state-default-theme-light-border-color: transparent !default;
121
101
  $lumx-button-emphasis-low-state-default-theme-dark-background-color: transparent !default;
122
102
  $lumx-button-emphasis-low-state-default-theme-dark-color: #fff !default; // Neutral light color
@@ -129,12 +109,7 @@ $lumx-button-emphasis-low-state-hover-theme-light-background-color: rgba(
129
109
  0,
130
110
  0.12
131
111
  ) !default; // Base dark color with 12% opacity
132
- $lumx-button-emphasis-low-state-hover-theme-light-color: rgba(
133
- 0,
134
- 0,
135
- 0,
136
- 0.7
137
- ) !default; // Base dark color with 70% opacity
112
+ $lumx-button-emphasis-low-state-hover-theme-light-color: rgba(0, 0, 0, 0.87) !default; // Neutral dark color
138
113
  $lumx-button-emphasis-low-state-hover-theme-light-border-color: transparent !default;
139
114
  $lumx-button-emphasis-low-state-hover-theme-dark-background-color: rgba(
140
115
  255,
@@ -152,12 +127,7 @@ $lumx-button-emphasis-low-state-active-theme-light-background-color: rgba(
152
127
  0,
153
128
  0.2
154
129
  ) !default; // Base dark color with 20% opacity
155
- $lumx-button-emphasis-low-state-active-theme-light-color: rgba(
156
- 0,
157
- 0,
158
- 0,
159
- 0.7
160
- ) !default; // Base dark color with 70% opacity
130
+ $lumx-button-emphasis-low-state-active-theme-light-color: rgba(0, 0, 0, 0.87) !default; // Neutral dark color
161
131
  $lumx-button-emphasis-low-state-active-theme-light-border-color: transparent !default;
162
132
  $lumx-button-emphasis-low-state-active-theme-dark-background-color: rgba(
163
133
  255,
@@ -259,8 +229,8 @@ $lumx-navigation-item-emphasis-low-state-default-theme-light-icon-color: rgba(
259
229
  0,
260
230
  0,
261
231
  0,
262
- 0.7
263
- ) !default; // Base dark color with 70% opacity
232
+ 0.87
233
+ ) !default; // Neutral dark color
264
234
  $lumx-navigation-item-emphasis-low-state-default-theme-light-label-color: rgba(
265
235
  0,
266
236
  0,
@@ -272,8 +242,8 @@ $lumx-navigation-item-emphasis-low-state-default-theme-light-chevron-color: rgba
272
242
  0,
273
243
  0,
274
244
  0,
275
- 0.7
276
- ) !default; // Base dark color with 70% opacity
245
+ 0.87
246
+ ) !default; // Neutral dark color
277
247
  $lumx-navigation-item-emphasis-low-state-default-theme-dark-background-color: transparent !default;
278
248
  $lumx-navigation-item-emphasis-low-state-default-theme-dark-border-color: rgba(
279
249
  255,
@@ -305,8 +275,8 @@ $lumx-navigation-item-emphasis-low-state-hover-theme-light-icon-color: rgba(
305
275
  0,
306
276
  0,
307
277
  0,
308
- 0.7
309
- ) !default; // Base dark color with 70% opacity
278
+ 0.87
279
+ ) !default; // Neutral dark color
310
280
  $lumx-navigation-item-emphasis-low-state-hover-theme-light-label-color: rgba(
311
281
  0,
312
282
  0,
@@ -323,8 +293,8 @@ $lumx-navigation-item-emphasis-low-state-hover-theme-light-chevron-color: rgba(
323
293
  0,
324
294
  0,
325
295
  0,
326
- 0.7
327
- ) !default; // Base dark color with 70% opacity
296
+ 0.87
297
+ ) !default; // Neutral dark color
328
298
  $lumx-navigation-item-emphasis-low-state-hover-theme-dark-background-color: rgba(
329
299
  255,
330
300
  255,
@@ -366,8 +336,8 @@ $lumx-navigation-item-emphasis-low-state-active-theme-light-icon-color: rgba(
366
336
  0,
367
337
  0,
368
338
  0,
369
- 0.7
370
- ) !default; // Base dark color with 70% opacity
339
+ 0.87
340
+ ) !default; // Neutral dark color
371
341
  $lumx-navigation-item-emphasis-low-state-active-theme-light-label-color: rgba(
372
342
  0,
373
343
  0,
@@ -384,8 +354,8 @@ $lumx-navigation-item-emphasis-low-state-active-theme-light-chevron-color: rgba(
384
354
  0,
385
355
  0,
386
356
  0,
387
- 0.7
388
- ) !default; // Base dark color with 70% opacity
357
+ 0.87
358
+ ) !default; // Neutral dark color
389
359
  $lumx-navigation-item-emphasis-low-state-active-theme-dark-background-color: rgba(
390
360
  255,
391
361
  255,
@@ -510,12 +480,7 @@ $lumx-tabs-link-emphasis-low-state-default-border-right-width: 0 !default;
510
480
  $lumx-tabs-link-emphasis-low-state-default-border-bottom-width: 2px !default;
511
481
  $lumx-tabs-link-emphasis-low-state-default-border-left-width: 0 !default;
512
482
  $lumx-tabs-link-emphasis-low-state-default-theme-light-background-color: transparent !default;
513
- $lumx-tabs-link-emphasis-low-state-default-theme-light-color: rgba(
514
- 0,
515
- 0,
516
- 0,
517
- 0.7
518
- ) !default; // Base dark color with 70% opacity
483
+ $lumx-tabs-link-emphasis-low-state-default-theme-light-color: rgba(0, 0, 0, 0.87) !default; // Neutral dark color
519
484
  $lumx-tabs-link-emphasis-low-state-default-theme-light-border-color: rgba(
520
485
  0,
521
486
  0,
@@ -540,12 +505,7 @@ $lumx-tabs-link-emphasis-low-state-hover-theme-light-background-color: rgba(
540
505
  0,
541
506
  0.12
542
507
  ) !default; // Base dark color with 12% opacity
543
- $lumx-tabs-link-emphasis-low-state-hover-theme-light-color: rgba(
544
- 0,
545
- 0,
546
- 0,
547
- 0.7
548
- ) !default; // Base dark color with 70% opacity
508
+ $lumx-tabs-link-emphasis-low-state-hover-theme-light-color: rgba(0, 0, 0, 0.87) !default; // Neutral dark color
549
509
  $lumx-tabs-link-emphasis-low-state-hover-theme-light-border-color: rgba(
550
510
  0,
551
511
  0,
@@ -575,12 +535,7 @@ $lumx-tabs-link-emphasis-low-state-active-theme-light-background-color: rgba(
575
535
  0,
576
536
  0.2
577
537
  ) !default; // Base dark color with 20% opacity
578
- $lumx-tabs-link-emphasis-low-state-active-theme-light-color: rgba(
579
- 0,
580
- 0,
581
- 0,
582
- 0.7
583
- ) !default; // Base dark color with 70% opacity
538
+ $lumx-tabs-link-emphasis-low-state-active-theme-light-color: rgba(0, 0, 0, 0.87) !default; // Neutral dark color
584
539
  $lumx-tabs-link-emphasis-low-state-active-theme-light-border-color: rgba(
585
540
  0,
586
541
  0,
@@ -605,12 +560,7 @@ $lumx-tabs-link-emphasis-selected-state-default-border-right-width: 0 !default;
605
560
  $lumx-tabs-link-emphasis-selected-state-default-border-bottom-width: 2px !default;
606
561
  $lumx-tabs-link-emphasis-selected-state-default-border-left-width: 0 !default;
607
562
  $lumx-tabs-link-emphasis-selected-state-default-theme-light-background-color: transparent !default;
608
- $lumx-tabs-link-emphasis-selected-state-default-theme-light-color: rgba(
609
- 0,
610
- 0,
611
- 0,
612
- 0.7
613
- ) !default; // Base dark color with 70% opacity
563
+ $lumx-tabs-link-emphasis-selected-state-default-theme-light-color: rgba(0, 0, 0, 0.87) !default; // Neutral dark color
614
564
  $lumx-tabs-link-emphasis-selected-state-default-theme-light-border-color: var(--lumx-color-primary-N) !default;
615
565
  $lumx-tabs-link-emphasis-selected-state-default-theme-dark-background-color: transparent !default;
616
566
  $lumx-tabs-link-emphasis-selected-state-default-theme-dark-color: #fff !default; // Neutral light color
@@ -625,12 +575,7 @@ $lumx-tabs-link-emphasis-selected-state-hover-theme-light-background-color: rgba
625
575
  0,
626
576
  0.12
627
577
  ) !default; // Base dark color with 12% opacity
628
- $lumx-tabs-link-emphasis-selected-state-hover-theme-light-color: rgba(
629
- 0,
630
- 0,
631
- 0,
632
- 0.7
633
- ) !default; // Base dark color with 70% opacity
578
+ $lumx-tabs-link-emphasis-selected-state-hover-theme-light-color: rgba(0, 0, 0, 0.87) !default; // Neutral dark color
634
579
  $lumx-tabs-link-emphasis-selected-state-hover-theme-light-border-color: var(--lumx-color-primary-N) !default;
635
580
  $lumx-tabs-link-emphasis-selected-state-hover-theme-dark-background-color: rgba(
636
581
  255,
@@ -650,12 +595,7 @@ $lumx-tabs-link-emphasis-selected-state-active-theme-light-background-color: rgb
650
595
  0,
651
596
  0.2
652
597
  ) !default; // Base dark color with 20% opacity
653
- $lumx-tabs-link-emphasis-selected-state-active-theme-light-color: rgba(
654
- 0,
655
- 0,
656
- 0,
657
- 0.7
658
- ) !default; // Base dark color with 70% opacity
598
+ $lumx-tabs-link-emphasis-selected-state-active-theme-light-color: rgba(0, 0, 0, 0.87) !default; // Neutral dark color
659
599
  $lumx-tabs-link-emphasis-selected-state-active-theme-light-border-color: var(--lumx-color-primary-N) !default;
660
600
  $lumx-tabs-link-emphasis-selected-state-active-theme-dark-background-color: rgba(
661
601
  255,
@@ -765,7 +705,7 @@ $lumx-text-field-state-focus-theme-light-input-border-color: rgba(
765
705
  150,
766
706
  243,
767
707
  0.6
768
- ) !default; // Base primary color with 60% opacity
708
+ ) !default; // Base blue color with 60% opacity
769
709
  $lumx-text-field-state-focus-theme-light-input-content-color: rgba(0, 0, 0, 0.87) !default; // Neutral dark color
770
710
  $lumx-text-field-state-focus-theme-light-input-placeholder-color: rgba(
771
711
  0,
@@ -790,7 +730,7 @@ $lumx-text-field-state-focus-theme-dark-input-placeholder-color: rgba(
790
730
  ) !default; // Base light color with 80% opacity
791
731
  $lumx-border-radius: 4px !default;
792
732
  $lumx-color-dark-N: rgba(0, 0, 0, 0.87) !default; // Neutral dark color
793
- $lumx-color-dark-L1: rgba(0, 0, 0, 0.7) !default; // Base dark color with 70% opacity
733
+ $lumx-color-dark-L1: rgba(0, 0, 0, 0.8) !default; // Base dark color with 80% opacity
794
734
  $lumx-color-dark-L2: rgba(0, 0, 0, 0.54) !default; // Base dark color with 54% opacity
795
735
  $lumx-color-dark-L3: rgba(0, 0, 0, 0.38) !default; // Base dark color with 38% opacity
796
736
  $lumx-color-dark-L4: rgba(0, 0, 0, 0.2) !default; // Base dark color with 20% opacity
@@ -803,42 +743,42 @@ $lumx-color-light-L3: rgba(255, 255, 255, 0.6) !default; // Base light color wit
803
743
  $lumx-color-light-L4: rgba(255, 255, 255, 0.4) !default; // Base light color with 40% opacity
804
744
  $lumx-color-light-L5: rgba(255, 255, 255, 0.2) !default; // Base light color with 20% opacity
805
745
  $lumx-color-light-L6: rgba(255, 255, 255, 0.1) !default; // Base light color with 10% opacity
806
- $lumx-color-blue-D2: #1546c1 !default; // Darkest blue color
807
- $lumx-color-blue-D1: #184ed8 !default; // Dark blue color
808
- $lumx-color-blue-N: #245be7 !default; // Neutral blue color
809
- $lumx-color-blue-L1: rgba(36, 91, 231, 0.8) !default; // Base blue color with 80% opacity
810
- $lumx-color-blue-L2: rgba(36, 91, 231, 0.6) !default; // Base blue color with 60% opacity
811
- $lumx-color-blue-L3: rgba(36, 91, 231, 0.4) !default; // Base blue color with 40% opacity
812
- $lumx-color-blue-L4: rgba(36, 91, 231, 0.2) !default; // Base blue color with 20% opacity
813
- $lumx-color-blue-L5: rgba(36, 91, 231, 0.1) !default; // Base blue color with 10% opacity
814
- $lumx-color-blue-L6: rgba(36, 91, 231, 0.05) !default; // Base blue color with 5% opacity
815
- $lumx-color-green-D2: #1a6e59 !default; // Darkest green color
816
- $lumx-color-green-D1: #177a61 !default; // Dark green color
817
- $lumx-color-green-N: #138669 !default; // Neutral green color
818
- $lumx-color-green-L1: rgba(19, 134, 105, 0.8) !default; // Base green color with 80% opacity
819
- $lumx-color-green-L2: rgba(19, 134, 105, 0.6) !default; // Base green color with 60% opacity
820
- $lumx-color-green-L3: rgba(19, 134, 105, 0.4) !default; // Base green color with 40% opacity
821
- $lumx-color-green-L4: rgba(19, 134, 105, 0.2) !default; // Base green color with 20% opacity
822
- $lumx-color-green-L5: rgba(19, 134, 105, 0.1) !default; // Base green color with 10% opacity
823
- $lumx-color-green-L6: rgba(19, 134, 105, 0.05) !default; // Base green color with 5% opacity
824
- $lumx-color-yellow-D2: #ffa125 !default; // Darkest yellow color
825
- $lumx-color-yellow-D1: #ffb325 !default; // Dark yellow color
826
- $lumx-color-yellow-N: #ffc425 !default; // Neutral yellow color
827
- $lumx-color-yellow-L1: rgba(255, 196, 37, 0.9) !default; // Base yellow color with 80% opacity
828
- $lumx-color-yellow-L2: rgba(255, 196, 37, 0.8) !default; // Base yellow color with 70% opacity
829
- $lumx-color-yellow-L3: rgba(255, 196, 37, 0.6) !default; // Base yellow color with 60% opacity
830
- $lumx-color-yellow-L4: rgba(255, 196, 37, 0.48) !default; // Base yellow color with 40% opacity
831
- $lumx-color-yellow-L5: rgba(255, 196, 37, 0.24) !default; // Base yellow color with 20% opacity
832
- $lumx-color-yellow-L6: rgba(255, 196, 37, 0.12) !default; // Base yellow color with 10% opacity
833
- $lumx-color-red-D2: #be1e46 !default; // Darkest red color
834
- $lumx-color-red-D1: #d42148 !default; // Dark red color
835
- $lumx-color-red-N: #df3050 !default; // Neutral red color
836
- $lumx-color-red-L1: rgba(223, 48, 80, 0.8) !default; // Base red color with 80% opacity
837
- $lumx-color-red-L2: rgba(223, 48, 80, 0.6) !default; // Base red color with 60% opacity
838
- $lumx-color-red-L3: rgba(223, 48, 80, 0.4) !default; // Base red color with 40% opacity
839
- $lumx-color-red-L4: rgba(223, 48, 80, 0.2) !default; // Base red color with 20% opacity
840
- $lumx-color-red-L5: rgba(223, 48, 80, 0.1) !default; // Base red color with 10% opacity
841
- $lumx-color-red-L6: rgba(223, 48, 80, 0.05) !default; // Base red color with 5% opacity
746
+ $lumx-color-blue-D2: #1976d2 !default; // Darkest blue color
747
+ $lumx-color-blue-D1: #1e88e5 !default; // Dark blue color
748
+ $lumx-color-blue-N: #2196f3 !default; // Neutral blue color
749
+ $lumx-color-blue-L1: rgba(33, 150, 243, 0.8) !default; // Base blue color with 80% opacity
750
+ $lumx-color-blue-L2: rgba(33, 150, 243, 0.6) !default; // Base blue color with 60% opacity
751
+ $lumx-color-blue-L3: rgba(33, 150, 243, 0.4) !default; // Base blue color with 40% opacity
752
+ $lumx-color-blue-L4: rgba(33, 150, 243, 0.2) !default; // Base blue color with 20% opacity
753
+ $lumx-color-blue-L5: rgba(33, 150, 243, 0.1) !default; // Base blue color with 10% opacity
754
+ $lumx-color-blue-L6: rgba(33, 150, 243, 0.05) !default; // Base blue color with 5% opacity
755
+ $lumx-color-green-D2: #388e3c !default; // Darkest green color
756
+ $lumx-color-green-D1: #43a047 !default; // Dark green color
757
+ $lumx-color-green-N: #4caf50 !default; // Neutral green color
758
+ $lumx-color-green-L1: rgba(76, 175, 80, 0.8) !default; // Base green color with 80% opacity
759
+ $lumx-color-green-L2: rgba(76, 175, 80, 0.6) !default; // Base green color with 60% opacity
760
+ $lumx-color-green-L3: rgba(76, 175, 80, 0.4) !default; // Base green color with 40% opacity
761
+ $lumx-color-green-L4: rgba(76, 175, 80, 0.2) !default; // Base green color with 20% opacity
762
+ $lumx-color-green-L5: rgba(76, 175, 80, 0.1) !default; // Base green color with 10% opacity
763
+ $lumx-color-green-L6: rgba(76, 175, 80, 0.05) !default; // Base green color with 5% opacity
764
+ $lumx-color-yellow-D2: #ff6f00 !default; // Darkest yellow color
765
+ $lumx-color-yellow-D1: #ff8f00 !default; // Dark yellow color
766
+ $lumx-color-yellow-N: #ffb300 !default; // Neutral yellow color
767
+ $lumx-color-yellow-L1: rgba(255, 179, 0, 0.8) !default; // Base yellow color with 80% opacity
768
+ $lumx-color-yellow-L2: rgba(255, 179, 0, 0.7) !default; // Base yellow color with 70% opacity
769
+ $lumx-color-yellow-L3: rgba(255, 179, 0, 0.6) !default; // Base yellow color with 60% opacity
770
+ $lumx-color-yellow-L4: rgba(255, 179, 0, 0.4) !default; // Base yellow color with 40% opacity
771
+ $lumx-color-yellow-L5: rgba(255, 179, 0, 0.2) !default; // Base yellow color with 20% opacity
772
+ $lumx-color-yellow-L6: rgba(255, 179, 0, 0.1) !default; // Base yellow color with 10% opacity
773
+ $lumx-color-red-D2: #d32f2f !default; // Darkest red color
774
+ $lumx-color-red-D1: #e53935 !default; // Dark red color
775
+ $lumx-color-red-N: #f44336 !default; // Neutral red color
776
+ $lumx-color-red-L1: rgba(244, 67, 54, 0.8) !default; // Base red color with 80% opacity
777
+ $lumx-color-red-L2: rgba(244, 67, 54, 0.6) !default; // Base red color with 60% opacity
778
+ $lumx-color-red-L3: rgba(244, 67, 54, 0.4) !default; // Base red color with 40% opacity
779
+ $lumx-color-red-L4: rgba(244, 67, 54, 0.2) !default; // Base red color with 20% opacity
780
+ $lumx-color-red-L5: rgba(244, 67, 54, 0.1) !default; // Base red color with 10% opacity
781
+ $lumx-color-red-L6: rgba(244, 67, 54, 0.05) !default; // Base red color with 5% opacity
842
782
  $lumx-color-grey-N: #757575 !default; // Neutral grey color
843
783
  $lumx-color-grey-L1: rgba(117, 117, 117, 0.8) !default; // Base grey color with 80% opacity
844
784
  $lumx-color-grey-L2: rgba(117, 117, 117, 0.6) !default; // Base grey color with 60% opacity
@@ -846,35 +786,35 @@ $lumx-color-grey-L3: rgba(117, 117, 117, 0.4) !default; // Base grey color with
846
786
  $lumx-color-grey-L4: rgba(117, 117, 117, 0.2) !default; // Base grey color with 20% opacity
847
787
  $lumx-color-grey-L5: rgba(117, 117, 117, 0.1) !default; // Base grey color with 10% opacity
848
788
  $lumx-color-grey-L6: rgba(117, 117, 117, 0.05) !default; // Base grey color with 5% opacity
849
- $lumx-color-primary-D2: #1976d2 !default; // Darkest primary color
850
- $lumx-color-primary-D1: #1e88e5 !default; // Dark primary color
851
- $lumx-color-primary-N: #2196f3 !default; // Neutral primary color
852
- $lumx-color-primary-L1: rgba(33, 150, 243, 0.8) !default; // Base primary color with 80% opacity
853
- $lumx-color-primary-L2: rgba(33, 150, 243, 0.6) !default; // Base primary color with 60% opacity
854
- $lumx-color-primary-L3: rgba(33, 150, 243, 0.4) !default; // Base primary color with 40% opacity
855
- $lumx-color-primary-L4: rgba(33, 150, 243, 0.2) !default; // Base primary color with 20% opacity
856
- $lumx-color-primary-L5: rgba(33, 150, 243, 0.1) !default; // Base primary color with 10% opacity
789
+ $lumx-color-primary-D2: #1976d2 !default; // Darkest blue color
790
+ $lumx-color-primary-D1: #1e88e5 !default; // Dark blue color
791
+ $lumx-color-primary-N: #2196f3 !default; // Neutral blue color
792
+ $lumx-color-primary-L1: rgba(33, 150, 243, 0.8) !default; // Base blue color with 80% opacity
793
+ $lumx-color-primary-L2: rgba(33, 150, 243, 0.6) !default; // Base blue color with 60% opacity
794
+ $lumx-color-primary-L3: rgba(33, 150, 243, 0.4) !default; // Base blue color with 40% opacity
795
+ $lumx-color-primary-L4: rgba(33, 150, 243, 0.2) !default; // Base blue color with 20% opacity
796
+ $lumx-color-primary-L5: rgba(33, 150, 243, 0.1) !default; // Base blue color with 10% opacity
857
797
  $lumx-color-primary-L6: rgba(33, 150, 243, 0.05) !default; // Base blue color with 5% opacity
858
- $lumx-color-secondary-D2: #388e3c !default; // Darkest secondary color
859
- $lumx-color-secondary-D1: #43a047 !default; // Dark secondary color
860
- $lumx-color-secondary-N: #4caf50 !default; // Neutral secondary color
861
- $lumx-color-secondary-L1: rgba(76, 175, 80, 0.8) !default; // Base secondary color with 80% opacity
862
- $lumx-color-secondary-L2: rgba(76, 175, 80, 0.6) !default; // Base secondary color with 60% opacity
863
- $lumx-color-secondary-L3: rgba(76, 175, 80, 0.4) !default; // Base secondary color with 40% opacity
864
- $lumx-color-secondary-L4: rgba(76, 175, 80, 0.2) !default; // Base secondary color with 20% opacity
865
- $lumx-color-secondary-L5: rgba(76, 175, 80, 0.1) !default; // Base secondary color with 10% opacity
866
- $lumx-color-secondary-L6: rgba(76, 175, 80, 0.05) !default; // Base secondary color with 5% opacity
867
- $lumx-color-accent-D2: #388e3c !default; // Darkest secondary color
868
- $lumx-color-accent-D1: #43a047 !default; // Dark secondary color
869
- $lumx-color-accent-N: #4caf50 !default; // Neutral secondary color
870
- $lumx-color-accent-L1: rgba(76, 175, 80, 0.8) !default; // Base secondary color with 80% opacity
871
- $lumx-color-accent-L2: rgba(76, 175, 80, 0.6) !default; // Base secondary color with 60% opacity
872
- $lumx-color-accent-L3: rgba(76, 175, 80, 0.4) !default; // Base secondary color with 40% opacity
873
- $lumx-color-accent-L4: rgba(76, 175, 80, 0.2) !default; // Base secondary color with 20% opacity
874
- $lumx-color-accent-L5: rgba(76, 175, 80, 0.1) !default; // Base secondary color with 10% opacity
875
- $lumx-color-accent-L6: rgba(76, 175, 80, 0.05) !default; // Base secondary color with 5% opacity
798
+ $lumx-color-secondary-D2: #388e3c !default; // Darkest green color
799
+ $lumx-color-secondary-D1: #43a047 !default; // Dark green color
800
+ $lumx-color-secondary-N: #4caf50 !default; // Neutral green color
801
+ $lumx-color-secondary-L1: rgba(76, 175, 80, 0.8) !default; // Base green color with 80% opacity
802
+ $lumx-color-secondary-L2: rgba(76, 175, 80, 0.6) !default; // Base green color with 60% opacity
803
+ $lumx-color-secondary-L3: rgba(76, 175, 80, 0.4) !default; // Base green color with 40% opacity
804
+ $lumx-color-secondary-L4: rgba(76, 175, 80, 0.2) !default; // Base green color with 20% opacity
805
+ $lumx-color-secondary-L5: rgba(76, 175, 80, 0.1) !default; // Base green color with 10% opacity
806
+ $lumx-color-secondary-L6: rgba(76, 175, 80, 0.05) !default; // Base green color with 5% opacity
807
+ $lumx-color-accent-D2: #388e3c !default; // Darkest green color
808
+ $lumx-color-accent-D1: #43a047 !default; // Dark green color
809
+ $lumx-color-accent-N: #4caf50 !default; // Neutral green color
810
+ $lumx-color-accent-L1: rgba(76, 175, 80, 0.8) !default; // Base green color with 80% opacity
811
+ $lumx-color-accent-L2: rgba(76, 175, 80, 0.6) !default; // Base green color with 60% opacity
812
+ $lumx-color-accent-L3: rgba(76, 175, 80, 0.4) !default; // Base green color with 40% opacity
813
+ $lumx-color-accent-L4: rgba(76, 175, 80, 0.2) !default; // Base green color with 20% opacity
814
+ $lumx-color-accent-L5: rgba(76, 175, 80, 0.1) !default; // Base green color with 10% opacity
815
+ $lumx-color-accent-L6: rgba(76, 175, 80, 0.05) !default; // Base green color with 5% opacity
876
816
  $lumx-color-black-N: rgba(0, 0, 0, 0.87) !default; // Neutral dark color
877
- $lumx-color-black-L1: rgba(0, 0, 0, 0.7) !default; // Base dark color with 70% opacity
817
+ $lumx-color-black-L1: rgba(0, 0, 0, 0.8) !default; // Base dark color with 80% opacity
878
818
  $lumx-color-black-L2: rgba(0, 0, 0, 0.54) !default; // Base dark color with 54% opacity
879
819
  $lumx-color-black-L3: rgba(0, 0, 0, 0.38) !default; // Base dark color with 38% opacity
880
820
  $lumx-color-black-L4: rgba(0, 0, 0, 0.2) !default; // Base dark color with 20% opacity
@@ -887,15 +827,15 @@ $lumx-color-white-L3: rgba(255, 255, 255, 0.6) !default; // Base light color wit
887
827
  $lumx-color-white-L4: rgba(255, 255, 255, 0.4) !default; // Base light color with 40% opacity
888
828
  $lumx-color-white-L5: rgba(255, 255, 255, 0.2) !default; // Base light color with 20% opacity
889
829
  $lumx-color-white-L6: rgba(255, 255, 255, 0.1) !default; // Base light color with 10% opacity
890
- $lumx-color-orange-D2: #ffa125 !default; // Darkest yellow color
891
- $lumx-color-orange-D1: #ffb325 !default; // Dark yellow color
892
- $lumx-color-orange-N: #ffc425 !default; // Neutral yellow color
893
- $lumx-color-orange-L1: rgba(255, 196, 37, 0.9) !default; // Base yellow color with 80% opacity
894
- $lumx-color-orange-L2: rgba(255, 196, 37, 0.8) !default; // Base yellow color with 70% opacity
895
- $lumx-color-orange-L3: rgba(255, 196, 37, 0.6) !default; // Base yellow color with 60% opacity
896
- $lumx-color-orange-L4: rgba(255, 196, 37, 0.48) !default; // Base yellow color with 40% opacity
897
- $lumx-color-orange-L5: rgba(255, 196, 37, 0.24) !default; // Base yellow color with 20% opacity
898
- $lumx-color-orange-L6: rgba(255, 196, 37, 0.12) !default; // Base yellow color with 10% opacity
830
+ $lumx-color-orange-D2: #ff6f00 !default; // Darkest yellow color
831
+ $lumx-color-orange-D1: #ff8f00 !default; // Dark yellow color
832
+ $lumx-color-orange-N: #ffb300 !default; // Neutral yellow color
833
+ $lumx-color-orange-L1: rgba(255, 179, 0, 0.8) !default; // Base yellow color with 80% opacity
834
+ $lumx-color-orange-L2: rgba(255, 179, 0, 0.7) !default; // Base yellow color with 70% opacity
835
+ $lumx-color-orange-L3: rgba(255, 179, 0, 0.6) !default; // Base yellow color with 60% opacity
836
+ $lumx-color-orange-L4: rgba(255, 179, 0, 0.4) !default; // Base yellow color with 40% opacity
837
+ $lumx-color-orange-L5: rgba(255, 179, 0, 0.2) !default; // Base yellow color with 20% opacity
838
+ $lumx-color-orange-L6: rgba(255, 179, 0, 0.1) !default; // Base yellow color with 10% opacity
899
839
  $lumx-size-xxs: 14px !default;
900
840
  $lumx-size-xs: 20px !default;
901
841
  $lumx-size-s: 24px !default;
package/scss/components/badge/_index.scss CHANGED
@@ -35,11 +35,7 @@
35
35
  @if $key == 'light' {
36
36
  @include lumx-elevation(2);
37
37
  } @else {
38
- @if $key == 'yellow' {
39
- color: lumx-color-variant('dark', 'L1');
40
- } @else {
41
- color: lumx-color-variant('light', 'N');
42
- }
38
+ color: lumx-color-variant('light', 'N');
43
39
  }
44
40
  }
45
41
  }
package/scss/components/chip/_index.scss CHANGED
@@ -82,12 +82,6 @@
82
82
  &.#{$lumx-base-prefix}-chip--is-highlighted {
83
83
  @include lumx-state(lumx-base-const('state', 'FOCUS'), lumx-base-const('emphasis', 'MEDIUM'), $key);
84
84
  }
85
-
86
- @if $key == 'dark' {
87
- .#{$lumx-base-prefix}-chip__label {
88
- color: lumx-color-variant('dark', 'L1');
89
- }
90
- }
91
85
  }
92
86
  }
93
87
 
package/scss/components/flag/_index.scss CHANGED
@@ -25,14 +25,9 @@
25
25
  @each $key, $color in $lumx-color-palette {
26
26
  .#{$lumx-base-prefix}-flag--color-#{$key} {
27
27
  border: 2px solid lumx-color-variant($key, 'L4');
28
+ }
28
29
 
29
- .#{$lumx-base-prefix}-flag__label,
30
- .#{$lumx-base-prefix}-flag__icon {
31
- @if $key == 'dark' or $key == 'yellow' {
32
- color: lumx-color-variant('dark', 'L1');
33
- } @else {
34
- color: lumx-color-variant($key, 'N');
35
- }
36
- }
30
+ .#{$lumx-base-prefix}-flag--color-#{$key} .#{$lumx-base-prefix}-flag__label {
31
+ color: lumx-color-variant($key, 'D2');
37
32
  }
38
33
  }
package/scss/components/icon/_index.scss CHANGED
@@ -33,28 +33,6 @@
33
33
  display: none;
34
34
  }
35
35
  }
36
-
37
- &--has-dark-layer {
38
- position: relative;
39
-
40
- &::after {
41
- position: absolute;
42
- z-index: 0;
43
- top: $lumx-spacing-unit / 2;
44
- right: $lumx-spacing-unit / 2;
45
- bottom: $lumx-spacing-unit / 2;
46
- left: $lumx-spacing-unit / 2;
47
- background-color: lumx-color-variant('dark', 'L1');
48
- border-radius: 50%;
49
- content: '';
50
- }
51
-
52
- &::before,
53
- svg {
54
- position: relative;
55
- z-index: 1;
56
- }
57
- }
58
36
  }
59
37
 
60
38
  /* Icon sizes
package/scss/components/icon/_mixins.scss CHANGED
@@ -13,18 +13,9 @@
13
13
 
14
14
  @mixin lumx-icon-color($color, $has-shape: false) {
15
15
  @if $has-shape == true {
16
- background-color: lumx-color-variant($color, 'L6');
17
-
18
- @if $color == 'yellow' {
19
- color: lumx-color-variant('dark', 'L1');
20
- } @else {
21
- color: lumx-color-variant($color, 'N');
22
- }
16
+ background-color: lumx-color-variant($color, 'L5');
17
+ color: lumx-color-variant($color, 'L2');
23
18
  } @else if $has-shape == false {
24
- @if $color == 'dark' {
25
- color: lumx-color-variant('dark', 'L1');
26
- } @else {
27
- color: lumx-color-variant($color, 'N');
28
- }
19
+ color: lumx-color-variant($color, 'N');
29
20
  }
30
21
  }
package/scss/components/list/_mixins.scss CHANGED
@@ -23,8 +23,7 @@
23
23
  }
24
24
 
25
25
  @mixin lumx-list-item-clickable() {
26
- @include lumx-state(lumx-base-const('state', 'DEFAULT'), lumx-base-const('emphasis', 'LOW'), 'dark');
27
-
26
+ color: lumx-color-variant('dark', 'N');
28
27
  cursor: pointer;
29
28
 
30
29
  &:hover,
package/scss/components/message/_index.scss CHANGED
@@ -20,7 +20,6 @@
20
20
  @include lumx-typography('body1');
21
21
 
22
22
  flex: 1 1 auto;
23
- color: lumx-color-variant('dark', 'N');
24
23
  }
25
24
  }
26
25
 
@@ -32,5 +31,10 @@
32
31
  &.#{$lumx-base-prefix}-message--has-background {
33
32
  background-color: lumx-color-variant($color, 'L6');
34
33
  }
34
+
35
+ .#{$lumx-base-prefix}-message__icon,
36
+ .#{$lumx-base-prefix}-message__text {
37
+ color: lumx-color-variant($color, 'D2');
38
+ }
35
39
  }
36
40
  }
package/scss/components/notification/_index.scss CHANGED
@@ -29,6 +29,7 @@
29
29
  height: $lumx-notification-height;
30
30
  align-items: center;
31
31
  justify-content: center;
32
+ color: lumx-color-variant('light', 'L3');
32
33
  }
33
34
 
34
35
  &__content {
@@ -61,11 +62,5 @@
61
62
  @each $color in $lumx-notification-color-palette {
62
63
  .#{$lumx-base-prefix}-notification--color-#{$color} .#{$lumx-base-prefix}-notification__icon {
63
64
  background-color: lumx-color-variant($color, 'N');
64
-
65
- @if $color == 'yellow' {
66
- color: lumx-color-variant('dark', 'L1');
67
- } @else {
68
- color: lumx-color-variant('light', 'N');
69
- }
70
65
  }
71
66
  }
package/scss/components/side-navigation/_mixins.scss CHANGED
@@ -21,6 +21,7 @@
21
21
  align-items: center;
22
22
  padding: 0 $lumx-spacing-unit;
23
23
  border-radius: var(--lumx-border-radius);
24
+ color: lumx-color-variant('dark', 'N');
24
25
  outline: none;
25
26
  text-decoration: none;
26
27
  }
package/scss/components/thumbnail/_variables.scss CHANGED
@@ -6,5 +6,5 @@ $lumx-thumbnail-aspect-ratio: (
6
6
  // Ratio 1:1
7
7
  'square': 100%,
8
8
  // Ratio 2:3
9
- 'vertical': 150%
9
+ 'vertical': 150%,
10
10
  );
package/scss/components/uploader/_index.scss CHANGED
@@ -73,7 +73,7 @@
73
73
  margin-bottom: $lumx-spacing-unit;
74
74
 
75
75
  #{$self}--theme-light & {
76
- color: lumx-color-variant('dark', 'L1');
76
+ color: lumx-color-variant('dark', 'N');
77
77
  }
78
78
 
79
79
  #{$self}--theme-dark & {
@@ -87,7 +87,7 @@
87
87
  text-align: center;
88
88
 
89
89
  #{$self}--theme-light & {
90
- color: lumx-color-variant('dark', 'L1');
90
+ color: lumx-color-variant('dark', 'N');
91
91
  }
92
92
 
93
93
  #{$self}--theme-dark & {