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

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

@@ -5,19 +5,34 @@
 .#{$lumx-base-prefix}-text-field {
     $self: &;
 
-    padding-top: var(--lumx-text-field-padding-top);
-    padding-bottom: var(--lumx-text-field-padding-bottom);
+    --lumx-text-field-wrapper-padding-vertical: calc(
+        (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);
+    padding-bottom: var(--lumx-material-text-field-padding-bottom);
 
     &__header {
         display: flex;
         align-items: center;
-        margin-bottom: var(--lumx-text-field-header-margin-bottom);
+        margin-bottom: var(--lumx-material-text-field-header-wrapper-margin-bottom);
     }
 
     &__label {
         @include lumx-text-field-label;
 
         flex: 1 1 auto;
+
+        #{$self}--theme-light & {
+            @include lumx-text-field-label-color(
+                lumx-base-const('state', 'DEFAULT'),
+                lumx-base-const('theme', 'LIGHT')
+            );
+        }
+
+        #{$self}--theme-dark & {
+            @include lumx-text-field-label-color(lumx-base-const('state', 'DEFAULT'), lumx-base-const('theme', 'DARK'));
+        }
     }
 
     &__char-counter {
@@ -27,9 +42,9 @@
         margin-left: $lumx-spacing-unit;
 
         span {
-            font-size: var(--lumx-text-field-label-font-size);
-            font-weight: var(--lumx-text-field-label-font-weight);
-            line-height: var(--lumx-text-field-label-font-size);
+            font-size: var(--lumx-material-text-field-header-label-font-size);
+            font-weight: var(--lumx-material-text-field-header-label-font-weight);
+            line-height: var(--lumx-material-text-field-header-label-line-height);
 
             #{$self}--theme-light & {
                 color: lumx-color-variant('dark', 'L2');
@@ -66,10 +81,18 @@
     &__input-icon {
         #{$self}--theme-light & {
             @include lumx-text-field-input-icon(lumx-base-const('theme', 'LIGHT'));
+            @include lumx-text-field-input-content-color(
+                lumx-base-const('state', 'DEFAULT'),
+                lumx-base-const('theme', 'LIGHT')
+            );
         }
 
         #{$self}--theme-dark & {
             @include lumx-text-field-input-icon(lumx-base-const('theme', 'DARK'));
+            @include lumx-text-field-input-content-color(
+                lumx-base-const('state', 'DEFAULT'),
+                lumx-base-const('theme', 'DARK')
+            );
         }
     }
 
@@ -80,17 +103,31 @@
     &__input-native {
         #{$self}--theme-light & {
             @include lumx-text-field-input-native(lumx-base-const('theme', 'LIGHT'));
+            @include lumx-text-field-input-content-color(
+                lumx-base-const('state', 'DEFAULT'),
+                lumx-base-const('theme', 'LIGHT')
+            );
 
             &::placeholder {
-                @include lumx-text-field-placeholder(lumx-base-const('theme', 'LIGHT'));
+                @include lumx-text-field-input-placeholder-color(
+                    lumx-base-const('state', 'DEFAULT'),
+                    lumx-base-const('theme', 'LIGHT')
+                );
             }
         }
 
         #{$self}--theme-dark & {
             @include lumx-text-field-input-native(lumx-base-const('theme', 'DARK'));
+            @include lumx-text-field-input-content-color(
+                lumx-base-const('state', 'DEFAULT'),
+                lumx-base-const('theme', 'DARK')
+            );
 
             &::placeholder {
-                @include lumx-text-field-placeholder(lumx-base-const('theme', 'DARK'));
+                @include lumx-text-field-input-placeholder-color(
+                    lumx-base-const('state', 'DEFAULT'),
+                    lumx-base-const('theme', 'DARK')
+                );
             }
         }
 
@@ -99,7 +136,7 @@
             min-width: $lumx-text-field-min-width;
             flex: 1 1 auto;
             margin: $lumx-chip-group-spacing 0;
