@cyberpunk-vue/theme-chalk 1.13.20 → 1.14.0

package/src/components/card.scss

@@ -9,7 +9,7 @@
   --cp-card-color: var(--cp-border);
   --cp-card-color-light: rgba(255, 255, 255, 0.1);
   --cp-card-bg: var(--cp-bg-elevated);
-  --cp-card-shadow-color: rgba(0, 0, 0, 0.4);
+  --cp-card-shadow-color: color-mix(in srgb, var(--cp-card-color) 44%, transparent);
   --cp-card-clip-path: polygon(12px 0, 100% 0, 100% calc(100% - 12px), calc(100% - 12px) 100%, 0 100%, 0 12px);
 
   position: relative;
@@ -23,10 +23,11 @@
 
   // 🚀 核心修复 2：彻底移除错误的 flex 和 height 过渡！
   // 浏览器不支持 auto 高度的动画，强加过渡会导致渲染出错，修复“高度从 0 开始”的 Bug
-  transition:
-          color var(--cp-card-dimmed-duration, 0.3s) ease,
-          filter var(--cp-card-dimmed-duration, 0.3s) ease,
-          box-shadow var(--cp-card-dimmed-duration, 0.3s) ease;
+  transition:
+          transform 0.3s cubic-bezier(0.4, 0, 0.2, 1),
+          color var(--cp-card-dimmed-duration, 0.3s) ease,
+          filter var(--cp-card-dimmed-duration, 0.3s) ease,
+          box-shadow var(--cp-card-dimmed-duration, 0.3s) ease;
 
   @include e(container) {
     position: relative;
@@ -140,16 +141,16 @@
     }
   }
 
