/* ========================================================================== Verity React 孤岛 · 全局桥接层 · verity-islands.css 作用：让 React 孤岛里的 Tailwind / Aceternity 组件**直接吃** Verity 的 设计令牌，而不必知道当前页面用的是哪一套样式表栈。 ── 为什么需要这一层 ──────────────────────────────────────────────────── 孤岛挂在 Shadow Root 里，与页面 CSS 完全隔离（这是刻意的：1821 行的 verity-design-system.css 有大量元素级与 body 级选择器，不隔离就必然二次 回归）。自定义属性会穿透 Shadow 边界继承，所以令牌本来就能进孤岛。 但站点上同时存在两套令牌命名： · 控制台（cloud/*.php） 加载 verity-design-system.css 提供 --c-* / --brand-* / --n-* / --r-* / --elev-* · 落地页（index.html） 仍加载 tokens.css + style.css + theme-cinema.css + ui-system.css，只提供 --accent / --bg-base / --surface / --text-primary / --line / --radius-* 这一套旧名字，**没有任何 --c-* / --brand-* / --n-*** 孤岛要能同时活在这两种页面上，所以本文件做两件事： 1. 把两套命名统一成孤岛契约（--c-* / --brand-* / --n-* / …）； 2. 捕获与 Tailwind 主题键同名的令牌到 --vx-*。 ── 关键手法：:where(:root) ───────────────────────────────────────────── 下面第一块兜底声明写在 `:where(:root)` 里。`:where()` 把特异性压到 0,0,0， 而设计系统的 `:root` 是 0,1,0 —— 所以**只要设计系统在场，它就无条件胜出， 与本文件的前后加载顺序无关**；设计系统缺席时（落地页），兜底值生效。 因此不需要「判断设计系统是否存在」这种做不到的事，也不会覆盖设计系统。 第二块 --vx-* 写在普通 `:root` 里：这些名字只有本文件定义，不存在冲突。 ── 引入方式 ──────────────────────────────────────────────────────────── 放在站点根目录，与 verity-design-system.css 同级。 _head.php（控制台） 紧随设计系统之后引入 index.html（落地页） 紧随 ui-system.css 之后引入 本文件不产生任何组件样式，只有自定义属性声明，删除它只会让孤岛失去配色。 ========================================================================== */ /* ========================================================================== 1 · 孤岛令牌契约（兜底） :where(:root) 特异性 0 —— 设计系统在场时整块失效。 每个值优先取设计系统的语义层，其次取旧令牌，最后才是字面值。 ========================================================================== */ :where(:root) { /* ---------- 语义色 ---------- */ --c-bg: var(--bg-base, #ffffff); --c-bg-tint: var(--bg-tint, #f2f7ff); --c-surface: var(--surface, #ffffff); --c-surface-2: var(--surface-subtle, #f1f4f8); --c-surface-3: var(--bg-soft, #f5f7fa); --c-overlay: rgba(16, 24, 40, .45); --c-border: var(--line, rgba(16, 24, 40, .10)); --c-border-soft: var(--line-soft, rgba(16, 24, 40, .08)); --c-border-strong: var(--line-strong, rgba(16, 24, 40, .16)); --c-text: var(--text-primary, #101828); --c-text-2: var(--text-secondary, #475467); --c-text-3: var(--text-tertiary, #667085); --c-text-on: var(--text-inverse, #ffffff); --c-brand: var(--accent, #1f63d6); --c-brand-ink: var(--accent-ink, #0f62d9); --c-brand-deep: var(--accent-deep, #0b53b8); --c-brand-soft: var(--accent-soft, rgba(22, 119, 255, .08)); --c-brand-line: var(--accent-line, rgba(22, 119, 255, .20)); --c-brand-grad: var(--accent-grad, linear-gradient(135deg, #0f62d9 0%, #1473e6 100%)); --c-success: var(--success, #079455); --c-success-soft: var(--success-soft, rgba(7, 148, 85, .08)); --c-success-line: rgba(7, 148, 85, .22); --c-warning: var(--warning, #b54708); --c-warning-soft: var(--warning-soft, rgba(181, 71, 8, .08)); --c-warning-line: rgba(181, 71, 8, .22); --c-danger: var(--danger, #d92d20); --c-danger-soft: var(--danger-soft, rgba(217, 45, 32, .07)); --c-danger-line: rgba(217, 45, 32, .22); /* ---------- 原始层：品牌蓝阶 ---------- 设计系统的 --brand-* 优先级更高；这里只是落地页的兜底副本。 改品牌色时**必须同时改这两处**（另一处是 verity-design-system.css §1）。 */ --brand-50: #f0f6ff; --brand-100: #dceaff; --brand-200: #bcd6ff; --brand-300: #8fbbff; --brand-400: #5c9bff; --brand-500: #1f63d6; --brand-600: #0f62d9; --brand-700: #0b53b8; --brand-800: #0a4392; --brand-900: #093571; --brand-cyan: var(--accent-cyan, #2fcbff); /* ---------- 原始层：中性阶（带蓝倾向，与品牌同源） ---------- */ --n-0: #ffffff; --n-25: #fbfcfe; --n-50: #f5f7fa; --n-100: #eef1f6; --n-200: #e2e7ef; --n-300: #cbd3e0; --n-400: #98a2b3; --n-500: #667085; --n-600: #475467; --n-700: #344054; --n-800: #1d2939; --n-900: #101828; --n-950: #0a101c; /* ---------- 原始层：状态色阶 ---------- */ --green-50: #ecfdf3; --green-100: #d1fadf; --green-500: #079455; --green-600: #067647; --green-700: #05603a; --amber-50: #fffaeb; --amber-100: #fef0c7; --amber-500: #b54708; --amber-600: #93370d; --red-50: #fef3f2; --red-100: #fee4e2; --red-500: #d92d20; --red-600: #b42318; --red-700: #912018; /* ---------- 圆角 ---------- */ --r-xs: 4px; --r-sm: var(--radius-sm, 6px); --r-md: var(--radius, 8px); --r-lg: var(--radius-lg, 14px); --r-full: 999px; /* ---------- 阴影 ---------- */ --elev-1: var(--shadow-sm, 0 1px 2px rgba(16, 24, 40, .06)); --elev-2: var(--shadow, 0 4px 12px -2px rgba(16, 24, 40, .08)); --elev-3: var(--shadow-lg, 0 12px 32px -8px rgba(16, 24, 40, .13)); --elev-4: var(--shadow-lg, 0 24px 56px -12px rgba(16, 24, 40, .18)); /* ---------- 排版 ---------- */ --fs-xs: 12px; --fs-sm: 13px; --fs-base: 15px; --fs-md: 16px; --fs-lg: 18px; --fs-xl: 21px; --fs-2xl: 26px; --fs-3xl: 32px; --fs-4xl: 42px; --lh-tight: 1.18; --lh-snug: 1.35; --lh-base: 1.62; --lh-loose: 1.75; --fw-normal: 400; --fw-medium: 500; --fw-semi: 600; --fw-bold: 700; /* ---------- 间距（4px 基准，与 Tailwind 的 --spacing 乘法表一致） ---------- */ --sp-1: 4px; --sp-2: 8px; --sp-3: 12px; --sp-4: 16px; --sp-5: 20px; --sp-6: 24px; --sp-8: 32px; --sp-10: 40px; --sp-12: 48px; --sp-16: 64px; --sp-20: 80px; /* ---------- 动效 ---------- --ease-out / --ease-in-out / --ease-out-expo 与 Tailwind 主题键同名， 这里提供落地页兜底值；控制台侧由设计系统提供。 */ --ease-out: cubic-bezier(.22, 1, .36, 1); --ease-in-out: cubic-bezier(.65, 0, .35, 1); --ease-out-expo: cubic-bezier(.16, 1, .3, 1); --dur-1: 120ms; --dur-2: 180ms; --dur-3: 260ms; } /* ========================================================================== 2 · 孤岛专用派生令牌（--vx-*） 这些名字只有本文件定义，不存在与设计系统冲突的问题。 为什么要改名捕获：--font-sans / --font-mono / --ease-out / --ease-in-out / --ease-out-expo 这五个名字 **Tailwind 也在用**。Tailwind v4 把主题变量 输出到 `:root, :host`，也就是写死在 shadow host 元素上——元素级声明压过 从 继承来的值。若孤岛的 @theme 直接写 `--font-sans: var(--font-sans)`， 要么自我引用，要么拿到 Tailwind 的 ui-sans-serif 栈，中文不再走 PingFang SC / 微软雅黑。 先在这里捕获成 --vx-*，孤岛的 @theme 再引用它，两个问题同时消失。 注意：自定义属性的替换发生在计算值阶段，所以这里拿到的一定是 :root 上最终生效的那个值，与本文件的前后加载顺序无关。 ========================================================================== */ :root { --vx-font-sans: var(--font-sans); --vx-font-mono: var(--font-mono); --vx-ease-out: var(--ease-out); --vx-ease-in-out: var(--ease-in-out); --vx-ease-out-expo: var(--ease-out-expo); /* 基础字号/行高：孤岛内文本跟随页面 */ --vx-fs-base: var(--fs-base); --vx-lh-base: var(--lh-base); /* ---------- 品牌光晕（由品牌蓝派生，不硬编码色值） ---------- color-mix 在 2023 年后已是基线特性；不支持时整条声明失效， 组件退回 --elev-* 中性阴影，不会崩。 */ --vx-glow-sm: 0 4px 14px color-mix(in oklab, var(--brand-500) 16%, transparent); --vx-glow: 0 14px 34px color-mix(in oklab, var(--brand-500) 24%, transparent); --vx-glow-lg: 0 24px 64px color-mix(in oklab, var(--brand-500) 30%, transparent); --vx-glow-cyan: 0 16px 40px color-mix(in oklab, var(--brand-cyan) 28%, transparent); /* ---------- 渐变 ---------- */ --vx-grad-brand: var(--c-brand-grad); /* ---------- 玻璃面（亮暗两套主题下都成立） ---------- */ --vx-glass: color-mix(in oklab, var(--c-surface) 62%, transparent); --vx-glass-2: color-mix(in oklab, var(--c-surface) 82%, transparent); --vx-hairline: color-mix(in oklab, var(--c-border) 60%, transparent); }