@lumx/core 2.0.3 → 2.1.0-alpha-css-test2

package/scss/_retro-compat-v2.scss

@@ -0,0 +1,95 @@
+/**
+ * List of deprecated v2 variables that have been removed or renamed.
+ * Warning: These will be removed in the next major version.
+ */
+$lumx-button-font-weight: $lumx-typography-font-weight-bold;
+$lumx-button-text-transform: $lumx-material-button-text-transform;
+$lumx-button-variant-icon-border-radius: 50%;
+$lumx-button-size-m-font-size: $lumx-typography-custom-button-size-m-font-size;
+$lumx-button-size-s-font-size: $lumx-typography-custom-button-size-s-font-size;
+$lumx-checkbox-wrapper-size: $lumx-material-checkbox-wrapper-size;
+$lumx-checkbox-control-size: $lumx-material-checkbox-control-size;
+$lumx-chip-size-m-height: $lumx-material-chip-size-m-height;
+$lumx-chip-size-m-border-radius: $lumx-material-chip-size-m-border-radius;
+$lumx-chip-size-m-padding-vertical: $lumx-material-chip-size-m-padding-vertical;
+$lumx-chip-size-s-height: $lumx-material-chip-size-s-height;
+$lumx-chip-size-s-border-radius: $lumx-material-chip-size-s-border-radius;
+$lumx-chip-size-s-padding-vertical: $lumx-material-chip-size-s-padding-vertical;
+$lumx-input-helper-font-size: $lumx-material-input-helper-font-size;
+$lumx-input-helper-font-weight: $lumx-material-input-helper-font-weight;
+$lumx-input-helper-line-height: $lumx-material-input-helper-line-height;
+$lumx-input-label-font-size: $lumx-material-input-label-font-size;
+$lumx-input-label-font-weight: $lumx-material-input-label-font-weight;
+$lumx-input-label-line-height: $lumx-material-input-label-line-height;
+$lumx-radio-button-wrapper-size: $lumx-material-radio-button-wrapper-size;
+$lumx-radio-button-control-size: $lumx-material-radio-button-control-size;
+$lumx-radio-button-indicator-size: $lumx-material-radio-button-indicator-size;
+$lumx-switch-wrapper-width: $lumx-material-switch-wrapper-width;
+$lumx-switch-wrapper-height: $lumx-material-switch-wrapper-height;
+$lumx-switch-control-width: $lumx-material-switch-control-width;
+$lumx-switch-control-height: $lumx-material-switch-control-height;
+$lumx-switch-indicator-size: $lumx-material-switch-indicator-size;
+$lumx-switch-indicator-offset: $lumx-material-switch-indicator-offset;
+$lumx-text-field-padding-top: $lumx-material-text-field-padding-top;
+$lumx-text-field-padding-bottom: $lumx-material-text-field-padding-bottom;
+$lumx-text-field-header-margin-bottom: $lumx-material-text-field-header-wrapper-margin-bottom;
+$lumx-text-field-label-font-size: $lumx-material-text-field-header-label-font-size;
+$lumx-text-field-label-font-weight: $lumx-material-text-field-header-label-font-weight;
+$lumx-text-field-label-line-height: $lumx-material-text-field-header-label-line-height;
+$lumx-text-field-wrapper-min-height: $lumx-text-field-input-min-height;
+$lumx-text-field-wrapper-border-radius: $lumx-text-field-input-border-radius;
+$lumx-text-field-wrapper-padding-vertical: $lumx-spacing-unit-tiny;
+$lumx-text-field-wrapper-padding-horizontal: $lumx-text-field-input-padding-horizontal;
+$lumx-text-field-state-default-border-top-width: $lumx-text-field-state-default-input-border-top-width;
+$lumx-text-field-state-default-border-right-width: $lumx-text-field-state-default-input-border-right-width;
+$lumx-text-field-state-default-border-bottom-width: $lumx-text-field-state-default-input-border-bottom-width;
+$lumx-text-field-state-default-border-left-width: $lumx-text-field-state-default-input-border-left-width;
+$lumx-text-field-state-default-theme-light-background-color: $lumx-text-field-state-default-theme-light-input-background-color;
+$lumx-text-field-state-default-theme-light-border-color: $lumx-text-field-state-default-theme-light-input-border-color;
+$lumx-text-field-state-default-theme-dark-background-color: $lumx-text-field-state-default-theme-dark-input-background-color;
+$lumx-text-field-state-default-theme-dark-border-color: $lumx-text-field-state-default-theme-dark-input-border-color;
+$lumx-text-field-state-hover-theme-light-background-color: $lumx-text-field-state-hover-theme-light-input-background-color;
+$lumx-text-field-state-hover-theme-dark-background-color: $lumx-text-field-state-hover-theme-dark-input-background-color;
+$lumx-text-field-state-focus-border-top-width: $lumx-text-field-state-focus-input-border-top-width;
+$lumx-text-field-state-focus-border-right-width: $lumx-text-field-state-focus-input-border-right-width;
+$lumx-text-field-state-focus-border-bottom-width: $lumx-text-field-state-focus-input-border-bottom-width;
+$lumx-text-field-state-focus-border-left-width: $lumx-text-field-state-focus-input-border-left-width;
+$lumx-text-field-state-focus-theme-light-background-color: $lumx-text-field-state-focus-theme-light-input-background-color;
+$lumx-text-field-state-focus-theme-light-border-color: $lumx-text-field-state-focus-theme-light-input-border-color;
+$lumx-text-field-state-focus-theme-dark-background-color: $lumx-text-field-state-focus-theme-dark-input-background-color;
+$lumx-text-field-state-focus-theme-dark-border-color: $lumx-text-field-state-focus-theme-dark-input-border-color;
+$lumx-text-field-input-icon-size: $lumx-size-xs;
+$lumx-text-field-input-font-size: $lumx-material-text-field-input-content-font-size;
+$lumx-text-field-input-font-weight: $lumx-material-text-field-input-content-font-weight;
+$lumx-text-field-input-line-height: $lumx-material-text-field-input-content-line-height;
+$lumx-text-field-input-validity-size: $lumx-size-xxs;
+$lumx-text-field-input-clear-size: $lumx-size-s;
+$lumx-progress-bounce: $lumx-material-progress-bounce;
+$lumx-progress-rotate: $lumx-material-progress-rotate;
+$lumx-typography-style-display1-font-size: $lumx-typography-interface-display1-font-size;
+$lumx-typography-style-display1-font-weight: $lumx-typography-interface-display1-font-weight;
+$lumx-typography-style-display1-line-height: $lumx-typography-interface-display1-line-height;
+$lumx-typography-style-headline-font-size: $lumx-typography-interface-headline-font-size;
+$lumx-typography-style-headline-font-weight: $lumx-typography-interface-headline-font-weight;
+$lumx-typography-style-headline-line-height: $lumx-typography-interface-headline-line-height;
+$lumx-typography-style-title-font-size: $lumx-typography-interface-title-font-size;
+$lumx-typography-style-title-font-weight: $lumx-typography-interface-title-font-weight;
+$lumx-typography-style-title-line-height: $lumx-typography-interface-title-line-height;
+$lumx-typography-style-subtitle2-font-size: $lumx-typography-interface-subtitle2-font-size;
+$lumx-typography-style-subtitle2-font-weight: $lumx-typography-interface-subtitle2-font-weight;
+$lumx-typography-style-subtitle2-line-height: $lumx-typography-interface-subtitle2-line-height;
+$lumx-typography-style-subtitle1-font-size: $lumx-typography-interface-subtitle1-font-size;
+$lumx-typography-style-subtitle1-font-weight: $lumx-typography-interface-subtitle1-font-weight;
+$lumx-typography-style-subtitle1-line-height: $lumx-typography-interface-subtitle1-line-height;
+$lumx-typography-style-body2-font-size: $lumx-typography-interface-body2-font-size;
+$lumx-typography-style-body2-font-weight: $lumx-typography-interface-body2-font-weight;
+$lumx-typography-style-body2-line-height: $lumx-typography-interface-body2-line-height;
+$lumx-typography-style-body1-font-size: $lumx-typography-interface-body1-font-size;
+$lumx-typography-style-body1-font-weight: $lumx-typography-interface-body1-font-weight;
+$lumx-typography-style-body1-line-height: $lumx-typography-interface-body1-line-height;
+$lumx-typography-style-caption-font-size: $lumx-typography-interface-caption-font-size;
+$lumx-typography-style-caption-font-weight: $lumx-typography-interface-caption-font-weight;
+$lumx-typography-style-caption-line-height: $lumx-typography-interface-caption-line-height;
+$lumx-typography-style-overline-font-size: $lumx-typography-interface-overline-font-size;
+$lumx-typography-style-overline-font-weight: $lumx-typography-interface-overline-font-weight;
+$lumx-typography-style-overline-line-height: $lumx-typography-interface-overline-line-height;

