/* ============================================================================ * 1010.WANG ·「静谧层次」双主题令牌 * * 真相源: apps/mobile/global.css + apps/mobile/lib/theme/colors.ts * 规格书: ../../../DESIGN.md §2 * * 铁律: 改任何一个令牌 = 改三处。少改一处双端就开始漂移, * 且漂移在很久以后才被看见。 * * 本文件只有变量,零选择器规则。见到第一条 `.foo { }` 就说明放错文件了。 * ========================================================================== */ :root { /* ---- 底与面(层次的骨架)------------------------------------------- */ --bg: #F2F1F9; /* 页面底 */ --fg: #1C1A2E; /* 主文字 */ --surface: #FFFFFF; /* 卡面 */ --surface-secondary: #F7F6FB; /* 卡内嵌块 */ --surface-tertiary: #ECEAF6; /* 再深一阶 */ --overlay: #FFFFFF; /* 抽屉/弹层面 —— 现与 --surface 同值,语义槽位仍分开 */ --backdrop: rgba(28, 26, 46, 0.4); /* ---- 文字层级(五档,由重到轻)-------------------------------------- */ --body: #4D4A63; /* 正文 */ --secondary: #6B6880; /* 次要 */ --muted: #8D89A3; /* 弱化标签 */ --faint: #A09CB8; /* 最轻:副标题/脚注 */ --chevron: #C6C2D9; /* 箭头等纯指示图形 */ /* ---- 强调 ---------------------------------------------------------- */ --accent: #5B50E0; --accent-fg: #FFFFFF; --accent-tint: #EFEAFD; --accent-soft-fg: #5B50E0; /* tint 底上的前景 */ --accent-mid: #6E62F0; /* 渐变起点(主题无关) */ --accent-light: #8B7BF7; /* 渐变终点(主题无关) */ /* ---- 状态 ---------------------------------------------------------- */ --success: #1E9E63; --success-tint: #E7F6EF; --success-soft-fg: #1E9E63; --warning: #E8963E; --warning-tint: #FDF1E3; --warning-soft-fg: #C0731D; --danger: #E5484D; --danger-tint: #FDEAEA; --danger-soft-fg: #CC3A40; --info: #4A9DE8; --info-tint: #E5F1FD; --gold: #BB9418; --gold-tint: #FAF3DF; --success-tint-soft: rgba(47, 184, 119, 0.12); --success-bright: #2FB877; /* 进度条填充,比语义绿亮一档 */ /* 实色状态底上的前景。深色下 success/warning 会翻转成深色,见 [data-theme="dark"] */ --success-fg: #FFFFFF; --warning-fg: #FFFFFF; --danger-fg: #FFFFFF; /* ---- 中性变体 ------------------------------------------------------ */ --default: #ECEAF6; --default-fg: #4D4A63; --segment: #FFFFFF; --segment-fg: #1C1A2E; /* ---- 涨跌方向语义(别名,不是新颜色)-------------------------------- * * 跌绿涨红,中国市场习惯,与欧美相反。新代码一律用方向语义 up/down; * --success 同时兼任非方向的「成功/完成」语义,故不改名。 */ --up: var(--danger); --up-tint: var(--danger-tint); --down: var(--success); --down-tint: var(--success-tint); --down-tint-soft: var(--success-tint-soft); /* ---- 线与分隔 ------------------------------------------------------ */ --border: #E9E7F2; --hairline: #F3F2F8; /* 列表行间发丝线 */ --gray-bar: #EFEDF8; /* 进度条空轨 */ --separator-2: rgba(28, 26, 46, 0.08); --separator-3: rgba(28, 26, 46, 0.12); --border-2: rgba(28, 26, 46, 0.15); --border-3: rgba(28, 26, 46, 0.25); --featured-border: #A79EF5; /* featured 卡描边 */ /* ---- 玻璃(半透明覆盖层)------------------------------------------- */ --glass: rgba(28, 26, 46, 0.04); --glass-border: rgba(28, 26, 46, 0.06); --glass-strong: rgba(28, 26, 46, 0.08); --nav-glass: rgba(250, 250, 253, 0.72); /* 导航栏毛玻璃兜底 */ --nav-pill: rgba(91, 80, 224, 0.10); /* 选中丸 —— 必须半透明 */ /* ---- 表单 ---------------------------------------------------------- */ --field-bg: #FFFFFF; --field-fg: #1C1A2E; --field-placeholder: #A09CB8; --field-border: #E9E7F2; --field-shadow: 0 0 0 0 transparent; /* 两个主题都是零 —— 输入框永不投影 */ --focus: #5B50E0; --link: #5B50E0; /* ---- 反色胶囊(区间 chip 激活态)----------------------------------- */ --chip-active-bg: #1C1A2E; --chip-active-fg: #FFFFFF; /* ---- 图表 ---------------------------------------------------------- */ --chart-value: #7166EE; /* 当前市值线(主角) */ --chart-cost: #C6C2D9; /* 累计投入成本(虚线基准,必须比主角弱) */ --chart-bar: #8B7BF7; /* 柱 */ --chart-bar-ghost: #DCD7F5; /* 当月未完成的幽灵柱 */ --chart-fill-top: 0.22; /* 面积渐变顶部透明度 */ /* 序数槽位:分类图表(环形图/多序列)按序取色。只在此定义一次 —— **值一律是引用**, var() 在使用处才求值,深色下自动取到深色的被引用者,故这一族不需要深色副本, 也不需要与移动端逐值比对(它们的一致性由被引用者保证)。 **八个槽必须两两可辨** —— 从前 1 与 4 都是 --accent,第四条序列于是与第一条 同色:一个「按序取色」的表里藏着两个同色槽,等于承诺了却没兑现。 排序按色相跨度铺开,先用两个中性语义(紫/蓝),再上暖色,最后才动用方向色 —— --success/--danger 在行情语境里是跌/涨,在分类语境里只是第五、第六个类目 (与 .icon-square--green 在规则卡上是「完成」同理,见 DESIGN.md §2)。 */ --chart-1: var(--accent); /* 紫 */ --chart-2: var(--info); /* 蓝 */ --chart-3: var(--gold); /* 芥黄 */ --chart-4: var(--warning); /* 橙 */ --chart-5: var(--success); /* 绿 */ --chart-6: var(--danger); /* 红 */ --chart-7: var(--chart-value); /* 藕紫 */ --chart-8: var(--chart-cost); /* 灰,天然的「其余」 */ /* ---- 阴影 ---------------------------------------------------------- */ --shadow-card: 0 4px 10px 0 rgba(60, 60, 100, 0.07); --shadow-soft: 0 3px 8px 0 rgba(60, 60, 100, 0.06); --shadow-overlay: 0 6px 12px 0 rgba(60, 60, 100, 0.09); --shadow-accent-btn: 0 8px 12px 0 rgba(110, 98, 240, 0.35); /* 主题无关 */ /* ---- 渐变 ---------------------------------------------------------- */ --bg-gradient: linear-gradient(180deg, #F2F1F9 0%, #ECEAF6 30%, #F4F3FA 100%); --accent-gradient: linear-gradient(135deg, #6E62F0 0%, #8B7BF7 100%); } [data-theme="dark"] { --bg: #16151F; --fg: #F0EFF8; --surface: #201F30; --surface-secondary: #262536; --surface-tertiary: #2B2A3C; --overlay: #201F30; --backdrop: rgba(0, 0, 0, 0.6); --body: #A4A1BD; --secondary: #A4A1BD; /* 刻意与 body 同值:深色底上五档太挤,二三档合并层级反而更清晰 */ --muted: #7D7A96; --faint: #6F6C8A; --chevron: #4C4A63; --accent: #A191FF; --accent-fg: #FFFFFF; --accent-tint: rgba(139, 123, 247, 0.16); --accent-soft-fg: #B7AAFF; --accent-mid: #6E62F0; --accent-light: #8B7BF7; --success: #34D18B; --success-tint: rgba( 52, 209, 139, 0.13); --success-soft-fg: #34D18B; --warning: #F0A649; --warning-tint: rgba(240, 166, 73, 0.14); --warning-soft-fg: #F0A649; --danger: #F06268; --danger-tint: rgba(240, 98, 104, 0.14); --danger-soft-fg: #F06268; --info: #5AA9FF; --info-tint: rgba( 90, 169, 255, 0.14); --gold: #D4B544; --gold-tint: rgba(212, 181, 68, 0.12); --success-tint-soft: rgba(52, 209, 139, 0.13); --success-bright: #34D18B; /* 深色下与语义绿同值 */ /* 深色的绿与橙本身够亮,白字压上去对比不足;红暗一档,白字仍成立。 照抄浅色那套 = 一次低对比事故。 */ --success-fg: #16151F; --warning-fg: #16151F; --danger-fg: #FFFFFF; --default: #2B2A3C; --default-fg: #A4A1BD; --segment: #262536; --segment-fg: #F0EFF8; --border: rgba(255, 255, 255, 0.08); --hairline: #2B2A3C; /* 实色,非透明 —— 这是深色层次的主力器件 */ --gray-bar: #2B2A3C; --separator-2: rgba(255, 255, 255, 0.08); --separator-3: rgba(255, 255, 255, 0.12); --border-2: rgba(255, 255, 255, 0.15); --border-3: rgba(255, 255, 255, 0.25); --featured-border: #6E63E8; --glass: rgba(255, 255, 255, 0.05); --glass-border: rgba(255, 255, 255, 0.06); --glass-strong: rgba(255, 255, 255, 0.12); --nav-glass: rgba(22, 21, 34, 0.72); --nav-pill: rgba(161, 145, 255, 0.14); --field-bg: #262536; --field-fg: #F0EFF8; --field-placeholder: #6F6C8A; --field-border: rgba(255, 255, 255, 0.08); --field-shadow: 0 0 0 0 transparent; --focus: #A191FF; --link: #A191FF; --chip-active-bg: #F0EFF8; --chip-active-fg: #17161F; --chart-value: #8B7BF7; --chart-cost: #3A3752; --chart-bar: #8B7BF7; --chart-bar-ghost: #3A3752; --chart-fill-top: 0.25; /* 深色完全无卡片阴影 —— 层次靠 surface 阶梯 + hairline 描边 */ --shadow-card: none; --shadow-soft: none; --shadow-overlay: 0 8px 14px 0 rgba(0, 0, 0, 0.4); --shadow-accent-btn: 0 8px 12px 0 rgba(110, 98, 240, 0.35); --bg-gradient: linear-gradient(180deg, #16151F 0%, #191826 30%, #141320 100%); --accent-gradient: linear-gradient(135deg, #6E62F0 0%, #8B7BF7 100%); } /* ============================================================================ * 形状 · 间距 · 动效(主题无关) * ========================================================================== */ :root { /* ---- 圆角,只有这八个数(--r-field 与 --r-seg 同值不同语义,算两个) ---- */ --r-card: 22px; /* 卡片 */ --r-btn: 20px; /* 按钮(52 高) */ --r-bar: 19px; /* 胖进度轨(38 高) */ --r-seg: 14px; /* 分段控件外轨 · 卡内嵌块 */ --r-field: 14px; /* 输入框 —— 与 --r-seg 同值但不同语义 */ --r-inner: 12px; /* 卡内嵌小块 · 提示条 */ --r-icon: 11px; /* 图标方块(34×34)· 分段丸 */ --r-pill: 999px; /* 胶囊 */ /* ---- 卡片内距三档 ---- */ --card-pad-sm: 16px; --card-pad: 18px; /* 默认 */ --card-pad-lg: 24px; /* ---- 页面:四档容器宽 ---- * * 约束宽度的是**文本列**而非页面(DESIGN.md §4 法则二):一列连续正文 ≤ narrow、 * 一个表单列 ≤ form;离散卡片可以并列成墙,页面随之加宽到 wide。 * 且 **断点值 = 容器上限值**(法则三)—— 桌面断点就是 --page-wide 这个数, * 不另立第二个。 */ --gutter: 24px; /* 页面左右边距,全站唯一 */ --page-form: 480px; /* 表单列 */ --page-narrow: 720px; /* 连续正文 · 叙事单列 */ --page-wide: 1120px; /* 卡片墙 · 仪表版面 · 宽表 */ --header-clearance: 80px; /* 固定顶栏高度。布局契约,只许在此定义一次 */ /* ---- 图表画布高 ---- * * **尺寸的真相源在 CSS,chart.js 读容器实测值**。此前 JS 里另有一份 180/152 * 常量,与这里必须相等却无人校验;而 preserveAspectRatio="none" 意味着一旦不等, * 整张图垂直变形且不报错。留一份。 */ --chart-h: 180px; --bars-h: 152px; /* 环形图是正方的,且自己按 viewBox 缩放 —— 这个数只喂 CSS 一处, chart.js 不读它。它在这里是为了「画布尺寸都在同一个抽屉里」。 */ --donut-h: 190px; /* ---- 字族 ---- */ --font: 'Manrope', -apple-system, 'PingFang SC', 'Microsoft YaHei', sans-serif; /* ---- 时长六档 ---- */ --dur-fast: 150ms; /* 按压进入等即时反馈 */ --dur-standard: 250ms; /* 状态切换:分段滑动、选中着色 */ --dur-gentle: 400ms; /* 颜色晕染、按压释放的缓缓熄灭 */ --dur-enter: 480ms; /* 卡片进场 */ --dur-fill: 700ms; /* 进度生长、图表描线 */ --dur-count: 800ms; /* 数字滚动 */ /* ---- 全站仅两条缓动。出现第三条即视为失律 ---- */ --ease: cubic-bezier(0.25, 0.1, 0.25, 1); /* = CSS ease,状态过渡 */ --ease-out: cubic-bezier(0.33, 1, 0.68, 1); /* ≈ Easing.out(cubic),进场专用 */ }