lumen-plus 0.0.3 → 0.0.5

package/dist/theme-chalk/radio.scss

@@ -0,0 +1,128 @@
+@use './variables' as *;
+@use './mixins/bem' as *;
+@use './mixins/function' as *;
+
+@include b(radio) {
+    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}-radio__inner {
+            width: 14px;
+            height: 14px;
+        }
+
+        .#{$namespace}-radio__dot {
+            width: 6px;
+            height: 6px;
+        }
+    }
+
+    @include m(medium) {
+        .#{$namespace}-radio__inner {
+            width: 16px;
+            height: 16px;
+        }
+
+        .#{$namespace}-radio__dot {
+            width: 8px;
+            height: 8px;
+        }
+    }
+
+    @include m(large) {
+        font-size: $font-size-large;
+        
+        .#{$namespace}-radio__inner {
+            width: 18px;
+            height: 18px;
+        }
+
+        .#{$namespace}-radio__dot {
+            width: 10px;
+            height: 10px;
+        }
+    }
+
+    @include when(checked) {
+        .#{$namespace}-radio__inner {
+            border-color: $color-primary;
+        }
+
+        .#{$namespace}-radio__dot {
+            background-color: $color-primary;
+        }
+    }
+
+    @include when(disabled) {
+        cursor: not-allowed;
+        opacity: 0.5;
+    }
+
+    @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) {
+        position: relative;
+        display: inline-flex;
+        align-items: center;
+        justify-content: center;
+        border: 1px solid $border-color-base;
+        border-radius: 50%;
+        background-color: $bg-color;
+        transition: border-color 0.2s;
+
+        &:hover {
+            border-color: $color-primary;
+        }
+    }
+
+    @include e(dot) {
+        display: block;
+        border-radius: 50%;
+        transition: transform 0.2s;
+        transform: scale(0);
+    }
+
+    &.is-checked {
+        .#{$namespace}-radio__dot {
+            transform: scale(1);
+        }
+    }
+
+    @include e(label) {
+        margin-left: 8px;
+        color: $color-text-primary;
+    }
+}
+
+.dark {
+    .#{$namespace}-radio {
+        .#{$namespace}-radio__inner {
+            background-color: $bg-color-dark-light;
+            border-color: color-mix(in oklab, $bg-color-dark-lighter 70%, $color-text-dark-secondary);
+        }
+
+        .#{$namespace}-radio__label {
+            color: $color-text-dark;
+        }
+    }
+}

package/dist/theme-chalk/rating.scss

