@cyberpunk-vue/theme-chalk 1.14.0 → 1.14.2

package/src/index.scss

@@ -1,63 +1,63 @@
-// Cyberpunk Vue - 主入口
-// 所有 @use 必须在最前面
-
-@use 'common/var';
-@use 'mixins/mixins';
-@use 'components/button';
-@use 'components/loading';
-@use 'components/icon';
-@use 'components/input';
-@use 'components/textarea';
-@use 'components/input-number';
-@use 'components/slider';
-@use 'components/switch';
-@use 'components/progress';
-@use 'components/card';
-@use 'components/tag';
-@use 'components/text';
-@use 'components/status-indicator';
-@use 'components/image';
-@use 'components/image-preview';
-@use 'components/avatar';
-@use 'components/avatar-group';
-@use 'components/popover';
-@use 'components/pattern-background';
-@use 'components/select';
-@use 'components/scrollbar';
-@use 'components/checkbox';
-@use 'components/checkbox-group';
-@use 'components/radio';
-@use 'components/radio-group';
-@use 'components/badge';
-@use 'components/divider';
-@use 'components/dialog';
-@use 'components/tree';
-@use 'components/row';
-@use 'components/col';
-@use 'components/container';
-@use 'components/menu';
-@use 'components/notification';
-@use 'components/pagination';
-@use 'components/segmented';
-@use 'components/table';
-@use 'components/form';
-@use 'components/form-item';
-@use 'components/breadcrumb';
-@use 'components/upload';
-@use 'components/empty';
+// Cyberpunk Vue - 主入口
+// 所有 @use 必须在最前面
+
+@use 'common/var';
+@use 'mixins/mixins';
+@use 'components/button';
+@use 'components/loading';
+@use 'components/icon';
+@use 'components/input';
+@use 'components/textarea';
+@use 'components/input-number';
+@use 'components/slider';
+@use 'components/switch';
+@use 'components/progress';
+@use 'components/card';
+@use 'components/tag';
+@use 'components/text';
+@use 'components/status-indicator';
+@use 'components/image';
+@use 'components/image-preview';
+@use 'components/avatar';
+@use 'components/avatar-group';
+@use 'components/popover';
+@use 'components/pattern-background';
+@use 'components/select';
+@use 'components/scrollbar';
+@use 'components/checkbox';
+@use 'components/checkbox-group';
+@use 'components/radio';
+@use 'components/radio-group';
+@use 'components/badge';
+@use 'components/divider';
+@use 'components/dialog';
+@use 'components/tree';
+@use 'components/row';
+@use 'components/col';
+@use 'components/container';
+@use 'components/menu';
+@use 'components/notification';
+@use 'components/pagination';
+@use 'components/segmented';
+@use 'components/table';
+@use 'components/form';
+@use 'components/form-item';
+@use 'components/breadcrumb';
+@use 'components/upload';
+@use 'components/empty';
 @use 'components/timeline';
 @use 'components/descriptions';
 @use 'components/date-picker';
-
-// 基础样式
-*,
-*::before,
-*::after {
-    box-sizing: border-box;
-}
-
-body {
-    font-family: var(--cp-font-family-ui);
-    background: var(--cp-bg-deep);
-    color: var(--cp-text-primary);
-}
+
+// 基础样式
+*,
+*::before,
+*::after {
+    box-sizing: border-box;
+}
+
+body {
+    font-family: var(--cp-font-family-ui);
+    background: var(--cp-bg-deep);
+    color: var(--cp-text-primary);
+}

package/src/mixins/mixins.scss

