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

package/scss/components/select/_index.scss

@@ -5,15 +5,30 @@
 .#{$lumx-base-prefix}-select {
     $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 {
-        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;
+
+        #{$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'));
+        }
     }
 
     &__wrapper {
@@ -35,19 +50,33 @@
     &__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')
+            );
         }
 
         #{$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 {
             #{$self}--theme-light & {
-                @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-placeholder(lumx-base-const('theme', 'DARK'));
+                @include lumx-text-field-input-placeholder-color(
+                    lumx-base-const('state', 'DEFAULT'),
+                    lumx-base-const('theme', 'DARK')
+                );
             }
         }
 
@@ -87,7 +116,7 @@
             @include lumx-text-field-input-native(lumx-base-const('theme', 'LIGHT'));
 
             &::placeholder {
-                @include lumx-text-field-placeholder(lumx-base-const('theme', 'LIGHT'));
+                color: lumx-color-variant('dark', 'L2');
             }
         }
     }
@@ -124,23 +153,83 @@
 }
 
 // Hover state
-.#{$lumx-base-prefix}-select--theme-light .#{$lumx-base-prefix}-select__wrapper:hover {
-    @include lumx-text-field-wrapper-state(lumx-base-const('state', 'HOVER'), lumx-base-const('theme', 'LIGHT'));
+.#{$lumx-base-prefix}-select--theme-light {
+    .#{$lumx-base-prefix}-select__wrapper:hover {
+        @include lumx-text-field-wrapper-state(lumx-base-const('state', 'HOVER'), lumx-base-const('theme', 'LIGHT'));
+    }
+
+    .#{$lumx-base-prefix}-text-field__input-native {
+        @include lumx-text-field-input-content-color(
+            lumx-base-const('state', 'HOVER'),
+            lumx-base-const('theme', 'LIGHT')
+        );
+
+        &--placeholder {
+            @include lumx-text-field-input-placeholder-color(
+                lumx-base-const('state', 'HOVER'),
+                lumx-base-const('theme', 'LIGHT')
+            );
+        }
+    }
 }
 
-.#{$lumx-base-prefix}-select--theme-dark .#{$lumx-base-prefix}-select__wrapper:hover {
-    @include lumx-text-field-wrapper-state(lumx-base-const('state', 'HOVER'), lumx-base-const('theme', 'DARK'));
+.#{$lumx-base-prefix}-select--theme-dark {
+    .#{$lumx-base-prefix}-select__wrapper:hover {
+        @include lumx-text-field-wrapper-state(lumx-base-const('state', 'HOVER'), lumx-base-const('theme', 'DARK'));
+    }
+
+    .#{$lumx-base-prefix}-text-field__input-native {
+        @include lumx-text-field-input-content-color(
+            lumx-base-const('state', 'HOVER'),
+            lumx-base-const('theme', 'DARK')
+        );
+
+        &--placeholder {
+            @include lumx-text-field-input-placeholder-color(
+                lumx-base-const('state', 'HOVER'),
+                lumx-base-const('theme', 'DARK')
+            );
+        }
+    }
 }
 
 // Focus state
 .#{$lumx-base-prefix}-select--theme-light.#{$lumx-base-prefix}-select--is-open .#{$lumx-base-prefix}-select__wrapper,
 .#{$lumx-base-prefix}-select--theme-light .#{$lumx-base-prefix}-select__wrapper:focus {
     @include lumx-text-field-wrapper-state(lumx-base-const('state', 'FOCUS'), lumx-base-const('theme', 'LIGHT'));
