@lumx/core 2.1.9-alpha-thumbnail4 → 2.1.9-alpha-thumbnail5

package/scss/components/thumbnail/_index.scss

@@ -12,6 +12,32 @@
     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 {
+        position: relative;
+        width: 100%;
+
+        #{$self}--variant-rounded & {
+            border-radius: var(--lumx-border-radius);
+        }
+    }
+
+    &__image {
+        width: fit-content;
+        max-width: 100%;
+        height: fit-content;
+        max-height: 100%;
+    }
+
     &__background,
     &__image {
         display: block;
@@ -35,54 +61,6 @@
         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  &__fallback {
-        position: absolute;
-        inset: 0;
-        display: flex;
-        align-items: center;
-        justify-content: center;
-        background-color: lumx-color-variant('dark', 'L6');
-    }
-
 }
 
 /* Thumbnail sizes
@@ -90,8 +68,7 @@
 
 @each $key, $size in $lumx-sizes {
     .#{$lumx-base-prefix}-thumbnail--size-#{$key} {
-        max-width: $size;
-        width: 100%;
+        width: $size;
 
         .#{$lumx-base-prefix}-thumbnail__background,
         .#{$lumx-base-prefix}-thumbnail__image {
@@ -104,15 +81,12 @@
    ========================================================================== */
 
 .#{$lumx-base-prefix}-thumbnail:not(.#{$lumx-base-prefix}-thumbnail--aspect-ratio-original) {
-
-    .#{$lumx-base-prefix}-thumbnail__background {
-        width: 100%;
-        position: relative;
-    }
-
     .#{$lumx-base-prefix}-thumbnail__image {
         position: absolute;
-        inset: 0;
+        top: 0;
+        right: 0;
+        bottom: 0;
+        left: 0;
         width: 100%;
         height: 100%;
         object-fit: cover;
@@ -121,10 +95,8 @@
 }
 
 @each $key, $aspect-ratio in $lumx-thumbnail-aspect-ratio {
-    .#{$lumx-base-prefix}-thumbnail--aspect-ratio-#{$key} {
-        .#{$lumx-base-prefix}-thumbnail__background {
-            padding-top: $aspect-ratio;
-        }
+    .#{$lumx-base-prefix}-thumbnail--aspect-ratio-#{$key} .#{$lumx-base-prefix}-thumbnail__background {
+        padding-top: $aspect-ratio;
     }
 }
 
@@ -181,13 +153,45 @@
     }
 }
 
-/* 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 & {
+            background-color: lumx-color-variant('dark', 'L6');
+        }
+
+        #{$lumx-base-prefix}-thumbnail--theme-dark & {
+            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;
+        }
     }
 }
 

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);
     }
 }