lumen-plus 0.0.3 → 0.0.5

package/dist/theme-chalk/checkbox.scss

@@ -0,0 +1,127 @@
+@use './variables' as *;
+@use './mixins/bem' as *;
+@use './mixins/function' as *;
+
+@include b(checkbox) {
+    display: inline-flex;
+    align-items: center;
+    cursor: pointer;
+    user-select: none;
+    font-size: $font-size-base;
+    line-height: 1.5;
+
+    @include m(small) {
+        font-size: $font-size-small;
+        
+        .#{$namespace}-checkbox__inner {
+            width: 14px;
+            height: 14px;
+
+            svg {
+                width: 10px;
+                height: 10px;
+            }
+        }
+    }
+
+    @include m(medium) {
+        .#{$namespace}-checkbox__inner {
+            width: 16px;
+            height: 16px;
+
+            svg {
+                width: 12px;
+                height: 12px;
+            }
+        }
+    }
+
+    @include m(large) {
+        font-size: $font-size-large;
+        
+        .#{$namespace}-checkbox__inner {
+            width: 18px;
+            height: 18px;
+
+            svg {
+                width: 14px;
+                height: 14px;
+            }
+        }
+    }
+
+    @include when(checked) {
+        .#{$namespace}-checkbox__inner {
+            background-color: $color-primary;
+            border-color: $color-primary;
+        }
+    }
+
+    @include when(disabled) {
+        cursor: not-allowed;
+        opacity: 0.5;
+    }
+
+    @include when(indeterminate) {
+        .#{$namespace}-checkbox__inner {
+            background-color: $color-primary;
+            border-color: $color-primary;
+        }
+    }
+
+    @include e(input) {
+        position: relative;
+        display: inline-flex;
+        align-items: center;
+        flex-shrink: 0;
+    }
+
+    @include e(original) {
+        position: absolute;
+        opacity: 0;
+        width: 0;
+        height: 0;
+        margin: 0;
+    }
+
+    @include e(inner) {
+        display: inline-flex;
+        align-items: center;
+        justify-content: center;
+        border: 1px solid $border-color-base;
+        border-radius: 4px;
+        background-color: $bg-color;
+        transition: border-color 0.2s, background-color 0.2s;
+        color: #fff;
+
+        &:hover {
+            border-color: $color-primary;
+        }
+    }
+
+    @include e(label) {
+        margin-left: 8px;
+        color: $color-text-primary;
+    }
+}
+
+.dark {
+    .#{$namespace}-checkbox {
+        .#{$namespace}-checkbox__inner {
+            background-color: $bg-color-dark-light;
+            border-color: color-mix(in oklab, $bg-color-dark-lighter 70%, $color-text-dark-secondary);
+        }
+
+        &.is-checked,
+        &.is-indeterminate {
+            .#{$namespace}-checkbox__inner {
+                background-color: $color-primary;
+                border-color: $color-primary;
+            }
+        }
+
+        .#{$namespace}-checkbox__label {
+            color: $color-text-dark;
+        }
+    }
+}

package/dist/theme-chalk/collapse.scss

@@ -0,0 +1,100 @@
+@use './variables' as *;
+@use './mixins/bem' as *;
+
+@include b('collapse') {
+    border: 1px solid $border-color-lighter;
+    border-radius: $border-radius-base;
+    overflow: hidden;
+}
+
+@include b('collapse-item') {
+    &:not(:last-child) {
+        border-bottom: 1px solid $border-color-lighter;
+    }
+
+    @include when('disabled') {
+        .#{$namespace}-collapse-item__header {
+            color: $color-text-disabled;
+            cursor: not-allowed;
+        }
+    }
+
+    @include e('header') {
+        display: flex;
+        align-items: center;
+        justify-content: space-between;
+        padding: $spacing-base $spacing-large;
+        cursor: pointer;
+        background: $bg-color;
+        transition: background $transition-duration-fast;
+        outline: none;
+
+        &:focus-visible {
+            outline: 2px solid $color-primary;
+            outline-offset: -2px;
+        }
+    }
+
+    @include e('title') {
+        font-size: $font-size-base;
+        font-weight: $font-weight-primary;
+        color: $color-text-primary;
+    }
+
+    @include e('arrow') {
+        color: $color-text-secondary;
+        transition: transform $transition-duration;
+        display: flex;
+        align-items: center;
+
+        &.is-active {
+            transform: rotate(90deg);
+        }
+    }
+
+    @include e('wrap') {
+        overflow: hidden;
+        height: 0;
+        transition: height $transition-duration;
+        will-change: height;
+
+        @media (prefers-reduced-motion: reduce) {
+            transition: none;
+        }
+    }
+
+    @include e('content') {
+        padding: $spacing-base $spacing-large;
+        color: $color-text-regular;
+        background: $bg-color;
+    }
+}
+
+.dark {
+    .#{$namespace}-collapse {
+        border-color: $bg-color-dark-lighter;
+    }
+
+    .#{$namespace}-collapse-item {
+        &:not(:last-child) {
+            border-bottom-color: $bg-color-dark-lighter;
+        }
+
+        .#{$namespace}-collapse-item__header {
+            background: $bg-color-dark-light;
+        }
+
+        .#{$namespace}-collapse-item__title {
+            color: $color-text-dark;
+        }
+
+        .#{$namespace}-collapse-item__arrow {
+            color: $color-text-dark-secondary;
+        }
+
+        .#{$namespace}-collapse-item__content {
+            background: $bg-color-dark-light;
+            color: $color-text-dark-secondary;
+        }
+    }
+}

