@lumx/core 2.1.0-alpha.9 → 2.1.0

package/package.json

@@ -42,7 +42,7 @@
         "prepublishOnly": "yarn build"
     },
     "sideEffects": false,
-    "version": "2.1.0-alpha.9",
+    "version": "2.1.0",
     "devDependencies": {
         "@babel/core": "^7.8.3",
         "@babel/plugin-proposal-class-properties": "^7.8.3",
@@ -79,5 +79,5 @@
         "moment": "^2.24.0",
         "moment-range": "^4.0.2"
     },
-    "gitHead": "07675877f973a2cb2cb6d0add1d74059316f0230"
+    "gitHead": "14169feb6b36c1be3ba8b49089953ea3aaef5cd0"
 }

package/scss/_design-tokens.scss

@@ -1,6 +1,6 @@
 /**
  * Do not edit directly
- * Generated on Thu, 23 Sep 2021 06:47:16 GMT
+ * Generated on Tue, 19 Oct 2021 08:35:24 GMT
  */
 
 $lumx-button-height: 36px !default;
@@ -880,55 +880,42 @@ $lumx-typography-interface-caption-line-height: 16px !default;
 $lumx-typography-interface-overline-font-size: 10px !default;
 $lumx-typography-interface-overline-font-weight: var(--lumx-typography-font-weight-bold) !default;
 $lumx-typography-interface-overline-line-height: 12px !default;
-$lumx-typography-custom-title1-font-family: var(--lumx-typography-font-family) !default;
 $lumx-typography-custom-title1-font-size: 40px !default;
 $lumx-typography-custom-title1-font-weight: var(--lumx-typography-font-weight-bold) !default;
 $lumx-typography-custom-title1-line-height: 50px !default;
-$lumx-typography-custom-title2-font-family: var(--lumx-typography-font-family) !default;
 $lumx-typography-custom-title2-font-size: 30px !default;
 $lumx-typography-custom-title2-font-weight: var(--lumx-typography-font-weight-bold) !default;
 $lumx-typography-custom-title2-line-height: 40px !default;
-$lumx-typography-custom-title3-font-family: var(--lumx-typography-font-family) !default;
 $lumx-typography-custom-title3-font-size: 24px !default;
 $lumx-typography-custom-title3-font-weight: var(--lumx-typography-font-weight-bold) !default;
 $lumx-typography-custom-title3-line-height: 32px !default;
-$lumx-typography-custom-title4-font-family: var(--lumx-typography-font-family) !default;
 $lumx-typography-custom-title4-font-size: 20px !default;
 $lumx-typography-custom-title4-font-weight: var(--lumx-typography-font-weight-bold) !default;
 $lumx-typography-custom-title4-line-height: 30px !default;
-$lumx-typography-custom-title5-font-family: var(--lumx-typography-font-family) !default;
 $lumx-typography-custom-title5-font-size: 16px !default;
 $lumx-typography-custom-title5-font-weight: var(--lumx-typography-font-weight-bold) !default;
 $lumx-typography-custom-title5-line-height: 24px !default;
-$lumx-typography-custom-title6-font-family: var(--lumx-typography-font-family) !default;
 $lumx-typography-custom-title6-font-size: 14px !default;
 $lumx-typography-custom-title6-font-weight: var(--lumx-typography-font-weight-bold) !default;
 $lumx-typography-custom-title6-line-height: 20px !default;
-$lumx-typography-custom-intro-font-family: var(--lumx-typography-font-family) !default;
 $lumx-typography-custom-intro-font-size: 18px !default;
 $lumx-typography-custom-intro-font-weight: var(--lumx-typography-font-weight-bold) !default;
 $lumx-typography-custom-intro-line-height: 30px !default;
-$lumx-typography-custom-body-large-font-family: var(--lumx-typography-font-family) !default;
 $lumx-typography-custom-body-large-font-size: 16px !default;
 $lumx-typography-custom-body-large-font-weight: var(--lumx-typography-font-weight-regular) !default;
 $lumx-typography-custom-body-large-line-height: 24px !default;
