@lumx/core 2.1.8-alpha.0 → 2.1.9-alpha-thumbnail3

package/scss/components/skeleton/_index.scss

@@ -18,15 +18,14 @@
    ========================================================================== */
 
 .#{$lumx-base-prefix}-skeleton-circle {
-    animation: skeleton-loading 1s ease-in-out 0s infinite;
     border-radius: 50%;
 
     &--theme-light {
-        background-color: lumx-color-variant('dark', 'L5');
+        @include lumx-skeleton('light');
     }
 
     &--theme-dark {
-        background-color: lumx-color-variant('light', 'L5');
+        @include lumx-skeleton('dark');
     }
 }
 
@@ -47,18 +46,16 @@
    ========================================================================== */
 
 .#{$lumx-base-prefix}-skeleton-rectangle {
-    animation: skeleton-loading 1s ease-in-out 0s infinite;
-
     &--variant-rounded {
         border-radius: var(--lumx-border-radius);
     }
 
     &--theme-light {
-        background-color: lumx-color-variant('dark', 'L5');
+        @include lumx-skeleton('light');
     }
 
     &--theme-dark {
-        background-color: lumx-color-variant('light', 'L5');
+        @include lumx-skeleton('dark');
     }
 }
 

package/scss/components/skeleton/_mixins.scss

@@ -0,0 +1,10 @@
+
+@mixin lumx-skeleton($theme: 'light') {
+    animation: skeleton-loading 1s ease-in-out 0s infinite;
+
+    @if $theme == 'light' {
+        background-color: lumx-color-variant('dark', 'L5');
+    } @else {
+        background-color: lumx-color-variant('light', 'L5');
+    }
+}

package/scss/components/thumbnail/_index.scss

@@ -12,44 +12,10 @@
     background: none;
     outline: none;
 
-    &--fill-height,
-    &--fill-height &__background {
-        display: flex;
-        /* Safari hack to force the image ratio */
-        height: fit-content;
-        min-height: 100%;
-        flex: 1 1 auto;
-        flex-direction: column;
-        justify-content: center;
-    }
-
-    &--variant-rounded {
-        border-radius: var(--lumx-border-radius);
-    }
-
-    &__background {
-        position: relative;
-        width: 100%;
-        background-position: center;
-        background-repeat: no-repeat;
-        background-size: cover;
-
-        #{$self}--variant-rounded & {
-            border-radius: var(--lumx-border-radius);
-        }
-    }
-
-    &__focused-image {
-        max-width: none;
-    }
-
     &__background,
     &__image {
         display: block;
-        max-width: 100%;
-        /* IE11 hack related to a bug with IE flexbox implementation (cf. https://stackoverflow.com/a/54054592) */
-        min-height: 1px;
-        max-height: 100%;
+        overflow: hidden;
 
         #{$self}--align-left & {
             margin-right: auto;
@@ -62,16 +28,6 @@
         #{$self}--align-right & {
             margin-left: auto;
         }
-
-        #{$self}--variant-rounded & {
-            border-radius: var(--lumx-border-radius);
-        }
-    }
-
-    &__fallback {
-        width: fit-content;
-        /* Center fallback icon when using fill-height prop */
-        margin: 0 auto;
     }
 
     &__badge {
@@ -79,6 +35,70 @@
         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
+            #{$self}__image,
+            #{$self}__fallback,
+            {
+                position: initial;
+                grid-column: 1;
+                grid-row: 1;
+            }
+        }
+        */
+
+        #{$self}__fallback {
+            position: absolute;
+            inset: 0;
+            display: flex;
+            align-items: center;
+            justify-content: center;
+            background-color: lumx-color-variant('dark', 'L6');
+        }
+    }
+
 }
 
 /* Thumbnail sizes
@@ -86,17 +106,40 @@
 
 @each $key, $size in $lumx-sizes {
     .#{$lumx-base-prefix}-thumbnail--size-#{$key} {
-        width: $size;
+        max-width: $size;
+        width: 100%;
+
+        .#{$lumx-base-prefix}-thumbnail__background,
+        .#{$lumx-base-prefix}-thumbnail__image {
+            width: 100%;
+        }
     }
 }
 
 /* Thumbnail aspect ratio
    ========================================================================== */
 
+.#{$lumx-base-prefix}-thumbnail:not(.#{$lumx-base-prefix}-thumbnail--aspect-ratio-original) {
+
+    .#{$lumx-base-prefix}-thumbnail__background {
+        position: relative;
+    }
+
+    .#{$lumx-base-prefix}-thumbnail__image {
+        position: absolute;
+        inset: 0;
+        width: 100%;
+        height: 100%;
+        object-fit: cover;
+        object-position: center;
+    }
+}
+
 @each $key, $aspect-ratio in $lumx-thumbnail-aspect-ratio {
-    .#{$lumx-base-prefix}-thumbnail--aspect-ratio-#{$key}:not(.#{$lumx-base-prefix}-thumbnail--fill-height)
+    .#{$lumx-base-prefix}-thumbnail--aspect-ratio-#{$key} {
         .#{$lumx-base-prefix}-thumbnail__background {
-        padding-top: $aspect-ratio;
+            padding-top: $aspect-ratio;
+        }
     }
 }
 
