/* ============================================================ * Longlight - 长光雨滴小站 | 设计令牌 tokens.css * 来源：~README/项目架构.js → 风格 * 职责：颜色、字阶、圆角、阴影、间隔、动效、边框（不含任何选择器样式） * 用法： * 主题：在 上设置 data-theme="light" | "dark" * ============================================================ */ /* ============================================================ * 1. 全局令牌（与主题无关） * ============================================================ */ :root { /* ---- 字体族 ---- */ --font-heading: 'Noto Serif SC', '思源宋体', serif; --font-body: 'Noto Sans SC', '思源黑体', sans-serif; --font-mono: 'IBM Plex Mono', monospace; --font-quote: 'Newsreader Italic', 'Noto Serif SC', serif; /* ---- 字阶（字重 字号/行高 字体族，可直接用于 font 简写；字距见下方 --ls-*） 注意：行高必须带 px 单位，否则 font 简写会把无单位数值当作倍数（如 13px/20 → 行高 260px）---- */ --text-display: 700 56px/64px var(--font-heading); --text-h1: 700 40px/48px var(--font-heading); --text-h2: 650 32px/40px var(--font-heading); --text-h3: 600 24px/32px var(--font-heading); --text-h4: 600 20px/28px var(--font-heading); --text-body-l: 400 18px/30px var(--font-body); --text-body: 400 16px/26px var(--font-body); --text-ui: 500 14px/22px var(--font-body); --text-caption: 500 12px/18px var(--font-body); --text-mono: 400 13px/18px var(--font-mono); /* ---- 字距（与字阶配套，字距为 0 的层级不定义）---- */ --ls-display: -0.02em; --ls-h1: -0.02em; --ls-h2: -0.01em; --ls-h3: -0.01em; --ls-caption: 0.06em; /* ---- 圆角 ---- */ --radius-btn: 2px; --radius-input: 2px; --radius-select: 2px; --radius-tag: 2px; --radius-checkbox: 2px; --radius-switch: 2px; --radius-switch-thumb: 1px; /* 开关滑块 18×18（风格.控件.开关） */ --radius-slider: 2px; --radius-card: 4px; --radius-modal: 6px; --radius-circle: 50%; /* 头像和状态点（风格.圆角）；其余一律取 0 */ /* ---- 间隔 ---- */ --space-icon-text: 8px; --space-btn-x: 0 18px; --space-input: 12px; --space-card: 24px; --space-card-lg: 32px; --space-form-label: 8px; --space-form-field: 16px; --space-form-group: 32px; --space-between-cards: 24px; --space-section: 80px; --space-section-lg: 120px; --space-page-mobile: 24px; --space-page-desktop: 48px; --space-grid: 24px; /* ---- 动效时长 & 缓动 ---- */ --duration-enter: 200ms; --duration-exit: 140ms; --duration-hover: 160ms; --duration-active: 120ms; --duration-focus: 120ms; --duration-expand: 220ms; --duration-page: 240ms; --duration-theme: 420ms; /* 投影底色切换的颜色交叉渐变（由 core/theme 读取以同步摘类时机） */ --duration-progress: 320ms; --duration-modal-overlay:160ms; --duration-modal-panel: 200ms; --duration-drawer: 240ms; --duration-tooltip: 120ms; --duration-skeleton: 1.6s; --stagger-item: 20ms; --stagger-max: 8; --ease-out: cubic-bezier(.2, .8, .2, 1); --ease-in: cubic-bezier(.4, 0, 1, 1); --ease-in-out: cubic-bezier(.4, 0, .2, 1); /* ---- 深色底 hover 背景（侧栏选中项，亮暗主题一致）---- */ --hover-bg-on-green: rgba(255, 255, 255, .06); /* ---- 遮罩（纯色，亮暗主题一致；禁止 backdrop-filter）---- */ --overlay: rgba(16, 22, 18, .48); /* ---- 边框样式（引用主题颜色变量）---- */ --border-default: 1px solid var(--line); --border-soft: 1px solid color-mix(in srgb, var(--line) 70%, transparent); --border-strong: 1px solid var(--green-900); --border-dashed: 1px dashed var(--line); --border-selected:2px solid var(--warm-600); --border-focus: 2px solid var(--focus); --border-error: 1px solid var(--danger); --border-success: 1px solid var(--success); /* ---- 语义别名（供 CUI 终端等旧命名引用，统一指向上方令牌）---- */ --bg-primary: var(--bg); --bg-surface: var(--surface); --bg-surface-emphasis: var(--surface-emphasis); --green-primary: var(--green-900); --green-secondary: var(--green-700); --green-vibrant: var(--green-500); --warm-orange: var(--warm-600); --amber: var(--amber-500); --border: var(--line); --error: var(--danger); } /* ============================================================ * 2. 主题 — 亮色 * ============================================================ */ [data-theme="light"] { /* 背景 */ --bg: #F6F2E8; --bg-secondary: #EDE8DA; --surface: #F6F2E8; --surface-emphasis: #FFFCF4; /* 绿色系 */ --green-900: #244A36; /* 主绿_深林 */ --green-700: #4F7355; /* 次绿_浅绿 */ --green-500: #8FAF6B; /* 生机绿 */ /* 强调色 */ --warm-600: #C87545; /* 暖橙_陶土 */ --amber-500: #D6A24A; /* 琥珀 */ /* 文字 */ --text-primary: #1E2821; --text-secondary: #657066; /* 线 & 状态 */ --line: #D6D0C0; --focus: #3D6B4E; --success: #5F8A5B; --danger: #B65C4A; /* 阴影 */ --shadow-1: 0 1px 2px rgba(30,40,33,.06); /* 微浮起和按钮 */ --shadow-2: 0 2px 8px rgba(30,40,33,.08); /* 卡片和菜单 */ --shadow-3: 0 12px 32px rgba(30,40,33,.12); /* 弹窗和抽屉 */ --shadow-focus: 0 0 0 2px var(--bg), 0 0 0 4px var(--focus); /* hover 背景 */ --hover-bg: #E4EAD9; --hover-bg-soft:#EDE8DA; --disabled-bg: #EDE8DA; /* 全息屏网格（仅亮色单独指定，暗色回退 --line / 0.15） */ --grid-line: #4F7355; --grid-opacity: 0.2; /* CUI 终端语法着色 */ --tok-symbol: #7A8C74; /* 特殊字符：art、连接符、分隔线 */ --tok-keyword: #2F6B43; /* 命令关键字 */ --tok-value: #A8653B; /* 命令的值 */ --tok-number: #B5802A; /* 数字 */ --tok-text: #1E2821; /* 普通文本 */ --tok-sub1: #3E7A5E; /* 子命令·1级 */ --tok-sub2: #3E6E82; /* 子命令·2级 */ --tok-sub3: #6A5F93; /* 子命令·3级 */ /* 选择框箭头（风格.控件.选择）：data URI 无法引用 var()，故按主题在此给出， 色值取自次文字 --text-secondary，使 components 层只引变量、不出现硬编码颜色 */ --select-arrow: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12'%3E%3Cpath d='M2.5 4.5 6 8l3.5-3.5' fill='none' stroke='%23657066' stroke-width='1.5'/%3E%3C/svg%3E"); } /* ============================================================ * 3. 主题 — 暗色 * ============================================================ */ [data-theme="dark"] { /* 背景 */ --bg: #101612; --bg-secondary: #0C110E; --surface: #18211A; --surface-emphasis: #1F2B22; /* 绿色系 */ --green-900: #8FB996; /* 主绿_浅苔 */ --green-700: #6F9274; /* 次绿_浅苔 */ --green-500: #8A8C77; /* 生机绿（架构原值 #8A8C77A 修正） */ /* 强调色 */ --warm-600: #D08A5A; /* 暖橙_陶土 */ --amber-500: #DEB15A; /* 琥珀（架构原值 #DE0B15A 修正） */ /* 文字 */ --text-primary: #EAE6DA; --text-secondary: #A8B0A4; /* 线 & 状态 */ --line: #2C3A2F; --focus: #B7D39A; --success: #7FAF78; --danger: #D07A66; /* 阴影 */ --shadow-1: 0 1px 2px rgba(0,0,0,.35); --shadow-2: 0 4px 12px rgba(0,0,0,.40); --shadow-3: 0 16px 40px rgba(0,0,0,.50); --shadow-focus: 0 0 0 2px var(--bg), 0 0 0 4px var(--focus); /* hover 背景 */ --hover-bg: rgba(255,255,255,.06); --hover-bg-soft:rgba(255,255,255,.04); --disabled-bg: var(--bg-secondary); /* CUI 终端语法着色 */ --tok-symbol: #5F7A65; --tok-keyword: #B9D9BD; --tok-value: #E0A96A; --tok-number: #E3C078; --tok-text: #EAE6DA; --tok-sub1: #95B8A2; --tok-sub2: #7FA8B4; --tok-sub3: #A79FC9; /* 选择框箭头：色值取自次文字 --text-secondary（暗色） */ --select-arrow: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12'%3E%3Cpath d='M2.5 4.5 6 8l3.5-3.5' fill='none' stroke='%23A8B0A4' stroke-width='1.5'/%3E%3C/svg%3E"); }