/* 设计令牌。黑白，不用灰作为填充色。 层次靠留白、发丝线和阴影做；次级文字用黑或白降低不透明度，不引入灰色相。 禁止在组件里硬编码颜色、圆角、间距、字号、动效。 */ :root { --bg: #FFFFFF; --surface: #FFFFFF; --surface-2: #F4F4F4; --surface-3: #ECECEC; --border: #EDEDED; --border-2: #DCDCDC; --text: #000000; --text-2: rgba(0, 0, 0, .56); --text-3: rgba(0, 0, 0, .34); --accent: #000000; --accent-weak: #F1F1F1; --on-accent: #FFFFFF; --danger: #000000; --danger-weak: #ECECEC; /* ins 风小组件：拍立得的相纸与胶片。深浅两套主题都一样 —— 相纸就是白的、底片就是黑的，和应用图标深色下仍是白底同一个道理 */ --paper: #FFFFFF; --on-paper: #000000; --on-paper-2: rgba(0, 0, 0, .45); --film: #000000; --on-film: #FFFFFF; --on-film-2: rgba(255, 255, 255, .55); /* 应用图标：纯白底 + 黑色 SVG。颜色与阴影可在主题设置里改 */ --tile-bg: #FFFFFF; --icon-color: #000000; --tile-shadow: 0 2px 8px rgba(0, 0, 0, .13); /* 浮层 */ --scrim: rgba(0, 0, 0, .40); --scrim-strong: rgba(0, 0, 0, .56); --stage-bg: #000000; /* 视频四周的信箱底色。深浅主题下都是黑 */ --on-scrim: #FFFFFF; /* 压在遮罩上的实心块。遮罩不跟主题走，所以这一对两套主题里是一样的 */ --scrim-fill: #FFFFFF; --on-scrim-fill: #000000; /* 压在浅色底上的字。和 --on-scrim 一对，两边都不跟主题走 */ --on-paper: #111318; --toast-bg: rgba(0, 0, 0, .92); --toast-fg: #FFFFFF; --toast-error: rgba(0, 0, 0, .92); /* 面底。铺了壁纸时换成更透的一套，免得白板或灰板压在壁纸上很突兀 */ --wg-bg: rgba(0, 0, 0, .045); --wg-solid: #FFFFFF; --capsule-bg: rgba(0, 0, 0, .045); --capsule-border: transparent; --glass-blur: 18px; /* 分组胶囊：极浅的灰底，不描边 */ --group-fill: #F5F5F5; --group-line: rgba(0, 0, 0, .07); /* 圆角 */ --r-xs: 6px; --r-sm: 10px; --r-md: 14px; --r-lg: 18px; --r-xl: 24px; --r-full: 999px; /* 间距 */ --sp-1: 4px; --sp-2: 8px; --sp-3: 12px; --sp-4: 16px; --sp-5: 20px; --sp-6: 24px; --sp-8: 32px; /* 字号 */ --fs-9: 9px; --fs-11: 11px; --fs-12: 12px; --fs-13: 13px; --fs-14: 14px; --fs-15: 15px; --fs-17: 17px; --fs-20: 20px; --fs-24: 24px; --fs-28: 28px; --fs-40: 40px; --fs-56: 56px; /* 字重 */ --fw-normal: 400; --fw-medium: 500; --fw-semi: 600; --fw-bold: 700; /* 动效 */ --ease: cubic-bezier(.32, .72, 0, 1); --ease-out: cubic-bezier(.16, 1, .3, 1); --dur-fast: 140ms; --dur: 240ms; --dur-slow: 380ms; /* 层级 */ --z-dock: 30; --z-app: 40; --z-sheet: 60; --z-modal: 70; --z-toast: 80; --z-banner: 90; /* 电话压在所有东西上面：主界面、别的 app、锁屏、横幅，都要盖住 */ --z-call: 95; /* 结构尺寸 */ --statusbar-h: 26px; --dock-h: 84px; --grid-gap: 14px; --tile-ratio: .6; /* 底部整体上移多少。Safari 标签页里地址栏会压住最下面那排， 用这个抬起来。PWA 里不需要，默认 0。在「主题」里调。 */ --bottom-lift: 0px; --tabbar-h: 54px; /* 会话页那几个尺寸。原来写死在 app.css 里，提成令牌是为了「美化」能按 会话覆盖它们（见 system/skin.js）。值和从前一模一样，不改观感。 ---- 每一条都从一个 --ph- 变量读起 ---- `--ph-*` 是**契约**：外部作者写的那份 CSS 只认这一套名字，我们保证 不改名（见 src/system/skin-contract.js）。内部这些名字照旧用， 以后想改随时改 —— 中间隔着这一层，改内部名字不会毁掉别人的美化。 应用里那几个旋钮写的也是 `--ph-*`，不是内部名。**只留一条路**： 两条路的话，用户调的和作者写的会互相盖，而盖的顺序谁也说不清。 */ --navbar-h: var(--ph-navbar-h, 48px); --composer-h: var(--ph-composer-h, 38px); /* 输入栏那几个圆按钮，也是输入框的最小高 */ --composer-pad: var(--ph-composer-pad, var(--sp-2)); --bubble-gap: var(--ph-bubble-gap, var(--sp-4)); /* 两轮消息之间 */ --bubble-gap-in: var(--ph-bubble-gap-in, 5px); /* 同一轮里两个气泡之间 */ --bubble-r: var(--ph-bubble-r, var(--r-md)); --bubble-px: var(--ph-bubble-px, var(--sp-3)); --bubble-py: var(--ph-bubble-py, var(--sp-2)); --bubble-fs: var(--ph-bubble-fs, var(--fs-14)); /* 安全区。由根容器换算，组件不自己算 */ --safe-top: 0px; --safe-bottom: 0px; --shadow-1: 0 1px 2px rgba(0, 0, 0, .06); --shadow-2: 0 4px 16px rgba(0, 0, 0, .10); --shadow-3: 0 12px 40px rgba(0, 0, 0, .18); --font: -apple-system, BlinkMacSystemFont, "Segoe UI", "PingFang SC", "Hiragino Sans GB", "Microsoft YaHei", sans-serif; --font-serif: "Songti SC", "Times New Roman", Georgia, serif; /* 手写体。拍立得上的签名用它，可在角色卡展示页换成字体库里的一款（system/fonts.js） */ --font-hand-base: "Xingkai SC", "STXingkai", "Kaiti SC", "STKaiti", "KaiTi", "BiauKai", cursive; --font-hand: var(--font-hand-base); --font-mono: ui-monospace, SFMono-Regular, Menlo, monospace; } :root[data-theme="dark"] { --bg: #000000; --surface: #0B0B0B; --surface-2: #141414; --surface-3: #1E1E1E; --border: #1A1A1A; --border-2: #2A2A2A; --text: #FFFFFF; --text-2: rgba(255, 255, 255, .58); --text-3: rgba(255, 255, 255, .36); --accent: #FFFFFF; --accent-weak: #161616; --on-accent: #000000; --danger: #FFFFFF; --danger-weak: #1E1E1E; --paper: #FFFFFF; --on-paper: #000000; --on-paper-2: rgba(0, 0, 0, .45); --film: #000000; --on-film: #FFFFFF; --on-film-2: rgba(255, 255, 255, .55); /* 图标在深色下仍是白底黑图，与浅色一致 */ --tile-bg: #FFFFFF; --icon-color: #000000; --tile-shadow: 0 2px 10px rgba(0, 0, 0, .55); --scrim: rgba(0, 0, 0, .62); --scrim-strong: rgba(0, 0, 0, .76); --stage-bg: #000000; --on-scrim: #FFFFFF; --scrim-fill: #FFFFFF; --on-scrim-fill: #000000; /* 压在浅色底上的字。和 --on-scrim 一对，两边都不跟主题走 */ --on-paper: #111318; --toast-bg: rgba(255, 255, 255, .95); --toast-fg: #000000; --toast-error: rgba(255, 255, 255, .95); --wg-bg: rgba(255, 255, 255, .08); --wg-solid: #0B0B0B; --capsule-bg: rgba(255, 255, 255, .08); --capsule-border: transparent; --group-fill: #121212; --group-line: rgba(255, 255, 255, .08); --shadow-1: 0 1px 2px rgba(0, 0, 0, .5); --shadow-2: 0 4px 16px rgba(0, 0, 0, .6); --shadow-3: 0 12px 40px rgba(0, 0, 0, .75); } /* 铺了壁纸：胶囊与小组件都改成半透明毛玻璃，让壁纸透上来 */ :root[data-wallpaper="on"] { --capsule-bg: rgba(255, 255, 255, .22); --capsule-border: rgba(255, 255, 255, .30); --wg-solid: rgba(255, 255, 255, .34); --glass-blur: 22px; } :root[data-theme="dark"][data-wallpaper="on"] { --capsule-bg: rgba(0, 0, 0, .34); --capsule-border: rgba(255, 255, 255, .14); --wg-solid: rgba(0, 0, 0, .40); } /* 毛玻璃关着（默认）：没有模糊垫底，半透明压在照片上显得单薄，底色加厚 */ :root[data-wallpaper="on"]:not([data-glass="on"]) { --capsule-bg: rgba(255, 255, 255, .58); --capsule-border: rgba(255, 255, 255, .40); --wg-solid: rgba(255, 255, 255, .72); } :root[data-theme="dark"][data-wallpaper="on"]:not([data-glass="on"]) { --capsule-bg: rgba(0, 0, 0, .52); --capsule-border: rgba(255, 255, 255, .16); --wg-solid: rgba(0, 0, 0, .62); } /* ---- 阅读纸色 ---- 只在阅读器里用。这里是全项目唯一允许出现色相的地方： 整个 app 是黑白的，但读书时的纸色是内容的一部分，用户自己挑， 和全局主题分开（见 system/reader.js 开头那段）。 自定义那一档不在这里，它由用户填的值直接写成内联变量。 线下（--sg-*）同理，而且整套都在 system/stage.js 里，一个值都不在这儿： 那几套主题本来就是「用户挑的一组颜色」的预设，不是设计令牌。 */ :root { --rd-paper-bg: #ffffff; --rd-paper-ink: #1a1a1a; --rd-sepia-bg: #f4ecd8; --rd-sepia-ink: #4a3f35; --rd-night-bg: #16181c; --rd-night-ink: #b9bcc2; }