@lumx/core 2.2.4 → 2.2.7

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.2.4",
+    "version": "2.2.7",
     "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": "9a0c7cf6a76a651ba094cd3414505f8131fe0502"
+    "gitHead": "594291a6920a37f9ad214659da975a004c912692"
 }

package/scss/_design-tokens.scss

@@ -1,6 +1,6 @@
 /**
  * Do not edit directly
- * Generated on Wed, 12 Jan 2022 16:44:48 GMT
+ * Generated on Wed, 02 Mar 2022 10:51:14 GMT
  */
 
 $lumx-button-height: 36px !default;
@@ -373,42 +373,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: rgb(25, 118, 210) !default; // Darkest blue color
-$lumx-color-blue-D1: rgb(30, 136, 229) !default; // Dark blue color
-$lumx-color-blue-N: rgb(33, 150, 243) !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: rgb(56, 142, 60) !default; // Darkest green color
-$lumx-color-green-D1: rgb(67, 160, 71) !default; // Dark green color
-$lumx-color-green-N: rgb(76, 175, 80) !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: rgb(255, 111, 0) !default; // Darkest yellow color
-$lumx-color-yellow-D1: rgb(255, 143, 0) !default; // Dark yellow color
-$lumx-color-yellow-N: rgb(255, 179, 0) !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: rgb(211, 47, 47) !default; // Darkest red color
-$lumx-color-red-D1: rgb(229, 57, 53) !default; // Dark red color
-$lumx-color-red-N: rgb(244, 67, 54) !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: rgb(21, 70, 193) !default; // Darkest blue color
+$lumx-color-blue-D1: rgb(24, 78, 216) !default; // Dark blue color
+$lumx-color-blue-N: rgb(36, 91, 231) !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: rgb(26, 110, 89) !default; // Darkest green color
+$lumx-color-green-D1: rgb(23, 122, 97) !default; // Dark green color
+$lumx-color-green-N: rgb(19, 134, 105) !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: rgb(255, 161, 37) !default; // Darkest yellow color
+$lumx-color-yellow-D1: rgb(255, 179, 37) !default; // Dark yellow color
+$lumx-color-yellow-N: rgb(255, 196, 37) !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: rgb(190, 30, 70) !default; // Darkest red color
+$lumx-color-red-D1: rgb(212, 33, 72) !default; // Dark red color
+$lumx-color-red-N: rgb(223, 48, 80) !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: rgb(117, 117, 117) !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
@@ -416,33 +416,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: rgb(25, 118, 210) !default; // Darkest blue color
-$lumx-color-primary-D1: rgb(30, 136, 229) !default; // Dark blue color
-$lumx-color-primary-N: rgb(33, 150, 243) !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-L6: rgba(33, 150, 243, 0.05) !default; // Base blue color with 5% opacity
-$lumx-color-secondary-D2: rgb(56, 142, 60) !default; // Darkest green color
-$lumx-color-secondary-D1: rgb(67, 160, 71) !default; // Dark green color
-$lumx-color-secondary-N: rgb(76, 175, 80) !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: rgb(56, 142, 60) !default; // Darkest green color
-$lumx-color-accent-D1: rgb(67, 160, 71) !default; // Dark green color
-$lumx-color-accent-N: rgb(76, 175, 80) !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-primary-D2: var(--lumx-color-primary-D2) !default; // Darkest blue color
+$lumx-color-primary-D1: var(--lumx-color-primary-D1) !default; // Dark blue color
+$lumx-color-primary-N: var(--lumx-color-primary-N) !default; // Neutral blue color
+$lumx-color-primary-L1: var(--lumx-color-primary-L1) !default; // Base blue color with 80% opacity
+$lumx-color-primary-L2: var(--lumx-color-primary-L2) !default; // Base blue color with 60% opacity
+$lumx-color-primary-L3: var(--lumx-color-primary-L3) !default; // Base blue color with 40% opacity
+$lumx-color-primary-L4: var(--lumx-color-primary-L4) !default; // Base blue color with 20% opacity
+$lumx-color-primary-L5: var(--lumx-color-primary-L5) !default; // Base blue color with 10% opacity
+$lumx-color-primary-L6: var(--lumx-color-primary-L6) !default; // Base blue color with 5% opacity
+$lumx-color-secondary-D2: var(--lumx-color-secondary-D2) !default; // Darkest green color
+$lumx-color-secondary-D1: var(--lumx-color-secondary-D1) !default; // Dark green color
+$lumx-color-secondary-N: var(--lumx-color-secondary-N) !default; // Neutral green color
+$lumx-color-secondary-L1: var(--lumx-color-secondary-L1) !default; // Base green color with 80% opacity
+$lumx-color-secondary-L2: var(--lumx-color-secondary-L2) !default; // Base green color with 60% opacity
+$lumx-color-secondary-L3: var(--lumx-color-secondary-L3) !default; // Base green color with 40% opacity
+$lumx-color-secondary-L4: var(--lumx-color-secondary-L4) !default; // Base green color with 20% opacity
+$lumx-color-secondary-L5: var(--lumx-color-secondary-L5) !default; // Base green color with 10% opacity
+$lumx-color-secondary-L6: var(--lumx-color-secondary-L6) !default; // Base green color with 5% opacity
+$lumx-color-accent-D2: var(--lumx-color-accent-D2) !default; // Darkest green color
+$lumx-color-accent-D1: var(--lumx-color-accent-D1) !default; // Dark green color
+$lumx-color-accent-N: var(--lumx-color-accent-N) !default; // Neutral green color
+$lumx-color-accent-L1: var(--lumx-color-accent-L1) !default; // Base green color with 80% opacity
+$lumx-color-accent-L2: var(--lumx-color-accent-L2) !default; // Base green color with 60% opacity
+$lumx-color-accent-L3: var(--lumx-color-accent-L3) !default; // Base green color with 40% opacity
+$lumx-color-accent-L4: var(--lumx-color-accent-L4) !default; // Base green color with 20% opacity
+$lumx-color-accent-L5: var(--lumx-color-accent-L5) !default; // Base green color with 10% opacity
+$lumx-color-accent-L6: var(--lumx-color-accent-L6) !default; // Base green 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
@@ -457,15 +457,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: rgb(255, 111, 0) !default; // Darkest yellow color
-$lumx-color-orange-D1: rgb(255, 143, 0) !default; // Dark yellow color
-$lumx-color-orange-N: rgb(255, 179, 0) !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: rgb(255, 161, 37) !default; // Darkest yellow color
+$lumx-color-orange-D1: rgb(255, 179, 37) !default; // Dark yellow color
+$lumx-color-orange-N: rgb(255, 196, 37) !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/components/skeleton/_mixins.scss

@@ -1,4 +1,3 @@
-
 @mixin lumx-skeleton($theme: 'light') {
     animation: skeleton-loading 1s ease-in-out 0s infinite;
 

package/scss/components/tooltip/_index.scss

@@ -78,3 +78,10 @@
         line-height: $lumx-tooltip-line-height;
     }
 }
+
+.#{$lumx-base-prefix}-tooltip-anchor-wrapper {
+    width: fit-content;
+    // Prevent text selection on mobile device that would hinder long press.
+    -webkit-touch-callout: none;
+    user-select: none;
+}

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');
+        }
     } @else if $state == lumx-base-const('state', 'HOVER') {
         background-color: lumx-color-variant($color, 'L4');
     } @else if $state == lumx-base-const('state', 'ACTIVE') {