-$lumx-typography-custom-body-font-family: var(--lumx-typography-font-family) !default;
 $lumx-typography-custom-body-font-size: 14px !default;
 $lumx-typography-custom-body-font-weight: var(--lumx-typography-font-weight-regular) !default;
 $lumx-typography-custom-body-line-height: 20px !default;
-$lumx-typography-custom-quote-font-family: var(--lumx-typography-font-family) !default;
 $lumx-typography-custom-quote-font-size: 16px !default;
 $lumx-typography-custom-quote-font-weight: var(--lumx-typography-font-weight-light) !default;
 $lumx-typography-custom-quote-font-style: italic !default;
 $lumx-typography-custom-quote-line-height: 24px !default;
-$lumx-typography-custom-publish-info-font-family: var(--lumx-typography-font-family) !default;
 $lumx-typography-custom-publish-info-font-size: 14px !default;
 $lumx-typography-custom-publish-info-font-weight: var(--lumx-typography-font-weight-regular) !default;
 $lumx-typography-custom-publish-info-line-height: 20px !default;
-$lumx-typography-custom-button-size-m-font-family: var(--lumx-typography-font-family) !default;
 $lumx-typography-custom-button-size-m-font-size: 14px !default;
 $lumx-typography-custom-button-size-m-font-weight: var(--lumx-typography-font-weight-bold) !default;
-$lumx-typography-custom-button-size-s-font-family: var(--lumx-typography-font-family) !default;
 $lumx-typography-custom-button-size-s-font-size: 12px !default;
 $lumx-typography-custom-button-size-s-font-weight: var(--lumx-typography-font-weight-bold) !default;
 