-            line-height: var(--lumx-chip-size-s-height);
+            line-height: var(--lumx-material-chip-size-s-height);
         }
 
         &--textarea {
@@ -149,25 +186,93 @@
     .#{$lumx-base-prefix}-text-field__wrapper:hover {
         @include lumx-text-field-wrapper-state(lumx-base-const('state', 'HOVER'), lumx-base-const('theme', 'LIGHT'));
     }
+
+    .#{$lumx-base-prefix}-text-field__input-icon,
+    .#{$lumx-base-prefix}-text-field__input-native {
+        @include lumx-text-field-input-content-color(
+            lumx-base-const('state', 'HOVER'),
+            lumx-base-const('theme', 'LIGHT')
+        );
+    }
+
+    .#{$lumx-base-prefix}-text-field__input-native::placeholder {
+        @include lumx-text-field-input-placeholder-color(
+            lumx-base-const('state', 'HOVER'),
+            lumx-base-const('theme', 'LIGHT')
+        );
+    }
 }
 
 .#{$lumx-base-prefix}-text-field--theme-dark {
     .#{$lumx-base-prefix}-text-field__wrapper:hover {
         @include lumx-text-field-wrapper-state(lumx-base-const('state', 'HOVER'), lumx-base-const('theme', 'DARK'));
     }
+
+    .#{$lumx-base-prefix}-text-field__input-icon,
+    .#{$lumx-base-prefix}-text-field__input-native {
+        @include lumx-text-field-input-content-color(
+            lumx-base-const('state', 'HOVER'),
+            lumx-base-const('theme', 'DARK')
+        );
+    }
+
+    .#{$lumx-base-prefix}-text-field__input-native::placeholder {
+        @include lumx-text-field-input-placeholder-color(
+            lumx-base-const('state', 'HOVER'),
+            lumx-base-const('theme', 'DARK')
+        );
+    }
 }
 
 // Focus state
 .#{$lumx-base-prefix}-text-field--theme-light.#{$lumx-base-prefix}-text-field--is-focus {
+    .#{$lumx-base-prefix}-text-field__label {
+        @include lumx-text-field-label-color(lumx-base-const('state', 'FOCUS'), lumx-base-const('theme', 'LIGHT'));
+    }
+
     .#{$lumx-base-prefix}-text-field__wrapper {
         @include lumx-text-field-wrapper-state(lumx-base-const('state', 'FOCUS'), lumx-base-const('theme', 'LIGHT'));
     }
+
+    .#{$lumx-base-prefix}-text-field__input-icon,
+    .#{$lumx-base-prefix}-text-field__input-native {
+        @include lumx-text-field-input-content-color(
+            lumx-base-const('state', 'FOCUS'),
+            lumx-base-const('theme', 'LIGHT')
+        );
+    }
+
+    .#{$lumx-base-prefix}-text-field__input-native::placeholder {
+        @include lumx-text-field-input-placeholder-color(
+            lumx-base-const('state', 'FOCUS'),
+            lumx-base-const('theme', 'LIGHT')
+        );
+    }
 }
 
 .#{$lumx-base-prefix}-text-field--theme-dark.#{$lumx-base-prefix}-text-field--is-focus {
+    .#{$lumx-base-prefix}-text-field__label {
+        @include lumx-text-field-label-color(lumx-base-const('state', 'FOCUS'), lumx-base-const('theme', 'DARK'));
+    }
+
     .#{$lumx-base-prefix}-text-field__wrapper {
         @include lumx-text-field-wrapper-state(lumx-base-const('state', 'FOCUS'), lumx-base-const('theme', 'DARK'));
     }
