@lumx/core 3.0.7 → 3.1.0

package/src/scss/components/slider/_index.scss

@@ -0,0 +1,209 @@
+@use "sass:map";
+@use "sass:math";
+
+/* ==========================================================================
+   Slider
+   ========================================================================== */
+
+.#{$lumx-base-prefix}-slider {
+    $self: &;
+
+    user-select: none;
+
+    &__helper {
+        margin-top: math.div($lumx-spacing-unit, 2);
+    }
+
+    &__value-label {
+        font-size: 10px;
+
+        #{$self}--theme-light & {
+            color: lumx-color-variant("dark", "L2");
+        }
+
+        #{$self}--theme-dark & {
+            color: lumx-color-variant("light", "L2");
+        }
+
+        &--min {
+            padding-right: $lumx-spacing-unit * 2;
+        }
+
+        &--max {
+            padding-left: $lumx-spacing-unit * 2;
+        }
+    }
+
+    &__ui-wrapper {
+        display: flex;
+        align-items: center;
+
+        #{$self}--has-label & {
+            margin-top: $lumx-spacing-unit;
+        }
+    }
+
+    &__wrapper {
+        position: relative;
+        flex: 1 1 auto;
+        height: map.get($lumx-sizes, lumx-base-const("size", "S"));
+        cursor: pointer;
+    }
+
+    &__track {
+        position: absolute;
+        top: 50%;
+        right: 0;
+        left: 0;
+        height: 2px;
+        transform: translateY(-50%);
+
+        &--background {
+            #{$self}--theme-light & {
+                background-color: lumx-color-variant("dark", "L5");
+            }
+
+            #{$self}--theme-dark & {
+                background-color: lumx-color-variant("light", "L5");
+            }
+        }
+
+        &--active {
+            #{$self}--theme-light & {
+                background-color: lumx-color-variant("primary", "N");
+            }
+
+            #{$self}--theme-dark & {
+                background-color: lumx-color-variant("light", "N");
+            }
+        }
+    }
+
+    &__handle {
+        position: absolute;
+        top: 50%;
+        width: 12px;
+        height: 12px;
+        padding: 0;
+        margin: 0;
+        text-decoration: none;
+        cursor: pointer;
+        user-select: none;
+        border: none;
+        border-radius: 50%;
+        outline: none;
+        transform: translateX(-50%) translateY(-50%);
+
+        #{$self}--theme-light & {
+            @include lumx-state(
+                lumx-base-const("state", "DEFAULT"),
+                lumx-base-const("emphasis", "HIGH"),
+                "primary",
+                lumx-base-const("theme", "LIGHT")
+            );
+        }
+
+        #{$self}--theme-dark & {
+            @include lumx-state(
+                lumx-base-const("state", "DEFAULT"),
+                lumx-base-const("emphasis", "HIGH"),
+                "primary",
+                lumx-base-const("theme", "DARK")
+            );
+        }
+    }
+
+    &__ticks {
+        position: absolute;
+        top: math.div(map.get($lumx-sizes, s), 2) + 2;
+        right: 0;
+        left: 0;
+    }
+
+    &__tick {
+        position: absolute;
+        top: 0;
+        width: 2px;
+        height: 4px;
+        transform: translateX(-50%);
+
+        &:first-child,
+        &:last-child {
+            display: none;
+        }
+
+        #{$self}--theme-light & {
+            background-color: lumx-color-variant("dark", "L5");
+        }
+
+        #{$self}--theme-dark & {
+            background-color: lumx-color-variant("light", "L5");
+        }
+    }
+}
+
+/* Handle states
+   ========================================================================== */
+
+// Hover state
+.#{$lumx-base-prefix}-slider__handle:hover {
+    .#{$lumx-base-prefix}-slider--theme-light & {
+        @include lumx-state(
+            lumx-base-const("state", "HOVER"),
+            lumx-base-const("emphasis", "HIGH"),
+            "primary",
+            lumx-base-const("theme", "LIGHT")
+        );
+    }
+
+    .#{$lumx-base-prefix}-slider--theme-dark & {
+        @include lumx-state(
+            lumx-base-const("state", "HOVER"),
+            lumx-base-const("emphasis", "HIGH"),
+            "primary",
+            lumx-base-const("theme", "DARK")
+        );
+    }
+}
+
+// Active state
+.#{$lumx-base-prefix}-slider__handle:active {
+    .#{$lumx-base-prefix}-slider--theme-light & {
+        @include lumx-state(
+            lumx-base-const("state", "ACTIVE"),
+            lumx-base-const("emphasis", "HIGH"),
+            "primary",
+            lumx-base-const("theme", "LIGHT")
+        );
+    }
+
+    .#{$lumx-base-prefix}-slider--theme-dark & {
+        @include lumx-state(
+            lumx-base-const("state", "ACTIVE"),
+            lumx-base-const("emphasis", "HIGH"),
+            "primary",
+            lumx-base-const("theme", "DARK")
+        );
+    }
+}
+
+// Focus state
+.#{$lumx-base-prefix}-slider__handle[data-focus-visible-added] {
+    .#{$lumx-base-prefix}-slider--theme-light & {
+        @include lumx-state(
+            lumx-base-const("state", "FOCUS"),
+            lumx-base-const("emphasis", "HIGH"),
+            "primary",
+            lumx-base-const("theme", "LIGHT")
+        );
+    }
+
+    .#{$lumx-base-prefix}-slider--theme-dark & {
+        @include lumx-state(
+            lumx-base-const("state", "FOCUS"),
+            lumx-base-const("emphasis", "HIGH"),
+            "primary",
+            lumx-base-const("theme", "DARK")
+        );
+    }
+}

