admin
5afeb6b78a
一、④段整套同步（用户选候选 A）
- 新增 `references/stage-proto-doc/assets/产品文档模板.html`（16 KB／247 行，从备份拷、转 LF）。
- ④段 SKILL.md 换成备份 15:28 那版，并按模板口径改齐：
· 「产品文档框架」从「四块＋一附录」改成**六节** —— 页面结构／功能清单／使用场景／操作流程／
跨页与界面状态／待确认与偏离；与模板同构，⛔ 不从空白页重写结构。
· 编号从 R/S/F 改成 **P 页面／S 场景／F 功能／J 二级功能**，各自唯一、按展示顺序通排。
· 保留旧版有价值的要求：每项功能补齐 做什么／入口在哪／输入边界／异常与恢复；重点功能三处标红；
横向流程图每步写清页面／功能／操作／完成判据。
· 完成标准「七节」→「六节」，自查清单同步换掉「需求」那批条目，补模板与配图两条。
· 路径 `designs/<项目>/` → `docs/pm/<项目>/ui/`（2 处）。
· 补回本机那条「每份产出文档开头都要有一张图」的引用（指向主 skill，段内不复述）。
- 主 skill 同步：四段结构表④行、④段沿革、画图小节（④段画页面结构图 ＋ 用户路径）。
二、open-design 移到技能根（用户选候选 A）
- `git mv product-planning/references/stage-delivery/assets/open-design → open-design/`（4178 文件）。
- `.gitignore` 白名单加 `!/open-design/` —— 否则移出去就不再纳入版本控制。
- 引用改 11 处：路径形态 `assets/open-design/...` → `<技能根>/open-design/...`；
「随段携带的自带件」改称「同根技能」；「路径怎么找」那条改成自带件（段内相对路径）与
同根技能（`<技能根>/<技能名>/`）两类分开写。
- open-design 自己的 ATTRIBUTION.md 两处同步（它现在与 oil-ui-pro 同层）。
- 副作用（有益）：命名闸门读数由 2063 降到 225 —— 此前它把 open-design 里 919 个第三方 md
当成规则一起扫了；现在只扫本包 23 个 md。已确认④段的 H1 与 4a/4b/4c 子步仍在检查范围内。
三、验收
- check_naming.py --ws E:/ProgramData/AIProject/contentm_agent ＝ 通过 225 / 失败 0 / 提示 27。
- 活文件里 `assets/open-design` 残留 0；工作区 CRLF 文件 0。
126 lines
7.9 KiB
CSS
126 lines
7.9 KiB
CSS
/* ─────────────────────────────────────────────────────────────────────────
|
||
* design-systems/huggingface/tokens.css
|
||
*
|
||
* Structured token bindings for "Design System Inspired by Hugging Face".
|
||
* ML community hub: sunshine yellow badge accent, monospace identity,
|
||
* crisp 1px borders, brutalist-adjacent low radius, dense power-user layout.
|
||
*
|
||
* Key brand decisions encoded here:
|
||
* - HF Yellow (#ffd21e) as the lone saturated accent — badge/badge/header strip
|
||
* - Ink on off-white: deep slate (#0d1117) text on #fafafa canvas
|
||
* - IBM Plex Mono for headings and tags — "config file is the README" vibe
|
||
* - Source Sans Pro for body prose — contrasting readable counterpart
|
||
* - 4–6px radii — closer to brutalist than rounded
|
||
* - Crisp 1px borders (#e5e7eb) — borders that announce themselves
|
||
* - Dense tables and tight padding — built for power users
|
||
* ─────────────────────────────────────────────────────────────────── */
|
||
|
||
:root {
|
||
/* ─── Surface ─────────────────────────────────────────────────────
|
||
* Off-white canvas with white cards — the yellow accent on a
|
||
* neutral foundation maximizes its signal impact. */
|
||
--bg: #fafafa; /* Canvas Subtle — the default off-white hub background */
|
||
--surface: #ffffff; /* Canvas — card surfaces, white panels */
|
||
--surface-warm: #fff4cc; /* HF Yellow Soft — callout backgrounds, warm tint */
|
||
|
||
/* ─── Foreground ──────────────────────────────────────────────────
|
||
* Deep slate — dark, readable, technical. */
|
||
--fg: #0d1117; /* Ink Primary — primary text, headings */
|
||
--fg-2: #374151; /* Ink Secondary — body prose */
|
||
--muted: #6b7280; /* Ink Muted — captions, file paths, model authors */
|
||
--meta: var(--muted); /* alias — same muted for metadata */
|
||
|
||
/* ─── Border ──────────────────────────────────────────────────────
|
||
* Crisp, visible borders — they announce themselves rather than hiding. */
|
||
--border: #e5e7eb; /* Border Default — standard 1px hairline */
|
||
--border-soft: #f3f4f6; /* Border Subtle — inner divider, row separator */
|
||
|
||
/* ─── Accent ──────────────────────────────────────────────────────
|
||
* HF Yellow — the sunshine yellow that makes Hugging Face instantly
|
||
* recognizable. Used for "new" pill, model-card header strip, badges.
|
||
* Dark text on yellow (--accent-on: #0d1117) for contrast. */
|
||
--accent: #ffd21e;
|
||
--accent-on: #0d1117; /* Dark text on yellow — sufficient contrast */
|
||
--accent-hover: #f59e0b; /* HF Yellow Deep — hover/active */
|
||
--accent-active: color-mix(in oklab, var(--accent), black 20%);
|
||
|
||
/* ─── Semantic ────────────────────────────────────────────────────
|
||
* Task-category colors used for model badges. Success uses vision green.
|
||
* Warning uses HF Yellow Deep (same as hover — reinforces the brand). */
|
||
--success: #16a34a; /* Vision Green — also "build succeeded" */
|
||
--warn: #f59e0b; /* HF Yellow Deep — warning / rate limit */
|
||
--danger: #dc2626; /* Error Red — failed build, broken model */
|
||
|
||
/* ─── Typography ──────────────────────────────────────────────────
|
||
* IBM Plex Mono for headings and tags — they look like code strings.
|
||
* Source Sans Pro for body — readable, prose-optimized counterpart.
|
||
* Weight cap at 600 — 700 is too loud against yellow. */
|
||
--font-display: "IBM Plex Mono", ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
|
||
--font-body: "Source Sans Pro", Inter, system-ui, -apple-system, sans-serif;
|
||
--font-mono: "IBM Plex Mono", ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
|
||
|
||
/* Type scale — DESIGN.md §3. Display 48px, H1 32px, H2 24px, H3 18px. */
|
||
--text-xs: 12px; /* Tag / Badge — IBM Plex Mono */
|
||
--text-sm: 13px; /* Caption — author byline, timestamp */
|
||
--text-base: 15px; /* Body — standard prose, model card */
|
||
--text-lg: 18px; /* Body Large / H3 — sub-section */
|
||
--text-xl: 24px; /* H2 — section heading */
|
||
--text-2xl: 32px; /* H1 — page heading, model name */
|
||
--text-3xl: 40px; /* Display — for marketing contexts */
|
||
--text-4xl: 48px; /* Display Hero — marketing hero */
|
||
|
||
--leading-body: 1.55; /* Source Sans Pro body reading */
|
||
--leading-tight: 1.1; /* IBM Plex Mono display */
|
||
--tracking-display: -0.01em;
|
||
|
||
/* ─── Spacing ─────────────────────────────────────────────────────
|
||
* 4px base unit. Dense table padding (8px 16px per cell).
|
||
* Section rhythm 64–96px — community hub needs breathing room. */
|
||
--space-1: 4px;
|
||
--space-2: 8px;
|
||
--space-3: 12px;
|
||
--space-4: 16px;
|
||
--space-5: 20px;
|
||
--space-6: 24px;
|
||
--space-8: 32px;
|
||
--space-12: 48px;
|
||
|
||
--section-y-desktop: 80px;
|
||
--section-y-tablet: 48px;
|
||
--section-y-phone: 32px;
|
||
|
||
/* ─── Radius ──────────────────────────────────────────────────────
|
||
* 4–6px — brutalist-adjacent. Borders announce themselves.
|
||
* Do not round cards to 12px+ — the crisp geometry is intentional. */
|
||
--radius-sm: 4px; /* Tags, small chips — nearest to sharp */
|
||
--radius-md: 6px; /* Cards, inputs, buttons — the primary radius */
|
||
--radius-lg: 8px; /* Slightly larger containers */
|
||
--radius-pill: 9999px; /* Model task badges, status pills */
|
||
|
||
/* ─── Elevation ───────────────────────────────────────────────────
|
||
* Border-based containment — 1px borders are the primary depth cue.
|
||
* Table row hover uses background shift (#f3f4f6). */
|
||
--elev-flat: none;
|
||
--elev-ring: 0 0 0 1px var(--border);
|
||
--elev-raised: 0 2px 8px color-mix(in oklab, var(--fg), transparent 90%);
|
||
|
||
/* ─── Focus ring ──────────────────────────────────────────────────
|
||
* Dark ring matching the primary ink color. */
|
||
--focus-ring: 0 0 0 3px rgba(13, 17, 23, 0.1);
|
||
|
||
/* ─── Motion ──────────────────────────────────────────────────────
|
||
* Quick hover (120ms) — community hub interactions should feel snappy.
|
||
* Tag pop at 1.05× scale is the only exception to flat-on-hover. */
|
||
--motion-fast: 120ms;
|
||
--motion-base: 200ms;
|
||
--ease-standard: cubic-bezier(0.2, 0, 0, 1);
|
||
|
||
/* ─── Layout ──────────────────────────────────────────────────────
|
||
* 1280px container with 280px sidebar for model browser.
|
||
* 24px gutter — content-dense layout. */
|
||
--container-max: 1280px;
|
||
--container-gutter-desktop: 24px;
|
||
--container-gutter-tablet: 16px;
|
||
--container-gutter-phone: 12px;
|
||
}
|