@lumx/core 3.1.1 → 3.1.2

package/src/scss/_retro-compat-v2.scss

@@ -1,95 +0,0 @@
-/**
- * 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/src/scss/components/avatar/_index.scss

@@ -1,42 +0,0 @@
-@use "sass:math";
-
-/* ==========================================================================
-   Avatar
-   ========================================================================== */
-
-.#{$lumx-base-prefix}-avatar {
-    position: relative;
-    background-repeat: no-repeat;
-    background-position: center;
-    background-size: cover;
-    outline: none;
-
-    &__thumbnail {
-        overflow: hidden;
-        border-radius: 50%;
-    }
-
-    &__actions {
-        position: absolute;
-        top: 50%;
-        right: 0;
-        left: 0;
-        transform: translateY(-50%);
-    }
-
-    &__badge {
-        position: absolute;
-        right: math.div(-$lumx-spacing-unit, 2);
-        bottom: math.div(-$lumx-spacing-unit, 2);
-    }
-}
-
-/* Avatar sizes
-   ========================================================================== */
-
-@each $key, $size in $lumx-sizes {
-    .#{$lumx-base-prefix}-avatar--size-#{$key} {
-        width: $size;
-        height: $size;
-    }
-}

package/src/scss/components/badge/_index.scss

@@ -1,47 +0,0 @@
-@use "sass:map";
-
-/* ==========================================================================
-   Badge
-   ========================================================================== */
-
-.#{$lumx-base-prefix}-badge {
-    display: inline-flex;
-    align-items: center;
-    justify-content: center;
-    width: map.get($lumx-sizes, lumx-base-const("size", "XS"));
-    height: map.get($lumx-sizes, lumx-base-const("size", "XS"));
-    pointer-events: none;
-    border-radius: 50%;
-
-    span {
-        @include lumx-typography("overline");
-
-        line-height: map.get($lumx-sizes, lumx-base-const("size", "XS"));
-    }
-
-    i {
-        width: 12px;
-        height: 12px;
-        font-size: 12px;
-        line-height: 12px;
-    }
-}
-
-/* Badge colors
-   ========================================================================== */
-
-@each $key, $color in $lumx-color-palette {
-    .#{$lumx-base-prefix}-badge--color-#{$key} {
-        background-color: lumx-color-variant($key, "N");
-
-        @if $key == "light" {
-            @include lumx-elevation(2);
-        } @else {
-            @if $key == "yellow" {
-                color: lumx-color-variant("dark", "L1");
-            } @else {
-                color: lumx-color-variant("light", "N");
-            }
-        }
-    }
-}

package/src/scss/components/button/_index.scss

