admin/workbuddy_skills
1
0 Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

④段整套同步（六节 ＋ P/S/F/J ＋ 模板）＋ open-design 移到技能根

Browse Source 
一、④段整套同步（用户选候选 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。
This commit is contained in:
admin committed 2026-10-15 21:17:28 +08:00
1 parent fa0a9026c8
commit 5afeb6b78a
4184 files changed
+326 -70
Download Patch File Download Diff File Expand all files Collapse all files

No files matched your search

open-design/design-systems/runwayml/tokens.css
+204
View File
@@ -0,0 +1,204 @@
/* ─────────────────────────────────────────────────────────────────────────
* design-systems/runwayml/tokens.css
*
* Structured token bindings for the "Runway" brand — a cinematic,
* editorial-cinema dark canvas where photography (and AI-generated
* video) is the design and the chrome is intentionally invisible.
*
* Brand identity in three sentences:
* 1. Pure-black canvas (#000000) under bright pure-white type
* (#ffffff), with cool blue-gray neutrals (#767d88 / #7d848e)
* for the entire supporting text ramp — never warm gray.
* 2. Single typeface system: abcNormal at 400 / 450 / 500 / 600
* (no bold) handles everything from 48px display down to 11px
* uppercase tags. Hierarchy comes from size + case + tracking,
* not weight.
* 3. Zero shadows, near-invisible borders (#27272a hairline), and
* sharp 4–8px corners — depth comes from photographic content
* and dark-vs-light section alternation, never from CSS blur.
*
* Schema decisions:
* - --bg: #000000; --surface: #1a1a1a (dark card surface);
* --surface-warm: #030303 (the rarely-used third-tier dark, an
* "even darker" panel surface — this brand does not have a warm
* temperature, so the B-slot reads as a parallel cool tier).
* - --fg: #ffffff; --fg-2: #e9ecf2 (Cool Cloud — alt heading tone);
* --muted: #767d88 (Cool Slate); --meta: #7d848e (Mid Slate).
* - --border: #27272a (Border Dark); --border-soft: #1a1a1a (row
* separator that blends into the dark surface — "barely visible
* containment", per DESIGN.md §4).
* - --accent: #ffffff. Runway has no decorative accent color; the
* highest-signal surface in the system is pure white against
* black. Hover/active states dim toward Cool Cloud / Cool Silver
* rather than mixing in a hue.
* - --font-display / --font-body bind to abcNormal — DESIGN.md §3
* mandates a single typeface; Inter / DM Sans are documented
* external substitutes for the custom face.
* - --tracking-display: -0.025em (-1.2px at 48px hero per
* DESIGN.md §3 hierarchy table).
* - --leading-tight: 1.0 (film-title compression on display sizes);
* --leading-body: 1.4 (mid-range of the documented 1.30–1.50
* band — body text stays editorial-tight, never magazine-loose).
* - --section-y-desktop: 78px ("cinema-grade breathing" — the
* largest discrete step on the documented spacing scale).
* - --radius-sm: 4px (sharp / button); --radius-md: 8px (card,
* image); --radius-lg: 16px (alert containers only — DESIGN.md §4).
* - --elev-raised: none. The brand do/don't is explicit: zero
* shadows. We override the schema's blur fallback so any
* component that reaches for `var(--elev-raised)` produces no
* shadow, preserving the cinematic flat-vs-photographic depth
* model. --elev-ring stays available for the "alert container"
* case where a hairline ring substitutes for a border.
* - --container-max: 1600px (cinema-wide, per DESIGN.md §5 grid).
* ─────────────────────────────────────────────────────────────────── */
:root {
/* ─── Surface (3 levels) ──────────────────────────────────────────
* Dark-dominant. The canvas is true black; cards lift onto Dark
* Surface (#1a1a1a) without a shadow or border. --surface-warm is
* the schema's B-slot for a tertiary tier; runway has no warm
* temperature, so we bind it to Deep Black (#030303) — a parallel
* "even darker" panel used for layered dark containers. */
--bg: #000000; /* Runway Black — primary canvas */
--surface: #1a1a1a; /* Dark Surface — card / lifted container */
--surface-warm: #030303; /* Deep Black — third-tier layered panel */
/* ─── Foreground (4 levels) ───────────────────────────────────────
* Pure white anchors the ramp; Cool Cloud is a near-imperceptible
* alt for headings; the muted / meta tiers are the brand's
* signature cool-blue grays (never warm). */
--fg: #ffffff; /* Pure White — primary type, brand mark */
--fg-2: #e9ecf2; /* Cool Cloud — alt heading tone */
--muted: #767d88; /* Cool Slate — secondary body text */
--meta: #7d848e; /* Mid Slate — tertiary, metadata */
/* ─── Border (2 levels) ───────────────────────────────────────────
* Per DESIGN.md §4: "barely visible containment". --border is the
* single dark-mode border value; --border-soft blends almost into
* the card surface so row separators do not visually compete. */
--border: #27272a; /* Border Dark — alert / standard edge */
--border-soft: #1a1a1a; /* matches surface — inner row separator */
/* ─── Accent ──────────────────────────────────────────────────────
* Runway has no decorative color — DESIGN.md §2 is explicit ("None
* in the interface. Visual richness comes entirely from
* photographic content"). Pure white IS the brand's high-signal
* accent, used on CTA fills and the focus ring. Hover/active dim
* toward the cool-silver neutrals rather than mixing in any hue. */
--accent: #ffffff; /* Pure White — sole interface accent */
--accent-on: #000000; /* black type on white CTA fill */
--accent-hover: #e9ecf2; /* Cool Cloud — hover dim */
--accent-active: #c9ccd1; /* Cool Silver — pressed dim */
/* ─── Semantic ────────────────────────────────────────────────────
* Runway's UI does not surface state colors in its public surface;
* we inherit the schema defaults so any utility/admin chrome the
* fixture spawns still resolves. Keep semantic coverage <5% of any
* surface — this is not a brand color tier. */
--success: #16a34a;
--warn: #eab308;
--danger: #dc2626;
/* ─── Typography ──────────────────────────────────────────────────
* Single typeface commitment. DESIGN.md §3: "abcNormal handles
* every text role." We list the documented external substitutes
* (Inter, DM Sans) as the next layer of the fallback chain so the
* fixture renders predictably on machines without the custom face. */
--font-display: "abcNormal", "abcNormal Fallback", "Inter", "DM Sans", system-ui, -apple-system, "Segoe UI", sans-serif;
--font-body: "abcNormal", "abcNormal Fallback", "Inter", "DM Sans", system-ui, -apple-system, "Segoe UI", sans-serif;
--font-mono: ui-monospace, "SF Mono", "JetBrains Mono", Menlo, Monaco, Consolas, monospace;
/* Type scale — direct map of DESIGN.md §3 hierarchy table.
* 11px micro/tag (uppercase, weight 450) → --text-xs
* 13px small description → --text-sm
* 16px body / button → --text-base
* 20px feature title → --text-lg
* 24px card title → --text-xl
* 36px sub-heading → --text-2xl
* 40px section heading → --text-3xl
* 48px display / hero → --text-4xl */
--text-xs: 11px;
--text-sm: 13px;
--text-base: 16px;
--text-lg: 20px;
--text-xl: 24px;
--text-2xl: 36px;
--text-3xl: 40px;
--text-4xl: 48px;
/* Leading + tracking.
* --leading-tight: 1.0 → film-title compression on display sizes.
* --leading-body: 1.4 → mid-range of DESIGN.md's documented
* 1.30–1.50 body band; intentionally editorial-tight.
* --tracking-display: -0.025em → -1.2px at 48px hero per
* DESIGN.md §3 hierarchy table. */
--leading-body: 1.4;
--leading-tight: 1.0;
--tracking-display: -0.025em;
/* ─── Spacing ─────────────────────────────────────────────────────
* 8px base unit per DESIGN.md §5 — the schema's 4px-grid scale
* maps cleanly. Runway's documented scale (4/6/8/12/16/20/24/28/
* 32/48/64/78) lands on every required step except 6/28/64/78,
* which live inline in components (no token name needed). */
--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 rhythm — "cinema-grade breathing". 78px on desktop is
* the largest discrete step on the documented scale, creating the
* scrolling-between-scenes pacing called out in DESIGN.md §5. */
--section-y-desktop: 78px;
--section-y-tablet: 48px;
--section-y-phone: 32px;
/* ─── Radius ──────────────────────────────────────────────────────
* DESIGN.md §5 documents four tiers: 4px sharp (buttons), 6–8px
* comfortable (containers/images), 16px generous (alerts). The
* pill tier is preserved at the schema default — Runway forbids
* pill-shaped UI ("Don't use pill-shaped radius"), so the token
* exists purely so cross-brand components resolve cleanly. */
--radius-sm: 4px;
--radius-md: 8px;
--radius-lg: 16px;
--radius-pill: 9999px;
/* ─── Elevation ───────────────────────────────────────────────────
* DESIGN.md §6 is explicit: "Runway uses zero shadows." We honor
* that by overriding --elev-raised to `none` (depth comes from
* dark/light section alternation and photographic depth of field,
* never from CSS blur). --elev-ring remains as a hairline ring so
* the documented "alert container" case still has a treatment. */
--elev-flat: none;
--elev-ring: 0 0 0 1px var(--border);
--elev-raised: none;
/* ─── Focus ───────────────────────────────────────────────────────
* White ring on dark canvas — the only chromatic affordance the
* brand permits. 60% transparency keeps the ring readable without
* looking like a fill. */
--focus-ring: 0 0 0 2px color-mix(in oklab, var(--accent), transparent 60%);
/* ─── Motion ──────────────────────────────────────────────────────
* Slightly slower base than the schema default — cinematic pacing
* favors deliberate state changes over instant snap. Easing stays
* on the standard curve so micro-interactions still feel
* mechanical-precise rather than springy. */
--motion-fast: 150ms;
--motion-base: 220ms;
--ease-standard: cubic-bezier(0.2, 0, 0, 1);
/* ─── Layout ──────────────────────────────────────────────────────
* Cinema-wide container — DESIGN.md §5: "up to 1600px". Gutters
* progressively shrink from 48px desktop → 16px phone so the
* full-bleed photography hero can stay edge-to-edge. */
--container-max: 1600px;
--container-gutter-desktop: 48px;
--container-gutter-tablet: 24px;
--container-gutter-phone: 16px;
}