lumen-plus 0.0.3 → 0.0.5

package/dist/theme-chalk/tabs.scss

@@ -0,0 +1,433 @@
+@use './variables' as *;
+@use './mixins/bem' as *;
+
+@include b('tabs') {
+    @include e('close') {
+        display: inline-flex;
+        align-items: center;
+        justify-content: center;
+        width: 14px;
+        height: 14px;
+        padding: 0;
+        margin-left: 4px;
+        border: none;
+        border-radius: 3px;
+        background: transparent;
+        color: inherit;
+        cursor: pointer;
+        opacity: 0.8;
+        line-height: 1;
+
+        &:hover { opacity: 1; background: transparent; }
+    }
+
+    @include e('header') {
+        display: flex;
+        align-items: stretch;
+        position: relative;
+        margin-bottom: 16px;
+        border-bottom: 1px solid $border-color-light;
+    }
+
+    @include e('nav') {
+        display: flex;
+        flex-wrap: nowrap;
+        overflow-x: auto;
+        overflow-y: hidden;
+        scrollbar-width: none;
+        gap: 32px;
+        font-weight: 500;
+        position: relative;
+        align-items: center;
+        flex: 1;
+        min-width: 0;
+
+        &::-webkit-scrollbar { display: none; }
+    }
+
+    @include e('scroll-btn') {
+        flex-shrink: 0;
+        width: 28px;
+        padding: 0;
+        border: none;
+        background: $bg-color;
+        color: $color-text-secondary;
+        display: inline-flex;
+        align-items: center;
+        justify-content: center;
+        cursor: pointer;
+        z-index: 2;
+
+        &:disabled {
+            cursor: not-allowed;
+            opacity: 0.4;
+        }
+
+        &:not(:disabled):hover { color: $color-text; }
+
+        &--prev {
+            border-right: 1px solid $border-color-light;
+        }
+
+        &--next {
+            border-left: 1px solid $border-color-light;
+        }
+    }
+
+    @include e('item') {
+        position: relative;
+        padding: 12px 0;
+        color: rgba(0, 0, 0, 0.65);
+        cursor: pointer;
+        user-select: none;
+        font-size: 14px;
+        display: inline-flex;
+        align-items: center;
+        flex: 0 0 auto;
+        white-space: nowrap;
+        transition: background-color .2s, color .2s, border-color .2s;
+
+        &.is-closable {
+            justify-content: center;
+        }
+
+        &:hover:not(.is-disabled):not(.is-active) {
+            color: $color-primary;
+        }
+
+        &.is-disabled {
+            color: rgba(0, 0, 0, 0.25);
+            cursor: not-allowed;
+        }
+
+        &.is-active {
+            color: $color-primary;
+        }
+    }
+
+    // moving indicator
+    @include e('indicator') {
+        position: absolute;
+        left: 0;
+        bottom: -1px;
+        height: 2px;
+        background: $color-primary;
+        transform: translateX(0);
+        transition: transform .25s ease, width .25s ease;
+        will-change: transform, width;
+    }
+
+    @include e('content') {
+        min-height: 20px;
+        font-size: 14px;
+    }
+
+    @include e('add') {
+        display: flex;
+        align-items: center;
+        justify-content: center;
+        padding: 8px 12px;
+        border: 1px solid #e8e8e8;
+        border-bottom: none;
+        border-radius: 6px 6px 0 0;
+        background-color: #fff;
+        color: rgba(0, 0, 0, 0.65);
+        cursor: pointer;
+        font-size: 14px;
+        line-height: 1.2;
+        transition: background-color .2s, color .2s, border-color .2s;
+        min-width: 36px;
+        flex-shrink: 0;
+        position: relative;
+        z-index: 1;
+
+        &:hover {
+            color: $color-primary;
+        }
+    }
+
+    // Button type modifier
+    @include m('button') {
+        .#{$namespace}-tabs__nav {
+            gap: 0;
+            border-bottom: none;
+            border: 1px solid #e8e8e8;
+            border-radius: 6px;
+            overflow: hidden;
+            width: fit-content;
+        }
+
+        .#{$namespace}-tabs__item {
+            padding: 8px 20px;
+            border: none;
+            border-radius: 0;
+            background-color: transparent;
+            color: rgba(0, 0, 0, 0.65);
+            font-size: 14px;
+            transition: background-color .2s, color .2s;
+
+            &.is-active {
+                background-color: $color-primary;
+                color: #fff;
+            }
+
+            &:hover:not(.is-active):not(.is-disabled) {
+                color: $color-primary;
+            }
+
+            // use left border as separator for button tabs (skip first)
+            &:not(:first-child) {
+                border-left: 1px solid rgba(0, 0, 0, 0.06);
+                padding-left: 18px; // visually offset from separator
+            }
+        }
+
+        // ensure add button doesn't show a left separator
+        .#{$namespace}-tabs__add {
+            border-left: none;
+        }
+
+        .#{$namespace}-tabs__indicator { display: none; }
+    }
+
+    // Card type modifier
+    @include m('card') {
+        .#{$namespace}-tabs__header {
+            border-bottom: none;
+
+            &::after {
+                content: '';
+                position: absolute;
+                left: 0;
+                right: 0;
+                bottom: 0;
+                height: 1px;
+                background-color: #e8e8e8;
+                z-index: 0;
+            }
+        }
+
+        .#{$namespace}-tabs__nav {
+            gap: 4px;
+        }
+
+        .#{$namespace}-tabs__item {
+            padding: 8px 16px;
+            justify-content: center;
+            border: 1px solid #e8e8e8;
+            border-radius: 6px 6px 0 0;
+            background-color: #fafafa;
+            color: rgba(0, 0, 0, 0.65);
+            font-size: 14px;
+            transition: background-color .2s, color .2s, border-color .2s;
+            margin-right: 2px;
+            position: relative;
+            z-index: 1;
+
+            &.is-active {
+                background-color: #fff;
+                border-color: $color-primary;
+                color: $color-primary;
+                border-bottom-color: #fff;
+            }
+
+            &:hover:not(.is-active):not(.is-disabled) {
+                color: $color-primary;
+            }
+
+            .#{$namespace}-tabs__close {
+                margin: 0 -4px 0 4px;
+            }
+        }
+
+        .#{$namespace}-tabs__scroll-btn {
+            background: #fff;
+            position: relative;
+            z-index: 1;
+        }
+
+        .#{$namespace}-tabs__indicator { display: none; }
+    }
+
+    // Editable type modifier
+    @include m('editable') {
+        .#{$namespace}-tabs__header {
+            border-bottom: none;
+
+            &::after {
+                content: '';
+                position: absolute;
+                left: 0;
+                right: 0;
+                bottom: 0;
+                height: 1px;
+                background-color: #e8e8e8;
+                z-index: 0;
+            }
+        }
+
+        .#{$namespace}-tabs__nav {
+            gap: 4px;
+        }
+
+        .#{$namespace}-tabs__item {
+            padding: 8px 16px;
+            border: 1px solid #e8e8e8;
+            border-radius: 6px 6px 0 0;
+            background-color: #fafafa;
+            color: rgba(0, 0, 0, 0.65);
+            font-size: 14px;
+            line-height: 1.2;
+            display: flex;
+            align-items: center;
+            gap: 4px;
+            justify-content: center;
+            transition: background-color .2s, color .2s, border-color .2s;
+            margin-right: 2px;
+            position: relative;
+            z-index: 1;
+
+            &.is-active {
+                background-color: #fff;
+                border-color: #e8e8e8;
+                border-bottom-color: #fff;
+                color: $color-primary;
+            }
+
+            &:hover:not(.is-disabled) {
+                color: $color-primary;
+            }
+
+            .#{$namespace}-tabs__close {
+                color: rgba(0, 0, 0, 0.45);
+                transition: opacity .2s, color .2s;
+                margin: 0 -4px 0 4px;
+
+                &:hover {
+                    background: transparent;
+                    color: rgba(0, 0, 0, 0.85);
+                }
+            }
+        }
+
+        .#{$namespace}-tabs__scroll-btn {
+            background: #fff;
+            position: relative;
+            z-index: 1;
+        }
+
+        .#{$namespace}-tabs__indicator { display: none; }
+    }
+}
+
+@include b('tabs') {
+    @include e('label') {
+        display: inline-flex;
+        align-items: center;
+        line-height: 1.2;
+        white-space: nowrap;
+    }
+}
+
+@include b('tab-pane') {
+    display: none;
+
+    &.is-active {
+        display: block;
+    }
+}
+
+.dark {
+    .#{$namespace}-tabs {
+        .#{$namespace}-tabs__header {
+            border-bottom-color: $bg-color-dark-lighter;
+        }
+
+        .#{$namespace}-tabs__scroll-btn {
+            background: $bg-color-dark-light;
+            color: $color-text-dark-secondary;
+
+            &:not(:disabled):hover {
+                color: $color-text-dark;
+            }
+
+            &--prev {
+                border-right-color: $bg-color-dark-lighter;
+            }
+
+            &--next {
+                border-left-color: $bg-color-dark-lighter;
+            }
+        }
+
+        .#{$namespace}-tabs__item {
+            color: $color-text-dark;
+
+            &.is-disabled {
+                color: rgba($color-text-dark, 0.25);
+            }
+
+            &.is-active {
+                color: $color-primary;
+            }
+        }
+
+        .#{$namespace}-tabs__add {
+            background-color: $bg-color-dark-light;
+            border-color: color-mix(in oklab, #{$bg-color-dark-lighter} 72%, #{$color-text-dark});
+            color: $color-text-dark-secondary;
+        }
+
+        &.#{$namespace}-tabs--button {
+            .#{$namespace}-tabs__nav {
+                border-color: $bg-color-dark-lighter;
+            }
+
+            .#{$namespace}-tabs__item {
+                color: $color-text-dark;
+
+                &.is-active {
+                    color: #fff;
+                }
+
+                &:not(:first-child) {
+                    border-left-color: rgba($color-text-dark, 0.12);
+                }
+            }
+        }
+
+        &.#{$namespace}-tabs--card,
+        &.#{$namespace}-tabs--editable {
+            .#{$namespace}-tabs__header::after {
+                background-color: $bg-color-dark-lighter;
+            }
+
+            .#{$namespace}-tabs__item {
+                border-color: color-mix(in oklab, #{$bg-color-dark-lighter} 72%, #{$color-text-dark});
+                background-color: $bg-color-dark-lighter;
+                color: $color-text-dark;
+
+                &.is-active {
+                    background-color: $bg-color-dark-light;
+                    border-color: $color-primary;
+                    border-bottom-color: $bg-color-dark-light;
+                    color: $color-primary;
+                }
+            }
+
+            .#{$namespace}-tabs__scroll-btn {
+                background: $bg-color-dark-light;
+            }
+        }
+
+        &.#{$namespace}-tabs--editable {
+            .#{$namespace}-tabs__item .#{$namespace}-tabs__close {
+                color: rgba($color-text-dark, 0.55);
+
+                &:hover {
+                    color: rgba($color-text-dark, 0.95);
+                }
+            }
+        }
+    }
+}