+
+    .#{$lumx-base-prefix}-text-field__input-native {
+        @include lumx-text-field-input-content-color(
+            lumx-base-const('state', 'FOCUS'),
+            lumx-base-const('theme', 'LIGHT')
+        );
+
+        &--placeholder {
+            @include lumx-text-field-input-placeholder-color(
+                lumx-base-const('state', 'FOCUS'),
+                lumx-base-const('theme', 'LIGHT')
+            );
+        }
+    }
 }
 
 .#{$lumx-base-prefix}-select--theme-dark.#{$lumx-base-prefix}-select--is-open .#{$lumx-base-prefix}-select__wrapper,
 .#{$lumx-base-prefix}-select--theme-dark .#{$lumx-base-prefix}-select__wrapper:focus {
     @include lumx-text-field-wrapper-state(lumx-base-const('state', 'FOCUS'), lumx-base-const('theme', 'DARK'));
+
+    .#{$lumx-base-prefix}-text-field__input-native {
+        @include lumx-text-field-input-content-color(
+            lumx-base-const('state', 'FOCUS'),
+            lumx-base-const('theme', 'DARK')
+        );
+
+        &--placeholder {
+            @include lumx-text-field-input-placeholder-color(
+                lumx-base-const('state', 'FOCUS'),
+                lumx-base-const('theme', 'DARK')
+            );
+        }
+    }
 }
 
 /* Select validity

package/scss/components/select/_mixins.scss

@@ -1,5 +1,10 @@
 @mixin lumx-select-input-indicator($theme) {
-    @include lumx-text-field-input-clear;
+    flex-shrink: 0;
+    margin-top: calc(
+        var(--lumx-text-field-wrapper-padding-vertical) +
+            ((var(--lumx-material-text-field-input-content-line-height) - var(--lumx-size-s)) / 2)
+    );
+    margin-left: $lumx-spacing-unit / 2;
 
     @if $theme == lumx-base-const('theme', 'LIGHT') {
         color: lumx-color-variant('dark', 'N');

package/scss/components/skeleton/_index.scss

@@ -112,9 +112,9 @@ $typography-skeleton-size: (
     }
 }
 
-@each $key, $style in $lumx-typography-styles {
+@each $key, $style in $lumx-typography-interface {
     .#{$lumx-base-prefix}-skeleton-typography--typography-#{$key} {
-        height: map-get(map-get($lumx-typography-styles, $key), 'line-height');
+        height: map-get(map-get($lumx-typography-interface, $key), 'line-height');
     }
 
     .#{$lumx-base-prefix}-skeleton-typography--typography-#{$key} .#{$lumx-base-prefix}-skeleton-typography__inner {

package/scss/components/switch/_mixins.scss

@@ -1,7 +1,7 @@
 @mixin lumx-switch-input-wrapper() {
     position: relative;
-    width: var(--lumx-switch-wrapper-width);
-    height: var(--lumx-switch-wrapper-height);
+    width: var(--lumx-material-switch-wrapper-width);
+    height: var(--lumx-material-switch-wrapper-height);
 }
 
 @mixin lumx-switch-input-native() {
@@ -9,8 +9,8 @@
     z-index: 4;
     top: 0;
     left: 0;
-    width: var(--lumx-switch-wrapper-width);
-    height: var(--lumx-switch-wrapper-height);
+    width: var(--lumx-material-switch-wrapper-width);
+    height: var(--lumx-material-switch-wrapper-height);
     padding: 0;
     margin: 0;
     opacity: 0;
@@ -19,11 +19,11 @@
 @mixin lumx-switch-placeholder() {
     position: absolute;
     z-index: 1;
-    top: calc(calc(var(--lumx-switch-wrapper-height) - var(--lumx-switch-control-height)) / 2);
+    top: calc((var(--lumx-material-switch-wrapper-height) - var(--lumx-material-switch-control-height)) / 2);
     left: 0;
-    width: var(--lumx-switch-control-width);
-    height: var(--lumx-switch-control-height);
-    border-radius: calc(var(--lumx-switch-control-height) / 2);
+    width: var(--lumx-material-switch-control-width);
+    height: var(--lumx-material-switch-control-height);
+    border-radius: calc(var(--lumx-material-switch-control-height) / 2);
 }
 
 @mixin lumx-switch-input-background($status) {
@@ -33,7 +33,7 @@
     right: 0;
     bottom: 0;
     left: 0;
-    border-radius: calc(var(--lumx-switch-control-height) / 2);
+    border-radius: calc(var(--lumx-material-switch-control-height) / 2);
 
     @if $status == 'unchecked' {
         border-width: 2px;
@@ -44,13 +44,13 @@
 @mixin lumx-switch-input-indicator($status, $theme) {
     position: absolute;
     z-index: 3;
-    top: calc(calc(var(--lumx-switch-control-height) - var(--lumx-switch-indicator-size)) / 2);
-    width: var(--lumx-switch-indicator-size);
-    height: var(--lumx-switch-indicator-size);
-    border-radius: calc(var(--lumx-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);
 
     @if $status == 'checked' {
-        right: var(--lumx-switch-indicator-offset);
+        right: var(--lumx-material-switch-indicator-offset);
 
         @if $theme == lumx-base-const('theme', 'LIGHT') {
             background-color: lumx-color-variant('light', 'N');
@@ -58,7 +58,7 @@
             background-color: lumx-color-variant('primary', 'N');
         }
     } @else if $status == 'unchecked' {
-        left: var(--lumx-switch-indicator-offset);
+        left: var(--lumx-material-switch-indicator-offset);
 
         @if $theme == lumx-base-const('theme', 'LIGHT') {
             background-color: lumx-color-variant('dark', 'N');

package/scss/components/tabs/_index.scss

@@ -7,24 +7,43 @@
 
     &__links {
         #{$self}--theme-light & {
-            @include lumx-tabs-links(lumx-base-const('theme', 'LIGHT'));
+            @include lumx-tabs-links;
         }
 
         #{$self}--theme-dark & {
-            @include lumx-tabs-links(lumx-base-const('theme', 'DARK'));
+            @include lumx-tabs-links;
         }
     }
 
     &__link {
-        @include lumx-tabs-link;
-        @include lumx-state-transition;
+        &:not(&--is-active) {
+            @include lumx-tabs-link(lumx-base-const('emphasis', 'LOW'));
 
-        #{$self}--theme-light & {
-            @include lumx-state(lumx-base-const('state', 'DEFAULT'), lumx-base-const('emphasis', 'LOW'), 'dark');
+            #{$self}--theme-light & {
+                @include lumx-tabs-link-color(lumx-base-const('emphasis', 'LOW'), lumx-base-const('theme', 'LIGHT'));
+            }
+
+            #{$self}--theme-dark & {
+                @include lumx-tabs-link-color(lumx-base-const('emphasis', 'LOW'), lumx-base-const('theme', 'DARK'));
+            }
         }
 
-        #{$self}--theme-dark & {
-            @include lumx-state(lumx-base-const('state', 'DEFAULT'), lumx-base-const('emphasis', 'LOW'), 'light');
+        &--is-active {
+            @include lumx-tabs-link(lumx-base-const('emphasis', 'SELECTED'));
+
+            #{$self}--theme-light & {
+                @include lumx-tabs-link-color(
+                    lumx-base-const('emphasis', 'SELECTED'),
+                    lumx-base-const('theme', 'LIGHT')
+                );
+            }
+
+            #{$self}--theme-dark & {
+                @include lumx-tabs-link-color(
+                    lumx-base-const('emphasis', 'SELECTED'),
+                    lumx-base-const('theme', 'DARK')
+                );
+            }
         }
     }
 }
@@ -62,40 +81,6 @@
 /* Tabs link states
    ========================================================================== */
 
