@lumx/core 3.0.7 → 3.1.0

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

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

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

@@ -0,0 +1,156 @@
+/* ==========================================================================
+   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

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

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

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

@@ -0,0 +1,170 @@
+@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;
+        }
+    }
+}