@@ -1,166 +0,0 @@
-@use "sass:math";
-
-/* ==========================================================================
-   Button
-   ========================================================================== */
-
-.#{$lumx-base-prefix}-button {
-    @include lumx-button-base;
-
-    .#{$lumx-base-prefix}-badge {
-        position: absolute;
-        top: math.div(-$lumx-spacing-unit, 2);
-        right: math.div(-$lumx-spacing-unit, 2);
-    }
-}
-
-/* Button sizes
-   ========================================================================== */
-
-@each $key, $size in $lumx-sizes {
-    @if $key == lumx-base-const("size", "S") or $key == lumx-base-const("size", "M") {
-        .#{$lumx-base-prefix}-button--size-#{$key} {
-            &.#{$lumx-base-prefix}-button--emphasis-high {
-                &.#{$lumx-base-prefix}-button--variant-button {
-                    @include lumx-button-size(lumx-base-const("emphasis", "HIGH"), "button", $key);
-                }
-
-                &.#{$lumx-base-prefix}-button--variant-icon {
-                    @include lumx-button-size(lumx-base-const("emphasis", "HIGH"), "icon", $key);
-                }
-            }
-
-            &.#{$lumx-base-prefix}-button--emphasis-medium {
-                &.#{$lumx-base-prefix}-button--variant-button {
-                    @include lumx-button-size(lumx-base-const("emphasis", "MEDIUM"), "button", $key);
-                }
-
-                &.#{$lumx-base-prefix}-button--variant-icon {
-                    @include lumx-button-size(lumx-base-const("emphasis", "MEDIUM"), "icon", $key);
-                }
-            }
-
-            &.#{$lumx-base-prefix}-button--emphasis-low {
-                &.#{$lumx-base-prefix}-button--variant-button {
-                    @include lumx-button-size(lumx-base-const("emphasis", "LOW"), "button", $key);
-                }
-
-                &.#{$lumx-base-prefix}-button--variant-icon {
-                    @include lumx-button-size(lumx-base-const("emphasis", "LOW"), "icon", $key);
-                }
-            }
-
-            &.#{$lumx-base-prefix}-button--variant-button {
-                i:first-child {
-                    @include lumx-button-icon("button", $key, lumx-base-const("position", "LEFT"));
-                }
-
-                i:last-child {
-                    @include lumx-button-icon("button", $key, lumx-base-const("position", "RIGHT"));
-                }
-            }
-
-            &.#{$lumx-base-prefix}-button--variant-icon {
-                & > i,
-                & > img {
-                    @include lumx-button-icon("icon", $key);
-                }
-            }
-
-            & > span {
-                @include lumx-button-text($key);
-            }
-        }
-    }
-}
-
-/* Button colors
-   ========================================================================== */
-
-@each $key, $color in $lumx-color-palette {
-    @if $key != "dark" and $key != "light" {
-        .#{$lumx-base-prefix}-button--color-#{$key} {
-            &.#{$lumx-base-prefix}-button--emphasis-high.#{$lumx-base-prefix}-button--theme-light {
-                @include lumx-button-color(
-                    lumx-base-const("emphasis", "HIGH"),
-                    $key,
-                    lumx-base-const("theme", "LIGHT")
-                );
-            }
-
-            &.#{$lumx-base-prefix}-button--emphasis-high.#{$lumx-base-prefix}-button--theme-dark {
-                @include lumx-button-color(lumx-base-const("emphasis", "HIGH"), $key, lumx-base-const("theme", "DARK"));
-            }
-        }
-    }
-}
-
-@each $key, $color in $lumx-color-palette {
-    .#{$lumx-base-prefix}-button--color-#{$key} {
-        &:not(.#{$lumx-base-prefix}-button--is-selected).#{$lumx-base-prefix}-button--emphasis-medium {
-            @include lumx-button-color(lumx-base-const("emphasis", "MEDIUM"), $key);
-        }
-
-        &:not(.#{$lumx-base-prefix}-button--is-selected).#{$lumx-base-prefix}-button--emphasis-low {
-            @include lumx-button-color(lumx-base-const("emphasis", "LOW"), $key);
-        }
-
-        &.#{$lumx-base-prefix}-button--is-selected {
-            @include lumx-button-color(lumx-base-const("emphasis", "SELECTED"), $key);
-        }
-    }
-}
-
-/* Button wrapper
-   ========================================================================== */
-
-.#{$lumx-base-prefix}-button-wrapper {
-    width: fit-content;
-
-    &--variant-button {
-        border-radius: var(--lumx-border-radius);
-    }
-
-    &--variant-icon {
-        border-radius: var(--lumx-material-button-variant-icon-border-radius, var(--lumx-button-border-radius));
-    }
-
-    &--color-light {
-        background-color: lumx-color-variant("light", "N");
-    }
-
-    &--color-dark {
-        background-color: lumx-color-variant("dark", "N");
-    }
-}
-
-/* Button group
-   ========================================================================== */
-
-.#{$lumx-base-prefix}-button-group {
-    display: inline-flex;
-    vertical-align: top;
-
-    .#{$lumx-base-prefix}-button {
-        margin-right: 1px;
-        border-radius: 0 !important;
-
-        &:first-child {
-            border-radius: var(--lumx-border-radius) 0 0 var(--lumx-border-radius) !important;
-        }
-
-        &:last-child {
-            margin-right: 0;
-            border-radius: 0 var(--lumx-border-radius) var(--lumx-border-radius) 0 !important;
-        }
-    }
-}
-
-/* Button full width
-   ========================================================================== */
-
-.#{$lumx-base-prefix}-button--is-full-width:not(.#{$lumx-base-prefix}-button--variant-icon),
-.#{$lumx-base-prefix}-button-wrapper--is-full-width:not(.#{$lumx-base-prefix}-button-wrapper--variant-icon) {
-    flex-grow: 1;
-    width: 100%;
-}

