@lumx/core 2.1.9-alpha-thumbnail → 2.1.9

package/package.json

@@ -42,7 +42,7 @@
         "version": "yarn version-changelog ../../CHANGELOG.md && yarn changelog-verify ../../CHANGELOG.md && git add ../../CHANGELOG.md"
     },
     "sideEffects": false,
-    "version": "2.1.9-alpha-thumbnail",
+    "version": "2.1.9",
     "devDependencies": {
         "@babel/core": "^7.8.3",
         "@babel/plugin-proposal-class-properties": "^7.8.3",
@@ -82,5 +82,5 @@
         "moment": "^2.24.0",
         "moment-range": "^4.0.2"
     },
-    "gitHead": "e89e3ca2d44ff4b4aeb73af5662aea190d93f8a3"
+    "gitHead": "fdcfec63e1d0e4e82934a34b6e27c8076f9cba8d"
 }

package/scss/_components.scss

@@ -23,7 +23,6 @@
 @import './components/radio-button/mixins';
 @import './components/select/mixins';
 @import './components/side-navigation/mixins';
-@import './components/skeleton/mixins';
 @import './components/slideshow/variables';
 @import './components/switch/mixins';
 @import './components/table/mixins';

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 Tue, 30 Nov 2021 09:20:09 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 70% 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 70% 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 70% 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 70% 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 70% 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 70% 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,8 +259,8 @@ $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 70% opacity
 $lumx-navigation-item-emphasis-low-state-default-theme-light-label-color: rgba(
     0,
     0,
@@ -242,8 +272,8 @@ $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 70% 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,8 +305,8 @@ $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 70% opacity
 $lumx-navigation-item-emphasis-low-state-hover-theme-light-label-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 70% opacity
 $lumx-navigation-item-emphasis-low-state-hover-theme-dark-background-color: rgba(
     255,
     255,
@@ -336,8 +366,8 @@ $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 70% opacity
 $lumx-navigation-item-emphasis-low-state-active-theme-light-label-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 70% 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 70% 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 70% 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 70% 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 70% 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 70% 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 70% 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 70% 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 70% 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/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/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/skeleton/_index.scss

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

package/scss/components/thumbnail/_index.scss

@@ -12,19 +12,45 @@
     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 {
-        overflow: hidden;
+        position: relative;
+        width: 100%;
         background-position: center;
         background-repeat: no-repeat;
         background-size: cover;
+
+        #{$self}--variant-rounded & {
+            border-radius: var(--lumx-border-radius);
+        }
     }
 
-    &__image {
-        display: block;
+    &__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%;
+
         #{$self}--align-left & {
             margin-right: auto;
         }
@@ -36,6 +62,16 @@
         #{$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 {
@@ -43,123 +79,32 @@
         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%;
-        }
     }
 }
 
 /* Thumbnail aspect ratio
    ========================================================================== */
 
-.#{$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 {
-        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} {
-        &::before {
-            padding-top: $aspect-ratio;
-        }
+    .#{$lumx-base-prefix}-thumbnail--aspect-ratio-#{$key}:not(.#{$lumx-base-prefix}-thumbnail--fill-height)
+        .#{$lumx-base-prefix}-thumbnail__background {
+        padding-top: $aspect-ratio;
     }
 }
 
 /* Thumbnail states
    ========================================================================== */
 
-.#{$lumx-base-prefix}-thumbnail--is-clickable {
+.#{$lumx-base-prefix}-thumbnail[tabindex='0'] {
     position: relative;
-    display: block;
     cursor: pointer;
 
     &::after {
@@ -174,49 +119,33 @@
         pointer-events: none;
     }
 
-    /* Hover */
-    &:hover::after,
-    &:focus::after {
+    &:hover::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 {
+.#{$lumx-base-prefix}-thumbnail--variant-rounded.#{$lumx-base-prefix}-thumbnail[tabindex='0'] {
     &[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 {
+.#{$lumx-base-prefix}-thumbnail--theme-light.#{$lumx-base-prefix}-thumbnail[tabindex='0'] {
     &[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 {
+.#{$lumx-base-prefix}-thumbnail--theme-dark.#{$lumx-base-prefix}-thumbnail[tabindex='0'] {
     &[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', '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');
             }