lumen-plus 0.0.3 → 0.0.5

package/dist/theme-chalk/select.scss

@@ -0,0 +1,301 @@
+@use './variables' as *;
+@use './mixins/bem' as *;
+
+@include b('select') {
+    position: relative;
+    display: inline-block;
+    width: 220px;
+    max-width: 100%;
+    font-size: $font-size-base;
+
+    @include m('small') {
+        font-size: $font-size-small;
+        .#{$namespace}-select__trigger {
+            height: 28px;
+        }
+    }
+
+    @include m('default') {
+        font-size: $font-size-base;
+        .#{$namespace}-select__trigger {
+            height: 32px;
+        }
+    }
+
+    @include m('large') {
+        font-size: $font-size-medium;
+        .#{$namespace}-select__trigger {
+            height: 40px;
+        }
+    }
+
+    @include when('focus') {
+        .#{$namespace}-select__trigger {
+            border-color: $color-primary;
+        }
+    }
+
+    @include when('disabled') {
+        .#{$namespace}-select__trigger {
+            background: $bg-color-page;
+            cursor: not-allowed;
+            color: $color-text-disabled;
+        }
+    }
+
+    @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;
+        font-weight: inherit;
+        line-height: 1;
+        transition: border-color $transition-duration-fast;
+        outline: none;
+        text-align: left;
+
+        &:hover {
+            border-color: #c0c4cc;
+        }
+
+        &:focus {
+            border-color: $color-primary;
+        }
+
+        &[aria-disabled='true'] {
+            background: $bg-color-page;
+            cursor: not-allowed;
+            color: $color-text-disabled;
+
+            &:hover {
+                border-color: $border-color-base;
+            }
+        }
+    }
+
+    @include e('value') {
+        flex: 1;
+        overflow: hidden;
+        text-overflow: ellipsis;
+        white-space: nowrap;
+        color: $color-text-primary;
+
+        &.is-placeholder {
+            color: $color-text-placeholder;
+        }
+    }
+
+    @include e('input') {
+        flex: 1;
+        min-width: 0;
+        height: 100%;
+        padding: 0;
+        margin: 0;
+        border: none;
+        outline: none;
+        background: transparent;
+        font-size: inherit;
+        font-weight: inherit;
+        line-height: inherit;
+        color: $color-text-primary;
+
+        &::placeholder {
+            color: $color-text-placeholder;
+        }
+    }
+
+    @include e('suffix') {
+        display: flex;
+        align-items: center;
+        margin-left: 8px;
+        color: $color-text-secondary;
+    }
+
+    @include e('arrow') {
+        transition: transform $transition-duration-fast;
+
+        &.is-reverse {
+            transform: rotate(180deg);
+        }
+    }
+
+    @include e('clear') {
+        cursor: pointer;
+        display: flex;
+        align-items: center;
+        padding: 0;
+        border: none;
+        background: transparent;
+        color: inherit;
+
+        &:hover {
+            color: $color-text-primary;
+        }
+    }
+
+    @include e('dropdown') {
+        position: absolute;
+        top: 100%;
+        left: 0;
+        right: 0;
+        margin-top: 12px;
+        padding: 7px 0;
+        // Arrow variables
+        --l-select-bg: #{$bg-color};
+        --l-select-border: #{$border-color-lighter};
+        --arrow-size: 10px;
+
+        background: var(--l-select-bg);
+        border: 1px solid var(--l-select-border);
+        border-radius: $border-radius-base;
+        box-shadow: $box-shadow-light;
+        z-index: $z-index-popper;
+        overflow: visible;
+        font-size: inherit;
+        transform-origin: top;
+    }
+
+    @include e('menu-content') {
+        max-height: 274px;
+        overflow-y: auto;
+    }
+
+    @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-select-bg);
+            transform: rotate(45deg);
+            border-radius: calc(var(--arrow-size) * 0.2);
+            box-shadow: -1px -1px 0 0 var(--l-select-border);
+        }
+    }
+
+    @include e('option') {
+        display: block;
+        width: 100%;
+        padding: 10px 12px;
+        border: none;
+        background: transparent;
+        cursor: pointer;
+        transition: background $transition-duration-fast;
+        color: $color-text-primary;
+        text-align: left;
+        font-size: inherit;
+
+        &:hover:not(:disabled) {
+            background: $bg-color-page;
+        }
+
+        &.is-selected {
+            color: $color-primary;
+            font-weight: inherit;
+        }
+
+        &:disabled {
+            color: $color-text-disabled;
+            cursor: not-allowed;
+
+            &:hover {
+                background: transparent;
+            }
+        }
+    }
+
+    @include e('empty') {
+        padding: 12px;
+        text-align: center;
+        color: $color-text-secondary;
+        font-size: $font-size-small;
+    }
+}
+
+.dark {
+    .#{$namespace}-select {
+        &.is-disabled {
+            .#{$namespace}-select__trigger {
+                background: $bg-color-dark-lighter;
+                color: $color-text-dark-secondary;
+                border-color: color-mix(in oklab, #{$bg-color-dark-lighter} 86%, #{$color-text-dark});
+            }
+        }
+
+        .#{$namespace}-select__trigger {
+            background: $bg-color-dark-light;
+            border-color: color-mix(in oklab, #{$bg-color-dark-lighter} 78%, #{$color-text-dark});
+
+            &:hover {
+                border-color: color-mix(in oklab, #{$bg-color-dark-lighter} 60%, #{$color-text-dark});
+            }
+
+            &:focus {
+                border-color: $color-primary;
+            }
+        }
+
+        &.is-focus .#{$namespace}-select__trigger {
+            border-color: $color-primary;
+        }
+
+        .#{$namespace}-select__value,
+        .#{$namespace}-select__input {
+            color: $color-text-dark;
+
+            &.is-placeholder {
+                color: $color-text-dark-secondary;
+            }
+
+            &::placeholder {
+                color: $color-text-dark-secondary;
+            }
+        }
+
+        .#{$namespace}-select__suffix {
+            color: $color-text-dark-secondary;
+        }
+
+        .#{$namespace}-select__dropdown {
+            --l-select-bg: #{$bg-color-dark-light};
+            --l-select-border: color-mix(in oklab, #{$bg-color-dark-lighter} 74%, #{$color-text-dark});
+            box-shadow: $box-shadow-dark;
+        }
+
+        .#{$namespace}-select__option {
+            color: $color-text-dark;
+
+            &:hover:not(:disabled) {
+                background: $bg-color-dark-lighter;
+            }
+
+            &:disabled {
+                color: rgba($color-text-dark, 0.35);
+                cursor: not-allowed;
+
+                &:hover {
+                    background: transparent;
+                }
+            }
+        }
+
+        .#{$namespace}-select__empty {
+            color: $color-text-dark-secondary;
+        }
+    }
+}

