/* ============================================================ 云督伴学 · Apple Design System · tokens.css（S1 基础层） ------------------------------------------------------------ 保守迁移模式： - 本文件只"新增"统一 token，不删除、不重写 static/style.css。 - 通过在 style.css 之后加载（见 _sidebar.html 接线）， 同名变量的取值以本文件为准，实现全站调色板平滑切换。 - 旧选择器、旧类名、旧 DOM 结构全部保留。 - 几何类变量（radius/spacing 旧值）本阶段不覆盖， 新组件使用独立的 --ydb-radius-card 等新 token。 业务代码冻结：本文件只含 CSS 变量，无任何逻辑。 ============================================================ */ :root { /* ---------- 表面 Surface ---------- */ --ydb-bg: #F5F5F7; /* 页面背景 */ --ydb-surface: #FFFFFF; /* 主卡片 */ --ydb-surface-2: rgba(120, 120, 128, 0.08); /* 次级填充 / 浅选中底 */ --ydb-surface-3: rgba(120, 120, 128, 0.12); /* 三级填充 */ /* 兼容旧变量名（style.css 中 --ydb-card） */ --ydb-card: #FFFFFF; /* ---------- 文字 Text ---------- */ --ydb-text: #1D1D1F; /* 主要文字 */ --ydb-text-2: #6E6E73; /* 次要文字 */ --ydb-text-3: #86868B; /* 三级文字 */ /* ---------- 分割线 Separator ---------- */ --ydb-separator: rgba(60, 60, 67, 0.12); --ydb-border: rgba(0, 0, 0, 0.04); /* 卡片 1px 边框 */ --ydb-border-strong: rgba(60, 60, 67, 0.20); /* ---------- 品牌红（仅强调色） ---------- 使用红线：主按钮 / 重要状态 / 选中状态 / 重点数据。 禁止大面积红色块背景、禁止装饰性红色光斑。 */ --ydb-primary: #E53935; --ydb-primary-pressed: #C62828; --ydb-primary-tint: #FDECEA; /* 选中底 / 图标衬底 */ /* 兼容旧变量名（style.css / ydb_cards.css） */ --ydb-primary-dark: #C62828; --ydb-primary-light: #FDECEA; --ydb-primary-lighter: #FEF5F4; --ydb-primary-glow: rgba(229, 57, 53, 0.10); /* ---------- 状态色（Apple 语义色） ---------- */ --ydb-success: #34C759; --ydb-success-bg: rgba(52, 199, 89, 0.12); --ydb-warning: #FF9500; --ydb-warning-bg: rgba(255, 149, 0, 0.12); --ydb-danger: #FF3B30; --ydb-danger-bg: rgba(255, 59, 48, 0.12); --ydb-info: #007AFF; --ydb-info-bg: rgba(0, 122, 255, 0.12); /* 兼容旧状态变量名（ydb_cards.css V2.1 状态视觉系统） */ --ydb-green: #34C759; --ydb-green-bg: rgba(52, 199, 89, 0.12); --ydb-yellow: #FF9500; --ydb-yellow-bg: rgba(255, 149, 0, 0.12); --ydb-red: #FF3B30; --ydb-red-bg: rgba(255, 59, 48, 0.12); --ydb-blue: #007AFF; --ydb-blue-bg: rgba(0, 122, 255, 0.12); --ydb-gray: #86868B; --ydb-gray-bg: rgba(120, 120, 128, 0.10); --ydb-black: #1D1D1F; --ydb-black-bg: rgba(120, 120, 128, 0.10); /* ---------- Spacing（9 档） ---------- */ --sp-1: 4px; --sp-2: 8px; --sp-3: 12px; --sp-4: 16px; --sp-5: 20px; --sp-6: 24px; --sp-7: 32px; --sp-8: 40px; --sp-9: 48px; /* ---------- Radius（新 token，不覆盖旧 --ydb-radius* 几何值） ---------- */ --ydb-radius-card: 18px; /* 统一卡片圆角 */ --ydb-radius-control: 12px; /* 输入框 / 小控件 */ --ydb-radius-icon: 10px; /* 图标衬底 */ --ydb-radius-pill: 999px; /* 胶囊 / 徽标 */ /* ---------- Shadow（极轻或无） ---------- */ --ydb-shadow-card: 0 1px 3px rgba(0, 0, 0, 0.04); --ydb-shadow-raised: 0 8px 24px rgba(0, 0, 0, 0.10); /* 仅弹层使用 */ /* ---------- Animation ---------- */ --ydb-dur-fast: 180ms; /* 按钮按压 / 开关 */ --ydb-dur-base: 240ms; /* 菜单 / 抽屉 / 卡片交互 */ --ydb-dur-slow: 320ms; /* Sheet / Dialog */ --ydb-ease: cubic-bezier(0.22, 1, 0.36, 1); /* ---------- Z-index ---------- */ --z-content: 0; --z-nav: 100; /* NavigationBar */ --z-overlay: 1050; /* 菜单遮罩 */ --z-drawer: 1100; /* 侧栏抽屉（沿用现有 1100） */ --z-sheet: 1200; /* 底部 Sheet */ --z-dialog: 1300; /* 居中 Dialog */ --z-toast: 1400; /* Toast */ /* ---------- 字体栈（system-ui 体系，无网络字体） ---------- */ --ydb-font: -apple-system, BlinkMacSystemFont, "PingFang SC", "Helvetica Neue", Arial, sans-serif; /* ---------- 图标 ---------- */ --ydb-icon-size: 24px; /* 默认 24px */ --ydb-icon-size-sm: 20px; /* 紧凑场景 20px */ /* ============================================================ Accent Palette（S7 视觉增色层，2026-08-28） ------------------------------------------------------------ 9 色 accent 体系：主色仅用于图标 / 4px 细色条 / 文字点缀； 大面积背景一律使用 *-soft（5-11% 透明度）或 *-gradient-soft （极轻渐变，顶部 ~10% → 中部 ~3% → 尾部透明，叠在白 surface 上）。 -text 为深色文本变体（iOS 无障碍色），仅用于金额 / 指标大数字。 使用红线：禁止在页面里写裸颜色值，必须引用本组 token。 ============================================================ */ --accent-red: #E53935; --accent-red-soft: rgba(229, 57, 53, 0.07); --accent-red-text: #C62828; --accent-orange: #FF9500; --accent-orange-soft: rgba(255, 149, 0, 0.09); --accent-orange-text: #C77700; --accent-yellow: #F0A500; --accent-yellow-soft: rgba(240, 165, 0, 0.10); --accent-yellow-text: #A87B00; --accent-green: #34C759; --accent-green-soft: rgba(52, 199, 89, 0.09); --accent-green-text: #248A3D; --accent-teal: #30B0C7; --accent-teal-soft: rgba(48, 176, 199, 0.09); --accent-teal-text: #1D7F91; --accent-blue: #007AFF; --accent-blue-soft: rgba(0, 122, 255, 0.07); --accent-blue-text: #0066CC; --accent-indigo: #5856D6; --accent-indigo-soft: rgba(88, 86, 214, 0.07); --accent-indigo-text: #4B49B0; --accent-purple: #AF52DE; --accent-purple-soft: rgba(175, 82, 222, 0.07); --accent-purple-text: #933EC9; --accent-pink: #FF2D55; --accent-pink-soft: rgba(255, 45, 85, 0.06); --accent-pink-text: #D81B4F; /* 极轻渐变 token：叠在白色 surface 上，营造"呼吸感"而非色块 */ --gradient-red-soft: linear-gradient(168deg, rgba(229, 57, 53, 0.10) 0%, rgba(229, 57, 53, 0.03) 46%, rgba(229, 57, 53, 0) 100%); --gradient-orange-soft: linear-gradient(168deg, rgba(255, 149, 0, 0.10) 0%, rgba(255, 149, 0, 0.03) 46%, rgba(255, 149, 0, 0) 100%); --gradient-yellow-soft: linear-gradient(168deg, rgba(240, 165, 0, 0.11) 0%, rgba(240, 165, 0, 0.03) 46%, rgba(240, 165, 0, 0) 100%); --gradient-green-soft: linear-gradient(168deg, rgba(52, 199, 89, 0.10) 0%, rgba(52, 199, 89, 0.03) 46%, rgba(52, 199, 89, 0) 100%); --gradient-teal-soft: linear-gradient(168deg, rgba(48, 176, 199, 0.10) 0%, rgba(48, 176, 199, 0.03) 46%, rgba(48, 176, 199, 0) 100%); --gradient-blue-soft: linear-gradient(168deg, rgba(0, 122, 255, 0.09) 0%, rgba(0, 122, 255, 0.03) 46%, rgba(0, 122, 255, 0) 100%); --gradient-indigo-soft: linear-gradient(168deg, rgba(88, 86, 214, 0.09) 0%, rgba(88, 86, 214, 0.03) 46%, rgba(88, 86, 214, 0) 100%); --gradient-purple-soft: linear-gradient(168deg, rgba(175, 82, 222, 0.09) 0%, rgba(175, 82, 222, 0.03) 46%, rgba(175, 82, 222, 0) 100%); --gradient-pink-soft: linear-gradient(168deg, rgba(255, 45, 85, 0.08) 0%, rgba(255, 45, 85, 0.025) 46%, rgba(255, 45, 85, 0) 100%); /* 右上角极浅 radial 光晕（Status/Accent 卡角部点睛；强度 6-8%，非 Glow） */ --radial-red-corner: radial-gradient(circle at 100% 0%, rgba(229, 57, 53, 0.08) 0%, rgba(229, 57, 53, 0) 62%); --radial-orange-corner: radial-gradient(circle at 100% 0%, rgba(255, 149, 0, 0.08) 0%, rgba(255, 149, 0, 0) 62%); --radial-yellow-corner: radial-gradient(circle at 100% 0%, rgba(240, 165, 0, 0.09) 0%, rgba(240, 165, 0, 0) 62%); --radial-green-corner: radial-gradient(circle at 100% 0%, rgba(52, 199, 89, 0.08) 0%, rgba(52, 199, 89, 0) 62%); --radial-teal-corner: radial-gradient(circle at 100% 0%, rgba(48, 176, 199, 0.08) 0%, rgba(48, 176, 199, 0) 62%); --radial-blue-corner: radial-gradient(circle at 100% 0%, rgba(0, 122, 255, 0.07) 0%, rgba(0, 122, 255, 0) 62%); --radial-indigo-corner: radial-gradient(circle at 100% 0%, rgba(88, 86, 214, 0.07) 0%, rgba(88, 86, 214, 0) 62%); --radial-purple-corner: radial-gradient(circle at 100% 0%, rgba(175, 82, 222, 0.07) 0%, rgba(175, 82, 222, 0) 62%); --radial-pink-corner: radial-gradient(circle at 100% 0%, rgba(255, 45, 85, 0.06) 0%, rgba(255, 45, 85, 0) 62%); /* accent 描边（卡片 tint 边框，比 soft 略深一档） */ --accent-red-border: rgba(229, 57, 53, 0.16); --accent-orange-border: rgba(255, 149, 0, 0.18); --accent-yellow-border: rgba(240, 165, 0, 0.20); --accent-green-border: rgba(52, 199, 89, 0.18); --accent-teal-border: rgba(48, 176, 199, 0.18); --accent-blue-border: rgba(0, 122, 255, 0.15); --accent-indigo-border: rgba(88, 86, 214, 0.15); --accent-purple-border: rgba(175, 82, 222, 0.15); --accent-pink-border: rgba(255, 45, 85, 0.14); /* Icon Container 统一几何（S7：40-44px、12px radius） */ --ydb-icon-container-size: 42px; --ydb-icon-container-radius: 12px; } /* ============================================================ Dark Mode 预留（S1 不强制启用） ------------------------------------------------------------ 策略：Light Mode 为当前唯一正式模式。 Dark token 以 html.ydb-dark 类开关形式预留， 后续单独验收时再切换为 @media (prefers-color-scheme: dark)。 预留写法（本阶段保持注释，不生效）： @media (prefers-color-scheme: dark) { :root:not(.ydb-light) { --ydb-bg: #000000; --ydb-surface: #1C1C1E; --ydb-text: #F5F5F7; --ydb-text-2: #AEAEB2; --ydb-text-3: #8E8E93; --ydb-separator: rgba(84, 84, 88, 0.60); --ydb-border: rgba(255, 255, 255, 0.08); --ydb-surface-2: rgba(118, 118, 128, 0.24); --ydb-surface-3: rgba(118, 118, 128, 0.36); } } ============================================================ */ html.ydb-dark { /* 手动开关：给 加 ydb-dark 类才生效（实验用，未验收） */ --ydb-bg: #000000; --ydb-surface: #1C1C1E; --ydb-text: #F5F5F7; --ydb-text-2: #AEAEB2; --ydb-text-3: #8E8E93; --ydb-separator: rgba(84, 84, 88, 0.60); --ydb-border: rgba(255, 255, 255, 0.08); --ydb-surface-2: rgba(118, 118, 128, 0.24); --ydb-surface-3: rgba(118, 118, 128, 0.36); }