package/dist/theme-chalk/color-picker.scss

@@ -0,0 +1,247 @@
+@use './variables' as *;
+@use './mixins/bem' as *;
+
+@include b('color-picker') {
+    position: relative;
+    display: inline-block;
+
+    @include m('small') {
+        .#{$namespace}-color-picker__trigger {
+            width: 28px;
+            height: 28px;
+        }
+
+        .#{$namespace}-color-picker__color {
+            width: 18px;
+            height: 18px;
+        }
+    }
+
+    @include m('default') {
+        .#{$namespace}-color-picker__trigger {
+            width: 36px;
+            height: 36px;
+        }
+
+        .#{$namespace}-color-picker__color {
+            width: 24px;
+            height: 24px;
+        }
+    }
+
+    @include m('large') {
+        .#{$namespace}-color-picker__trigger {
+            width: 44px;
+            height: 44px;
+        }
+
+        .#{$namespace}-color-picker__color {
+            width: 32px;
+            height: 32px;
+        }
+    }
+
+    @include when('disabled') {
+        .#{$namespace}-color-picker__trigger {
+            cursor: not-allowed;
+            opacity: 0.6;
+        }
+    }
+
+    @include e('trigger') {
+        display: flex;
+        align-items: center;
+        justify-content: center;
+        border: 1px solid $border-color-base;
+        border-radius: $border-radius-base;
+        background: $bg-color;
+        cursor: pointer;
+        transition: border-color $transition-duration-fast;
+
+        &:hover {
+            border-color: #c0c4cc;
+        }
+
+        &.is-focus {
+            border-color: $color-primary;
+        }
+    }
+
+    @include e('color') {
+        border-radius: $border-radius-small;
+        box-shadow: inset 0 0 0 1px rgba(0, 0, 0, 0.1);
+    }
+
+    @include e('icon') {
+        display: none;
+    }
+
+    @include e('dropdown') {
+        position: absolute;
+        top: 100%;
+        left: 0;
+        margin-top: 8px;
+        padding: 12px;
+        background: $bg-color;
+        border: 1px solid $border-color-lighter;
+        border-radius: $border-radius-base;
+        box-shadow: $box-shadow-light;
+        z-index: $z-index-popper;
+        transform-origin: top left;
+    }
+
+    @include e('panel') {
+        width: 200px;
+    }
+
+    @include e('input') {
+        width: 100%;
+        height: 150px;
+        border: none;
+        cursor: pointer;
+    }
+
+    @include e('predefine') {
+        display: flex;
+        flex-wrap: wrap;
+        gap: 6px;
+        margin-top: 12px;
+        padding-top: 12px;
+        border-top: 1px solid $border-color-lighter;
+    }
+
+    @include e('predefine-color') {
+        width: 20px;
+        height: 20px;
+        border-radius: $border-radius-small;
+        cursor: pointer;
+        box-shadow: inset 0 0 0 1px rgba(0, 0, 0, 0.1);
+        transition: transform $transition-duration-fast;
+
+        &:hover {
+            transform: scale(1.1);
+        }
+
+        &.is-active {
+            box-shadow: 0 0 0 2px $color-primary;
+        }
+    }
+
+    @include e('hex') {
+        flex: 1;
+        min-width: 0;
+        height: 28px;
+        padding: 0 8px;
+        border: 1px solid $border-color-base;
+        border-radius: $border-radius-base;
+        font-size: $font-size-small;
+        text-align: center;
+        outline: none;
+
+        &:focus {
+            border-color: $color-primary;
+        }
+    }
+
+    @include e('footer') {
+        display: flex;
+        align-items: center;
+        gap: 8px;
+        margin-top: 12px;
+        padding-top: 12px;
+        border-top: 1px solid $border-color-lighter;
+    }
+
+    @include e('btn') {
+        height: 28px;
+        padding: 0 12px;
+        border: 1px solid $border-color-base;
+        border-radius: $border-radius-base;
+        background: $bg-color;
+        color: $color-text-primary;
+        font-size: $font-size-small;
+        cursor: pointer;
+        transition: background-color $transition-duration-fast, border-color $transition-duration-fast, color $transition-duration-fast;
+
+        &:hover {
+            border-color: $color-primary-light;
+            color: $color-primary;
+        }
+
+        &--cancel {
+            border-color: transparent;
+            background: transparent;
+
+            &:hover {
+                border-color: transparent;
+                background: transparent;
+                color: $color-primary;
+            }
+        }
+
+        &--confirm {
+            background: $color-primary;
+            border-color: $color-primary;
+            color: #fff;
+
+            &:hover {
+                background: $color-primary-light;
+                border-color: $color-primary-light;
+                color: #fff;
+            }
+        }
+    }
+}
+
+.dark {
+    .#{$namespace}-color-picker {
+        .#{$namespace}-color-picker__trigger {
+            background: $bg-color-dark-light;
+            border-color: $bg-color-dark-lighter;
+
+            &:hover {
+                border-color: color-mix(in oklab, $bg-color-dark-lighter 60%, $color-text-dark);
+            }
+
+            &.is-focus {
+                border-color: $color-primary;
+            }
+        }
+
+        .#{$namespace}-color-picker__dropdown {
+            background: $bg-color-dark-light;
+            border-color: $bg-color-dark-lighter;
+            box-shadow: $box-shadow-dark;
+        }
+
+        .#{$namespace}-color-picker__predefine,
+        .#{$namespace}-color-picker__footer {
+            border-top-color: $bg-color-dark-lighter;
+        }
+
+        .#{$namespace}-color-picker__hex {
+            background: $bg-color-dark-light;
+            border-color: $bg-color-dark-lighter;
+            color: $color-text-dark;
+
+            &:focus {
+                border-color: $color-primary;
+            }
+        }
+
+        .#{$namespace}-color-picker__btn {
+            background: $bg-color-dark-light;
+            border-color: $bg-color-dark-lighter;
+            color: $color-text-dark;
+
+            &:hover {
+                border-color: rgba($color-text-dark, 0.35);
+                color: $color-primary;
+            }
+
+            &--cancel {
+                color: $color-text-dark-secondary;
+            }
+        }
+    }
+}

