@lumx/core 3.1.0 → 3.1.2

package/src/scss/components/checkbox/_index.scss

@@ -1,231 +0,0 @@
-@use "sass:math";
-
-/* ==========================================================================
-   Checkbox
-   ========================================================================== */
-
-.#{$lumx-base-prefix}-checkbox {
-    $self: &;
-
-    display: flex;
-
-    &__input-wrapper {
-        @include lumx-checkbox-input-wrapper;
-    }
-
-    &__input-native {
-        @include lumx-checkbox-input-native;
-    }
-
-    &__input-placeholder {
-        @include lumx-checkbox-placeholder;
-    }
-
-    &__input-background {
-        @include lumx-checkbox-input-background;
-
-        #{$self}--theme-light & {
-            @include lumx-state(lumx-base-const("state", "DEFAULT"), lumx-base-const("emphasis", "LOW"), "dark");
-        }
-
-        #{$self}--theme-dark & {
-            @include lumx-state(lumx-base-const("state", "DEFAULT"), lumx-base-const("emphasis", "LOW"), "light");
-        }
-
-        #{$self}--is-unchecked & {
-            @include lumx-checkbox-input-background-status("unchecked");
-        }
-
-        #{$self}--is-checked & {
-            @include lumx-checkbox-input-background-status("checked");
-        }
-    }
-
-    &__input-indicator {
-        @include lumx-checkbox-input-indicator;
-
-        #{$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")
-            );
-        }
-
-        #{$self}--is-unchecked & {
-            @include lumx-checkbox-input-indicator-status("unchecked");
-        }
-
-        #{$self}--is-checked & {
-            @include lumx-checkbox-input-indicator-status("checked");
-        }
-    }
-
-    &__label,
-    &__helper {
-        padding-left: $lumx-spacing-unit;
-    }
-
-    &__helper {
-        margin-top: math.div($lumx-spacing-unit, 2);
-    }
-}
-
-/* Checkbox states
-   ========================================================================== */
-
-// Disabled state
-.#{$lumx-base-prefix}-checkbox--is-disabled {
-    .#{$lumx-base-prefix}-checkbox__input-native {
-        pointer-events: none;
-    }
-
-    .#{$lumx-base-prefix}-checkbox__input-placeholder {
-        @include lumx-state-disabled-input;
-    }
-
-    &.#{$lumx-base-prefix}-checkbox--theme-light {
-        .#{$lumx-base-prefix}-checkbox__label,
-        .#{$lumx-base-prefix}-checkbox__helper {
-            @include lumx-state-disabled-text(lumx-base-const("theme", "LIGHT"));
-        }
-    }
-
-    &.#{$lumx-base-prefix}-checkbox--theme-dark {
-        .#{$lumx-base-prefix}-checkbox__label,
-        .#{$lumx-base-prefix}-checkbox__helper {
-            @include lumx-state-disabled-text(lumx-base-const("theme", "DARK"));
-        }
-    }
-}
-
-// Hover state
-.#{$lumx-base-prefix}-checkbox--theme-light.#{$lumx-base-prefix}-checkbox--is-unchecked
-.#{$lumx-base-prefix}-checkbox__input-native:hover
-+ .#{$lumx-base-prefix}-checkbox__input-placeholder {
-    .#{$lumx-base-prefix}-checkbox__input-background {
-        @include lumx-state(lumx-base-const("state", "HOVER"), lumx-base-const("emphasis", "LOW"), "dark");
-    }
-}
-
-.#{$lumx-base-prefix}-checkbox--theme-dark.#{$lumx-base-prefix}-checkbox--is-unchecked
-.#{$lumx-base-prefix}-checkbox__input-native:hover
-+ .#{$lumx-base-prefix}-checkbox__input-placeholder {
-    .#{$lumx-base-prefix}-checkbox__input-background {
-        @include lumx-state(lumx-base-const("state", "HOVER"), lumx-base-const("emphasis", "LOW"), "light");
-    }
-}
-
-.#{$lumx-base-prefix}-checkbox--theme-light.#{$lumx-base-prefix}-checkbox--is-checked
-.#{$lumx-base-prefix}-checkbox__input-native:hover
-+ .#{$lumx-base-prefix}-checkbox__input-placeholder {
-    .#{$lumx-base-prefix}-checkbox__input-indicator {
-        @include lumx-state(
-            lumx-base-const("state", "HOVER"),
-            lumx-base-const("emphasis", "HIGH"),
-            "primary",
-            lumx-base-const("theme", "LIGHT")
-        );
-    }
-}
-
-.#{$lumx-base-prefix}-checkbox--theme-dark.#{$lumx-base-prefix}-checkbox--is-checked
-.#{$lumx-base-prefix}-checkbox__input-native:hover
-+ .#{$lumx-base-prefix}-checkbox__input-placeholder {
-    .#{$lumx-base-prefix}-checkbox__input-indicator {
-        @include lumx-state(
-            lumx-base-const("state", "HOVER"),
-            lumx-base-const("emphasis", "HIGH"),
-            "primary",
-            lumx-base-const("theme", "DARK")
-        );
-    }
-}
-
-// Active state
-.#{$lumx-base-prefix}-checkbox--theme-light.#{$lumx-base-prefix}-checkbox--is-unchecked
-.#{$lumx-base-prefix}-checkbox__input-native:active
-+ .#{$lumx-base-prefix}-checkbox__input-placeholder {
-    .#{$lumx-base-prefix}-checkbox__input-background {
-        @include lumx-state(lumx-base-const("state", "ACTIVE"), lumx-base-const("emphasis", "LOW"), "dark");
-    }
-}
-
-.#{$lumx-base-prefix}-checkbox--theme-dark.#{$lumx-base-prefix}-checkbox--is-unchecked
-.#{$lumx-base-prefix}-checkbox__input-native:active
-+ .#{$lumx-base-prefix}-checkbox__input-placeholder {
-    .#{$lumx-base-prefix}-checkbox__input-background {
-        @include lumx-state(lumx-base-const("state", "ACTIVE"), lumx-base-const("emphasis", "LOW"), "light");
-    }
-}
-
-.#{$lumx-base-prefix}-checkbox--theme-light.#{$lumx-base-prefix}-checkbox--is-checked
-.#{$lumx-base-prefix}-checkbox__input-native:active
-+ .#{$lumx-base-prefix}-checkbox__input-placeholder {
-    .#{$lumx-base-prefix}-checkbox__input-indicator {
-        @include lumx-state(
-            lumx-base-const("state", "ACTIVE"),
-            lumx-base-const("emphasis", "HIGH"),
-            "primary",
-            lumx-base-const("theme", "LIGHT")
-        );
-    }
-}
-
-.#{$lumx-base-prefix}-checkbox--theme-dark.#{$lumx-base-prefix}-checkbox--is-checked
-.#{$lumx-base-prefix}-checkbox__input-native:active
-+ .#{$lumx-base-prefix}-checkbox__input-placeholder {
-    .#{$lumx-base-prefix}-checkbox__input-indicator {
-        @include lumx-state(
-            lumx-base-const("state", "ACTIVE"),
-            lumx-base-const("emphasis", "HIGH"),
-            "primary",
-            lumx-base-const("theme", "DARK")
-        );
-    }
-}
-
-// Focus state
-.#{$lumx-base-prefix}-checkbox--theme-light.#{$lumx-base-prefix}-checkbox--is-unchecked
-.#{$lumx-base-prefix}-checkbox__input-native[data-focus-visible-added]
-+ .#{$lumx-base-prefix}-checkbox__input-placeholder {
-    @include lumx-state(lumx-base-const("state", "FOCUS"), lumx-base-const("emphasis", "LOW"), "dark");
-}
-
-.#{$lumx-base-prefix}-checkbox--theme-dark.#{$lumx-base-prefix}-checkbox--is-unchecked
-.#{$lumx-base-prefix}-checkbox__input-native[data-focus-visible-added]
-+ .#{$lumx-base-prefix}-checkbox__input-placeholder {
-    @include lumx-state(lumx-base-const("state", "FOCUS"), lumx-base-const("emphasis", "LOW"), "light");
-}
-
-.#{$lumx-base-prefix}-checkbox--theme-light.#{$lumx-base-prefix}-checkbox--is-checked
-.#{$lumx-base-prefix}-checkbox__input-native[data-focus-visible-added]
-+ .#{$lumx-base-prefix}-checkbox__input-placeholder {
-    @include lumx-state(
-        lumx-base-const("state", "FOCUS"),
-        lumx-base-const("emphasis", "HIGH"),
-        "primary",
-        lumx-base-const("theme", "LIGHT")
-    );
-}
-
-.#{$lumx-base-prefix}-checkbox--theme-dark.#{$lumx-base-prefix}-checkbox--is-checked
-.#{$lumx-base-prefix}-checkbox__input-native[data-focus-visible-added]
-+ .#{$lumx-base-prefix}-checkbox__input-placeholder {
-    @include lumx-state(
-        lumx-base-const("state", "FOCUS"),
-        lumx-base-const("emphasis", "HIGH"),
-        "primary",
-        lumx-base-const("theme", "DARK")
-    );
-}