package/dist/theme-chalk/skeleton.scss

@@ -0,0 +1,113 @@
+@use './variables' as *;
+@use './mixins/bem' as *;
+
+@include b('skeleton') {
+    @include when('animated') {
+        .#{$namespace}-skeleton__item {
+            background: linear-gradient(90deg, $border-color-lighter 25%, $border-color-extra-light 50%, $border-color-lighter 75%);
+            background-size: 400% 100%;
+            animation: skeleton-loading 1.4s ease infinite;
+        }
+    }
+
+    @include e('item') {
+        background: $border-color-lighter;
+        border-radius: $border-radius-base;
+        display: block;
+    }
+
+    @include e('p') {
+        height: 16px;
+        margin-bottom: 12px;
+        border-radius: $border-radius-base;
+
+        &.is-first {
+            width: 33%;
+        }
+
+        &.is-last {
+            width: 61%;
+            margin-bottom: 0;
+        }
+    }
+
+    @include e('text') {
+        height: 14px;
+        width: 100%;
+        border-radius: $border-radius-base;
+        margin-bottom: 10px;
+
+        &:last-child {
+            margin-bottom: 0;
+        }
+    }
+
+    @include e('h1') {
+        height: 24px;
+        width: 50%;
+        margin-bottom: 16px;
+        border-radius: $border-radius-base;
+    }
+
+    @include e('h3') {
+        height: 18px;
+        width: 40%;
+        margin-bottom: 12px;
+        border-radius: $border-radius-base;
+    }
+
+    @include e('caption') {
+        height: 12px;
+        width: 80%;
+        border-radius: $border-radius-base;
+    }
+
+    @include e('button') {
+        height: 36px;
+        width: 80px;
+        border-radius: $border-radius-base;
+    }
+
+    @include e('image') {
+        width: 100%;
+        height: 200px;
+        border-radius: $border-radius-base;
+    }
+
+    @include e('circle') {
+        width: 48px;
+        height: 48px;
+        border-radius: $border-radius-circle;
+        flex-shrink: 0;
+    }
+
+    @include e('rect') {
+        width: 100%;
+        height: 100px;
+        border-radius: $border-radius-base;
+    }
+}
+
+@keyframes skeleton-loading {
+    0% {
+        background-position: 100% 50%;
+    }
+    100% {
+        background-position: 0 50%;
+    }
+}
+
+.dark {
+    .#{$namespace}-skeleton {
+        .#{$namespace}-skeleton__item {
+            background: $bg-color-dark-lighter;
+        }
+
+        &.is-animated {
+            .#{$namespace}-skeleton__item {
+                background: linear-gradient(90deg, $bg-color-dark-lighter 25%, $bg-color-dark-overlay 50%, $bg-color-dark-lighter 75%);
+                background-size: 400% 100%;
+            }
+        }
+    }
+}

