/* ========================================================================== tokens.css — Design_System 设计令牌（web-console-rebuild 全新令牌体系） ========================================================================== 本文件是控制台视觉语言的唯一事实来源（single source of truth）：配色、 排版、间距、圆角、阴影、动效。其余样式表（base / layout / components / views / utilities）只能消费这些自定义属性，禁止硬编码原始值（R6.1/R6.7）。 主题：现代「深色石板」暗色 UI + 鲜明蓝色强调色。 -------------------------------------------------------------------------- WCAG AA 对比度登记表（Contrast Registry） — R6.4 / R6.5 / R6.6 / R6.8 -------------------------------------------------------------------------- 下方每一行登记一个「前景/背景」配对及其实测对比度。比值以 WCAG 2.x 相对 亮度公式计算（见 design.md「对比度矩阵」与 Property 10 测试，task 1.3 会 解析本登记表并独立复算核验）。阈值约定： - body : 正文/普通文本 ≥ 4.5:1 - large : 大号文本/图标等非文本图形 ≥ 3:1 - focus : 键盘焦点指示 ≥ 3:1 格式（供测试解析，勿改动）：@contrast on = :1 (min ) @contrast --fg-default on --bg-base = 16.02:1 (min 4.5) @contrast --fg-default on --bg-surface = 14.64:1 (min 4.5) @contrast --fg-default on --bg-raised = 12.88:1 (min 4.5) @contrast --fg-muted on --bg-base = 9.63:1 (min 4.5) @contrast --fg-muted on --bg-surface = 8.81:1 (min 4.5) @contrast --fg-muted on --bg-raised = 7.75:1 (min 4.5) @contrast --fg-subtle on --bg-base = 6.15:1 (min 4.5) @contrast --fg-subtle on --bg-surface = 5.62:1 (min 4.5) @contrast --fg-subtle on --bg-raised = 4.95:1 (min 4.5) @contrast --accent-fg on --accent = 4.63:1 (min 4.5) @contrast --accent-fg on --accent-hover = 5.53:1 (min 4.5) @contrast --accent-fg on --accent-active = 7.47:1 (min 4.5) @contrast --link on --bg-base = 7.49:1 (min 4.5) @contrast --link on --bg-surface = 6.85:1 (min 4.5) @contrast --success on --bg-base = 7.45:1 (min 4.5) @contrast --success on --bg-surface = 6.81:1 (min 4.5) @contrast --warning on --bg-base = 7.50:1 (min 4.5) @contrast --warning on --bg-surface = 6.85:1 (min 4.5) @contrast --danger on --bg-base = 5.65:1 (min 4.5) @contrast --danger on --bg-surface = 5.16:1 (min 4.5) @contrast --info on --bg-base = 7.49:1 (min 4.5) @contrast --info on --bg-surface = 6.85:1 (min 4.5) @contrast --accent on --bg-base = 4.08:1 (min 3) @contrast --accent on --bg-surface = 3.73:1 (min 3) @contrast --accent on --bg-raised = 3.28:1 (min 3) @contrast --border on --bg-base = 4.12:1 (min 3) @contrast --border on --bg-surface = 3.77:1 (min 3) @contrast --border on --bg-raised = 3.31:1 (min 3) @contrast --border-strong on --bg-base = 6.15:1 (min 3) @contrast --border-strong on --bg-surface = 5.62:1 (min 3) @contrast --focus-ring on --bg-base = 9.73:1 (min 3) @contrast --focus-ring on --bg-surface = 8.89:1 (min 3) @contrast --focus-ring on --bg-raised = 7.82:1 (min 3) 注：--border-subtle 仅用于装饰性分隔（非必要图形，不属 R6.5 范畴），不登记。 ========================================================================== */ :root { /* ---------------------------------------------------------------------- 颜色 — 背景（升序：base 最暗 → raised 最亮） ---------------------------------------------------------------------- */ --bg-base: #0d1117; /* 应用画布 / 根背景 */ --bg-surface: #161b22; /* 卡片、面板、抬升容器 */ --bg-raised: #21262d; /* 嵌套表面、输入框、hover 填充 */ /* 颜色 — 前景文本（置于背景之上） --fg-default 16.02/14.64/12.88:1 · --fg-muted 9.63/8.81/7.75:1 --fg-subtle 6.15/5.62/4.95:1（base/surface/raised，均 ≥ 4.5 body） */ --fg-default: #e6edf3; /* 正文、标题 */ --fg-muted: #b1bac4; /* 次要 / 辅助文本 */ --fg-subtle: #8b949e; /* 说明文字、标签、占位 */ /* ---------------------------------------------------------------------- 颜色 — 强调色（品牌蓝） --accent-fg(#fff) on --accent = 4.63:1（按钮正文 ≥ 4.5 body） --accent 作为图标/大字/非文本图形：on bg ≥ 3（large/graphic） ---------------------------------------------------------------------- */ --accent: #1f6feb; /* 主操作、激活态填充 */ --accent-hover: #1a63d6; /* hover（加深，白字 5.53:1） */ --accent-active: #1750b0; /* pressed / active（白字 7.47:1） */ --accent-fg: #ffffff; /* 置于 --accent 填充上的文本/图标 */ --accent-muted: rgba(31, 111, 235, 0.15); /* 淡色强调背景 */ --accent-subtle: rgba(31, 111, 235, 0.08); /* 极淡高亮填充 */ /* 链接色（正文链接，置于背景上 ≥ 4.5 body）= info 色，7.49/6.85:1 */ --link: #58a6ff; --link-hover: #79c0ff; /* ---------------------------------------------------------------------- 颜色 — 状态语义（作为背景上的文本 ≥ 4.5；配 *-muted 作淡色底） success 7.45/6.81 · warning 7.50/6.85 · danger 5.65/5.16 · info 7.49/6.85 ---------------------------------------------------------------------- */ --success: #3fb950; --success-muted: rgba(63, 185, 80, 0.15); --warning: #d29922; --warning-muted: rgba(210, 153, 34, 0.15); --danger: #f85149; --danger-muted: rgba(248, 81, 73, 0.15); --info: #58a6ff; --info-muted: rgba(88, 166, 255, 0.15); /* ---------------------------------------------------------------------- 颜色 — 边框与非文本图形（对相邻背景 ≥ 3:1，R6.5） --border 4.12/3.77/3.31 · --border-strong 6.15/5.62（base/surface） ---------------------------------------------------------------------- */ --border: #6e7681; /* 有意义的控件边框 / 轮廓 */ --border-strong: #8b949e; /* 强调分隔线 */ --border-subtle: #30363d; /* 装饰性分隔（非必要图形，不登记对比度） */ /* ---------------------------------------------------------------------- 焦点环（键盘焦点指示，对相邻背景 ≥ 3:1，R6.6） --focus-ring 9.73/8.89/7.82:1（base/surface/raised） ---------------------------------------------------------------------- */ --focus-ring: #79c0ff; --focus-ring-width: 2px; --focus-ring-offset: 2px; /* ---------------------------------------------------------------------- 排版 — 字体族 ---------------------------------------------------------------------- */ --font-sans: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, "PingFang SC", "Microsoft YaHei", sans-serif; --font-mono: "SFMono-Regular", "JetBrains Mono", Consolas, "Liberation Mono", Menlo, monospace; /* 字号比例 */ --fs-xs: 11px; --fs-sm: 12px; --fs-base: 13px; --fs-md: 14px; --fs-lg: 16px; --fs-xl: 20px; --fs-2xl: 24px; /* 行高 */ --lh-tight: 1.2; --lh-snug: 1.35; --lh-normal: 1.5; /* 字重 */ --fw-normal: 400; --fw-medium: 500; --fw-semibold: 600; --fw-bold: 700; /* ---------------------------------------------------------------------- 间距比例（4px 基准） ---------------------------------------------------------------------- */ --sp-1: 4px; --sp-2: 8px; --sp-3: 12px; --sp-4: 16px; --sp-5: 20px; --sp-6: 24px; --sp-7: 28px; --sp-8: 32px; /* ---------------------------------------------------------------------- 圆角 ---------------------------------------------------------------------- */ --radius-sm: 4px; --radius-md: 8px; --radius-lg: 12px; --radius-full: 9999px; /* ---------------------------------------------------------------------- 阴影（为暗色表面调校） ---------------------------------------------------------------------- */ --shadow-1: 0 1px 2px rgba(1, 4, 9, 0.5); --shadow-2: 0 4px 12px rgba(1, 4, 9, 0.55); --shadow-3: 0 12px 32px rgba(1, 4, 9, 0.6); /* ---------------------------------------------------------------------- 动效 — 缓动与时长（分组折叠用 --dur-base = 300ms，R3.1） ---------------------------------------------------------------------- */ --ease-standard: cubic-bezier(0.4, 0, 0.2, 1); --ease-out: cubic-bezier(0, 0, 0.2, 1); --dur-fast: 150ms; --dur-base: 300ms; /* ---------------------------------------------------------------------- 布局尺寸 ---------------------------------------------------------------------- */ --sidebar-width: 240px; --content-max-width: 1440px; /* 堆叠层级 */ --z-base: 1; --z-sticky: 100; --z-overlay: 1000; --z-modal: 1300; --z-toast: 1500; }