@lumx/core 3.1.0 → 3.1.2

package/src/scss/components/select/_index.scss

@@ -1,295 +0,0 @@
-/* ==========================================================================
-   Select
-   ========================================================================== */
-
-.#{$lumx-base-prefix}-select {
-    $self: &;
-
-    --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-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 {
-        cursor: pointer;
-
-        #{$self}--theme-light & {
-            @include lumx-text-field-wrapper(lumx-base-const("theme", "LIGHT"));
-        }
-
-        #{$self}--theme-dark & {
-            @include lumx-text-field-wrapper(lumx-base-const("theme", "DARK"));
-        }
-    }
-
-    &__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")
-            );
-        }
-    }
-
-    &__chips {
-        @include lumx-text-field-chips;
-    }
-
-    &__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-input-placeholder-color(
-                    lumx-base-const("state", "DEFAULT"),
-                    lumx-base-const("theme", "LIGHT")
-                );
-            }
-
-            #{$self}--theme-dark & {
-                @include lumx-text-field-input-placeholder-color(
-                    lumx-base-const("state", "DEFAULT"),
-                    lumx-base-const("theme", "DARK")
-                );
-            }
-        }
-
-        span {
-            display: block;
-            margin: var(--lumx-text-field-wrapper-padding-vertical) 0;
-            word-break: break-word;
-        }
-    }
-
-    &__input-clear {
-        @include lumx-text-field-input-clear;
-    }
-
-    &__input-indicator {
-        #{$self}--theme-light & {
-            @include lumx-select-input-indicator(lumx-base-const("theme", "LIGHT"));
-        }
-
-        #{$self}--theme-dark & {
-            @include lumx-select-input-indicator(lumx-base-const("theme", "DARK"));
-        }
-    }
-
-    &__helper {
-        margin-top: $lumx-spacing-unit;
-    }
-
-    &__choices-filter {
-        @include lumx-select-choices-filter;
-
-        i {
-            @include lumx-text-field-input-icon(lumx-base-const("theme", "LIGHT"));
-        }
-
-        input {
-            @include lumx-text-field-input-native(lumx-base-const("theme", "LIGHT"));
-
-            &::placeholder {
-                color: lumx-color-variant("dark", "L2");
-            }
-        }
-    }
-
-    &__choices-loader {
-        @include lumx-select-choices-loader;
-    }
-
-    &__choices-helper {
-        @include lumx-select-choices-helper;
-    }
-}
-
-/* Select states
-   ========================================================================== */
-
-// Disabled state
-.#{$lumx-base-prefix}-select--is-disabled {
-    .#{$lumx-base-prefix}-select__wrapper {
-        @include lumx-state-disabled-input;
-    }
-
-    &.#{$lumx-base-prefix}-select--theme-light {
-        .#{$lumx-base-prefix}-select__label {
-            @include lumx-state-disabled-text(lumx-base-const("theme", "LIGHT"));
-        }
-    }
-
-    &.#{$lumx-base-prefix}-select--theme-dark {
-        .#{$lumx-base-prefix}-select__label {
-            @include lumx-state-disabled-text(lumx-base-const("theme", "DARK"));
-        }
-    }
-}
-
-// 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}-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}-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
-   ========================================================================== */
-
-.#{$lumx-base-prefix}-select--theme-light.#{$lumx-base-prefix}-select--is-valid {
-    .#{$lumx-base-prefix}-select__wrapper {
-        @include lumx-text-field-wrapper-validity("valid", lumx-base-const("theme", "LIGHT"));
-    }
-
-    .#{$lumx-base-prefix}-select__input-validity {
-        @include lumx-text-field-input-validity("valid", lumx-base-const("theme", "LIGHT"));
-    }
-}
-
-.#{$lumx-base-prefix}-select--theme-light.#{$lumx-base-prefix}-select--has-error {
-    .#{$lumx-base-prefix}-select__wrapper {
-        @include lumx-text-field-wrapper-validity("error", lumx-base-const("theme", "LIGHT"));
-    }
-
-    .#{$lumx-base-prefix}-select__input-validity {
-        @include lumx-text-field-input-validity("error", lumx-base-const("theme", "LIGHT"));
-    }
-}
-
-.#{$lumx-base-prefix}-select--theme-dark.#{$lumx-base-prefix}-select--is-valid {
-    .#{$lumx-base-prefix}-select__wrapper {
-        @include lumx-text-field-wrapper-validity("valid", lumx-base-const("theme", "DARK"));
-    }
-
-    .#{$lumx-base-prefix}-select__input-validity {
-        @include lumx-text-field-input-validity("valid", lumx-base-const("theme", "DARK"));
-    }
-}
-
-.#{$lumx-base-prefix}-select--theme-dark.#{$lumx-base-prefix}-select--has-error {
-    .#{$lumx-base-prefix}-select__wrapper {
-        @include lumx-text-field-wrapper-validity("error", lumx-base-const("theme", "DARK"));
-    }
-
-    .#{$lumx-base-prefix}-select__input-validity {
-        @include lumx-text-field-input-validity("error", lumx-base-const("theme", "DARK"));
-    }
-}