package/dist/theme-chalk/container.scss

@@ -0,0 +1,79 @@
+@use './variables' as *;
+@use './mixins/bem' as *;
+
+@include b('container') {
+    display: flex;
+    flex-direction: column;
+    flex: 1;
+    flex-basis: 0;
+    min-width: 0;
+
+    @include when('horizontal') {
+        flex-direction: row;
+        flex-wrap: nowrap;
+    }
+
+    /* 顶级容器（未被其他容器嵌套） */
+    &:not(.lm-container .lm-container) {
+        min-height: 100vh;
+    }
+}
+
+@include b('header') {
+    display: flex;
+    align-items: center;
+    justify-content: flex-end;
+    gap: 16px;
+    background-color: $bg-color;
+    color: $color-text;
+    // padding: 0 20px;
+    height: 60px;
+    border-bottom: $border-width $border-style $border-color-light;
+}
+
+@include b('footer') {
+    background-color: $bg-color;
+    color: $color-text;
+    text-align: center;
+    padding: $spacing-base;
+    margin-top: auto;
+}
+
+@include b('aside') {
+    background-color: $bg-color;
+    color: $color-text;
+    text-align: left;
+    padding: $spacing-base;
+    border-right: $border-width $border-style $border-color-light;
+}
+
+@include b('main') {
+    color: $color-text;
+    padding: $spacing-base;
+    flex: 1;
+    min-width: 0;
+    overflow: hidden;
+}
+
+.dark {
+    .#{$namespace}-header,
+    .#{$namespace}-footer {
+        background-color: $bg-color-dark-light;
+        color: $color-text-dark;
+    }
+
+    .#{$namespace}-header {
+        border-bottom-color: $bg-color-dark-overlay;
+    }
+
+    .#{$namespace}-aside {
+        background-color: $bg-color-dark-light;
+        color: $color-text-dark;
+        border-right-color: $bg-color-dark-overlay;
+    }
+
+    .#{$namespace}-main {
+        background-color: $bg-color-dark-light;
+        color: $color-text-dark;
+    }
+}