/* ===================================================================== 内部点餐系统 · 设计规范（Design Tokens） --------------------------------------------------------------------- 这份文件是视觉层的**唯一真源**：颜色、字号、间距、圆角、投影、动效、 触控热区全部定义在这里；styles.css 只允许引用变量，不再写裸值。 这样做的两个理由： ① 改一处、全局生效 —— 换品牌色不需要在样式表里搜 16 进制； ② 规范本身成为可评审的产物 —— 它是一份文件，而不是散落各处的巧合值。 参考依据： · iOS Human Interface Guidelines（字体阶梯 28/24/22/20/17/16/15/13/12/11、 触控热区 44pt 下限、safe-area 安全区） · 微信小程序官方视觉规范（功能色语义、Press/Disable 状态透明度、 可点区域 7–9mm） · 餐饮点餐类小程序通用惯例（食欲暖色主色、卡片分区、底部 Tab 2–5 项） 约定：`--c-*` 是原始阶（只允许在「语义别名」里引用一次）， `--bg / --ink / --brand ...` 是语义别名（样式表只引用这一层）。 字号 token 名**等于像素值**（--fs-17 就是 17px）。 改字号必须改名与改值同步，不能只改一边。 ===================================================================== */ :root { /* =================================================================== 1. 品牌色阶 · 食欲橙 餐饮场景的主色先要解决「想不想吃」。故取高明度、中高饱和的橙： 避开番茄红（偏促销、像打折海报）与土黄（偏陈旧、像旧报纸）。 500 为主色，600 用于 Press，700 用于白底上的深色文字（保证对比度）。 =================================================================== */ --c-brand-50: #FFF6F0; --c-brand-100: #FFE9DA; --c-brand-200: #FFD2B4; --c-brand-300: #FFB183; --c-brand-400: #FF9051; --c-brand-500: #F97316; /* 主色 */ --c-brand-600: #E25E0D; /* Press */ --c-brand-700: #BA4A0C; /* 强调文字 */ --c-brand-800: #8F390B; --c-brand-900: #6B2A08; /* =================================================================== 2. 中性色阶 · 暖灰 刻意与品牌同色相（偏黄），而不是纯灰 —— 纯灰放在暖橙旁边会发青、显脏。 50 为页面底、0 为卡片面、200 为分割线、800 为主文字。 =================================================================== */ --c-ink-0: #FFFFFF; --c-ink-50: #FBF7F2; --c-ink-100:#F5EFE7; --c-ink-200:#EDE4D9; --c-ink-300:#DED2C3; --c-ink-400:#BCAE9E; /* 禁用 */ --c-ink-500:#94867A; /* 次要文字 */ --c-ink-600:#6B5F55; --c-ink-700:#463D36; --c-ink-800:#2A2420; /* 主文字 */ --c-ink-900:#181411; /* =================================================================== 3. 功能色 语义固定：绿=完成、黄=待处理、红=出错/缺餐、蓝=信息/链接。 每色只出三档，够用即止：200=描边、500=图标与强调、50=底、700=底上的文字。 禁用态一律降透明度，不另造灰色（避免「灰」同时表示禁用与次要两种含义）。 =================================================================== */ --c-green-50:#E6F7EE; --c-green-200:#C9E9DA; --c-green-400:#3FD07F; --c-green-500:#12A05C; --c-green-700:#1E6B44; --c-amber-50:#FFF3DF; --c-amber-200:#F2DFB4; --c-amber-500:#C67C10; --c-amber-700:#8A5A10; --c-red-50:#FDEBE8; --c-red-200:#F7D2CC; --c-red-500:#DC2E24; --c-red-700:#9B2C20; --c-blue-50:#E9F1FD; --c-blue-200:#D3E2F7; --c-blue-500:#2E6FD6; --c-blue-700:#2E5A96; /* =================================================================== 4. 分类色（头像 / 部门 / 菜品缩略图底） 定长 10 色，同一实体永远取同一色，用于「快速分辨是谁」而不是装饰。 =================================================================== */ --c-c1:#F97316; --c-c2:#3B76D6; --c-c3:#12A05C; --c-c4:#8B5CF6; --c-c5:#C67C10; --c-c6:#0E9594; --c-c7:#D6478C; --c-c8:#8A8078; --c-c9:#C2410C; --c-c10:#4F46E5; /* =================================================================== 5. 语义别名（★ 样式表只引用这一层） =================================================================== */ --bg: var(--c-ink-50); /* 页面底 */ --card: var(--c-ink-0); /* 卡片面 */ --ink: var(--c-ink-800); /* 主文字 */ --ink2: var(--c-ink-600); /* 次要文字 */ --muted: var(--c-ink-500); /* 说明文字 · 时间戳 · 空值 */ --line: var(--c-ink-200); /* 分割线（同板块内） */ --line2: var(--c-ink-100); /* 分割线（更轻，行与行之间） */ --brand: var(--c-brand-500); --brand-d: var(--c-brand-700); --brand-s: var(--c-brand-50); --brand-s2:var(--c-brand-100); /* 落在品牌色 / 深色底上的前景色。独立成 token 而不是散落的 #fff： 将来若改深色品牌或做「深色模式」，只需要换这一处。 */ --on-strong:#FFFFFF; --green:var(--c-green-500); --green-s:var(--c-green-50); --amber:var(--c-amber-500); --amber-s:var(--c-amber-50); --red: var(--c-red-500); --red-s: var(--c-red-50); --blue: var(--c-blue-500); --blue-s: var(--c-blue-50); /* 语义色的「深一档」（700 阶）。**浅底上的小字**用它，不用 500 阶： 11px 的胶囊文字实测只有 3.04~4.23:1，够不到正文要求的 4.5:1。 分工是：50 阶做底、200 阶做描边、500 阶做图标、700 阶做小字。 */ --green-d:var(--c-green-700); --amber-d:var(--c-amber-700); --red-d: var(--c-red-700); --blue-d: var(--c-blue-700); --ink-d: var(--c-ink-700); /* =================================================================== 5.5 餐次色（午餐 / 晚餐）· 2026-09-16 落地 ------------------------------------------------------------------- 用途：点餐页顶部分段控件 `.mseg` 的**选中态填充色**。 改之前选中项是一颗白药丸压在暖灰轨道上，形状对比只有 1.14:1 —— 「选中」几乎只能靠一层影子表达，而且两餐长得一模一样， 切了餐次整页看起来「没变」。改成「选中项 = 实心餐次色 + 白字」后， 一个控件同时回答两个问题：哪个是选中、这是哪一餐。 午餐为什么直接用主色 --brand (#F97316)： 理由不是「好看」，是「同色」—— 「确认」「去点晚餐」这些主按钮就是 白字 on #F97316，选中态用同一个橙，全站就只有一套橙色语言： 哪个按钮是当前该按的、哪一餐是当前在看的，一眼同源。 曾经折中用过 700 阶 (#BA4A0C) 去换 5.16:1 的白字对比，落地后观感偏焦褐、 且与全站主按钮不是同一个橙，已按反馈改回主色。 代价是白字对比 2.80:1 —— 但这是 .btn.primary 从第一天起的既有取值， 属于全站统一的取舍，不在「餐次选中态」这一处单独偏离（要改应该整站一起改）。 为什么晚餐是「靛」不是「紫」： ① 语义：午餐＝正午暖阳（橙）、晚餐＝暮色（靛，黄昏天空）； ② 色相：橙 ~28° 与靛 ~245° 近互补，形成「暖/冷 + 亮/沉」双重分离； 纯紫 ~290° 与橙夹角更小、明度又同档，两个都高饱和时容易读成万圣节配色； ③ 功能色已被征用：绿=完成、琥珀=待处理、红=出错、蓝=信息， 晚餐要的冷色只剩靛/紫可用（选蓝会与「信息」打架，选青会与备选主色串味）； ④ 可达性：靛配白字 5.70:1 ✅；iOS 系统紫 #AF52DE 只有 4.13:1（小字不达标）。 注意：这套 token 只被「带 data-meal 的按钮」消费，见 styles.css 的 `.mseg button[data-meal].on` —— `.mseg` 还被管理端「账号管理」的 成员/商家 分段复用，那里没有 data-meal，仍走原来的白药丸。 =================================================================== */ --c-dinner-50:#F2F0FE; --c-dinner-100:#E6E3FD; --c-dinner-200:#C7C1F5; --c-dinner-500:#5B54D6; --c-dinner-600:#4A43C0; --c-dinner-700:#3B3499; --c-dinner-800:#2E2977; --meal-lunch: var(--brand); /* #F97316 · 与 .btn.primary 同一个橙 */ --meal-dinner: var(--c-dinner-500); /* #5B54D6 · 白字 5.70:1 ✅ */ /* 实心块自己的投影：跟填充同色，用中性灰在暖底上会发脏 */ --meal-lunch-sh: rgba(249,115,22,.34); --meal-dinner-sh: rgba(91,84,214,.30); /* =================================================================== 6. 字体阶梯（对齐 iOS HIG） 主档位对齐 iOS 人机界面指南：28 / 24 / 22 / 20 / 17 / 16 / 15 / 13 / 12 / 11。 规则：**不再出现 .5px** —— 碎值会让不同屏幕的字重与换行位置漂移。 最小档 11px 为角标专用；正文一律 16px 起（16px 也是 iOS 输入框 不触发「聚焦自动放大」的下限）。 =================================================================== */ --fs-28: 28px; /* 数字展示：KPI / 统计主数 */ --fs-24: 24px; /* 页面主标题 */ --fs-22: 22px; /* 大号强调 / Tab 图标 */ --fs-20: 20px; /* 区块标题 */ --fs-17: 17px; /* 强调正文 · 主按钮 */ --fs-16: 16px; /* 正文 · 表单输入 */ --fs-15: 15px; /* 次要正文 · 列表主文案 */ --fs-13: 13px; /* 辅助说明 */ --fs-12: 12px; /* 说明 / 时间戳 / 表单提示 */ --fs-11: 11px; /* 角标 · 徽章 */ --lh-tight:1.25; /* 标题 · 数字 */ --lh-body: 1.55; /* 正文 */ --lh-loose:1.75; /* 多行说明 */ --fw-reg:400; --fw-med:600; --fw-bold:700; --fw-heavy:800; --fw-black:900; /* 数字一律用等宽数字位，避免价格从 9 变 10 时整行抖动 */ --num:tabular-nums; /* 插画 / emoji 字号：与文字阶梯分开。emoji 的视觉大小与同像素的文字不等， 混进正文阶梯会让「图看起来比字小」这种问题反复出现。 */ --is-sm:24px; /* 行内缩略图 / 章节图标 */ --is-md:36px; /* 卡片配图 / 空态图标 */ --is-lg:80px; /* 详情页主图 */ /* =================================================================== 7. 间距 · 4px 网格 所有内边距 / 外边距只取这 7 档。既有的 7px / 9px / 11px / 13px 一律归整。 =================================================================== */ --sp-1:4px; --sp-2:8px; --sp-3:12px; --sp-4:16px; --sp-5:20px; --sp-6:24px; --sp-8:32px; --gutter:16px; /* 页面左右安全边距 */ --pad-card:14px; /* 卡片内边距（≈ --sp-3 + 2，视觉上比 12 透气、比 16 紧凑） */ --pad-row:12px 14px;/* 列表行内边距 */ /* =================================================================== 8. 圆角 =================================================================== */ --r-xs:8px; /* 标签 · 角标 · 小控件 */ --r-sm:10px; /* 次级控件 · 缩略图 */ --r-md:12px; /* 按钮 · 输入框 */ --r-lg:16px; /* 卡片 · 面板 */ --r-xl:20px; /* 弹层 · 设备内圆角 */ --r-pill:999px; --r:var(--r-lg); /* 兼容既有引用 */ /* =================================================================== 9. 投影 · 2 级 层级只能靠「有 / 更明显」两级区分。原来一个按钮一种发光效果， 等于没有层级 —— 到处都在浮起来，就等于什么都没浮起来。 =================================================================== */ --el-0:none; --el-1:0 1px 2px rgba(42,36,32,.04), 0 2px 8px rgba(42,36,32,.05); --el-2:0 4px 14px rgba(42,36,32,.08), 0 16px 36px rgba(42,36,32,.10); --sh:var(--el-1); /* 兼容既有引用 */ /* =================================================================== 10. 动效 只允许这两组时长 —— 快用于状态反馈（按下、开关），基础用于转场。 =================================================================== */ --dur-fast:120ms; --dur-base:200ms; --ease-out:cubic-bezier(.22,.61,.36,1); /* =================================================================== 11. 触控热区（对齐 iOS HIG 44pt 下限） 主操作取 44（达标）；密集次级控件取 40、最密档 36 —— **这是明确的偏离项**， 理由写在 demo 的「视觉规范」屏里，不藏。 =================================================================== */ --hit:44px; /* 主操作热区下限 */ --hit-sm:40px; /* 次级控件（步进器 · 中按钮） */ --hit-xs:36px; /* 密集控件（行内小按钮 · 勾选格） */ /* =================================================================== 12. 色板切换按钮上的小圆点 每个备选主色的代表色。必须独立成 token —— 切到「番茄红」时， 三个圆点仍要各自显示自己的颜色，不能都跟着 --brand 变。 =================================================================== */ --sw-warm:#F97316; --sw-tomato:#E5482F; --sw-teal:#0E8F96; /* =================================================================== 13. 点餐页顶部一行（餐次分段控件 + 截止 chip） 这一行左右两块**必须等高**，且 chip 的**宽度必须与文案无关**。 为什么定成 token：文案长度一旦撑开宽度，切餐次时 chip 会变宽、 左边的分段控件（flex:1）随之变窄变宽 —— 整行看起来「乱」。 尺寸由 token 决定，不由文案长度决定，切餐次 / 切状态都不跳版。 v0.19（2026-09-15 反馈落地）：这一行是「上下文」不是「内容」，压到 44 （与主按钮同高），首屏让给菜品；chip 去掉倒计时、只写「11:00 截止」， 两餐文案等长，--w-dlchip 收窄到 96。 v0.22（2026-09-16）：96 是按「11:40 截止」的等长文案定的；v0.21 新增的三种状态文案 （「🔒 已截止 18:10」「18:10 前仍可点」「明天 11:40 截止」）在 96px 下实测溢出 20~22px （white-space:nowrap + 定宽，文字顶破 chip 边界）。放宽到 124px（实测最长需 118）。 宽度仍与文案无关 —— 四种状态同一宽度，切餐次 / 切状态依旧不跳版。 =================================================================== */ --h-ordtop: 44px; --w-dlchip: 124px; } /* ===================================================================== 备选主色 · 只换色阶，一行排版都不动 --------------------------------------------------------------------- 用途：确认「颜色方向」。切换方式 —— ， demo 左上角的主色按钮即调这个属性。 做法：只覆盖原始阶（--c-brand-* / --c-ink-*），语义别名（--brand / --bg …） 仍是 var(--c-*)，会自动跟着变 —— 这正是把色阶与语义分层的意义。 为什么给这三个方向： · 暖橙 食欲 / 亲和 —— 日常食堂，最不容易出错 · 番茄红 热烈 / 效率 —— 快餐档口，出餐节奏快 · 沉静青 冷静 / 可信 —— 偏「公司系统」，弱化餐饮感、强化管理感 刻意不做「绿色主色」：绿在本规范里已经固定表示「完成」， 主色再用绿，用户就再也分不清「这是个牌子」还是「这事做完了」。 ===================================================================== */ /* 番茄红：快餐档口 */ :root[data-palette="tomato"]{ --c-brand-50: #FDF1EE; --c-brand-100:#FBDFD9; --c-brand-200:#F6C0B4; --c-brand-300:#EF9A86; --c-brand-400:#E97257; --c-brand-500:#E5482F; /* 主色 */ --c-brand-600:#C93A23; --c-brand-700:#A52E1B; --c-brand-800:#832516; --c-brand-900:#651D12; } /* 沉静青：偏「公司系统」。中性色一起转冷，否则冷色主色配暖灰会发脏 */ :root[data-palette="teal"]{ --c-brand-50: #E8F7F8; --c-brand-100:#CDEDEF; --c-brand-200:#A2DCE0; --c-brand-300:#6FC5CB; --c-brand-400:#3FAAB2; --c-brand-500:#0E8F96; /* 主色 */ --c-brand-600:#0B777D; --c-brand-700:#095F64; --c-brand-800:#074A4E; --c-brand-900:#05383B; --c-ink-50: #F4F7F8; --c-ink-100:#EAEFF1; --c-ink-200:#DBE3E6; --c-ink-300:#C3CFD3; --c-ink-400:#9FADB2; --c-ink-500:#75858A; --c-ink-600:#55646A; --c-ink-700:#38464B; --c-ink-800:#1F2A2E; --c-ink-900:#121A1D; } /* 关闭动效偏好：规范里的动效是「可关」的，不是强制装饰 */ @media (prefers-reduced-motion: reduce) { * { animation: none !important; transition: none !important; } }