@lumx/core 3.0.7 → 3.1.0

package/src/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/src/scss/components/avatar/_index.scss

@@ -0,0 +1,42 @@
+@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

@@ -0,0 +1,47 @@
+@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

@@ -0,0 +1,166 @@
+@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

@@ -0,0 +1,271 @@
+@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

@@ -0,0 +1,6 @@
+@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")),
+);