@cyberpunk-vue/theme-chalk 1.14.0 → 1.14.2

package/src/components/checkbox-group.scss

@@ -1,22 +1,22 @@
-// CpCheckboxGroup 组件样式
-
-@use '../common/var' as *;
-@use '../mixins/mixins' as *;
-
-@include b(checkbox-group) {
-  display: inline-flex;
-  flex-wrap: wrap;
-  gap: 16px;
-  
-  // 水平布局 (默认)
-  @include m(horizontal) {
-    flex-direction: row;
-    align-items: center;
-  }
-  
-  // 垂直布局
-  @include m(vertical) {
-    flex-direction: column;
-    align-items: flex-start;
-  }
-}
+// CpCheckboxGroup 组件样式
+
+@use '../common/var' as *;
+@use '../mixins/mixins' as *;
+
+@include b(checkbox-group) {
+  display: inline-flex;
+  flex-wrap: wrap;
+  gap: 16px;
+  
+  // 水平布局 (默认)
+  @include m(horizontal) {
+    flex-direction: row;
+    align-items: center;
+  }
+  
+  // 垂直布局
+  @include m(vertical) {
+    flex-direction: column;
+    align-items: flex-start;
+  }
+}

package/src/components/checkbox.scss

@@ -1,256 +1,256 @@
-// CpCheckbox 组件样式
-// 赛博朋克/机甲风格
-
-@use 'sass:map';
-@use '../common/var' as *;
-@use '../mixins/mixins' as *;
-
-// Checkbox 尺寸变量
-$checkbox-sizes: (
-  sm: (
-    size: 14px,
-    font-size: 12px,
-    clip: 3px,
-    border-radius: 2px,
-  ),
-  md: (
-    size: 18px,
-    font-size: 14px,
-    clip: 4px,
-    border-radius: 2px,
-  ),
-  lg: (
-    size: 22px,
-    font-size: 16px,
-    clip: 5px,
-    border-radius: 3px,
-  ),
-);
-
-@include b(checkbox) {
-  // 基础样式
-  position: relative;
-  display: inline-flex;
-  align-items: center;
-  gap: 8px;
-  cursor: pointer;
-  user-select: none;
-  vertical-align: middle;
-  font-family: var(--cp-font-family-ui);
-  color: var(--cp-text-secondary);
-  transition: color 0.2s ease;
-  
-  // CSS 变量
-  --cp-checkbox-active-color: var(--cp-color-primary);
-  --cp-checkbox-active-color-light: var(--cp-color-primary-light);
-  --cp-checkbox-check-color: var(--cp-color-primary-text);
-  --cp-checkbox-size: 18px;
-  
-  &:hover:not(.is-disabled) {
-    color: var(--cp-text-primary);
-    
-    .cp-checkbox__indicator {
-      border-color: var(--cp-checkbox-active-color);
-      box-shadow: 0 0 6px var(--cp-checkbox-active-color-light);
-    }
-  }
-  
-  // ===== 隐藏原生 input =====
-  @include e(input) {
-    position: absolute;
-    width: 0;
-    height: 0;
-    opacity: 0;
-    margin: 0;
-    pointer-events: none;
-  }
-  
-  // ===== 指示器 =====
-  @include e(indicator) {
-    position: relative;
-    display: flex;
-    align-items: center;
-    justify-content: center;
-    width: var(--cp-checkbox-size);
-    height: var(--cp-checkbox-size);
-    background: var(--cp-surface-variant);
-    border: 1px solid var(--cp-border);
-    transition: all 0.25s cubic-bezier(0.4, 0, 0.2, 1);
-    flex-shrink: 0;
-    
-    // 机甲切角装饰（仅 clip 形状时显示，通过 shape 控制）
-    &::before {
-      content: '';
-      position: absolute;
-      top: -1px;
-      right: -1px;
-      width: 5px;
-      height: 5px;
-      background: transparent;
-      border-top: 1px solid var(--cp-border);
-      border-right: 1px solid var(--cp-border);
-      clip-path: polygon(0 0, 100% 0, 100% 100%);
-      transition: all 0.25s ease;
-      display: none; // 默认隐藏，shape-clip 时显示
-    }
-  }
-  
-  // ===== 图标 =====
-  @include e(icon) {
-    width: 70%;
-    height: 70%;
-    color: var(--cp-checkbox-check-color);
-    stroke: var(--cp-checkbox-check-color);
-    opacity: 0;
-    transform: scale(0.5);
-    transition: all 0.2s cubic-bezier(0.34, 1.56, 0.64, 1);
-
-    // 确保 SVG 子元素使用同一颜色（避免继承差异）
-    polyline,
-    line {
-      stroke: var(--cp-checkbox-check-color);
-      stroke-width: 3px;
-      stroke-linecap: square;
-    }
-  }
-  
-  // ===== 标签 =====
-  @include e(label) {
-    font-weight: 500;
-    transition: color 0.2s ease;
-  }
-  
-  // ===== 尺寸 =====
-  @each $size-name, $size-config in $checkbox-sizes {
-    @include m(#{$size-name}) {
-      $size: map.get($size-config, size);
-      
-      --cp-checkbox-size: #{$size};
-      
-      .cp-checkbox__label {
-        font-size: map.get($size-config, font-size);
-      }
-    }
-  }
-  
-  @include when(custom-size) {
-    // custom-size 无特殊 clip-path，由 shape modifier 控制
-  }
-  
-  // ===== 形状 =====
-  @include m(shape-clip) {
-    .cp-checkbox__indicator {
-      clip-path: polygon(
-        4px 0,
-        100% 0,
-        100% calc(100% - 4px),
-        calc(100% - 4px) 100%,
-        0 100%,
-        0 4px
-      );
-      
-      &::before {
-        display: block;
-      }
-    }
-    
-    &.cp-checkbox--sm .cp-checkbox__indicator {
-      clip-path: polygon(
-        3px 0,
-        100% 0,
-        100% calc(100% - 3px),
-        calc(100% - 3px) 100%,
-        0 100%,
-        0 3px
-      );
-    }
-    
-    &.cp-checkbox--lg .cp-checkbox__indicator {
-      clip-path: polygon(
-        5px 0,
-        100% 0,
-        100% calc(100% - 5px),
-        calc(100% - 5px) 100%,
-        0 100%,
-        0 5px
-      );
-    }
-  }
-  
-  @include m(shape-no-clip) {
-    .cp-checkbox__indicator {
-      clip-path: none;
-      
-      &::before {
-        display: none;
-      }
-    }
-  }
-  
-  @include m(shape-round) {
-    .cp-checkbox__indicator {
-      clip-path: none;
-      border-radius: 4px;
-      
-      &::before {
-        display: none;
-      }
-    }
-  }
-  
-  // ===== 选中状态 =====
-  @include when(checked) {
-    .cp-checkbox__indicator {
-      background: var(--cp-checkbox-active-color);
-      border-color: var(--cp-checkbox-active-color);
-      box-shadow: 0 0 10px var(--cp-checkbox-active-color-light);
-      
-      &::before {
-        border-color: rgba(255, 255, 255, 0.6);
-        background: rgba(255, 255, 255, 0.3);
-      }
-    }
-    
-    .cp-checkbox__icon {
-      opacity: 1;
-      transform: scale(1);
-    }
-  }
-  
-  // ===== 半选状态 =====
-  @include when(indeterminate) {
-    .cp-checkbox__indicator {
-      background: var(--cp-checkbox-active-color);
-      border-color: var(--cp-checkbox-active-color);
-      box-shadow: 0 0 10px var(--cp-checkbox-active-color-light);
-      
-      &::before {
-        border-color: rgba(255, 255, 255, 0.6);
-        background: rgba(255, 255, 255, 0.3);
-      }
-    }
-    
-    .cp-checkbox__icon {
-      opacity: 1;
-      transform: scale(1);
-    }
-  }
-  
-  // ===== 边框模式 =====
+// CpCheckbox 组件样式
+// 赛博朋克/机甲风格
+
+@use 'sass:map';
+@use '../common/var' as *;
+@use '../mixins/mixins' as *;
+
+// Checkbox 尺寸变量
+$checkbox-sizes: (
+  sm: (
+    size: 14px,
+    font-size: 12px,
+    clip: 3px,
+    border-radius: 2px,
+  ),
+  md: (
+    size: 18px,
+    font-size: 14px,
+    clip: 4px,
+    border-radius: 2px,
+  ),
+  lg: (
+    size: 22px,
+    font-size: 16px,
+    clip: 5px,
+    border-radius: 3px,
+  ),
+);
+
+@include b(checkbox) {
+  // 基础样式
+  position: relative;
+  display: inline-flex;
+  align-items: center;
+  gap: 8px;
+  cursor: pointer;
+  user-select: none;
+  vertical-align: middle;
+  font-family: var(--cp-font-family-ui);
+  color: var(--cp-text-secondary);
+  transition: color 0.2s ease;
+  
+  // CSS 变量
+  --cp-checkbox-active-color: var(--cp-color-primary);
+  --cp-checkbox-active-color-light: var(--cp-color-primary-light);
+  --cp-checkbox-check-color: var(--cp-color-primary-text);
+  --cp-checkbox-size: 18px;
+  
+  &:hover:not(.is-disabled) {
+    color: var(--cp-text-primary);
+    
+    .cp-checkbox__indicator {
+      border-color: var(--cp-checkbox-active-color);
+      box-shadow: 0 0 6px var(--cp-checkbox-active-color-light);
+    }
+  }
+  
+  // ===== 隐藏原生 input =====
+  @include e(input) {
+    position: absolute;
+    width: 0;
+    height: 0;
+    opacity: 0;
+    margin: 0;
+    pointer-events: none;
+  }
+  
+  // ===== 指示器 =====
+  @include e(indicator) {
+    position: relative;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    width: var(--cp-checkbox-size);
+    height: var(--cp-checkbox-size);
+    background: var(--cp-surface-variant);
+    border: 1px solid var(--cp-border);
+    transition: all 0.25s cubic-bezier(0.4, 0, 0.2, 1);
+    flex-shrink: 0;
+    
+    // 机甲切角装饰（仅 clip 形状时显示，通过 shape 控制）
+    &::before {
+      content: '';
+      position: absolute;
+      top: -1px;
+      right: -1px;
+      width: 5px;
+      height: 5px;
+      background: transparent;
+      border-top: 1px solid var(--cp-border);
+      border-right: 1px solid var(--cp-border);
+      clip-path: polygon(0 0, 100% 0, 100% 100%);
+      transition: all 0.25s ease;
+      display: none; // 默认隐藏，shape-clip 时显示
+    }
+  }
+  
+  // ===== 图标 =====
+  @include e(icon) {
+    width: 70%;
+    height: 70%;
+    color: var(--cp-checkbox-check-color);
+    stroke: var(--cp-checkbox-check-color);
+    opacity: 0;
+    transform: scale(0.5);
+    transition: all 0.2s cubic-bezier(0.34, 1.56, 0.64, 1);
+
+    // 确保 SVG 子元素使用同一颜色（避免继承差异）
+    polyline,
+    line {
+      stroke: var(--cp-checkbox-check-color);
+      stroke-width: 3px;
+      stroke-linecap: square;
+    }
+  }
+  
+  // ===== 标签 =====
+  @include e(label) {
+    font-weight: 500;
+    transition: color 0.2s ease;
+  }
+  
+  // ===== 尺寸 =====
+  @each $size-name, $size-config in $checkbox-sizes {
+    @include m(#{$size-name}) {
+      $size: map.get($size-config, size);
+      
+      --cp-checkbox-size: #{$size};
+      
+      .cp-checkbox__label {
+        font-size: map.get($size-config, font-size);
+      }
+    }
+  }
+  
+  @include when(custom-size) {
+    // custom-size 无特殊 clip-path，由 shape modifier 控制
+  }
+  
+  // ===== 形状 =====
+  @include m(shape-clip) {
+    .cp-checkbox__indicator {
+      clip-path: polygon(
+        4px 0,
+        100% 0,
+        100% calc(100% - 4px),
+        calc(100% - 4px) 100%,
+        0 100%,
+        0 4px
+      );
+      
+      &::before {
+        display: block;
+      }
+    }
+    
+    &.cp-checkbox--sm .cp-checkbox__indicator {
+      clip-path: polygon(
+        3px 0,
+        100% 0,
+        100% calc(100% - 3px),
+        calc(100% - 3px) 100%,
+        0 100%,
+        0 3px
+      );
+    }
+    
+    &.cp-checkbox--lg .cp-checkbox__indicator {
+      clip-path: polygon(
+        5px 0,
+        100% 0,
+        100% calc(100% - 5px),
+        calc(100% - 5px) 100%,
+        0 100%,
+        0 5px
+      );
+    }
+  }
+  
+  @include m(shape-no-clip) {
+    .cp-checkbox__indicator {
+      clip-path: none;
+      
+      &::before {
+        display: none;
+      }
+    }
+  }
+  
+  @include m(shape-round) {
+    .cp-checkbox__indicator {
+      clip-path: none;
+      border-radius: 4px;
+      
+      &::before {
+        display: none;
+      }
+    }
+  }
+  
+  // ===== 选中状态 =====
+  @include when(checked) {
+    .cp-checkbox__indicator {
+      background: var(--cp-checkbox-active-color);
+      border-color: var(--cp-checkbox-active-color);
+      box-shadow: 0 0 10px var(--cp-checkbox-active-color-light);
+      
+      &::before {
+        border-color: rgba(255, 255, 255, 0.6);
+        background: rgba(255, 255, 255, 0.3);
+      }
+    }
+    
+    .cp-checkbox__icon {
+      opacity: 1;
+      transform: scale(1);
+    }
+  }
+  
+  // ===== 半选状态 =====
+  @include when(indeterminate) {
+    .cp-checkbox__indicator {
+      background: var(--cp-checkbox-active-color);
+      border-color: var(--cp-checkbox-active-color);
+      box-shadow: 0 0 10px var(--cp-checkbox-active-color-light);
+      
+      &::before {
+        border-color: rgba(255, 255, 255, 0.6);
+        background: rgba(255, 255, 255, 0.3);
+      }
+    }
+    
+    .cp-checkbox__icon {
+      opacity: 1;
+      transform: scale(1);
+    }
+  }
+  
+  // ===== 边框模式 =====
   @include when(border) {
     padding: 8px 16px;
     border: 1px solid var(--cp-border);
     background: var(--cp-surface);
-    transition: all 0.25s ease;
-    
-    &:hover:not(.is-disabled) {
-      border-color: var(--cp-checkbox-active-color);
-      box-shadow: 0 0 8px var(--cp-checkbox-active-color-light);
-    }
-    
-    &.is-checked {
-      border-color: var(--cp-checkbox-active-color);
-      background: color-mix(in srgb, var(--cp-checkbox-active-color) 15%, transparent);
+    transition: all 0.25s ease;
+    
+    &:hover:not(.is-disabled) {
+      border-color: var(--cp-checkbox-active-color);
+      box-shadow: 0 0 8px var(--cp-checkbox-active-color-light);
+    }
+    
+    &.is-checked {
+      border-color: var(--cp-checkbox-active-color);
+      background: color-mix(in srgb, var(--cp-checkbox-active-color) 15%, transparent);
       box-shadow: 0 0 12px var(--cp-checkbox-active-color-light);
     }
   }
@@ -265,74 +265,74 @@ $checkbox-sizes: (
   
   // border + shape 联动
   &.cp-checkbox--shape-clip.is-border {
-    clip-path: polygon(
-      8px 0,
-      100% 0,
-      100% calc(100% - 8px),
-      calc(100% - 8px) 100%,
-      0 100%,
-      0 8px
-    );
-  }
-  
-  &.cp-checkbox--shape-no-clip.is-border {
-    clip-path: none;
-  }
-  
-  &.cp-checkbox--shape-round.is-border {
-    clip-path: none;
-    border-radius: 6px;
-  }
-  
-  // ===== 禁用状态 =====
-  @include when(disabled) {
-    cursor: not-allowed;
-
-    .cp-checkbox__label {
-      color: var(--cp-text-disabled);
-    }
-
-    // 未选中：占位底色 + dashed 边框 表达"禁用且为空"
-    &:not(.is-checked):not(.is-indeterminate) {
-      .cp-checkbox__indicator {
-        background: var(--cp-surface-bright);
-        border-color: var(--cp-border-disabled);
-        border-style: dashed;
-        box-shadow: none;
-      }
-    }
-
-    // 选中 / 半选：保留主题色与勾标，但 dashed 边框 + 半透明
-    // 表达"已选但锁定"，与正常选中态形成明确区分
-    &.is-checked,
-    &.is-indeterminate {
-      .cp-checkbox__indicator {
-        box-shadow: none;
-        border-style: dashed;
-        opacity: 0.55;
-      }
-    }
-
-    // 边框模式：外框 dashed + 去发光，让"禁用"在外观上明确可读
-    &.is-border {
-      border-style: dashed;
-      box-shadow: none;
-
-      &:not(.is-checked):not(.is-indeterminate) {
-        border-color: var(--cp-border-disabled);
-        background: var(--cp-surface-variant);
-      }
-
-      // 选中态：用外层 opacity 整体弱化，并重置内部 indicator opacity，
-      // 避免与上面 .is-checked 的 0.55 叠加导致几乎不可见
-      &.is-checked,
-      &.is-indeterminate {
-        opacity: 0.7;
-
-        .cp-checkbox__indicator {
-          opacity: 1;
-        }
-      }
-    }
-  }
-}
+    clip-path: polygon(
+      8px 0,
+      100% 0,
+      100% calc(100% - 8px),
+      calc(100% - 8px) 100%,
+      0 100%,
+      0 8px
+    );
+  }
+  
+  &.cp-checkbox--shape-no-clip.is-border {
+    clip-path: none;
+  }
+  
+  &.cp-checkbox--shape-round.is-border {
+    clip-path: none;
+    border-radius: 6px;
+  }
+  
+  // ===== 禁用状态 =====
+  @include when(disabled) {
+    cursor: not-allowed;
+
+    .cp-checkbox__label {
+      color: var(--cp-text-disabled);
+    }
+
+    // 未选中：占位底色 + dashed 边框 表达"禁用且为空"
+    &:not(.is-checked):not(.is-indeterminate) {
+      .cp-checkbox__indicator {
+        background: var(--cp-surface-bright);
+        border-color: var(--cp-border-disabled);
+        border-style: dashed;
+        box-shadow: none;
+      }
+    }
+
+    // 选中 / 半选：保留主题色与勾标，但 dashed 边框 + 半透明
+    // 表达"已选但锁定"，与正常选中态形成明确区分
+    &.is-checked,
+    &.is-indeterminate {
+      .cp-checkbox__indicator {
+        box-shadow: none;
+        border-style: dashed;
+        opacity: 0.55;
+      }
+    }
+
+    // 边框模式：外框 dashed + 去发光，让"禁用"在外观上明确可读
+    &.is-border {
+      border-style: dashed;
+      box-shadow: none;
+
+      &:not(.is-checked):not(.is-indeterminate) {
+        border-color: var(--cp-border-disabled);
+        background: var(--cp-surface-variant);
+      }
+
+      // 选中态：用外层 opacity 整体弱化，并重置内部 indicator opacity，
+      // 避免与上面 .is-checked 的 0.55 叠加导致几乎不可见
+      &.is-checked,
+      &.is-indeterminate {
+        opacity: 0.7;
+
+        .cp-checkbox__indicator {
+          opacity: 1;
+        }
+      }
+    }
+  }
+}