@lumx/core 2.1.9-alpha-thumbnail2 → 2.1.9-alpha-thumbnail7

package/scss/components/chip/_index.scss

@@ -82,6 +82,12 @@
         &.#{$lumx-base-prefix}-chip--is-highlighted {
             @include lumx-state(lumx-base-const('state', 'FOCUS'), lumx-base-const('emphasis', 'MEDIUM'), $key);
         }
+
+        @if $key == 'dark' {
+            .#{$lumx-base-prefix}-chip__label {
+                color: lumx-color-variant('dark', 'L1');
+            }
+        }
     }
 }
 

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/icon/_mixins.scss

@@ -16,6 +16,10 @@
         background-color: lumx-color-variant($color, 'L5');
         color: lumx-color-variant($color, 'L2');
     } @else if $has-shape == false {
-        color: lumx-color-variant($color, 'N');
+        @if $color == 'dark' {
+            color: lumx-color-variant('dark', 'L1');
+        } @else {
+            color: lumx-color-variant($color, 'N');
+        }
     }
 }

package/scss/components/image-block/_index.scss

@@ -11,6 +11,8 @@
         display: flex;
         flex: 1 1 auto;
         flex-direction: column;
+        justify-content: center;
+        align-items: center;
     }
 
     &__wrapper {

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/thumbnail/_index.scss

@@ -12,21 +12,38 @@
     background: none;
     outline: none;
 
+    &--fill-height,
+    &--fill-height &__background,
+    &--fill-height &__image {
+        width: unset;
+        max-width: unset;
+        height: 100%;
+        max-height: unset;
+        flex: 1 1 auto;
+    }
+
     &__background {
-        overflow: hidden;
-        background-position: center;
-        background-repeat: no-repeat;
-        background-size: cover;
+        position: relative;
+        width: 100%;
+
+        #{$self}--variant-rounded & {
+            border-radius: var(--lumx-border-radius);
+        }
     }
 
     &__image {
-        display: block;
-        // Make sure
-        overflow: hidden;
+        font-size: 0;
+        width: fit-content;
+        max-width: 100%;
+        height: fit-content;
+        max-height: 100%;
     }
 
     &__background,
     &__image {
+        display: block;
+        overflow: hidden;
+
         #{$self}--align-left & {
             margin-right: auto;
         }
@@ -45,76 +62,21 @@
         right: -$lumx-spacing-unit / 2;
         bottom: -$lumx-spacing-unit / 2;
     }
-
-    /* Rounded variant */
-    &--variant-rounded &__background {
-        border-radius: var(--lumx-border-radius);
-    }
-
-    &--fill-height,
-    &--fill-height &__background,
-    &--fill-height &__image {
-        flex: 1 1 auto;
-        height: 100%;
-    }
-
-    /* Thumbnail original ratio */
-    &--aspect-ratio-original {
-        &:not(#{$self}--fill-height) {
-            width: fit-content;
-            height: fit-content;
-
-            #{$self}__image:not(#{$self}__image--is-loading)
-            {
-                width: fit-content;
-                height: fit-content;
-                max-width: 100%;
-                max-height: 100%;
-            }
-        }
-
-        &#{$self}--fill-height {
-            #{$self}__background,
-            #{$self}__image
-            {
-                max-height: unset;
-                max-width: unset;
-            }
-        }
-    }
-
-    /* Thumbnail error fallback */
-    &--has-error {
-        #{$self}__background {
-            display: grid;
-
-            // Stack image and fallback on top of each other
-            & > * {
-                grid-column: 1;
-                grid-row: 1;
-            }
-        }
-
-        #{$self}__fallback {
-            display: flex;
-            align-items: center;
-            justify-content: center;
-            background-color: lumx-color-variant('dark', 'L6');
-        }
-    }
-
 }
 
 /* Thumbnail sizes
    ========================================================================== */
 
 @each $key, $size in $lumx-sizes {
-    .#{$lumx-base-prefix}-thumbnail--size-#{$key}:not(.#{$lumx-base-prefix}-thumbnail--fill-height) {
+    .#{$lumx-base-prefix}-thumbnail--size-#{$key} {
         width: $size;
+    }
+}
 
-        .#{$lumx-base-prefix}-thumbnail__image {
-            width: 100%;
-        }
+.#{$lumx-base-prefix}-thumbnail[class*="#{$lumx-base-prefix}-thumbnail--size-"] {
+    .#{$lumx-base-prefix}-thumbnail__background,
+    .#{$lumx-base-prefix}-thumbnail__image {
+        width: 100%;
     }
 }
 
@@ -122,25 +84,12 @@
    ========================================================================== */
 
 .#{$lumx-base-prefix}-thumbnail:not(.#{$lumx-base-prefix}-thumbnail--aspect-ratio-original) {
-    &::before {
-        display: block;
-        content: "";
-        //width: 100%;
-        //float: left;
-    }
-
-    /*&::after {
-        display: block;
-        content: "";
-        clear: both;
-    }*/
-
-    .#{$lumx-base-prefix}-thumbnail__background {
-        position: absolute;
-        inset: 0;
-    }
-
     .#{$lumx-base-prefix}-thumbnail__image {
+        position: absolute;
+        top: 0;
+        right: 0;
+        bottom: 0;
+        left: 0;
         width: 100%;
         height: 100%;
         object-fit: cover;
@@ -149,10 +98,8 @@
 }
 
 @each $key, $aspect-ratio in $lumx-thumbnail-aspect-ratio {
-    .#{$lumx-base-prefix}-thumbnail--aspect-ratio-#{$key} {
-        &::before {
-            padding-top: $aspect-ratio;
-        }
+    .#{$lumx-base-prefix}-thumbnail--aspect-ratio-#{$key} .#{$lumx-base-prefix}-thumbnail__background {
+        padding-top: $aspect-ratio;
     }
 }
 
