/* ============================================================ VIVI 设计系统 · tokens.css · v1.0 (2026-08-27) ------------------------------------------------------------ 唯一标准。新项目只引这一个文件，⛔ 不要再自己发明色号。 老项目不动（56 个线上页面一个都不改）。 这里的值不是我审美挑的，是从全库实测出来的既成事实： · --bg/--paper/--ink/--salmon/--teal 四组在 20+ 文件里零分叉 ⇒ 它们事实上已经是标准，这里只是把它写下来 · 每个强调色都配了 *-ink 文字安全版（原色当文字读不清，实测见下） · 圆角/间距/时长取全库最高频档，不是随手取整 用法： 然后只用 var() ============================================================ */ :root { /* ---------- 1. 表面 ---------- */ --bg: #eff3ec; /* 页面底 · 冷灰绿，全库 51 文件零分叉 */ --paper: #fcfbf7; /* 卡片/纸面 · 暖白 */ --paper-soft: #fffdf9; /* 浮起层（弹层/吸顶）比 paper 再亮一档 */ --paper-warm: #fffdf8; /* 个人网页系的纸色（26 文件），换肤时替 --paper */ /* ---------- 2. 文字 ---------- */ --ink: #2d2626; /* 正文 · on bg 13.20 AAA / on paper 14.31 AAA */ --muted: #6b6771; /* 次要 · on bg 4.92 AA / on paper 5.33 AA */ --ink-invert: #fcfbf7; /* 深底上的文字 */ /* ---------- 3. 描边 ---------- */ --line: rgba(27, 34, 48, 0.12); /* 默认 1px solid 用它（全库 1079 次） */ --line-strong: rgba(27, 34, 48, 0.24); /* 强调/hover 边 */ --line-dashed: rgba(27, 34, 48, 0.20); /* 1px dashed 用它（占位/待填） */ /* ---------- 4. 强调色 ---------- ⚠️ 三个版本不是重复： --x 原色，只做「填充/底/图标块/装饰」——当文字一律不达标 --x-ink 压暗版，做「文字/链接/小图标」 --on-accent 压在原色底上的文字色（固定深墨，⛔ 深色主题也不许翻） ⛔ 强调色底上永不压白字。纯白口径实测： salmon 2.76 / teal 2.86 / sky 2.26 / rose 1.72 / gold 1.60 / sand 1.37 / acid 1.33 —— 七个全不合格，差得不是一点。 ✅ 强调色底上压 --on-accent：salmon 5.37 / teal 5.18 / sky 6.55 / rose 8.64 / gold 9.25 / sand 10.79 / acid 11.15（两个主题都成立，因为它不翻） ⚠️ *-ink 的达标口径不是 --paper，是「它实际会落在的最深那层浅底」： .v-tag 的底是原色 22-34% tint，.v-chip 选中态/.v-tag 默认态的底是 --mint。 旧值只按 paper 调过（4.50-4.55，刚够 AA），落到 tint 上全部掉到 3.67-4.16 ✗ ⇒ 08-27 七个全压暗一档，实测（不是估的）： 最深底上 acid 4.59 / sand 4.61 / gold 4.64 / rose 4.65 / sky 4.66 / salmon 4.68（默认 mint 底 4.64） 同一批在 paper 上 4.97-5.75，深色纸面上 8.26-13.78 全 AAA。 ⛔ 别再往回调亮，会把 7 个 tag 和 chip 选中态一起打回不合格。 */ --on-accent: #2d2626; /* 强调色底上的文字。⛔ 不是 var(--ink)，深色主题下 ink 会翻 */ /* 强调色底的 hover 提亮基准。⛔ 也不许翻，理由同 --on-accent： 往 --paper 混的话，深色主题下 --paper 是深色 ⇒ hover 变成「越摸越暗」， 而压在上面的 --on-accent 是固定深墨 ⇒ salmon 底实测掉到 4.27 ✗。 固定往纯白提亮：salmon 86% 混白 = 6.21 AA，两个主题同一个数。 */ --accent-lift: #ffffff; --salmon: #ef7a5c; --salmon-ink: #9a4e3b; /* 主强调 · 全库 75 文件 */ --teal: #3ca99b; --teal-ink: #29736a; /* 次强调 */ --acid: #d8ea4f; --acid-ink: #697327; /* 高亮荧光 */ --sky: #6bb0ff; --sky-ink: #406999; --gold: #f2c75c; --gold-ink: #7e672f; --rose: #f2b5ca; --rose-ink: #805f6b; --sand: #f3d8b4; --sand-ink: #786a58; --mint: #dceee7; /* 极浅底，只做块填充，没有 ink 版（配 --teal-ink 用） */ /* ---------- 5. 语义色 ---------- 全库 71 个项目只有 6 个定义过语义色（8%）⇒ 这一档是新建的， 但值不是新发明：--bad 取 Demo Night 系已在用的 #e5484d（31 文件）。 同样两版本：原色做底/图标，-ink 版做文字。 */ --ok: #3ca99b; --ok-ink: #29736a; /* = teal，别再另发明绿 */ --warn: #f2c75c; --warn-ink: #7e672f; /* = gold */ --bad: #e5484d; --bad-ink: #b0393d; /* on bg 5.35 AA / on paper 5.80 AA */ /* ⛔ --bad 原色当文字不达标（on bg 3.49 / on paper 3.78），且它底上白字和黑字都不合格 （白 3.78 / ink 3.79）⇒ 红底上不放小字，只做 8px 圆点/细条/图标。 ⚠️ 唯一的例外（.v-agenda-live 直播角标）改成压 --bad-ink 打底 = 5.80 AA， ⛔ 别再拿「大字号口径 3.0」给 10px 的角标开绿灯——10px 不是大字。 */ /* ---------- 6. 排版 ---------- 字体族取全库前 4 名（62/46/42/39 个项目），不是审美挑的。 ⛔ Cormorant Garamond(9) / ZCOOL XiaoWei(2) / Nunito(1) 是单页口味，不进标准。 ⚠️ 全库只有 1 个文件有命名字号阶梯（v-9steps），下面这套照它的骨架， 但 display 档改成 clamp（她实际写了 818 处 clamp，固定 px 会和习惯打架）。 */ --font-display: "Noto Serif SC", "Songti SC", Georgia, serif; --font-body: "PingFang SC", "Noto Sans SC", -apple-system, system-ui, sans-serif; --font-mono: "IBM Plex Mono", "SF Mono", ui-monospace, monospace; --font-hand: "Shantell Sans", "Bradley Hand", cursive; /* 手写批注，慎用 */ --font-script: "ZCOOL QingKe HuangYou", var(--font-display); /* 屏显大标题装饰 */ /* 流体档（首屏/大标题）——上下限都写死，⛔ 不要只写 vw */ --t-hero: clamp(40px, 7.2vw, 108px); --t-h1: clamp(28px, 4.4vw, 56px); --t-h2: clamp(22px, 2.8vw, 34px); --t-h3: clamp(18px, 2.0vw, 24px); /* 固定档（正文/UI，不跟视口变） */ --t-lede: 17px; /* 首屏那段导语 */ --t-body: 15px; /* 正文默认 */ --t-sm: 13px; /* 标签/注释 */ --t-xs: 11px; /* 徽章/角标，⛔ 别再往下 */ --lh-tight: 1.2; /* 大标题 */ --lh-normal: 1.5; /* UI */ --lh-relaxed: 1.65; /* 正文段落 */ --ls-tight: -0.01em; --ls-wide: 0.08em; /* 全大写小标签用 */ /* ---------- 7. 间距 ---------- ⚠️ 这是 2px 网格，不是 4/8 网格。 实测频次：12px(1085) 10px(1052) 8px(1027) 14px(809) 16px(694) 18px(590) 6px(517) —— 14px 用得比 16px 还多，18/22 这些奇数档和 16/24 平级。 ⛔ 别按 4/8 制重排，会和现存 1600+ 处声明打架。 */ --s-1: 4px; --s-2: 6px; --s-3: 8px; --s-4: 10px; --s-5: 12px; /* 最高频，卡内默认 gap */ --s-6: 14px; --s-7: 16px; --s-8: 18px; --s-9: 22px; --s-10: 28px; --s-11: 36px; --s-12: 48px; --pad-card: clamp(14px, 2.4vw, 22px); /* 卡片内边距 */ --pad-sect: clamp(28px, 5vw, 72px); /* 分区上下留白 */ /* ---------- 8. 圆角 ---------- 这四档是 12-13 个项目各自独立收敛到的同一组数字（不是巧合），直接固化。 sm 档全库没共识，取声明数最高的 12px。 */ --r-xs: 8px; --r-sm: 12px; --r-md: 18px; --r-lg: 24px; --r-xl: 34px; --r-pill: 999px; /* 58 个项目在用，chip/按钮一律它 */ /* ---------- 9. 描边 ---------- 全库最健康的一层：`1px solid var(--line)` 覆盖 51 个项目、1031 处。 ⛔ 描边风格别再发明，只在这四档宽度里挑。 */ --bw: 1px; /* 默认 */ --bw-mid: 1.5px; /* 强调卡（配 --line-strong） */ --bw-bold: 2px; /* 选中态 / 硬描边卡（配 --ink） */ --bw-heavy: 3px; /* 大色块分隔 */ /* ---------- 10. 阴影 ---------- 暖褐 tint rgba(53,42,33,·) 已在 8-11 个项目复现 ⇒ 色调是共识，几何不是 （全库 902 个不同取值、`--shadow` 一个名字下 73 个值）。这里固定 tint + 三档 blur。 */ --sh-1: 0 8px 20px rgba(53, 42, 33, 0.06); /* 贴地：卡片静置 */ --sh-2: 0 18px 48px rgba(53, 42, 33, 0.08); /* 浮起：hover / 吸顶 */ --sh-3: 0 28px 78px rgba(53, 42, 33, 0.12); /* 抬高：弹层 / 模态 */ --sh-hard: 8px 8px 0 rgba(45, 38, 38, 0.9); /* 硬阴影（描边拼贴风专用，⛔ 别和上面三档混用） */ /* ---------- 11. 动效 ---------- 180ms 是事实默认（35 项目 / 307 处）。120-200 挤了 6 个档、肉眼无差 ⇒ 收成 3 档。 expo-out 曲线有 12 个项目独立选中，回弹曲线 6 个。 ⚠️ 53 个项目还在用裸 `ease`（浏览器默认、观感最平）⇒ 新页面别再写裸 ease。 */ --dur-fast: 120ms; /* 按下/颜色变化 */ --dur: 180ms; /* 默认 */ --dur-slow: 300ms; /* 展开/位移 */ --dur-enter: 700ms; /* data-reveal 入场 */ --ease: cubic-bezier(0.22, 1, 0.36, 1); /* expo-out，默认用它 */ --ease-bounce: cubic-bezier(0.24, 1.4, 0.44, 1); /* 带过冲，只给"出现"用 */ /* ---------- 12. 版面与层级 ---------- z-index 全库 0 个项目 tokenize（1376 处字面量、55 个不同值）⇒ 这一档是新建的。 ⚠️ 断点只能写在注释里（CSS 变量不能用于 @media）： 640 手机 · 780 竖平板（她最常用的那档）· 1024 横平板 · 1280 桌面 */ --width: min(1200px, calc(100vw - 40px)); --width-narrow: min(760px, calc(100vw - 32px)); /* 长文/单栏 */ --z-base: 1; --z-raised: 10; /* hover 抬起的卡 */ --z-sticky: 100; /* topbar / 吸顶筛选条 */ --z-dropdown: 200; --z-overlay: 800; /* 模态背板 */ --z-modal: 900; --z-toast: 1000; /* 永远在最上面 */ } /* ============================================================ 深色主题 · [data-theme="dark"] ------------------------------------------------------------ 全库 21 个项目有深色底，但只有 2 个做对了配对（vivi-mind-evolution 16/16 同名、crybaby-radar 14/14 同名）⇒ 照它们的做法：**同名覆写，一个都不新增**。 强调色在深底上必须提亮，压暗版（*-ink）在深色下反向失效。 实测：深底纸面 #221c1a 上，提亮版全部 AAA（8.26–13.78）。 ============================================================ */ [data-theme="dark"] { --bg: #16110f; --paper: #221c1a; --paper-soft: #2b2422; --paper-warm: #241d1a; --ink: #f2ece4; /* on bg 15.96 AAA / on paper 14.33 AAA */ --muted: #a49c95; /* on bg 6.93 AA / on paper 6.22 AA */ --ink-invert: #16110f; --line: rgba(242, 236, 228, 0.14); --line-strong: rgba(242, 236, 228, 0.28); --line-dashed: rgba(242, 236, 228, 0.22); /* ⚠️ --mint 必须跟着翻，⛔ 别漏。它是浅色实色（不是半透明也不是 color-mix）， 漏掉的话 chip 选中态/tag/提示条在深色下还是浅绿底，深色文字压上去 1.03 —— 等于全白。 08-27 修：改成 teal 12% 溶进深纸，深 ink 压上去 12.04 AAA / 深 teal-ink 7.24 AAA。 */ --mint: #252d29; /* ⛔ --on-accent 故意不翻。强调色原底在深浅两个主题里是同一个颜色， 压它的文字也必须是同一个深墨；跟着 ink 翻成浅色 = salmon 底上浅字 2.35 ✗。 */ /* 原色不变（填充/图标块在深底上照样对），只把 *-ink 换成提亮版 */ --salmon-ink: #f6a08a; /* on paper 8.26 AAA */ --teal-ink: #6fc9bc; /* 8.61 AAA */ --acid-ink: #e2f27a; /* 13.78 AAA */ --sky-ink: #9ccbff; /* 9.93 AAA */ --gold-ink: #f7d98c; /* 12.22 AAA */ --rose-ink: #f5c8d8; /* 11.32 AAA */ --sand-ink: #f0dcc0; /* 12.57 AAA */ --ok-ink: #6fc9bc; --warn-ink: #f7d98c; --bad-ink: #f08f92; /* 深底上阴影几乎看不见，改用更黑更散的 */ --sh-1: 0 8px 20px rgba(0, 0, 0, 0.35); --sh-2: 0 18px 48px rgba(0, 0, 0, 0.45); --sh-3: 0 28px 78px rgba(0, 0, 0, 0.55); --sh-hard: 8px 8px 0 rgba(0, 0, 0, 0.8); }