/* ============================================================ 星航 Atlas · 设计 Token(单一数据源) 换肤方式: · 换主题色 → 改 :root 的 --brand-h(或给 加 data-brand="blue" 等预设) · 换明暗 → 给 加 data-theme="dark" 组件只引用「语义 token(--color-* / --s-* / --radius-* ...)」, 不直接使用具体色值,方便整体换肤。 依赖:OKLCH(Chrome 111+ / Safari 15.4+);主色由色相派生,换 hue 时明度自动一致。 ============================================================ */ :root{ /* ========== ① 主题输入(改这里换主题) ========== */ --brand-h: 135; /* 主色相:135 清新绿(默认) */ --brand-c: 0.16; /* 主色彩度 */ color-scheme: light; /* ========== ② 品牌色阶(由 hue 派生) ========== */ --brand: oklch(0.60 var(--brand-c) var(--brand-h)); --brand-bright: oklch(0.70 calc(var(--brand-c) - 0.01) var(--brand-h)); --brand-strong: oklch(0.44 calc(var(--brand-c) - 0.04) var(--brand-h)); --brand-soft: oklch(0.95 0.045 var(--brand-h)); --brand-line: oklch(0.86 0.085 var(--brand-h)); /* ========== ③ 中性色阶(略带主色调,整体协调) ========== */ --neutral-bg: oklch(0.975 0.010 var(--brand-h)); --neutral-surf: #ffffff; --neutral-surf2: oklch(0.965 0.012 var(--brand-h)); --ink: oklch(0.23 0.028 255); /* 深墨蓝(冷色,近固定) */ --ink-2: oklch(0.48 0.020 255); --ink-3: oklch(0.68 0.018 255); --hairline: oklch(0.92 0.012 var(--brand-h)); --hairline-2: oklch(0.88 0.015 var(--brand-h)); /* ========== ④ 状态色(五态;"熟练"= 主色) ========== */ --state-master: var(--brand); --state-improve: #d49a26; --state-weak: #8499b3; --state-rust: #ef8038; --state-new: #d3dad2; /* ========== ⑤ 语义 token(组件只用这些) ========== */ --color-bg: var(--neutral-bg); --color-surface: var(--neutral-surf); --color-surface-2: var(--neutral-surf2); --color-text: var(--ink); --color-text-muted: var(--ink-2); --color-text-subtle: var(--ink-3); --color-primary: var(--brand); --color-primary-strong:var(--brand-strong); --color-primary-soft: var(--brand-soft); --color-primary-line: var(--brand-line); --color-on-primary: #ffffff; --color-border: var(--hairline); --color-border-strong: var(--hairline-2); --s-master: var(--state-master); --s-improve: var(--state-improve); --s-weak: var(--state-weak); --s-rust: var(--state-rust); --s-new: var(--state-new); /* ========== ⑥ 效果 ========== */ --glow: 0 8px 22px oklch(0.60 var(--brand-c) var(--brand-h) / .25); --shadow-sm: 0 1px 2px rgba(15,24,32,.04), 0 4px 14px rgba(15,24,32,.05); --shadow: 0 10px 30px rgba(15,24,32,.07), 0 30px 60px rgba(15,24,32,.06); /* ========== ⑦ 排版 ========== */ --font-mono: "Space Mono", ui-monospace, monospace; --font-sans: "Noto Sans SC", "PingFang SC", sans-serif; --fs-xs:11px; --fs-sm:13px; --fs-md:15px; --fs-lg:18px; --fs-xl:23px; --fs-2xl:34px; --fs-display:62px; --fw-light:300; --fw-regular:400; --fw-medium:500; --fw-bold:700; /* ========== ⑧ 圆角 / 间距 ========== */ --radius-xs:8px; --radius-sm:12px; --radius-md:16px; --radius-lg:22px; --radius-pill:999px; --radius-device:44px; --space-1:4px; --space-2:8px; --space-3:12px; --space-4:16px; --space-5:20px; --space-6:24px; --space-8:32px; } /* ============================================================ 暗夜模式:仅覆盖语义层,组件无需改动 ============================================================ */ [data-theme="dark"]{ color-scheme: dark; --color-bg: oklch(0.16 0.030 var(--brand-h)); --color-surface: oklch(0.20 0.030 var(--brand-h)); --color-surface-2: oklch(0.24 0.030 var(--brand-h)); --color-text: #e9edf2; --color-text-muted: #8b94a6; --color-text-subtle: #525c70; --color-primary: oklch(0.82 0.18 var(--brand-h)); /* 暗底更亮,荧光感 */ --color-primary-strong:oklch(0.88 0.18 var(--brand-h)); --color-primary-soft: oklch(0.30 0.06 var(--brand-h)); --color-primary-line: oklch(0.42 0.09 var(--brand-h)); --color-on-primary: oklch(0.16 0.05 var(--brand-h)); --color-border: oklch(1 0 0 / .09); --color-border-strong: oklch(1 0 0 / .15); --s-master: var(--color-primary); --glow: 0 0 24px oklch(0.82 0.18 var(--brand-h) / .5); --shadow-sm: none; --shadow: 0 20px 50px rgba(0,0,0,.45); } /* ============================================================ 预设主题色:给 加 data-brand 即可 ============================================================ */ [data-brand="green"] { --brand-h:135; } [data-brand="teal"] { --brand-h:185; } [data-brand="blue"] { --brand-h:250; } [data-brand="violet"] { --brand-h:300; } [data-brand="coral"] { --brand-h:25; }