@@ -120,34 +163,49 @@
         pointer-events: none;
     }
 
+    /* Hover */
     &:hover::after,
     &:focus::after {
         @include lumx-state(lumx-base-const('state', 'HOVER'), lumx-base-const('emphasis', 'LOW'), 'dark');
     }
 
+    /* Active */
     &:active::after {
         @include lumx-state(lumx-base-const('state', 'ACTIVE'), lumx-base-const('emphasis', 'LOW'), 'dark');
     }
 }
 
+/* Focused (variant rounded) */
 .#{$lumx-base-prefix}-thumbnail--variant-rounded.#{$lumx-base-prefix}-thumbnail--is-clickable {
     &[data-focus-visible-added]::after {
         border-radius: var(--lumx-border-radius);
     }
 }
 
+/* Focused (light theme) */
 .#{$lumx-base-prefix}-thumbnail--theme-light.#{$lumx-base-prefix}-thumbnail--is-clickable {
     &[data-focus-visible-added]::after {
         @include lumx-state(lumx-base-const('state', 'FOCUS'), lumx-base-const('emphasis', 'LOW'), 'dark');
     }
 }
 
+/* Focused (dark theme) */
 .#{$lumx-base-prefix}-thumbnail--theme-dark.#{$lumx-base-prefix}-thumbnail--is-clickable {
     &[data-focus-visible-added]::after {
         @include lumx-state(lumx-base-const('state', 'FOCUS'), lumx-base-const('emphasis', 'LOW'), 'light');
     }
 }
 
+/* Loading */
+.#{$lumx-base-prefix}-thumbnail--is-loading  {
+    &.#{$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');
+    }
+}
+
 /* Thumbnail badge mask
    ========================================================================== */
 

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', 'L1');
+            color: lumx-color-variant('dark', 'N');
         }
 
         #{$self}--theme-dark & {
@@ -87,7 +87,7 @@
         text-align: center;
 
         #{$self}--theme-light & {
-            color: lumx-color-variant('dark', 'L1');
+            color: lumx-color-variant('dark', 'N');
         }
 
         #{$self}--theme-dark & {

package/scss/core/state/_mixins.scss

@@ -2,12 +2,7 @@
     @if $state == lumx-base-const('state', 'DEFAULT') {
         @if $theme == lumx-base-const('theme', 'LIGHT') {
             background-color: lumx-color-variant($color, 'N');
-
-            @if $color == 'yellow' {
-                color: lumx-color-variant('dark', 'L1');
-            } @else {
-                color: lumx-color-variant('light', 'N');
-            }
+            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');
@@ -36,18 +31,7 @@
 @mixin lumx-state-medium($state, $color, $has-focus-inset: false) {
     @if $state == lumx-base-const('state', 'DEFAULT') {
         background-color: lumx-color-variant($color, 'L5');
-
-        @if $color == 'yellow' {
-            color: lumx-color-variant('dark', 'L1');
-        } @else {
-            color: lumx-color-variant($color, 'N');
-        }
-
-        @if $color == 'dark' {
-            .#{$lumx-base-prefix}-icon {
-                color: lumx-color-variant('dark', 'L1');
-            }
-        }
+        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') {
@@ -66,14 +50,12 @@
         @if $state == lumx-base-const('state', 'DEFAULT') {
             background-color: lumx-color-variant('primary', 'L5');
             color: lumx-color-variant('primary', 'D2');
-
-            .#{$lumx-base-prefix}-icon {
-                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');
@@ -85,14 +67,12 @@
         @if $state == lumx-base-const('state', 'DEFAULT') {
             background-color: lumx-color-variant('light', 'L3');
             color: lumx-color-variant('light', 'N');
-
-            .#{$lumx-base-prefix}-icon {
-                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');
@@ -107,12 +87,6 @@
     @if $state == lumx-base-const('state', 'DEFAULT') {
         background-color: transparent;
         color: lumx-color-variant($color, 'N');
-
-        @if $color == 'dark' {
-            .#{$lumx-base-prefix}-icon {
-                color: lumx-color-variant('dark', 'L1');
-            }
-        }
     } @else if $state == lumx-base-const('state', 'HOVER') {
         background-color: lumx-color-variant($color, 'L5');
     } @else if $state == lumx-base-const('state', 'ACTIVE') {