package/src/scss/components/button/_mixins.scss

@@ -1,271 +0,0 @@
-@use "sass:map";
-@use "sass:math";
-
-@mixin lumx-button-base() {
-    position: relative;
-    display: inline-flex;
-    align-items: center;
-    justify-content: center;
-    padding: 0;
-    margin: 0;
-    text-decoration: none;
-    vertical-align: top;
-    user-select: none;
-    background-color: transparent;
-    border: none;
-    outline: none;
-    transition-duration: $lumx-state-transition-duration;
-    transition-property: padding, border-radius, background-color, color;
-
-    &:hover,
-    &[class*="--is-hovered"] {
-        cursor: pointer;
-    }
-
-    &::before {
-        transition-duration: $lumx-state-transition-duration;
-        transition-property: border-radius, border-width, border-color;
-    }
-}
-
-@mixin lumx-button-size($emphasis, $variant, $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-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));
-    }
-
-    &::before {
-        position: absolute;
-        top: 0;
-        right: 0;
-        bottom: 0;
-        left: 0;
-        pointer-events: none;
-        content: "";
-        border-style: solid;
-        border-width: var(--lumx-button-#{$emphasis}-state-default-border-width);
-
-        @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,
-    &[class*="--is-hovered"] {
-        @if $variant == "button" {
-            @if $size == lumx-base-const("size", "M") {
-                padding: 0 var(--lumx-button-#{$emphasis}-state-hover-padding-horizontal);
-            } @else if $size == lumx-base-const("size", "S") {
-                padding: 0 calc(var(--lumx-button-#{$emphasis}-state-hover-padding-horizontal) / 1.5);
-            }
-        }
-
-        &::before {
-            border-width: var(--lumx-button-#{$emphasis}-state-hover-border-width);
-        }
-    }
-
-    &:active,
-    &[class*="--is-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);
-            }
-        }
-
-        &::before {
-            border-width: var(--lumx-button-#{$emphasis}-state-active-border-width);
-        }
-    }
-}
-
-@mixin lumx-button-color($emphasis, $color, $theme: null) {
-    @if $color == "primary" and $emphasis == lumx-base-const("emphasis", "HIGH") {
-        color: var(--lumx-button-#{$emphasis}-state-default-#{$theme}-color);
-        background-color: var(--lumx-button-#{$emphasis}-state-default-#{$theme}-background-color);
-    } @else if $color == "dark" and $emphasis != lumx-base-const("emphasis", "HIGH") {
-        color: var(--lumx-button-#{$emphasis}-state-default-theme-light-color);
-        background-color: var(--lumx-button-#{$emphasis}-state-default-theme-light-background-color);
-    } @else if $color == "light" and $emphasis != lumx-base-const("emphasis", "HIGH") {
-        color: var(--lumx-button-#{$emphasis}-state-default-theme-dark-color);
-        background-color: var(--lumx-button-#{$emphasis}-state-default-theme-dark-background-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,
-    &[class*="--is-hovered"] {
-        @if $color == "primary" and $emphasis == lumx-base-const("emphasis", "HIGH") {
-            color: var(--lumx-button-#{$emphasis}-state-hover-#{$theme}-color);
-            background-color: var(--lumx-button-#{$emphasis}-state-hover-#{$theme}-background-color);
-        } @else if $color == "dark" and $emphasis != lumx-base-const("emphasis", "HIGH") {
-            color: var(--lumx-button-#{$emphasis}-state-hover-theme-light-color);
-            background-color: var(--lumx-button-#{$emphasis}-state-hover-theme-light-background-color);
-        } @else if $color == "light" and $emphasis != lumx-base-const("emphasis", "HIGH") {
-            color: var(--lumx-button-#{$emphasis}-state-hover-theme-dark-color);
-            background-color: var(--lumx-button-#{$emphasis}-state-hover-theme-dark-background-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,
-    &[class*="--is-active"] {
-        @if $color == "primary" and $emphasis == lumx-base-const("emphasis", "HIGH") {
-            color: var(--lumx-button-#{$emphasis}-state-active-#{$theme}-color);
-            background-color: var(--lumx-button-#{$emphasis}-state-active-#{$theme}-background-color);
-        } @else if $color == "dark" and $emphasis != lumx-base-const("emphasis", "HIGH") {
-            color: var(--lumx-button-#{$emphasis}-state-active-theme-light-color);
-            background-color: var(--lumx-button-#{$emphasis}-state-active-theme-light-background-color);
-        } @else if $color == "light" and $emphasis != lumx-base-const("emphasis", "HIGH") {
-            color: var(--lumx-button-#{$emphasis}-state-active-theme-dark-color);
-            background-color: var(--lumx-button-#{$emphasis}-state-active-theme-dark-background-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],
-    &[class*="--is-focused"] {
-        @include lumx-state(lumx-base-const("state", "FOCUS"), $emphasis, $color, $theme);
-    }
-
-    &:disabled,
-    &[aria-disabled="true"] {
-        @include lumx-state-disabled-input;
-    }
-}
-
-@mixin lumx-button-is-selected($theme) {
-    @include lumx-state-as-selected(lumx-base-const("state", "DEFAULT"), $theme);
-
-    &:hover,
-    &[class*="--is-hovered"] {
-        @include lumx-state-as-selected(lumx-base-const("state", "HOVER"), $theme);
-    }
-
-    &:active,
-    &[class*="--is-active"] {
-        @include lumx-state-as-selected(lumx-base-const("state", "ACTIVE"), $theme);
-    }
-
-    &[data-focus-visible-added],
-    &[class*="--is-focused"] {
-        @include lumx-state-as-selected(lumx-base-const("state", "FOCUS"), $theme);
-    }
-}
-
-@mixin lumx-button($emphasis, $variant, $size, $color, $theme: null, $icon-position: null) {
-    @include lumx-state-transition;
-    @include lumx-button-base;
-    @include lumx-button-size($emphasis, $variant, $size);
-
-    @if $icon-position {
-        @include lumx-button-reduced-spacing($size, $icon-position);
-    }
-
-    @include lumx-button-color($emphasis, $color, $theme);
-
-    & > i {
-        @include lumx-button-icon($variant, $size, $icon-position);
-    }
-
-    & > span {
-        @include lumx-button-text($size);
-    }
-}
-
-@mixin lumx-button-icon($variant, $size, $position: null) {
-    width: map.get($lumx-button-icon-sizes, $size);
-    height: map.get($lumx-button-icon-sizes, $size);
-    font-size: map.get($lumx-button-icon-sizes, $size);
-    line-height: map.get($lumx-button-icon-sizes, $size);
-    pointer-events: none;
-
-    @if $variant == "button" {
-        @if $position == lumx-base-const("position", "LEFT") {
-            @if $size == lumx-base-const("size", "M") {
-                margin-right: $lumx-spacing-unit;
-            } @else if $size == lumx-base-const("size", "S") {
-                margin-right: math.div($lumx-spacing-unit, 2);
-            }
-        } @else if $position == lumx-base-const("position", "RIGHT") {
-            @if $size == lumx-base-const("size", "M") {
-                margin-left: $lumx-spacing-unit;
-            } @else if $size == lumx-base-const("size", "S") {
-                margin-left: math.div($lumx-spacing-unit, 2);
-            }
-        }
-    }
-}
-
-@mixin lumx-button-text($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);
-    text-transform: var(--lumx-material-button-text-transform);
-    pointer-events: none;
-
-    @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/src/scss/components/button/_variables.scss

@@ -1,6 +0,0 @@
-@use "sass:map";
-
-$lumx-button-icon-sizes: (
-    "m": map.get($lumx-sizes, lumx-base-const("size", "XS")),
-    "s": map.get($lumx-sizes, lumx-base-const("size", "XXS")),
-);