@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/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",
45
+ "version": "2.1.9-alpha.0",
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": "e4e589f8924784b34e3a0dcdbbb71f0ed0ae82b8"
85
+ "gitHead": "67f0df5b67d7a55fccb30b72173163bafcf7b82e"
86
86
  }
package/scss/_design-tokens.scss 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
  $lumx-button-height: 36px !default;
@@ -47,7 +47,12 @@ $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(0, 0, 0, 0.87) !default; // Neutral dark color
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
51
56
  $lumx-button-emphasis-medium-state-default-theme-light-border-color: transparent !default;
52
57
  $lumx-button-emphasis-medium-state-default-theme-dark-background-color: rgba(
53
58
  255,
@@ -65,7 +70,12 @@ $lumx-button-emphasis-medium-state-hover-theme-light-background-color: rgba(
65
70
  0,
66
71
  0.2
67
72
  ) !default; // Base dark color with 20% opacity
68
- $lumx-button-emphasis-medium-state-hover-theme-light-color: rgba(0, 0, 0, 0.87) !default; // Neutral dark color
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
69
79
  $lumx-button-emphasis-medium-state-hover-theme-light-border-color: transparent !default;
70
80
  $lumx-button-emphasis-medium-state-hover-theme-dark-background-color: rgba(
71
81
  255,
@@ -83,7 +93,12 @@ $lumx-button-emphasis-medium-state-active-theme-light-background-color: rgba(
83
93
  0,
84
94
  0.38
85
95
  ) !default; // Base dark color with 38% opacity
86
- $lumx-button-emphasis-medium-state-active-theme-light-color: rgba(0, 0, 0, 0.87) !default; // Neutral dark color
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
87
102
  $lumx-button-emphasis-medium-state-active-theme-light-border-color: transparent !default;
88
103
  $lumx-button-emphasis-medium-state-active-theme-dark-background-color: rgba(
89
104
  255,
@@ -96,7 +111,12 @@ $lumx-button-emphasis-medium-state-active-theme-dark-border-color: transparent !
96
111
  $lumx-button-emphasis-low-state-default-padding-horizontal: 8px !default;
97
112
  $lumx-button-emphasis-low-state-default-border-width: 0 !default;
98
113
  $lumx-button-emphasis-low-state-default-theme-light-background-color: transparent !default;
99
- $lumx-button-emphasis-low-state-default-theme-light-color: rgba(0, 0, 0, 0.87) !default; // Neutral dark color
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
100
120
  $lumx-button-emphasis-low-state-default-theme-light-border-color: transparent !default;
101
121
  $lumx-button-emphasis-low-state-default-theme-dark-background-color: transparent !default;
102
122
  $lumx-button-emphasis-low-state-default-theme-dark-color: #fff !default; // Neutral light color
@@ -109,7 +129,12 @@ $lumx-button-emphasis-low-state-hover-theme-light-background-color: rgba(
109
129
  0,
110
130
  0.12
111
131
  ) !default; // Base dark color with 12% opacity
112
- $lumx-button-emphasis-low-state-hover-theme-light-color: rgba(0, 0, 0, 0.87) !default; // Neutral dark color
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
113
138
  $lumx-button-emphasis-low-state-hover-theme-light-border-color: transparent !default;
114
139
  $lumx-button-emphasis-low-state-hover-theme-dark-background-color: rgba(
115
140
  255,
@@ -127,7 +152,12 @@ $lumx-button-emphasis-low-state-active-theme-light-background-color: rgba(
127
152
  0,
128
153
  0.2
129
154
  ) !default; // Base dark color with 20% opacity
130
- $lumx-button-emphasis-low-state-active-theme-light-color: rgba(0, 0, 0, 0.87) !default; // Neutral dark color
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
131
161
  $lumx-button-emphasis-low-state-active-theme-light-border-color: transparent !default;
132
162
  $lumx-button-emphasis-low-state-active-theme-dark-background-color: rgba(
133
163
  255,
@@ -229,8 +259,8 @@ $lumx-navigation-item-emphasis-low-state-default-theme-light-icon-color: rgba(
229
259
  0,
230
260
  0,
231
261
  0,
232
- 0.87
233
- ) !default; // Neutral dark color
262
+ 0.7
263
+ ) !default; // Base dark color with 70% opacity
234
264
  $lumx-navigation-item-emphasis-low-state-default-theme-light-label-color: rgba(
235
265
  0,
236
266
  0,
@@ -242,8 +272,8 @@ $lumx-navigation-item-emphasis-low-state-default-theme-light-chevron-color: rgba
242
272
  0,
243
273
  0,
244
274
  0,
245
- 0.87
246
- ) !default; // Neutral dark color
275
+ 0.7
276
+ ) !default; // Base dark color with 70% opacity
247
277
  $lumx-navigation-item-emphasis-low-state-default-theme-dark-background-color: transparent !default;
248
278
  $lumx-navigation-item-emphasis-low-state-default-theme-dark-border-color: rgba(
249
279
  255,
@@ -275,8 +305,8 @@ $lumx-navigation-item-emphasis-low-state-hover-theme-light-icon-color: rgba(
275
305
  0,
276
306
  0,
277
307
  0,
278
- 0.87
279
- ) !default; // Neutral dark color
308
+ 0.7
309
+ ) !default; // Base dark color with 70% opacity
280
310
  $lumx-navigation-item-emphasis-low-state-hover-theme-light-label-color: rgba(
281
311
  0,
282
312
  0,
@@ -293,8 +323,8 @@ $lumx-navigation-item-emphasis-low-state-hover-theme-light-chevron-color: rgba(
293
323
  0,
294
324
  0,
295
325
  0,
296
- 0.87
297
- ) !default; // Neutral dark color
326
+ 0.7
327
+ ) !default; // Base dark color with 70% opacity
298
328
  $lumx-navigation-item-emphasis-low-state-hover-theme-dark-background-color: rgba(
299
329
  255,
300
330
  255,
@@ -336,8 +366,8 @@ $lumx-navigation-item-emphasis-low-state-active-theme-light-icon-color: rgba(
336
366
  0,
337
367
  0,
338
368
  0,
339
- 0.87
340
- ) !default; // Neutral dark color
369
+ 0.7
370
+ ) !default; // Base dark color with 70% opacity
341
371
  $lumx-navigation-item-emphasis-low-state-active-theme-light-label-color: rgba(
342
372
  0,
343
373
  0,
@@ -354,8 +384,8 @@ $lumx-navigation-item-emphasis-low-state-active-theme-light-chevron-color: rgba(
354
384
  0,
355
385
  0,
356
386
  0,
357
- 0.87
358
- ) !default; // Neutral dark color
387
+ 0.7
388
+ ) !default; // Base dark color with 70% opacity
359
389
  $lumx-navigation-item-emphasis-low-state-active-theme-dark-background-color: rgba(
360
390
  255,
361
391
  255,
@@ -480,7 +510,12 @@ $lumx-tabs-link-emphasis-low-state-default-border-right-width: 0 !default;
480
510
  $lumx-tabs-link-emphasis-low-state-default-border-bottom-width: 2px !default;
481
511
  $lumx-tabs-link-emphasis-low-state-default-border-left-width: 0 !default;
482
512
  $lumx-tabs-link-emphasis-low-state-default-theme-light-background-color: transparent !default;
483
- $lumx-tabs-link-emphasis-low-state-default-theme-light-color: rgba(0, 0, 0, 0.87) !default; // Neutral dark color
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
484
519
  $lumx-tabs-link-emphasis-low-state-default-theme-light-border-color: rgba(
485
520
  0,
486
521
  0,
@@ -505,7 +540,12 @@ $lumx-tabs-link-emphasis-low-state-hover-theme-light-background-color: rgba(
505
540
  0,
506
541
  0.12
507
542
  ) !default; // Base dark color with 12% opacity
508
- $lumx-tabs-link-emphasis-low-state-hover-theme-light-color: rgba(0, 0, 0, 0.87) !default; // Neutral dark color
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
509
549
  $lumx-tabs-link-emphasis-low-state-hover-theme-light-border-color: rgba(
510
550
  0,
511
551
  0,
@@ -535,7 +575,12 @@ $lumx-tabs-link-emphasis-low-state-active-theme-light-background-color: rgba(
535
575
  0,
536
576
  0.2
537
577
  ) !default; // Base dark color with 20% opacity
538
- $lumx-tabs-link-emphasis-low-state-active-theme-light-color: rgba(0, 0, 0, 0.87) !default; // Neutral dark color
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
539
584
  $lumx-tabs-link-emphasis-low-state-active-theme-light-border-color: rgba(
540
585
  0,
541
586
  0,
@@ -560,7 +605,12 @@ $lumx-tabs-link-emphasis-selected-state-default-border-right-width: 0 !default;
560
605
  $lumx-tabs-link-emphasis-selected-state-default-border-bottom-width: 2px !default;
561
606
  $lumx-tabs-link-emphasis-selected-state-default-border-left-width: 0 !default;
562
607
  $lumx-tabs-link-emphasis-selected-state-default-theme-light-background-color: transparent !default;
563
- $lumx-tabs-link-emphasis-selected-state-default-theme-light-color: rgba(0, 0, 0, 0.87) !default; // Neutral dark color
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
564
614
  $lumx-tabs-link-emphasis-selected-state-default-theme-light-border-color: var(--lumx-color-primary-N) !default;
565
615
  $lumx-tabs-link-emphasis-selected-state-default-theme-dark-background-color: transparent !default;
566
616
  $lumx-tabs-link-emphasis-selected-state-default-theme-dark-color: #fff !default; // Neutral light color
@@ -575,7 +625,12 @@ $lumx-tabs-link-emphasis-selected-state-hover-theme-light-background-color: rgba
575
625
  0,
576
626
  0.12
577
627
  ) !default; // Base dark color with 12% opacity
578
- $lumx-tabs-link-emphasis-selected-state-hover-theme-light-color: rgba(0, 0, 0, 0.87) !default; // Neutral dark color
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
579
634
  $lumx-tabs-link-emphasis-selected-state-hover-theme-light-border-color: var(--lumx-color-primary-N) !default;
580
635
  $lumx-tabs-link-emphasis-selected-state-hover-theme-dark-background-color: rgba(
581
636
  255,
@@ -595,7 +650,12 @@ $lumx-tabs-link-emphasis-selected-state-active-theme-light-background-color: rgb
595
650
  0,
596
651
  0.2
597
652
  ) !default; // Base dark color with 20% opacity
598
- $lumx-tabs-link-emphasis-selected-state-active-theme-light-color: rgba(0, 0, 0, 0.87) !default; // Neutral dark color
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
599
659
  $lumx-tabs-link-emphasis-selected-state-active-theme-light-border-color: var(--lumx-color-primary-N) !default;
600
660
  $lumx-tabs-link-emphasis-selected-state-active-theme-dark-background-color: rgba(
601
661
  255,
@@ -705,7 +765,7 @@ $lumx-text-field-state-focus-theme-light-input-border-color: rgba(
705
765
  150,
706
766
  243,
707
767
  0.6
708
- ) !default; // Base blue color with 60% opacity
768
+ ) !default; // Base primary color with 60% opacity
709
769
  $lumx-text-field-state-focus-theme-light-input-content-color: rgba(0, 0, 0, 0.87) !default; // Neutral dark color
710
770
  $lumx-text-field-state-focus-theme-light-input-placeholder-color: rgba(
711
771
  0,
@@ -730,7 +790,7 @@ $lumx-text-field-state-focus-theme-dark-input-placeholder-color: rgba(
730
790
  ) !default; // Base light color with 80% opacity
731
791
  $lumx-border-radius: 4px !default;
732
792
  $lumx-color-dark-N: rgba(0, 0, 0, 0.87) !default; // Neutral dark color
733
- $lumx-color-dark-L1: rgba(0, 0, 0, 0.8) !default; // Base dark color with 80% opacity
793
+ $lumx-color-dark-L1: rgba(0, 0, 0, 0.7) !default; // Base dark color with 70% opacity
734
794
  $lumx-color-dark-L2: rgba(0, 0, 0, 0.54) !default; // Base dark color with 54% opacity
735
795
  $lumx-color-dark-L3: rgba(0, 0, 0, 0.38) !default; // Base dark color with 38% opacity
736
796
  $lumx-color-dark-L4: rgba(0, 0, 0, 0.2) !default; // Base dark color with 20% opacity
@@ -743,42 +803,42 @@ $lumx-color-light-L3: rgba(255, 255, 255, 0.6) !default; // Base light color wit
743
803
  $lumx-color-light-L4: rgba(255, 255, 255, 0.4) !default; // Base light color with 40% opacity
744
804
  $lumx-color-light-L5: rgba(255, 255, 255, 0.2) !default; // Base light color with 20% opacity
745
805
  $lumx-color-light-L6: rgba(255, 255, 255, 0.1) !default; // Base light color with 10% 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
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
782
842
  $lumx-color-grey-N: #757575 !default; // Neutral grey color
783
843
  $lumx-color-grey-L1: rgba(117, 117, 117, 0.8) !default; // Base grey color with 80% opacity
784
844
  $lumx-color-grey-L2: rgba(117, 117, 117, 0.6) !default; // Base grey color with 60% opacity
@@ -786,35 +846,35 @@ $lumx-color-grey-L3: rgba(117, 117, 117, 0.4) !default; // Base grey color with
786
846
  $lumx-color-grey-L4: rgba(117, 117, 117, 0.2) !default; // Base grey color with 20% opacity
787
847
  $lumx-color-grey-L5: rgba(117, 117, 117, 0.1) !default; // Base grey color with 10% opacity
788
848
  $lumx-color-grey-L6: rgba(117, 117, 117, 0.05) !default; // Base grey color with 5% 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
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
797
857
  $lumx-color-primary-L6: rgba(33, 150, 243, 0.05) !default; // Base blue 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
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
816
876
  $lumx-color-black-N: rgba(0, 0, 0, 0.87) !default; // Neutral dark color
817
- $lumx-color-black-L1: rgba(0, 0, 0, 0.8) !default; // Base dark color with 80% opacity
877
+ $lumx-color-black-L1: rgba(0, 0, 0, 0.7) !default; // Base dark color with 70% opacity
818
878
  $lumx-color-black-L2: rgba(0, 0, 0, 0.54) !default; // Base dark color with 54% opacity
819
879
  $lumx-color-black-L3: rgba(0, 0, 0, 0.38) !default; // Base dark color with 38% opacity
820
880
  $lumx-color-black-L4: rgba(0, 0, 0, 0.2) !default; // Base dark color with 20% opacity
@@ -827,15 +887,15 @@ $lumx-color-white-L3: rgba(255, 255, 255, 0.6) !default; // Base light color wit
827
887
  $lumx-color-white-L4: rgba(255, 255, 255, 0.4) !default; // Base light color with 40% opacity
828
888
  $lumx-color-white-L5: rgba(255, 255, 255, 0.2) !default; // Base light color with 20% opacity
829
889
  $lumx-color-white-L6: rgba(255, 255, 255, 0.1) !default; // Base light 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
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
839
899
  $lumx-size-xxs: 14px !default;
840
900
  $lumx-size-xs: 20px !default;
841
901
  $lumx-size-s: 24px !default;
package/scss/components/badge/_index.scss CHANGED
@@ -35,7 +35,11 @@
35
35
  @if $key == 'light' {
36
36
  @include lumx-elevation(2);
37
37
  } @else {
38
- color: lumx-color-variant('light', 'N');
38
+ @if $key == 'yellow' {
39
+ color: lumx-color-variant('dark', 'L1');
40
+ } @else {
41
+ color: lumx-color-variant('light', 'N');
42
+ }
39
43
  }
40
44
  }
41
45
  }
package/scss/components/chip/_index.scss CHANGED
@@ -82,6 +82,12 @@
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
+ }
85
91
  }
86
92
  }
87
93
 
package/scss/components/flag/_index.scss CHANGED
@@ -25,9 +25,14 @@
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
- }
29
28
 
30
- .#{$lumx-base-prefix}-flag--color-#{$key} .#{$lumx-base-prefix}-flag__label {
31
- color: lumx-color-variant($key, 'D2');
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
+ }
32
37
  }