package/scss/components/button/_index.scss

@@ -3,7 +3,6 @@
    ========================================================================== */
 
 .#{$lumx-base-prefix}-button {
-    @include lumx-state-transition;
     @include lumx-button-base;
 
     .#{$lumx-base-prefix}-badge {
@@ -72,32 +71,6 @@
     }
 }
 
-/* Button reduced spacing
-   ========================================================================== */
-
-.#{$lumx-base-prefix}-button--variant-button.#{$lumx-base-prefix}-button--emphasis-high,
-.#{$lumx-base-prefix}-button--variant-button.#{$lumx-base-prefix}-button--emphasis-medium {
-    &.#{$lumx-base-prefix}-button--size-m {
-        &.#{$lumx-base-prefix}-button--has-left-icon {
-            @include lumx-button-reduced-spacing(lumx-base-const('size', 'M'), lumx-base-const('position', 'LEFT'));
-        }
-
-        &.#{$lumx-base-prefix}-button--has-right-icon {
-            @include lumx-button-reduced-spacing(lumx-base-const('size', 'M'), lumx-base-const('position', 'RIGHT'));
-        }
-    }
-
-    &.#{$lumx-base-prefix}-button--size-s {
-        &.#{$lumx-base-prefix}-button--has-left-icon {
-            @include lumx-button-reduced-spacing(lumx-base-const('size', 'S'), lumx-base-const('position', 'LEFT'));
-        }
-
-        &.#{$lumx-base-prefix}-button--has-right-icon {
-            @include lumx-button-reduced-spacing(lumx-base-const('size', 'S'), lumx-base-const('position', 'RIGHT'));
-        }
-    }
-}
-
 /* Button colors
    ========================================================================== */
 