@@ -0,0 +1,227 @@
+@use './variables' as *;
+@use './mixins/bem' as *;
+
+@include b(rating) {
+    --rating-void-color: #c0c4cc;
+    --rating-fill-color: #{$color-warning};
+    --rating-hover-color: #{$color-warning};
+    --rating-disabled-color: #d8dce5;
+    --rating-font-size: 20px;
+    --rating-line-height: 1;
+    --rating-stroke-width: 1.5;
+
+    display: inline-flex;
+    align-items: center;
+    height: 20px;
+    line-height: var(--rating-line-height);
+    outline: none;
+
+    &:focus-visible {
+        outline: 2px solid $color-primary;
+        outline-offset: 2px;
+    }
+
+    &__item {
+        position: relative;
+        display: inline-block;
+        cursor: pointer;
+        font-size: inherit;
+        background: none;
+        border: none;
+        padding: 0;
+        margin: 0;
+        line-height: var(--rating-line-height);
+        
+        &:not(:last-child) {
+            margin-right: 6px;
+        }
+
+        &:focus-visible {
+            outline: 2px solid $color-primary;
+            outline-offset: 1px;
+            border-radius: $border-radius-base;
+        }
+
+        &:disabled {
+            cursor: not-allowed;
+        }
+    }
+
+    // 星星容器
+    &__star {
+        position: relative;
+        display: inline-block;
+        width: 1em;
+        height: 1em;
+        font-size: inherit;
+        line-height: 1;
+        vertical-align: middle;
+        cursor: pointer;
+        color: var(--rating-void-color);
+        user-select: none;
+        -webkit-user-select: none;
+    }
+
+    &__star-bg, &__star-fill {
+        position: absolute;
+        inset: 0;
+        display: flex;
+        align-items: center;
+        justify-content: center;
+        pointer-events: none;
+        svg { width: 100%; height: 100%; fill: currentColor; }
+    }
+
+    &__star-bg { color: var(--rating-void-color); }
+
+    &__star-fill {
+        color: var(--rating-fill-color);
+        overflow: hidden;
+        width: 0;
+    }
+
+    // 圆角星
+    &--rounded {
+        &__star svg polygon {
+            stroke-linejoin: round;
+            stroke-linecap: round;
+        }
+        &__star-bg svg polygon,
+        &__star-fill svg polygon {
+            stroke: currentColor;
+            stroke-width: 1.2;
+        }
+        &__star { filter: drop-shadow(0 0 0.25px rgba(0,0,0,0.15)); }
+    }
+
+    // 根据 data-ratio 控制填充宽度
+    &__star[data-ratio='1'] &__star-fill { width: 100%; }
+    &__star[data-ratio='0.5'] &__star-fill { width: 50%; }
+
+    // 悬停放大 + 颜色
+    &--interactive {
+        &__item:hover &__star { transform: scale(1.08); }
+        &__item:hover &__star-fill { color: var(--rating-hover-color); }
+    }
+
+    // 禁用/只读态
+    &--disabled {
+        cursor: not-allowed;
+        &__item, &__star, &__icon-wrapper { cursor: not-allowed; }
+        &__star { opacity: 0.55; }
+    }
+
+    &--readonly {
+        cursor: default;
+        &__item, &__star, &__icon-wrapper { cursor: default; }
+    }
+
+    &__text {
+        margin-left: 8px;
+        font-size: var(--rating-font-size);
+        color: $color-text-primary;
+    }
+
+    // Icon 覆盖实现支持
+    &__icon-wrapper {
+        position: relative;
+        display: inline-flex;
+        width: 1em;
+        height: 1em;
+        font-size: inherit;
+        line-height: 1;
+        vertical-align: middle;
+        color: var(--rating-void-color);
+        user-select: none;
+        -webkit-user-select: none;
+    }
+
+    &__icon {
+        width: 100%;
+        height: 100%;
+        display: block;
+        color: inherit;
+    }
+
+    &__icon--void { color: var(--rating-void-color); }
+    &__icon--void path {
+        fill: var(--rating-void-color);
+        stroke: none;
+    }
+
+    // 满星或 hover 显示填充时隐藏描边
+    &__icon-wrapper[data-ratio='1'] > &__icon--void path,
+    &--interactive &__item:hover &__icon-wrapper > &__icon--void path {
+        stroke: transparent;
+    }
+
+    &__icon--filled { color: var(--rating-fill-color); }
+    &__icon--filled path { fill: currentColor; stroke: none; }
+
+    &__icon-fill {
+        position: absolute;
+        inset: 0;
+        overflow: hidden;
+        display: flex;
+        align-items: center;
+        justify-content: center;
+        color: var(--rating-fill-color);
+        pointer-events: none;
+        transition: clip-path .12s ease, color .18s ease;
+        clip-path: inset(0 100% 0 0);
+    }
+
+    // half / full / empty 独立属性支持
+    &__icon-wrapper[data-full='true'] > &__icon-fill { clip-path: inset(0 0 0 0); }
+    &__icon-wrapper[data-half='true'] > &__icon-fill { clip-path: inset(0 50% 0 0); }
+    &__icon-wrapper[data-empty='true'] > &__icon-fill { clip-path: inset(0 100% 0 0); }
+
+    // 兼容旧 data-ratio
+    &__icon-wrapper[data-ratio='1']:not([data-full]) > &__icon-fill { clip-path: inset(0 0 0 0); }
+    &__icon-wrapper[data-ratio='0.5']:not([data-half]) > &__icon-fill { clip-path: inset(0 50% 0 0); }
+    &__icon-wrapper[data-ratio='0']:not([data-empty]) > &__icon-fill { clip-path: inset(0 100% 0 0); }
+
+    &--interactive &__item:hover &__icon-fill { color: var(--rating-hover-color); }
+    &--interactive &__item:hover &__icon-wrapper { transform: scale(1.08); }
+
+    // 图标包装器在禁用或只读下不显示点击手势
+    &--disabled &__icon-wrapper,
+    &--readonly &__icon-wrapper { cursor: inherit; }
+
+    // 圆角增强
+    &--rounded &__icon-wrapper { filter: drop-shadow(0 0 0.25px rgba(0,0,0,0.12)); }
+    &--rounded &__icon { stroke-linejoin: round; stroke-linecap: round; }
+    &--rounded &__icon path { stroke-linejoin: round; stroke-linecap: round; }
+
+    // 响应式设计
+    @media (hover: hover) {
+        .#{$namespace}-rating__item {
+            transition: transform 0.2s ease;
+        }
+    }
+}
+
+// 暗色模式适配
+@media (prefers-color-scheme: dark) {
+    .#{$namespace}-rating {
+        &__icon--void { color: rgba(#fff, 0.3); }
+        &--interactive &__item:hover &__icon-fill { color: $color-warning; }
+        
+        @media (hover: hover) {
+            &:not(&--disabled):not(&--readonly) &__item:hover &__icon--void { 
+                color: $color-warning; 
+            }
+        }
+    }
+}
+
+.dark {
+    .#{$namespace}-rating {
+        --rating-void-color: #{rgba($color-text-dark, 0.45)};
+        --rating-disabled-color: #{rgba($color-text-dark, 0.28)};
+
+        &__text {
+            color: $color-text-dark;
+        }
+    }
+}