package/src/scss/components/select/_mixins.scss

@@ -1,36 +0,0 @@
-@use "sass:math";
-
-@mixin lumx-select-input-indicator($theme) {
-    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: math.div($lumx-spacing-unit, 2);
-
-    @if $theme == lumx-base-const("theme", "LIGHT") {
-        color: lumx-color-variant("dark", "N");
-    } @else if $theme == lumx-base-const("theme", "DARK") {
-        color: lumx-color-variant("light", "N");
-    }
-}
-
-@mixin lumx-select-choices-filter() {
-    @include lumx-has-divider(lumx-base-const("theme", "LIGHT"));
-
-    display: flex;
-    align-items: center;
-    padding: $lumx-spacing-unit $lumx-spacing-unit * 2;
-}
-
-@mixin lumx-select-choices-loader() {
-    display: flex;
-    justify-content: center;
-    padding: $lumx-spacing-unit * 2 0;
-}
-
-@mixin lumx-select-choices-helper() {
-    @include lumx-typography("body1");
-
-    display: flex;
-    justify-content: center;
-    padding: $lumx-spacing-unit * 2 0;
-    color: lumx-color-variant("dark", "L3");
-}

package/src/scss/components/side-navigation/_index.scss

@@ -1,69 +0,0 @@
-/* ==========================================================================
-   Side navigation
-   ========================================================================== */
-
-.#{$lumx-base-prefix}-side-navigation {
-    @include lumx-list;
-}
-
-/* Item
-   ========================================================================== */
-
-.#{$lumx-base-prefix}-side-navigation-item {
-    $self: &;
-
-    @include lumx-side-navigation-item;
-
-    &__wrapper {
-        @include lumx-side-navigation-wrapper;
-    }
-
-    &__link {
-        @include lumx-side-navigation-link;
-
-        & > i:first-child {
-            @include lumx-side-navigation-link-icon(lumx-base-const("position", "LEFT"));
-        }
-
-        & > i:last-child {
-            @include lumx-side-navigation-link-icon(lumx-base-const("position", "RIGHT"));
-        }
-
-        & > span {
-            #{$self}--emphasis-high & {
-                @include lumx-side-navigation-link-label(lumx-base-const("emphasis", "HIGH"));
-            }
-
-            #{$self}--emphasis-medium & {
-                @include lumx-side-navigation-link-label(lumx-base-const("emphasis", "MEDIUM"));
-            }
-
-            #{$self}--emphasis-low & {
-                @include lumx-side-navigation-link-label(lumx-base-const("emphasis", "LOW"));
-            }
-        }
-    }
-
-    &__toggle {
-        @include lumx-side-navigation-link-toggle;
-    }
-
-    &__children {
-        @include lumx-side-navigation-children;
-    }
-
-    &:not(#{$self}--is-open) #{$self}__children {
-        display: none;
-    }
-}
-
-/* Item link states
-   ========================================================================== */
-
-.#{$lumx-base-prefix}-side-navigation-item .#{$lumx-base-prefix}-side-navigation-item__link {
-    @include lumx-list-item-clickable;
-}
-
-.#{$lumx-base-prefix}-side-navigation-item--is-selected .#{$lumx-base-prefix}-side-navigation-item__link {
-    @include lumx-list-item-selected;
-}

package/src/scss/components/side-navigation/_mixins.scss

@@ -1,61 +0,0 @@
-@use "sass:map";
-
-/**
- * 1. https://github.com/philipwalton/flexbugs/blob/master/README.md#flexbug-3
- */
-
-@mixin lumx-side-navigation-item() {
-    display: flex; /* [1] */
-    flex-direction: column; /* [1] */
-}
-
-@mixin lumx-side-navigation-wrapper() {
-    display: flex;
-    flex-direction: row;
-    align-items: center;
-}
-
-@mixin lumx-side-navigation-link() {
-    display: flex;
-    flex: 1 1 auto;
-    flex-direction: row;
-    align-items: center;
-    min-height: map.get($lumx-sizes, lumx-base-const("size", "M"));
-    padding: 0 $lumx-spacing-unit;
-    text-decoration: none;
-    border-radius: var(--lumx-border-radius);
-    outline: none;
-}
-
-@mixin lumx-side-navigation-link-icon($position) {
-    flex-shrink: 0;
-
-    @if $position == lumx-base-const("position", "LEFT") {
-        margin-right: $lumx-spacing-unit * 2;
-    } @else if $position == lumx-base-const("position", "RIGHT") {
-        margin-left: $lumx-spacing-unit * 2;
-    }
-}
-
-@mixin lumx-side-navigation-link-label($emphasis) {
-    flex: 1 1 auto;
-
-    @if $emphasis == lumx-base-const("emphasis", "HIGH") {
-        @include lumx-typography("title");
-    } @else if $emphasis == lumx-base-const("emphasis", "MEDIUM") {
-        @include lumx-typography("subtitle1");
-    } @else if $emphasis == lumx-base-const("emphasis", "LOW") {
-        @include lumx-typography("body1");
-    }
-}
-
-@mixin lumx-side-navigation-link-toggle() {
-    flex-shrink: 0;
-    margin-left: $lumx-spacing-unit;
-}
-
-@mixin lumx-side-navigation-children() {
-    @include lumx-list;
-
-    margin-left: $lumx-spacing-unit * 4.5;
-}

