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/supabase/tokens.css
+294
View File
@@ -0,0 +1,294 @@
/* ─────────────────────────────────────────────────────────────────────────
* design-systems/supabase/tokens.css
*
* Structured token bindings for "Supabase" — the open-source Firebase
* alternative whose marketing surface reads like a dark-mode editor that
* grew up: near-black canvas (#171717), Postgres-emerald (#3ecf8e) reserved
* for the chromatic moments, Circular geometric sans for prose, Source
* Code Pro uppercase for the developer-console voice, and depth carried
* by a tight border hierarchy instead of drop shadows.
*
* Agents generating an artifact for Supabase should paste the `:root`
* block verbatim into the first `<style>` of the artifact, then reference
* everything via `var(--*)`.
*
* Brand-specific schema decisions (each bends a schema convention to
* match Supabase's voice rather than the cross-brand default):
*
* 1. `--bg: #171717` and `--surface: #1c1c1c` instead of pure black.
* DESIGN.md §1: "deep black backgrounds (`#0f0f0f`, `#171717`)" but
* "never pure black". The #1c1c1c surface gives cards a faint
* luminance step above the page without warm-shifting; Supabase
* has no warm tier, so `--surface-warm` aliases `--surface` rather
* than introducing a tint that doesn't exist in the brand.
*
* 2. Four-level foreground ramp — `#fafafa → #b4b4b4 → #898989 →
* #4d4d4d` — bound to `--fg / --fg-2 / --muted / --meta`. DESIGN.md
* §2 documents exactly these four text tiers (Off White / Light
* Gray / Mid Gray / Dark Gray) and §9 calls them out as the
* primary / secondary / muted / heavy-secondary ramp. Binding them
* independently (no aliasing) lets the marketing surface render
* genuine four-tier hierarchy — the dark canvas hides any two-tier
* collapse, so the differentiation is real.
*
* 3. `--border: #2e2e2e` and `--border-soft: #242424` as solid hex,
* not rgba. DESIGN.md §6 makes border-as-depth THE depth system
* ("depth comes from borders, not shadows") and §9 names #242424
* as the subtle tier and #2e2e2e as the standard tier. The hex
* form (instead of rgba over the dark bg) is intentional: it
* keeps the border's luminance constant regardless of what surface
* it sits on, which is the brand's "edges define" promise.
*
* 4. `--accent: #3ecf8e` — Supabase brand green, the Postgres-emerald
* identity marker. Used SPARINGLY (DESIGN.md §1: "always as a
* signal of 'this is Supabase' rather than as a decorative
* element"). `--accent-on` is `#0f0f0f` (near-black), not the
* schema default of `#ffffff`, because emerald at this luminance
* reads with dark text far better than white — the contrast ratio
* against the bright green is what makes the brand button legible.
* `--accent-hover` binds to `#00c573`, the documented "green link"
* color (DESIGN.md §2 Brand) — Supabase ships TWO emerald values
* with semantic distinction (brand vs. interactive) and the
* hover state is exactly where the interactive variant belongs.
*
* 5. `--font-display` and `--font-body` share the Circular stack.
* Hierarchy comes from size + weight (400 for prose, 500 for
* interactive), never from a separate display face. DESIGN.md §3
* Principles: "There is no bold (700) in the detected system —
* hierarchy is created through size, not weight."
* `--font-mono: "Source Code Pro"` for the developer-console
* voice — the uppercase technical labels with 1.2px tracking that
* DESIGN.md §3 calls "the developer-console marker that connects
* the marketing site to the product".
*
* 6. `--text-4xl: 72px` with `--leading-tight: 1.00`. DESIGN.md §3
* makes the 1.00 hero line-height "the defining typographic
* gesture — text that feels like a terminal command: dense,
* efficient, no wasted vertical space." Tracking stays at
* `normal` (per DESIGN.md §3 hero row) — Supabase reads dense
* from the leading collapse, not from negative letter-spacing
* like Vercel's `-0.05em`.
*
* 7. Section rhythm is generous: 128px desktop, 80px tablet, 48px
* phone. DESIGN.md §5 names 90–128px desktop spacing as
* "dramatic, cinematic pacing — each section is its own scene in
* the dark void". The top of that range (128px) matches the
* brand's confidence; the 48px phone floor is the documented
* mobile collapse.
*
* 8. Radius scale 6 / 8 / 16 / 9999. DESIGN.md §5: standard 6px
* (ghost buttons, secondary), comfortable 8px (cards), large 16px
* (feature cards), pill 9999px (primary CTAs and tab indicators).
* DESIGN.md §7 forbids the 16px tier on buttons — "pills (9999px)
* or standard (6px), nothing in between". Component CSS enforces
* that policy at the component level.
*
* 9. `--elev-raised` uses the brand's "border + minimal shadow"
* compromise: `0 0 0 1px var(--border), 0 4px 12px rgba(0, 0, 0,
* 0.4)`. DESIGN.md §6 says Supabase "deliberately avoids shadows"
* but uses `rgba(0, 0, 0, 0.1) 0px 4px 12px` for focus states —
* we deepen that alpha for the raised tier so a card actually
* separates from the dark canvas, while keeping the ring as the
* primary depth signal.
*
* 10. `--focus-ring` is a 2px ring at `color-mix(var(--accent),
* transparent 50%)` — the green-tinted halo that DESIGN.md §6
* Level 3 names as the "brand-highlighted" elevation. On a near-
* black canvas the schema's default (3px alpha glow over accent)
* reads weak; 2px at 50% transparency lands at the documented
* `rgba(62, 207, 142, 0.3)`-ish weight and stays unmistakably
* Supabase.
*
* Source contracts:
* - Standard token names: design-systems/_schema/tokens.schema.ts
* - A2 fallback parity: design-systems/_schema/defaults.css
* - Lint enforcement: apps/daemon/src/lint-artifact.ts
*
* Keep this file additive: never invent token names not also documented
* in DESIGN.md or the schema. Circular and Source Code Pro do not need
* a CDN reference here — the font stacks list Helvetica Neue / Menlo
* fallbacks so artifacts render acceptably even when the brand faces
* are not loaded, and any host that wants the real Circular face links
* it externally.
* ─────────────────────────────────────────────────────────────────── */
:root {
/* ─── Surface (3 levels — schema slot) ─────────────────────────────
* #171717 is the documented page canvas (DESIGN.md §1 "Dark"). The
* card surface bumps one luminance step to #1c1c1c so elevated
* containers carry a faint lift without warm-shifting — Supabase
* has no warm tier, so `--surface-warm` aliases `--surface` exactly
* the way Vercel's achromatic canvas does. */
--bg: #171717;
--surface: #1c1c1c;
--surface-warm: var(--surface); /* alias — Supabase has no warm tier */
/* ─── Foreground ramp (4 levels) ──────────────────────────────────
* Off White → Light Gray → Mid Gray → Dark Gray, the documented
* four-tier text scale from DESIGN.md §2. Each tier is independently
* bound (no aliasing) because Supabase genuinely uses four distinct
* text registers: heading white, body silver, caption gray, and
* tertiary metadata gray. The four-stop ramp is the typography
* system; collapsing it to two tiers would flatten the marketing
* surface's voice. */
--fg: #fafafa; /* Off White — primary text, headings */
--fg-2: #b4b4b4; /* Light Gray — secondary body, links */
--muted: #898989; /* Mid Gray — captions, footer, muted */
--meta: #4d4d4d; /* Dark Gray — tertiary metadata, disabled */
/* ─── Border (2 levels) ──────────────────────────────────────────
* Border-as-depth is THE depth system (DESIGN.md §6: "depth comes
* from borders, not shadows"). #2e2e2e is the standard card edge,
* #242424 the inner-row divider that "should not visually compete".
* Solid hex (not rgba over bg) keeps luminance constant regardless
* of what surface the border sits on. */
--border: #2e2e2e; /* standard border — cards, tabs, dividers */
--border-soft: #242424; /* subtle divider — inner row separators */
/* ─── Accent ─────────────────────────────────────────────────────
* Supabase brand emerald — the Postgres-green identity marker.
* Hard cap of ≤2 visible uses per screen (lint enforced) because
* DESIGN.md §7 forbids using green "to backgrounds or large
* surfaces — it's for borders, links, and small accents".
*
* `--accent-on` is `#0f0f0f` (near-black), NOT the schema default
* `#ffffff` — bright emerald reads with dark text far better than
* white, and #0f0f0f is the documented "near-black" button surface
* already in the brand's neutral scale.
*
* `--accent-hover` is `#00c573` — DESIGN.md §2 documents this as
* the "green link" interactive variant of the brand color. Mapping
* it to the hover state preserves the brand's distinction between
* identity-green (#3ecf8e) and interactive-green (#00c573). */
--accent: #3ecf8e; /* Supabase emerald — brand identity marker */
--accent-on: #0f0f0f; /* near-black label on bright emerald */
--accent-hover: #00c573; /* documented interactive green link variant */
--accent-active: color-mix(in oklab, var(--accent), black 14%);
/* ─── Semantic ───────────────────────────────────────────────────
* Supabase's marketing surface rarely renders state. DESIGN.md §7
* specifically forbids using the Radix warm tones (crimson, orange)
* as primary design elements — they exist purely as semantic
* tokens. We inherit the schema defaults rather than designing a
* custom warm palette that doesn't appear in the brand voice. */
--success: #16a34a;
--warn: #eab308;
--danger: #dc2626;
/* ─── Typography ─────────────────────────────────────────────────
* Circular is Supabase's signature face — a geometric sans-serif
* with rounded terminals that softens the technical edge.
* `--font-display` and `--font-body` share the stack; the Helvetica
* Neue / Helvetica / Arial fallbacks come straight from DESIGN.md
* §3 and ensure artifacts render legibly even when Circular is not
* loaded. Source Code Pro is the developer-console voice — the
* uppercase technical labels with 1.2px tracking that DESIGN.md §3
* calls "the marker that connects the marketing site to the
* product". Office Code Pro / Menlo fallbacks match DESIGN.md §3. */
--font-display: "Circular", "custom-font", "Helvetica Neue", Helvetica, Arial, sans-serif;
--font-body: "Circular", "custom-font", "Helvetica Neue", Helvetica, Arial, sans-serif;
--font-mono: "Source Code Pro", "Office Code Pro", Menlo, Monaco, Consolas, monospace;
/* Type scale (px) — derived from DESIGN.md §3 hierarchy table.
* The scale tops out at 72px (display hero) and shoots straight up
* from 36px (section heading) — the missing intermediate steps are
* deliberate. Supabase reads BIG because the hero leading collapses
* to 1.00, not because the px count climbs gradually. */
--text-xs: 12px; /* small — fine print, code labels */
--text-sm: 14px; /* button, nav link, caption */
--text-base: 16px; /* body — standard reading */
--text-lg: 18px; /* sub-heading — secondary headings */
--text-xl: 24px; /* card title */
--text-2xl: 32px; /* mid-large heading */
--text-3xl: 36px; /* section heading */
--text-4xl: 72px; /* display hero — terminal-density */
/* `--leading-tight` is 1.00 — DESIGN.md §3 names this "the defining
* typographic gesture" and forbids relaxing it ("Don't increase
* hero line-height above 1.00 — the density is intentional").
* `--tracking-display` is `normal` (DESIGN.md §3 hero row) —
* Supabase reads dense from the leading collapse, not from negative
* letter-spacing like Vercel's -0.05em. */
--leading-body: 1.5;
--leading-tight: 1.00;
--tracking-display: normal;
/* ─── Spacing ────────────────────────────────────────────────────
* 4px-grid base scale. DESIGN.md §5 documents micro-stops (1px /
* 4px / 6px) that are too fine to belong in the shared schema —
* those are inlined per-component when needed. The 4/8/12/16/20/
* 24/32/48 tier covers the structural rhythm of cards and stacks. */
--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 — DESIGN.md §5: "Dramatic section spacing 90–128px
* creates a cinematic pacing — each section is its own scene in the
* dark void". We sit at the top of that range (128px desktop) to
* honor the brand confidence, drop to 80px on tablet, and 48px on
* phone (the documented mobile floor). */
--section-y-desktop: 128px;
--section-y-tablet: 80px;
--section-y-phone: 48px;
/* ─── Radius ─────────────────────────────────────────────────────
* DESIGN.md §5 radius scale: 6 / 8 / 11–12 / 16 / 9999. We bind
* the four schema tiers to 6 (ghost / functional / secondary), 8
* (cards / containers), 16 (feature cards / major containers),
* 9999 (primary CTAs and pill tabs). The 11–12px mid-panel tier is
* component-specific and not part of the shared schema. DESIGN.md
* §7 forbids in-between radii on buttons — components MUST pick
* pill or 6px, never 8/12/16. */
--radius-sm: 6px; /* ghost buttons, secondary, functional */
--radius-md: 8px; /* cards, containers */
--radius-lg: 16px; /* feature cards, major containers */
--radius-pill: 9999px; /* primary CTAs, tab indicators */
/* ─── Elevation (3 levels) ───────────────────────────────────────
* DESIGN.md §6: Supabase "deliberately avoids shadows" because they
* read as invisible on a dark canvas; depth is the border hierarchy
* (#242424 → #2e2e2e → #393939 → green-accent border). We map:
*
* --elev-flat no shadow (page background, text blocks)
* --elev-ring 1px hairline ring at --border (the standard tier)
* --elev-raised ring + minimal ambient shadow (the brand's
* compromise: DESIGN.md's focus shadow alpha
* deepened from 0.1 to 0.4 so a card actually
* separates from the dark canvas at distance) */
--elev-flat: none;
--elev-ring: 0 0 0 1px var(--border);
--elev-raised: 0 0 0 1px var(--border), 0 4px 12px rgba(0, 0, 0, 0.4);
/* ─── Focus ring ─────────────────────────────────────────────────
* 2px ring at `color-mix(var(--accent), transparent 50%)` — the
* green-tinted halo that DESIGN.md §6 Level 3 names the "brand-
* highlighted" elevation (`rgba(62, 207, 142, 0.3)`). On a near-
* black canvas the schema's default 3px alpha glow reads weak;
* 2px at 50% transparency lands at the documented weight and stays
* unmistakably Supabase without dominating the surface. */
--focus-ring: 0 0 0 2px color-mix(in oklab, var(--accent), transparent 50%);
/* ─── Motion ─────────────────────────────────────────────────────
* Two durations + one easing curve, per the anti-ai-slop "short,
* purposeful transitions (150–250ms) with stable easing". Supabase
* transitions are quick and unobtrusive — the brand reads as
* engineered, never choreographed. */
--motion-fast: 150ms;
--motion-base: 200ms;
--ease-standard: cubic-bezier(0.2, 0, 0, 1);
/* ─── Layout ─────────────────────────────────────────────────────
* 1200px max content width — typical for marketing surfaces.
* Mobile gutter holds at 16px (instead of dropping to 12px) so
* code blocks and badges retain padding context on small screens;
* Supabase's developer-doc voice rarely edge-bleeds. */
--container-max: 1200px;
--container-gutter-desktop: 24px;
--container-gutter-tablet: 16px;
--container-gutter-phone: 16px;
}