@@ -121,26 +94,17 @@
 
 @each $key, $color in $lumx-color-palette {
     .#{$lumx-base-prefix}-button--color-#{$key} {
-        &.#{$lumx-base-prefix}-button--emphasis-medium {
+        &:not(.#{$lumx-base-prefix}-button--is-selected).#{$lumx-base-prefix}-button--emphasis-medium {
             @include lumx-button-color(lumx-base-const('emphasis', 'MEDIUM'), $key);
         }
 
-        &.#{$lumx-base-prefix}-button--emphasis-low {
+        &:not(.#{$lumx-base-prefix}-button--is-selected).#{$lumx-base-prefix}-button--emphasis-low {
             @include lumx-button-color(lumx-base-const('emphasis', 'LOW'), $key);
         }
-    }
-}
 
-/* Toggle button
-   ========================================================================== */
-
-.#{$lumx-base-prefix}-button--is-selected {
-    &.#{$lumx-base-prefix}-button--color-dark {
-        @include lumx-button-is-selected(lumx-base-const('theme', 'LIGHT'));
-    }
-
-    &.#{$lumx-base-prefix}-button--color-light {
-        @include lumx-button-is-selected(lumx-base-const('theme', 'DARK'));
+        &.#{$lumx-base-prefix}-button--is-selected {
+            @include lumx-button-color(lumx-base-const('emphasis', 'SELECTED'), $key);
+        }
     }
 }
 