package/src/scss/components/skeleton/_index.scss

@@ -1,143 +0,0 @@
-@use "sass:map";
-@use "sass:math";
-
-/* ==========================================================================
-   Skeleton
-   ========================================================================== */
-
-@keyframes skeleton-loading {
-    0% {
-        opacity: 1;
-    }
-
-    50% {
-        opacity: 0.5;
-    }
-
-    100% {
-        opacity: 1;
-    }
-}
-
-/* Circle
-   ========================================================================== */
-
-.#{$lumx-base-prefix}-skeleton-circle {
-    border-radius: 50%;
-
-    &--theme-light {
-        @include lumx-skeleton("light");
-    }
-
-    &--theme-dark {
-        @include lumx-skeleton("dark");
-    }
-}
-
-@each $key, $size in $lumx-sizes {
-    .#{$lumx-base-prefix}-skeleton-circle--size-#{$key} {
-        width: map.get($lumx-sizes, $key);
-        height: map.get($lumx-sizes, $key);
-    }
-}
-
-@each $key, $color in $lumx-color-palette {
-    .#{$lumx-base-prefix}-skeleton-circle--color-#{$key} {
-        background-color: lumx-color-variant($key, "L5");
-    }
-}
-
-/* Rectangle
-   ========================================================================== */
-
-.#{$lumx-base-prefix}-skeleton-rectangle {
-    &--variant-rounded {
-        border-radius: var(--lumx-border-radius);
-    }
-
-    &--theme-light {
-        @include lumx-skeleton("light");
-    }
-
-    &--theme-dark {
-        @include lumx-skeleton("dark");
-    }
-}
-
-@each $key, $size in $lumx-sizes {
-    .#{$lumx-base-prefix}-skeleton-rectangle--width-#{$key} {
-        width: map.get($lumx-sizes, $key);
-    }
-
-    .#{$lumx-base-prefix}-skeleton-rectangle--height-#{$key} {
-        height: map.get($lumx-sizes, $key);
-    }
-
-    .#{$lumx-base-prefix}-skeleton-rectangle--variant-pill.#{$lumx-base-prefix}-skeleton-rectangle--height-#{$key} {
-        border-radius: math.div(map.get($lumx-sizes, $key), 2);
-    }
-}
-
-@each $key, $aspect-ratio in $lumx-thumbnail-aspect-ratio {
-    .#{$lumx-base-prefix}-skeleton-rectangle--aspect-ratio-#{$key} .#{$lumx-base-prefix}-skeleton-rectangle__inner {
-        padding-top: $aspect-ratio;
-    }
-}
-
-@each $key, $color in $lumx-color-palette {
-    .#{$lumx-base-prefix}-skeleton-rectangle--color-#{$key} {
-        background-color: lumx-color-variant($key, "L5");
-    }
-}
-
-/* Typography
-   ========================================================================== */
-
-$typography-skeleton-size: (
-    "display1": 24px,
-    "headline": 20px,
-    "title": 14px,
-    "subtitle2": 12px,
-    "subtitle1": 10px,
-    "body2": 12px,
-    "body1": 10px,
-    "caption": 8px,
-    "overline": 8px,
-);
-
-.#{$lumx-base-prefix}-skeleton-typography {
-    $self: &;
-
-    display: flex;
-    align-items: center;
-
-    &__inner {
-        width: 100%;
-        border-radius: var(--lumx-border-radius);
-        animation: skeleton-loading 1s ease-in-out 0s infinite;
-
-        #{$self}--theme-light & {
-            background-color: lumx-color-variant("dark", "L5");
-        }
-
-        #{$self}--theme-dark & {
-            background-color: lumx-color-variant("light", "L5");
-        }
-    }
-}
-
-@each $key, $style in $lumx-typography-interface {
-    .#{$lumx-base-prefix}-skeleton-typography--typography-#{$key} {
-        height: map.get(map.get($lumx-typography-interface, $key), "line-height");
-    }
-
-    .#{$lumx-base-prefix}-skeleton-typography--typography-#{$key} .#{$lumx-base-prefix}-skeleton-typography__inner {
-        height: map.get($typography-skeleton-size, $key);
-    }
-}
-
-@each $key, $color in $lumx-color-palette {
-    .#{$lumx-base-prefix}-skeleton-typography--color-#{$key} .#{$lumx-base-prefix}-skeleton-typography__inner {
-        background-color: lumx-color-variant($key, "L5");
-    }
-}

package/src/scss/components/skeleton/_mixins.scss

@@ -1,9 +0,0 @@
-@mixin lumx-skeleton($theme: "light") {
-    animation: skeleton-loading 1s ease-in-out 0s infinite;
-
-    @if $theme == "light" {
-        background-color: lumx-color-variant("dark", "L5");
-    } @else {
-        background-color: lumx-color-variant("light", "L5");
-    }
-}