-  @include m(outline) {
-    > .cp-card__container {
-      background: transparent;
-      border-color: var(--cp-card-color);
-
-      &:hover {
-        border-color: var(--cp-card-color);
-        box-shadow: 0 0 10px var(--cp-card-color-light);
-      }
-    }
+  @include m(outline) {
+    > .cp-card__container {
+      background: transparent;
+      border-color: var(--cp-card-color);
+
+      &:hover {
+        border-color: var(--cp-card-color);
+        box-shadow: none;
+      }
+    }
 
     &.cp-card--default {
       > .cp-card__container {
@@ -223,10 +224,12 @@
     }
   }
 
-  @include m(shape-no-clip) {
-    > .cp-card__container {
-      clip-path: none;
-      border-radius: 0;
+  @include m(shape-no-clip) {
+    border-radius: 0;
+
+    > .cp-card__container {
+      clip-path: none;
+      border-radius: 0;
       overflow: hidden;
     }
 
@@ -240,10 +243,12 @@
     }
   }
 
-  @include m(shape-round) {
-    > .cp-card__container {
-      clip-path: none;
-      border-radius: var(--cp-radius-lg);
+  @include m(shape-round) {
+    border-radius: var(--cp-radius-lg);
+
+    > .cp-card__container {
+      clip-path: none;
+      border-radius: var(--cp-radius-lg);
       overflow: hidden;
     }
 
@@ -257,76 +262,105 @@
     }
   }
 
-  // ===== 阴影 =====
-  @include m(shadow-always) {
-    filter: drop-shadow(0 4px 12px var(--cp-card-shadow-color));
-  }
-
-  @include m(shadow-hover) {
-    filter: drop-shadow(0 0 0 var(--cp-card-shadow-color));
-    // 撤销清理错误的 flex 过渡
-    transition: filter 0.3s ease;
-
-    &:hover {
-      filter: drop-shadow(0 4px 12px var(--cp-card-shadow-color));
-    }
-  }
-
-  @include m(shadow-never) {
-    filter: none;
-    box-shadow: none;
-  }
-
-  &.cp-card--shape-no-clip,
-  &.cp-card--shape-round {
-    &.cp-card--shadow-always {
-      filter: none;
-      box-shadow: 0 4px 20px var(--cp-card-shadow-color);
-    }
-
-    &.cp-card--shadow-hover {
-      filter: none;
-      box-shadow: 0 0 0 -100px var(--cp-card-shadow-color);
-      // 撤销清理错误的 flex 过渡
-      transition: box-shadow 0.3s ease;
-
-      &:hover {
-        box-shadow: 0 4px 20px 0 var(--cp-card-shadow-color);
-      }
-    }
-  }
-
-  &.cp-card--semi {
-    &.cp-card--shadow-always,
-    &.cp-card--shadow-hover {
-      filter: none !important;
-    }
-
-    &.cp-card--shadow-always::before,
-    &.cp-card--shadow-hover::before {
-      display: block;
-      filter: drop-shadow(0 0 12px var(--cp-card-shadow-color));
-    }
-
-    &.cp-card--shadow-always::before {
-      opacity: 1;
-    }
-
-    &.cp-card--shadow-hover::before {
-      opacity: 0;
-    }
-    &.cp-card--shadow-hover:hover::before {
-      opacity: 1;
-    }
-
-    &.cp-card--shadow-always > .cp-card__container,
-    &.cp-card--shadow-hover > .cp-card__container,
-    &.cp-card--shadow-hover:hover > .cp-card__container {
-      box-shadow: none !important;
-    }
-  }
-
-  // ===== 子元素 =====
+  // ===== 阴影 =====
+  @include m(shadow-always) {
+    filter: none;
+    box-shadow:
+      0 8px 22px -8px var(--cp-card-shadow-color),
+      0 0 18px -6px var(--cp-card-shadow-color);
+  }
+
+  @include m(shadow-hover) {
+    filter: none;
+    box-shadow: 0 0 0 -100px var(--cp-card-shadow-color);
+    transition:
+      transform 0.3s cubic-bezier(0.4, 0, 0.2, 1),
+      box-shadow 0.3s ease;
+
+    &:hover {
+      box-shadow:
+        0 8px 22px -8px var(--cp-card-shadow-color),
+        0 0 18px -6px var(--cp-card-shadow-color);
+    }
+  }
+
+  @include m(shadow-never) {
+    filter: none;
+    box-shadow: none;
+
+    &::before {
+      display: none;
+      opacity: 0;
+      filter: none;
+    }
+  }
+
+  &.cp-card--shape-clip {
+    &.cp-card--shadow-always {
+      filter: drop-shadow(0 4px 14px var(--cp-card-shadow-color));
+      box-shadow: none;
+
+      &::before {
+        display: none;
+        opacity: 0;
+        filter: none;
+      }
+    }
+
+    &.cp-card--shadow-hover {
+      filter: drop-shadow(0 0 0 var(--cp-card-shadow-color));
+      box-shadow: none;
+      transition:
+        transform 0.3s cubic-bezier(0.4, 0, 0.2, 1),
+        filter 0.3s ease;
+
+      &::before {
+        display: none;
+        opacity: 0;
+        filter: none;
+      }
+
+      &:hover {
+        filter: drop-shadow(0 4px 14px var(--cp-card-shadow-color));
+        box-shadow: none;
+      }
+    }
+  }
+
+  &.cp-card--outline {
+    &.cp-card--shadow-always,
+    &.cp-card--shadow-hover,
+    &.cp-card--shadow-hover:hover {
+      filter: none;
+      box-shadow: none;
+
+      &::before {
+        display: none;
+        opacity: 0;
+        filter: none;
+      }
+    }
+
+    &.cp-card--shadow-always > .cp-card__container,
+    &.cp-card--shadow-hover > .cp-card__container,
+    &.cp-card--shadow-hover:hover > .cp-card__container {
+      box-shadow: none;
+    }
+  }
+
+  &.cp-card--ghost {
+    &.cp-card--shadow-always,
+    &.cp-card--shadow-hover,
+    &.cp-card--shadow-hover:hover {
+      &::before {
+        display: none;
+        opacity: 0;
+        filter: none;
+      }
+    }
+  }
+
+  // ===== 子元素 =====
   @include e(cover) {
     width: 100%;
     overflow: hidden;
@@ -510,14 +544,15 @@
     }
   }
 
-  @include when(hover-scale) {
-    // 撤销清理错误的 flex 过渡
-    transition: transform 0.3s cubic-bezier(0.4, 0, 0.2, 1), box-shadow 0.3s ease;
-
-    &:hover {
-      transform: scale(1.02);
-      box-shadow: 0 8px 30px rgba(0, 0, 0, 0.3);
-    }
+  @include when(hover-scale) {
+    transition:
+      transform 0.3s cubic-bezier(0.4, 0, 0.2, 1),
+      filter 0.3s ease,
+      box-shadow 0.3s ease;
+
+    &:hover {
+      transform: scale(1.02);
+    }
 
     &:active {
       transform: scale(0.99);

package/src/components/input-number.scss

@@ -124,19 +124,78 @@
     }
 
     // ===== 自定义颜色 =====
-    @include when(custom-color) {
-        &.is-focused .cp-input-number__inner {
-            border-color: var(--cp-input-number-custom-color);
-            box-shadow: 0 0 10px var(--cp-input-number-custom-color-light), inset 0 0 5px var(--cp-input-number-custom-color-light);
+    @include when(custom-color) {
+        &.is-focused .cp-input-number__inner {
+            border-color: var(--cp-input-number-custom-color);
+            box-shadow: 0 0 10px var(--cp-input-number-custom-color-light), inset 0 0 5px var(--cp-input-number-custom-color-light);
         }
 
         .cp-input-number__increase:hover:not(.is-disabled),
         .cp-input-number__decrease:hover:not(.is-disabled) {
-            color: var(--cp-input-number-custom-color);
-        }
-    }
-
-    // ===== 内部元素 =====
+            color: var(--cp-input-number-custom-color);
+        }
+    }
+
+    // ===== 形状模式 =====
+    @include m(shape-no-clip) {
+        .cp-input-number__inner,
+        .cp-input-number__increase,
+        .cp-input-number__decrease {
+            clip-path: none;
+            border-radius: 0;
+        }
+
+        .cp-input-number__controls {
+            overflow: hidden;
+            border-radius: 0;
+        }
+    }
+
+    @include m(shape-round) {
+        .cp-input-number__inner,
+        .cp-input-number__increase,
+        .cp-input-number__decrease {
+            clip-path: none;
+        }
+
+        &.cp-input-number--controls-both {
+            .cp-input-number__decrease {
+                border-radius: var(--cp-radius-lg) 0 0 var(--cp-radius-lg);
+            }
+
+            .cp-input-number__inner {
+                border-radius: 0;
+            }
+
+            .cp-input-number__increase {
+                border-radius: 0 var(--cp-radius-lg) var(--cp-radius-lg) 0;
+            }
+        }
+
+        &.cp-input-number--controls-right {
+            .cp-input-number__inner {
+                border-radius: var(--cp-radius-lg);
+            }
+
+            .cp-input-number__controls {
+                overflow: hidden;
+                border-radius: 0 var(--cp-radius-lg) var(--cp-radius-lg) 0;
+            }
+
+            .cp-input-number__increase,
+            .cp-input-number__decrease {
+                border-radius: 0;
+            }
+        }
+
+        &.is-without-controls {
+            .cp-input-number__inner {
+                border-radius: var(--cp-radius-lg);
+            }
+        }
+    }
+
+    // ===== 内部元素 =====
     @include e(inner) {
         flex: 1;
         min-width: 0;

package/src/components/progress.scss

@@ -210,9 +210,17 @@
         }
     }
 
-    // ===== 状态颜色 =====
-    @include when(success) {
-        --cp-progress-color: var(--cp-color-success);
+    // ===== 状态颜色 =====
+    @include when(primary) {
+        --cp-progress-color: var(--cp-color-primary);
+
+        .cp-progress__text {
+            color: var(--cp-color-primary);
+        }
+    }
+
+    @include when(success) {
+        --cp-progress-color: var(--cp-color-success);
 
         .cp-progress__text {
             color: var(--cp-color-success);
@@ -227,13 +235,21 @@
         }
     }
 
-    @include when(error) {
-        --cp-progress-color: var(--cp-color-error);
-
-        .cp-progress__text {
-            color: var(--cp-color-error);
-        }
-    }
+    @include when(error) {
+        --cp-progress-color: var(--cp-color-error);
+
+        .cp-progress__text {
+            color: var(--cp-color-error);
+        }
+    }
+
+    @include when(info) {
+        --cp-progress-color: var(--cp-color-info);
+
+        .cp-progress__text {
+            color: var(--cp-color-info);
+        }
+    }
 
     // ===== 条纹效果 =====
     @include when(striped) {
@@ -304,14 +320,24 @@
         overflow: visible; // 解决发光裁剪问题
     }
 
-    @include e(track) {
-        stroke: var(--cp-border);
-        opacity: 0.35; // 略微提高轨道可见度
-    }
-
-    @include e(inner-track) {
-        stroke: var(--cp-text-disabled);
-        // 静止，无动画，利落感
+    @include e(track) {
+        stroke: var(--cp-border);
+        opacity: 0.35; // 略微提高轨道可见度
+    }
+
+    @include e(track-path) {
+        fill: var(--cp-border);
+        stroke: none;
+    }
+
+    @include e(track-line) {
+        fill: none;
+        stroke: var(--cp-border);
+    }
+
+    @include e(inner-track) {
+        stroke: var(--cp-text-disabled);
+        // 静止，无动画，利落感
     }
 
     @include e(path) {

package/src/components/radio.scss

@@ -180,14 +180,50 @@ $radio-sizes: (
   }
   
   // ===== 自定义尺寸 =====
-  @include when(custom-size) {
-    .cp-radio__indicator {
-      clip-path: #{octagon-clip(28%)};
-    }
-  }
-  
-  // ===== 选中状态 =====
-  @include when(checked) {
+  @include when(custom-size) {
+    .cp-radio__indicator {
+      clip-path: #{octagon-clip(28%)};
+    }
+  }
+
+  // ===== 形状模式 =====
+  @include m(shape-no-clip) {
+    .cp-radio__indicator {
+      clip-path: none;
+      border-radius: 0;
+
+      &::before,
+      &::after {
+        clip-path: none;
+      }
+    }
+
+    .cp-radio__dot {
+      clip-path: none;
+      border-radius: 0;
+    }
+  }
+
+  @include m(shape-round) {
+    .cp-radio__indicator {
+      clip-path: none;
+      border-radius: 50%;
+
+      &::before,
+      &::after {
+        clip-path: none;
+        border-radius: 50%;
+      }
+    }
+
+    .cp-radio__dot {
+      clip-path: none;
+      border-radius: 50%;
+    }
+  }
+  
+  // ===== 选中状态 =====
+  @include when(checked) {
     .cp-radio__indicator {
       background: var(--cp-radio-active-color);
       border-color: var(--cp-radio-active-color);
@@ -220,10 +256,10 @@ $radio-sizes: (
   }
   
   // ===== 边框模式 =====
-  @include when(border) {
-    padding: 8px 16px;
-    border: 1px solid var(--cp-border);
-    background: var(--cp-surface);
+  @include when(border) {
+    padding: 8px 16px;
+    border: 1px solid var(--cp-border);
+    background: var(--cp-surface);
     clip-path: polygon(
       10px 0,
       100% 0,
@@ -232,10 +268,28 @@ $radio-sizes: (
       0 100%,
       0 10px
     );
-    transition: all 0.25s ease;
-    
-    // 切角装饰线
-    &::before {
+    transition: all 0.25s ease;
+
+    &.cp-radio--shape-no-clip {
+      clip-path: none;
+      border-radius: 0;
+
+      &::before {
+        display: none;
+      }
+    }
+
+    &.cp-radio--shape-round {
+      clip-path: none;
+      border-radius: var(--cp-radius-lg);
+
+      &::before {
+        display: none;
+      }
+    }
+    
+    // 切角装饰线
+    &::before {
       content: '';
       position: absolute;
       top: 0;

package/src/components/select.scss

@@ -363,6 +363,9 @@
   }
 
   @include e(popper-panel) {
+    display: flex;
+    flex-direction: column;
+    box-sizing: border-box;
     max-height: inherit;
     background: var(--cp-bg-elevated);
     border: 1px solid var(--cp-border);
@@ -371,7 +374,7 @@
       0 0 1px var(--cp-color-primary),
       inset 0 0 20px color-mix(in srgb, var(--cp-color-primary) 3%, transparent);
     backdrop-filter: blur(8px);
-    overflow: visible;
+    overflow: hidden;
 
     // 切角样式
     clip-path: polygon(
@@ -437,6 +440,7 @@
 
   // ===== 过滤搜索 =====
   @include e(filter) {
+    flex: 0 0 auto;
     padding: var(--cp-spacing-sm);
     border-bottom: 1px solid var(--cp-border);
   }
@@ -463,11 +467,16 @@
 
   // ===== 选项列表 =====
   @include e(options) {
+    flex: 1 1 auto;
+    min-height: 0;
+    box-sizing: border-box;
     list-style: none;
     margin: 0;
     padding: var(--cp-spacing-xs) 0;
     overflow-y: auto;
-    max-height: inherit;
+    max-height: none;
+    overscroll-behavior: contain;
+    -webkit-overflow-scrolling: touch;
 
     // scrollbar 跟随 primary 颜色变量
     scrollbar-width: thin;