@@ -209,31 +156,62 @@
     }
 }
 
-/* Loading */
-.#{$lumx-base-prefix}-thumbnail--is-loading  {
+/* Loading state */
+.#{$lumx-base-prefix}-thumbnail--is-loading {
+    &.#{$lumx-base-prefix}-thumbnail--theme-light .#{$lumx-base-prefix}-thumbnail__background {
+        @include lumx-skeleton('light');
+    }
+
     &.#{$lumx-base-prefix}-thumbnail--theme-dark .#{$lumx-base-prefix}-thumbnail__background {
         @include lumx-skeleton('dark');
     }
-    &.#{$lumx-base-prefix}-thumbnail--theme-light .#{$lumx-base-prefix}-thumbnail__background {
-        @include lumx-skeleton('light');
+}
+
+/* Error state */
+.#{$lumx-base-prefix}-thumbnail--has-error {
+    /** Icon fallback */
+    &.#{$lumx-base-prefix}-thumbnail--has-icon-error-fallback {
+        .#{$lumx-base-prefix}-thumbnail__fallback {
+            position: absolute;
+            top: 0;
+            right: 0;
+            bottom: 0;
+            left: 0;
+            display: flex;
+            align-items: center;
+            justify-content: center;
+        }
+
+        &.#{$lumx-base-prefix}-thumbnail--theme-light .#{$lumx-base-prefix}-thumbnail__fallback {
+            background-color: lumx-color-variant('dark', 'L6');
+        }
+
+        &.#{$lumx-base-prefix}-thumbnail--theme-dark .#{$lumx-base-prefix}-thumbnail__fallback {
+            background-color: lumx-color-variant('light', 'L6');
+        }
+    }
+
+    /* Custom fallback */
+    &.#{$lumx-base-prefix}-thumbnail--has-custom-error-fallback {
+        /* Disable aspect ratio */
+        .#{$lumx-base-prefix}-thumbnail__background {
+            padding-top: 0;
+        }
     }
 }
 
 /* Thumbnail badge mask
    ========================================================================== */
 
-@each $key, $size in $lumx-sizes {
-    $mask-size: map-get($lumx-sizes, lumx-base-const('size', 'XS')) - $lumx-spacing-unit;
-    $mask-offset: $size - 6;
+$badge-radius-size: map-get($lumx-sizes, lumx-base-const('size', 'XS')) / 2 + 2;
 
-    .#{$lumx-base-prefix}-thumbnail--has-badge.#{$lumx-base-prefix}-thumbnail--size-#{$key} {
-        .#{$lumx-base-prefix}-thumbnail__background,
-        .#{$lumx-base-prefix}-thumbnail__fallback {
-            mask-image: radial-gradient(
-                circle at $mask-offset $mask-offset,
-                transparent $mask-size,
-                /* offset circle size (+1) to soften the edge */ black $mask-size + 1
-            );
-        }
+.#{$lumx-base-prefix}-thumbnail--has-badge {
+    .#{$lumx-base-prefix}-thumbnail__background,
+    .#{$lumx-base-prefix}-thumbnail__fallback {
+        mask-image: radial-gradient(
+            circle at calc(100% - #{$badge-radius-size - 6}) calc(100% - #{$badge-radius-size - 6}),
+            transparent $badge-radius-size,
+            /* offset circle size (+1) to soften the edge */ black $badge-radius-size + 1
+        );
     }
 }

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/components/user-block/_index.scss

@@ -49,7 +49,7 @@
             color: lumx-color-variant('light', 'N');
         }
 
-        &--is-clickable {
+        &[tabindex='0'] {
             #{$self}--theme-light & {
                 @include lumx-link('dark');
             }

package/scss/core/color/_functions.scss

@@ -1,11 +1,7 @@
 @function lumx-color-variant($color, $variant) {
     @if map-has-key($lumx-color-palette, $color) {
-        @if $color == 'primary' or $color == 'secondary' {
-            @return var(--lumx-color-#{$color}-#{$variant});
-        } @else {
-            @return map-get(map-get($lumx-color-palette, $color), $variant);
-        }
+        @return var(--lumx-color-#{$color}-#{$variant});
     } @else {
-        @return map-get(map-get($lumx-color-palette, 'dark'), $variant);
+        @return var(--lumx-color-dark-N);
     }
 }

package/scss/core/state/_mixins.scss

@@ -52,10 +52,8 @@
             color: lumx-color-variant('primary', 'D2');
         } @else if $state == lumx-base-const('state', 'HOVER') {
             background-color: lumx-color-variant('primary', 'L4');
-            color: lumx-color-variant('primary', 'D2');
         } @else if $state == lumx-base-const('state', 'ACTIVE') {
             background-color: lumx-color-variant('primary', 'L3');
-            color: lumx-color-variant('primary', 'D2');
         } @else if $state == lumx-base-const('state', 'FOCUS') {
             @if $has-focus-inset == true {
                 box-shadow: inset 0 0 0 2px lumx-color-variant('primary', 'L3');
@@ -69,10 +67,8 @@
             color: lumx-color-variant('light', 'N');
         } @else if $state == lumx-base-const('state', 'HOVER') {
             background-color: lumx-color-variant('light', 'L4');
-            color: lumx-color-variant('light', 'N');
         } @else if $state == lumx-base-const('state', 'ACTIVE') {
             background-color: lumx-color-variant('light', 'L5');
-            color: lumx-color-variant('light', 'N');
         } @else if $state == lumx-base-const('state', 'FOCUS') {
             @if $has-focus-inset == true {
                 box-shadow: inset 0 0 0 2px lumx-color-variant('light', 'L3');