dudu MVP：五端语音输入法初始提交
- server：Go 网关（WS 流式识别中继/计费配额/微信登录支付 mock/反馈/埋点），gummy provider 已真实联调 - desktop：Tauri 2（全局快捷键 push-to-talk/浮层/托盘/设置/登录购买/反馈/首启引导） - android：Compose 主 App + IME（键盘内录音直传） - ios：App + 键盘扩展（1A spike 实证键盘内不可录音，走 deep link 听写） - design/design-pipeline：设计系统 + token 导出 iOS/Android 主题 - doc：前后端设计文档（HTML）；web：官网宣传页；todo：任务看板 Co-Authored-By: Claude Fable 5 <noreply@anthropic.com>
This commit is contained in:
wangjia
@@ -0,0 +1,113 @@
|
||||
/* ============================================================
|
||||
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;
|
||||
|
||||
--focus-ring: 0 0 0 3px var(--blue-200);
|
||||
}
|
||||
|
||||
[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;
|
||||
|
||||
--focus-ring: 0 0 0 3px rgba(92, 119, 232, 0.4);
|
||||
}
|
||||
@@ -0,0 +1,29 @@
|
||||
/* ============================================================
|
||||
dudu · elevation / motion tokens
|
||||
阴影极轻——简约风靠边框和层级背景色区分层次；
|
||||
只有浮动元素（浮层、菜单、弹窗）有明显投影。
|
||||
============================================================ */
|
||||
|
||||
:root {
|
||||
/* elevation */
|
||||
--shadow-card: 0 1px 3px rgba(17, 19, 26, 0.05);
|
||||
--shadow-menu: 0 4px 16px rgba(17, 19, 26, 0.10), 0 1px 3px rgba(17, 19, 26, 0.06);
|
||||
--shadow-window: 0 8px 28px rgba(17, 19, 26, 0.14);
|
||||
--shadow-overlay: 0 12px 36px rgba(10, 12, 18, 0.38);
|
||||
--shadow-key: 0 1px 0 rgba(17, 19, 26, 0.22); /* 键帽底边 */
|
||||
|
||||
/* motion — 快入慢出，无弹跳 */
|
||||
--ease-out: cubic-bezier(0.2, 0.8, 0.2, 1); /* @kind other */
|
||||
--ease-in-out: cubic-bezier(0.45, 0, 0.2, 1); /* @kind other */
|
||||
--dur-fast: 120ms; /* @kind other */ /* hover、按压 */
|
||||
--dur-base: 200ms; /* @kind other */ /* 浮层进出、开关 */
|
||||
--dur-slow: 320ms; /* @kind other */ /* 页面/屏幕切换 */
|
||||
}
|
||||
|
||||
[data-theme="dark"] {
|
||||
--shadow-card: 0 1px 3px rgba(0, 0, 0, 0.3);
|
||||
--shadow-menu: 0 4px 16px rgba(0, 0, 0, 0.4), 0 1px 3px rgba(0, 0, 0, 0.3);
|
||||
--shadow-window: 0 8px 28px rgba(0, 0, 0, 0.5);
|
||||
--shadow-overlay: 0 12px 36px rgba(0, 0, 0, 0.6);
|
||||
--shadow-key: 0 1px 0 rgba(0, 0, 0, 0.5);
|
||||
}
|
||||
@@ -0,0 +1,6 @@
|
||||
/* dudu · 品牌字体
|
||||
Outfit（Google Fonts CDN）— 圆润几何无衬线，用于品牌拉丁字
|
||||
"dudu"、数字与价格；中文 UI 文本走系统字体栈（PingFang SC /
|
||||
MiSans / HarmonyOS Sans / 雅黑）。
|
||||
注：暂以 CDN 引入；如有自托管字体文件请替换为 @font-face。 */
|
||||
@import url("https://fonts.googleapis.com/css2?family=Outfit:wght@400;500;600;700&display=swap");
|
||||
@@ -0,0 +1,33 @@
|
||||
/* ============================================================
|
||||
dudu · 间距 / 圆角 / 控件尺寸令牌
|
||||
4px 基准网格；圆角偏圆润（呼应圆嘴 logo）；
|
||||
控件高度：桌面紧凑 28/36，移动触控 44/56。
|
||||
============================================================ */
|
||||
|
||||
:root {
|
||||
/* 间距（4px 网格）*/
|
||||
--space-1: 4px;
|
||||
--space-2: 8px;
|
||||
--space-3: 12px;
|
||||
--space-4: 16px;
|
||||
--space-5: 20px;
|
||||
--space-6: 24px;
|
||||
--space-8: 32px;
|
||||
--space-10: 40px;
|
||||
--space-12: 48px;
|
||||
--space-16: 64px;
|
||||
|
||||
/* 圆角 */
|
||||
--radius-xs: 4px; /* kbd、小标签 */
|
||||
--radius-sm: 6px; /* 按钮、输入框、键帽 */
|
||||
--radius-md: 10px; /* 菜单、小卡片 */
|
||||
--radius-lg: 14px; /* 卡片、浮层 */
|
||||
--radius-xl: 20px; /* 大容器、手机屏 */
|
||||
--radius-full: 999px;
|
||||
|
||||
/* 控件高度 */
|
||||
--control-sm: 28px; /* 桌面紧凑 */
|
||||
--control-md: 36px; /* 桌面默认 */
|
||||
--control-lg: 44px; /* 移动最小触控 */
|
||||
--control-xl: 56px; /* 移动主操作 / 麦克风条 */
|
||||
}
|
||||
@@ -0,0 +1,38 @@
|
||||
/* ============================================================
|
||||
dudu · 字体与排版令牌
|
||||
UI 中文走系统字体（输入法 = 原生应用，跟随系统最自然）；
|
||||
Outfit（圆润几何无衬线）用于拉丁字 "dudu"、数字与价格，
|
||||
与圆嘴 logo 的线条语言呼应。字重只用 400/500/600/700。
|
||||
============================================================ */
|
||||
|
||||
:root {
|
||||
--font-sans: 'Outfit', -apple-system, BlinkMacSystemFont, 'PingFang SC',
|
||||
'MiSans', 'HarmonyOS Sans SC', 'Microsoft YaHei', 'Segoe UI', sans-serif;
|
||||
--font-mono: ui-monospace, 'SF Mono', Menlo, Consolas, 'Liberation Mono', monospace;
|
||||
|
||||
/* 字号阶梯 */
|
||||
--text-xs: 12px; /* 角标、键帽 */
|
||||
--text-sm: 13px; /* 次要信息、菜单 */
|
||||
--text-base: 14px; /* 桌面正文 */
|
||||
--text-md: 15px; /* 浮层识别文本、移动正文 */
|
||||
--text-lg: 17px; /* 区块标题、移动列表 */
|
||||
--text-xl: 20px; /* 窗口标题 */
|
||||
--text-2xl: 24px; /* 页面大标题 */
|
||||
--text-3xl: 32px; /* 价格、大数字 */
|
||||
--text-4xl: 44px; /* 营销大字 */
|
||||
|
||||
/* 字重 */
|
||||
--weight-regular: 400;
|
||||
--weight-medium: 500;
|
||||
--weight-semibold: 600;
|
||||
--weight-bold: 700;
|
||||
|
||||
/* 行高 */
|
||||
--leading-tight: 1.25;
|
||||
--leading-normal: 1.5;
|
||||
--leading-loose: 1.75; /* 中文长文本 */
|
||||
|
||||
/* 字距 */
|
||||
--tracking-normal: 0;
|
||||
--tracking-wide: 0.02em; /* 品牌字 dudu */
|
||||
}
|
||||
Reference in New Issue
Block a user