package/src/scss/components/checkbox/_mixins.scss

@@ -1,69 +0,0 @@
-@mixin lumx-checkbox-input-wrapper() {
-    position: relative;
-    width: var(--lumx-material-checkbox-wrapper-size);
-    height: var(--lumx-material-checkbox-wrapper-size);
-}
-
-@mixin lumx-checkbox-input-native() {
-    position: relative;
-    top: 0;
-    left: 0;
-    z-index: 4;
-    width: var(--lumx-material-checkbox-wrapper-size);
-    height: var(--lumx-material-checkbox-wrapper-size);
-    padding: 0;
-    margin: 0;
-    opacity: 0;
-}
-
-@mixin lumx-checkbox-placeholder() {
-    position: absolute;
-    top: calc((var(--lumx-material-checkbox-wrapper-size) - var(--lumx-material-checkbox-control-size)) / 2);
-    left: calc((var(--lumx-material-checkbox-wrapper-size) - var(--lumx-material-checkbox-control-size)) / 2);
-    z-index: 1;
-    width: var(--lumx-material-checkbox-control-size);
-    height: var(--lumx-material-checkbox-control-size);
-    border-radius: 2px;
-}
-
-@mixin lumx-checkbox-input-background() {
-    position: absolute;
-    top: 0;
-    right: 0;
-    bottom: 0;
-    left: 0;
-    z-index: 2;
-    border-style: solid;
-    border-width: 2px;
-    border-radius: 2px;
-}
-
-@mixin lumx-checkbox-input-background-status($status) {
-    @if $status == "checked" {
-        opacity: 0;
-    } @else if $status == "unchecked" {
-        opacity: 1;
-    }
-}
-
-@mixin lumx-checkbox-input-indicator() {
-    position: absolute;
-    top: 0;
-    right: 0;
-    bottom: 0;
-    left: 0;
-    z-index: 3;
-    display: flex;
-    align-items: center;
-    justify-content: center;
-    font-size: var(--lumx-material-checkbox-control-size);
-    border-radius: 2px;
-}
-
-@mixin lumx-checkbox-input-indicator-status($status) {
-    @if $status == "checked" {
-        opacity: 1;
-    } @else if $status == "unchecked" {
-        opacity: 0;
-    }
-}

