@cyberpunk-vue/theme-chalk 1.13.19 → 1.14.0

package/src/components/slider.scss

@@ -32,7 +32,9 @@ $slider-sizes: (
   display: flex;
   align-items: center;
   cursor: pointer;
-  user-select: none;
+  user-select: none;
+  --cp-slider-color: var(--cp-color-primary);
+  --cp-slider-color-light: var(--cp-color-primary-light);
 
   // ========== 轨道 ==========
   @include e(runway) {
@@ -61,8 +63,8 @@ $slider-sizes: (
     top: 0;
     left: 0;
     height: 100%;
-    background: var(--cp-color-primary);
-    box-shadow: 0 0 10px var(--cp-color-primary);
+    background: var(--cp-slider-color);
+    box-shadow: 0 0 10px var(--cp-slider-color-light);
     z-index: 1;
 
     // 内部纹理，增加科幻感
@@ -89,8 +91,8 @@ $slider-sizes: (
     width: 18px;
     height: 18px;
     background: var(--cp-bg-elevated);
-    border: var(--cp-slider-thumb-border-width, 2px) solid var(--cp-color-primary);
-    box-shadow: 0 0 8px var(--cp-color-primary);
+    border: var(--cp-slider-thumb-border-width, 2px) solid var(--cp-slider-color);
+    box-shadow: 0 0 8px var(--cp-slider-color-light);
     transform: translate(-50%, 0);
     cursor: grab;
     z-index: 2;
@@ -114,7 +116,7 @@ $slider-sizes: (
       left: 50%;
       width: var(--cp-slider-inner-dot-size, 6px);
       height: var(--cp-slider-inner-dot-size, 6px);
-      background: var(--cp-color-primary);
+      background: var(--cp-slider-color);
       transform: translate(-50%, -50%);
       clip-path: polygon(
         var(--cp-slider-inner-clip-size, 2px) 0,
@@ -127,21 +129,21 @@ $slider-sizes: (
     }
 
     &:hover {
-      border-color: var(--cp-color-primary-light);
-      box-shadow: 0 0 12px var(--cp-color-primary);
+      border-color: var(--cp-slider-color);
+      box-shadow: 0 0 12px var(--cp-slider-color-light);
       transform: translate(-50%, 0) scale(1.1);
     }
 
     &:active,
     &:focus {
       cursor: grabbing;
-      border-color: var(--cp-color-primary-light);
-      box-shadow: 0 0 16px var(--cp-color-primary);
+      border-color: var(--cp-slider-color);
+      box-shadow: 0 0 16px var(--cp-slider-color-light);
     }
 
     @include when(active) {
-      border-color: var(--cp-color-primary-light);
-      box-shadow: 0 0 16px var(--cp-color-primary);
+      border-color: var(--cp-slider-color);
+      box-shadow: 0 0 16px var(--cp-slider-color-light);
       transform: translate(-50%, 0) scale(1.15);
     }
   }
@@ -154,13 +156,13 @@ $slider-sizes: (
     transform: translateX(-50%);
     padding: 4px 8px;
     background: var(--cp-bg-elevated);
-    border: 1px solid var(--cp-color-primary); // 修正变量名
-    color: var(--cp-color-primary); // 修正变量名
+    border: 1px solid var(--cp-slider-color);
+    color: var(--cp-slider-color);
     font-family: var(--cp-font-family-mono);
     font-size: 12px;
     font-weight: 600;
     white-space: nowrap;
-    box-shadow: 0 0 8px var(--cp-color-primary); // 修正变量名
+    box-shadow: 0 0 8px var(--cp-slider-color-light);
     z-index: 10;
 
     // 箭头
@@ -171,7 +173,7 @@ $slider-sizes: (
       left: 50%;
       transform: translateX(-50%);
       border: 4px solid transparent;
-      border-top-color: var(--cp-color-primary); // 修正变量名
+      border-top-color: var(--cp-slider-color);
     }
   }
 
@@ -259,7 +261,7 @@ $slider-sizes: (
         right: 100%;
         transform: translateY(-50%);
         border: 4px solid transparent;
-        border-right-color: var(--cp-color-primary);
+        border-right-color: var(--cp-slider-color);
         border-top-color: transparent;
       }
     }
@@ -429,49 +431,49 @@ $slider-sizes: (
   }
 
   // ========== 自定义颜色 ==========
-  @include when(custom-color) {
-    .#{$namespace}-slider__bar {
-      background: var(--cp-slider-custom-color);
-      box-shadow: 0 0 10px var(--cp-slider-custom-color-light);
-    }
-
-    .#{$namespace}-slider__thumb {
-      border-color: var(--cp-slider-custom-color);
-      box-shadow: 0 0 8px var(--cp-slider-custom-color-light);
-
-      &::before {
-        background: var(--cp-slider-custom-color);
-      }
-
-      &:hover,
-      &:active,
-      &:focus {
-        border-color: var(--cp-slider-custom-color);
-        box-shadow: 0 0 12px var(--cp-slider-custom-color-light);
-      }
-
-      &.is-active {
-        border-color: var(--cp-slider-custom-color);
-        box-shadow: 0 0 16px var(--cp-slider-custom-color-light);
-      }
-    }
-
-    .#{$namespace}-slider__tooltip {
-      border-color: var(--cp-slider-custom-color);
-      color: var(--cp-slider-custom-color);
-      box-shadow: 0 0 8px var(--cp-slider-custom-color-light);
-
-      &::after {
-        border-top-color: var(--cp-slider-custom-color);
-      }
-    }
+  @include when(custom-color) {
+    .#{$namespace}-slider__bar {
+      background: var(--cp-slider-color);
+      box-shadow: 0 0 10px var(--cp-slider-color-light);
+    }
+
+    .#{$namespace}-slider__thumb {
+      border-color: var(--cp-slider-color);
+      box-shadow: 0 0 8px var(--cp-slider-color-light);
+
+      &::before {
+        background: var(--cp-slider-color);
+      }
+
+      &:hover,
+      &:active,
+      &:focus {
+        border-color: var(--cp-slider-color);
+        box-shadow: 0 0 12px var(--cp-slider-color-light);
+      }
+
+      &.is-active {
+        border-color: var(--cp-slider-color);
+        box-shadow: 0 0 16px var(--cp-slider-color-light);
+      }
+    }
+
+    .#{$namespace}-slider__tooltip {
+      border-color: var(--cp-slider-color);
+      color: var(--cp-slider-color);
+      box-shadow: 0 0 8px var(--cp-slider-color-light);
+
+      &::after {
+        border-top-color: var(--cp-slider-color);
+      }
+    }
 
     &.is-vertical {
       .#{$namespace}-slider__tooltip {
-        &::after {
-          border-right-color: var(--cp-slider-custom-color);
-          border-top-color: transparent;
-        }
+        &::after {
+          border-right-color: var(--cp-slider-color);
+          border-top-color: transparent;
+        }
       }
     }
   }