@@ -1970,80 +1957,67 @@ $lumx-design-tokens: (
         ),
         'custom': (
             'title1': (
-                'font-family': $lumx-typography-custom-title1-font-family,
                 'font-size': $lumx-typography-custom-title1-font-size,
                 'font-weight': $lumx-typography-custom-title1-font-weight,
                 'line-height': $lumx-typography-custom-title1-line-height,
             ),
             'title2': (
-                'font-family': $lumx-typography-custom-title2-font-family,
                 'font-size': $lumx-typography-custom-title2-font-size,
                 'font-weight': $lumx-typography-custom-title2-font-weight,
                 'line-height': $lumx-typography-custom-title2-line-height,
             ),
             'title3': (
-                'font-family': $lumx-typography-custom-title3-font-family,
                 'font-size': $lumx-typography-custom-title3-font-size,
                 'font-weight': $lumx-typography-custom-title3-font-weight,
                 'line-height': $lumx-typography-custom-title3-line-height,
             ),
             'title4': (
-                'font-family': $lumx-typography-custom-title4-font-family,
                 'font-size': $lumx-typography-custom-title4-font-size,
                 'font-weight': $lumx-typography-custom-title4-font-weight,
                 'line-height': $lumx-typography-custom-title4-line-height,
             ),
             'title5': (
-                'font-family': $lumx-typography-custom-title5-font-family,
                 'font-size': $lumx-typography-custom-title5-font-size,
                 'font-weight': $lumx-typography-custom-title5-font-weight,
                 'line-height': $lumx-typography-custom-title5-line-height,
             ),
             'title6': (
-                'font-family': $lumx-typography-custom-title6-font-family,
                 'font-size': $lumx-typography-custom-title6-font-size,
                 'font-weight': $lumx-typography-custom-title6-font-weight,
                 'line-height': $lumx-typography-custom-title6-line-height,
             ),
             'intro': (
-                'font-family': $lumx-typography-custom-intro-font-family,
                 'font-size': $lumx-typography-custom-intro-font-size,
                 'font-weight': $lumx-typography-custom-intro-font-weight,
                 'line-height': $lumx-typography-custom-intro-line-height,
             ),
             'body-large': (
-                'font-family': $lumx-typography-custom-body-large-font-family,
                 'font-size': $lumx-typography-custom-body-large-font-size,
                 'font-weight': $lumx-typography-custom-body-large-font-weight,
                 'line-height': $lumx-typography-custom-body-large-line-height,
             ),
             'body': (
-                'font-family': $lumx-typography-custom-body-font-family,
                 'font-size': $lumx-typography-custom-body-font-size,
                 'font-weight': $lumx-typography-custom-body-font-weight,
                 'line-height': $lumx-typography-custom-body-line-height,
             ),
             'quote': (
-                'font-family': $lumx-typography-custom-quote-font-family,
                 'font-size': $lumx-typography-custom-quote-font-size,
                 'font-weight': $lumx-typography-custom-quote-font-weight,
                 'font-style': $lumx-typography-custom-quote-font-style,
                 'line-height': $lumx-typography-custom-quote-line-height,
             ),
             'publish-info': (
-                'font-family': $lumx-typography-custom-publish-info-font-family,
                 'font-size': $lumx-typography-custom-publish-info-font-size,
                 'font-weight': $lumx-typography-custom-publish-info-font-weight,
                 'line-height': $lumx-typography-custom-publish-info-line-height,
             ),
             'button': (
                 'size-m': (
-                    'font-family': $lumx-typography-custom-button-size-m-font-family,
                     'font-size': $lumx-typography-custom-button-size-m-font-size,
                     'font-weight': $lumx-typography-custom-button-size-m-font-weight,
                 ),
                 'size-s': (
-                    'font-family': $lumx-typography-custom-button-size-s-font-family,
                     'font-size': $lumx-typography-custom-button-size-s-font-size,
                     'font-weight': $lumx-typography-custom-button-size-s-font-weight,
                 ),

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/checkbox/_mixins.scss

@@ -19,8 +19,8 @@
 @mixin lumx-checkbox-placeholder() {
     position: absolute;
     z-index: 1;
-    top: calc(calc(var(--lumx-material-checkbox-wrapper-size) - var(--lumx-material-checkbox-control-size)) / 2);
-    left: calc(calc(var(--lumx-material-checkbox-wrapper-size) - var(--lumx-material-checkbox-control-size)) / 2);
+    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;

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/radio-button/_mixins.scss

@@ -19,12 +19,8 @@
 @mixin lumx-radio-button-placeholder() {
     position: absolute;
     z-index: 1;
-    top: calc(
-        calc(var(--lumx-material-radio-button-wrapper-size) - var(--lumx-material-radio-button-control-size)) / 2
-    );
-    left: calc(
-        calc(var(--lumx-material-radio-button-wrapper-size) - var(--lumx-material-radio-button-control-size)) / 2
-    );
+    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%;
@@ -61,12 +57,8 @@
 @mixin lumx-radio-button-input-indicator() {
     position: absolute;
     z-index: 3;
-    top: calc(
-        calc(var(--lumx-material-radio-button-control-size) - var(--lumx-material-radio-button-indicator-size)) / 2
-    );
-    left: calc(
-        calc(var(--lumx-material-radio-button-control-size) - var(--lumx-material-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-material-radio-button-indicator-size);
     height: var(--lumx-material-radio-button-indicator-size);

package/scss/components/select/_index.scss

@@ -6,7 +6,7 @@
     $self: &;
 
     --lumx-text-field-wrapper-padding-vertical: calc(
-        calc(var(--lumx-text-field-input-min-height) - var(--lumx-material-text-field-input-content-line-height)) / 2
+        (var(--lumx-text-field-input-min-height) - var(--lumx-material-text-field-input-content-line-height)) / 2
     );
 
     padding-top: var(--lumx-material-text-field-padding-top);

package/scss/components/select/_mixins.scss

@@ -2,7 +2,7 @@
     flex-shrink: 0;
     margin-top: calc(
         var(--lumx-text-field-wrapper-padding-vertical) +
-            calc(calc(var(--lumx-material-text-field-input-content-line-height) - var(--lumx-size-s)) / 2)
+            ((var(--lumx-material-text-field-input-content-line-height) - var(--lumx-size-s)) / 2)
     );
     margin-left: $lumx-spacing-unit / 2;
 

package/scss/components/skeleton/_index.scss

@@ -37,6 +37,12 @@
     }
 }
 
+@each $key, $color in $lumx-color-palette {
+    .#{$lumx-base-prefix}-skeleton-circle--color-#{$key} {
+        background-color: lumx-color-variant($key, 'L5');
+    }
+}
+
 /* Rectangle
    ========================================================================== */
 
@@ -76,6 +82,12 @@
     }
 }
 
+@each $key, $color in $lumx-color-palette {
+    .#{$lumx-base-prefix}-skeleton-rectangle--color-#{$key} {
+        background-color: lumx-color-variant($key, 'L5');
+    }
+}
+
 /* Typography
    ========================================================================== */
 
@@ -121,3 +133,9 @@ $typography-skeleton-size: (
         height: map-get($typography-skeleton-size, $key);
     }
 }