package/src/scss/components/chip/_index.scss

@@ -1,156 +0,0 @@
-/* ==========================================================================
-   Chip
-   ========================================================================== */
-
-.#{$lumx-base-prefix}-chip {
-    $self: &;
-
-    @include lumx-chip-base;
-
-    &__before {
-        @include lumx-chip-before;
-    }
-
-    &__label {
-        #{$self}--size-m & {
-            @include lumx-chip-label(lumx-base-const("size", "M"));
-        }
-
-        #{$self}--size-s & {
-            @include lumx-chip-label(lumx-base-const("size", "S"));
-        }
-    }
-
-    &__after {
-        @include lumx-chip-after;
-    }
-}
-
-/* Chip size
-   ========================================================================== */
-
-.#{$lumx-base-prefix}-chip--size-m {
-    @include lumx-chip-size(lumx-base-const("size", "M"));
-
-    padding: 0 var(--lumx-material-chip-size-m-padding-vertical);
-
-    &.#{$lumx-base-prefix}-chip--has-before {
-        padding-left: $lumx-spacing-unit * 1.5;
-    }
-
-    &.#{$lumx-base-prefix}-chip--has-after {
-        padding-right: $lumx-spacing-unit * 1.5;
-    }
-}
-
-.#{$lumx-base-prefix}-chip--size-s {
-    @include lumx-chip-size(lumx-base-const("size", "S"));
-
-    padding: 0 var(--lumx-material-chip-size-s-padding-vertical);
-
-    &.#{$lumx-base-prefix}-chip--has-before {
-        padding-left: $lumx-spacing-unit;
-    }
-
-    &.#{$lumx-base-prefix}-chip--has-after {
-        padding-right: $lumx-spacing-unit;
-    }
-}
-
-/* Chip states
-   ========================================================================== */
-
-.#{$lumx-base-prefix}-chip--is-clickable {
-    @include lumx-state-transition;
-
-    cursor: pointer;
-}
-
-@each $key, $color in $lumx-color-palette {
-    .#{$lumx-base-prefix}-chip--is-unselected.#{$lumx-base-prefix}-chip--color-#{$key} {
-        @include lumx-state(lumx-base-const("state", "DEFAULT"), lumx-base-const("emphasis", "MEDIUM"), $key);
-
-        &.#{$lumx-base-prefix}-chip--is-clickable:hover {
-            @include lumx-state(lumx-base-const("state", "HOVER"), lumx-base-const("emphasis", "MEDIUM"), $key);
-        }
-
-        &.#{$lumx-base-prefix}-chip--is-clickable:active {
-            @include lumx-state(lumx-base-const("state", "ACTIVE"), lumx-base-const("emphasis", "MEDIUM"), $key);
-        }
-
-        &.#{$lumx-base-prefix}-chip--is-clickable[data-focus-visible-added],
-        &.#{$lumx-base-prefix}-chip--is-highlighted {
-            @include lumx-state(lumx-base-const("state", "FOCUS"), lumx-base-const("emphasis", "MEDIUM"), $key);
-        }
-
-        @if $key == "dark" {
-            .#{$lumx-base-prefix}-chip__label {
-                color: lumx-color-variant("dark", "L1");
-            }
-        }
-    }
-}
-
-.#{$lumx-base-prefix}-chip--is-selected {
-    &.#{$lumx-base-prefix}-chip--color-dark {
-        @include lumx-state-as-selected(lumx-base-const("state", "DEFAULT"), lumx-base-const("theme", "LIGHT"));
-
-        &.#{$lumx-base-prefix}-chip--is-clickable:hover {
-            @include lumx-state-as-selected(lumx-base-const("state", "HOVER"), lumx-base-const("theme", "LIGHT"));
-        }
-
-        &.#{$lumx-base-prefix}-chip--is-clickable:active {
-            @include lumx-state-as-selected(lumx-base-const("state", "ACTIVE"), lumx-base-const("theme", "LIGHT"));
-        }
-
-        &.#{$lumx-base-prefix}-chip--is-clickable[data-focus-visible-added] {
-            @include lumx-state-as-selected(lumx-base-const("state", "FOCUS"), lumx-base-const("theme", "LIGHT"));
-        }
-    }
-
-    &.#{$lumx-base-prefix}-chip--color-light {
-        @include lumx-state-as-selected(lumx-base-const("state", "DEFAULT"), lumx-base-const("theme", "DARK"));
-
-        &.#{$lumx-base-prefix}-chip--is-clickable:hover {
-            @include lumx-state-as-selected(lumx-base-const("state", "HOVER"), lumx-base-const("theme", "DARK"));
-        }
-
-        &.#{$lumx-base-prefix}-chip--is-clickable:active {
-            @include lumx-state-as-selected(lumx-base-const("state", "ACTIVE"), lumx-base-const("theme", "DARK"));
-        }
-
-        &.#{$lumx-base-prefix}-chip--is-clickable[data-focus-visible-added] {
-            @include lumx-state-as-selected(lumx-base-const("state", "FOCUS"), lumx-base-const("theme", "DARK"));
-        }
-    }
-}
-
-.#{$lumx-base-prefix}-chip--is-disabled {
-    @include lumx-state-disabled-input;
-}
-
-/* Chip group
-   ========================================================================== */
-
-.#{$lumx-base-prefix}-chip-group {
-    display: flex;
-    flex-wrap: wrap;
-    margin: -$lumx-chip-group-spacing 0;
-
-    .#{$lumx-base-prefix}-chip {
-        margin: $lumx-chip-group-spacing 0;
-    }
-
-    &--align-left .#{$lumx-base-prefix}-chip {
-        margin-right: $lumx-chip-group-spacing * 2;
-    }
-
-    &--align-center .#{$lumx-base-prefix}-chip {
-        margin-right: $lumx-chip-group-spacing;
-        margin-left: $lumx-chip-group-spacing;
-    }
-
-    &--align-right .#{$lumx-base-prefix}-chip {
-        margin-left: $lumx-chip-group-spacing * 2;
-    }
-}