@@ -1,157 +1,157 @@
-// BEM Mixins for Cyberpunk Vue
-// 命名空间: cp
-
-$namespace: 'cp' !default;
-$element-separator: '__' !default;
-$modifier-separator: '--' !default;
-$state-prefix: 'is-' !default;
-
-// 块 (Block)
-@mixin b($block) {
-    $B: #{$namespace}-#{$block};
-
-    .#{$B} {
-        @content;
-    }
-}
-
-// 元素 (Element)
-@mixin e($element) {
-    $E: #{&}#{$element-separator}#{$element};
-
-    @at-root {
-        #{$E} {
-            @content;
-        }
-    }
-}
-
-// 修饰符 (Modifier)
-@mixin m($modifier) {
-    $M: #{&}#{$modifier-separator}#{$modifier};
-
-    @at-root {
-        #{$M} {
-            @content;
-        }
-    }
-}
-
-// 状态 (State)
-@mixin when($state) {
-    @at-root {
-        &.#{$state-prefix}#{$state} {
-            @content;
-        }
-    }
-}
-
-// 尺寸变体
-@mixin size($size) {
-    @include m($size) {
-        @content;
-    }
-}
-
-// 颜色变体
-@mixin color-variant($color) {
-    @include m($color) {
-        @content;
-    }
-}
-
-// ===== Scrollbar Mixins =====
-
-// 基础 scrollbar 样式
-@mixin scrollbar-base($width: 6px, $thumb: rgba(0, 240, 255, 0.3), $track: rgba(26, 26, 36, 0.8), $radius: 3px) {
-    &::-webkit-scrollbar {
-        width: $width;
-        height: $width;
-    }
-
-    &::-webkit-scrollbar-track {
-        background: $track;
-    }
-
-    &::-webkit-scrollbar-thumb {
-        background: $thumb;
-        border-radius: $radius;
-        
-        &:hover {
-            background: rgba(0, 240, 255, 0.5);
-        }
-    }
-
-    // Firefox
-    scrollbar-width: thin;
-    scrollbar-color: $thumb $track;
-}
-
-// 快速应用变体
-@mixin scrollbar($variant: 'default') {
-    @if $variant == 'default' {
-        @include scrollbar-base();
-    } @else if $variant == 'rounded' {
-        @include scrollbar-base($radius: 999px);
-    } @else if $variant == 'futuristic' {
-        &::-webkit-scrollbar {
-            width: 8px;
-            height: 8px;
-        }
-        &::-webkit-scrollbar-track {
-            background: rgba(10, 10, 15, 0.9);
-            border: 1px solid rgba(0, 240, 255, 0.1);
-        }
-        &::-webkit-scrollbar-thumb {
-            background: linear-gradient(to bottom, rgba(0, 240, 255, 0.2), #00f0ff);
-            border-radius: 4px;
-            box-shadow: 0 0 5px rgba(0, 240, 255, 0.2);
-            &:hover {
-                background: linear-gradient(to bottom, #00f0ff, #00c2ce);
-            }
-        }
-        scrollbar-width: auto;
-        scrollbar-color: #00f0ff rgba(10, 10, 15, 0.9);
-    } @else if $variant == 'thin' {
-        @include scrollbar-base($width: 4px);
-    } @else if $variant == 'bordered' {
-        &::-webkit-scrollbar {
-            width: 10px;
-            height: 10px;
-        }
-        &::-webkit-scrollbar-track {
-            background: rgba(10, 10, 15, 0.8);
-            border: 1px solid rgba(0, 240, 255, 0.1);
-        }
-        &::-webkit-scrollbar-thumb {
-            background: rgba(0, 240, 255, 0.2);
-            border: 1px solid #00f0ff;
-            border-radius: 0;
-            &:hover {
-                background: rgba(0, 240, 255, 0.4);
-            }
-        }
-    } @else if $variant == 'clipped' {
-        &::-webkit-scrollbar {
-            width: 10px;
-            height: 10px;
-        }
-        &::-webkit-scrollbar-thumb {
-            // 使用单一强力渐变切角以确保可见性
-            background: linear-gradient(135deg, transparent 6px, rgba(0, 240, 255, 0.4) 6px);
-            background-clip: padding-box;
-            border: 1px solid rgba(0, 240, 255, 0.5);
-            border-radius: 0;
-            
-            &:hover {
-                background: linear-gradient(135deg, transparent 6px, #00f0ff 6px);
-                border-color: #00f0ff;
-            }
-        }
-    } @else if $variant == 'hidden' {
-        scrollbar-width: none;
-        &::-webkit-scrollbar {
-            display: none;
-        }
-    }
+// BEM Mixins for Cyberpunk Vue
+// 命名空间: cp
+
+$namespace: 'cp' !default;
+$element-separator: '__' !default;
+$modifier-separator: '--' !default;
+$state-prefix: 'is-' !default;
+
+// 块 (Block)
+@mixin b($block) {
+    $B: #{$namespace}-#{$block};
+
+    .#{$B} {
+        @content;
+    }
+}
+
+// 元素 (Element)
+@mixin e($element) {
+    $E: #{&}#{$element-separator}#{$element};
+
+    @at-root {
+        #{$E} {
+            @content;
+        }
+    }
+}
+
+// 修饰符 (Modifier)
+@mixin m($modifier) {
+    $M: #{&}#{$modifier-separator}#{$modifier};
+
+    @at-root {
+        #{$M} {
+            @content;
+        }
+    }
+}
+
+// 状态 (State)
+@mixin when($state) {
+    @at-root {
+        &.#{$state-prefix}#{$state} {
+            @content;
+        }
+    }
+}
+
+// 尺寸变体
+@mixin size($size) {
+    @include m($size) {
+        @content;
+    }
+}
+
+// 颜色变体
+@mixin color-variant($color) {
+    @include m($color) {
+        @content;
+    }
+}
+
+// ===== Scrollbar Mixins =====
+
+// 基础 scrollbar 样式
+@mixin scrollbar-base($width: 6px, $thumb: rgba(0, 240, 255, 0.3), $track: rgba(26, 26, 36, 0.8), $radius: 3px) {
+    &::-webkit-scrollbar {
+        width: $width;
+        height: $width;
+    }
+
+    &::-webkit-scrollbar-track {
+        background: $track;
+    }
+
+    &::-webkit-scrollbar-thumb {
+        background: $thumb;
+        border-radius: $radius;
+        
+        &:hover {
+            background: rgba(0, 240, 255, 0.5);
+        }
+    }
+
+    // Firefox
+    scrollbar-width: thin;
+    scrollbar-color: $thumb $track;
+}
+
+// 快速应用变体
+@mixin scrollbar($variant: 'default') {
+    @if $variant == 'default' {
+        @include scrollbar-base();
+    } @else if $variant == 'rounded' {
+        @include scrollbar-base($radius: 999px);
+    } @else if $variant == 'futuristic' {
+        &::-webkit-scrollbar {
+            width: 8px;
+            height: 8px;
+        }
+        &::-webkit-scrollbar-track {
+            background: rgba(10, 10, 15, 0.9);
+            border: 1px solid rgba(0, 240, 255, 0.1);
+        }
+        &::-webkit-scrollbar-thumb {
+            background: linear-gradient(to bottom, rgba(0, 240, 255, 0.2), #00f0ff);
+            border-radius: 4px;
+            box-shadow: 0 0 5px rgba(0, 240, 255, 0.2);
+            &:hover {
+                background: linear-gradient(to bottom, #00f0ff, #00c2ce);
+            }
+        }
+        scrollbar-width: auto;
+        scrollbar-color: #00f0ff rgba(10, 10, 15, 0.9);
+    } @else if $variant == 'thin' {
+        @include scrollbar-base($width: 4px);
+    } @else if $variant == 'bordered' {
+        &::-webkit-scrollbar {
+            width: 10px;
+            height: 10px;
+        }
+        &::-webkit-scrollbar-track {
+            background: rgba(10, 10, 15, 0.8);
+            border: 1px solid rgba(0, 240, 255, 0.1);
+        }
+        &::-webkit-scrollbar-thumb {
+            background: rgba(0, 240, 255, 0.2);
+            border: 1px solid #00f0ff;
+            border-radius: 0;
+            &:hover {
+                background: rgba(0, 240, 255, 0.4);
+            }
+        }
+    } @else if $variant == 'clipped' {
+        &::-webkit-scrollbar {
+            width: 10px;
+            height: 10px;
+        }
+        &::-webkit-scrollbar-thumb {
+            // 使用单一强力渐变切角以确保可见性
+            background: linear-gradient(135deg, transparent 6px, rgba(0, 240, 255, 0.4) 6px);
+            background-clip: padding-box;
+            border: 1px solid rgba(0, 240, 255, 0.5);
+            border-radius: 0;
+            
+            &:hover {
+                background: linear-gradient(135deg, transparent 6px, #00f0ff 6px);
+                border-color: #00f0ff;
+            }
+        }
+    } @else if $variant == 'hidden' {
+        scrollbar-width: none;
+        &::-webkit-scrollbar {
+            display: none;
+        }
+    }
 }