@lumx/core 2.1.9 → 2.2.0

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,43 @@
     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;
-    }
+    &--fill-height {
+        &,
+        #{$self}__background {
+            display: flex;
+            height: fit-content;
+            min-height: 100%;
+            flex: 1 1 auto;
+            flex-direction: column;
+            justify-content: center;
+        }
 
-    &--variant-rounded {
-        border-radius: var(--lumx-border-radius);
+        #{$self}__image {
+            width: unset;
+        }
     }
 
     &__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;
+        width: fit-content;
         max-width: 100%;
-        /* IE11 hack related to a bug with IE flexbox implementation (cf. https://stackoverflow.com/a/54054592) */
-        min-height: 1px;
+        height: fit-content;
         max-height: 100%;
+        font-size: 0;
+    }
+
+    &__background,
+    &__image {
+        overflow: hidden;
 
         #{$self}--align-left & {
             margin-right: auto;
@@ -62,16 +61,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 {
@@ -90,9 +79,30 @@
     }
 }
 
+.#{$lumx-base-prefix}-thumbnail[class*='#{$lumx-base-prefix}-thumbnail--size-'] {
+    .#{$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__image {
+        position: absolute;
+        top: 0;
+        right: 0;
+        bottom: 0;
+        left: 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__background {
@@ -103,8 +113,9 @@
 /* Thumbnail states
    ========================================================================== */
 
-.#{$lumx-base-prefix}-thumbnail[tabindex='0'] {
+.#{$lumx-base-prefix}-thumbnail--is-clickable {
     position: relative;
+    display: block;
     cursor: pointer;
 
     &::after {
@@ -119,48 +130,95 @@
         pointer-events: none;
     }
 
-    &:hover::after {
+    /* 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');
     }
 }
 
-.#{$lumx-base-prefix}-thumbnail--variant-rounded.#{$lumx-base-prefix}-thumbnail[tabindex='0'] {
+/* 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);
     }
 }
 
-.#{$lumx-base-prefix}-thumbnail--theme-light.#{$lumx-base-prefix}-thumbnail[tabindex='0'] {
+/* 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');
     }
 }
 
-.#{$lumx-base-prefix}-thumbnail--theme-dark.#{$lumx-base-prefix}-thumbnail[tabindex='0'] {
+/* 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');
     }
 }
 
-/* Thumbnail badge mask
-   ========================================================================== */
+/* Loading state */
+.#{$lumx-base-prefix}-thumbnail--is-loading {
+    &.#{$lumx-base-prefix}-thumbnail--theme-light .#{$lumx-base-prefix}-thumbnail__background {
+        @include lumx-skeleton('light');
+    }
 
-@each $key, $size in $lumx-sizes {
-    $mask-size: map-get($lumx-sizes, lumx-base-const('size', 'XS')) - $lumx-spacing-unit;
-    $mask-offset: $size - 6;
+    &.#{$lumx-base-prefix}-thumbnail--theme-dark .#{$lumx-base-prefix}-thumbnail__background {
+        @include lumx-skeleton('dark');
+    }
+}
 
-    .#{$lumx-base-prefix}-thumbnail--has-badge.#{$lumx-base-prefix}-thumbnail--size-#{$key} {
-        .#{$lumx-base-prefix}-thumbnail__background,
+/* Error state */
+.#{$lumx-base-prefix}-thumbnail--has-error {
+    /** Icon fallback */
+    &.#{$lumx-base-prefix}-thumbnail--has-icon-error-fallback {
         .#{$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
-            );
+            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
+   ========================================================================== */
+
+$badge-radius-size: map-get($lumx-sizes, lumx-base-const('size', 'XS')) / 2 + 2;
+
+.#{$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/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);
     }
 }