-// Hover state
-.#{$lumx-base-prefix}-tabs__link:hover {
-    .#{$lumx-base-prefix}-tabs--theme-light & {
-        @include lumx-state(lumx-base-const('state', 'HOVER'), lumx-base-const('emphasis', 'LOW'), 'dark');
-    }
-
-    .#{$lumx-base-prefix}-tabs--theme-dark & {
-        @include lumx-state(lumx-base-const('state', 'HOVER'), lumx-base-const('emphasis', 'LOW'), 'light');
-    }
-}
-
-// Active state
-/* stylelint-disable-next-line no-descending-specificity */
-.#{$lumx-base-prefix}-tabs__link:active {
-    .#{$lumx-base-prefix}-tabs--theme-light & {
-        @include lumx-state(lumx-base-const('state', 'ACTIVE'), lumx-base-const('emphasis', 'LOW'), 'dark');
-    }
-
-    .#{$lumx-base-prefix}-tabs--theme-dark & {
-        @include lumx-state(lumx-base-const('state', 'ACTIVE'), lumx-base-const('emphasis', 'LOW'), 'light');
-    }
-}
-
-// Focus state
-.#{$lumx-base-prefix}-tabs__link[data-focus-visible-added] {
-    .#{$lumx-base-prefix}-tabs--theme-light & {
-        @include lumx-state(lumx-base-const('state', 'FOCUS'), lumx-base-const('emphasis', 'LOW'), 'dark', null, true);
-    }
-
-    .#{$lumx-base-prefix}-tabs--theme-dark & {
-        @include lumx-state(lumx-base-const('state', 'FOCUS'), lumx-base-const('emphasis', 'LOW'), 'light', null, true);
-    }
-}
-
 // Disabled state
 .#{$lumx-base-prefix}-tabs__link--is-disabled {
     .#{$lumx-base-prefix}-tabs--theme-light & {