package/src/scss/components/slideshow/_index.scss

@@ -0,0 +1,171 @@
+@use "sass:math";
+
+/* ==========================================================================
+   Slideshow
+   ========================================================================== */
+
+.#{$lumx-base-prefix}-slideshow {
+    $self: &;
+
+    outline: none;
+
+    &--fill-height {
+        display: flex;
+        flex: 1 1 auto;
+        flex-direction: column;
+        min-height: 0;
+    }
+
+    &__slides {
+        overflow: hidden;
+
+        #{$self}--fill-height & {
+            display: flex;
+            flex: 1 1 auto;
+            flex-direction: column;
+        }
+    }
+
+    &__wrapper {
+        display: flex;
+        transition: transform $lumx-slideshow-transition-duration;
+
+        @media (prefers-reduced-motion: reduce) {
+            transition: none;
+        }
+
+        #{$self}--fill-height & {
+            flex: 1 1 auto;
+            min-height: 0;
+        }
+    }
+
+    &__controls {
+        margin-top: $lumx-spacing-unit * 2;
+
+        #{$self}--fill-height & {
+            flex-shrink: 0;
+        }
+    }
+}
+
+/* Slideshow item group
+   ========================================================================== */
+
+.#{$lumx-base-prefix}-slideshow-item-group {
+    display: flex;
+    overflow: hidden;
+    max-width: 100%;
+    flex: 0 0 100%;
+}
+
+/* Slideshow item
+   ========================================================================== */
+
+.#{$lumx-base-prefix}-slideshow-item {
+    .#{$lumx-base-prefix}-slideshow--fill-height & {
+        display: flex;
+    }
+}
+
+
+@for $i from 1 through 12 {
+    .#{$lumx-base-prefix}-slideshow--group-by-#{$i} .#{$lumx-base-prefix}-slideshow-item {
+        flex: 0 0 #{math.div(100, $i) + "%"};
+        max-width: #{math.div(100, $i) + "%"};
+        overflow: hidden;
+    }
+}
+/* Slideshow controls
+   ========================================================================== */
+
+.#{$lumx-base-prefix}-slideshow-controls {
+    $self: &;
+
+    display: flex;
+    align-items: center;
+    justify-content: center;
+
+    &__pagination {
+        align-items: center;
+        max-width: 60px;
+        margin: 0 math.div($lumx-spacing-unit, 2);
+        overflow: hidden;
+    }
+
+    &__pagination-items {
+        display: flex;
+        align-items: center;
+        padding: 4px 0;
+        transition: transform $lumx-slideshow-transition-duration;
+
+        @media (prefers-reduced-motion: reduce) {
+            transition: none;
+        }
+    }
+
+    &__pagination-item {
+        $item: &;
+
+        flex-shrink: 0;
+        width: 8px;
+        height: 8px;
+        padding: 0;
+        margin: 0;
+        margin: 0 2px;
+        text-decoration: none;
+        cursor: pointer;
+        user-select: none;
+        border: none;
+        border-radius: 50%;
+        outline: none;
+        transition: transform $lumx-slideshow-transition-duration;
+        transform: scale(1);
+
+        @media (prefers-reduced-motion: reduce) {
+            transition: none;
+        }
+
+        #{$self}--theme-light & {
+            background-color: lumx-color-variant("dark", "L4");
+
+            &[data-focus-visible-added] {
+                @include lumx-state(lumx-base-const("state", "FOCUS"), lumx-base-const("emphasis", "LOW"), "dark");
+            }
+
+            &:hover,
+            &--is-active {
+                background-color: lumx-color-variant("primary", "N");
+
+                &[data-focus-visible-added] {
+                    @include lumx-state(lumx-base-const("state", "FOCUS"), lumx-base-const("emphasis", "LOW"), "primary");
+                }
+            }
+        }
+
+        #{$self}--theme-dark & {
+            background-color: lumx-color-variant("light", "L4");
+
+            &[data-focus-visible-added] {
+                @include lumx-state(lumx-base-const("state", "FOCUS"), lumx-base-const("emphasis", "LOW"), "light");
+            }
+
+            &:hover,
+            &--is-active {
+                background-color: lumx-color-variant("light", "N");
+
+                &[data-focus-visible-added] {
+                    @include lumx-state(lumx-base-const("state", "FOCUS"), lumx-base-const("emphasis", "LOW"), "light");
+                }
+            }
+        }
+
+        #{$self}--has-infinite-pagination &--is-on-edge {
+            transform: scale(0.5);
+        }
+
+        #{$self}--has-infinite-pagination &--is-out-range {
+            transform: scale(0);
+        }
+    }
+}

