/* ========================================================================== 薯灵感 · 设计 Token 权威层（design-tokens.css） 2026-09-30 全站 UI 一致性审计后建立 -------------------------------------------------------------------------- 背景（为什么要这个文件）： 全站此前存在**三套并行的 token 命名空间** —— · style.css ：--red-500 / --ink / --r-sm..2xl / --shadow-xs..lg / --fs-* · design-system.css：--brand-2 / --text-1..4 / --r-12..32 / --sh-* / --sp-* · spark-ui.css ：--xhs-* / --text-primary / --ui-1..5 三套值大体接近但边界不一致（大圆角 20px vs 24px、全屏圆角 26px vs 32px、 正文字号 12.5px 半像素），导致不同页面写着不同的数。 本文件不改变既有观感，只做两件事： 1) 补齐完整阶梯，并给所有旧名做**桥接**，让三套名字指向同一组值 2) 提供规范要求的 --space-* / --font-* / --radius-* / --weight-* / --leading-* 别名 加载位置：所有样式之后（最后生效），只定义变量，不写任何选择器。 ========================================================================== */ :root { /* ---------- 一、颜色：品牌红 ---------- */ --xhs-red: #FF2442; --xhs-red-hover: #E01230; --xhs-red-active: #B80D26; --xhs-red-light: #FFF5F6; --xhs-red-lighter: #FFEBEE; --xhs-red-tint: rgba(255, 36, 66, .08); --xhs-red-ring: rgba(255, 36, 66, .18); /* ---------- 一之补、品牌红「文字档」 vs 「底色 / 图形档」（2026-10-17 对比度修复）---------- #FF2442 当 ≤14px 文字色时：白底 3.76、#FBF9FA 3.59、#FFF5F6 3.52 —— 全部低于 AA 4.5 （DOM 实测 942 + 414 + 211 处）。拆成两档： · --xhs-red-text ：文字专用（白底 5.08 / FBF9FA 4.90 / FFF5F6 4.70，全达标） · --xhs-red ：底色 / 边框 / 图形 / ≥18.66px bold 大字号（图形只需 3:1，达标） 替换口径：所有 `color: var(--xhs-red-text, #D81B37)` 一律改 `color: var(--red-500-text, #D81B37)`， 底色 / 边框 / 图形的 var(--xhs-red-text, #D81B37) 保持不动。 */ --xhs-red-text: #D81B37; --xhs-red-text-strong: #B80D26; /* 白字压在品牌红上时，红底必须更深才够 4.5（#FF2442 上白字仅 3.76，#E01230 上 4.89） */ --xhs-red-solid: #E01230; /* ---------- 二、颜色：文字四级（暖灰，非中性灰） ---------- */ --text-primary: #1F1B1D; --text-secondary: #5B5457; /* 原 #767076：在 #F5F3F4 上 4.37、#F4EFF0 上 4.24，擦线不达标 → #6E6869（4.94 / 5.21） */ --text-tertiary: #6E6869; --text-disabled: #C9C3C5; /* 弱提示灰：#5B5457(3.06) / #6E6869(3.22) / #767076(2.42) / #6B7280(4.40 擦线) 全部不达标 */ --text-muted: #5B5457; /* 白底 8.0+，最稳的一档 */ --text-muted-soft: #6E6869; /* 暖灰底（FBF9FA / F5F3F4）上 ≥4.94 */ /* 图形控件（箭头 / 图标）最低 3:1：原 #D8DCE2 在 #FBF9FA 上仅 1.31 → #A39DA0 */ --graphic-strong: #A39DA0; --text-inverse: #FFFFFF; /* ---------- 三、颜色：背景与描边 ---------- */ --bg-base: #FBF9FA; --bg-surface: #FFFFFF; --bg-subtle: #FBF9FA; --bg-warm: #F5F3F4; --bg-hover: #F4EFF0; --border-subtle: #F2EDEE; --border-default: #E8E2E4; --border-strong: #D8D1D3; /* ---------- 四、颜色：语义 ---------- */ --success: #1E9E6A; --success-bg: rgba(30, 158, 106, .10); --warning: #D98E0B; --warning-bg: rgba(217, 142, 11, .12); --danger: #E01230; --danger-bg: rgba(224, 18, 48, .10); --info: #2F6BFF; --info-bg: rgba(47, 107, 255, .10); /* 语义色「文字档」：原色当文字全不达标（success 3.41 / warning 2.68 / info 4.29）。 文字一律用 -text 档（success 5.34 / warning 5.93 / info 5.62）， 原色保留给底色与图形；warning 图形档另给 #C77700（3:1 达标，#D98E0B 只有 2.68）。 */ --success-text: #137A52; --warning-text: #8A5A00; --info-text: #2A5FD9; --warning-graphic: #C77700; /* ---------- 五、间距：--s-<像素>，名字即数值，零学习成本 ---------- 阶梯：4 / 8 / 10 / 12 / 14 / 16 / 18 / 20 / 24 / 32 / 40 / 48 / 64 说明：8px 为主网格；10/14/18 是全站实际高频值（扫描出来各 261/196/81 次）， 强行改成 8/16 会让大量页面观感突变，所以收编为正式档位而不是抹掉。 */ --s-4: 4px; --s-6: 6px; --s-8: 8px; --s-10: 10px; --s-12: 12px; --s-14: 14px; --s-16: 16px; --s-18: 18px; --s-20: 20px; --s-22: 22px; --s-24: 24px; --s-28: 28px; --s-32: 32px; --s-40: 40px; --s-48: 48px; --s-64: 64px; /* 规范要求的 --space-* 别名 */ --space-1: var(--s-8); --space-2: var(--s-16); --space-3: var(--s-24); --space-half: var(--s-4); --space-xs: var(--s-6); --space-4: var(--s-32); --space-5: var(--s-40); --space-6: var(--s-48); --space-8: var(--s-64); /* ---------- 六、字号：全部整数，消灭 12.5 / 13.5 / 11.5 / 14.5 / 12.8 ---------- 2026-10-17：中文最小字号下限提到 12px（原 --font-xs: 11px，DOM 实测 2,064 处 11px + 264 处 11.5px，低分屏下中文不可读）。--font-xs 与 --font-sm 现在同为 12px。 */ --font-xs: 12px; --font-sm: 12px; --font-base: 13px; --font-md: 14px; --font-lg: 15px; --font-xl: 16px; --font-2xl: 18px; --font-3xl: 20px; --font-4xl: 22px; --font-5xl: 24px; --font-6xl: 28px; --font-display: 34px; /* ---------- 七、字重与行高 ---------- */ --font-sans: -apple-system, BlinkMacSystemFont, "PingFang SC", "Hiragino Sans GB", "Microsoft YaHei", "Helvetica Neue", Arial, sans-serif; --font-mono: ui-monospace, SFMono-Regular, "SF Mono", Menlo, Consolas, "Courier New", monospace; --font-family-system: var(--font-sans); /* textcard 旧名桥接 */ --weight-normal: 400; --weight-medium: 500; --weight-semibold: 600; --weight-bold: 700; --leading-tight: 1.3; --leading-normal: 1.5; --leading-relaxed: 1.65; /* ---------- 八、圆角：四级 + 全圆 ---------- */ --radius-sm: 8px; /* 标签、小按钮 */ --radius-md: 12px; /* 输入框、常规卡片 */ --radius-lg: 16px; /* 功能卡 */ --radius-xl: 24px; /* Hero、弹窗 */ --radius-2xl: 32px; /* 全屏容器 */ --radius-full: 999px; /* ---------- 九、阴影：暖色（rgba(31,27,29) 而非纯黑），四阶 + 品牌光晕 ---------- */ --shadow-xs: 0 1px 2px rgba(31, 27, 29, .04); --shadow-sm: 0 1px 2px rgba(31, 27, 29, .04), 0 2px 6px rgba(31, 27, 29, .04); --shadow-md: 0 2px 6px rgba(31, 27, 29, .05), 0 8px 24px rgba(31, 27, 29, .06); --shadow-lg: 0 4px 12px rgba(31, 27, 29, .06), 0 18px 48px rgba(31, 27, 29, .10); --shadow-red: 0 4px 14px rgba(255, 36, 66, .28), 0 1px 3px rgba(255, 36, 66, .18); --shadow-red-lg: 0 10px 28px rgba(255, 36, 66, .34), 0 2px 8px rgba(255, 36, 66, .20); --shadow-glow: 0 0 0 1px rgba(255, 36, 66, .14), 0 8px 28px rgba(255, 36, 66, .22); --shadow-glow-lg: 0 0 0 1px rgba(255, 36, 66, .20), 0 14px 44px rgba(255, 36, 66, .30); /* 焦点环（ring）：与模糊阴影分开管理，避免 ring 的 alpha 被阴影分档吞掉 */ --ring-red: rgba(255, 36, 66, .12); --ring-red-strong: rgba(255, 36, 66, .28); --ring-info: rgba(47, 107, 255, .18); /* 语义投影 */ --shadow-info: 0 4px 14px rgba(47, 107, 255, .22), 0 1px 3px rgba(47, 107, 255, .12); --shadow-success: 0 4px 14px rgba(30, 158, 106, .20), 0 1px 3px rgba(30, 158, 106, .10); /* ---------- 九点四、组件规范（本次审计后确立的口径，按此写新组件）---------- 按钮：高度 40px（主）/ 32px（次）/ 28px（标签按钮）；圆角 --radius-full（胶囊） 或 --radius-md（方形）；主按钮 --pink-grad + --shadow-red， 次按钮 白底 + --border-default + --shadow-xs；按下 translateY(1px) scale(.98) 卡片：圆角 --radius-lg(16px)；描边 1px --border-subtle；阴影 --shadow-sm， 悬停升到 --shadow-md（只改阴影，不改位移，避免抖动） 标签：圆角 --radius-sm(8px)；高度 24px；字号 --font-xs；底色 --xhs-red-light 输入框：高度 40px；圆角 --radius-md；聚焦 ring 用 --ring-red 而非 outline 弹窗：圆角 --radius-xl(24px)；阴影 --shadow-lg；遮罩 --bg-overlay 动效：只允许 transform / opacity；缓动 --ease-out；时长 --duration-normal； reduced-motion 下本文件末尾已统一降为 1ms -------------------------------------------------------------------------- */ /* ---------- 九点五、响应式断点（CSS 变量无法用于 @media，仅作文档约定）---------- 收敛后全站只用这几档（2026-09-30 审计）： xs 480px · sm 640px · md 720px · lg 768px · xl 900px · 2xl 1024px 例外保留：380px（薯薯头像超小屏）、767px（与 min-width:768 配对的边界， 不可并入 768，否则 768px 处两条规则同时命中） 1500 / 1600 / 1920 属超大屏增强，各自独立，不强行合并。 -------------------------------------------------------------------------- */ /* ---------- 十、缓动与时长 ---------- */ --ease-out: cubic-bezier(.16, 1, .3, 1); --ease-in-out: cubic-bezier(.4, 0, .2, 1); --ease-spring: cubic-bezier(.34, 1.56, .64, 1); --duration-fast: 200ms; --duration-normal: 300ms; --duration-slow: 450ms; /* ---------- 十之补、--ease 桥接（2026-10-17 修复「未定义变量让整条声明失效」）---------- brief-note.css / brief-preview.css / storyboard.css / style.css 共 12 处写了裸 `var(--ease, cubic-bezier(.16,1,.3,1))`（无 fallback）。变量没定义 → 整条 transition / animation 在 computed-value 阶段作废 → 元素完全没有过渡（悬停、选中瞬跳），且不报任何错。 补这一行即可全部复活；曲线沿用 Galaxy / uiverse 的 --ease-out。 */ --ease: var(--ease-out); --ease-standard: var(--ease-in-out); /* style.css 旧名桥接（原 .4,0,.2,1，同值） */ /* ---------- 十点五、z-index 阶梯（2026-10-17 建立）---------- 现状：全站硬编码 z-index 从 0 到 2147483000，design-system.css 的 --z-* 阶梯零使用。 本轮做「令牌化但不改序」：每个令牌的数值 = 该层当前实际值，替换后叠序完全不变， 只是把散落的字面量收进一张可维护的表。真正离谱的三档（2147482900/3000/3100） 收进 12000+ 的高段位，相对次序保持不变。 低段：base 1 / sticky 100 / nav 200 / dropdown 300 / overlay 400 / modal 500 / toast 600 中高段：float 800 / cursor 900 / widget 1200 / sheet 1400 / companion 9000 / panel 9500 顶段：critical 12000 / critical-top 12010 / critical-max 12020 / top 99990 */ --z-base: 1; --z-sticky: 100; --z-nav: 200; --z-dropdown: 300; --z-overlay: 400; --z-modal: 500; --z-toast: 600; --z-float: 800; --z-cursor: 900; --z-widget: 1200; --z-sheet-mask: 1090; --z-sheet: 1100; --z-sheet-nav: 1200; --z-sheet-mask-top: 1300; --z-drawer: 1400; --z-companion: 9000; /* 薯薯立绘 .ss-stage */ --z-panel: 9500; /* 「更多」面板：必须压住薯薯立绘 */ --z-critical: 12000; /* 付费墙 / 合规弹窗等最高业务层 */ --z-critical-top: 12010; --z-critical-max: 12020; --z-guide: 8600; /* ux-core 引导卡：压住内容、低于所有弹窗 */ --z-top: 99990; /* ux-core toast host */ --z-top-1: 99995; /* ux-core 遮罩 / 引导层 */ --z-top-2: 99999; /* ux-core skip link（键盘可达必须最高） */ /* ========================================================================== 桥接层：把三套旧名字指向同一组值。 这里只做「对齐」，不新增观感 —— 改的是名字背后指的值，不是用法。 ========================================================================== */ /* style.css 系 */ --r-sm: var(--radius-sm); --r-md: var(--radius-md); --r-lg: var(--radius-lg); --r-xl: var(--radius-xl); /* 原 20px → 24px，与 design-system --r-24 对齐 */ --r-2xl: var(--radius-2xl); /* 原 26px → 32px，离群值归位 */ --radius: var(--radius-md); --radius-lg: var(--radius-xl); --fs-h1: var(--font-4xl); --fs-h2: var(--font-2xl); --fs-h3: var(--font-lg); --fs-body: var(--font-md); --fs-sm: var(--font-sm); /* 原 12.5px → 12px，消灭半像素 */ --fs-xs: var(--font-xs); /* design-system.css 系 */ --sp-h: var(--s-4); --sp-1: var(--s-8); --sp-2: var(--s-16); --sp-3: var(--s-24); --sp-4: var(--s-32); --sp-5: var(--s-40); --sp-6: var(--s-48); --sp-7: var(--s-64); --sp-8: 80px; --r-12: var(--radius-md); --r-16: var(--radius-lg); --r-24: var(--radius-xl); --r-32: var(--radius-2xl); --r-pill: var(--radius-full); --sh-sm: var(--shadow-sm); --sh-md: var(--shadow-md); --sh-lg: var(--shadow-lg); --sh-glow: var(--shadow-glow); --sh-glow-lg: var(--shadow-glow-lg); --d-micro: var(--duration-fast); --d-comp: var(--duration-normal); --d-page: var(--duration-slow); --fs-display: var(--font-display); --fs-h4: var(--font-base); --lh-tight: var(--leading-tight); --lh-body: var(--leading-relaxed); --brand-2: var(--xhs-red); --brand-3: var(--xhs-red-hover); --brand-soft: var(--xhs-red-light); --brand-softer: var(--xhs-red-lighter); --brand-ring: var(--xhs-red-ring); --text-1: var(--text-primary); --text-2: var(--text-secondary); --text-3: var(--text-tertiary); --text-4: var(--text-disabled); --bd-1: var(--border-subtle); --bd-2: var(--border-default); --bd-3: var(--border-strong); --bg-elevated: var(--bg-surface); --bg-inverse: #1F1B1D; --bg-overlay: rgba(31, 27, 29, .38); /* spark-ui.css 系 */ --ui-1: var(--s-8); --ui-2: var(--s-16); --ui-3: var(--s-24); --ui-4: var(--s-32); --ui-5: var(--s-40); --ui-glow: var(--shadow-glow); --ui-warm: 0 6px 18px rgba(255, 36, 66, .08); --ui-dur-1: var(--duration-fast); --ui-dur-2: var(--duration-normal); --ui-dur-3: var(--duration-slow); /* ai-assistant.css 系：把挂件自己的阴影并入同一阶梯 */ --ss-shadow-1: var(--shadow-sm); --ss-shadow-2: var(--shadow-md); --ss-shadow-3: var(--shadow-lg); /* 其它历史别名 */ --maxw: 1440px; --red-50: var(--xhs-red-light); --red-500: var(--xhs-red); --red-600: var(--xhs-red-hover); --red: var(--xhs-red); --red-deep: var(--xhs-red-hover); --red-light: var(--xhs-red-light); --ink: var(--text-primary); --ink2: var(--text-secondary); --ink3: var(--text-tertiary); --ink4: var(--text-disabled); --line: var(--border-subtle); --line2: var(--border-default); --bg: var(--bg-base); --card: var(--bg-surface); --green: var(--success); --amber: var(--warning); /* 2026-10-17 对比度修复：原渐变亮端太浅，白字落在亮端上不达标 · --pink-grad 亮端 #FF5C72 上白字 2.99 → #EE2740（4.20）/ 中 4.89 / 暗 5.89 · --hero-grad 亮端 #FF6B7F 上白字 2.74 → #F0324C（3.99） 品牌观感仍是同一支红，只是把亮端压暗约 5%。 */ --pink-grad: linear-gradient(135deg, #EE2740 0%, #E01230 52%, #C8102A 100%); --pink-grad-soft: linear-gradient(135deg, #FFF5F6, #FFEBEE); --hero-grad: linear-gradient(120deg, #F0324C 0%, #E01230 45%, #C8102A 100%); /* 文字用途的品牌红别名（只替换 `color: ` 场景，不动底色/边框） */ --red-500-text: var(--xhs-red-text, #D81B37); --red-text: var(--xhs-red-text, #D81B37); --brand-2-text: var(--xhs-red-text, #D81B37); --amber-text: var(--warning-text); --green-text: var(--success-text); } /* ========================================================================== 全局基础层 只做「目前各页面不一致」的收口，且全部是**增量**规则 —— 刻意不写 * { margin:0 } 与 box-sizing：prd / icons-report 是文档页， 依赖浏览器默认的 p / ul / li 间距，全局清零会打乱它们的排版； 而 spark-ui / design-system 体系下各组件本就显式声明了间距，无需兜底。 ========================================================================== */ /* 滚动条：细、圆、低对比（此前只有 spark-ui / design-system 有，文档页与 textcard 没有） */ * { scrollbar-width: thin; scrollbar-color: var(--border-strong) transparent; } ::-webkit-scrollbar { width: 8px; height: 8px; } ::-webkit-scrollbar-track { background: transparent; } ::-webkit-scrollbar-thumb { background: var(--border-strong); border-radius: var(--radius-full); border: 2px solid transparent; background-clip: content-box; } ::-webkit-scrollbar-thumb:hover { background: var(--text-tertiary); } ::-webkit-scrollbar-corner { background: transparent; } /* 选中态：此前 .15 / .18 两套，统一为品牌红 18% */ ::selection { background: rgba(255, 36, 66, .18); color: var(--text-primary); } /* 焦点环：此前至少三套（spark-ui 2px 实线 / design-system :where / focus-layout --red-300） */ :focus-visible { outline: 2px solid var(--xhs-red); outline-offset: 2px; border-radius: var(--radius-sm); } :focus:not(:focus-visible) { outline: none; } /* 移动端：禁止横屏字体自动放大、去掉点击高亮块 */ html { -webkit-text-size-adjust: 100%; text-size-adjust: 100%; } * { -webkit-tap-highlight-color: transparent; } /* 表单控件字体继承：此前部分页面 input/textarea 会掉回系统默认字体 */ input, textarea, select, button { font-family: inherit; font-size: inherit; color: inherit; } /* 图片/视频：消除 inline 元素底部的 4px 基线间隙（各页面对齐抖动的常见来源）。 这里刻意用 vertical-align 而不是 display:block —— 后者会把行内图标 （）强制换行，破坏按钮与标签的排版。 */ img, svg, video, canvas { max-width: 100%; } img, svg, video { vertical-align: middle; } /* ========================================================================== 无障碍兜底：必须放在本文件末尾。 原因：媒体查询不增加特异性，而本文件加载在所有样式之后 —— 如果这里不重复声明，上面 --d-* 的赋值会覆盖 design-system.css 里 @media (prefers-reduced-motion: reduce) 的 1ms 降级，导致无障碍失效。 同时把本文件新增的时长别名也一并降级。 ========================================================================== */ @media (prefers-reduced-motion: reduce) { :root { --duration-fast: 1ms; --duration-normal: 1ms; --duration-slow: 1ms; --d-micro: 1ms; --d-comp: 1ms; --d-page: 1ms; --ui-dur-1: 1ms; --ui-dur-2: 1ms; --ui-dur-3: 1ms; } *, *::before, *::after { animation-duration: 1ms !important; animation-iteration-count: 1 !important; transition-duration: 1ms !important; scroll-behavior: auto !important; } }