package/dist/theme-chalk/slider.scss

@@ -0,0 +1,259 @@
+@use './variables' as *;
+@use './mixins/bem' as *;
+
+@include b('slider') {
+  position: relative;
+  padding: 12px 0;
+  user-select: none;
+  touch-action: none;
+  display: block;
+  width: 100%;
+
+  /* State CSS variables (light mode default) */
+  --slider-thumb-size: 20px;
+  --slider-thumb-bg: #ffffff;
+  --slider-thumb-border: #{$color-primary};
+  --slider-thumb-shadow-base: 0 2px 4px rgba(0, 0, 0, .10), 0 1px 2px rgba(0, 0, 0, .06), inset 0 0 0 1px rgba(255, 255, 255, .10);
+  --slider-thumb-shadow-focus: 0 0 0 4px rgba($color-primary, .30), 0 2px 4px rgba(0, 0, 0, .10), inset 0 0 0 1px rgba(255, 255, 255, .10);
+  --slider-thumb-shadow-hover: 0 0 0 6px rgba($color-primary, .15), 0 3px 6px rgba(0, 0, 0, .15), 0 2px 4px rgba(0, 0, 0, .08), inset 0 0 0 1px rgba(255, 255, 255, .15);
+  --slider-thumb-shadow-active: 0 0 0 8px rgba($color-primary, .25), 0 2px 4px rgba(0, 0, 0, .20), 0 1px 2px rgba(0, 0, 0, .10), inset 0 0 0 1px rgba(255, 255, 255, .10);
+  --slider-thumb-shadow-drag: 0 0 0 6px rgba($color-primary, .30), 0 3px 6px rgba(0, 0, 0, .25), 0 2px 4px rgba(0, 0, 0, .15), inset 0 0 0 1px rgba(255, 255, 255, .20);
+  --slider-thumb-scale-hover: 1;
+  --slider-thumb-scale-active: .92;
+  --slider-thumb-scale-drag: .94;
+
+  // Track / Fill
+  &__track {
+    position: relative;
+    height: 6px;
+    width: 100%;
+    background: $border-color-lighter;
+    border-radius: $border-radius-round;
+  }
+
+  &__fill {
+    position: absolute;
+    top: 0;
+    left: 0;
+    height: 100%;
+    background: $color-primary;
+    border-radius: $border-radius-round;
+    transition: width .15s ease, left .15s ease, height .15s ease, bottom .15s ease;
+  }
+
+  // Disable transition effects during dragging
+  &.is-dragging &__fill {
+    transition: none;
+  }
+
+  // Thumb outer layer: handles positioning, keeps size stable
+  &__thumb {
+    position: absolute;
+    top: 50%;
+    left: 0;
+    transform: translate(-50%, -50%);
+    width: var(--slider-thumb-size);
+    height: var(--slider-thumb-size);
+    cursor: pointer;
+    outline: none;
+    -webkit-font-smoothing: antialiased;
+    -moz-osx-font-smoothing: grayscale;
+    backface-visibility: hidden;
+    pointer-events: auto;
+
+    /* Internal actual visual circle */
+    &-inner {
+      position: relative;
+      width: 100%;
+      height: 100%;
+      border-radius: 50%;
+      background: var(--slider-thumb-bg);
+      border: 2px solid var(--slider-thumb-border);
+      display: flex;
+      align-items: center;
+      justify-content: center;
+      box-shadow: var(--slider-thumb-shadow-base);
+      transition: box-shadow .15s ease, background .15s ease, border-color .15s ease, transform .15s ease;
+      transform-origin: center;
+      will-change: transform, box-shadow;
+
+      &::before {
+        /* Hover sensing circle */
+        content: '';
+        position: absolute;
+        inset: -2px;
+        border-radius: 50%;
+        background: rgba($color-primary, 0.10);
+        opacity: 0;
+        transform: scale(.8);
+        transition: opacity .15s ease, transform .15s ease;
+        pointer-events: none;
+      }
+    }
+
+    &:focus-visible>&-inner {
+      box-shadow: var(--slider-thumb-shadow-focus);
+    }
+
+    @media (hover:hover) {
+      .#{$namespace}-slider:not(.is-disabled) &:hover>&-inner {
+        transform: scale(var(--slider-thumb-scale-hover));
+
+        &::before {
+          opacity: 1;
+          transform: scale(1);
+        }
+      }
+    }
+
+    .#{$namespace}-slider:not(.is-disabled) &:active>&-inner {
+      box-shadow: var(--slider-thumb-shadow-active);
+      transform: scale(var(--slider-thumb-scale-active));
+      transition: transform .1s cubic-bezier(.25, .46, .45, .94), box-shadow .1s cubic-bezier(.25, .46, .45, .94);
+
+      &::before {
+        opacity: .7;
+        transform: scale(.85);
+      }
+    }
+  }
+
+  // Drag state: only affects inner
+  &.is-dragging &__thumb-inner {
+    box-shadow: var(--slider-thumb-shadow-drag);
+    transform: scale(var(--slider-thumb-scale-drag));
+
+    &::before {
+      opacity: .6;
+      transform: scale(.88);
+    }
+  }
+
+  // Stops
+  &__stop {
+    position: absolute;
+    top: 50%;
+    transform: translate(-50%, -50%);
+    width: 6px;
+    height: 6px;
+    border-radius: 50%;
+    background: $border-color-light;
+  }
+
+  // Marks
+  &__marks {
+    position: relative;
+    margin-top: 8px;
+    font-size: 10px;
+  }
+
+  &__mark {
+    position: absolute;
+    top: 0;
+    transform: translateX(-50%);
+    text-align: center;
+  }
+
+  &__mark-point {
+    width: 8px;
+    height: 8px;
+    border-radius: 50%;
+    background: $border-color-light;
+    margin: 0 auto 4px;
+  }
+
+  &__mark-label {
+    white-space: nowrap;
+    color: $color-text-secondary;
+  }
+
+
+
+  // Disabled state
+  &.is-disabled {
+    opacity: 0.55;
+    cursor: not-allowed;
+
+    .#{$namespace}-slider__thumb {
+      cursor: not-allowed;
+      pointer-events: none;
+    }
+
+    .#{$namespace}-slider__thumb-inner {
+      background: #ffffff;
+      border-color: $border-color-light;
+      box-shadow: 0 1px 2px rgba(0, 0, 0, .05);
+      transform: none;
+    }
+
+    .#{$namespace}-slider__fill {
+      background: $border-color-light;
+    }
+
+    .#{$namespace}-slider__track {
+      background: #f5f7fa;
+    }
+  }
+
+  // Vertical mode
+  &.is-vertical {
+    padding: 0 12px;
+    height: 100%;
+    width: auto;
+
+    &__track {
+      width: 6px;
+      height: 100%;
+    }
+
+    &__fill {
+      width: 100%;
+      left: 0;
+    }
+
+    &__thumb {
+      left: 50%;
+      top: auto;
+      transform: translate(-50%, 50%);
+    }
+
+    &__marks {
+      margin-top: 0;
+      margin-left: 12px;
+    }
+  }
+}
+
+// Force removal of hover/active effects in disabled state
+.#{$namespace}-slider.is-disabled .#{$namespace}-slider__thumb:hover>.#{$namespace}-slider__thumb-inner,
+.#{$namespace}-slider.is-disabled .#{$namespace}-slider__thumb:active>.#{$namespace}-slider__thumb-inner,
+.#{$namespace}-slider.is-disabled .#{$namespace}-slider__thumb:focus-visible>.#{$namespace}-slider__thumb-inner {
+  box-shadow: 0 1px 2px rgba(0, 0, 0, .05);
+}
+
+// Dark mode
+.dark {
+  @include b(slider) {
+    --slider-thumb-shadow-base: 0 2px 4px rgba(0, 0, 0, .20), 0 1px 2px rgba(0, 0, 0, .10), inset 0 0 0 1px rgba(255, 255, 255, .15);
+    --slider-thumb-shadow-focus: 0 0 0 4px rgba($color-primary, .35), 0 1px 3px rgba(0, 0, 0, .12), inset 0 0 0 .5px rgba(0, 0, 0, .06);
+    --slider-thumb-shadow-hover: 0 0 0 6px rgba($color-primary, .28), 0 1px 3px rgba(0, 0, 0, .12), inset 0 0 0 .5px rgba(0, 0, 0, .06);
+    --slider-thumb-shadow-active: 0 0 0 6px rgba($color-primary, .40), 0 1px 3px rgba(0, 0, 0, .15), inset 0 0 0 .5px rgba(0, 0, 0, .08);
+    --slider-thumb-shadow-drag: 0 0 0 6px rgba($color-primary, .30), 0 3px 6px rgba(0, 0, 0, .25), 0 2px 4px rgba(0, 0, 0, .15), inset 0 0 0 1px rgba(255, 255, 255, .20);
+
+    &__track {
+      background: rgba(#fff, 0.14);
+    }
+
+    &__fill {
+      background: $color-primary;
+    }
+
+    &__thumb-inner::before {
+      background: rgba($color-primary, .15);
+    }
+
+    &.is-disabled .#{$namespace}-slider__thumb-inner {
+      box-shadow: 0 1px 2px rgba(0, 0, 0, .08), inset 0 0 0 1px rgba(255, 255, 255, .05);
+    }
+  }
+}

package/dist/theme-chalk/space.scss

@@ -0,0 +1,44 @@
+@use './variables' as *;
+@use './mixins/bem' as *;
+
+@include b('space') {
+    display: inline-flex;
+    gap: var(--lm-space-gap, 8px);
+    align-items: var(--lm-space-align, flex-start);
+    justify-content: var(--lm-space-justify);
+
+    // 分隔符样式
+    @include e('spacer') {
+        display: inline-flex;
+        align-items: center;
+        justify-content: center;
+        color: $color-text-secondary;
+        flex-shrink: 0;
+    }
+
+    @include m('horizontal') {
+        flex-direction: row;
+    }
+
+    @include m('vertical') {
+        flex-direction: column;
+
+        .#{$namespace}-space__spacer {
+            width: 100%;
+            height: 1px;
+        }
+    }
+
+    @include when('wrap') {
+        flex-wrap: wrap;
+    }
+
+    @include when('fill') {
+        display: flex;
+        width: 100%;
+
+        > *:not(.#{$namespace}-space__spacer) {
+            flex: var(--lm-space-fill-ratio, 1);
+        }
+    }
+}