package/src/scss/components/slideshow/_variables.scss

@@ -0,0 +1 @@
+$lumx-slideshow-transition-duration: 500ms;

package/src/scss/components/switch/_index.scss

@@ -0,0 +1,257 @@
+@use "sass:math";
+
+/* ==========================================================================
+   Switch
+   ========================================================================== */
+
+.#{$lumx-base-prefix}-switch {
+    $self: &;
+
+    display: flex;
+
+    &--position-right {
+        flex-direction: row-reverse;
+    }
+
+    &__input-wrapper {
+        @include lumx-switch-input-wrapper;
+
+        flex-shrink: 0;
+    }
+
+    &__input-native {
+        @include lumx-switch-input-native;
+    }
+
+    &__input-placeholder {
+        @include lumx-switch-placeholder;
+    }
+
+    &__input-background {
+        #{$self}--is-unchecked & {
+            @include lumx-switch-input-background("unchecked");
+        }
+
+        #{$self}--is-checked & {
+            @include lumx-switch-input-background("checked");
+        }
+
+        #{$self}--theme-light#{$self}--is-unchecked & {
+            @include lumx-state(lumx-base-const("state", "DEFAULT"), lumx-base-const("emphasis", "LOW"), "dark");
+        }
+
+        #{$self}--theme-dark#{$self}--is-unchecked & {
+            @include lumx-state(lumx-base-const("state", "DEFAULT"), lumx-base-const("emphasis", "LOW"), "light");
+        }
+
+        #{$self}--theme-light#{$self}--is-checked & {
+            @include lumx-state(
+                lumx-base-const("state", "DEFAULT"),
+                lumx-base-const("emphasis", "HIGH"),
+                "primary",
+                lumx-base-const("theme", "LIGHT")
+            );
+        }
+
+        #{$self}--theme-dark#{$self}--is-checked & {
+            @include lumx-state(
+                lumx-base-const("state", "DEFAULT"),
+                lumx-base-const("emphasis", "HIGH"),
+                "primary",
+                lumx-base-const("theme", "DARK")
+            );
+        }
+    }
+
+    &__input-indicator {
+        #{$self}--theme-light#{$self}--is-unchecked & {
+            @include lumx-switch-input-indicator("unchecked", lumx-base-const("theme", "LIGHT"));
+        }
+
+        #{$self}--theme-dark#{$self}--is-unchecked & {
+            @include lumx-switch-input-indicator("unchecked", lumx-base-const("theme", "DARK"));
+        }
+
+        #{$self}--theme-light#{$self}--is-checked & {
+            @include lumx-switch-input-indicator("checked", lumx-base-const("theme", "LIGHT"));
+        }
+
+        #{$self}--theme-dark#{$self}--is-checked & {
+            @include lumx-switch-input-indicator("checked", lumx-base-const("theme", "DARK"));
+        }
+    }
+
+    &__content {
+        #{$self}--position-left & {
+            flex: 0 1 auto;
+        }
+
+        #{$self}--position-right & {
+            flex: 1 1 auto;
+        }
+    }
+
+    &__label,
+    &__helper {
+        #{$self}--position-left & {
+            padding-left: $lumx-spacing-unit;
+        }
+
+        #{$self}--position-right & {
+            padding-right: $lumx-spacing-unit;
+        }
+    }
+
+    &__helper {
+        margin-top: math.div($lumx-spacing-unit, 2);
+    }
+}
+
+/* Switch states
+   ========================================================================== */
+
+// Disabled state
+.#{$lumx-base-prefix}-switch--is-disabled {
+    .#{$lumx-base-prefix}-switch__input-native {
+        pointer-events: none;
+    }
+
+    .#{$lumx-base-prefix}-switch__input-placeholder {
+        @include lumx-state-disabled-input;
+    }
+
+    &.#{$lumx-base-prefix}-switch--theme-light {
+        .#{$lumx-base-prefix}-switch__label,
+        .#{$lumx-base-prefix}-switch__helper {
+            @include lumx-state-disabled-text(lumx-base-const("theme", "LIGHT"));
+        }
+    }
+
+    &.#{$lumx-base-prefix}-switch--theme-dark {
+        .#{$lumx-base-prefix}-switch__label,
+        .#{$lumx-base-prefix}-switch__helper {
+            @include lumx-state-disabled-text(lumx-base-const("theme", "DARK"));
+        }
+    }
+}
+
+// Hover state
+.#{$lumx-base-prefix}-switch--theme-light.#{$lumx-base-prefix}-switch--is-unchecked
+.#{$lumx-base-prefix}-switch__input-native:hover
++ .#{$lumx-base-prefix}-switch__input-placeholder {
+    .#{$lumx-base-prefix}-switch__input-background {
+        @include lumx-state(lumx-base-const("state", "HOVER"), lumx-base-const("emphasis", "LOW"), "dark");
+    }
+}
+
+.#{$lumx-base-prefix}-switch--theme-dark.#{$lumx-base-prefix}-switch--is-unchecked
+.#{$lumx-base-prefix}-switch__input-native:hover
++ .#{$lumx-base-prefix}-switch__input-placeholder {
+    .#{$lumx-base-prefix}-switch__input-background {
+        @include lumx-state(lumx-base-const("state", "HOVER"), lumx-base-const("emphasis", "LOW"), "light");
+    }
+}
+
+.#{$lumx-base-prefix}-switch--theme-light.#{$lumx-base-prefix}-switch--is-checked
+.#{$lumx-base-prefix}-switch__input-native:hover
++ .#{$lumx-base-prefix}-switch__input-placeholder {
+    .#{$lumx-base-prefix}-switch__input-background {
+        @include lumx-state(
+            lumx-base-const("state", "HOVER"),
+            lumx-base-const("emphasis", "HIGH"),
+            "primary",
+            lumx-base-const("theme", "LIGHT")
+        );
+    }
+}
+
+.#{$lumx-base-prefix}-switch--theme-dark.#{$lumx-base-prefix}-switch--is-checked
+.#{$lumx-base-prefix}-switch__input-native:hover
++ .#{$lumx-base-prefix}-switch__input-placeholder {
+    .#{$lumx-base-prefix}-switch__input-background {
+        @include lumx-state(
+            lumx-base-const("state", "HOVER"),
+            lumx-base-const("emphasis", "HIGH"),
+            "primary",
+            lumx-base-const("theme", "DARK")
+        );
+    }
+}
+
+// Active state
+.#{$lumx-base-prefix}-switch--theme-light.#{$lumx-base-prefix}-switch--is-unchecked
+.#{$lumx-base-prefix}-switch__input-native:active
++ .#{$lumx-base-prefix}-switch__input-placeholder {
+    .#{$lumx-base-prefix}-switch__input-background {
+        @include lumx-state(lumx-base-const("state", "ACTIVE"), lumx-base-const("emphasis", "LOW"), "dark");
+    }
+}
+
+.#{$lumx-base-prefix}-switch--theme-dark.#{$lumx-base-prefix}-switch--is-unchecked
+.#{$lumx-base-prefix}-switch__input-native:active
++ .#{$lumx-base-prefix}-switch__input-placeholder {
+    .#{$lumx-base-prefix}-switch__input-background {
+        @include lumx-state(lumx-base-const("state", "ACTIVE"), lumx-base-const("emphasis", "LOW"), "light");
+    }
+}
+
+.#{$lumx-base-prefix}-switch--theme-light.#{$lumx-base-prefix}-switch--is-checked
+.#{$lumx-base-prefix}-switch__input-native:active
++ .#{$lumx-base-prefix}-switch__input-placeholder {
+    .#{$lumx-base-prefix}-switch__input-background {
+        @include lumx-state(
+            lumx-base-const("state", "ACTIVE"),
+            lumx-base-const("emphasis", "HIGH"),
+            "primary",
+            lumx-base-const("theme", "LIGHT")
+        );
+    }
+}
+
+.#{$lumx-base-prefix}-switch--theme-dark.#{$lumx-base-prefix}-switch--is-checked
+.#{$lumx-base-prefix}-switch__input-native:active
++ .#{$lumx-base-prefix}-switch__input-placeholder {
+    .#{$lumx-base-prefix}-switch__input-background {
+        @include lumx-state(
+            lumx-base-const("state", "ACTIVE"),
+            lumx-base-const("emphasis", "HIGH"),
+            "primary",
+            lumx-base-const("theme", "DARK")
+        );
+    }
+}
+
+// Focus state
+.#{$lumx-base-prefix}-switch--theme-light.#{$lumx-base-prefix}-switch--is-unchecked
+.#{$lumx-base-prefix}-switch__input-native[data-focus-visible-added]
++ .#{$lumx-base-prefix}-switch__input-placeholder {
+    @include lumx-state(lumx-base-const("state", "FOCUS"), lumx-base-const("emphasis", "LOW"), "dark");
+}
+
+.#{$lumx-base-prefix}-switch--theme-dark.#{$lumx-base-prefix}-switch--is-unchecked
+.#{$lumx-base-prefix}-switch__input-native[data-focus-visible-added]
++ .#{$lumx-base-prefix}-switch__input-placeholder {
+    @include lumx-state(lumx-base-const("state", "FOCUS"), lumx-base-const("emphasis", "LOW"), "light");
+}
+
+.#{$lumx-base-prefix}-switch--theme-light.#{$lumx-base-prefix}-switch--is-checked
+.#{$lumx-base-prefix}-switch__input-native[data-focus-visible-added]
++ .#{$lumx-base-prefix}-switch__input-placeholder {
+    @include lumx-state(
+        lumx-base-const("state", "FOCUS"),
+        lumx-base-const("emphasis", "HIGH"),
+        "primary",
+        lumx-base-const("theme", "LIGHT")
+    );
+}
+
+.#{$lumx-base-prefix}-switch--theme-dark.#{$lumx-base-prefix}-switch--is-checked
+.#{$lumx-base-prefix}-switch__input-native[data-focus-visible-added]
++ .#{$lumx-base-prefix}-switch__input-placeholder {
+    @include lumx-state(
+        lumx-base-const("state", "FOCUS"),
+        lumx-base-const("emphasis", "HIGH"),
+        "primary",
+        lumx-base-const("theme", "DARK")
+    );
+}