+
+    .#{$lumx-base-prefix}-text-field__input-icon,
+    .#{$lumx-base-prefix}-text-field__input-native {
+        @include lumx-text-field-input-content-color(
+            lumx-base-const('state', 'FOCUS'),
+            lumx-base-const('theme', 'DARK')
+        );
+    }
+
+    .#{$lumx-base-prefix}-text-field__input-native::placeholder {
+        @include lumx-text-field-input-placeholder-color(
+            lumx-base-const('state', 'FOCUS'),
+            lumx-base-const('theme', 'DARK')
+        );
+    }
 }
 
 /* Text field validity

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

@@ -1,84 +1,60 @@
 @mixin lumx-text-field-label() {
-    font-size: var(--lumx-text-field-label-font-size);
-    font-weight: var(--lumx-text-field-label-font-weight);
-    line-height: var(--lumx-text-field-label-line-height);
+    font-size: var(--lumx-material-text-field-header-label-font-size);
+    font-weight: var(--lumx-material-text-field-header-label-font-weight);
+    line-height: var(--lumx-material-text-field-header-label-line-height);
+}
+
+@mixin lumx-text-field-label-color($state, $theme) {
+    color: var(--lumx-text-field-#{$state}-#{$theme}-header-label-color);
 }
 
 @mixin lumx-text-field-wrapper($theme) {
     position: relative;
     display: flex;
-    min-height: var(--lumx-text-field-wrapper-min-height);
+    min-height: var(--lumx-text-field-input-min-height);
     align-items: flex-start;
-    padding: 0 var(--lumx-text-field-wrapper-padding-horizontal);
-    border-radius: var(--lumx-text-field-wrapper-border-radius);
+    padding: 0 var(--lumx-text-field-input-padding-horizontal);
+    background-color: var(--lumx-text-field-state-default-#{$theme}-input-background-color);
+    border-radius: var(--lumx-text-field-input-border-radius);
     outline: none;
     transition-duration: $lumx-text-field-transition-duration;
     transition-property: background-color, box-shadow;
 
-    @if $theme == lumx-base-const('theme', 'LIGHT') {
-        background-color: var(--lumx-text-field-state-default-theme-light-background-color);
-    } @else if $theme == lumx-base-const('theme', 'DARK') {
-        background-color: var(--lumx-text-field-state-default-theme-dark-background-color);
-    }
-
     &::before {
         position: absolute;
         top: 0;
         right: 0;
         bottom: 0;
         left: 0;
-        border-style: solid;
-        border-top-width: var(--lumx-text-field-state-default-border-top-width);
-        border-right-width: var(--lumx-text-field-state-default-border-right-width);
-        border-bottom-width: var(--lumx-text-field-state-default-border-bottom-width);
-        border-left-width: var(--lumx-text-field-state-default-border-left-width);
-        border-radius: var(--lumx-text-field-wrapper-border-radius);
+        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);
+        border-left-width: var(--lumx-text-field-state-default-input-border-left-width);
+        border-radius: var(--lumx-text-field-input-border-radius);
         content: '';
         pointer-events: none;
-
-        @if $theme == lumx-base-const('theme', 'LIGHT') {
-            border-color: var(--lumx-text-field-state-default-theme-light-border-color);
-        } @else if $theme == lumx-base-const('theme', 'DARK') {
-            border-color: var(--lumx-text-field-state-default-theme-dark-border-color);
-        }
     }
 }
 
 @mixin lumx-text-field-wrapper-state($state, $theme) {
-    @if $state == lumx-base-const('state', 'HOVER') {
-        @if $theme == lumx-base-const('theme', 'LIGHT') {
-            background-color: var(--lumx-text-field-state-hover-theme-light-background-color);
-        } @else if $theme == lumx-base-const('theme', 'DARK') {
-            background-color: var(--lumx-text-field-state-hover-theme-dark-background-color);
-        }
-    } @else if $state == lumx-base-const('state', 'FOCUS') {
-        @if $theme == lumx-base-const('theme', 'LIGHT') {
-            background-color: var(--lumx-text-field-state-focus-theme-light-background-color);
-        } @else if $theme == lumx-base-const('theme', 'DARK') {
-            background-color: var(--lumx-text-field-state-focus-theme-dark-background-color);
-        }
-
-        &::before {
-            border-top-width: var(--lumx-text-field-state-focus-border-top-width);
-            border-right-width: var(--lumx-text-field-state-focus-border-right-width);
-            border-bottom-width: var(--lumx-text-field-state-focus-border-bottom-width);
-            border-left-width: var(--lumx-text-field-state-focus-border-left-width);
+    background-color: var(--lumx-text-field-#{$state}-#{$theme}-input-background-color);
 
-            @if $theme == lumx-base-const('theme', 'LIGHT') {
-                border-color: var(--lumx-text-field-state-focus-theme-light-border-color);
-            } @else if $theme == lumx-base-const('theme', 'DARK') {
-                border-color: var(--lumx-text-field-state-focus-theme-dark-border-color);
-            }
-        }
+    &::before {
+        border-color: var(--lumx-text-field-#{$state}-#{$theme}-input-border-color);
+        border-top-width: var(--lumx-text-field-#{$state}-input-border-top-width);
+        border-right-width: var(--lumx-text-field-#{$state}-input-border-right-width);
+        border-bottom-width: var(--lumx-text-field-#{$state}-input-border-bottom-width);
+        border-left-width: var(--lumx-text-field-#{$state}-input-border-left-width);
     }
 }
 
 @mixin lumx-text-field-wrapper-validity($validity, $theme) {
     &::before {
-        border-top-width: var(--lumx-text-field-state-focus-border-top-width);
-        border-right-width: var(--lumx-text-field-state-focus-border-right-width);
-        border-bottom-width: var(--lumx-text-field-state-focus-border-bottom-width);
-        border-left-width: var(--lumx-text-field-state-focus-border-left-width);
+        border-top-width: var(--lumx-text-field-state-focus-input-border-top-width);
+        border-right-width: var(--lumx-text-field-state-focus-input-border-right-width);
+        border-bottom-width: var(--lumx-text-field-state-focus-input-border-bottom-width);
+        border-left-width: var(--lumx-text-field-state-focus-input-border-left-width);
 
         @if $theme == lumx-base-const('theme', 'LIGHT') {
             @if $validity == 'valid' {
@@ -96,7 +72,7 @@
     flex-shrink: 0;
     margin-top: calc(
         var(--lumx-text-field-wrapper-padding-vertical) +
-            calc(calc(var(--lumx-text-field-input-line-height) - var(--lumx-text-field-input-icon-size)) / 2)
+            ((var(--lumx-material-text-field-input-content-line-height) - var(--lumx-size-xs)) / 2)
     );
     margin-right: $lumx-spacing-unit;
 
@@ -119,8 +95,8 @@
     border: none;
     margin: 0;
     background-color: transparent;
-    font-size: var(--lumx-text-field-input-font-size);
-    line-height: var(--lumx-text-field-input-line-height);
+    font-size: var(--lumx-material-text-field-input-content-font-size);
+    line-height: var(--lumx-material-text-field-input-content-line-height);
     outline: none;
 
     &[type='number'] {
@@ -139,11 +115,19 @@
     }
 }
 
+@mixin lumx-text-field-input-content-color($state, $theme) {
+    color: var(--lumx-text-field-#{$state}-#{$theme}-input-content-color);
+}
+
+@mixin lumx-text-field-input-placeholder-color($state, $theme) {
+    color: var(--lumx-text-field-#{$state}-#{$theme}-input-placeholder-color);
+}
+
 @mixin lumx-text-field-input-validity($validity, $theme) {
     flex-shrink: 0;
     margin-top: calc(
         var(--lumx-text-field-wrapper-padding-vertical) +
-            calc(calc(var(--lumx-text-field-input-line-height) - var(--lumx-text-field-input-validity-size)) / 2)
+            ((var(--lumx-material-text-field-input-content-line-height) - var(--lumx-size-xxs)) / 2)
     );
     margin-left: $lumx-spacing-unit;
 
@@ -162,7 +146,7 @@
     flex-shrink: 0;
     margin-top: calc(
         var(--lumx-text-field-wrapper-padding-vertical) +
-            calc(calc(var(--lumx-text-field-input-line-height) - var(--lumx-text-field-input-clear-size)) / 2)
+            ((var(--lumx-material-text-field-input-content-line-height) - (var(--lumx-button-height) / 1.5)) / 2)
     );
     margin-left: $lumx-spacing-unit / 2;
 }
@@ -172,18 +156,10 @@
     flex: 1 1 auto;
     flex-wrap: wrap;
     align-items: center;
-    margin: $lumx-chip-group-spacing 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;
         margin-right: $lumx-chip-group-spacing * 2;
     }
 }
-
-@mixin lumx-text-field-placeholder($theme) {
-    @if $theme == lumx-base-const('theme', 'LIGHT') {
-        color: lumx-color-variant('dark', 'L2');
-    } @else if $theme == lumx-base-const('theme', 'DARK') {
-        color: lumx-color-variant('light', 'L2');
-    }
-}

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/base/_variables.scss

@@ -5,6 +5,7 @@ $lumx-base-constants: (
         'HIGH': 'emphasis-high',
         'MEDIUM': 'emphasis-medium',
         'LOW': 'emphasis-low',
+        'SELECTED': 'emphasis-selected',
     ),
     'position': (
         'TOP': 'position-top',

package/scss/core/state/_mixins.scss

@@ -48,12 +48,14 @@
 @mixin lumx-state-as-selected($state, $theme, $has-focus-inset: false) {
     @if $theme == lumx-base-const('theme', 'LIGHT') {
         @if $state == lumx-base-const('state', 'DEFAULT') {
-            background-color: lumx-color-variant('primary', 'L4');
+            background-color: lumx-color-variant('primary', 'L5');
             color: lumx-color-variant('primary', 'D2');
         } @else if $state == lumx-base-const('state', 'HOVER') {
-            background-color: lumx-color-variant('primary', 'L3');
+            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', 'L2');
+            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');
@@ -63,12 +65,14 @@
         }
     } @else if $theme == lumx-base-const('theme', 'DARK') {
         @if $state == lumx-base-const('state', 'DEFAULT') {
-            background-color: lumx-color-variant('light', 'L2');
-            color: lumx-color-variant('dark', 'N');
-        } @else if $state == lumx-base-const('state', 'HOVER') {
             background-color: lumx-color-variant('light', 'L3');
-        } @else if $state == lumx-base-const('state', 'ACTIVE') {
+            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');

package/scss/core/typography/_index.scss

@@ -2,8 +2,15 @@
    Typography
    ========================================================================== */
 
