@lumx/core 2.1.7 → 2.1.8-alpha.0

package/package.json

@@ -42,7 +42,7 @@
         "version": "yarn version-changelog ../../CHANGELOG.md && yarn changelog-verify ../../CHANGELOG.md && git add ../../CHANGELOG.md"
     },
     "sideEffects": false,
-    "version": "2.1.7",
+    "version": "2.1.8-alpha.0",
     "devDependencies": {
         "@babel/core": "^7.8.3",
         "@babel/plugin-proposal-class-properties": "^7.8.3",
@@ -82,5 +82,5 @@
         "moment": "^2.24.0",
         "moment-range": "^4.0.2"
     },
-    "gitHead": "b025a4e7e397ec0e725430120007f9ac8433fadb"
+    "gitHead": "6cbc4962664dd018c884f1006c1c6b20f7ae183a"
 }

package/scss/_design-tokens.scss

@@ -1,6 +1,6 @@
 /**
  * Do not edit directly
- * Generated on Tue, 30 Nov 2021 09:20:09 GMT
+ * Generated on Wed, 08 Dec 2021 08:10:59 GMT
  */
 
 $lumx-button-height: 36px !default;
@@ -765,7 +765,7 @@ $lumx-text-field-state-focus-theme-light-input-border-color: rgba(
     150,
     243,
     0.6
-) !default; // Base blue color with 60% opacity
+) !default; // Base primary color with 60% opacity
 $lumx-text-field-state-focus-theme-light-input-content-color: rgba(0, 0, 0, 0.87) !default; // Neutral dark color
 $lumx-text-field-state-focus-theme-light-input-placeholder-color: rgba(
     0,
@@ -803,42 +803,42 @@ $lumx-color-light-L3: rgba(255, 255, 255, 0.6) !default; // Base light color wit
 $lumx-color-light-L4: rgba(255, 255, 255, 0.4) !default; // Base light color with 40% opacity
 $lumx-color-light-L5: rgba(255, 255, 255, 0.2) !default; // Base light color with 20% opacity
 $lumx-color-light-L6: rgba(255, 255, 255, 0.1) !default; // Base light color with 10% opacity
-$lumx-color-blue-D2: #1976d2 !default; // Darkest blue color
-$lumx-color-blue-D1: #1e88e5 !default; // Dark blue color
-$lumx-color-blue-N: #2196f3 !default; // Neutral blue color
-$lumx-color-blue-L1: rgba(33, 150, 243, 0.8) !default; // Base blue color with 80% opacity
-$lumx-color-blue-L2: rgba(33, 150, 243, 0.6) !default; // Base blue color with 60% opacity
-$lumx-color-blue-L3: rgba(33, 150, 243, 0.4) !default; // Base blue color with 40% opacity
-$lumx-color-blue-L4: rgba(33, 150, 243, 0.2) !default; // Base blue color with 20% opacity
-$lumx-color-blue-L5: rgba(33, 150, 243, 0.1) !default; // Base blue color with 10% opacity
-$lumx-color-blue-L6: rgba(33, 150, 243, 0.05) !default; // Base blue color with 5% opacity
-$lumx-color-green-D2: #388e3c !default; // Darkest green color
-$lumx-color-green-D1: #43a047 !default; // Dark green color
-$lumx-color-green-N: #4caf50 !default; // Neutral green color
-$lumx-color-green-L1: rgba(76, 175, 80, 0.8) !default; // Base green color with 80% opacity
-$lumx-color-green-L2: rgba(76, 175, 80, 0.6) !default; // Base green color with 60% opacity
-$lumx-color-green-L3: rgba(76, 175, 80, 0.4) !default; // Base green color with 40% opacity
-$lumx-color-green-L4: rgba(76, 175, 80, 0.2) !default; // Base green color with 20% opacity
-$lumx-color-green-L5: rgba(76, 175, 80, 0.1) !default; // Base green color with 10% opacity
-$lumx-color-green-L6: rgba(76, 175, 80, 0.05) !default; // Base green color with 5% opacity
-$lumx-color-yellow-D2: #ff6f00 !default; // Darkest yellow color
-$lumx-color-yellow-D1: #ff8f00 !default; // Dark yellow color
-$lumx-color-yellow-N: #ffb300 !default; // Neutral yellow color
-$lumx-color-yellow-L1: rgba(255, 179, 0, 0.8) !default; // Base yellow color with 80% opacity
-$lumx-color-yellow-L2: rgba(255, 179, 0, 0.7) !default; // Base yellow color with 70% opacity
-$lumx-color-yellow-L3: rgba(255, 179, 0, 0.6) !default; // Base yellow color with 60% opacity
-$lumx-color-yellow-L4: rgba(255, 179, 0, 0.4) !default; // Base yellow color with 40% opacity
-$lumx-color-yellow-L5: rgba(255, 179, 0, 0.2) !default; // Base yellow color with 20% opacity
-$lumx-color-yellow-L6: rgba(255, 179, 0, 0.1) !default; // Base yellow color with 10% opacity
-$lumx-color-red-D2: #d32f2f !default; // Darkest red color
-$lumx-color-red-D1: #e53935 !default; // Dark red color
-$lumx-color-red-N: #f44336 !default; // Neutral red color
-$lumx-color-red-L1: rgba(244, 67, 54, 0.8) !default; // Base red color with 80% opacity
-$lumx-color-red-L2: rgba(244, 67, 54, 0.6) !default; // Base red color with 60% opacity
-$lumx-color-red-L3: rgba(244, 67, 54, 0.4) !default; // Base red color with 40% opacity
-$lumx-color-red-L4: rgba(244, 67, 54, 0.2) !default; // Base red color with 20% opacity
-$lumx-color-red-L5: rgba(244, 67, 54, 0.1) !default; // Base red color with 10% opacity
-$lumx-color-red-L6: rgba(244, 67, 54, 0.05) !default; // Base red color with 5% opacity
+$lumx-color-blue-D2: #1546c1 !default; // Darkest blue color
+$lumx-color-blue-D1: #184ed8 !default; // Dark blue color
+$lumx-color-blue-N: #245be7 !default; // Neutral blue color
+$lumx-color-blue-L1: rgba(36, 91, 231, 0.8) !default; // Base blue color with 80% opacity
+$lumx-color-blue-L2: rgba(36, 91, 231, 0.6) !default; // Base blue color with 60% opacity
+$lumx-color-blue-L3: rgba(36, 91, 231, 0.4) !default; // Base blue color with 40% opacity
+$lumx-color-blue-L4: rgba(36, 91, 231, 0.2) !default; // Base blue color with 20% opacity
+$lumx-color-blue-L5: rgba(36, 91, 231, 0.1) !default; // Base blue color with 10% opacity
+$lumx-color-blue-L6: rgba(36, 91, 231, 0.05) !default; // Base blue color with 5% opacity
+$lumx-color-green-D2: #1a6e59 !default; // Darkest green color
+$lumx-color-green-D1: #177a61 !default; // Dark green color
+$lumx-color-green-N: #138669 !default; // Neutral green color
+$lumx-color-green-L1: rgba(19, 134, 105, 0.8) !default; // Base green color with 80% opacity
+$lumx-color-green-L2: rgba(19, 134, 105, 0.6) !default; // Base green color with 60% opacity
+$lumx-color-green-L3: rgba(19, 134, 105, 0.4) !default; // Base green color with 40% opacity
+$lumx-color-green-L4: rgba(19, 134, 105, 0.2) !default; // Base green color with 20% opacity
+$lumx-color-green-L5: rgba(19, 134, 105, 0.1) !default; // Base green color with 10% opacity
+$lumx-color-green-L6: rgba(19, 134, 105, 0.05) !default; // Base green color with 5% opacity
+$lumx-color-yellow-D2: #ffa125 !default; // Darkest yellow color
+$lumx-color-yellow-D1: #ffb325 !default; // Dark yellow color
+$lumx-color-yellow-N: #ffc425 !default; // Neutral yellow color
+$lumx-color-yellow-L1: rgba(255, 196, 37, 0.9) !default; // Base yellow color with 80% opacity
+$lumx-color-yellow-L2: rgba(255, 196, 37, 0.8) !default; // Base yellow color with 70% opacity
+$lumx-color-yellow-L3: rgba(255, 196, 37, 0.6) !default; // Base yellow color with 60% opacity
+$lumx-color-yellow-L4: rgba(255, 196, 37, 0.48) !default; // Base yellow color with 40% opacity
+$lumx-color-yellow-L5: rgba(255, 196, 37, 0.24) !default; // Base yellow color with 20% opacity
+$lumx-color-yellow-L6: rgba(255, 196, 37, 0.12) !default; // Base yellow color with 10% opacity
+$lumx-color-red-D2: #be1e46 !default; // Darkest red color
+$lumx-color-red-D1: #d42148 !default; // Dark red color
+$lumx-color-red-N: #df3050 !default; // Neutral red color
+$lumx-color-red-L1: rgba(223, 48, 80, 0.8) !default; // Base red color with 80% opacity
+$lumx-color-red-L2: rgba(223, 48, 80, 0.6) !default; // Base red color with 60% opacity
+$lumx-color-red-L3: rgba(223, 48, 80, 0.4) !default; // Base red color with 40% opacity
+$lumx-color-red-L4: rgba(223, 48, 80, 0.2) !default; // Base red color with 20% opacity
+$lumx-color-red-L5: rgba(223, 48, 80, 0.1) !default; // Base red color with 10% opacity
+$lumx-color-red-L6: rgba(223, 48, 80, 0.05) !default; // Base red color with 5% opacity
 $lumx-color-grey-N: #757575 !default; // Neutral grey color
 $lumx-color-grey-L1: rgba(117, 117, 117, 0.8) !default; // Base grey color with 80% opacity
 $lumx-color-grey-L2: rgba(117, 117, 117, 0.6) !default; // Base grey color with 60% opacity
@@ -846,33 +846,33 @@ $lumx-color-grey-L3: rgba(117, 117, 117, 0.4) !default; // Base grey color with
 $lumx-color-grey-L4: rgba(117, 117, 117, 0.2) !default; // Base grey color with 20% opacity
 $lumx-color-grey-L5: rgba(117, 117, 117, 0.1) !default; // Base grey color with 10% opacity
 $lumx-color-grey-L6: rgba(117, 117, 117, 0.05) !default; // Base grey color with 5% opacity
-$lumx-color-primary-D2: #1976d2 !default; // Darkest blue color
-$lumx-color-primary-D1: #1e88e5 !default; // Dark blue color
-$lumx-color-primary-N: #2196f3 !default; // Neutral blue color
-$lumx-color-primary-L1: rgba(33, 150, 243, 0.8) !default; // Base blue color with 80% opacity
-$lumx-color-primary-L2: rgba(33, 150, 243, 0.6) !default; // Base blue color with 60% opacity
-$lumx-color-primary-L3: rgba(33, 150, 243, 0.4) !default; // Base blue color with 40% opacity
-$lumx-color-primary-L4: rgba(33, 150, 243, 0.2) !default; // Base blue color with 20% opacity
-$lumx-color-primary-L5: rgba(33, 150, 243, 0.1) !default; // Base blue color with 10% opacity
+$lumx-color-primary-D2: #1976d2 !default; // Darkest primary color
+$lumx-color-primary-D1: #1e88e5 !default; // Dark primary color
+$lumx-color-primary-N: #2196f3 !default; // Neutral primary color
+$lumx-color-primary-L1: rgba(33, 150, 243, 0.8) !default; // Base primary color with 80% opacity
+$lumx-color-primary-L2: rgba(33, 150, 243, 0.6) !default; // Base primary color with 60% opacity
+$lumx-color-primary-L3: rgba(33, 150, 243, 0.4) !default; // Base primary color with 40% opacity
+$lumx-color-primary-L4: rgba(33, 150, 243, 0.2) !default; // Base primary color with 20% opacity
+$lumx-color-primary-L5: rgba(33, 150, 243, 0.1) !default; // Base primary color with 10% opacity
 $lumx-color-primary-L6: rgba(33, 150, 243, 0.05) !default; // Base blue color with 5% opacity
-$lumx-color-secondary-D2: #388e3c !default; // Darkest green color
-$lumx-color-secondary-D1: #43a047 !default; // Dark green color
-$lumx-color-secondary-N: #4caf50 !default; // Neutral green color
-$lumx-color-secondary-L1: rgba(76, 175, 80, 0.8) !default; // Base green color with 80% opacity
-$lumx-color-secondary-L2: rgba(76, 175, 80, 0.6) !default; // Base green color with 60% opacity
-$lumx-color-secondary-L3: rgba(76, 175, 80, 0.4) !default; // Base green color with 40% opacity
-$lumx-color-secondary-L4: rgba(76, 175, 80, 0.2) !default; // Base green color with 20% opacity
-$lumx-color-secondary-L5: rgba(76, 175, 80, 0.1) !default; // Base green color with 10% opacity
-$lumx-color-secondary-L6: rgba(76, 175, 80, 0.05) !default; // Base green color with 5% opacity
-$lumx-color-accent-D2: #388e3c !default; // Darkest green color
-$lumx-color-accent-D1: #43a047 !default; // Dark green color
-$lumx-color-accent-N: #4caf50 !default; // Neutral green color
-$lumx-color-accent-L1: rgba(76, 175, 80, 0.8) !default; // Base green color with 80% opacity
-$lumx-color-accent-L2: rgba(76, 175, 80, 0.6) !default; // Base green color with 60% opacity
-$lumx-color-accent-L3: rgba(76, 175, 80, 0.4) !default; // Base green color with 40% opacity
-$lumx-color-accent-L4: rgba(76, 175, 80, 0.2) !default; // Base green color with 20% opacity
-$lumx-color-accent-L5: rgba(76, 175, 80, 0.1) !default; // Base green color with 10% opacity
-$lumx-color-accent-L6: rgba(76, 175, 80, 0.05) !default; // Base green color with 5% opacity
+$lumx-color-secondary-D2: #388e3c !default; // Darkest secondary color
+$lumx-color-secondary-D1: #43a047 !default; // Dark secondary color
+$lumx-color-secondary-N: #4caf50 !default; // Neutral secondary color
+$lumx-color-secondary-L1: rgba(76, 175, 80, 0.8) !default; // Base secondary color with 80% opacity
+$lumx-color-secondary-L2: rgba(76, 175, 80, 0.6) !default; // Base secondary color with 60% opacity
+$lumx-color-secondary-L3: rgba(76, 175, 80, 0.4) !default; // Base secondary color with 40% opacity
+$lumx-color-secondary-L4: rgba(76, 175, 80, 0.2) !default; // Base secondary color with 20% opacity
+$lumx-color-secondary-L5: rgba(76, 175, 80, 0.1) !default; // Base secondary color with 10% opacity
+$lumx-color-secondary-L6: rgba(76, 175, 80, 0.05) !default; // Base secondary color with 5% opacity
+$lumx-color-accent-D2: #388e3c !default; // Darkest secondary color
+$lumx-color-accent-D1: #43a047 !default; // Dark secondary color
+$lumx-color-accent-N: #4caf50 !default; // Neutral secondary color
+$lumx-color-accent-L1: rgba(76, 175, 80, 0.8) !default; // Base secondary color with 80% opacity
+$lumx-color-accent-L2: rgba(76, 175, 80, 0.6) !default; // Base secondary color with 60% opacity
+$lumx-color-accent-L3: rgba(76, 175, 80, 0.4) !default; // Base secondary color with 40% opacity
+$lumx-color-accent-L4: rgba(76, 175, 80, 0.2) !default; // Base secondary color with 20% opacity
+$lumx-color-accent-L5: rgba(76, 175, 80, 0.1) !default; // Base secondary color with 10% opacity
+$lumx-color-accent-L6: rgba(76, 175, 80, 0.05) !default; // Base secondary color with 5% opacity
 $lumx-color-black-N: rgba(0, 0, 0, 0.87) !default; // Neutral dark color
 $lumx-color-black-L1: rgba(0, 0, 0, 0.7) !default; // Base dark color with 70% opacity
 $lumx-color-black-L2: rgba(0, 0, 0, 0.54) !default; // Base dark color with 54% opacity
@@ -887,15 +887,15 @@ $lumx-color-white-L3: rgba(255, 255, 255, 0.6) !default; // Base light color wit
 $lumx-color-white-L4: rgba(255, 255, 255, 0.4) !default; // Base light color with 40% opacity
 $lumx-color-white-L5: rgba(255, 255, 255, 0.2) !default; // Base light color with 20% opacity
 $lumx-color-white-L6: rgba(255, 255, 255, 0.1) !default; // Base light color with 10% opacity
-$lumx-color-orange-D2: #ff6f00 !default; // Darkest yellow color
-$lumx-color-orange-D1: #ff8f00 !default; // Dark yellow color
-$lumx-color-orange-N: #ffb300 !default; // Neutral yellow color
-$lumx-color-orange-L1: rgba(255, 179, 0, 0.8) !default; // Base yellow color with 80% opacity
-$lumx-color-orange-L2: rgba(255, 179, 0, 0.7) !default; // Base yellow color with 70% opacity
-$lumx-color-orange-L3: rgba(255, 179, 0, 0.6) !default; // Base yellow color with 60% opacity
-$lumx-color-orange-L4: rgba(255, 179, 0, 0.4) !default; // Base yellow color with 40% opacity
-$lumx-color-orange-L5: rgba(255, 179, 0, 0.2) !default; // Base yellow color with 20% opacity
-$lumx-color-orange-L6: rgba(255, 179, 0, 0.1) !default; // Base yellow color with 10% opacity
+$lumx-color-orange-D2: #ffa125 !default; // Darkest yellow color
+$lumx-color-orange-D1: #ffb325 !default; // Dark yellow color
+$lumx-color-orange-N: #ffc425 !default; // Neutral yellow color
+$lumx-color-orange-L1: rgba(255, 196, 37, 0.9) !default; // Base yellow color with 80% opacity
+$lumx-color-orange-L2: rgba(255, 196, 37, 0.8) !default; // Base yellow color with 70% opacity
+$lumx-color-orange-L3: rgba(255, 196, 37, 0.6) !default; // Base yellow color with 60% opacity
+$lumx-color-orange-L4: rgba(255, 196, 37, 0.48) !default; // Base yellow color with 40% opacity
+$lumx-color-orange-L5: rgba(255, 196, 37, 0.24) !default; // Base yellow color with 20% opacity
+$lumx-color-orange-L6: rgba(255, 196, 37, 0.12) !default; // Base yellow color with 10% opacity
 $lumx-size-xxs: 14px !default;
 $lumx-size-xs: 20px !default;
 $lumx-size-s: 24px !default;

package/scss/components/badge/_index.scss

@@ -35,7 +35,11 @@
         @if $key == 'light' {
             @include lumx-elevation(2);
         } @else {
-            color: lumx-color-variant('light', 'N');
+            @if $key == 'yellow' {
+                color: lumx-color-variant('dark', 'L1');
+            } @else {
+                color: lumx-color-variant('light', 'N');
+            }
         }
     }
 }

