wangjia
208d0cda12
真相源整固： - design/index.html 登记簿：token 色板（var() 实时渲染）/ 组件登记卡 / 图标与跨端映射 / guidelines / ui_kits 单一入口，check-ds 强制登记 - design/icons.js 图标单源（Lucide 线条）+ icon-map.json 跨端映射表 （web/iOS/Android 三列，iOS 12 个 SF Symbol 全部收编登记） - components/core/Icon.jsx 单源图标渲染器；MicBar/RecognitionOverlay 接入 - tokens 新增 --brand-wechat(-press)（微信官方绿）与 --overlay-wave - fonts.css 弃 Google Fonts CDN，Outfit 可变字体自托管 （assets/outfit-latin.woff2，40KB；中国网络下 CDN 不可用会卡字体） - design/serve.mjs 零依赖预览服务器（登记簿与原型评审入口） codegen 强化（export-tokens.mjs）： - 产物直写消费位置：ios/dudu/Shared/DuduTheme.swift、 android/.../design/DuduTheme.kt——删除 design-pipeline/generated/ 中间拷贝层（此前 app 内是手工拷贝，--check 守不到真实消费文件已漂移） - 新增 web/tokens.css 产物（custom props 透传 + Outfit data URI 内嵌） - tokens 文件遍历排序，产物确定性 存量收编： - desktop：三个窗口内联 SVG → Icon 组件；tray 裸 rgba → token+opacity - Android：LoginScreen 微信绿常量 → DuduPalette.brandWechat(Press)， Color.White → textOnAccent - 官网 web/index.html：接入 tokens.css，34 处硬编码 hex 全部 var() 化； 深色板块（metrics/cta/footer）改挂 data-theme="dark" 复用 dark 令牌； 移除 Google Fonts CDN - design 包内 8 处裸色：微信绿 token 化、装饰色 ds-ignore 白名单、 同值色改 var() 引用 防漂移闸（零依赖 Node）： - design-pipeline/check-ds.mjs：真相源自检 7 道（dark⊆light / var 链 / 裸色∈tokens 值集 / 组件登记 / icons 唯一 / icon-map 双向同集 / 禁 emoji） - design-pipeline/check-code.mjs：代码侧单源（desktop 禁字面色+内联 path / iOS 禁字面色+SF Symbol 同集 / Android 禁 Color(0x / web 禁字面色）， ds-ignore 行级豁免制 - .githooks/pre-commit（启用：git config core.hooksPath .githooks） - CI design job 扩展为三道闸全绿 - 反向验证通过：注入裸色/孤儿 token/未登记组件/未登记 symbol 均被拦截 Co-Authored-By: Claude Fable 5 <noreply@anthropic.com>
123 lines
3.3 KiB
CSS
123 lines
3.3 KiB
CSS
/* ============================================================
|
|
dudu 语音输入法 · 颜色令牌
|
|
Light 为默认（:root），Dark 通过 [data-theme="dark"] 切换。
|
|
简约原则：单一品牌蓝 + 冷灰中性阶梯；绿=录音/成功，
|
|
琥珀=超额/警告，红=错误。识别浮层两种模式均为深色玻璃。
|
|
============================================================ */
|
|
|
|
:root {
|
|
/* ---- 品牌蓝阶梯 ---- */
|
|
--blue-50: #EEF1FE;
|
|
--blue-100: #DFE5FD;
|
|
--blue-200: #C4CFFB;
|
|
--blue-300: #9FB1F9;
|
|
--blue-400: #7590F8;
|
|
--blue-500: #4F6EF7;
|
|
--blue-600: #3D58DB;
|
|
--blue-700: #2F44B3;
|
|
--blue-800: #25368C;
|
|
--blue-900: #1E2B6B;
|
|
|
|
/* ---- 中性阶梯（冷灰）---- */
|
|
--gray-0: #FFFFFF;
|
|
--gray-25: #FCFCFD;
|
|
--gray-50: #F6F7FA;
|
|
--gray-100: #F0F1F4;
|
|
--gray-200: #E4E6EB;
|
|
--gray-300: #D2D5DD;
|
|
--gray-400: #A6ABB8;
|
|
--gray-500: #7A8090;
|
|
--gray-600: #5A6072;
|
|
--gray-700: #434957;
|
|
--gray-800: #2B2F3A;
|
|
--gray-900: #1B1E26;
|
|
--gray-950: #11131A;
|
|
|
|
/* ---- 功能色 ---- */
|
|
--green-500: #16A34A;
|
|
--green-100: #DCFCE7;
|
|
--amber-500: #E8890C;
|
|
--amber-100: #FCEFD7;
|
|
--red-500: #DC2626;
|
|
--red-100: #FEE2E2;
|
|
|
|
/* ============ 语义别名 · Light ============ */
|
|
--bg-app: var(--gray-50);
|
|
--surface-card: var(--gray-0);
|
|
--surface-2: var(--gray-100);
|
|
--surface-3: var(--gray-200);
|
|
--border-1: var(--gray-200);
|
|
--border-2: var(--gray-300);
|
|
|
|
--text-1: var(--gray-900);
|
|
--text-2: var(--gray-600);
|
|
--text-3: var(--gray-400);
|
|
--text-on-accent: #FFFFFF;
|
|
|
|
--accent: var(--blue-500);
|
|
--accent-hover: var(--blue-600);
|
|
--accent-press: var(--blue-700);
|
|
--accent-soft: var(--blue-50);
|
|
--accent-soft-2: var(--blue-100);
|
|
--accent-text: var(--blue-600);
|
|
|
|
--positive: var(--green-500);
|
|
--positive-soft: var(--green-100);
|
|
--warning: var(--amber-500);
|
|
--warning-soft: var(--amber-100);
|
|
--danger: var(--red-500);
|
|
--danger-soft: var(--red-100);
|
|
|
|
/* 识别浮层（两种模式均为深色玻璃）*/
|
|
--overlay-bg: rgba(24, 26, 34, 0.95);
|
|
--overlay-text: #F2F4FA;
|
|
--overlay-text-2: #9AA3BD;
|
|
--overlay-text-3: #646E8C;
|
|
--overlay-wave: #7C9BFF;
|
|
|
|
--focus-ring: 0 0 0 3px var(--blue-200);
|
|
|
|
/* 第三方品牌色（微信登录/支付按钮，官方规范色，双主题同值）*/
|
|
--brand-wechat: #07C160;
|
|
--brand-wechat-press: #06AD56;
|
|
}
|
|
|
|
[data-theme="dark"] {
|
|
--bg-app: #0F1116;
|
|
--surface-card: #171A22;
|
|
--surface-2: #1E222C;
|
|
--surface-3: #262B37;
|
|
--border-1: #272C38;
|
|
--border-2: #343A49;
|
|
|
|
--text-1: #ECEEF4;
|
|
--text-2: #9AA1B2;
|
|
--text-3: #5F6678;
|
|
--text-on-accent: #FFFFFF;
|
|
|
|
--accent: #5C77E8;
|
|
--accent-hover: #6E89F9;
|
|
--accent-press: #4A63D6;
|
|
--accent-soft: rgba(92, 119, 232, 0.16);
|
|
--accent-soft-2: rgba(92, 119, 232, 0.26);
|
|
--accent-text: #7D95F7;
|
|
|
|
--positive: #34C46A;
|
|
--positive-soft: rgba(52, 196, 106, 0.16);
|
|
--warning: #F2A33C;
|
|
--warning-soft: rgba(242, 163, 60, 0.16);
|
|
--danger: #F05B5B;
|
|
--danger-soft: rgba(240, 91, 91, 0.16);
|
|
|
|
--overlay-bg: rgba(30, 33, 43, 0.96);
|
|
--overlay-text: #F2F4FA;
|
|
--overlay-text-2: #9AA3BD;
|
|
--overlay-text-3: #646E8C;
|
|
--overlay-wave: #7C9BFF;
|
|
|
|
--focus-ring: 0 0 0 3px rgba(92, 119, 232, 0.4);
|
|
|
|
--brand-wechat: #07C160;
|
|
--brand-wechat-press: #06AD56;
|
|
}
|