@@ -107,19 +92,6 @@
     }
 }
 
-/* Tabs link active
-   ========================================================================== */
-
-.#{$lumx-base-prefix}-tabs__link--is-active {
-    .#{$lumx-base-prefix}-tabs--theme-light & {
-        @include lumx-tabs-link-active(lumx-base-const('theme', 'LIGHT'));
-    }
-
-    .#{$lumx-base-prefix}-tabs--theme-dark & {
-        @include lumx-tabs-link-active(lumx-base-const('theme', 'DARK'));
-    }
-}
-
 /* Tab panel
    ========================================================================== */
 

package/scss/components/tabs/_mixins.scss

@@ -1,21 +1,6 @@
-@mixin lumx-tabs-links($theme) {
+@mixin lumx-tabs-links() {
     position: relative;
     display: flex;
-
-    &::after {
-        position: absolute;
-        right: 0;
-        bottom: 0;
-        left: 0;
-        height: 2px;
-        content: '';
-
-        @if $theme == lumx-base-const('theme', 'LIGHT') {
-            background-color: lumx-color-variant('dark', $lumx-divider-color-variant);
-        } @else if $theme == lumx-base-const('theme', 'DARK') {
-            background-color: lumx-color-variant('light', $lumx-divider-color-variant);
-        }
-    }
 }
 
 @mixin lumx-tabs-links-position($position) {
@@ -28,26 +13,50 @@
     }
 }
 