package/scss/components/flag/_index.scss

@@ -28,10 +28,10 @@
 
         .#{$lumx-base-prefix}-flag__label,
         .#{$lumx-base-prefix}-flag__icon {
-            @if $key == 'dark' {
-                color: lumx-color-variant($key, 'L1');
+            @if $key == 'dark' or $key == 'yellow' {
+                color: lumx-color-variant('dark', 'L1');
             } @else {
-                color: lumx-color-variant($key, 'D2');
+                color: lumx-color-variant($key, 'N');
             }
         }
     }

package/scss/components/icon/_index.scss

@@ -33,6 +33,28 @@
             display: none;
         }
     }
+
+    &--has-dark-layer {
+        position: relative;
+
+        &::after {
+            position: absolute;
+            z-index: 0;
+            top: $lumx-spacing-unit / 2;
+            right: $lumx-spacing-unit / 2;
+            bottom: $lumx-spacing-unit / 2;
+            left: $lumx-spacing-unit / 2;
+            background-color: lumx-color-variant('dark', 'L1');
+            border-radius: 50%;
+            content: '';
+        }
+
+        &::before,
+        svg {
+            position: relative;
+            z-index: 1;
+        }
+    }
 }
 
 /* Icon sizes

package/scss/components/icon/_mixins.scss

@@ -13,8 +13,13 @@
 
 @mixin lumx-icon-color($color, $has-shape: false) {
     @if $has-shape == true {
-        background-color: lumx-color-variant($color, 'L5');
-        color: lumx-color-variant($color, 'L2');
+        background-color: lumx-color-variant($color, 'L6');
+
+        @if $color == 'yellow' {
+            color: lumx-color-variant('dark', 'L1');
+        } @else {
+            color: lumx-color-variant($color, 'N');
+        }
     } @else if $has-shape == false {
         @if $color == 'dark' {
             color: lumx-color-variant('dark', 'L1');

package/scss/components/message/_index.scss

@@ -20,6 +20,7 @@
         @include lumx-typography('body1');
 
         flex: 1 1 auto;
+        color: lumx-color-variant('dark', 'N');
     }
 }
 
@@ -31,10 +32,5 @@
         &.#{$lumx-base-prefix}-message--has-background {
             background-color: lumx-color-variant($color, 'L6');
         }
-
-        .#{$lumx-base-prefix}-message__icon,
-        .#{$lumx-base-prefix}-message__text {
-            color: lumx-color-variant($color, 'D2');
-        }
     }
 }

package/scss/components/notification/_index.scss

@@ -29,7 +29,6 @@
         height: $lumx-notification-height;
         align-items: center;
         justify-content: center;
-        color: lumx-color-variant('light', 'L3');
     }
 
     &__content {
@@ -62,5 +61,11 @@
 @each $color in $lumx-notification-color-palette {
     .#{$lumx-base-prefix}-notification--color-#{$color} .#{$lumx-base-prefix}-notification__icon {
         background-color: lumx-color-variant($color, 'N');
+
+        @if $color == 'yellow' {
+            color: lumx-color-variant('dark', 'L1');
+        } @else {
+            color: lumx-color-variant('light', 'N');
+        }
     }
 }

package/scss/core/state/_mixins.scss

@@ -2,7 +2,12 @@
     @if $state == lumx-base-const('state', 'DEFAULT') {
         @if $theme == lumx-base-const('theme', 'LIGHT') {
             background-color: lumx-color-variant($color, 'N');
-            color: lumx-color-variant('light', 'N');
+
+            @if $color == 'yellow' {
+                color: lumx-color-variant('dark', 'L1');
+            } @else {
+                color: lumx-color-variant('light', 'N');
+            }
         } @else if $theme == lumx-base-const('theme', 'DARK') {
             background-color: lumx-color-variant('light', 'N');
             color: lumx-color-variant($color, 'N');
@@ -31,7 +36,12 @@
 @mixin lumx-state-medium($state, $color, $has-focus-inset: false) {
     @if $state == lumx-base-const('state', 'DEFAULT') {
         background-color: lumx-color-variant($color, 'L5');
-        color: lumx-color-variant($color, 'N');
+
+        @if $color == 'yellow' {
+            color: lumx-color-variant('dark', 'L1');
+        } @else {
+            color: lumx-color-variant($color, 'N');
+        }
 
         @if $color == 'dark' {
             .#{$lumx-base-prefix}-icon {