package/dist/theme-chalk/result.scss

@@ -0,0 +1,80 @@
+@use './variables' as *;
+@use './mixins/bem' as *;
+
+@include b('result') {
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+    padding: $spacing-large * 2;
+    text-align: center;
+
+    @include m('success') {
+        .#{$namespace}-result__icon {
+            color: $color-success;
+        }
+    }
+
+    @include m('warning') {
+        .#{$namespace}-result__icon {
+            color: $color-warning;
+        }
+    }
+
+    @include m('error') {
+        .#{$namespace}-result__icon {
+            color: $color-danger;
+        }
+    }
+
+    @include m('info') {
+        .#{$namespace}-result__icon {
+            color: $color-info;
+        }
+    }
+
+    @include e('icon') {
+        margin-bottom: $spacing-base;
+    }
+
+    @include e('title') {
+        font-size: $font-size-extra-large;
+        font-weight: $font-weight-primary;
+        color: $color-text-primary;
+        margin-bottom: $spacing-mini;
+    }
+
+    @include e('subtitle') {
+        font-size: $font-size-base;
+        color: $color-text-secondary;
+        margin-bottom: $spacing-large;
+    }
+
+    @include e('extra') {
+        margin-top: $spacing-base;
+    }
+
+    @include e('content') {
+        margin-top: $spacing-large;
+        padding: $spacing-large;
+        background: $bg-color-page;
+        border-radius: $border-radius-base;
+        width: 100%;
+        max-width: 480px;
+    }
+}
+
+.dark {
+    .#{$namespace}-result {
+        .#{$namespace}-result__title {
+            color: $color-text-dark;
+        }
+
+        .#{$namespace}-result__subtitle {
+            color: $color-text-dark-secondary;
+        }
+
+        .#{$namespace}-result__content {
+            background: $bg-color-dark-lighter;
+        }
+    }
+}

package/dist/theme-chalk/segmented.scss

@@ -0,0 +1,108 @@
+@use './variables' as *;
+@use './mixins/bem' as *;
+
+@include b('segmented') {
+    display: inline-flex;
+    padding: 2px;
+    background-color: $bg-color-page;
+    border-radius: $border-radius-base;
+
+    @include m('small') {
+        .#{$namespace}-segmented__item {
+            padding: 4px 10px;
+            font-size: $font-size-small;
+        }
+    }
+
+    @include m('default') {
+        .#{$namespace}-segmented__item {
+            padding: 6px 14px;
+            font-size: $font-size-base;
+        }
+    }
+
+    @include m('large') {
+        .#{$namespace}-segmented__item {
+            padding: 8px 18px;
+            font-size: $font-size-medium;
+        }
+    }
+
+    @include when('block') {
+        display: flex;
+        width: 100%;
+
+        .#{$namespace}-segmented__item {
+            flex: 1;
+        }
+    }
+
+    @include when('disabled') {
+        cursor: not-allowed;
+
+        .#{$namespace}-segmented__item {
+            cursor: not-allowed;
+            color: $color-text-disabled;
+        }
+    }
+
+    @include e('item') {
+        display: inline-flex;
+        align-items: center;
+        justify-content: center;
+        gap: 6px;
+        border: none;
+        border-radius: $border-radius-base;
+        background-color: transparent;
+        cursor: pointer;
+        color: $color-text-regular;
+        transition: background-color $transition-duration-fast, color $transition-duration-fast, box-shadow $transition-duration-fast;
+        white-space: nowrap;
+
+        &:hover:not(.is-selected):not(.is-disabled) {
+            color: $color-text-primary;
+        }
+
+        &.is-selected {
+            background-color: $bg-color;
+            color: $color-text-primary;
+            font-weight: $font-weight-primary;
+            box-shadow: 0 1px 2px rgba(0, 0, 0, 0.06);
+        }
+
+        &.is-disabled {
+            cursor: not-allowed;
+            color: $color-text-disabled;
+        }
+    }
+
+    @include e('icon') {
+        display: flex;
+        align-items: center;
+    }
+
+    @include e('label') {
+        display: flex;
+        align-items: center;
+    }
+}
+
+.dark {
+    .#{$namespace}-segmented {
+        background-color: $bg-color-dark-lighter;
+
+        .#{$namespace}-segmented__item {
+            color: $color-text-dark-secondary;
+
+            &:hover:not(.is-selected):not(.is-disabled) {
+                color: $color-text-dark;
+            }
+
+            &.is-selected {
+                background-color: $bg-color-dark-light;
+                color: $color-text-dark;
+                box-shadow: none;
+            }
+        }
+    }
+}