@lumx/core 2.1.0 → 2.1.4

package/package.json

@@ -42,7 +42,7 @@
         "prepublishOnly": "yarn build"
     },
     "sideEffects": false,
-    "version": "2.1.0",
+    "version": "2.1.4",
     "devDependencies": {
         "@babel/core": "^7.8.3",
         "@babel/plugin-proposal-class-properties": "^7.8.3",
@@ -79,5 +79,5 @@
         "moment": "^2.24.0",
         "moment-range": "^4.0.2"
     },
-    "gitHead": "14169feb6b36c1be3ba8b49089953ea3aaef5cd0"
+    "gitHead": "de78ddf378468c55a56149bcb4568e66a9a88f32"
 }

package/scss/_design-tokens.scss

@@ -1,6 +1,6 @@
 /**
  * Do not edit directly
- * Generated on Tue, 19 Oct 2021 08:35:24 GMT
+ * Generated on Thu, 18 Nov 2021 15:14:46 GMT
  */
 
 $lumx-button-height: 36px !default;
@@ -47,7 +47,12 @@ $lumx-button-emphasis-medium-state-default-theme-light-background-color: rgba(
     0,
     0.12
 ) !default; // Base dark color with 12% opacity
-$lumx-button-emphasis-medium-state-default-theme-light-color: rgba(0, 0, 0, 0.87) !default; // Neutral dark color
+$lumx-button-emphasis-medium-state-default-theme-light-color: rgba(
+    0,
+    0,
+    0,
+    0.7
+) !default; // Base dark color with 80% opacity
 $lumx-button-emphasis-medium-state-default-theme-light-border-color: transparent !default;
 $lumx-button-emphasis-medium-state-default-theme-dark-background-color: rgba(
     255,
@@ -65,7 +70,12 @@ $lumx-button-emphasis-medium-state-hover-theme-light-background-color: rgba(
     0,
     0.2
 ) !default; // Base dark color with 20% opacity
-$lumx-button-emphasis-medium-state-hover-theme-light-color: rgba(0, 0, 0, 0.87) !default; // Neutral dark color
+$lumx-button-emphasis-medium-state-hover-theme-light-color: rgba(
+    0,
+    0,
+    0,
+    0.7
+) !default; // Base dark color with 80% opacity
 $lumx-button-emphasis-medium-state-hover-theme-light-border-color: transparent !default;
 $lumx-button-emphasis-medium-state-hover-theme-dark-background-color: rgba(
     255,
@@ -83,7 +93,12 @@ $lumx-button-emphasis-medium-state-active-theme-light-background-color: rgba(
     0,
     0.38
 ) !default; // Base dark color with 38% opacity
-$lumx-button-emphasis-medium-state-active-theme-light-color: rgba(0, 0, 0, 0.87) !default; // Neutral dark color
+$lumx-button-emphasis-medium-state-active-theme-light-color: rgba(
+    0,
+    0,
+    0,
+    0.7
+) !default; // Base dark color with 80% opacity
 $lumx-button-emphasis-medium-state-active-theme-light-border-color: transparent !default;
 $lumx-button-emphasis-medium-state-active-theme-dark-background-color: rgba(
     255,
@@ -96,7 +111,12 @@ $lumx-button-emphasis-medium-state-active-theme-dark-border-color: transparent !
 $lumx-button-emphasis-low-state-default-padding-horizontal: 8px !default;
 $lumx-button-emphasis-low-state-default-border-width: 0 !default;
 $lumx-button-emphasis-low-state-default-theme-light-background-color: transparent !default;
-$lumx-button-emphasis-low-state-default-theme-light-color: rgba(0, 0, 0, 0.87) !default; // Neutral dark color
+$lumx-button-emphasis-low-state-default-theme-light-color: rgba(
+    0,
+    0,
+    0,
+    0.7
+) !default; // Base dark color with 80% opacity
 $lumx-button-emphasis-low-state-default-theme-light-border-color: transparent !default;
 $lumx-button-emphasis-low-state-default-theme-dark-background-color: transparent !default;
 $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(
     0,
     0.12
 ) !default; // Base dark color with 12% opacity
-$lumx-button-emphasis-low-state-hover-theme-light-color: rgba(0, 0, 0, 0.87) !default; // Neutral dark color
+$lumx-button-emphasis-low-state-hover-theme-light-color: rgba(
+    0,
+    0,
+    0,
+    0.7
+) !default; // Base dark color with 80% opacity
 $lumx-button-emphasis-low-state-hover-theme-light-border-color: transparent !default;
 $lumx-button-emphasis-low-state-hover-theme-dark-background-color: rgba(
     255,
@@ -127,7 +152,12 @@ $lumx-button-emphasis-low-state-active-theme-light-background-color: rgba(
     0,
     0.2
 ) !default; // Base dark color with 20% opacity
-$lumx-button-emphasis-low-state-active-theme-light-color: rgba(0, 0, 0, 0.87) !default; // Neutral dark color
+$lumx-button-emphasis-low-state-active-theme-light-color: rgba(
+    0,
+    0,
+    0,
+    0.7
+) !default; // Base dark color with 80% opacity
 $lumx-button-emphasis-low-state-active-theme-light-border-color: transparent !default;
 $lumx-button-emphasis-low-state-active-theme-dark-background-color: rgba(
     255,
@@ -229,21 +259,21 @@ $lumx-navigation-item-emphasis-low-state-default-theme-light-icon-color: rgba(
     0,
     0,
     0,
-    0.87
-) !default; // Neutral dark color
+    0.7
+) !default; // Base dark color with 80% opacity
 $lumx-navigation-item-emphasis-low-state-default-theme-light-label-color: rgba(
     0,
     0,
     0,
-    0.87
-) !default; // Neutral dark color
+    0.7
+) !default; // Base dark color with 80% opacity
 $lumx-navigation-item-emphasis-low-state-default-theme-light-chevron-background-color: transparent !default;
 $lumx-navigation-item-emphasis-low-state-default-theme-light-chevron-color: rgba(
     0,
     0,
     0,
-    0.87
-) !default; // Neutral dark color
+    0.7
+) !default; // Base dark color with 80% opacity
 $lumx-navigation-item-emphasis-low-state-default-theme-dark-background-color: transparent !default;
 $lumx-navigation-item-emphasis-low-state-default-theme-dark-border-color: rgba(
     255,
@@ -275,14 +305,14 @@ $lumx-navigation-item-emphasis-low-state-hover-theme-light-icon-color: rgba(
     0,
     0,
     0,
-    0.87
-) !default; // Neutral dark color
+    0.7
+) !default; // Base dark color with 80% opacity
 $lumx-navigation-item-emphasis-low-state-hover-theme-light-label-color: rgba(
     0,
     0,
     0,
-    0.87
-) !default; // Neutral dark color
+    0.7
+) !default; // Base dark color with 80% opacity
 $lumx-navigation-item-emphasis-low-state-hover-theme-light-chevron-background-color: rgba(
     0,
     0,
@@ -293,8 +323,8 @@ $lumx-navigation-item-emphasis-low-state-hover-theme-light-chevron-color: rgba(
     0,
     0,
     0,
-    0.87
-) !default; // Neutral dark color
+    0.7
+) !default; // Base dark color with 80% opacity
 $lumx-navigation-item-emphasis-low-state-hover-theme-dark-background-color: rgba(
     255,
     255,
@@ -336,14 +366,14 @@ $lumx-navigation-item-emphasis-low-state-active-theme-light-icon-color: rgba(
     0,
     0,
     0,
-    0.87
-) !default; // Neutral dark color
+    0.7
+) !default; // Base dark color with 80% opacity
 $lumx-navigation-item-emphasis-low-state-active-theme-light-label-color: rgba(
     0,
     0,
     0,
-    0.87
-) !default; // Neutral dark color
+    0.7
+) !default; // Base dark color with 80% opacity
 $lumx-navigation-item-emphasis-low-state-active-theme-light-chevron-background-color: rgba(
     0,
     0,
@@ -354,8 +384,8 @@ $lumx-navigation-item-emphasis-low-state-active-theme-light-chevron-color: rgba(
     0,
     0,
     0,
-    0.87
-) !default; // Neutral dark color
+    0.7
+) !default; // Base dark color with 80% opacity
 $lumx-navigation-item-emphasis-low-state-active-theme-dark-background-color: rgba(
     255,
     255,
@@ -480,7 +510,12 @@ $lumx-tabs-link-emphasis-low-state-default-border-right-width: 0 !default;
 $lumx-tabs-link-emphasis-low-state-default-border-bottom-width: 2px !default;
 $lumx-tabs-link-emphasis-low-state-default-border-left-width: 0 !default;
 $lumx-tabs-link-emphasis-low-state-default-theme-light-background-color: transparent !default;
-$lumx-tabs-link-emphasis-low-state-default-theme-light-color: rgba(0, 0, 0, 0.87) !default; // Neutral dark color
+$lumx-tabs-link-emphasis-low-state-default-theme-light-color: rgba(
+    0,
+    0,
+    0,
+    0.7
+) !default; // Base dark color with 80% opacity
 $lumx-tabs-link-emphasis-low-state-default-theme-light-border-color: rgba(
     0,
     0,
@@ -505,7 +540,12 @@ $lumx-tabs-link-emphasis-low-state-hover-theme-light-background-color: rgba(
     0,
     0.12
 ) !default; // Base dark color with 12% opacity
-$lumx-tabs-link-emphasis-low-state-hover-theme-light-color: rgba(0, 0, 0, 0.87) !default; // Neutral dark color
+$lumx-tabs-link-emphasis-low-state-hover-theme-light-color: rgba(
+    0,
+    0,
+    0,
+    0.7
+) !default; // Base dark color with 80% opacity
 $lumx-tabs-link-emphasis-low-state-hover-theme-light-border-color: rgba(
     0,
     0,
@@ -535,7 +575,12 @@ $lumx-tabs-link-emphasis-low-state-active-theme-light-background-color: rgba(
     0,
     0.2
 ) !default; // Base dark color with 20% opacity
-$lumx-tabs-link-emphasis-low-state-active-theme-light-color: rgba(0, 0, 0, 0.87) !default; // Neutral dark color
+$lumx-tabs-link-emphasis-low-state-active-theme-light-color: rgba(
+    0,
+    0,
+    0,
+    0.7
+) !default; // Base dark color with 80% opacity
 $lumx-tabs-link-emphasis-low-state-active-theme-light-border-color: rgba(
     0,
     0,
@@ -560,7 +605,12 @@ $lumx-tabs-link-emphasis-selected-state-default-border-right-width: 0 !default;
 $lumx-tabs-link-emphasis-selected-state-default-border-bottom-width: 2px !default;
 $lumx-tabs-link-emphasis-selected-state-default-border-left-width: 0 !default;
 $lumx-tabs-link-emphasis-selected-state-default-theme-light-background-color: transparent !default;
-$lumx-tabs-link-emphasis-selected-state-default-theme-light-color: rgba(0, 0, 0, 0.87) !default; // Neutral dark color
+$lumx-tabs-link-emphasis-selected-state-default-theme-light-color: rgba(
+    0,
+    0,
+    0,
+    0.7
+) !default; // Base dark color with 80% opacity
 $lumx-tabs-link-emphasis-selected-state-default-theme-light-border-color: var(--lumx-color-primary-N) !default;
 $lumx-tabs-link-emphasis-selected-state-default-theme-dark-background-color: transparent !default;
 $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
     0,
     0.12
 ) !default; // Base dark color with 12% opacity
-$lumx-tabs-link-emphasis-selected-state-hover-theme-light-color: rgba(0, 0, 0, 0.87) !default; // Neutral dark color
+$lumx-tabs-link-emphasis-selected-state-hover-theme-light-color: rgba(
+    0,
+    0,
+    0,
+    0.7
+) !default; // Base dark color with 80% opacity
 $lumx-tabs-link-emphasis-selected-state-hover-theme-light-border-color: var(--lumx-color-primary-N) !default;
 $lumx-tabs-link-emphasis-selected-state-hover-theme-dark-background-color: rgba(
     255,
@@ -595,7 +650,12 @@ $lumx-tabs-link-emphasis-selected-state-active-theme-light-background-color: rgb
     0,
     0.2
 ) !default; // Base dark color with 20% opacity
-$lumx-tabs-link-emphasis-selected-state-active-theme-light-color: rgba(0, 0, 0, 0.87) !default; // Neutral dark color
+$lumx-tabs-link-emphasis-selected-state-active-theme-light-color: rgba(
+    0,
+    0,
+    0,
+    0.7
+) !default; // Base dark color with 80% opacity
 $lumx-tabs-link-emphasis-selected-state-active-theme-light-border-color: var(--lumx-color-primary-N) !default;
 $lumx-tabs-link-emphasis-selected-state-active-theme-dark-background-color: rgba(
     255,
@@ -730,7 +790,7 @@ $lumx-text-field-state-focus-theme-dark-input-placeholder-color: rgba(
 ) !default; // Base light color with 80% opacity
 $lumx-border-radius: 4px !default;
 $lumx-color-dark-N: rgba(0, 0, 0, 0.87) !default; // Neutral dark color
-$lumx-color-dark-L1: rgba(0, 0, 0, 0.8) !default; // Base dark color with 80% opacity
+$lumx-color-dark-L1: rgba(0, 0, 0, 0.7) !default; // Base dark color with 80% opacity
 $lumx-color-dark-L2: rgba(0, 0, 0, 0.54) !default; // Base dark color with 54% opacity
 $lumx-color-dark-L3: rgba(0, 0, 0, 0.38) !default; // Base dark color with 38% opacity
 $lumx-color-dark-L4: rgba(0, 0, 0, 0.2) !default; // Base dark color with 20% opacity
@@ -814,7 +874,7 @@ $lumx-color-accent-L4: rgba(76, 175, 80, 0.2) !default; // Base green color with
 $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-black-N: rgba(0, 0, 0, 0.87) !default; // Neutral dark color
-$lumx-color-black-L1: rgba(0, 0, 0, 0.8) !default; // Base dark color with 80% opacity
+$lumx-color-black-L1: rgba(0, 0, 0, 0.7) !default; // Base dark color with 80% opacity
 $lumx-color-black-L2: rgba(0, 0, 0, 0.54) !default; // Base dark color with 54% opacity
 $lumx-color-black-L3: rgba(0, 0, 0, 0.38) !default; // Base dark color with 38% opacity
 $lumx-color-black-L4: rgba(0, 0, 0, 0.2) !default; // Base dark color with 20% opacity

package/scss/components/button/_index.scss

@@ -59,7 +59,8 @@
             }
 
             &.#{$lumx-base-prefix}-button--variant-icon {
-                & > i {
+                & > i,
+                & > img {
                     @include lumx-button-icon('icon', $key);
                 }
             }
@@ -112,6 +113,8 @@
    ========================================================================== */
 
 .#{$lumx-base-prefix}-button-wrapper {
+    width: fit-content;
+
     &--variant-button {
         border-radius: var(--lumx-border-radius);
     }
@@ -150,3 +153,12 @@
         }
     }
 }
