lumen-plus 0.0.2 → 0.0.4

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;
+    }
+}

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

@@ -0,0 +1,352 @@
+@use './variables' as *;
+@use './mixins/bem' as *;
+
+@include b('date-picker') {
+    position: relative;
+    display: inline-block;
+    width: 220px;
+
+    @include m('small') {
+        .#{$namespace}-date-picker__trigger {
+            height: 28px;
+        }
+
+        .#{$namespace}-date-picker__input {
+            font-size: $font-size-small;
+        }
+    }
+
+    @include m('default') {
+        .#{$namespace}-date-picker__trigger {
+            height: 32px;
+        }
+
+        .#{$namespace}-date-picker__input {
+            font-size: $font-size-base;
+        }
+    }
+
+    @include m('large') {
+        .#{$namespace}-date-picker__trigger {
+            height: 40px;
+        }
+
+        .#{$namespace}-date-picker__input {
+            font-size: $font-size-medium;
+        }
+    }
+
+    @include when('disabled') {
+        .#{$namespace}-date-picker__trigger {
+            background: $bg-color-page;
+            cursor: not-allowed;
+        }
+
+        .#{$namespace}-date-picker__input {
+            color: $color-text-disabled;
+            cursor: not-allowed;
+        }
+    }
+
+    @include e('trigger') {
+        display: flex;
+        align-items: center;
+        width: 100%;
+        padding: 0 12px;
+        border: 1px solid $border-color-base;
+        border-radius: $border-radius-base;
+        background: $bg-color;
+        cursor: pointer;
+        transition: border-color $transition-duration-fast;
+        font-family: inherit;
+        font-size: inherit;
+        outline: none;
+
+        &:hover:not(:disabled):not(.is-focus) {
+            border-color: #c0c4cc;
+        }
+
+        &.is-focus {
+            border-color: $color-primary;
+        }
+
+        &:disabled {
+            background: $bg-color-page;
+            cursor: not-allowed;
+        }
+    }
+
+    @include e('prefix') {
+        color: $color-text-secondary;
+        margin-right: 8px;
+    }
+
+    @include e('input') {
+        flex: 1;
+        text-align: left;
+        color: $color-text-primary;
+
+        &.is-placeholder {
+            color: $color-text-placeholder;
+        }
+    }
+
+    @include e('clear') {
+        color: $color-text-secondary;
+        cursor: pointer;
+        display: flex;
+        align-items: center;
+
+        &:hover {
+            color: $color-text-primary;
+        }
+    }
+
+    @include e('dropdown') {
+        position: absolute;
+        top: 100%;
+        left: 50%;
+        margin-top: 12px;
+        // Arrow variables
+        --l-date-picker-bg: #{$bg-color};
+        --l-date-picker-border: #{$border-color-lighter};
+        --arrow-size: 10px;
+
+        padding: 12px;
+        background: var(--l-date-picker-bg);
+        border: 1px solid var(--l-date-picker-border);
+        border-radius: $border-radius-base;
+        box-shadow: $box-shadow-light;
+        z-index: $z-index-popper;
+        width: 280px;
+        overflow: visible;
+        transform: translateX(-50%);
+        transform-origin: top;
+    }
+
+    @include e('menu-arrow') {
+        position: absolute;
+        width: var(--arrow-size);
+        height: var(--arrow-size);
+        z-index: -1;
+        pointer-events: none;
+
+        top: calc(-1 * (var(--arrow-size) * 0.55) + 1px);
+        left: 50%;
+        margin-left: calc(-1 * (var(--arrow-size) / 2));
+
+        &::before {
+            content: '';
+            position: absolute;
+            inset: 0;
+            width: 100%;
+            height: 100%;
+            background: var(--l-date-picker-bg);
+            transform: rotate(45deg);
+            border-radius: calc(var(--arrow-size) * 0.2);
+            box-shadow: -1px -1px 0 0 var(--l-date-picker-border);
+        }
+    }
+
+    @include e('header') {
+        display: flex;
+        align-items: center;
+        justify-content: space-between;
+        margin-bottom: 12px;
+    }
+
+    @include e('body') {
+        display: block;
+    }
+
+    @include e('nav') {
+        display: flex;
+        align-items: center;
+        justify-content: center;
+        width: 28px;
+        height: 28px;
+        border: none;
+        border-radius: $border-radius-base;
+        background: transparent;
+        color: $color-text-secondary;
+        cursor: pointer;
+        transition: background-color $transition-duration-fast, color $transition-duration-fast;
+
+        &:hover {
+            background: $bg-color-page;
+            color: $color-primary;
+        }
+    }
+
+    @include e('nav-group') {
+        display: inline-flex;
+        align-items: center;
+        gap: 2px;
+    }
+
+    @include e('title') {
+        flex: 1;
+        text-align: center;
+        font-size: $font-size-base;
+        font-weight: $font-weight-primary;
+        color: $color-text-primary;
+    }
+
+    @include e('week') {
+        display: grid;
+        grid-template-columns: repeat(7, 1fr);
+        margin-bottom: 8px;
+    }
+
+    @include e('week-day') {
+        text-align: center;
+        font-size: $font-size-small;
+        color: $color-text-secondary;
+        padding: 4px 0;
+    }
+
+    @include e('days') {
+        display: grid;
+        grid-template-columns: repeat(7, 1fr);
+        gap: 4px;
+    }
+
+    @include e('day') {
+        display: flex;
+        align-items: center;
+        justify-content: center;
+        width: 32px;
+        height: 32px;
+        border: none;
+        border-radius: $border-radius-base;
+        background: transparent;
+        font-size: $font-size-base;
+        color: $color-text-primary;
+        cursor: pointer;
+        transition: background-color $transition-duration-fast, color $transition-duration-fast;
+
+        &:hover:not(:disabled) {
+            background: $bg-color-page;
+        }
+
+        &.is-other-month {
+            color: $color-text-placeholder;
+        }
+
+        &.is-today {
+            color: $color-primary;
+            font-weight: $font-weight-primary;
+        }
+
+        &.is-selected {
+            background: $color-primary;
+            color: #fff;
+
+            &:hover {
+                background: $color-primary-light;
+            }
+        }
+
+        &.is-disabled {
+            color: $color-text-disabled;
+            cursor: not-allowed;
+        }
+    }
+}
+
+.dark {
+    .#{$namespace}-date-picker {
+        .#{$namespace}-date-picker__trigger {
+            background: $bg-color-dark-light;
+            border-color: color-mix(in oklab, #{$bg-color-dark-lighter} 78%, #{$color-text-dark});
+
+            &:hover:not(:disabled):not(.is-focus) {
+                border-color: color-mix(in oklab, #{$bg-color-dark-lighter} 60%, #{$color-text-dark});
+            }
+
+            &.is-focus {
+                border-color: $color-primary;
+            }
+        }
+
+        @include when('disabled') {
+            .#{$namespace}-date-picker__trigger {
+                background: $bg-color-dark-lighter;
+            }
+
+            .#{$namespace}-date-picker__input {
+                color: $color-text-dark-secondary;
+            }
+        }
+
+        .#{$namespace}-date-picker__prefix,
+        .#{$namespace}-date-picker__clear {
+            color: $color-text-dark-secondary;
+        }
+
+        .#{$namespace}-date-picker__clear:hover {
+            color: $color-text-dark;
+        }
+
+        .#{$namespace}-date-picker__input {
+            color: $color-text-dark;
+
+            &.is-placeholder {
+                color: $color-text-dark-secondary;
+            }
+        }
+
+        .#{$namespace}-date-picker__dropdown {
+            --l-date-picker-bg: #{$bg-color-dark-light};
+            --l-date-picker-border: color-mix(in oklab, #{$bg-color-dark-lighter} 74%, #{$color-text-dark});
+            box-shadow: $box-shadow-dark;
+        }
+
+        .#{$namespace}-date-picker__nav {
+            color: $color-text-dark-secondary;
+
+            &:hover {
+                background: $bg-color-dark-lighter;
+                color: $color-text-dark;
+            }
+        }
+
+        .#{$namespace}-date-picker__title {
+            color: $color-text-dark;
+        }
+
+        .#{$namespace}-date-picker__week-day {
+            color: $color-text-dark-secondary;
+        }
+
+        .#{$namespace}-date-picker__day {
+            color: $color-text-dark;
+
+            &:hover:not(:disabled) {
+                background: $bg-color-dark-lighter;
+            }
+
+            &.is-other-month {
+                color: $color-text-dark-secondary;
+            }
+
+            &.is-today {
+                color: $color-primary;
+            }
+
+            &.is-selected {
+                background: $color-primary;
+                color: #fff;
+
+                &:hover {
+                    background: $color-primary-light;
+                }
+            }
+
+            &:disabled,
+            &.is-disabled {
+                color: rgba($color-text-dark, 0.35);
+            }
+        }
+    }
+}