@cyberpunk-vue/theme-chalk 1.14.0 → 1.14.2

package/src/common/var.scss

@@ -1,250 +1,250 @@
-// Cyberpunk Vue Design Tokens
-// 赛博朋克配色系统 - 扩展版
-
-@use 'sass:map';
-
-// ===== 核心色彩 =====
-$cp-colors: (
-  'primary': #00f0ff,
-  // 赛博青 - 主色调
-  'success': #39ff14,
-  // 霓虹绿 - 成功
-  'warning': #ff9f1c,
-  // 橙黄 - 警告
-  'error': #ff0055,
-  // 洋红 - 错误
-  'info': #7b68ee,
-  // 紫罗兰 - 信息
-);
-
-// 需要深色文字的亮色类型 (用于组件自动判断)
-$cp-bright-colors: (primary, success, warning);
-
-// ===== 中性色 =====
-$cp-neutrals: (
-  'bg-deep': #0a0a0e,
-  'bg-base': #101014,
-  'bg-elevated': #18181c,
-  'border': #282830,
-  'text-primary': #ffffff,
-  'text-secondary': #a0a0b0,
-  'text-muted': #606070,
-);
-
-// ===== 语义表面色 (Surface) =====
-$cp-semantic: (
-  'surface': #101014,
-  'surface-variant': #18181c,
-  'surface-bright': #282830,
-  'overlay': rgba(0, 0, 0, 0.5),
-  'scrim': rgba(10, 10, 14, 0.8),
-);
-
-// ===== 文字层级 (Typography) =====
-$cp-typography: (
-  'on-bright': #0a0a0f,         // 亮色背景上的文字
-  'on-dark': #ffffff,           // 深色背景上的文字
-  'disabled': #606070,
-  'placeholder': #808090,
-  'inverse': #0a0a0f,           // 反转文字
-);
-
-// ===== 边框状态 (Borders) =====
-$cp-borders: (
-  'default': #2a2a3a,
-  'active': #00f0ff,            // 映射到 primary
-  'inactive': #404050,
-  'focus': #00f0ff,             // 映射到 primary
-  'hover': #505060,
-  'error': #ff0055,
-  'disabled': #303040,
-);
-
-// ===== 交互状态 (States) =====
-$cp-states: (
-  'hover': rgba(255, 255, 255, 0.05),
-  'pressed': rgba(255, 255, 255, 0.1),
-  'disabled': rgba(128, 128, 128, 0.3),
-);
-
-// ===== 尺寸 =====
-$cp-sizes: (
-  'sm': 28px,
-  'md': 36px,
-  'lg': 44px,
-);
-
-// Button 专属高度变量
-$cp-button-height-sm: map.get($cp-sizes, 'sm');
-$cp-button-height-md: map.get($cp-sizes, 'md');
-$cp-button-height-lg: map.get($cp-sizes, 'lg');
-
-$cp-font-sizes: (
-  'sm': 12px,
-  'md': 14px,
-  'lg': 16px,
-);
-
-$cp-spacing: (
-  'xs': 4px,
-  'sm': 8px,
-  'md': 12px,
-  'lg': 16px,
-  'xl': 24px,
-);
-
-$cp-radius: (
-  'sm': 4px,
-  'md': 6px,
-  'lg': 8px,
-);
-
-// ===== CSS 变量生成 =====
-:root {
-
-  // 颜色
-  @each $name, $value in $cp-colors {
-    --cp-color-#{$name}: #{$value};
-    --cp-color-#{$name}-light: color-mix(in srgb, var(--cp-color-#{$name}) 20%, transparent);
-    --cp-color-#{$name}-dark: color-mix(in srgb, var(--cp-color-#{$name}) 85%, black);
-
-  }
-
-  // 中性色
-  @each $name, $value in $cp-neutrals {
-    --cp-#{$name}: #{$value};
-  }
-
-  // 语义表面色
-  @each $name, $value in $cp-semantic {
-    --cp-#{$name}: #{$value};
-  }
-
-  // 文字层级
-  @each $name, $value in $cp-typography {
-    --cp-text-#{$name}: #{$value};
-  }
-
-  // 边框状态
-  @each $name, $value in $cp-borders {
-    --cp-border-#{$name}: #{$value};
-  }
-
-  // 交互状态
-  @each $name, $value in $cp-states {
-    --cp-state-#{$name}: #{$value};
-  }
-  --cp-state-selected: color-mix(in srgb, var(--cp-color-primary) 15%, transparent);
-  --cp-state-focus-ring: color-mix(in srgb, var(--cp-color-primary) 40%, transparent);
-
-  // 尺寸
-  @each $name, $value in $cp-sizes {
-    --cp-size-#{$name}: #{$value};
-  }
-
-  // Button 尺寸
-  --cp-button-height-sm: #{$cp-button-height-sm};
-  --cp-button-height-md: #{$cp-button-height-md};
-  --cp-button-height-lg: #{$cp-button-height-lg};
-
-  @each $name, $value in $cp-font-sizes {
-    --cp-font-size-#{$name}: #{$value};
-  }
-
-  // 字体族与可变字重
-  --cp-font-family-ui:
-    "Inter Variable",
-    "Noto Sans SC Variable",
-    "Inter",
-    "Noto Sans SC",
-    "PingFang SC",
-    "Hiragino Sans GB",
-    "Microsoft YaHei",
-    "Rajdhani",
-    system-ui,
-    -apple-system,
-    "Segoe UI",
-    sans-serif;
-  --cp-font-family-display:
-    "Orbitron",
-    "Rajdhani",
-    "Inter Variable",
-    "Noto Sans SC Variable",
-    sans-serif;
-  --cp-font-family-mono:
-    "Rajdhani",
-    "Inter Variable",
-    "Noto Sans SC Variable",
-    monospace;
-  --cp-font-weight-light: 350;
-  --cp-font-weight-normal: 450;
-  --cp-font-weight-medium: 520;
-  --cp-font-weight-semibold: 620;
-  --cp-font-weight-bold: 700;
-  --cp-font-weight-transition-fast: 0.2s cubic-bezier(0.22, 1, 0.36, 1);
-  --cp-font-weight-transition-normal: 0.25s cubic-bezier(0.22, 1, 0.36, 1);
-
-  @each $name, $value in $cp-spacing {
-    --cp-spacing-#{$name}: #{$value};
-  }
-
-  @each $name, $value in $cp-radius {
-    --cp-radius-#{$name}: #{$value};
-  }
-
-  // ===== 每个主题色的配套变量 =====
-  // primary (亮色 - 用深色文字)
-  --cp-color-primary-text: var(--cp-text-on-bright);
-  --cp-color-primary-border: var(--cp-color-primary);
-  --cp-color-primary-hover: color-mix(in srgb, var(--cp-color-primary) 10%, transparent);
-
-  // success (亮色 - 用深色文字)
-  --cp-color-success-text: var(--cp-text-on-bright);
-  --cp-color-success-border: var(--cp-color-success);
-  --cp-color-success-hover: color-mix(in srgb, var(--cp-color-success) 10%, transparent);
-
-  // warning (亮色 - 用深色文字)
-  --cp-color-warning-text: var(--cp-text-on-bright);
-  --cp-color-warning-border: var(--cp-color-warning);
-  --cp-color-warning-hover: color-mix(in srgb, var(--cp-color-warning) 10%, transparent);
-
-  // error (深色 - 用亮色文字)
-  --cp-color-error-text: var(--cp-text-on-dark);
-  --cp-color-error-border: var(--cp-color-error);
-  --cp-color-error-hover: color-mix(in srgb, var(--cp-color-error) 10%, transparent);
-
-  // info (深色 - 用亮色文字)
-  --cp-color-info-text: var(--cp-text-on-dark);
-  --cp-color-info-border: var(--cp-color-info);
-  --cp-color-info-hover: color-mix(in srgb, var(--cp-color-info) 10%, transparent);
-
-  // 特效
-  --cp-glow-primary: 0 0 10px var(--cp-color-primary),
-  0 0 20px var(--cp-color-primary-light);
-  --cp-transition-fast: 0.15s ease;
-  --cp-transition-normal: 0.25s ease;
-
-  // Layout
-  --cp-layout-header-height: 60px;
-  --cp-layout-footer-height: 60px;
-  --cp-layout-header-bg: rgba(24, 24, 28, 0.72);
-  --cp-layout-footer-bg: rgba(24, 24, 28, 0.68);
-  --cp-layout-glass-blur: 12px;
-  --cp-main-under-header-offset: var(--cp-layout-header-height);
-  --cp-main-under-footer-offset: var(--cp-layout-footer-height);
-  --cp-aside-under-header-offset: var(--cp-layout-header-height);
-  --cp-aside-under-footer-offset: var(--cp-layout-footer-height);
-  --cp-main-scrollbar-safe-top: 0px;
-  --cp-main-scrollbar-safe-bottom: 0px;
-  --cp-aside-scrollbar-safe-top: 0px;
-  --cp-aside-scrollbar-safe-bottom: 0px;
-  --cp-main-body-header-placeholder-height: var(--cp-layout-header-height);
-  --cp-main-body-footer-placeholder-height: var(--cp-layout-footer-height);
-  --cp-aside-sidebar-header-placeholder-height: var(--cp-layout-header-height);
-  --cp-aside-sidebar-footer-placeholder-height: var(--cp-layout-footer-height);
-}
-
-// ===== 暗色/亮色主题切换 =====
+// Cyberpunk Vue Design Tokens
+// 赛博朋克配色系统 - 扩展版
+
+@use 'sass:map';
+
+// ===== 核心色彩 =====
+$cp-colors: (
+  'primary': #00f0ff,
+  // 赛博青 - 主色调
+  'success': #39ff14,
+  // 霓虹绿 - 成功
+  'warning': #ff9f1c,
+  // 橙黄 - 警告
+  'error': #ff0055,
+  // 洋红 - 错误
+  'info': #7b68ee,
+  // 紫罗兰 - 信息
+);
+
+// 需要深色文字的亮色类型 (用于组件自动判断)
+$cp-bright-colors: (primary, success, warning);
+
+// ===== 中性色 =====
+$cp-neutrals: (
+  'bg-deep': #0a0a0e,
+  'bg-base': #101014,
+  'bg-elevated': #18181c,
+  'border': #282830,
+  'text-primary': #ffffff,
+  'text-secondary': #a0a0b0,
+  'text-muted': #606070,
+);
+
+// ===== 语义表面色 (Surface) =====
+$cp-semantic: (
+  'surface': #101014,
+  'surface-variant': #18181c,
+  'surface-bright': #282830,
+  'overlay': rgba(0, 0, 0, 0.5),
+  'scrim': rgba(10, 10, 14, 0.8),
+);
+
+// ===== 文字层级 (Typography) =====
+$cp-typography: (
+  'on-bright': #0a0a0f,         // 亮色背景上的文字
+  'on-dark': #ffffff,           // 深色背景上的文字
+  'disabled': #606070,
+  'placeholder': #808090,
+  'inverse': #0a0a0f,           // 反转文字
+);
+
+// ===== 边框状态 (Borders) =====
+$cp-borders: (
+  'default': #2a2a3a,
+  'active': #00f0ff,            // 映射到 primary
+  'inactive': #404050,
+  'focus': #00f0ff,             // 映射到 primary
+  'hover': #505060,
+  'error': #ff0055,
+  'disabled': #303040,
+);
+
+// ===== 交互状态 (States) =====
+$cp-states: (
+  'hover': rgba(255, 255, 255, 0.05),
+  'pressed': rgba(255, 255, 255, 0.1),
+  'disabled': rgba(128, 128, 128, 0.3),
+);
+
+// ===== 尺寸 =====
+$cp-sizes: (
+  'sm': 28px,
+  'md': 36px,
+  'lg': 44px,
+);
+
+// Button 专属高度变量
+$cp-button-height-sm: map.get($cp-sizes, 'sm');
+$cp-button-height-md: map.get($cp-sizes, 'md');
+$cp-button-height-lg: map.get($cp-sizes, 'lg');
+
+$cp-font-sizes: (
+  'sm': 12px,
+  'md': 14px,
+  'lg': 16px,
+);
+
+$cp-spacing: (
+  'xs': 4px,
+  'sm': 8px,
+  'md': 12px,
+  'lg': 16px,
+  'xl': 24px,
+);
+
+$cp-radius: (
+  'sm': 4px,
+  'md': 6px,
+  'lg': 8px,
+);
+
+// ===== CSS 变量生成 =====
+:root {
+
+  // 颜色
+  @each $name, $value in $cp-colors {
+    --cp-color-#{$name}: #{$value};
+    --cp-color-#{$name}-light: color-mix(in srgb, var(--cp-color-#{$name}) 20%, transparent);
+    --cp-color-#{$name}-dark: color-mix(in srgb, var(--cp-color-#{$name}) 85%, black);
+
+  }
+
+  // 中性色
+  @each $name, $value in $cp-neutrals {
+    --cp-#{$name}: #{$value};
+  }
+
+  // 语义表面色
+  @each $name, $value in $cp-semantic {
+    --cp-#{$name}: #{$value};
+  }
+
+  // 文字层级
+  @each $name, $value in $cp-typography {
+    --cp-text-#{$name}: #{$value};
+  }
+
+  // 边框状态
+  @each $name, $value in $cp-borders {
+    --cp-border-#{$name}: #{$value};
+  }
+
+  // 交互状态
+  @each $name, $value in $cp-states {
+    --cp-state-#{$name}: #{$value};
+  }
+  --cp-state-selected: color-mix(in srgb, var(--cp-color-primary) 15%, transparent);
+  --cp-state-focus-ring: color-mix(in srgb, var(--cp-color-primary) 40%, transparent);
+
+  // 尺寸
+  @each $name, $value in $cp-sizes {
+    --cp-size-#{$name}: #{$value};
+  }
+
+  // Button 尺寸
+  --cp-button-height-sm: #{$cp-button-height-sm};
+  --cp-button-height-md: #{$cp-button-height-md};
+  --cp-button-height-lg: #{$cp-button-height-lg};
+
+  @each $name, $value in $cp-font-sizes {
+    --cp-font-size-#{$name}: #{$value};
+  }
+
+  // 字体族与可变字重
+  --cp-font-family-ui:
+    "Inter Variable",
+    "Noto Sans SC Variable",
+    "Inter",
+    "Noto Sans SC",
+    "PingFang SC",
+    "Hiragino Sans GB",
+    "Microsoft YaHei",
+    "Rajdhani",
+    system-ui,
+    -apple-system,
+    "Segoe UI",
+    sans-serif;
+  --cp-font-family-display:
+    "Orbitron",
+    "Rajdhani",
+    "Inter Variable",
+    "Noto Sans SC Variable",
+    sans-serif;
+  --cp-font-family-mono:
+    "Rajdhani",
+    "Inter Variable",
+    "Noto Sans SC Variable",
+    monospace;
+  --cp-font-weight-light: 350;
+  --cp-font-weight-normal: 450;
+  --cp-font-weight-medium: 520;
+  --cp-font-weight-semibold: 620;
+  --cp-font-weight-bold: 700;
+  --cp-font-weight-transition-fast: 0.2s cubic-bezier(0.22, 1, 0.36, 1);
+  --cp-font-weight-transition-normal: 0.25s cubic-bezier(0.22, 1, 0.36, 1);
+
+  @each $name, $value in $cp-spacing {
+    --cp-spacing-#{$name}: #{$value};
+  }
+
+  @each $name, $value in $cp-radius {
+    --cp-radius-#{$name}: #{$value};
+  }
+
+  // ===== 每个主题色的配套变量 =====
+  // primary (亮色 - 用深色文字)
+  --cp-color-primary-text: var(--cp-text-on-bright);
+  --cp-color-primary-border: var(--cp-color-primary);
+  --cp-color-primary-hover: color-mix(in srgb, var(--cp-color-primary) 10%, transparent);
+
+  // success (亮色 - 用深色文字)
+  --cp-color-success-text: var(--cp-text-on-bright);
+  --cp-color-success-border: var(--cp-color-success);
+  --cp-color-success-hover: color-mix(in srgb, var(--cp-color-success) 10%, transparent);
+
+  // warning (亮色 - 用深色文字)
+  --cp-color-warning-text: var(--cp-text-on-bright);
+  --cp-color-warning-border: var(--cp-color-warning);
+  --cp-color-warning-hover: color-mix(in srgb, var(--cp-color-warning) 10%, transparent);
+
+  // error (深色 - 用亮色文字)
+  --cp-color-error-text: var(--cp-text-on-dark);
+  --cp-color-error-border: var(--cp-color-error);
+  --cp-color-error-hover: color-mix(in srgb, var(--cp-color-error) 10%, transparent);
+
+  // info (深色 - 用亮色文字)
+  --cp-color-info-text: var(--cp-text-on-dark);
+  --cp-color-info-border: var(--cp-color-info);
+  --cp-color-info-hover: color-mix(in srgb, var(--cp-color-info) 10%, transparent);
+
+  // 特效
+  --cp-glow-primary: 0 0 10px var(--cp-color-primary),
+  0 0 20px var(--cp-color-primary-light);
+  --cp-transition-fast: 0.15s ease;
+  --cp-transition-normal: 0.25s ease;
+
+  // Layout
+  --cp-layout-header-height: 60px;
+  --cp-layout-footer-height: 60px;
+  --cp-layout-header-bg: rgba(24, 24, 28, 0.72);
+  --cp-layout-footer-bg: rgba(24, 24, 28, 0.68);
+  --cp-layout-glass-blur: 12px;
+  --cp-main-under-header-offset: var(--cp-layout-header-height);
+  --cp-main-under-footer-offset: var(--cp-layout-footer-height);
+  --cp-aside-under-header-offset: var(--cp-layout-header-height);
+  --cp-aside-under-footer-offset: var(--cp-layout-footer-height);
+  --cp-main-scrollbar-safe-top: 0px;
+  --cp-main-scrollbar-safe-bottom: 0px;
+  --cp-aside-scrollbar-safe-top: 0px;
+  --cp-aside-scrollbar-safe-bottom: 0px;
+  --cp-main-body-header-placeholder-height: var(--cp-layout-header-height);
+  --cp-main-body-footer-placeholder-height: var(--cp-layout-footer-height);
+  --cp-aside-sidebar-header-placeholder-height: var(--cp-layout-header-height);
+  --cp-aside-sidebar-footer-placeholder-height: var(--cp-layout-footer-height);
+}
+
+// ===== 暗色/亮色主题切换 =====
 [data-theme="light"] {
   // 亮色主题使用独立语义色板，不沿用暗色霓虹色的降明度版本。
   --cp-color-primary: #0077ff;