-@each $key, $style in $lumx-typography-styles {
-    .#{$lumx-base-prefix}-typography-#{$key} {
+@each $key, $style in $lumx-typography-interface {
+    .#{$lumx-base-prefix}-typography-#{$key},
+    .#{$lumx-base-prefix}-typography-interface-#{$key} {
         @include lumx-typography($key);
     }
 }
+
+@each $key, $style in $lumx-typography-custom {
+    .#{$lumx-base-prefix}-typography-custom-#{$key} {
+        @include lumx-typography($key, 'custom');
+    }
+}

package/scss/core/typography/_mixins.scss

@@ -4,10 +4,19 @@
     -webkit-font-smoothing: antialiased;
 }
 
-@mixin lumx-typography($key) {
-    font-size: var(--lumx-typography-style-#{$key}-font-size);
-    font-weight: var(--lumx-typography-style-#{$key}-font-weight);
-    line-height: var(--lumx-typography-style-#{$key}-line-height);
+@mixin lumx-typography($key, $type: 'interface') {
+    @if $type == 'custom' {
+        font-family: var(--lumx-typography-custom-#{$key}-font-family, var(--lumx-typography-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');
+    }
 
     @if $key == 'overline' {
         text-transform: uppercase;

package/scss/core/typography/_variables.scss

@@ -1,4 +1,5 @@
 $lumx-typography-default-font-size: 16px;
 $lumx-typography-default-line-height: 24px;
 
-$lumx-typography-styles: map-get(map-get($lumx-design-tokens, 'typography'), 'style');
+$lumx-typography-interface: map-get(map-get($lumx-design-tokens, 'typography'), 'interface');
+$lumx-typography-custom: map-get(map-get($lumx-design-tokens, 'typography'), 'custom');

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';