package/src/scss/components/chip/_mixins.scss

@@ -1,37 +0,0 @@
-@mixin lumx-chip-base() {
-    display: inline-flex;
-    align-items: center;
-    padding: 0;
-    margin: 0;
-    text-decoration: none;
-    vertical-align: top;
-    user-select: none;
-    border: none;
-    outline: none;
-}
-
-@mixin lumx-chip-size($size) {
-    height: var(--lumx-material-chip-size-#{$size}-height);
-    border-radius: var(--lumx-material-chip-size-#{$size}-border-radius);
-}
-
-@mixin lumx-chip-before() {
-    flex-shrink: 0;
-    margin-right: $lumx-spacing-unit;
-}
-
-@mixin lumx-chip-label($size) {
-    flex: 1 1 auto;
-    white-space: nowrap;
-
-    @if $size == lumx-base-const("size", "M") {
-        @include lumx-typography("body1");
-    } @else if $size == lumx-base-const("size", "S") {
-        @include lumx-typography("caption");
-    }
-}
-
-@mixin lumx-chip-after() {
-    flex-shrink: 0;
-    margin-left: $lumx-spacing-unit;
-}

package/src/scss/components/chip/_variables.scss

@@ -1 +0,0 @@
-$lumx-chip-group-spacing: 3px;

package/src/scss/components/comment-block/_index.scss

@@ -1,170 +0,0 @@
-@use "sass:map";
-
-/* ==========================================================================
-   Comment block
-   ========================================================================== */
-
-.#{$lumx-base-prefix}-comment-block {
-    $self: &;
-
-    position: relative;
-    margin-bottom: $lumx-spacing-unit * 2;
-
-    &:last-child {
-        margin-bottom: 0;
-    }
-
-    &--has-children#{$self}--has-indented-children &::before {
-        position: absolute;
-        top: 52px;
-        bottom: 0;
-        left: 16px;
-        width: 4px;
-        content: "";
-    }
-
-    &--has-children#{$self}--has-indented-children#{$self}--theme-light &::before {
-        background-color: lumx-color-variant("dark", "L5");
-    }
-
-    &--has-children#{$self}--has-indented-children#{$self}--theme-dark &::before {
-        background-color: lumx-color-variant("light", "L5");
-    }
-
-    &--has-children#{$self}--has-indented-children &:last-child::before {
-        display: none;
-    }
-
-    &__wrapper {
-        position: relative;
-        display: flex;
-        align-items: flex-start;
-
-        #{$self}--has-linear-children#{$self}--has-children &::before {
-            position: absolute;
-            top: 52px;
-            bottom: 0;
-            left: 16px;
-            width: 4px;
-            content: "";
-        }
-
-        #{$self}--has-linear-children#{$self}--has-children#{$self}--theme-light &::before {
-            background-color: lumx-color-variant("dark", "L5");
-        }
-
-        #{$self}--has-linear-children#{$self}--has-children#{$self}--theme-dark &::before {
-            background-color: lumx-color-variant("light", "L5");
-        }
-
-        #{$self}--has-linear-children #{$self}__children #{$self}:last-child &::before {
-            display: none;
-        }
-    }
-
-    &__avatar {
-        flex-shrink: 0;
-        margin-right: $lumx-spacing-unit * 2;
-    }
-
-    &__container {
-        flex: 1 1 auto;
-    }
-
-    &__content {
-        position: relative;
-        padding: $lumx-spacing-unit $lumx-spacing-unit * 1.5;
-        overflow: hidden;
-        border-radius: var(--lumx-border-radius);
-
-        #{$self}--theme-light > #{$self}__wrapper & {
-            background-color: lumx-color-variant("dark", "L6");
-        }
-
-        #{$self}--theme-dark > #{$self}__wrapper & {
-            background-color: lumx-color-variant("light", "L6");
-        }
-
-        #{$self}--is-relevant > #{$self}__wrapper &::before {
-            position: absolute;
-            top: 0;
-            bottom: 0;
-            left: 0;
-            width: 4px;
-            content: "";
-            background-color: lumx-color-variant("green", "N");
-        }
-    }
-
-    &__meta {
-        display: flex;
-        flex-wrap: wrap;
-    }
-
-    &__name {
-        @include lumx-typography("subtitle1");
-
-        margin-right: $lumx-spacing-unit;
-        outline: none;
-
-        #{$self}--theme-light > #{$self}__wrapper & {
-            color: lumx-color-variant("dark", "N");
-        }
-
-        #{$self}--theme-dark > #{$self}__wrapper & {
-            color: lumx-color-variant("light", "N");
-        }
-
-        &[tabindex="0"] {
-            #{$self}--theme-light > #{$self}__wrapper & {
-                @include lumx-link("dark");
-            }
-
-            #{$self}--theme-dark > #{$self}__wrapper & {
-                @include lumx-link("light");
-            }
-        }
-    }
-
-    &__date {
-        @include lumx-typography("body1");
-
-        #{$self}--theme-light > #{$self}__wrapper & {
-            color: lumx-color-variant("dark", "L2");
-        }
-
-        #{$self}--theme-dark > #{$self}__wrapper & {
-            color: lumx-color-variant("light", "L2");
-        }
-    }
-
-    &__header-actions {
-        margin-left: auto;
-    }
-
-    &__text {
-        @include lumx-typography("body1");
-
-        #{$self}--theme-light > #{$self}__wrapper & {
-            color: lumx-color-variant("dark", "N");
-        }
-
-        #{$self}--theme-dark > #{$self}__wrapper & {
-            color: lumx-color-variant("light", "N");
-        }
-
-        word-break: break-word;
-    }
-
-    &__actions {
-        margin-top: $lumx-spacing-unit;
-    }
-
-    &__children {
-        margin-top: $lumx-spacing-unit * 2;
-
-        #{$self}--has-indented-children & {
-            margin-left: map.get($lumx-sizes, lumx-base-const("size", "M")) + $lumx-spacing-unit * 2;
-        }
-    }
-}