package/dist/theme-chalk/tag.scss

@@ -0,0 +1,143 @@
+@use './variables' as *;
+@use './mixins/bem' as *;
+
+@include b('tag') {
+    display: inline-flex;
+    align-items: center;
+    gap: 6px;
+    padding: 0 8px;
+    border-radius: $border-radius-base;
+    line-height: 22px;
+    font-size: $font-size-small;
+    color: $color-text-regular;
+    background-color: $bg-color-page;
+    border: 1px solid transparent;
+
+    @include m('small') {
+        line-height: 20px;
+        font-size: $font-size-extra-small;
+        padding: 0 6px;
+
+        &.is-closable {
+            gap: 3px;
+        }
+    }
+
+    @include m('medium') {
+        line-height: 22px;
+        font-size: $font-size-small;
+    }
+
+    @include m('large') {
+        line-height: 28px;
+        font-size: $font-size-base;
+        padding: 0 10px;
+
+        &.is-closable {
+            gap: 5px;
+            padding-right: 6px;
+        }
+    }
+
+    &.is-closable {
+        gap: 4px;
+        padding-right: 4px;
+    }
+
+    @include when('round') {
+        border-radius: 999px;
+    }
+
+    @include e('close') {
+        display: inline-flex;
+        align-items: center;
+        justify-content: center;
+        width: 14px;
+        height: 14px;
+        border-radius: 50%;
+        color: inherit;
+        opacity: 0.8;
+        background: transparent;
+        border: none;
+        cursor: pointer;
+
+        &:hover {
+            opacity: 1;
+        }
+
+        svg { width: 10px; height: 10px; }
+    }
+
+    @include m('default') {
+        background-color: $bg-color-page;
+        color: $color-text-regular;
+        border-color: color-mix(in oklab, $color-text-placeholder 10%, transparent);
+    }
+
+    @include m('primary') {
+        background-color: color-mix(in oklab, #fff 92%, $color-primary);
+        color: $color-primary;
+        border-color: color-mix(in oklab, #fff 80%, $color-primary);
+    }
+
+    @include m('success') {
+        background-color: color-mix(in oklab, #fff 92%, $color-success);
+        color: $color-success;
+        border-color: color-mix(in oklab, #fff 80%, $color-success);
+    }
+
+    @include m('warning') {
+        background-color: color-mix(in oklab, #fff 92%, $color-warning);
+        color: $color-warning;
+        border-color: color-mix(in oklab, #fff 80%, $color-warning);
+    }
+
+    @include m('danger') {
+        background-color: color-mix(in oklab, #fff 92%, $color-danger);
+        color: $color-danger;
+        border-color: color-mix(in oklab, #fff 80%, $color-danger);
+    }
+
+    @include m('info') {
+        background-color: color-mix(in oklab, #fff 92%, $color-info);
+        color: $color-info;
+        border-color: color-mix(in oklab, #fff 80%, $color-info);
+    }
+
+    @include when('hidden') { display: none; }
+}
+
+.dark {
+    .#{$namespace}-tag {
+        @include m('default') {
+            background-color: $bg-color-dark-lighter;
+            color: $color-text-dark-secondary;
+            border-color: color-mix(in oklab, #{$bg-color-dark-lighter} 74%, #{$color-text-dark});
+        }
+
+        @include m('primary') {
+            background-color: color-mix(in oklab, $bg-color-dark-light 88%, $color-primary);
+            border-color: color-mix(in oklab, $bg-color-dark-light 70%, $color-primary);
+        }
+
+        @include m('success') {
+            background-color: color-mix(in oklab, $bg-color-dark-light 88%, $color-success);
+            border-color: color-mix(in oklab, $bg-color-dark-light 70%, $color-success);
+        }
+
+        @include m('warning') {
+            background-color: color-mix(in oklab, $bg-color-dark-light 88%, $color-warning);
+            border-color: color-mix(in oklab, $bg-color-dark-light 70%, $color-warning);
+        }
+
+        @include m('danger') {
+            background-color: color-mix(in oklab, $bg-color-dark-light 88%, $color-danger);
+            border-color: color-mix(in oklab, $bg-color-dark-light 70%, $color-danger);
+        }
+
+        @include m('info') {
+            background-color: color-mix(in oklab, $bg-color-dark-light 88%, $color-info);
+            border-color: color-mix(in oklab, $bg-color-dark-light 70%, $color-info);
+        }
+    }
+}

package/dist/theme-chalk/textarea.scss

@@ -0,0 +1,125 @@
+@use './variables' as *;
+@use './mixins/bem' as *;
+
+@include b('textarea') {
+    position: relative;
+    display: inline-block;
+    width: 100%;
+
+    @include e('input') {
+        width: 100%;
+        padding: 8px 12px;
+        border: 1px solid $border-color-light;
+        border-radius: $border-radius-medium;
+        font-size: $font-size-base;
+        line-height: 1.5;
+        color: $color-text-primary;
+        background-color: #fff;
+        font-family: $font-family;
+        transition: border-color 0.2s ease, box-shadow 0.2s ease;
+        resize: vertical;
+
+        &:hover:not(:disabled):not([readonly]) {
+            border-color: #c0c4cc;
+        }
+
+        &:focus {
+            outline: none;
+            border-color: $color-primary;
+        }
+
+        &:disabled {
+            background-color: $bg-color-page;
+            color: $color-text-placeholder;
+            cursor: not-allowed;
+        }
+
+        &[readonly] {
+            background-color: $bg-color-page;
+            cursor: default;
+        }
+    }
+
+    @include e('clear') {
+        position: absolute;
+        top: 8px;
+        right: 8px;
+        width: 20px;
+        height: 20px;
+        padding: 0;
+        border: none;
+        background: transparent;
+        color: $color-text-placeholder;
+        cursor: pointer;
+        display: flex;
+        align-items: center;
+        justify-content: center;
+        opacity: 0.6;
+        transition: opacity 0.2s ease;
+
+        &:hover {
+            opacity: 1;
+        }
+
+        svg {
+            width: 16px;
+            height: 16px;
+        }
+    }
+
+    @include when('disabled') {
+        .#{$namespace}-textarea__input {
+            background-color: $bg-color-page;
+            color: $color-text-placeholder;
+        }
+    }
+
+    @include when('readonly') {
+        .#{$namespace}-textarea__input {
+            background-color: $bg-color-page;
+        }
+    }
+}
+
+.dark {
+    .#{$namespace}-textarea {
+        .#{$namespace}-textarea__input {
+            background-color: $bg-color-dark-light;
+            border-color: color-mix(in oklab, $bg-color-dark-lighter 70%, $color-text-dark-secondary);
+            color: $color-text-dark;
+
+            &::placeholder {
+                color: $color-text-dark-secondary;
+            }
+
+            &:hover:not(:disabled):not([readonly]):not(:focus) {
+                border-color: color-mix(in oklab, $bg-color-dark-lighter 55%, $color-text-dark-secondary);
+            }
+
+            &:focus {
+                border-color: $color-primary;
+            }
+
+            &:disabled {
+                background-color: $bg-color-dark-lighter;
+                color: rgba($color-text-dark, 0.35);
+                border-color: color-mix(in oklab, $bg-color-dark-lighter 85%, $color-text-dark-secondary);
+            }
+
+            &[readonly] {
+                background-color: $bg-color-dark-lighter;
+                border-color: color-mix(in oklab, $bg-color-dark-lighter 75%, $color-text-dark-secondary);
+            }
+        }
+
+        &.is-focused {
+            .#{$namespace}-textarea__input {
+                border-color: $color-primary;
+            }
+        }
+
+        .#{$namespace}-textarea__clear {
+            color: $color-text-dark-secondary;
+        }
+    }
+}