@cyberpunk-vue/theme-chalk 1.14.0 → 1.14.2

package/src/components/radio-group.scss

@@ -1,22 +1,22 @@
-// CpRadioGroup 组件样式
-
-@use '../common/var' as *;
-@use '../mixins/mixins' as *;
-
-@include b(radio-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;
-  }
-}
+// CpRadioGroup 组件样式
+
+@use '../common/var' as *;
+@use '../mixins/mixins' as *;
+
+@include b(radio-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/radio.scss

@@ -1,185 +1,185 @@
-// CpRadio 组件样式
-// 赛博朋克/机甲风格 — 八边形指示器 + 菱形内点
-
-@use 'sass:map';
-@use '../common/var' as *;
-@use '../mixins/mixins' as *;
-
-// Radio 尺寸变量
-$radio-sizes: (
-  sm: (
-    size: 14px,
-    dot-size: 6px,
-    font-size: 12px,
-  ),
-  md: (
-    size: 18px,
-    dot-size: 8px,
-    font-size: 14px,
-  ),
-  lg: (
-    size: 22px,
-    dot-size: 10px,
-    font-size: 16px,
-  ),
-);
-
-// 八边形 clip-path（通用函数）
-// 切掉四个角，形成八边形外框
-@function octagon-clip($cut: 30%) {
-  @return polygon(
-    #{$cut} 0%, #{100% - $cut} 0%,
-    100% #{$cut}, 100% #{100% - $cut},
-    #{100% - $cut} 100%, #{$cut} 100%,
-    0% #{100% - $cut}, 0% #{$cut}
-  );
-}
-
-@include b(radio) {
-  // 基础样式
-  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-radio-active-color: var(--cp-color-primary);
-  --cp-radio-active-color-light: var(--cp-color-primary-light);
-  --cp-radio-dot-color: var(--cp-color-primary-text);
-  --cp-radio-size: 18px;
-  --cp-radio-dot-size: 8px;
-  
-  &:hover:not(.is-disabled) {
-    color: var(--cp-text-primary);
-    
-    .cp-radio__indicator {
-      border-color: var(--cp-radio-active-color);
-      
-      &::before {
-        opacity: 1;
-        border-color: var(--cp-radio-active-color);
-      }
-    }
-  }
-  
-  // Glow 模式基线 filter — 0 模糊 + 目标颜色
-  // 确保 transition 只插值模糊半径，避免从 transparent 插值产生橙色闪烁
-  &.is-glow:not(.is-disabled) .cp-radio__indicator-wrap {
-    filter: drop-shadow(0 0 0px var(--cp-radio-active-color))
-            drop-shadow(0 0 0px var(--cp-radio-active-color-light))
-            drop-shadow(0 0 0px var(--cp-radio-active-color-light));
-  }
-  
-  // 带辉光的 hover 效果 — 使用 drop-shadow 跟随八边形形状
-  &.is-glow:hover:not(.is-disabled):not(.is-checked) {
-    .cp-radio__indicator-wrap {
-      filter: drop-shadow(0 0 3px var(--cp-radio-active-color))
-              drop-shadow(0 0 6px var(--cp-radio-active-color-light))
-              drop-shadow(0 0 10px var(--cp-radio-active-color-light));
-    }
-  }
-  
-  // ===== 隐藏原生 input =====
-  @include e(input) {
-    position: absolute;
-    width: 0;
-    height: 0;
-    opacity: 0;
-    margin: 0;
-    pointer-events: none;
-  }
-  
-  // ===== 指示器外层包裹 =====
-  // drop-shadow 应用在此层，跟随子元素 clip-path 的八边形形状
-  @include e(indicator-wrap) {
-    display: flex;
-    align-items: center;
-    justify-content: center;
-    flex-shrink: 0;
-    transition: filter 0.25s ease;
-  }
-  
-  // ===== 八边形指示器 =====
-  @include e(indicator) {
-    position: relative;
-    display: flex;
-    align-items: center;
-    justify-content: center;
-    width: var(--cp-radio-size);
-    height: var(--cp-radio-size);
-    background: var(--cp-surface-variant);
-    border: 1px solid var(--cp-border);
-    clip-path: #{octagon-clip(28%)};
-    transition: all 0.25s cubic-bezier(0.4, 0, 0.2, 1);
-    flex-shrink: 0;
-    overflow: hidden;
-    
-    // 角落强调线装饰
-    &::before {
-      content: '';
-      position: absolute;
-      inset: 0;
-      clip-path: #{octagon-clip(28%)};
-      border: 1px solid transparent;
-      opacity: 0;
-      transition: all 0.25s ease;
-    }
-    
-    // 扫描线纹理
-    &::after {
-      content: '';
-      position: absolute;
-      inset: 0;
-      background: repeating-linear-gradient(
-        0deg,
-        transparent,
-        transparent 2px,
-        rgba(255, 255, 255, 0.02) 2px,
-        rgba(255, 255, 255, 0.02) 4px
-      );
-      clip-path: #{octagon-clip(28%)};
-      pointer-events: none;
-    }
-  }
-  
-  // ===== 选中时的菱形内点 =====
-  @include e(dot) {
-    position: absolute;
-    width: var(--cp-radio-dot-size);
-    height: var(--cp-radio-dot-size);
-    background: currentColor;
-    color: var(--cp-radio-dot-color);
-    clip-path: polygon(50% 0%, 100% 50%, 50% 100%, 0% 50%);
-    animation: cp-radio-dot-in 0.3s cubic-bezier(0.34, 1.56, 0.64, 1) both;
-    z-index: 1;
-  }
-  
-  // ===== 标签 =====
-  @include e(label) {
-    font-weight: 500;
-    transition: color 0.2s ease;
-    letter-spacing: 0.02em;
-  }
-  
-  // ===== 尺寸变体 =====
-  @each $size-name, $size-config in $radio-sizes {
-    @include m(#{$size-name}) {
-      --cp-radio-size: #{map.get($size-config, size)};
-      --cp-radio-dot-size: #{map.get($size-config, dot-size)};
-      
-      .cp-radio__label {
-        font-size: map.get($size-config, font-size);
-      }
-    }
-  }
-  
-  // ===== 自定义尺寸 =====
+// CpRadio 组件样式
+// 赛博朋克/机甲风格 — 八边形指示器 + 菱形内点
+
+@use 'sass:map';
+@use '../common/var' as *;
+@use '../mixins/mixins' as *;
+
+// Radio 尺寸变量
+$radio-sizes: (
+  sm: (
+    size: 14px,
+    dot-size: 6px,
+    font-size: 12px,
+  ),
+  md: (
+    size: 18px,
+    dot-size: 8px,
+    font-size: 14px,
+  ),
+  lg: (
+    size: 22px,
+    dot-size: 10px,
+    font-size: 16px,
+  ),
+);
+
+// 八边形 clip-path（通用函数）
+// 切掉四个角，形成八边形外框
+@function octagon-clip($cut: 30%) {
+  @return polygon(
+    #{$cut} 0%, #{100% - $cut} 0%,
+    100% #{$cut}, 100% #{100% - $cut},
+    #{100% - $cut} 100%, #{$cut} 100%,
+    0% #{100% - $cut}, 0% #{$cut}
+  );
+}
+
+@include b(radio) {
+  // 基础样式
+  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-radio-active-color: var(--cp-color-primary);
+  --cp-radio-active-color-light: var(--cp-color-primary-light);
+  --cp-radio-dot-color: var(--cp-color-primary-text);
+  --cp-radio-size: 18px;
+  --cp-radio-dot-size: 8px;
+  
+  &:hover:not(.is-disabled) {
+    color: var(--cp-text-primary);
+    
+    .cp-radio__indicator {
+      border-color: var(--cp-radio-active-color);
+      
+      &::before {
+        opacity: 1;
+        border-color: var(--cp-radio-active-color);
+      }
+    }
+  }
+  
+  // Glow 模式基线 filter — 0 模糊 + 目标颜色
+  // 确保 transition 只插值模糊半径，避免从 transparent 插值产生橙色闪烁
+  &.is-glow:not(.is-disabled) .cp-radio__indicator-wrap {
+    filter: drop-shadow(0 0 0px var(--cp-radio-active-color))
+            drop-shadow(0 0 0px var(--cp-radio-active-color-light))
+            drop-shadow(0 0 0px var(--cp-radio-active-color-light));
+  }
+  
+  // 带辉光的 hover 效果 — 使用 drop-shadow 跟随八边形形状
+  &.is-glow:hover:not(.is-disabled):not(.is-checked) {
+    .cp-radio__indicator-wrap {
+      filter: drop-shadow(0 0 3px var(--cp-radio-active-color))
+              drop-shadow(0 0 6px var(--cp-radio-active-color-light))
+              drop-shadow(0 0 10px var(--cp-radio-active-color-light));
+    }
+  }
+  
+  // ===== 隐藏原生 input =====
+  @include e(input) {
+    position: absolute;
+    width: 0;
+    height: 0;
+    opacity: 0;
+    margin: 0;
+    pointer-events: none;
+  }
+  
+  // ===== 指示器外层包裹 =====
+  // drop-shadow 应用在此层，跟随子元素 clip-path 的八边形形状
+  @include e(indicator-wrap) {
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    flex-shrink: 0;
+    transition: filter 0.25s ease;
+  }
+  
+  // ===== 八边形指示器 =====
+  @include e(indicator) {
+    position: relative;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    width: var(--cp-radio-size);
+    height: var(--cp-radio-size);
+    background: var(--cp-surface-variant);
+    border: 1px solid var(--cp-border);
+    clip-path: #{octagon-clip(28%)};
+    transition: all 0.25s cubic-bezier(0.4, 0, 0.2, 1);
+    flex-shrink: 0;
+    overflow: hidden;
+    
+    // 角落强调线装饰
+    &::before {
+      content: '';
+      position: absolute;
+      inset: 0;
+      clip-path: #{octagon-clip(28%)};
+      border: 1px solid transparent;
+      opacity: 0;
+      transition: all 0.25s ease;
+    }
+    
+    // 扫描线纹理
+    &::after {
+      content: '';
+      position: absolute;
+      inset: 0;
+      background: repeating-linear-gradient(
+        0deg,
+        transparent,
+        transparent 2px,
+        rgba(255, 255, 255, 0.02) 2px,
+        rgba(255, 255, 255, 0.02) 4px
+      );
+      clip-path: #{octagon-clip(28%)};
+      pointer-events: none;
+    }
+  }
+  
+  // ===== 选中时的菱形内点 =====
+  @include e(dot) {
+    position: absolute;
+    width: var(--cp-radio-dot-size);
+    height: var(--cp-radio-dot-size);
+    background: currentColor;
+    color: var(--cp-radio-dot-color);
+    clip-path: polygon(50% 0%, 100% 50%, 50% 100%, 0% 50%);
+    animation: cp-radio-dot-in 0.3s cubic-bezier(0.34, 1.56, 0.64, 1) both;
+    z-index: 1;
+  }
+  
+  // ===== 标签 =====
+  @include e(label) {
+    font-weight: 500;
+    transition: color 0.2s ease;
+    letter-spacing: 0.02em;
+  }
+  
+  // ===== 尺寸变体 =====
+  @each $size-name, $size-config in $radio-sizes {
+    @include m(#{$size-name}) {
+      --cp-radio-size: #{map.get($size-config, size)};
+      --cp-radio-dot-size: #{map.get($size-config, dot-size)};
+      
+      .cp-radio__label {
+        font-size: map.get($size-config, font-size);
+      }
+    }
+  }
+  
+  // ===== 自定义尺寸 =====
   @include when(custom-size) {
     .cp-radio__indicator {
       clip-path: #{octagon-clip(28%)};
@@ -224,50 +224,50 @@ $radio-sizes: (
   
   // ===== 选中状态 =====
   @include when(checked) {
-    .cp-radio__indicator {
-      background: var(--cp-radio-active-color);
-      border-color: var(--cp-radio-active-color);
-      
-      &::before {
-        opacity: 1;
-        border-color: rgba(255, 255, 255, 0.4);
-      }
-      
-      // 选中时扫描线更强
-      &::after {
-        background: repeating-linear-gradient(
-          0deg,
-          transparent,
-          transparent 2px,
-          rgba(255, 255, 255, 0.06) 2px,
-          rgba(255, 255, 255, 0.06) 4px
-        );
-      }
-    }
-    
-    color: var(--cp-text-primary);
-    
-    // 选中 + 辉光 — drop-shadow 跟随八边形
-    &.is-glow .cp-radio__indicator-wrap {
-      filter: drop-shadow(0 0 3px var(--cp-radio-active-color))
-              drop-shadow(0 0 8px var(--cp-radio-active-color-light))
-              drop-shadow(0 0 14px var(--cp-radio-active-color-light));
-    }
-  }
-  
-  // ===== 边框模式 =====
+    .cp-radio__indicator {
+      background: var(--cp-radio-active-color);
+      border-color: var(--cp-radio-active-color);
+      
+      &::before {
+        opacity: 1;
+        border-color: rgba(255, 255, 255, 0.4);
+      }
+      
+      // 选中时扫描线更强
+      &::after {
+        background: repeating-linear-gradient(
+          0deg,
+          transparent,
+          transparent 2px,
+          rgba(255, 255, 255, 0.06) 2px,
+          rgba(255, 255, 255, 0.06) 4px
+        );
+      }
+    }
+    
+    color: var(--cp-text-primary);
+    
+    // 选中 + 辉光 — drop-shadow 跟随八边形
+    &.is-glow .cp-radio__indicator-wrap {
+      filter: drop-shadow(0 0 3px var(--cp-radio-active-color))
+              drop-shadow(0 0 8px var(--cp-radio-active-color-light))
+              drop-shadow(0 0 14px var(--cp-radio-active-color-light));
+    }
+  }
+  
+  // ===== 边框模式 =====
   @include when(border) {
     padding: 8px 16px;
     border: 1px solid var(--cp-border);
     background: var(--cp-surface);
-    clip-path: polygon(
-      10px 0,
-      100% 0,
-      100% calc(100% - 10px),
-      calc(100% - 10px) 100%,
-      0 100%,
-      0 10px
-    );
+    clip-path: polygon(
+      10px 0,
+      100% 0,
+      100% calc(100% - 10px),
+      calc(100% - 10px) 100%,
+      0 100%,
+      0 10px
+    );
     transition: all 0.25s ease;
 
     &.cp-radio--shape-no-clip {
@@ -290,67 +290,67 @@ $radio-sizes: (
     
     // 切角装饰线
     &::before {
-      content: '';
-      position: absolute;
-      top: 0;
-      left: 0;
-      width: 14px;
-      height: 14px;
-      border-left: 1px solid var(--cp-border);
-      border-top: 1px solid var(--cp-border);
-      clip-path: polygon(0 0, 0 100%, 100% 0);
-      opacity: 0.6;
-      transition: all 0.25s ease;
-    }
-    
-    &:hover:not(.is-disabled) {
-      border-color: var(--cp-radio-active-color);
-      
-      &::before {
-        border-color: var(--cp-radio-active-color);
-        opacity: 1;
-      }
-    }
-    
-    &.is-checked {
-      border-color: var(--cp-radio-active-color);
-      background: color-mix(in srgb, var(--cp-radio-active-color) 15%, transparent);
-      
-      &::before {
-        border-color: var(--cp-radio-active-color);
-        opacity: 1;
-      }
-    }
-    
-    // 边框模式不用 indicator drop-shadow，改用自身 drop-shadow
-    // 但 border 模式自身也带 clip-path，所以 box-shadow 同样失效
-    // 这里的辉光靠外层容器或不加
-  }
-  
-  // ===== 禁用状态 =====
-  @include when(disabled) {
-    opacity: 0.45;
-    cursor: not-allowed;
-    filter: grayscale(0.7);
-    
-    .cp-radio__indicator {
-      background: var(--cp-surface-bright);
-    }
-  }
-}
-
-// ===== 动画 =====
-@keyframes cp-radio-dot-in {
-  0% {
-    opacity: 0;
-    transform: scale(0) rotate(0deg);
-  }
-  60% {
-    opacity: 1;
-    transform: scale(1.2) rotate(45deg);
-  }
-  100% {
-    opacity: 1;
-    transform: scale(1) rotate(0deg);
-  }
-}
+      content: '';
+      position: absolute;
+      top: 0;
+      left: 0;
+      width: 14px;
+      height: 14px;
+      border-left: 1px solid var(--cp-border);
+      border-top: 1px solid var(--cp-border);
+      clip-path: polygon(0 0, 0 100%, 100% 0);
+      opacity: 0.6;
+      transition: all 0.25s ease;
+    }
+    
+    &:hover:not(.is-disabled) {
+      border-color: var(--cp-radio-active-color);
+      
+      &::before {
+        border-color: var(--cp-radio-active-color);
+        opacity: 1;
+      }
+    }
+    
+    &.is-checked {
+      border-color: var(--cp-radio-active-color);
+      background: color-mix(in srgb, var(--cp-radio-active-color) 15%, transparent);
+      
+      &::before {
+        border-color: var(--cp-radio-active-color);
+        opacity: 1;
+      }
+    }
+    
+    // 边框模式不用 indicator drop-shadow，改用自身 drop-shadow
+    // 但 border 模式自身也带 clip-path，所以 box-shadow 同样失效
+    // 这里的辉光靠外层容器或不加
+  }
+  
+  // ===== 禁用状态 =====
+  @include when(disabled) {
+    opacity: 0.45;
+    cursor: not-allowed;
+    filter: grayscale(0.7);
+    
+    .cp-radio__indicator {
+      background: var(--cp-surface-bright);
+    }
+  }
+}
+
+// ===== 动画 =====
+@keyframes cp-radio-dot-in {
+  0% {
+    opacity: 0;
+    transform: scale(0) rotate(0deg);
+  }
+  60% {
+    opacity: 1;
+    transform: scale(1.2) rotate(45deg);
+  }
+  100% {
+    opacity: 1;
+    transform: scale(1) rotate(0deg);
+  }
+}

package/src/components/row.scss

@@ -1,12 +1,12 @@
-@use '../mixins/mixins' as *;
-
-// ===== CpRow 栅格行容器 =====
-
-@include b(row) {
-    display: flex;
-    flex-wrap: wrap;
-
-    @include when(no-wrap) {
-        flex-wrap: nowrap;
-    }
-}
+@use '../mixins/mixins' as *;
+
+// ===== CpRow 栅格行容器 =====
+
+@include b(row) {
+    display: flex;
+    flex-wrap: wrap;
+
+    @include when(no-wrap) {
+        flex-wrap: nowrap;
+    }
+}