33
38
  }
package/scss/components/icon/_index.scss CHANGED
@@ -33,6 +33,28 @@
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
+ }
36
58
  }
37
59
 
38
60
  /* Icon sizes
package/scss/components/icon/_mixins.scss CHANGED
@@ -13,9 +13,18 @@
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, 'L5');
17
- color: lumx-color-variant($color, 'L2');
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
+ }
18
23
  } @else if $has-shape == false {
19
- color: lumx-color-variant($color, 'N');
24
+ @if $color == 'dark' {
25
+ color: lumx-color-variant('dark', 'L1');
26
+ } @else {
27
+ color: lumx-color-variant($color, 'N');
28
+ }
20
29
  }
21
30
  }
package/scss/components/list/_mixins.scss CHANGED
@@ -23,7 +23,8 @@
23
23
  }
24
24
 
25
25
  @mixin lumx-list-item-clickable() {
26
- color: lumx-color-variant('dark', 'N');
26
+ @include lumx-state(lumx-base-const('state', 'DEFAULT'), lumx-base-const('emphasis', 'LOW'), 'dark');
27
+
27
28
  cursor: pointer;
28
29
 
29
30
  &:hover,
package/scss/components/message/_index.scss CHANGED
@@ -20,6 +20,7 @@
20
20
  @include lumx-typography('body1');
21
21
 
22
22
  flex: 1 1 auto;
23
+ color: lumx-color-variant('dark', 'N');
23
24
  }
24
25
  }
25
26
 
@@ -31,10 +32,5 @@
31
32
  &.#{$lumx-base-prefix}-message--has-background {
32
33
  background-color: lumx-color-variant($color, 'L6');
33
34
  }
34
-
35
- .#{$lumx-base-prefix}-message__icon,
36
- .#{$lumx-base-prefix}-message__text {
37
- color: lumx-color-variant($color, 'D2');
38
- }
39
35
  }
40
36
  }
package/scss/components/notification/_index.scss CHANGED
@@ -29,7 +29,6 @@
29
29
  height: $lumx-notification-height;
30
30
  align-items: center;
31
31
  justify-content: center;
32
- color: lumx-color-variant('light', 'L3');
33
32
  }
34
33
 
35
34
  &__content {
@@ -62,5 +61,11 @@
62
61
  @each $color in $lumx-notification-color-palette {
63
62
  .#{$lumx-base-prefix}-notification--color-#{$color} .#{$lumx-base-prefix}-notification__icon {
64
63
  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
+ }
65
70
  }
66
71
  }
package/scss/components/side-navigation/_mixins.scss CHANGED
@@ -21,7 +21,6 @@
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');
25
24
  outline: none;
26
25
  text-decoration: none;
27
26
  }
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', 'N');
76
+ color: lumx-color-variant('dark', 'L1');
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', 'N');
90
+ color: lumx-color-variant('dark', 'L1');
91
91
  }
92
92
 
93
93
  #{$self}--theme-dark & {