/* ============================================================ theme-5.tokens.css — Theme 5 · Indigo Aurora (极光靛) 版本: T7_INDIGO_AURORA_V2_NO_GLASS · 2026-04-19 定位: 高端轻奢 · 现代 SaaS · 正经公司感 V2 关键修订 (2026-04-19): 1. 全主题去玻璃化 · surface 大面积半透明 + backdrop-filter 全删 —— 动机: 半透明底会让下层内容透上来与当前层混搭, 影响观感 2. Hero wash 三色径向 rgba → 实色 linear-gradient 夜空渐变 —— 保留"深夜极光"的色彩感, 抛弃"玻璃"那部分 3. 玫粉 / 薄荷字面 rgba 从本主题完全退场 (不再出现在任何位置) —— 单主色硬规则收紧为"只用靛蓝家族", 长期维护成本最低 4. 阴影 inset 白色高光 (玻璃反射模拟) 全删, 改用更沉的外阴影补立体 主色: #6366f1 (Indigo 500) 页面底: #f8f9ff (珍珠白 · 偏冷) Header: 纯白 #ffffff 实色 + 靛蓝细描边 (不是玻璃) Footer: 深夜靛 #1e1b4b Hero: 深夜靛 → 更深夜靛的四色斜渡 (纯实色, 无透明度) —— 单主色硬规则 (V2 收紧) ———————————————————————————————— 本主题仅使用靛蓝家族作为强调色。 严禁再引入玫粉 / 薄荷 / 其它装饰色。 所有"强调"、"徽章"、"提示"、"链接悬停"、"边框亮度"、"阴影色" 一律从 --color-primary 家族 + --overlay-primary-* 透明度家族取。 如遇未来需要再加色的情景, 一律以新主题 (theme-N+1) 形式另立, 不在本主题上做多主色扩展 —— 避免跨组件语义膨胀。 ————————————————————————————————————————————————————— —— 全主题 · 禁用大面积半透明背景硬规则 ———————————————— surface 级背景 (Header / 卡片 / 面板 / 按钮底) 禁止使用: · rgba(r,g,b,<1) 作为 background / background-color · backdrop-filter: blur() / saturate() 组合 动机: 用户反馈玻璃效果会把下层正文透上来与当前层混搭, 影响观感。 允许使用 rgba / 透明度的位置仅限: · box-shadow 的阴影色 (标准 CSS 色值, 非覆盖层) · border-color 的细边 (1px 线, 不构成视觉混叠面积) · gradient stop 内的 transparent (渐变过渡所需, 非整体覆盖) 本硬规则同步写入 04_主题适配.md §五, 为全主题生效, 不限 T7。 ————————————————————————————————————————————————————— 覆盖原则 (与 theme-2/3/4 对齐): - 仅覆盖与 T1 基线差异值; 未列出的 token 自动从 tokens.base.css 继承 - T7 是浅底主题, 与 T1/T3/T4 同构, 与 T2 深底相反 - --color-text-inverse 保持浅底家族默认近白, 不翻转 on-* 全家族 - Hero 夜空渐变以四色 hex 实色构造, 仅用 linear-gradient 选择器 (与 theme-2/3/4 对齐): token 层用 :root 覆盖, ParserController 每次只分发一个 theme-N 文件, cascade 语义为 source-order later-wins, 最稳。 组件差异化样式 (如 T7 专属的 .pb-header 白实色边) 由 nav.css / button.css 的 [data-theme="5"] .xxx 选择器承担。 ============================================================ */ :root { /* ========== 主色系 ========== */ --color-primary: #6366f1; --color-primary-hover: #4f46e5; --color-primary-active: #4338ca; --color-primary-tint: #a5b4fc; --color-primary-light: rgba(99, 102, 241, 0.12); --color-primary-lighter: rgba(99, 102, 241, 0.06); --color-primary-dark: #312e81; /* rgb 分量 · R13-11A 修复 silent 漂移 · #6366f1 */ --color-primary-rgb: 99, 102, 241; /* ========== 文本层 ========== */ --color-text: #1e1b4b; --color-text-secondary: #4c4670; --color-text-muted: #9ca3af; --color-text-inverse: #fafaff; --color-secondary: #6b7280; /* ========== 背景层 ========== */ --color-bg: #f8f9ff; --color-bg-primary: #f8f9ff; --color-bg-secondary: #eef0fa; --color-bg-tertiary: #e4e7f5; --color-bg-quaternary: #d1d5e8; --color-bg-dark: #1e1b4b; --color-bg-darker: #0f0a2e; --color-header-bg: #ffffff; --color-footer-bg: #1e1b4b; --color-footer-text: #c7d2fe; /* ========== 边框层 ========== */ --color-border: rgba(99, 102, 241, 0.15); --color-border-light: rgba(99, 102, 241, 0.08); --color-border-dark: rgba(99, 102, 241, 0.25); --color-border-focus: #6366f1; --color-border-glow-primary: rgba(99, 102, 241, 0.35); /* ========== Overlay · 深靛 dim 层 ========== */ --color-overlay: rgba(30, 27, 75, 0.6); --color-overlay-light: rgba(30, 27, 75, 0.3); --overlay-accent-10: rgba(99, 102, 241, 0.1); --overlay-primary-10: rgba(99, 102, 241, 0.1); --overlay-primary-15: rgba(99, 102, 241, 0.15); --overlay-primary-20: rgba(99, 102, 241, 0.2); --overlay-primary-30: rgba(99, 102, 241, 0.3); --overlay-primary-40: rgba(99, 102, 241, 0.4); --overlay-primary-50: rgba(99, 102, 241, 0.5); /* ========== 阴影 · 靛蓝色温外阴影, 无 inset 白高光 ========== 注: 阴影色本身的 rgba 不受 "禁大面积半透明" 规则约束, 因为 box-shadow 不是 surface 覆盖层。 */ --shadow-glow-primary: 0 8px 32px rgba(99, 102, 241, 0.24), 0 2px 8px rgba(99, 102, 241, 0.12); --shadow-focus: 0 0 0 3px rgba(99, 102, 241, 0.25); --shadow-card: 0 2px 10px rgba(99, 102, 241, 0.08); --shadow-card-hover: 0 8px 24px rgba(99, 102, 241, 0.14); /* ========== Glass token · V2 退化为实色 (语义保留防止组件报 undefined) ========== */ --glass-bg: #ffffff; --color-gradient-radial: linear-gradient(180deg, #2a2868 0%, #1e1b4b 35%, #1a1642 65%, #0f0a2e 100% ); --color-gradient-cta: linear-gradient(135deg, #6366f1 0%, #4f46e5 100%); /* ============================================================ ★ 跨组件语义层 · T7 继承说明 T7 是 "浅底 + 靛蓝主色" 结构, 与 T1/T3/T4 同构。 下列语义 token 通过 base 层 lazy var() 自动联动, 无需覆盖: --hero-tip-bg / border → base: overlay-white-* (白文字在深靛 Hero 暗底上) --hero-badge-bg / border → base: overlay-primary-* (已随 primary 变靛) --hero-trust-num-text → base: --color-text-on-dark (Hero 深靛底上近白) --badge-primary-* → base: --color-primary + --color-text-on-primary --badge-danger/success/warning → base: 对应语义色 + --color-text-on-* --tag-active-* → base: --color-primary --price-tag-* → base: --color-gradient-primary --cta-primary-* → base: --color-primary + shadow-glow-primary (视觉细节由 button.css 的 [data-theme="5"] 实色 CTA 规则接管) --cta-secondary-* → base: --color-primary outline + light hover (outline 由组件 CSS 做实色白底差异化) --alert-* → base: 语义色 family --panel-* → base: bg-section / bg-section-alt T7 浅底白卡, --card-bg-elevated 保持 base 默认 #ffffff 即可, 不做覆盖。 ============================================================ */ /* ========== 圆角性格 · R13-11B 2026-04-21 ========== T5 Indigo Aurora V2 · 半圆现代 SaaS（16/8/12 主轴 · 与 T3 同层级但走现代感） */ --radius-card: var(--radius-2xl); /* 16px */ --radius-btn: var(--radius-lg); /* 8px */ --radius-btn-lg: var(--radius-xl); /* 12px */ --radius-chip: var(--radius-full); /* pill */ --radius-input: var(--radius-lg); /* 8px */ --radius-image: var(--radius-2xl); /* 16px */ --radius-hero: var(--radius-3xl); /* 24px */ --radius-modal: var(--radius-2xl); /* 16px */ }