package/src/components/switch.scss

@@ -33,14 +33,15 @@ $switch-sizes: (
     ),
 );
 
-@include b(switch) {
+@include b(switch) {
     // 基础样式
     position: relative;
-    display: inline-flex;
-    align-items: center;
-    cursor: pointer;
-    user-select: none;
-    vertical-align: middle;
+    display: inline-flex;
+    align-items: center;
+    gap: var(--cp-spacing-sm);
+    cursor: pointer;
+    user-select: none;
+    vertical-align: middle;
     
     // CSS 变量
     --cp-switch-active-color: var(--cp-color-primary);
@@ -101,11 +102,57 @@ $switch-sizes: (
             clip-path: polygon(0 0, 100% 0, 100% 100%, 0 0); // 三角形
             z-index: 2;
             transition: all 0.3s ease;
-        }
-    }
-
-    // ===== Wrapper (Fit Text 占位) =====
-    // 仅在 fit-text 模式下有内容撑开
+        }
+    }
+
+    // ===== 外部状态文字 =====
+    @include e(text) {
+        display: inline-grid;
+        align-items: center;
+        min-width: 0;
+        color: var(--cp-text-muted);
+        font-family: var(--cp-font-family-ui);
+        font-size: var(--cp-font-size-sm);
+        font-weight: 600;
+        line-height: 1;
+        white-space: nowrap;
+        transition: color 0.2s ease, text-shadow 0.2s ease;
+
+        .cp-switch__text-value {
+            display: block;
+            grid-area: 1 / 1;
+            opacity: 0;
+            visibility: hidden;
+            transition: opacity 0.2s ease, visibility 0.2s ease;
+
+            @include m(active) {
+                color: var(--cp-switch-active-color);
+                text-shadow: 0 0 8px var(--cp-switch-active-color-light);
+            }
+
+            @include m(inactive) {
+                color: var(--cp-text-muted);
+                text-shadow: none;
+            }
+        }
+    }
+
+    @include when(checked) {
+        .cp-switch__text-value--active {
+            opacity: 1;
+            visibility: visible;
+        }
+    }
+
+    &:not(.is-checked) {
+        .cp-switch__text-value--inactive {
+            opacity: 1;
+            visibility: visible;
+        }
+    }
+
+    // ===== Wrapper (Fit Text 占位) =====
+    // 仅在 fit-text 模式下有内容撑开
     @include e(wrapper) {
         display: flex;
         align-items: center;
@@ -340,11 +387,12 @@ $switch-sizes: (
                 @if $size-name == 'sm' { &::before { height: 1px; } }
             }
 
-            .cp-switch__active-text,
-            .cp-switch__inactive-text,
-            .wrapper-text {
-                font-size: map.get($size-config, font-size);
-            }
+            .cp-switch__active-text,
+            .cp-switch__inactive-text,
+            .cp-switch__text,
+            .wrapper-text {
+                font-size: map.get($size-config, font-size);
+            }
 
             // 基础模式的 Thumb 位置
             &:not(.is-fit-text) {
@@ -406,23 +454,150 @@ $switch-sizes: (
     }
     
     // ===== Loading 状态 =====
-    @include when(loading) {
-        cursor: wait;
-        .cp-switch__thumb {
-            &::before { display: none; } // 隐藏横杠显示 Loading
-        }
+    @include when(loading) {
+        cursor: wait;
+        .cp-switch__thumb {
+            &::before { display: none; } // 隐藏横杠显示 Loading
+        }
     }
 
     // ===== 禁用状态 =====
     @include when(disabled) {
         opacity: 0.6;
-        cursor: not-allowed;
-        filter: grayscale(0.8);
-    }
-}
-
-// 动画定义
-@keyframes cp-switch-spin {
+        cursor: not-allowed;
+        filter: grayscale(0.8);
+    }
+
+    // ===== 形状模式 =====
+    @include m(shape-no-clip) {
+        .cp-switch__track,
+        .cp-switch__thumb {
+            clip-path: none;
+            border-radius: 0;
+        }
+
+        .cp-switch__track::after {
+            display: none;
+        }
+    }
+
+    @include m(shape-round) {
+        .cp-switch__track,
+        .cp-switch__thumb {
+            clip-path: none;
+            border-radius: 999px;
+        }
+
+        .cp-switch__track::after {
+            display: none;
+        }
+    }
+}
+
+[data-theme="light"] {
+    @include b(switch) {
+        --cp-switch-bg-color: linear-gradient(135deg, #ffffff 0%, #eef4ff 100%);
+        --cp-switch-inactive-color: #c4d0e3;
+        --cp-switch-active-color-light: color-mix(in srgb, var(--cp-switch-active-color) 18%, transparent);
+
+        @include e(track) {
+            background: var(--cp-switch-bg-color);
+            box-shadow:
+                inset 0 0 0 1px rgba(255, 255, 255, 0.62),
+                0 1px 2px rgba(15, 23, 42, 0.06);
+
+            &::before {
+                background-image: repeating-linear-gradient(
+                    45deg,
+                    transparent,
+                    transparent 2px,
+                    rgba(15, 23, 42, 0.035) 2px,
+                    rgba(15, 23, 42, 0.035) 4px
+                );
+            }
+
+            &::after {
+                opacity: 0.65;
+            }
+        }
+
+        @include e(thumb) {
+            background: linear-gradient(135deg, #ffffff 0%, #e9f1ff 100%);
+            border-color: #b8c7dd;
+            box-shadow:
+                0 1px 2px rgba(15, 23, 42, 0.16),
+                inset 0 1px 0 rgba(255, 255, 255, 0.9);
+            color: #64748b;
+
+            &::before {
+                background: #94a3b8;
+                box-shadow: 0 1px 0 rgba(255, 255, 255, 0.8);
+            }
+        }
+
+        @include e(text) {
+            .cp-switch__text-value--active {
+                text-shadow: none;
+            }
+        }
+
+        @include when(checked) {
+            .cp-switch__track {
+                background:
+                    linear-gradient(
+                        135deg,
+                        color-mix(in srgb, var(--cp-switch-active-color) 10%, #ffffff) 0%,
+                        color-mix(in srgb, var(--cp-switch-active-color) 18%, #ffffff) 100%
+                    );
+                border-color: var(--cp-switch-active-color);
+                box-shadow:
+                    inset 0 0 0 1px rgba(255, 255, 255, 0.56),
+                    0 0 0 2px color-mix(in srgb, var(--cp-switch-active-color) 14%, transparent);
+
+                &::after {
+                    background: var(--cp-switch-active-color);
+                    box-shadow: none;
+                }
+
+                &::before {
+                    background-image: repeating-linear-gradient(
+                        45deg,
+                        transparent,
+                        transparent 2px,
+                        color-mix(in srgb, var(--cp-switch-active-color) 16%, transparent) 2px,
+                        color-mix(in srgb, var(--cp-switch-active-color) 16%, transparent) 4px
+                    );
+                }
+            }
+
+            .cp-switch__thumb {
+                background: linear-gradient(
+                    135deg,
+                    color-mix(in srgb, var(--cp-switch-active-color) 88%, #ffffff) 0%,
+                    var(--cp-switch-active-color) 100%
+                );
+                border-color: #ffffff;
+                box-shadow:
+                    0 2px 5px color-mix(in srgb, var(--cp-switch-active-color) 34%, transparent),
+                    inset 0 1px 0 rgba(255, 255, 255, 0.48);
+                color: #ffffff;
+
+                &::before {
+                    background: rgba(255, 255, 255, 0.78);
+                    box-shadow: none;
+                }
+            }
+        }
+
+        @include when(disabled) {
+            opacity: 0.55;
+            filter: grayscale(0.45);
+        }
+    }
+}
+
+// 动画定义
+@keyframes cp-switch-spin {
     from { transform: rotate(0deg); }
     to { transform: rotate(360deg); }
 }

package/src/components/textarea.scss

@@ -82,50 +82,76 @@
         }
     }
 
-    @include when(readonly) {
-        .cp-textarea__inner {
-            cursor: default;
-        }
-    }
+    @include when(readonly) {
+        .cp-textarea__inner {
+            cursor: default;
+        }
+    }
+
+    @include when(show-word-limit) {
+        padding-bottom: calc(var(--cp-spacing-xs) + var(--cp-font-size-sm));
+    }
 
     // ===== 自定义颜色 =====
-    @include when(custom-color) {
-        .cp-textarea__inner:hover:not(:disabled):not([readonly]) {
-            border-color: var(--cp-textarea-custom-color);
+    @include when(custom-color) {
+        .cp-textarea__inner:hover:not(:disabled):not([readonly]) {
+            border-color: var(--cp-textarea-custom-color);
         }
 
         &.is-focused .cp-textarea__inner {
             border-color: var(--cp-textarea-custom-color);
-            box-shadow: 0 0 10px var(--cp-textarea-custom-color-light), inset 0 0 5px var(--cp-textarea-custom-color-light);
-        }
-    }
-
-    // ===== 内部元素 =====
+            box-shadow: 0 0 10px var(--cp-textarea-custom-color-light), inset 0 0 5px var(--cp-textarea-custom-color-light);
+        }
+    }
+
+    // ===== 形状模式 =====
+    @include m(shape-no-clip) {
+        .cp-textarea__inner {
+            clip-path: none;
+            border-radius: 0;
+        }
+    }
+
+    @include m(shape-round) {
+        .cp-textarea__inner {
+            clip-path: none;
+            border-radius: var(--cp-radius-lg);
+        }
+    }
+
+    // ===== 内部元素 =====
     @include e(inner) {
         width: 100%;
         min-height: 80px;
         resize: vertical;
         outline: none;
-        color: var(--cp-textarea-text-color, var(--cp-text-primary));
-        font-family: inherit;
-        font-size: inherit;
-        transition: all 0.2s ease;
-
-        // 机甲风切角
-        clip-path: polygon(8px 0, 100% 0, 100% calc(100% - 8px), calc(100% - 8px) 100%, 0 100%, 0 8px);
+        color: var(--cp-textarea-text-color, var(--cp-text-primary));
+        font-family: inherit;
+        font-size: inherit;
+        transition:
+            background 0.2s ease,
+            border-color 0.2s ease,
+            box-shadow 0.2s ease,
+            color 0.2s ease,
+            border-radius 0.2s ease,
+            clip-path 0.2s ease;
+
+        // 机甲风切角
+        clip-path: polygon(8px 0, 100% 0, 100% calc(100% - 8px), calc(100% - 8px) 100%, 0 100%, 0 8px);
 
         &::placeholder {
             color: var(--cp-text-muted);
         }
     }
 
-    @include e(count) {
-        position: absolute;
-        right: var(--cp-spacing-sm);
-        bottom: var(--cp-spacing-sm);
-        color: var(--cp-text-muted);
-        font-size: var(--cp-font-size-sm);
-        font-family: var(--cp-font-family-mono);
-        pointer-events: none;
-    }
-}
+    @include e(count) {
+        position: absolute;
+        right: var(--cp-spacing-sm);
+        bottom: 0;
+        color: var(--cp-text-muted);
+        font-size: var(--cp-font-size-sm);
+        font-family: var(--cp-font-family-mono);
+        line-height: 1;
+        pointer-events: none;
+    }
+}