+
+/* Button full width
+   ========================================================================== */
+
+.#{$lumx-base-prefix}-button--is-full-width:not(.#{$lumx-base-prefix}-button--variant-icon),
+.#{$lumx-base-prefix}-button-wrapper--is-full-width:not(.#{$lumx-base-prefix}-button-wrapper--variant-icon) {
+    width: 100%;
+    flex-grow: 1;
+}

package/scss/components/button/_mixins.scss

@@ -14,7 +14,8 @@
     user-select: none;
     vertical-align: top;
 
-    &:hover {
+    &:hover,
+    &[class*='--is-hovered'] {
         cursor: pointer;
     }
 
@@ -69,7 +70,8 @@
         }
     }
 
-    &:hover {
+    &:hover,
+    &[class*='--is-hovered'] {
         @if $variant == 'button' {
             @if $size == lumx-base-const('size', 'M') {
                 padding: 0 var(--lumx-button-#{$emphasis}-state-hover-padding-horizontal);
@@ -83,7 +85,8 @@
         }
     }
 
-    &:active {
+    &:active,
+    &[class*='--is-active'] {
         @if $variant == 'button' {
             @if $size == lumx-base-const('size', 'M') {
                 padding: 0 var(--lumx-button-#{$emphasis}-state-active-padding-horizontal);
@@ -124,7 +127,8 @@
         }
     }
 
-    &:hover {
+    &:hover,
+    &[class*='--is-hovered'] {
         @if $color == 'primary' and $emphasis == lumx-base-const('emphasis', 'HIGH') {
             background-color: var(--lumx-button-#{$emphasis}-state-hover-#{$theme}-background-color);
             color: var(--lumx-button-#{$emphasis}-state-hover-#{$theme}-color);
@@ -149,7 +153,8 @@
         }
     }
 
-    &:active {
+    &:active,
+    &[class*='--is-active'] {
         @if $color == 'primary' and $emphasis == lumx-base-const('emphasis', 'HIGH') {
             background-color: var(--lumx-button-#{$emphasis}-state-active-#{$theme}-background-color);
             color: var(--lumx-button-#{$emphasis}-state-active-#{$theme}-color);
@@ -174,7 +179,8 @@
         }
     }
 
-    &[data-focus-visible-added] {
+    &[data-focus-visible-added],
+    &[class*='--is-focused'] {
         @include lumx-state(lumx-base-const('state', 'FOCUS'), $emphasis, $color, $theme);
     }
 
@@ -187,15 +193,18 @@
 @mixin lumx-button-is-selected($theme) {
     @include lumx-state-as-selected(lumx-base-const('state', 'DEFAULT'), $theme);
 
-    &:hover {
+    &:hover,
+    &[class*='--is-hovered'] {
         @include lumx-state-as-selected(lumx-base-const('state', 'HOVER'), $theme);
     }
 
-    &:active {
+    &:active,
+    &[class*='--is-active'] {
         @include lumx-state-as-selected(lumx-base-const('state', 'ACTIVE'), $theme);
     }
 
-    &[data-focus-visible-added] {
+    &[data-focus-visible-added],
+    &[class*='--is-focused'] {
         @include lumx-state-as-selected(lumx-base-const('state', 'FOCUS'), $theme);
     }
 }

package/scss/components/flag/_index.scss

@@ -25,9 +25,14 @@
 @each $key, $color in $lumx-color-palette {
     .#{$lumx-base-prefix}-flag--color-#{$key} {
         border: 2px solid lumx-color-variant($key, 'L4');
-    }
 
-    .#{$lumx-base-prefix}-flag--color-#{$key} .#{$lumx-base-prefix}-flag__label {
-        color: lumx-color-variant($key, 'D2');
+        .#{$lumx-base-prefix}-flag__label,
+        .#{$lumx-base-prefix}-flag__icon {
+            @if $key == 'dark' {
+                color: lumx-color-variant($key, 'L1');
+            } @else {
+                color: lumx-color-variant($key, 'D2');
+            }
+        }
     }
 }

package/scss/components/list/_index.scss

@@ -41,6 +41,11 @@
     &__link--is-selected {
         @include lumx-list-item-selected;
     }
+
+    &__link--is-disabled,
+    &__link[aria-disabled='true'] {
+        @include lumx-state-disabled-input;
+    }
 }
 
 /* Item spacing

package/scss/components/list/_mixins.scss

@@ -23,7 +23,8 @@
 }
 
 @mixin lumx-list-item-clickable() {
-    color: lumx-color-variant('dark', 'N');
+    @include lumx-state(lumx-base-const('state', 'DEFAULT'), lumx-base-const('emphasis', 'LOW'), 'dark');
+
     cursor: pointer;
 
     &:hover,

package/scss/components/side-navigation/_mixins.scss

@@ -21,7 +21,6 @@
     align-items: center;
     padding: 0 $lumx-spacing-unit;
     border-radius: var(--lumx-border-radius);
-    color: lumx-color-variant('dark', 'N');
     outline: none;
     text-decoration: none;
 }

package/scss/components/text-field/_index.scss

@@ -144,7 +144,8 @@
         }
     }
 
-    &__input-clear {
+    &__input-clear,
+    &__after-element {
         @include lumx-text-field-input-clear;
     }
 

package/scss/components/text-field/_mixins.scss

@@ -144,11 +144,15 @@
 
 @mixin lumx-text-field-input-clear() {
     flex-shrink: 0;
-    margin-top: calc(
-        var(--lumx-text-field-wrapper-padding-vertical) +
-            ((var(--lumx-material-text-field-input-content-line-height) - (var(--lumx-button-height) / 1.5)) / 2)
-    );
-    margin-left: $lumx-spacing-unit / 2;
+    margin:
+        // vertical
+        calc(
+            var(--lumx-text-field-wrapper-padding-vertical) +
+                ((var(--lumx-material-text-field-input-content-line-height) - (var(--lumx-button-height) / 1.5)) / 2)
+        )
+        // horizontal
+        $lumx-spacing-unit / 2;
+    margin-right: 0;
 }
 
 @mixin lumx-text-field-chips() {

package/scss/components/thumbnail/_variables.scss

@@ -6,5 +6,5 @@ $lumx-thumbnail-aspect-ratio: (
     // Ratio 1:1
     'square': 100%,
     // Ratio 2:3
-    'vertical': 150%,
+    'vertical': 150%
 );

package/scss/components/uploader/_index.scss

@@ -73,7 +73,7 @@
         margin-bottom: $lumx-spacing-unit;
 
         #{$self}--theme-light & {
-            color: lumx-color-variant('dark', 'N');
+            color: lumx-color-variant('dark', 'L1');
         }
 
         #{$self}--theme-dark & {
@@ -87,7 +87,7 @@
         text-align: center;
 
         #{$self}--theme-light & {
-            color: lumx-color-variant('dark', 'N');
+            color: lumx-color-variant('dark', 'L1');
         }
 
         #{$self}--theme-dark & {

package/scss/core/state/_mixins.scss

@@ -31,7 +31,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 == 'dark' {
+            color: lumx-color-variant($color, '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') {
@@ -86,7 +91,12 @@
 @mixin lumx-state-low($state, $color, $has-focus-inset: false) {
     @if $state == lumx-base-const('state', 'DEFAULT') {
         background-color: transparent;
-        color: lumx-color-variant($color, 'N');
+
+        @if $color == 'dark' {
+            color: lumx-color-variant($color, 'L1');
+        } @else {
+            color: lumx-color-variant($color, 'N');
+        }
     } @else if $state == lumx-base-const('state', 'HOVER') {
         background-color: lumx-color-variant($color, 'L5');
     } @else if $state == lumx-base-const('state', 'ACTIVE') {