102 lines
2.1 KiB
SCSS
102 lines
2.1 KiB
SCSS
|
// 颜色变量
|
||
|
|
:root {
|
||
|
|
// 主题色
|
||
|
|
--primary-color: #667eea;
|
||
|
|
--primary-color-hover: #5a67d8;
|
||
|
|
--primary-color-light: #e6f7ff;
|
||
|
|
|
||
|
|
// 辅助色
|
||
|
|
--secondary-color: #764ba2;
|
||
|
|
--success-color: #18a058;
|
||
|
|
--warning-color: #f5a623;
|
||
|
|
--error-color: #d03050;
|
||
|
|
--info-color: #2080f0;
|
||
|
|
|
||
|
|
// 中性色
|
||
|
|
--text-primary: #333333;
|
||
|
|
--text-secondary: #666666;
|
||
|
|
--text-tertiary: #999999;
|
||
|
|
--text-disabled: #cccccc;
|
||
|
|
|
||
|
|
// 背景色
|
||
|
|
--bg-primary: #ffffff;
|
||
|
|
--bg-secondary: #f5f7fa;
|
||
|
|
--bg-tertiary: #f0f2f5;
|
||
|
|
--bg-overlay: rgba(0, 0, 0, 0.5);
|
||
|
|
|
||
|
|
// 边框色
|
||
|
|
--border-light: #e5e7eb;
|
||
|
|
--border-medium: #d1d5db;
|
||
|
|
--border-dark: #9ca3af;
|
||
|
|
|
||
|
|
// 阴影
|
||
|
|
--shadow-light: 0 1px 3px rgba(0, 0, 0, 0.1);
|
||
|
|
--shadow-medium: 0 4px 6px rgba(0, 0, 0, 0.1);
|
||
|
|
--shadow-heavy: 0 10px 15px rgba(0, 0, 0, 0.1);
|
||
|
|
|
||
|
|
// 圆角
|
||
|
|
--border-radius-small: 4px;
|
||
|
|
--border-radius-medium: 8px;
|
||
|
|
--border-radius-large: 12px;
|
||
|
|
--border-radius-xl: 16px;
|
||
|
|
|
||
|
|
// 间距
|
||
|
|
--spacing-xs: 4px;
|
||
|
|
--spacing-sm: 8px;
|
||
|
|
--spacing-md: 16px;
|
||
|
|
--spacing-lg: 24px;
|
||
|
|
--spacing-xl: 32px;
|
||
|
|
--spacing-2xl: 48px;
|
||
|
|
|
||
|
|
// 字体
|
||
|
|
--font-size-xs: 12px;
|
||
|
|
--font-size-sm: 14px;
|
||
|
|
--font-size-md: 16px;
|
||
|
|
--font-size-lg: 18px;
|
||
|
|
--font-size-xl: 20px;
|
||
|
|
--font-size-2xl: 24px;
|
||
|
|
--font-size-3xl: 32px;
|
||
|
|
|
||
|
|
--font-weight-light: 300;
|
||
|
|
--font-weight-normal: 400;
|
||
|
|
--font-weight-medium: 500;
|
||
|
|
--font-weight-semibold: 600;
|
||
|
|
--font-weight-bold: 700;
|
||
|
|
|
||
|
|
// 行高
|
||
|
|
--line-height-tight: 1.2;
|
||
|
|
--line-height-normal: 1.5;
|
||
|
|
--line-height-relaxed: 1.75;
|
||
|
|
|
||
|
|
// 动画
|
||
|
|
--transition-fast: 0.15s ease;
|
||
|
|
--transition-normal: 0.3s ease;
|
||
|
|
--transition-slow: 0.5s ease;
|
||
|
|
|
||
|
|
// Z-index
|
||
|
|
--z-dropdown: 1000;
|
||
|
|
--z-sticky: 1020;
|
||
|
|
--z-fixed: 1030;
|
||
|
|
--z-modal-backdrop: 1040;
|
||
|
|
--z-modal: 1050;
|
||
|
|
--z-popover: 1060;
|
||
|
|
--z-tooltip: 1070;
|
||
|
|
--z-toast: 1080;
|
||
|
|
}
|
||
|
|
|
||
|
|
// 暗色主题
|
||
|
|
[data-theme="dark"] {
|
||
|
|
--text-primary: #ffffff;
|
||
|
|
--text-secondary: #d1d5db;
|
||
|
|
--text-tertiary: #9ca3af;
|
||
|
|
--text-disabled: #6b7280;
|
||
|
|
|
||
|
|
--bg-primary: #1f2937;
|
||
|
|
--bg-secondary: #374151;
|
||
|
|
--bg-tertiary: #4b5563;
|
||
|
|
--bg-overlay: rgba(0, 0, 0, 0.7);
|
||
|
|
|
||
|
|
--border-light: #4b5563;
|
||
|
|
--border-medium: #6b7280;
|
||
|
|
--border-dark: #9ca3af;
|
||
|
|
}
|