+
+@each $key, $color in $lumx-color-palette {
+    .#{$lumx-base-prefix}-skeleton-typography--color-#{$key} .#{$lumx-base-prefix}-skeleton-typography__inner {
+        background-color: lumx-color-variant($key, 'L5');
+    }
+}

package/scss/components/switch/_mixins.scss

@@ -19,7 +19,7 @@
 @mixin lumx-switch-placeholder() {
     position: absolute;
     z-index: 1;
-    top: calc(calc(var(--lumx-material-switch-wrapper-height) - var(--lumx-material-switch-control-height)) / 2);
+    top: calc((var(--lumx-material-switch-wrapper-height) - var(--lumx-material-switch-control-height)) / 2);
     left: 0;
     width: var(--lumx-material-switch-control-width);
     height: var(--lumx-material-switch-control-height);
@@ -44,7 +44,7 @@
 @mixin lumx-switch-input-indicator($status, $theme) {
     position: absolute;
     z-index: 3;
-    top: calc(calc(var(--lumx-material-switch-control-height) - var(--lumx-material-switch-indicator-size)) / 2);
+    top: calc((var(--lumx-material-switch-control-height) - var(--lumx-material-switch-indicator-size)) / 2);
     width: var(--lumx-material-switch-indicator-size);
     height: var(--lumx-material-switch-indicator-size);
     border-radius: calc(var(--lumx-material-switch-indicator-size) / 2);

package/scss/components/text-field/_index.scss

@@ -6,7 +6,7 @@
     $self: &;
 
     --lumx-text-field-wrapper-padding-vertical: calc(
-        calc(var(--lumx-text-field-input-min-height) - var(--lumx-material-text-field-input-content-line-height)) / 2
+        (var(--lumx-text-field-input-min-height) - var(--lumx-material-text-field-input-content-line-height)) / 2
     );
 
     padding-top: var(--lumx-material-text-field-padding-top);

package/scss/components/text-field/_mixins.scss

@@ -26,8 +26,7 @@
         right: 0;
         bottom: 0;
         left: 0;
-        border-style: solid;
-        border-color: var(--lumx-text-field-state-default-#{$theme}-input-border-color);
+        border: 0 solid var(--lumx-text-field-state-default-#{$theme}-input-border-color);
         border-top-width: var(--lumx-text-field-state-default-input-border-top-width);
         border-right-width: var(--lumx-text-field-state-default-input-border-right-width);
         border-bottom-width: var(--lumx-text-field-state-default-input-border-bottom-width);
@@ -73,7 +72,7 @@
     flex-shrink: 0;
     margin-top: calc(
         var(--lumx-text-field-wrapper-padding-vertical) +
-            calc(calc(var(--lumx-material-text-field-input-content-line-height) - var(--lumx-size-xs)) / 2)
+            ((var(--lumx-material-text-field-input-content-line-height) - var(--lumx-size-xs)) / 2)
     );
     margin-right: $lumx-spacing-unit;
 
@@ -128,7 +127,7 @@
     flex-shrink: 0;
     margin-top: calc(
         var(--lumx-text-field-wrapper-padding-vertical) +
-            calc(calc(var(--lumx-material-text-field-input-content-line-height) - var(--lumx-size-xxs)) / 2)
+            ((var(--lumx-material-text-field-input-content-line-height) - var(--lumx-size-xxs)) / 2)
     );
     margin-left: $lumx-spacing-unit;
 
@@ -147,10 +146,7 @@
     flex-shrink: 0;
     margin-top: calc(
         var(--lumx-text-field-wrapper-padding-vertical) +
-            calc(
-                calc(var(--lumx-material-text-field-input-content-line-height) - calc(var(--lumx-button-height) / 1.5)) /
-                    2
-            )
+            ((var(--lumx-material-text-field-input-content-line-height) - (var(--lumx-button-height) / 1.5)) / 2)
     );
     margin-left: $lumx-spacing-unit / 2;
 }
@@ -160,7 +156,7 @@
     flex: 1 1 auto;
     flex-wrap: wrap;
     align-items: center;
-    margin: calc(calc(var(--lumx-text-field-input-min-height) - calc(var(--lumx-size-s) + 6px)) / 2) 0;
+    margin: calc((var(--lumx-text-field-input-min-height) - (var(--lumx-size-s) - 6px)) / 2) 0;
 
     .#{$lumx-base-prefix}-chip {
         margin: $lumx-chip-group-spacing 0;

package/scss/components/thumbnail/_variables.scss

@@ -1,5 +1,10 @@
 $lumx-thumbnail-aspect-ratio: (
+    // Ratio 3:2
     'horizontal': 66.66%,
+    // Ratio 16:9
+    'wide': 56.25%,
+    // Ratio 1:1
     'square': 100%,
+    // Ratio 2:3
     'vertical': 150%,
 );

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

@@ -39,14 +39,7 @@
     &__name {
         outline: none;
 
-        #{$self}--size-s & {
-            @include lumx-typography('caption');
-        }
-
-        #{$self}--size-m &,
-        #{$self}--size-l & {
-            @include lumx-typography('body1');
-        }
+        @include lumx-typography('subtitle1');
 
         #{$self}--orientation-vertical & {
             text-align: center;
@@ -87,7 +80,7 @@
     }
 
     &__field {
-        @include lumx-typography('caption');
+        @include lumx-typography('body1');
 
         #{$self}--size-m & {
             &::after {

package/scss/core/typography/_mixins.scss

@@ -6,13 +6,12 @@
 
 @mixin lumx-typography($key, $type: 'interface') {
     @if $type == 'custom' {
-        font-family: var(--lumx-typography-custom-#{$key}-font-family, var(--lumx-typography-font-family));
+        font-family: var(--lumx-typography-custom-#{$key}-font-family);
         font-size: var(--lumx-typography-custom-#{$key}-font-size);
         font-style: var(--lumx-typography-custom-#{$key}-font-style);
         font-weight: var(--lumx-typography-custom-#{$key}-font-weight);
         line-height: var(--lumx-typography-custom-#{$key}-line-height);
     } @else if $type == 'interface' {
-        font-family: var(--lumx-typography-font-family);
         font-size: map-get(map-get($lumx-typography-interface, $key), 'font-size');
         font-weight: var(--lumx-typography-interface-#{$key}-font-weight);
         line-height: map-get(map-get($lumx-typography-interface, $key), 'line-height');

package/scss/lumx.scss

@@ -2,7 +2,11 @@
 
 @import '~sass-mq';
 @import '../css/design-tokens';
+// TODO: remove in next major version
+@import '../css/retro-compat-v2';
 @import './design-tokens';
+// TODO: remove in next major version
+@import './retro-compat-v2';
 @import './core';
 @import './components';
 @import './core/base/normalize';