@@ -153,7 +117,7 @@
     }
 
     &--variant-icon {
-        border-radius: var(--lumx-button-variant-icon-border-radius);
+        border-radius: var(--lumx-material-button-variant-icon-border-radius, var(--lumx-button-border-radius));
     }
 
     &--color-light {

package/scss/components/button/_mixins.scss

@@ -9,60 +9,169 @@
     background-color: transparent;
     outline: none;
     text-decoration: none;
+    transition-duration: $lumx-state-transition-duration;
+    transition-property: padding, border-radius, background-color, color;
     user-select: none;
     vertical-align: top;
 
     &:hover {
         cursor: pointer;
     }
+
+    &::before {
+        transition-duration: $lumx-state-transition-duration;
+        transition-property: border-radius, border-width, border-color;
+    }
 }
 
 @mixin lumx-button-size($emphasis, $variant, $size) {
-    height: map-get($lumx-sizes, $size);
+    @if $size == lumx-base-const('size', 'M') {
+        height: var(--lumx-button-height);
+    } @else if $size == lumx-base-const('size', 'S') {
+        height: calc(var(--lumx-button-height) / 1.5);
+    }
 
     @if $variant == 'button' {
-        border-radius: var(--lumx-border-radius);
+        border-radius: var(--lumx-button-border-radius);
+    } @else if $variant == 'icon' {
+        @if $size == lumx-base-const('size', 'M') {
+            width: var(--lumx-button-height);
+        } @else if $size == lumx-base-const('size', 'S') {
+            width: calc(var(--lumx-button-height) / 1.5);
+        }
+
+        border-radius: var(--lumx-material-button-variant-icon-border-radius, var(--lumx-button-border-radius));
+    }
 
-        @if $emphasis == lumx-base-const('emphasis', 'HIGH') or $emphasis == lumx-base-const('emphasis', 'MEDIUM') {
+    &::before {
+        position: absolute;
+        top: 0;
+        right: 0;
+        bottom: 0;
+        left: 0;
+        border-width: var(--lumx-button-#{$emphasis}-state-default-border-width);
+        border-style: solid;
+        content: '';
+        pointer-events: none;
+
+        @if $variant == 'button' {
+            border-radius: var(--lumx-button-border-radius);
+        } @else if $variant == 'icon' {
+            border-radius: var(--lumx-material-button-variant-icon-border-radius, var(--lumx-button-border-radius));
+        }
+    }
+
+    @if $variant == 'button' {
+        @if $size == lumx-base-const('size', 'M') {
+            padding: 0 var(--lumx-button-#{$emphasis}-state-default-padding-horizontal);
+        } @else if $size == lumx-base-const('size', 'S') {
+            padding: 0 calc(var(--lumx-button-#{$emphasis}-state-default-padding-horizontal) / 1.5);
+        }
+    }
+
+    &:hover {
+        @if $variant == 'button' {
             @if $size == lumx-base-const('size', 'M') {
-                padding: 0 $lumx-spacing-unit * 2;
+                padding: 0 var(--lumx-button-#{$emphasis}-state-hover-padding-horizontal);
             } @else if $size == lumx-base-const('size', 'S') {
-                padding: 0 $lumx-spacing-unit * 1.5;
+                padding: 0 calc(var(--lumx-button-#{$emphasis}-state-hover-padding-horizontal) / 1.5);
             }
-        } @else if $emphasis == lumx-base-const('emphasis', 'LOW') {
-            padding: 0 $lumx-spacing-unit;
         }
-    } @else if $variant == 'icon' {
-        width: map-get($lumx-sizes, $size);
-        border-radius: var(--lumx-button-variant-icon-border-radius);
+
+        &::before {
+            border-width: var(--lumx-button-#{$emphasis}-state-hover-border-width);
+        }
     }
-}
 
-@mixin lumx-button-reduced-spacing($size, $icon-position) {
-    @if $size == lumx-base-const('size', 'M') {
-        @if $icon-position == lumx-base-const('position', 'LEFT') {
-            padding-left: $lumx-spacing-unit * 1.5;
-        } @else if $icon-position == lumx-base-const('position', 'RIGHT') {
-            padding-right: $lumx-spacing-unit * 1.5;
+    &:active {
+        @if $variant == 'button' {
+            @if $size == lumx-base-const('size', 'M') {
+                padding: 0 var(--lumx-button-#{$emphasis}-state-active-padding-horizontal);
+            } @else if $size == lumx-base-const('size', 'S') {
+                padding: 0 calc(var(--lumx-button-#{$emphasis}-state-active-padding-horizontal) / 1.5);
+            }
         }
-    } @else if $size == lumx-base-const('size', 'S') {
-        @if $icon-position == lumx-base-const('position', 'LEFT') {
-            padding-left: $lumx-spacing-unit;
-        } @else if $icon-position == lumx-base-const('position', 'RIGHT') {
-            padding-right: $lumx-spacing-unit;
+
+        &::before {
+            border-width: var(--lumx-button-#{$emphasis}-state-active-border-width);
         }
     }
 }
 
 @mixin lumx-button-color($emphasis, $color, $theme: null) {
-    @include lumx-state(lumx-base-const('state', 'DEFAULT'), $emphasis, $color, $theme);
+    @if $color == 'primary' and $emphasis == lumx-base-const('emphasis', 'HIGH') {
+        background-color: var(--lumx-button-#{$emphasis}-state-default-#{$theme}-background-color);
+        color: var(--lumx-button-#{$emphasis}-state-default-#{$theme}-color);
+    } @else if $color == 'dark' and $emphasis != lumx-base-const('emphasis', 'HIGH') {
+        background-color: var(--lumx-button-#{$emphasis}-state-default-theme-light-background-color);
+        color: var(--lumx-button-#{$emphasis}-state-default-theme-light-color);
+    } @else if $color == 'light' and $emphasis != lumx-base-const('emphasis', 'HIGH') {
+        background-color: var(--lumx-button-#{$emphasis}-state-default-theme-dark-background-color);
+        color: var(--lumx-button-#{$emphasis}-state-default-theme-dark-color);
+    } @else {
+        @include lumx-state(lumx-base-const('state', 'DEFAULT'), $emphasis, $color, $theme);
+    }
+
+    &::before {
+        @if $color == 'primary' and $emphasis == lumx-base-const('emphasis', 'HIGH') {
+            border-color: var(--lumx-button-#{$emphasis}-state-default-#{$theme}-border-color);
+        } @else if $color == 'dark' and $emphasis != lumx-base-const('emphasis', 'HIGH') {
+            border-color: var(--lumx-button-#{$emphasis}-state-default-theme-light-border-color);
+        } @else if $color == 'light' and $emphasis != lumx-base-const('emphasis', 'HIGH') {
+            border-color: var(--lumx-button-#{$emphasis}-state-default-theme-dark-border-color);
+        } @else {
+            border-color: transparent;
+        }
+    }
 
     &:hover {
-        @include lumx-state(lumx-base-const('state', 'HOVER'), $emphasis, $color, $theme);
+        @if $color == 'primary' and $emphasis == lumx-base-const('emphasis', 'HIGH') {
+            background-color: var(--lumx-button-#{$emphasis}-state-hover-#{$theme}-background-color);
+            color: var(--lumx-button-#{$emphasis}-state-hover-#{$theme}-color);
+        } @else if $color == 'dark' and $emphasis != lumx-base-const('emphasis', 'HIGH') {
+            background-color: var(--lumx-button-#{$emphasis}-state-hover-theme-light-background-color);
+            color: var(--lumx-button-#{$emphasis}-state-hover-theme-light-color);
+        } @else if $color == 'light' and $emphasis != lumx-base-const('emphasis', 'HIGH') {
+            background-color: var(--lumx-button-#{$emphasis}-state-hover-theme-dark-background-color);
+            color: var(--lumx-button-#{$emphasis}-state-hover-theme-dark-color);
+        } @else {
+            @include lumx-state(lumx-base-const('state', 'HOVER'), $emphasis, $color, $theme);
+        }
+
+        &::before {
+            @if $color == 'primary' and $emphasis == lumx-base-const('emphasis', 'HIGH') {
+                border-color: var(--lumx-button-#{$emphasis}-state-hover-#{$theme}-border-color);
+            } @else if $color == 'dark' and $emphasis != lumx-base-const('emphasis', 'HIGH') {
+                border-color: var(--lumx-button-#{$emphasis}-state-hover-theme-light-border-color);
+            } @else if $color == 'light' and $emphasis != lumx-base-const('emphasis', 'HIGH') {
+                border-color: var(--lumx-button-#{$emphasis}-state-hover-theme-dark-border-color);
+            }
+        }
     }
 
     &:active {
-        @include lumx-state(lumx-base-const('state', 'ACTIVE'), $emphasis, $color, $theme);
+        @if $color == 'primary' and $emphasis == lumx-base-const('emphasis', 'HIGH') {
+            background-color: var(--lumx-button-#{$emphasis}-state-active-#{$theme}-background-color);
+            color: var(--lumx-button-#{$emphasis}-state-active-#{$theme}-color);
+        } @else if $color == 'dark' and $emphasis != lumx-base-const('emphasis', 'HIGH') {
+            background-color: var(--lumx-button-#{$emphasis}-state-active-theme-light-background-color);
+            color: var(--lumx-button-#{$emphasis}-state-active-theme-light-color);
+        } @else if $color == 'light' and $emphasis != lumx-base-const('emphasis', 'HIGH') {
+            background-color: var(--lumx-button-#{$emphasis}-state-active-theme-dark-background-color);
+            color: var(--lumx-button-#{$emphasis}-state-active-theme-dark-color);
+        } @else {
+            @include lumx-state(lumx-base-const('state', 'ACTIVE'), $emphasis, $color, $theme);
+        }
+
+        &::before {
+            @if $color == 'primary' and $emphasis == lumx-base-const('emphasis', 'HIGH') {
+                border-color: var(--lumx-button-#{$emphasis}-state-active-#{$theme}-border-color);
+            } @else if $color == 'dark' and $emphasis != lumx-base-const('emphasis', 'HIGH') {
+                border-color: var(--lumx-button-#{$emphasis}-state-active-theme-light-border-color);
+            } @else if $color == 'light' and $emphasis != lumx-base-const('emphasis', 'HIGH') {
+                border-color: var(--lumx-button-#{$emphasis}-state-active-theme-dark-border-color);
+            }
+        }
     }
 
     &[data-focus-visible-added] {
@@ -136,9 +245,15 @@
 }
 
 @mixin lumx-button-text($size) {
-    font-size: var(--lumx-button-size-#{$size}-font-size);
-    font-weight: var(--lumx-button-font-weight);
-    line-height: map-get($lumx-sizes, $size);
+    font-family: var(--lumx-typography-custom-button-size-#{$size}-font-family);
+    font-size: var(--lumx-typography-custom-button-size-#{$size}-font-size);
+    font-weight: var(--lumx-typography-custom-button-size-#{$size}-font-weight);
     pointer-events: none;
-    text-transform: var(--lumx-button-text-transform);
+    text-transform: var(--lumx-material-button-text-transform);
+
+    @if $size == lumx-base-const('size', 'M') {
+        line-height: var(--lumx-button-height);
+    } @else if $size == lumx-base-const('size', 'S') {
+        line-height: calc(var(--lumx-button-height) / 1.5);
+    }
 }

package/scss/components/checkbox/_mixins.scss

@@ -1,7 +1,7 @@
 @mixin lumx-checkbox-input-wrapper() {
     position: relative;
-    width: var(--lumx-checkbox-wrapper-size);
-    height: var(--lumx-checkbox-wrapper-size);
+    width: var(--lumx-material-checkbox-wrapper-size);
+    height: var(--lumx-material-checkbox-wrapper-size);
 }
 
 @mixin lumx-checkbox-input-native() {
@@ -9,8 +9,8 @@
     z-index: 4;
     top: 0;
     left: 0;
-    width: var(--lumx-checkbox-wrapper-size);
-    height: var(--lumx-checkbox-wrapper-size);
+    width: var(--lumx-material-checkbox-wrapper-size);
+    height: var(--lumx-material-checkbox-wrapper-size);
     padding: 0;
     margin: 0;
     opacity: 0;
@@ -19,10 +19,10 @@
 @mixin lumx-checkbox-placeholder() {
     position: absolute;
     z-index: 1;
-    top: calc(calc(var(--lumx-checkbox-wrapper-size) - var(--lumx-checkbox-control-size)) / 2);
-    left: calc(calc(var(--lumx-checkbox-wrapper-size) - var(--lumx-checkbox-control-size)) / 2);
-    width: var(--lumx-checkbox-control-size);
-    height: var(--lumx-checkbox-control-size);
+    top: calc((var(--lumx-material-checkbox-wrapper-size) - var(--lumx-material-checkbox-control-size)) / 2);
+    left: calc((var(--lumx-material-checkbox-wrapper-size) - var(--lumx-material-checkbox-control-size)) / 2);
+    width: var(--lumx-material-checkbox-control-size);
+    height: var(--lumx-material-checkbox-control-size);
     border-radius: 2px;
 }
 
@@ -57,7 +57,7 @@
     align-items: center;
     justify-content: center;
     border-radius: 2px;
-    font-size: var(--lumx-checkbox-control-size);
+    font-size: var(--lumx-material-checkbox-control-size);
 }
 
 @mixin lumx-checkbox-input-indicator-status($status) {

package/scss/components/chip/_index.scss

@@ -32,7 +32,7 @@
 .#{$lumx-base-prefix}-chip--size-m {
     @include lumx-chip-size(lumx-base-const('size', 'M'));
 
-    padding: 0 var(--lumx-chip-size-m-padding-vertical);
+    padding: 0 var(--lumx-material-chip-size-m-padding-vertical);
 
     &.#{$lumx-base-prefix}-chip--has-before {
         padding-left: $lumx-spacing-unit * 1.5;
@@ -46,7 +46,7 @@
 .#{$lumx-base-prefix}-chip--size-s {
     @include lumx-chip-size(lumx-base-const('size', 'S'));
 
-    padding: 0 var(--lumx-chip-size-s-padding-vertical);
+    padding: 0 var(--lumx-material-chip-size-s-padding-vertical);
 
     &.#{$lumx-base-prefix}-chip--has-before {
         padding-left: $lumx-spacing-unit;

package/scss/components/chip/_mixins.scss

@@ -11,8 +11,8 @@
 }
 
 @mixin lumx-chip-size($size) {
-    height: var(--lumx-chip-size-#{$size}-height);
-    border-radius: var(--lumx-chip-size-#{$size}-border-radius);
+    height: var(--lumx-material-chip-size-#{$size}-height);
+    border-radius: var(--lumx-material-chip-size-#{$size}-border-radius);
 }
 
 @mixin lumx-chip-before() {

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

@@ -63,12 +63,9 @@
         }
     }
 
-    &__title,
-    &__description {
-        @include lumx-typography('body1');
-    }
-
     &__title {
+        @include lumx-typography('subtitle1');
+
         #{$self}--theme-light & {
             color: lumx-color-variant('dark', 'N');
         }
@@ -79,6 +76,8 @@
     }
 
     &__description {
+        @include lumx-typography('body1');
+
         #{$self}--theme-light & {
             color: lumx-color-variant('dark', 'L2');
         }

package/scss/components/input-helper/_mixins.scss

@@ -1,8 +1,8 @@
 @mixin lumx-input-helper($theme) {
     display: block;
-    font-size: var(--lumx-input-helper-font-size);
-    font-weight: var(--lumx-input-helper-font-weight);
-    line-height: var(--lumx-input-helper-line-height);
+    font-size: var(--lumx-material-input-helper-font-size);
+    font-weight: var(--lumx-material-input-helper-font-weight);
+    line-height: var(--lumx-material-input-helper-line-height);
 
     @if $theme == lumx-base-const('theme', 'LIGHT') {
         color: lumx-color-variant('dark', 'L2');

package/scss/components/input-label/_mixins.scss

@@ -1,8 +1,8 @@
 @mixin lumx-input-label($theme) {
     display: block;
-    font-size: var(--lumx-input-label-font-size);
-    font-weight: var(--lumx-input-label-font-weight);
-    line-height: var(--lumx-input-label-line-height);
+    font-size: var(--lumx-material-input-label-font-size);
+    font-weight: var(--lumx-material-input-label-font-weight);
+    line-height: var(--lumx-material-input-label-line-height);
 
     @if $theme == lumx-base-const('theme', 'LIGHT') {
         color: lumx-color-variant('dark', 'N');

package/scss/components/progress/_index.scss

@@ -22,7 +22,7 @@
         position: absolute;
         top: 0;
         left: 0;
-        display: var(--lumx-progress-bounce);
+        display: var(--lumx-material-progress-bounce);
         width: 100%;
         height: 100%;
         animation: lumx-progress-bounce 2s infinite ease-in-out;
@@ -49,7 +49,7 @@
         right: 0;
         bottom: 0;
         left: 0;
-        display: var(--lumx-progress-rotate);
+        display: var(--lumx-material-progress-rotate);
         width: $lumx-progress-circular-size;
         height: $lumx-progress-circular-size;
         margin: auto;

package/scss/components/radio-button/_mixins.scss

@@ -1,7 +1,7 @@
 @mixin lumx-radio-button-input-wrapper() {
     position: relative;
-    width: var(--lumx-radio-button-wrapper-size);
-    height: var(--lumx-radio-button-wrapper-size);
+    width: var(--lumx-material-radio-button-wrapper-size);
+    height: var(--lumx-material-radio-button-wrapper-size);
 }
 
 @mixin lumx-radio-button-input-native() {
@@ -9,8 +9,8 @@
     z-index: 4;
     top: 0;
     left: 0;
-    width: var(--lumx-radio-button-wrapper-size);
-    height: var(--lumx-radio-button-wrapper-size);
+    width: var(--lumx-material-radio-button-wrapper-size);
+    height: var(--lumx-material-radio-button-wrapper-size);
     padding: 0;
     margin: 0;
     opacity: 0;
@@ -19,10 +19,10 @@
 @mixin lumx-radio-button-placeholder() {
     position: absolute;
     z-index: 1;
-    top: calc(calc(var(--lumx-radio-button-wrapper-size) - var(--lumx-radio-button-control-size)) / 2);
-    left: calc(calc(var(--lumx-radio-button-wrapper-size) - var(--lumx-radio-button-control-size)) / 2);
-    width: var(--lumx-radio-button-control-size);
-    height: var(--lumx-radio-button-control-size);
+    top: calc((var(--lumx-material-radio-button-wrapper-size) - var(--lumx-material-radio-button-control-size)) / 2);
+    left: calc((var(--lumx-material-radio-button-wrapper-size) - var(--lumx-material-radio-button-control-size)) / 2);
+    width: var(--lumx-material-radio-button-control-size);
+    height: var(--lumx-material-radio-button-control-size);
     border-radius: 50%;
 }
 
@@ -57,11 +57,11 @@
 @mixin lumx-radio-button-input-indicator() {
     position: absolute;
     z-index: 3;
-    top: calc(calc(var(--lumx-radio-button-control-size) - var(--lumx-radio-button-indicator-size)) / 2);
-    left: calc(calc(var(--lumx-radio-button-control-size) - var(--lumx-radio-button-indicator-size)) / 2);
+    top: calc((var(--lumx-material-radio-button-control-size) - var(--lumx-material-radio-button-indicator-size)) / 2);
+    left: calc((var(--lumx-material-radio-button-control-size) - var(--lumx-material-radio-button-indicator-size)) / 2);
     display: flex;
-    width: var(--lumx-radio-button-indicator-size);
-    height: var(--lumx-radio-button-indicator-size);
+    width: var(--lumx-material-radio-button-indicator-size);
+    height: var(--lumx-material-radio-button-indicator-size);
     align-items: center;
     justify-content: center;
     border-radius: 50%;