/* ========================================================================== 同城信息平台 · 统一设计令牌（v2.26.134 · 四端唯一色彩/尺度定义处） -------------------------------------------------------------------------- 引入位置：各端样式表之前（） 已接入：index.html（采集端）、city.html（WAP）、pc.html（PC）、platform.html（后台） —— 历史说明：原头部标注「由 design/tokens.css 自动生成」，但上游目录早已不存在， 实际一直手改本文件。v2.26.134 起明确以本文件为唯一定义源。 —— 本文件只放变量，不含重置与副作用，可安全前置引入。 ========================================================================== */ :root { /* ---------- 1. 品牌色（统一三端：替换旧 #2f6fed / #1d4ed8） ---------- */ --brand-50: #EEF4FF; --brand-100: #DCE8FF; --brand-200: #B9D0FF; --brand-300: #8AB0FF; --brand-400: #5C8AF8; --brand-500: #2563EB; /* 主色 · 按钮/链接/选中态 */ --brand-600: #1D4ED8; /* 悬停 */ --brand-700: #1E40AF; /* 按下 */ --brand-800: #1E3A8A; /* ---------- 2. 强调色（价格 / 置顶 / 营销暖点） ---------- */ --accent-50: #FFF3ED; --accent-100: #FFE4D6; --accent-400: #FF8A4C; --accent-500: #FF6B35; /* 主强调 */ --accent-600: #E85520; --accent-700: #C2410C; /* ---------- 3. 语义色 ---------- */ --success-50: #ECFDF3; --success-200: #ABEFC6; --success-500: #12B76A; --success-700: #027A48; --warning-50: #FFFAEB; --warning-200: #FEDF89; --warning-500: #F79009; --warning-700: #B54708; --danger-50: #FEF3F2; --danger-200: #FECDCA; --danger-500: #F04438; --danger-700: #B42318; --info-50: #EFF8FF; --info-200: #B2DDFF; --info-500: #2E90FA; --info-700: #175CD3; --neutral-50: #F8FAFC; /* v2.26.134：浅底徽标专用中性（原来三端各造一套灰） */ --neutral-100: #F2F4F7; --neutral-200: #E4E7EC; /* ---------- 3b. 标签色谱（v2.26.134）---------- 用途：身份/来源徽标（群 · 朋友圈 · 个人 · 客服号 · 设备 · 位置 · 黑名单 · 已发次数）。 为什么单独一套：徽标靠「色相」快速区分，全归一色会丢信息密度； 但各页自己挑色又导致「同一种含义在不同页是不同颜色」。 这里固定 7 组「浅底 + 深字」，全部满足 WCAG AA 4.5:1（最浅一组 5.0:1）。 */ --tag-blue-50: #EFF8FF; --tag-blue-700: #175CD3; --tag-cyan-50: #ECFDFF; --tag-cyan-700: #0E7090; --tag-green-50: #ECFDF3; --tag-green-700: #027A48; --tag-amber-50: #FFFAEB; --tag-amber-700: #B54708; --tag-red-50: #FEF3F2; --tag-red-700: #B42318; --tag-purple-50: #F4F3FF; --tag-purple-700: #5925DC; --tag-gray-50: #F2F4F7; --tag-gray-700: #475467; /* ---------- 4. 中性色阶（Slate 9 阶，替代散落的 #98a/#889/#999/#aab） ---------- */ --c-text-strong: #101828; /* 标题 */ --c-text: #344054; /* 正文 */ --c-text-2: #475467; /* 次要正文 */ --c-text-3: #667085; /* 辅助说明 */ --c-text-4: #98A2B3; /* 占位 / 禁用 */ --c-text-invert: #FFFFFF; --c-border: #E4E7EC; /* 常规描边 */ --c-border-2: #F0F1F3; /* 弱分隔线 */ --c-surface: #FFFFFF; /* 卡片面 */ --c-surface-2: #F7F8FA; /* 页面底 */ --c-surface-3: #F2F4F7; /* 输入框 / 占位面 */ --c-overlay: rgba(16, 24, 40, .55); /* ---------- 5. 深色导航（后台侧栏） ---------- */ --nav-bg: #101828; --nav-bg-2: #1D2939; --nav-text: #98A2B3; --nav-text-hi: #FFFFFF; --nav-active: #2563EB; /* ---------- 6. 字体 ---------- */ --font-sans: -apple-system, BlinkMacSystemFont, "PingFang SC", "Microsoft YaHei", "Helvetica Neue", Helvetica, Arial, sans-serif; --font-num: "SF Pro Display", -apple-system, "DIN Alternate", "PingFang SC", sans-serif; /* ---------- 7. 字号台阶（移动端最小 12px，去掉 9/10/11px 违规档） ---------- */ --fs-2xs: 11px; /* 仅用于角标等装饰性文字（不承载信息） */ --fs-xs: 12px; /* 最小可读 */ --fs-sm: 13px; --fs-md: 14px; /* 正文基准 */ --fs-lg: 15px; --fs-xl: 17px; --fs-2xl: 20px; --fs-3xl: 24px; --fs-4xl: 30px; --fs-5xl: 36px; /* v2.26.134：补齐实现中真实在用的档位 —— 此前台阶是 11/12/13/14/15/17/20/24/30/36，但四端代码里实际反复使用 16/18/22/26（页面小标题 / 区块标题 / 页面标题 / 大标题）。 与其把 16 硬掰成 15、22 硬掰成 20（纯视觉变动、无一致性收益）， 不如把这些档正式纳管，此后新增页面只允许取台阶上的值。 */ --fs-16: 16px; /* 页面小标题 / 卡片标题 */ --fs-18: 18px; /* 区块标题 / 弹层标题 */ --fs-22: 22px; /* 页面标题 */ --fs-26: 26px; /* 大标题 / 数字强调 */ --fs-badge: 10px; /* 角标 / 图标专用 —— 不承载正文信息，别用它写句子 */ --fw-regular: 400; --fw-medium: 500; --fw-semibold:600; --fw-bold: 700; --lh-tight: 1.3; --lh-normal: 1.5; --lh-loose: 1.75; /* ---------- 8. 间距（4px 基准 · 8 阶） ---------- */ --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; /* ---------- 9. 圆角 ---------- */ --r-xs: 4px; --r-sm: 6px; --r-md: 8px; --r-lg: 12px; --r-xl: 16px; --r-full: 999px; /* v2.26.134：实现里 10px / 14px / 22px 大量使用且承担明确角色，正式纳管 */ --r-8: 8px; /* 紧凑卡片 / 列表项 / 竖向菜单项 */ --r-10: 10px; /* 输入框 / 小卡片 / 次级按钮 */ --r-14: 14px; /* 主卡片 / 弹层（四端统一半径） */ --r-22: 22px; /* 移动端底部弹层 / 浮层 */ /* ---------- 10. 阴影（3 阶，克制使用） ---------- */ --sh-xs: 0 1px 2px rgba(16,24,40,.05); --sh-sm: 0 1px 3px rgba(16,24,40,.08), 0 1px 2px rgba(16,24,40,.04); --sh-md: 0 4px 12px rgba(16,24,40,.08); --sh-lg: 0 12px 32px rgba(16,24,40,.12); --sh-focus: 0 0 0 3px rgba(37,99,235,.18); /* v2.26.134：语义色浮起阴影 —— 主按钮/成功按钮/警示按钮「有重量」用。 之前这些阴影是各页自己写的 rgba(47,111,224,.45) 一类，是 v2.26.89 换品牌色 （#2F6FE0 → #2563EB）时**漏改的旧蓝**，导致按钮本体是深蓝、投影却是亮蓝。 */ --sh-brand: 0 4px 12px rgba(37,99,235,.28); --sh-brand-sm:0 2px 8px rgba(37,99,235,.20); --sh-accent: 0 4px 12px rgba(255,107,53,.26); --sh-success: 0 4px 12px rgba(18,183,106,.24); --sh-warning: 0 4px 12px rgba(247,144,9,.20); --sh-danger: 0 4px 12px rgba(240,68,56,.24); /* 贴在边缘上的阴影（底部导航栏 / 侧滑抽屉）需要方向，不能压成通用档 */ --sh-up: 0 -2px 10px rgba(16,24,40,.06); --sh-left: -4px 0 18px rgba(16,24,40,.10); /* ---------- 11. 动效 ---------- */ --t-fast: 120ms cubic-bezier(.4,0,.2,1); --t-base: 200ms cubic-bezier(.4,0,.2,1); --t-slow: 280ms cubic-bezier(.4,0,.2,1); /* ---------- 12. 层级 ---------- */ --z-sticky: 30; --z-fab: 40; --z-drawer: 60; --z-modal: 70; --z-toast: 90; /* ---------- 13. 布局 ---------- */ --tap-min: 44px; /* 最小触控目标（WCAG 2.5.5） */ --topbar-h: 52px; --bottombar-h: 56px; --rail-w: 232px; /* 后端一级导航 */ --side-w: 168px; /* 后端二级导航 */ } [data-theme="dark"] { --c-text-strong: #F9FAFB; --c-text: #EAECF0; --c-text-2: #D0D5DD; --c-text-3: #98A2B3; --c-text-4: #667085; --c-border: #344054; --c-border-2: #1D2939; --c-surface: #161B26; --c-surface-2: #0C111D; --c-surface-3: #1D2939; --nav-bg: #0C111D; --nav-bg-2: #161B26; } /* ========================================================================== v2.26.134 · 动效偏好 系统开启「减少动态效果」时，把过渡压到几乎瞬间（仍保留状态变化，只是不做位移/渐变）。 只压过渡变量、不动 @keyframes —— 轮播、骨架屏等依赖 animation 的逻辑不受影响。 ========================================================================== */ @media (prefers-reduced-motion: reduce) { :root { --t-fast: 1ms linear; --t-base: 1ms linear; --t-slow: 1ms linear; } }