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。
273 lines
15 KiB
CSS
273 lines
15 KiB
CSS
/* ─────────────────────────────────────────────────────────────────────────
|
||
* design-systems/posthog/tokens.css
|
||
*
|
||
* Structured token bindings for the PostHog design system — the
|
||
* open-source product analytics brand whose marketing surface reads
|
||
* like a startup's internal wiki that escaped into the wild. Warm
|
||
* sage-cream surfaces, olive-tinted text, IBM Plex Sans at bold
|
||
* weights for headings, and a single PostHog Orange (#F54E00) that
|
||
* lives almost entirely on hover — a hidden brand signature that
|
||
* surprises on interaction rather than shouting at rest.
|
||
*
|
||
* This file pre-compiles the values described in `DESIGN.md` into the
|
||
* shared schema. Agents should paste the `:root { … }` block verbatim
|
||
* into the first `<style>` of any artifact, then resolve every value
|
||
* via `var(--*)` from that point on.
|
||
*
|
||
* Schema notes (brand-specific bindings worth flagging — section
|
||
* references point into `DESIGN.md`):
|
||
*
|
||
* #Bind 1 — --bg is Warm Parchment (#fdfdf8), never pure white.
|
||
* DESIGN.md §7 forbids #ffffff outright; the warm
|
||
* yellow-green undertone is foundational and the
|
||
* "don't use pure white" rule is in the Don'ts list.
|
||
* --surface steps once to Sage Cream (#eeefe9) for
|
||
* input fields and secondary containers, then
|
||
* --surface-warm steps once more to Light Sage
|
||
* (#e5e7e0) for button surfaces and tertiary tiers
|
||
* (§2 Surface & Background).
|
||
*
|
||
* #Bind 2 — --fg ramp is olive, not neutral gray. Olive Ink
|
||
* (#4d4f46) carries body text; Deep Olive (#23251d)
|
||
* steps darker for headings and high-emphasis links;
|
||
* Muted Olive (#65675e) is the standard subtext tier;
|
||
* Sage Placeholder (#9ea096) is the disabled / meta
|
||
* tier. DESIGN.md §7 mandates the olive family — pure
|
||
* black or neutral gray reads as the wrong brand.
|
||
*
|
||
* #Bind 3 — --accent is PostHog Orange (#F54E00) — a hidden
|
||
* signature. DESIGN.md §1 describes it as "a vibrant
|
||
* orange that surprises on hover" — the marketing
|
||
* surface uses it almost exclusively as TEXT color on
|
||
* hover, not as a CTA fill. The token still binds the
|
||
* brand color so components can opt into orange fills
|
||
* when truly appropriate; primary CTAs render dark
|
||
* (--fg-2) per §4 Buttons. Accent-on/hover/active use
|
||
* the schema's color-mix defaults — DESIGN.md does not
|
||
* publish orange pressed-state hex values.
|
||
*
|
||
* #Bind 4 — --warn binds to Amber Gold (#F7A501) — DESIGN.md §2
|
||
* names this as the dark-button hover accent and the
|
||
* warmth-signal sibling to PostHog Orange. Mapping it
|
||
* to the warn slot keeps the gold reachable to
|
||
* components without inventing a brand-specific token.
|
||
* --success and --danger stay on schema defaults since
|
||
* DESIGN.md publishes no greens or reds.
|
||
*
|
||
* #Bind 5 — Radius scale stays deliberately tight per DESIGN.md
|
||
* §5 / §7 — 4px is the workhorse for buttons and
|
||
* inputs, 6px for cards (DESIGN.md §4 Cards), 8px
|
||
* caps the lg tier. The Don'ts list explicitly
|
||
* forbids 12px+ on cards; the system reads as
|
||
* functional-scrappy, never plush. Pill stays 9999px
|
||
* for badges and status dots.
|
||
*
|
||
* #Bind 6 — --elev-raised is THE single sanctioned shadow per
|
||
* DESIGN.md §6 ("only one shadow definition exists in
|
||
* the entire system"). Reserved for floating elements
|
||
* — modals, dropdowns, mega-menus. Every other depth
|
||
* cue comes from sage borders and surface-color
|
||
* shifts. Cards must not reach for this shadow.
|
||
*
|
||
* #Bind 7 — --focus-ring is Focus Blue (#3b82f6) at 50% opacity,
|
||
* the one cool color in the system. DESIGN.md §2 and
|
||
* §4 mandate this Tailwind-derived ring as an
|
||
* accessibility-only color; reserving it to focus
|
||
* keeps the warm sage/olive identity uncompromised
|
||
* while still passing keyboard-navigation contrast.
|
||
*
|
||
* #Bind 8 — Type scale tops out modestly. DESIGN.md §3 publishes
|
||
* 30px as the display hero ceiling (--text-2xl) and
|
||
* 36px as the section heading (--text-3xl); --text-4xl
|
||
* extrapolates to 44px for fixture-scale hero copy.
|
||
* Tracking compresses on display sizes (-0.025em
|
||
* normalizes -0.75px at 30px) and relaxes to 0 on
|
||
* body. Leading is generous everywhere — 1.50 body,
|
||
* 1.20 tight — because the marketing surface is
|
||
* content-heavy and optimized for long reading
|
||
* sessions (§3 Principles).
|
||
*
|
||
* #Bind 9 — --container-max is 1280px per DESIGN.md §5 ("content
|
||
* containers likely 1200px–1280px"). Gutters tighten
|
||
* progressively: 24/16/12 desktop/tablet/phone — tight
|
||
* but not cramped, matching PostHog's content-dense
|
||
* editorial pacing.
|
||
*
|
||
* Brand-specific extensions: none in this revision. The Warm Tan
|
||
* (#d4c9b8) featured-button background and Hover White (#f4f4f4)
|
||
* universal hover state stay inline at the components that need
|
||
* them; neither earns a shared slot.
|
||
* ─────────────────────────────────────────────────────────────────── */
|
||
|
||
:root {
|
||
/* ─── Surface (3 levels) ────────────────────────────────────────
|
||
* Warm Parchment is the page; Sage Cream is the secondary
|
||
* container (input backgrounds, hover/feature sections); Light
|
||
* Sage is the tertiary tier for button surfaces and quiet card
|
||
* fills. Three steps create depth WITHOUT shadows — DESIGN.md §6
|
||
* notes that "moving from #fdfdf8 to #eeefe9 to #e5e7e0 creates
|
||
* layered depth without shadows", and the whole brand depends on
|
||
* that surface-color rhythm rather than blur. */
|
||
--bg: #fdfdf8;
|
||
--surface: #eeefe9;
|
||
--surface-warm: #e5e7e0;
|
||
|
||
/* ─── Foreground ramp (4 levels) ────────────────────────────────
|
||
* Olive Ink anchors roughly every body paragraph, every nav
|
||
* label, every button text token on light surfaces. Deep Olive
|
||
* steps darker for headings and high-emphasis links — the
|
||
* near-black with green undertone that signals "click me". Muted
|
||
* Olive is the secondary subtext tier. Sage Placeholder is the
|
||
* disabled / meta tier and pulls double duty as input
|
||
* placeholder color. */
|
||
--fg: #4d4f46;
|
||
--fg-2: #23251d;
|
||
--muted: #65675e;
|
||
--meta: #9ea096;
|
||
|
||
/* ─── Border (2 levels) ─────────────────────────────────────────
|
||
* Sage Border (#bfc1b7) is the workhorse — every card edge,
|
||
* every input outline, every divider rule. The soft tier is a
|
||
* lighter sage tint used for inner row separators that should
|
||
* not visually compete with the primary card edge; derived as a
|
||
* 50% mix back toward --bg so it stays in the same warm-green
|
||
* family without inventing a new hex. */
|
||
--border: #bfc1b7;
|
||
--border-soft: color-mix(in oklab, var(--border), var(--bg) 50%);
|
||
|
||
/* ─── Accent ────────────────────────────────────────────────────
|
||
* PostHog Orange — the single signature color. Per DESIGN.md §1
|
||
* it lives almost exclusively on hover as text color, not as a
|
||
* CTA fill, but the token still binds the brand color so any
|
||
* component opting into orange surfaces can do so consistently.
|
||
* Primary CTAs render dark (#1e1f23 ≈ --fg-2 territory) with
|
||
* opacity-based hover states; that treatment lives inline at
|
||
* the button component, not as a shared accent. */
|
||
--accent: #F54E00;
|
||
--accent-on: #ffffff;
|
||
--accent-hover: color-mix(in oklab, var(--accent), black 8%);
|
||
--accent-active: color-mix(in oklab, var(--accent), black 14%);
|
||
|
||
/* ─── Semantic ──────────────────────────────────────────────────
|
||
* --warn binds to Amber Gold (DESIGN.md §2's "warmth signal")
|
||
* because the brand publishes that exact value as the secondary
|
||
* hover accent. --success and --danger stay on schema defaults
|
||
* — DESIGN.md does not specify brand greens or reds and the
|
||
* marketing surface almost never renders status. Keep semantic
|
||
* pixels well under 5% of any page. */
|
||
--success: #16a34a;
|
||
--warn: #F7A501;
|
||
--danger: #dc2626;
|
||
|
||
/* ─── Typography — fonts ────────────────────────────────────────
|
||
* IBM Plex Sans Variable is the single voice — display and body
|
||
* share the family (DESIGN.md §3). The fallback chain matches
|
||
* the brand's documented order: IBM Plex Sans static, then the
|
||
* platform fallbacks, then the broad sans-serif catch-all. Mono
|
||
* is Source Code Pro with the standard system fallbacks per
|
||
* DESIGN.md §3 Font Family. */
|
||
--font-display: "IBM Plex Sans Variable", "IBM Plex Sans", -apple-system, system-ui, "Avenir Next", Avenir, "Segoe UI", "Helvetica Neue", Helvetica, Ubuntu, Roboto, Noto, Arial, sans-serif;
|
||
--font-body: "IBM Plex Sans Variable", "IBM Plex Sans", -apple-system, system-ui, "Avenir Next", Avenir, "Segoe UI", "Helvetica Neue", Helvetica, Ubuntu, Roboto, Noto, Arial, sans-serif;
|
||
--font-mono: "Source Code Pro", ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace;
|
||
|
||
/* ─── Typography — type scale (px) ──────────────────────────────
|
||
* Derived from DESIGN.md §3 Hierarchy table. The scale tops out
|
||
* modestly — 30px for the display hero, 36px for section
|
||
* headings — because PostHog's editorial pacing favors confident
|
||
* mid-weight headings over giant ones. --text-4xl extrapolates
|
||
* to 44px for fixture-scale hero copy; the production site
|
||
* rarely goes that big. */
|
||
--text-xs: 12px;
|
||
--text-sm: 14px;
|
||
--text-base: 16px;
|
||
--text-lg: 20px;
|
||
--text-xl: 24px;
|
||
--text-2xl: 30px;
|
||
--text-3xl: 36px;
|
||
--text-4xl: 44px;
|
||
|
||
/* ─── Typography — leading & tracking ───────────────────────────
|
||
* Body leads 1.50 (DESIGN.md §3 — body sizes 1.50–1.71 for the
|
||
* content-heavy editorial layout); display compresses to 1.20
|
||
* for the 30px hero per the same table. Tracking compresses
|
||
* negatively on display sizes (-0.025em normalizes the brand's
|
||
* -0.75px at 30px) and relaxes to 0 on body. */
|
||
--leading-body: 1.5;
|
||
--leading-tight: 1.2;
|
||
--tracking-display: -0.025em;
|
||
|
||
/* ─── Spacing — base scale ──────────────────────────────────────
|
||
* 8px base unit per DESIGN.md §5. PostHog's published scale
|
||
* includes off-grid values (2, 6, 10, 18, 34) for fine-grained
|
||
* icon and padding adjustments; the shared scale stays on the
|
||
* standard 4px grid — off-grid spacing belongs inline at the
|
||
* component level, not in shared tokens. */
|
||
--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 ────────────────────────────────────────────
|
||
* Section padding 32–48px desktop per DESIGN.md §5 ("compact for
|
||
* a content-heavy site"). We bind the upper bound on desktop so
|
||
* the rhythm reads as deliberate spacing rather than crowding;
|
||
* tablet and phone step down to keep small screens tight. */
|
||
--section-y-desktop: 48px;
|
||
--section-y-tablet: 32px;
|
||
--section-y-phone: 24px;
|
||
|
||
/* ─── Radius ────────────────────────────────────────────────────
|
||
* Deliberately tight — DESIGN.md §7's Don'ts forbid 12px+ on
|
||
* cards. 4px is the workhorse (buttons, inputs, dropdowns,
|
||
* menus); 6px is the card tier (§4 Cards "4px–6px radius");
|
||
* 8px caps the lg tier for slightly larger containers; pill
|
||
* stays 9999px for badges and status dots. */
|
||
--radius-sm: 4px;
|
||
--radius-md: 6px;
|
||
--radius-lg: 8px;
|
||
--radius-pill: 9999px;
|
||
|
||
/* ─── Elevation ─────────────────────────────────────────────────
|
||
* THE single sanctioned shadow per DESIGN.md §6 — "only one
|
||
* shadow definition exists in the entire system". Reserved for
|
||
* floating elements (modals, dropdowns, mega-menus, popovers).
|
||
* Every other depth cue comes from sage borders and surface
|
||
* color shifts. Cards must NOT reach for this shadow — DESIGN.md
|
||
* §7 specifically forbids adding heavy shadows beyond this one. */
|
||
--elev-flat: none;
|
||
--elev-ring: 0 0 0 1px var(--border);
|
||
--elev-raised: 0px 25px 50px -12px rgba(0, 0, 0, 0.25);
|
||
|
||
/* ─── Focus ring ────────────────────────────────────────────────
|
||
* Focus Blue (#3b82f6) at 50% opacity — the lone cool color in
|
||
* the system, reserved for accessibility per DESIGN.md §2 / §4.
|
||
* Implementing as a 3px box-shadow keeps focus indication
|
||
* outside the layout box; the warm sage/olive identity stays
|
||
* uncompromised at rest. */
|
||
--focus-ring: 0 0 0 3px rgba(59, 130, 246, 0.5);
|
||
|
||
/* ─── Motion ────────────────────────────────────────────────────
|
||
* Default schema timings. DESIGN.md does not publish transition
|
||
* specs (static extraction scope); we bind defaults consistent
|
||
* with the brand's tactile feel — 150ms for micro-states (the
|
||
* famous opacity flash on dark buttons) and 200ms for general
|
||
* state changes. Standard easing curve, no overshoot. */
|
||
--motion-fast: 150ms;
|
||
--motion-base: 200ms;
|
||
--ease-standard: cubic-bezier(0.2, 0, 0, 1);
|
||
|
||
/* ─── Layout ────────────────────────────────────────────────────
|
||
* Container caps at 1280px per DESIGN.md §5 ("content containers
|
||
* likely 1200px–1280px"). Gutters tighten progressively: 24px
|
||
* desktop, 16px tablet, 12px phone — tight but not cramped,
|
||
* matching PostHog's content-dense editorial pacing. */
|
||
--container-max: 1280px;
|
||
--container-gutter-desktop: 24px;
|
||
--container-gutter-tablet: 16px;
|
||
--container-gutter-phone: 12px;
|
||
}
|