/* * iLink 视觉系统 v1.0 · 令牌层 * ------------------------------------------------------------------ * 这是全站设计令牌的唯一来源。新代码只准引用这里的变量， * 不要再去 design-tokens.css / app-redesign.css 里找同名值。 * * 层序：layers.css 已声明 vendor, legacy, tokens, base, components, pages... * 本文件位于 tokens 层，普通声明天然压过 legacy 层，所以这里不需要 !important。 * 例外：旧文件里带 !important 的声明仍然会赢——那是迁移时要逐个摘掉的旧链接。 */ @layer tokens { :root { /* ============================================================ 一、环境光 冷白基调：#f2f6fa 比纯灰更冷一档。顶部天光渐变只负责让底色 "从上方受光"，不引入彩色光斑——冷白底上任何高饱和光效都会破坏一致性。 ============================================================ */ --ui-bg-page: #f2f6fa; --ui-bg-gradient: radial-gradient(ellipse at 50% 0%, #ffffff 0%, #f2f6fa 80%); /* ============================================================ 二、表面 ============================================================ */ --ui-surface: #ffffff; --ui-surface-subtle: #f4f7fa; --ui-surface-selected: #edf1f6; --ui-rail: #edf1f6; --ui-border: #e6edf3; --ui-border-strong: #cfdae5; /* ============================================================ 三、文字 三级文字全部满足 4.5:1。正文不依赖任何玻璃背景托底。 ============================================================ */ --ui-text: #0f172a; --ui-text-secondary: #475569; --ui-text-muted: #64748b; /* ============================================================ 四、弥散光（静态） 统一冷灰蓝调 rgba(15,23,42,…)。纯黑阴影在冷白底上会立刻显脏。 AO = 紧贴物体的接触阴影，Drop = 自然光的漫反射扩散，两层分离才有物理感。 ============================================================ */ --ui-shadow-ao: 0 2px 4px rgba(15, 23, 42, 0.02); --ui-shadow-drop: 0 12px 32px -8px rgba(15, 23, 42, 0.06), 0 4px 12px rgba(15, 23, 42, 0.03); --ui-shadow-drop-hover: 0 24px 48px -12px rgba(15, 23, 42, 0.08), 0 8px 16px -4px rgba(15, 23, 42, 0.04); /* 组合快捷方式 */ --ui-shadow-surface: var(--ui-shadow-ao), var(--ui-shadow-drop); --ui-shadow-surface-hover: var(--ui-shadow-ao), var(--ui-shadow-drop-hover); /* ============================================================ 五、边缘光（静态，强度可调） 玻璃厚度的签名，由三个分量叠加：外圈锐利高光 / 顶部内高光 / 底部内暗部。 --ui-edge-strength 是总强度系数，0 时完全消失（"柔和"档降为 0.35）。 ============================================================ */ --ui-edge-strength: 1; --ui-edge-ring: 0 0 0 1px rgba(255, 255, 255, calc(0.9 * var(--ui-edge-strength))); --ui-edge-inner: inset 0 1px 1px rgba(255, 255, 255, var(--ui-edge-strength)); --ui-edge-shadow: inset 0 -1px 2px rgba(0, 0, 0, calc(0.03 * var(--ui-edge-strength))); --ui-edge-all: var(--ui-edge-ring), var(--ui-edge-inner), var(--ui-edge-shadow); /* ============================================================ 六、增强光（唯一允许动的层） 核心主张：指针即光源。 手机系统没有指针，光只能是全局的、装饰的；桌面有指针， 光可以有来源——阴影背离指针，亮部落在指针处，暗部在几何对侧。 这三个数就是整套光照的旋钮，全站只在这里调： --ui-light-shift 阴影随指针偏移的最大位移 --ui-light-shade 对侧暗部的浓度（0 时完全平） --ui-light-radius 亮部/暗部的作用半径 ============================================================ */ --ui-light-shift: 8px; --ui-light-shade: 0.085; --ui-light-radius: 320px; /* 点触光波 */ --ui-tap-glow: 0.5; /* 语义呼吸光（招募中）：动效在 prefers-reduced-motion 下会自动停 */ --ui-breathe-color: rgba(27, 122, 87, 0.4); --ui-breathe-duration: 2.6s; /* ============================================================ 七、品牌色：浅云蓝 只给核心 CTA，不参与内容层。文字 #0c4a6e 压在 #c9e5ff 上约 7:1。 ============================================================ */ --ui-brand-bg-top: #eaf5ff; --ui-brand-bg-bottom: #c9e5ff; --ui-brand-text: #0c4a6e; --ui-brand-glow: rgba(186, 230, 253, 0.6); /* ============================================================ 七点五、团队空间材质 参考方案里的极光背景没有照搬：紫蓝色晕会和全站冷白打架， 这里改成"冷白底 + 白玉画板"，只靠厚度分层。 ============================================================ */ --ui-glass-bg: rgba(255, 255, 255, 0.45); --ui-glass-blur: blur(32px) saturate(180%); /* 白玉画板：主内容区，最强的一层投影 */ --ui-shadow-panel: 0 24px 64px -12px rgba(15, 23, 42, 0.12), 0 8px 16px -4px rgba(15, 23, 42, 0.04), 0 0 0 1px rgba(255, 255, 255, 1), inset 0 2px 4px rgba(255, 255, 255, 1); /* 充气卡片：看板任务、成员行 */ --ui-shadow-card: 0 1px 2px rgba(15, 23, 42, 0.02), 0 4px 12px -2px rgba(15, 23, 42, 0.04), 0 12px 24px -6px rgba(15, 23, 42, 0.04), inset 0 1px 1px rgba(255, 255, 255, 1), 0 0 0 1px rgba(15, 23, 42, 0.03); /* 水晶输入舱：Agent 输入框，整个页面最浮的一层 */ --ui-shadow-input: 0 8px 16px -4px rgba(15, 23, 42, 0.06), 0 24px 48px -12px rgba(15, 23, 42, 0.08), inset 0 1px 2px rgba(255, 255, 255, 1), 0 0 0 1px rgba(15, 23, 42, 0.05); /* ============================================================ 八、语义状态色 只出现在状态徽章，且永远配文字，不做纯色块表达。 ============================================================ */ --ui-success: #1b7a57; --ui-success-soft: #dbeddb; --ui-info: #17403f; --ui-info-soft: #d9eaea; --ui-warning: #8c5f09; --ui-warning-soft: #fbf0d7; --ui-danger: #b8403a; --ui-danger-soft: #fbe7e5; /* ============================================================ 九、几何 上下限是硬约束：内容卡片 ≤18px，不再出现 24px 以上的大圆角。 ============================================================ */ --ui-radius-control: 10px; --ui-radius-surface: 16px; --ui-radius-panel: 20px; --ui-radius-pill: 999px; /* ============================================================ 十、动作色（中性场景） 品牌蓝只给核心 CTA；列表行内、工具栏这类高频动作仍用石墨， 避免整页被蓝色点满。 ============================================================ */ --ui-action-soft: #e9edf0; --ui-action-ink: #26313a; --ui-action-line: #c6d0d8; --ui-action-hover: #dce3e8; --ui-action-solid: #2f3a42; --ui-action-solid-hover: #232b31; /* ============================================================ 十一、焦点 焦点环必须可见：2px 内圈 + 2px 外扩，颜色跟随动作色。 ============================================================ */ --ui-ring: 0 0 0 2px var(--ui-surface), 0 0 0 4px rgba(47, 58, 66, 0.28); /* ============================================================ 十二、字体与节奏 ============================================================ */ --ui-font: Inter, "Noto Sans SC", "PingFang SC", "Microsoft YaHei", "Hiragino Sans GB", sans-serif; --ui-ease: cubic-bezier(0.2, 0.8, 0.2, 1); --ui-duration: 150ms; } /* ============================================================ 质感档位：只切属性，不维护三套样式。 html[data-texture="soft"] —— 数据密集页 / 无障碍降级 html[data-texture="real"] —— 落地页等展示场景 ============================================================ */ [data-texture="soft"] { --ui-edge-strength: 0.35; --ui-specular-opacity: 0.12; --ui-tap-glow: 0.2; } [data-texture="real"] { --ui-edge-strength: 1; --ui-specular-opacity: 1; --ui-tap-glow: 0.8; } } /* ============================================================ 旧阴影令牌 → 冷灰体系 ------------------------------------------------------------ design-tokens.css 的 --shadow-card / --shadow-float 还是 graphite（rgba(15,23,42)）色温，和 v2 的冷灰影子放在同一页会发脏。 在 tokens 层重新声明即可压过 legacy，所有旧组件自动跟随。 ============================================================ */ @layer tokens { :root { --shadow-card: 0 1px 2px rgba(15, 23, 42, 0.03), 0 4px 12px -4px rgba(15, 23, 42, 0.05); --shadow-float: 0 12px 32px -10px rgba(15, 23, 42, 0.16), 0 4px 12px -2px rgba(15, 23, 42, 0.06); } }