/* 生成物：本文件由 tools/web/sync-sample-tokens.mjs 从 apps/web/src/styles/tokens.css 回写，勿手改。 应用那份是唯一真值；要改样张的令牌，改应用那份再跑 `node tools/web/sync-sample-tokens.mjs .` 同步。 */ /* 阳光玻璃 L1 令牌 —— 全站唯一真值。 纪律：本文件只放 --b- 变量。:root 放与主题无关的几何／字阶／间距／材质参数； html[data-theme="light"] 与 html[data-theme="dark"] 各放一套同名语义色，只有值不同。 --m-* 动效变量不在这里，在 styles/motion.css（放错会被 tools/web/assert-primitives.mjs 拦下）。 与样张的关系：本文件是真值，样张目录 docs/prototypes/2026-09-20-Liquid-Glass最终方案-任务详情阳光玻璃/style-p-sunlit/tokens.css 由 tools/web/sync-sample-tokens.mjs 从本文件回写，`make styles-gate` 跑该脚本的 --check 模式只读比对两边不漂移。 要改样张，改这里再跑 `node tools/web/sync-sample-tokens.mjs .`（不带 --check）把样张同步过去。 */ /* 风格 P · 阳光玻璃 Sunlit（策划黄 × Liquid Glass）· 设计 token 与 A2 同一套变量名、同一套几何与材质参数，只换语义色：品牌黄 #FEBA0A（策划 0911 原型 --yellow）既做主要动作的 tint 也做光， 墨 #242421 做字与实心，绿 #2C8059 做完成，红金全部退出。圆角回到策划的 18。 （下面沿用 A2 的说明：） 纪律：本文件只放 --b- 变量。:root 放与主题无关的几何／字阶／间距／材质参数； html[data-theme="light"] 与 html[data-theme="dark"] 各放一套同名语义色，只有值不同。 文字色与底色写字面 hex（脚本可算对比度）；透明派生只用 rgb(r g b / a)。 相比第一版的变化： ① 亮色玻璃要看得见——玻璃底更透、饱和更高、边缘用 135° 镜面高光、下方有暖色焦散影； 环境光场加强到「玻璃背后有东西可折射」的程度，页底改为微暖的纸色，白卡因此从页底浮起。 ② 内容层逐元素给尺：字阶加 20／48 两档、正文行高 1.7、列表用索引数字、账本条与轨道线。 ③ 0920 打磨：主按钮改「着色玻璃」（顶部高光＋红光影，--b-primary-top／--b-primary-glow），大按钮 48，纸卡加纸边高光 --b-card-edge，页底再暖一档。 */ :root { /* 字体 */ --b-font-sans: -apple-system, BlinkMacSystemFont, "SF Pro Text", "SF Pro Display", "PingFang SC", "Hiragino Sans GB", "Helvetica Neue", "Microsoft YaHei UI", "Noto Sans CJK SC", system-ui, sans-serif; --b-font-num: -apple-system, BlinkMacSystemFont, "SF Pro Display", "SF Pro Text", "Helvetica Neue", "PingFang SC", system-ui, sans-serif; /* 字阶九档 */ --b-fs-12: 12px; --b-fs-13: 13px; --b-fs-15: 15px; --b-fs-17: 17px; --b-fs-20: 20px; --b-fs-22: 22px; --b-fs-28: 28px; --b-fs-40: 40px; --b-fs-48: 48px; --b-lh-tight: 1.08; --b-lh-title: 1.25; --b-lh-body: 1.7; --b-ls-title: -0.022em; --b-ls-display: -0.03em; --b-ls-cap: 0.04em; --b-measure: 62ch; /* 间距：4pt 基 */ --b-sp-1: 4px; --b-sp-2: 8px; --b-sp-3: 12px; --b-sp-4: 16px; --b-sp-5: 20px; --b-sp-6: 24px; --b-sp-7: 32px; --b-sp-8: 48px; --b-sp-9: 64px; /* 几何：同心圆角。卡 18 ／ 卡内块 12 ／ 控件 12 ／ 图 10 ／ 小标签 8 ／ 弹层 22 ／ 胶囊 */ --b-radius-card: 18px; --b-radius-inner: 12px; --b-radius-control: 12px; --b-radius-thumb: 10px; --b-radius-chip: 8px; --b-radius-sheet: 22px; --b-radius-pill: 999px; --b-container: 1200px; --b-gutter: 24px; --b-margin: 40px; --b-topbar-h: 56px; --b-control-h: 40px; --b-control-h-sm: 32px; --b-control-h-lg: 48px; --b-dock-h: 64px; --b-dock-bottom: 28px; --b-fab-size: 44px; --b-panel-w: 372px; --b-panel-h: 560px; --b-sheet-w: 440px; --b-sheet-w-lg: 540px; --b-cover-w: 200px; --b-cover-h: 176px; --b-stamp: 96px; --b-mascot-panel: 44px; --b-idx: 28px; --b-side-w: 360px; --b-wb-row: 176px; /* 工作台网格行高（四列，列宽随容器；1×1 ≈ 282×176） */ --b-wb-handle: 24px; /* 玻璃材质参数 */ --b-glass-blur: 30px; /* 0920 白晨：磨砂再强一点点，24 → 30 */ --b-glass-blur-thick: 44px; --b-glass-saturate: 2.1; --b-glass-brightness: 1.03; /* 提亮压低，玻璃别读成白板 */ --b-glass-lens: 22; /* feDisplacementMap scale */ --b-spec-w: 260px; /* 指针镜面高光的尺寸 */ --b-spec-h: 90px; /* 层级 */ --b-z-topbar: 20; --b-z-dock: 30; --b-z-fab: 40; --b-z-scrim: 50; --b-z-sheet: 60; --b-z-toast: 70; --b-z-paper: 10; /* 纸纹：内容之上、顶栏之下 */ --b-z-bar: 90; /* 0921 全站升级新增（规格 §3.1，规范 §2.5）：等宽机读串（Mono）用； 后台表格 td 的行高由 L1 给，不许页面自己定义——admin-shell 原案把后台密度写成页面私有变量， admin-certifications 又跨页引用，是「页面私有实现被别人依赖」的典型，故上提到这里。 1.65 不是 1.5：apps/web/e2e/steps/initial-empty.ts:179-182 断言 td 字号 13、上下内距各 16、 行盒高 ≥53，13 × 1.65 ＋ 32 ＝ 53.45 过线，1.5 只有 51.5 打红。 名字里的 td 不能省，否则会被顺手用在 td 上而打红同一条断言。 后台卡内距不另起令牌，直接用间距标尺的 --b-sp-5（20px）。 */ --b-font-mono: ui-monospace, SFMono-Regular, "SF Mono", Menlo, Consolas, monospace; --b-admin-td-lh: 1.65; } html[data-theme="light"] { color-scheme: light; /* 纸：策划的 #f7f8fa 偏冷，掺一点纸的暖 → 卡 → 奶油色次级面（策划 --soft 淡一档）→ 输入面 */ --b-bg-canvas: #F0EEE6; /* 回修十三：纸面（原 #F4F3EF）。页底与卡片只差一档明度，两者都是暖中性——暖纸旁边摆纯白，纯白会被读成塑料 */ --b-bg-card: #FAF9F5; /* 回修十三：卡片离开纯白（原 #FFFFFF 占满屏 41.5%，「纯白感」的真来源）。与页底明度差 3.3% */ --b-bg-inset: #F1EDE1; /* 回修十三：奶油次级面改暖中性（原 #FBF6E8） */ --b-bg-input: #F4F1E9; /* 回修十三（原 #F8F7F3） */ --b-line: rgb(60 52 38 / .09); /* 回修十三：描边由中性灰转暖，配暖纸 */ --b-line-strong: rgb(60 52 38 / .17); /* 文字四级：策划墨 #242421 */ --b-text-1: #242421; --b-text-2: #575A5F; /* 0920 玻璃变薄后坞上 12px 徽章 4.49→≥4.5，深一丝 */ --b-text-3: #60626A; --b-text-disabled: #A6A8AD; /* 品牌黄＝主要动作的 tint，字用墨；文字态用深琥珀保证对比 */ --b-primary: #FEBA0A; --b-primary-hover: #FFC633; --b-primary-active: #E9A800; --b-primary-text: #8A5E00; --b-primary-tint: rgb(254 186 10 / .16); --b-on-primary: #242421; --b-primary-top: rgb(255 255 255 / .55); --b-primary-glow: rgb(254 186 10 / .45); /* 主按钮的面（回修九）：亮色上亮下暗的着色玻璃；暗色改平（见暗色块）——上亮渐变＋顶部白线在药丸左上角叠成泛白 */ --b-primary-face: linear-gradient(180deg, var(--b-primary-hover), var(--b-primary) 58%, var(--b-primary-active)); --b-primary-face-hover: linear-gradient(180deg, var(--b-primary-hover), var(--b-primary-hover) 58%, var(--b-primary)); /* 光＝同一个黄（印章、焦散、光场） */ --b-accent: #FEBA0A; --b-accent-glow: rgb(254 186 10 / .6); --b-accent-line: #C98F00; --b-stamp-ink: #242421; /* 状态：策划绿 */ --b-ok: #1F6045; --b-ok-fill: #2C8059; --b-ok-tint: rgb(44 128 89 / .12); --b-wait: #5C5E63; --b-wait-tint: rgb(36 36 33 / .06); --b-neutral-tint: rgb(36 36 33 / .06); /* 玻璃：同 A2 的结构，影与焦散换成黄的暖 */ --b-glass-bg: rgb(250 249 245 / .14); /* 0920：.22 → .14，顶栏与坞透出背后光团；回修十三白转暖白 */ --b-glass-bg-thick: rgb(250 249 245 / .76); --b-glass-edge-a: rgb(250 249 245 / .95); --b-glass-edge-b: rgb(255 255 255 / .35); --b-glass-edge-c: rgb(0 0 0 / .12); --b-glass-line: rgb(36 36 33 / .10); --b-glass-glow: rgb(255 255 255 / .8); --b-glass-spec: rgb(255 255 255 / .85); --b-glass-caustic: rgb(254 186 10 / .32); --b-glass-shadow: 0 12px 32px rgb(70 50 0 / .12), 0 1px 2px rgb(70 50 0 / .08); --b-glass-shadow-thick: 0 28px 72px rgb(70 50 0 / .18), 0 2px 6px rgb(70 50 0 / .08); --b-glass-frost: rgb(250 249 245 / .94); --b-card-edge: rgb(255 255 255 / .9); --b-card-shadow: rgb(70 50 0 / .05); --b-card-shadow-far: rgb(70 50 0 / .07); /* 环境光（回修十「亮色的背景我希望做的和暗色的一样」＋回修十二「亮色模式下的黄色帮我调淡一点，先调淡 50%」）： 亮色与暗色同一套层、同一种构图，只换值。**亮色五个 alpha 在回修十二整体减半**（太阳核心／光晕、反弹光、两层焦散），暗色一个没动—— 太阳结构、角遮罩、焦散遮罩阈值（−3.95 只亮峭壁）全部照搬暗色块；黄就是策划黄 #FEBA0A。 两处必须不同（styles.css 光场规则 9）：混合模式 screen→normal（screen 在纸上等于没画，multiply 会压成芥末）；alpha 约暗色三倍（纸底亮）。 回修九的纯白窗光 .lf-beam 已撤（教训在 direction 十五）；回修六～八「亮色黄有预算」作废 */ --b-sun-core: rgb(255 250 238 / .85); /* 回修十六：光源必须比纸亮（纸 L* 94，这个暖白 L* 98）。回修十三的麻纸黄 #EBDBBC L* 只有 88，比纸暗的暖色叠上去只能把纸压暗再染黄——左上象限 91% 的像素「比纸暗又比纸黄」，人眼读成茶渍，这就是白晨说的「黄黄的很脏」；暗色琥珀 screen 只加亮，不动 */ --b-sun-halo: rgb(255 247 230 / .55); /* 回修十六：同上，光晕也换比纸亮的暖白；暗色 .045 不动 */ --b-sun-layers: radial-gradient(closest-side, var(--b-sun-core) 0%, var(--b-sun-core) 22%, transparent 62%), radial-gradient(closest-side, var(--b-sun-halo) 30%, transparent 78%); --b-field-mask: radial-gradient(110vmax 85vmax at 6vw 2vh, rgb(0 0 0) 18%, transparent 60%); /* 与暗色同一张角遮罩（回修七规则 8） */ --b-bounce: rgb(255 245 219 / .16); /* 回修十二减半（回修十一 .32）；暗色 .05 不动。奶油近白，只让右下不那么冷 */ --b-caustic-light: rgb(255 253 246 / .9); /* 回修十六：近白暖光层再提一档（回修十三 rgb(255 252 244 / .78)），拉开两层的明暗差才把流动找回来（3 秒通道差 0.72→1.55）；暗色 rgb(255 196 80 / .23) screen 不动 */ --b-caustic-light-blend: normal; --b-caustic-shade: rgb(168 172 190 / .55); /* 回修十六：影层换偏冷的灰用 multiply（.30 流动掉到 0.65 不过门禁，.55 三相位下界 0.82／p95 2.75 过线且泥仍只 1.3%）——暖光配冷影，影落在「比纸暗又比纸灰」那一格，读作影不读作渍。回修十三的燕麦 rgb(205 192 168 / .52) normal 是暖的比纸暗，和光源一起构成脏；回修十四曾改成 rgb(88 78 60 / .62) 的深云影来救流动，白晨 0920「亮色模式还是用回之前的那种黄色」，退回；暗色 .12 screen 不动 */ --b-caustic-shade-blend: multiply; /* 回修十六：亮色影层 multiply（只准配冷色：Lab b* 低于纸；暖色 multiply 才是回修十说的芥末） */ --b-caustic-mask-a: url("data:image/svg+xml;utf8,"); --b-caustic-mask-b: url("data:image/svg+xml;utf8,"); --b-grain-alpha: .055; --b-grain-blend: multiply; /* 纸纹（回修十三）：盖在内容之上、玻璃之下的一层灰噪点，让卡片是纸不是塑料，顺带打散大面积浅色渐变的 8 位色带 */ --b-paper-alpha: .045; --b-paper-blend: multiply; --b-on-media: #FFFFFF; --b-media-dim: rgb(36 36 33 / .84); --b-scrim: rgb(36 36 33 / .26); --b-focus: #242421; --b-focus-halo: #FFFFFF; /* 首页工作台模块（0920 夜间任务①）：静止是「薄玻璃」——只有底、发丝线、顶部一线高光；拾起才升为完整 Liquid Glass（镜面边、指针高光、透镜、厚影）。 模糊参数与顶栏同一套，不另开档；底比顶栏白一些是为了字可读，拾起时反而更透，让光穿过 */ --b-tile-bg: rgb(255 255 255 / .38); --b-tile-bg-lift: rgb(255 255 255 / .20); --b-tile-glow: rgb(255 255 255 / .6); --b-tile-shadow: 0 8px 24px -12px rgb(70 50 0 / .10), 0 1px 2px rgb(70 50 0 / .06); --b-slot-fill: rgb(36 36 33 / .05); --b-slot-line: rgb(36 36 33 / .14); --b-mascot-shadow: drop-shadow(0 6px 10px rgb(70 50 0 / .2)); /* 0921 全站升级新增（规格 §3.1）：错误色与折痕背光侧线。 错误色此前以裸 hex #b43b39 散落在 15 页设计稿里（login 一页就 8 处），收成这一条。 */ --b-danger: #b43b39; --b-crease: rgb(60 52 38 / .17); } html[data-theme="dark"] { color-scheme: dark; --b-bg-canvas: #131210; --b-bg-card: #1E1D19; --b-bg-inset: #29271F; --b-bg-input: #161510; --b-line: rgb(255 255 255 / .09); --b-line-strong: rgb(255 255 255 / .18); --b-text-1: #F6F4EE; --b-text-2: #A8A69F; --b-text-3: #AEACA5; --b-text-disabled: #5F5D56; --b-primary: #FEBA0A; --b-primary-hover: #FFC633; --b-primary-active: #E9A800; --b-primary-text: #FFCB4D; --b-primary-tint: rgb(254 186 10 / .18); --b-on-primary: #242421; --b-primary-top: rgb(255 255 255 / 0); /* 回修九：暗色不叠任何白在黄上。回修八只把 .45 压到 .18，白晨在 Chrome 里仍看到左上角泛白 */ --b-primary-glow: rgb(254 186 10 / .4); /* 暗色主按钮的面改平：上半段就是主黄，只留底边一点暗；立体感靠底边阴影与黄光晕，不靠顶部提亮（回修九） */ --b-primary-face: linear-gradient(180deg, var(--b-primary) 0 62%, var(--b-primary-active)); --b-primary-face-hover: linear-gradient(180deg, var(--b-primary-hover) 0 62%, var(--b-primary)); --b-accent: #FEBA0A; --b-accent-glow: rgb(254 186 10 / .5); --b-accent-line: #FEBA0A; --b-stamp-ink: #FEBA0A; --b-ok: #7FCB9C; --b-ok-fill: #3E9A64; --b-ok-tint: rgb(127 203 156 / .14); --b-wait: #A8A69F; --b-wait-tint: rgb(255 255 255 / .08); --b-neutral-tint: rgb(255 255 255 / .08); --b-glass-bg: rgb(30 29 25 / .32); --b-glass-bg-thick: rgb(30 29 25 / .80); --b-glass-edge-a: rgb(255 255 255 / .28); --b-glass-edge-b: rgb(255 255 255 / .08); --b-glass-edge-c: rgb(0 0 0 / .5); --b-glass-line: rgb(255 255 255 / .08); --b-glass-glow: rgb(255 255 255 / .2); --b-glass-spec: rgb(255 255 255 / .16); --b-glass-caustic: rgb(254 186 10 / .16); --b-glass-shadow: 0 12px 32px rgb(0 0 0 / .55), 0 1px 2px rgb(0 0 0 / .4); --b-glass-shadow-thick: 0 28px 72px rgb(0 0 0 / .7), 0 2px 6px rgb(0 0 0 / .4); --b-glass-frost: rgb(30 29 25 / .94); --b-card-edge: rgb(255 255 255 / .06); --b-card-shadow: rgb(0 0 0 / .4); --b-card-shadow-far: rgb(0 0 0 / .35); /* 暗色：回修六曾改成暖白灯光，白晨 0920 判「不如之前的」，回修七回退到回修五的琥珀（低亮度的黄在近黑上偏褐是白晨接受的暗色气质； 配合回修七的角遮罩，琥珀只在左上角）。暗色两层焦散都是 screen 加亮，太阳沿用旧的「核心 22%→62% ＋ 光晕 30%→78%」结构 */ --b-sun-core: rgb(255 200 90 / .07); /* 回修十一：焦散提浓后太阳降一档（原 .09） */ --b-sun-halo: rgb(254 186 10 / .045); /* 回修十一（原 .06） */ --b-sun-layers: radial-gradient(closest-side, var(--b-sun-core) 0%, var(--b-sun-core) 22%, transparent 62%), radial-gradient(closest-side, var(--b-sun-halo) 30%, transparent 78%); --b-field-mask: radial-gradient(110vmax 85vmax at 6vw 2vh, rgb(0 0 0) 18%, transparent 60%); --b-bounce: rgb(255 245 219 / .05); --b-caustic-light: rgb(255 196 80 / .23); /* 回修十一提约九成（原 .105） */ --b-caustic-light-blend: screen; --b-caustic-shade: rgb(255 176 50 / .12); /* 回修十一提约九成（原 .055） */ --b-caustic-shade-blend: screen; --b-caustic-mask-a: url("data:image/svg+xml;utf8,"); --b-caustic-mask-b: url("data:image/svg+xml;utf8,"); --b-grain-alpha: .04; --b-grain-blend: screen; --b-paper-alpha: 0; /* 暗色不铺纸纹：近黑上正片叠底只会糊掉，暗色的颗粒仍由光场内的 .lf-grain 给（同名令牌规则要求这里也定义） */ --b-paper-blend: multiply; --b-on-media: #FFFFFF; --b-media-dim: rgb(19 18 16 / .86); --b-scrim: rgb(0 0 0 / .52); --b-focus: #F6F4EE; --b-focus-halo: #131210; --b-tile-bg: rgb(30 29 25 / .42); --b-tile-bg-lift: rgb(30 29 25 / .28); --b-tile-glow: rgb(255 255 255 / .10); --b-tile-shadow: 0 8px 24px -12px rgb(0 0 0 / .5), 0 1px 2px rgb(0 0 0 / .4); --b-slot-fill: rgb(255 255 255 / .06); --b-slot-line: rgb(255 255 255 / .16); --b-mascot-shadow: drop-shadow(0 8px 14px rgb(0 0 0 / .5)); /* --b-danger 暗值是【暂定值，等白晨在门 A 点选】。 背景：亮色的 #b43b39 对亮色卡面 #FAF9F5 是 5.5∶1 达标，但同一个值对暗色卡面 #1E1D19 只有 2.91∶1，不达标（规格 §3.1 要求暗值按暗色卡面采样、目标 ≥ 4.5∶1）。 实测三个候选对 #1E1D19：#d65f5c 4.54、#e0706d 5.39、#ef7c78 6.28。 这里取 #e0706d 作临时值的理由：不是刚过线（4.54 只要底色被玻璃层压暗一点就可能跌破）， 也不至于亮到在暗色里发光；两档正式候选由阶段 2 的组件样张在它两侧取，白晨在门 A 一次点完。 这是可逆的保守选择，不是替白晨做审美决定。改这一行时连本注释一起删。 */ --b-danger: #e0706d; /* 凹面的背光侧线（规范 §3 规则 9）。暗值必须比暗色卡面更暗，否则凹会读成凸—— 18 页原案里后台作品页就是拿 --b-line-strong（暗值是白 .18，比卡面亮）当凹口顶边， 在暗色里物理是反的。assert-tokens.mjs 第九条断言（Task 2）就是为这个立的。 */ --b-crease: rgb(0 0 0 / .45); }