-@mixin lumx-tabs-link() {
+@mixin lumx-tabs-link($emphasis) {
     position: relative;
     display: flex;
-    height: 48px;
+    height: var(--lumx-tabs-link-height);
     align-items: center;
     justify-content: center;
     padding: 0 $lumx-spacing-unit * 3;
     border: none;
-    background: none;
+    border-radius: var(--lumx-tabs-link-border-radius);
     cursor: pointer;
     outline: none;
-    text-transform: var(--lumx-button-text-transform);
+    transition-duration: $lumx-state-transition-duration;
+    transition-property: border-radius, background-color, color;
 
     &::after {
         position: absolute;
+        top: 0;
         right: 0;
         bottom: 0;
         left: 0;
-        height: 2px;
+        border-style: solid;
+        border-top-width: var(--lumx-tabs-link-#{$emphasis}-state-default-border-top-width);
+        border-right-width: var(--lumx-tabs-link-#{$emphasis}-state-default-border-right-width);
+        border-bottom-width: var(--lumx-tabs-link-#{$emphasis}-state-default-border-bottom-width);
+        border-left-width: var(--lumx-tabs-link-#{$emphasis}-state-default-border-left-width);
+        border-radius: var(--lumx-tabs-link-border-radius);
         content: '';
+        pointer-events: none;
+        transition-duration: $lumx-state-transition-duration;
+        transition-property: border-radius, border-width, border-color;
+    }
+
+    &:hover::after {
+        border-top-width: var(--lumx-tabs-link-#{$emphasis}-state-hover-border-top-width);
+        border-right-width: var(--lumx-tabs-link-#{$emphasis}-state-hover-border-right-width);
+        border-bottom-width: var(--lumx-tabs-link-#{$emphasis}-state-hover-border-bottom-width);
+        border-left-width: var(--lumx-tabs-link-#{$emphasis}-state-hover-border-left-width);
+    }
+
+    &:active::after {
+        border-top-width: var(--lumx-tabs-link-#{$emphasis}-state-active-border-top-width);
+        border-right-width: var(--lumx-tabs-link-#{$emphasis}-state-active-border-right-width);
+        border-bottom-width: var(--lumx-tabs-link-#{$emphasis}-state-active-border-bottom-width);
+        border-left-width: var(--lumx-tabs-link-#{$emphasis}-state-active-border-left-width);
     }
 
     i {
@@ -55,24 +64,50 @@
     }
 
     span {
-        @include lumx-typography('subtitle1');
+        font-family: var(--lumx-typography-custom-button-size-m-font-family);
+        font-size: var(--lumx-typography-custom-button-size-m-font-size);
+        font-weight: var(--lumx-typography-custom-button-size-m-font-weight);
+        text-transform: var(--lumx-material-button-text-transform);
     }
 }
 
-@mixin lumx-tabs-link-layout($layout) {
-    @if $layout == 'fixed' {
-        flex: 1 1 auto;
+@mixin lumx-tabs-link-color($emphasis, $theme) {
+    background-color: var(--lumx-tabs-link-#{$emphasis}-state-default-#{$theme}-background-color);
+    color: var(--lumx-tabs-link-#{$emphasis}-state-default-#{$theme}-color);
+
+    &::after {
+        border-color: var(--lumx-tabs-link-#{$emphasis}-state-default-#{$theme}-border-color);
     }
-}
 
-@mixin lumx-tabs-link-active($theme) {
-    @if $theme == lumx-base-const('theme', 'LIGHT') {
+    &:hover {
+        background-color: var(--lumx-tabs-link-#{$emphasis}-state-hover-#{$theme}-background-color);
+        color: var(--lumx-tabs-link-#{$emphasis}-state-hover-#{$theme}-color);
+
         &::after {
-            background-color: lumx-color-variant('primary', 'N');
+            border-color: var(--lumx-tabs-link-#{$emphasis}-state-hover-#{$theme}-border-color);
         }
-    } @else if $theme == lumx-base-const('theme', 'DARK') {
+    }
+
+    &:active {
+        background-color: var(--lumx-tabs-link-#{$emphasis}-state-active-#{$theme}-background-color);
+        color: var(--lumx-tabs-link-#{$emphasis}-state-active-#{$theme}-color);
+
         &::after {
-            background-color: lumx-color-variant('light', 'N');
+            border-color: var(--lumx-tabs-link-#{$emphasis}-state-active-#{$theme}-border-color);
+        }
+    }
+
+    &[data-focus-visible-added] {
+        @if $theme == lumx-base-const('theme', 'LIGHT') {
+            @include lumx-state-low(lumx-base-const('state', 'FOCUS'), 'dark');
+        } @else if $theme == lumx-base-const('theme', 'DARK') {
+            @include lumx-state-low(lumx-base-const('state', 'FOCUS'), 'light');
         }
     }
 }
+
+@mixin lumx-tabs-link-layout($layout) {
+    @if $layout == 'fixed' {
+        flex: 1 1 auto;
+    }
+}