/* ===================================================================== * 瑞礼ERP · 全局设计变量（Design Tokens） * 主色：电光蓝 #2563eb（科技感 + 高辨识度） * 字号：基础 15px（比旧版 13px 更大、更易读） * 主题：浅色（默认）/ 暗色（）一键切换 * 所有页面统一引用本文件，禁止在各页内联重复定义颜色/字号 * ===================================================================== */ :root, [data-theme="light"] { /* ---------- 背景层 ---------- */ --c-bg-page: #F2F6FC; /* 页面底色（浅灰蓝） */ --c-bg-card: #FFFFFF; /* 卡片/面板 */ --c-bg-subtle: #EEF4FC; /* 斑马纹偶数行 / 浅蓝底 */ --c-bg-hover: #E4EDFB; /* 行 hover / 选中浅底 */ --c-bg-header: #0B1426; /* 深色标题栏 / 顶栏（品牌贯穿） */ --c-bg-sidebar: #0B1426; /* 侧边栏 */ --c-bg-mask: rgba(15, 23, 42, .45); /* 弹窗遮罩 */ /* ---------- 边框 ---------- */ --c-border: #E3EAF3; --c-border-strong: #C7D4E6; --c-border-header: rgba(255, 255, 255, .12); /* ---------- 文字 ---------- */ --c-text: #1E2A3F; --c-text-secondary: #5C6B84; --c-text-muted: #94A1B8; --c-text-on-dark: #E8EEF7; /* 深底上的文字 */ --c-text-on-dark-muted: rgba(232, 238, 247, .65); /* ---------- 主色（电光蓝） ---------- */ --c-primary: #2563eb; --c-primary-hover: #3B82f6; --c-primary-active: #1D4ED8; --c-primary-soft: #E8F1FF; /* 主色浅底（标签/选中） */ --c-primary-soft-border: #BFD9FF; /* ---------- 语义色 ---------- */ --c-success: #16A34A; --c-success-soft: #ECFDF3; --c-success-border: #BBF7D0; --c-warning: #D97706; --c-warning-soft: #FFFAEB; --c-warning-border: #FDE68A; --c-danger: #DC2626; --c-danger-soft: #FEF2F2; --c-danger-border: #FECACA; --c-info: #2563eb; /* ---------- 品牌金（商务点缀：卡片顶线 / 主操作强调） ---------- */ --c-gold: #C9A24B; --c-gold-soft: #FBF6E9; /* ---------- 字体 ---------- */ --font-sans: "Microsoft YaHei", "PingFang SC", -apple-system, BlinkMacSystemFont, Arial, sans-serif; --font-mono: "JetBrains Mono", "SFMono-Regular", Consolas, monospace; --fs-xs: 12px; --fs-sm: 13px; --fs-base: 15px; /* 基础字号（正文/表格） */ --fs-md: 16px; --fs-lg: 18px; --fs-xl: 20px; --fs-2xl: 24px; --lh-base: 1.6; --fw-regular: 400; --fw-medium: 500; /* ---------- 间距（4px 基准） ---------- */ --sp-1: 4px; --sp-2: 8px; --sp-3: 12px; --sp-4: 16px; --sp-5: 20px; --sp-6: 24px; --sp-8: 32px; /* ---------- 圆角 ---------- */ --radius-sm: 6px; --radius-md: 8px; --radius-lg: 12px; /* ---------- 阴影 ---------- */ --shadow-card: 0 2px 6px rgba(23, 44, 89, .05), 0 10px 24px rgba(23, 44, 89, .08); --shadow-pop: 0 18px 44px rgba(23, 44, 89, .18); /* ---------- 过渡 ---------- */ --transition: .2s ease; /* ---------- 表格 ---------- */ --table-row-h: 44px; /* 加大行高，更易扫读 */ --table-zebra-odd: var(--c-bg-card); --table-zebra-even: var(--c-bg-subtle); --tbl-head: linear-gradient(180deg, #E0EBFF 0%, #F1F6FE 100%); /* ---------- 布局 ---------- */ --header-h: 50px; --sidebar-w: 210px; } /* ===================================================================== * 暗色主题 * 科技感主力：深蓝灰底 + 电光蓝提亮 + 斑马纹微差 * ===================================================================== */ [data-theme="dark"] { --c-bg-page: #111B2E; --c-bg-card: #182438; --c-bg-subtle: #16202F; /* 斑马纹偶数行 */ --c-bg-hover: #22304A; --c-bg-header: #0B1426; --c-bg-sidebar: #0B1426; --c-bg-mask: rgba(0, 0, 0, .6); --c-border: #2C3B54; --c-border-strong: #3D4F6D; --c-border-header: rgba(255, 255, 255, .1); --c-text: #E2E8F0; --c-text-secondary: #94A3B8; --c-text-muted: #64748B; --c-text-on-dark: #E8EEF7; --c-text-on-dark-muted: rgba(232, 238, 247, .65); /* 暗底上主色提亮，保证对比与发光感 */ --c-primary: #4096ff; --c-primary-hover: #69b1ff; --c-primary-active: #1677ff; --c-primary-soft: #15294A; --c-primary-soft-border: #1D4ED8; --c-success: #22C55E; --c-success-soft: rgba(34, 197, 94, .14); --c-success-border: rgba(34, 197, 94, .35); --c-warning: #F59E0B; --c-warning-soft: rgba(245, 158, 11, .14); --c-warning-border: rgba(245, 158, 11, .35); --c-danger: #EF4444; --c-danger-soft: rgba(239, 68, 68, .14); --c-danger-border: rgba(239, 68, 68, .35); --c-info: #4096ff; --shadow-card: 0 2px 6px rgba(0, 0, 0, .35), 0 12px 30px rgba(0, 0, 0, .42); --shadow-pop: 0 18px 44px rgba(0, 0, 0, .55); --c-gold: #D4B04F; --c-gold-soft: rgba(212, 176, 79, .12); --table-zebra-odd: var(--c-bg-card); --table-zebra-even: var(--c-bg-subtle); --tbl-head: linear-gradient(180deg, rgba(64, 150, 255, .14) 0%, rgba(64, 150, 255, .05) 100%); }