docs(design): 解压 Maestro Design System 到 design/（重构参照材料）
phosphor console v1.1 设计系统（从现网 web/style.css 演化）：tokens(colors/effects/ typography/fonts) + components(core/forms/surfaces .jsx) + ui_kits(console + console_mobile) + assets/icons(15 双色 SVG) + guidelines + CLAUDE/SKILL/readme。供 B1–B6 重构任务对照实现。 Co-Authored-By: Claude Opus 4.8 <noreply@anthropic.com>
This commit is contained in:
wangjia
@@ -0,0 +1,81 @@
|
||||
/* MAESTRO · 颜色令牌 — phosphor console palette
|
||||
Source: maestro/web/style.css :root */
|
||||
:root {
|
||||
/* ── 基底（碳绿底） ── */
|
||||
--bg: #0a0d0b; /* 主背景 */
|
||||
--bg-deep: #070908; /* 侧栏 / 输入框 / 更深一层 */
|
||||
--panel: #10140f; /* 卡片 / 面板 */
|
||||
--panel-2: #151b14; /* 面板 hover / 强调层 */
|
||||
--line: #232d23; /* 标准描边 */
|
||||
--line-soft: #1a221a; /* 弱描边 / 分隔虚线 */
|
||||
|
||||
/* ── 文字 ── */
|
||||
--ink: #d8e4d4; /* 正文 */
|
||||
--muted: #76876f; /* 次要文字 / 标签 */
|
||||
--faint: #4a5747; /* 弱化文字 / 占位 */
|
||||
|
||||
/* ── 磷光信号色（每色配 -dim 暗位用作边框/底色） ── */
|
||||
--green: #5fdd7d; /* 成功 / 可执行 / 品牌主色 */
|
||||
--green-dim: #2e6b3d;
|
||||
--violet: #b88ef5; /* 审批闸 / 等待裁决 */
|
||||
--violet-dim:#503070;
|
||||
--amber: #f0b429; /* 警示 / MED 复杂度 / 等待依赖 */
|
||||
--amber-dim: #6b5414;
|
||||
--red: #ff5d5d; /* 失败 / 驳回 / Hard */
|
||||
--red-dim: #6b2424;
|
||||
--cyan: #59c8d8; /* 执行中 / agent / 链接 */
|
||||
--cyan-dim: #1e4e57;
|
||||
|
||||
/* ── 辉光（text-shadow / box-shadow 用） ── */
|
||||
--glow-green: 0 0 12px rgba(95, 221, 125, .45);
|
||||
--glow-violet: 0 0 14px rgba(184, 142, 245, .4);
|
||||
--glow-cyan: 0 0 18px rgba(89, 200, 216, .5);
|
||||
--glow-red: 0 0 14px rgba(255, 93, 93, .3);
|
||||
|
||||
/* ── 语义别名 ── */
|
||||
--surface-page: var(--bg);
|
||||
--surface-rail: var(--bg-deep);
|
||||
--surface-card: var(--panel);
|
||||
--surface-raised: var(--panel-2);
|
||||
--text-body: var(--ink);
|
||||
--text-secondary: var(--muted);
|
||||
--text-disabled: var(--faint);
|
||||
--border-default: var(--line);
|
||||
--border-soft: var(--line-soft);
|
||||
--accent: var(--green);
|
||||
--accent-dim: var(--green-dim);
|
||||
--status-go: var(--green);
|
||||
--status-gate: var(--violet);
|
||||
--status-bad: var(--red);
|
||||
--status-run: var(--cyan);
|
||||
}
|
||||
|
||||
/* ── Light 主题：<html data-theme="light"> 激活 — 纸白底，信号色加深保对比，-dim 变淡色底 ── */
|
||||
[data-theme="light"] {
|
||||
--bg: #f3f6f1;
|
||||
--bg-deep: #e9eee6;
|
||||
--panel: #fcfdfb;
|
||||
--panel-2: #e4ebe1;
|
||||
--line: #c9d4c6;
|
||||
--line-soft: #dbe3d8;
|
||||
|
||||
--ink: #1d251b;
|
||||
--muted: #5c6b57;
|
||||
--faint: #92a08c;
|
||||
|
||||
--green: #1b8f46;
|
||||
--green-dim: #b5e2c3;
|
||||
--violet: #7747d1;
|
||||
--violet-dim:#dcccf6;
|
||||
--amber: #946d06;
|
||||
--amber-dim: #ecd9a0;
|
||||
--red: #cd3434;
|
||||
--red-dim: #f2baba;
|
||||
--cyan: #0b7488;
|
||||
--cyan-dim: #b2dfe7;
|
||||
|
||||
--glow-green: 0 0 10px rgba(27, 143, 70, .25);
|
||||
--glow-violet: 0 0 10px rgba(119, 71, 209, .22);
|
||||
--glow-cyan: 0 0 12px rgba(11, 116, 136, .25);
|
||||
--glow-red: 0 0 10px rgba(205, 52, 52, .2);
|
||||
}
|
||||
@@ -0,0 +1,45 @@
|
||||
/* MAESTRO · 形制令牌 — 直角、细线、辉光、扫描线 */
|
||||
:root {
|
||||
/* 圆角：小而克制 — 控件 3–4px、面板 6px、浮层 10px；圆形仍只用于状态点 */
|
||||
--radius-xs: 3px; /* chip / 徽章 / 小标签 */
|
||||
--radius-sm: 4px; /* 按钮 / 输入框 / doc 块 */
|
||||
--radius-md: 6px; /* 面板 / 卡片 / toast */
|
||||
--radius-lg: 10px; /* 模态 / 预览浮层 */
|
||||
--radius-dot: 50%;
|
||||
|
||||
/* 边框 */
|
||||
--border-w: 1px;
|
||||
--border-accent-w: 2px; /* 左侧强调边（active 项 / doc 块） */
|
||||
|
||||
/* 间距阶（px）— 从实际版式提取 */
|
||||
--space-1: 4px;
|
||||
--space-2: 6px;
|
||||
--space-3: 8px;
|
||||
--space-4: 10px;
|
||||
--space-5: 12px;
|
||||
--space-6: 14px;
|
||||
--space-7: 16px;
|
||||
--space-8: 20px;
|
||||
--space-9: 22px;
|
||||
|
||||
/* 控件内边距 */
|
||||
--pad-btn: 6px 14px;
|
||||
--pad-btn-xs: 2px 8px;
|
||||
--pad-input: 7px 10px;
|
||||
--pad-chip: 1px 8px;
|
||||
--pad-card: 12px 14px;
|
||||
|
||||
/* 阴影：外阴影只用于浮层；辉光是主角 */
|
||||
--shadow-pop: 0 10px 30px rgba(0, 0, 0, .65);
|
||||
--shadow-modal: 0 18px 60px rgba(0, 0, 0, .6);
|
||||
--shadow-toast: 0 8px 30px rgba(0, 0, 0, .55);
|
||||
|
||||
/* 动效 */
|
||||
--ease-fast: .12s; /* @kind other */
|
||||
--ease-base: .2s ease; /* @kind other */
|
||||
}
|
||||
|
||||
/* 扫描线 + 暗角氛围层：加在 body::before（全屏界面用） */
|
||||
@keyframes maestro-blink { 50% { opacity: 0; } }
|
||||
@keyframes maestro-pulse { 50% { opacity: .25; } }
|
||||
@keyframes maestro-rise { from { opacity: 0; transform: translateY(5px); } }
|
||||
@@ -0,0 +1,4 @@
|
||||
/* MAESTRO · webfonts
|
||||
原产品经 Google Fonts CDN 加载（maestro/web/index.html），仓库内无字体二进制。
|
||||
此处沿用同一 CDN 源；如需离线可下载 woff2 后改为本地 @font-face。 */
|
||||
@import url('https://fonts.googleapis.com/css2?family=IBM+Plex+Mono:wght@400;500;600;700&family=Noto+Sans+SC:wght@400;500;700&display=swap');
|
||||
@@ -0,0 +1,30 @@
|
||||
/* MAESTRO · 字体令牌 — 等宽中文混排
|
||||
全站单字族：IBM Plex Mono（拉丁）+ Noto Sans SC（中文回退） */
|
||||
:root {
|
||||
--mono: 'IBM Plex Mono', 'Noto Sans SC', ui-monospace, monospace; /* @kind font */
|
||||
--font-body: var(--mono); /* 没有第二字族：标题、正文、按钮全部等宽 */
|
||||
|
||||
/* 字号阶（px） */
|
||||
--text-2xs: 10px; /* 徽章 / chip 标签 */
|
||||
--text-xs: 11px; /* 区块标题 / 表单 label / meta */
|
||||
--text-sm: 12px; /* 按钮 / 次要正文 */
|
||||
--text-md: 13px; /* 正文基准（body） */
|
||||
--text-lg: 15px; /* 预览标题 */
|
||||
--text-xl: 19px; /* logo 字 */
|
||||
--text-2xl: 20px; /* 项目标题 */
|
||||
--text-num: 40px; /* 大数字（agent 计数） */
|
||||
|
||||
/* 行高 */
|
||||
--leading-body: 1.55;
|
||||
--leading-doc: 1.7;
|
||||
|
||||
/* 字重：400 正文 · 500 任务标题 · 600 按钮/区块头 · 700 强调/徽章 */
|
||||
|
||||
/* 字距（全大写小标签是核心母题） */
|
||||
--tracking-tight: .04em; /* 标题 */
|
||||
--tracking-label: .08em; /* 按钮 / meta */
|
||||
--tracking-badge: .12em; /* 徽章 / 计数 */
|
||||
--tracking-head: .22em; /* 区块标题（uppercase） */
|
||||
--tracking-logo: .28em; /* logo */
|
||||
--tracking-widest: .35em; /* logo 副标 */
|
||||
}
|
||||
Reference in New Issue
Block a user