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。
269 lines
16 KiB
CSS
269 lines
16 KiB
CSS
/* ─────────────────────────────────────────────────────────────────────────
|
||
* design-systems/x-ai/tokens.css
|
||
*
|
||
* Structured token bindings for "x-ai" — the dark-first, monospace-driven
|
||
* brutalist minimalism of Elon Musk's AI lab. A design system that
|
||
* communicates through absence: pure white on warm near-black, GeistMono
|
||
* as the display voice, zero shadows, zero gradients, zero accent color.
|
||
* Restraint as sophistication.
|
||
*
|
||
* Brand identity in three sentences:
|
||
* 1. Dark-first canvas at #1f2228 (warm near-black with a subtle blue
|
||
* undertone, NEVER pure #000000) carries pure-white text as "the
|
||
* voice", with hierarchy expressed through opacity (100 / 70 / 50 / 30)
|
||
* rather than hue. There is no gray middle ground.
|
||
* 2. GeistMono runs at display sizes (up to a hero-only 320px at weight
|
||
* 300) and as the uppercase, letter-spaced button face. universalSans
|
||
* handles body and section headings. The monospace-as-display choice
|
||
* is the brand: terminal aesthetic as luxury.
|
||
* 3. Zero box-shadows, zero gradients, near-zero radii (0px default,
|
||
* 4px occasional softening). Depth comes from opacity-based borders
|
||
* and surface tints, not from simulated light. The single chromatic
|
||
* exception is the keyboard focus ring (Tailwind's default blue).
|
||
*
|
||
* Brand-specific schema decisions (each bends a schema convention to
|
||
* match xAI's voice rather than the cross-brand default):
|
||
*
|
||
* 1. `--bg` is `#1f2228`, NOT `#000000`. DESIGN.md §2 names this hue
|
||
* explicitly: "This specific hue prevents the harsh eye strain of
|
||
* `#000000` while maintaining deep darkness." Pure black is
|
||
* forbidden by the brand.
|
||
*
|
||
* 2. `--accent` is `#ffffff`, not a chromatic color. xAI has no
|
||
* accent palette — white IS the chromatic move. Primary CTAs render
|
||
* with `var(--accent)` as background and `var(--accent-on)` as
|
||
* foreground, producing the signature white-on-dark button. The
|
||
* "≤2 accent uses per screen" lint still holds; the primary CTA and
|
||
* the focus indicator are the only places white reverses against
|
||
* the canvas.
|
||
*
|
||
* 3. `--font-display` is a GeistMono stack. Monospace AS the display
|
||
* face is the defining aesthetic decision (DESIGN.md §3) — it
|
||
* positions xAI not as a consumer product but as infrastructure,
|
||
* as something built by people who live in terminals. `--font-mono`
|
||
* aliases the same stack because GeistMono IS the monospace face
|
||
* used for code, kbd, and tabular metrics.
|
||
*
|
||
* 4. The four-level foreground ramp is opacity-based (rgba 1.0 / 0.7
|
||
* / 0.5 / 0.3), NOT a grayscale hex ramp. DESIGN.md §2 documents
|
||
* the system literally as "white at α". Binding `--fg-2`, `--muted`,
|
||
* and `--meta` as `rgba(255,255,255,α)` preserves the "white over
|
||
* canvas" voice and keeps the tiers chromatically locked to the
|
||
* single foreground color.
|
||
*
|
||
* 5. `--border` is `rgba(255, 255, 255, 0.1)` — DESIGN.md §2's default
|
||
* "Border Default" alpha, NOT a solid hex. `--border-soft` drops to
|
||
* 0.05 for inner-row separators. The 0.2 "Border Strong" tier from
|
||
* DESIGN.md lives inline per-component (hover/active state edges).
|
||
*
|
||
* 6. Radii are aggressively small: 0 / 0 / 4 / 9999. DESIGN.md §5:
|
||
* "The near-zero radius philosophy is core to the brand's brutalist
|
||
* identity." Buttons, inputs, and cards all default to 0px;
|
||
* `--radius-lg` softens to 4px for the rare secondary container
|
||
* (DESIGN.md's "Subtle (4px) occasional"). `--radius-pill` stays at
|
||
* 9999px because the schema slot requires a pill value, even though
|
||
* xAI rarely renders one.
|
||
*
|
||
* 7. `--elev-raised` is literally `none`. DESIGN.md §6: "xAI rejects
|
||
* the conventional shadow-based elevation system entirely. There
|
||
* are no box-shadows anywhere on the site." Depth is communicated
|
||
* through three other mechanisms documented in the same section:
|
||
* opacity-based borders that brighten on interaction, subtle
|
||
* background-opacity shifts (0.03 → 0.08), and the massive
|
||
* typographic scale contrast. `--elev-ring` is kept as a hairline
|
||
* border-as-shadow so components that target the elevation token
|
||
* still get a visible edge.
|
||
*
|
||
* 8. `--focus-ring` is the ONLY chromatic exception to the otherwise
|
||
* strictly monochromatic palette. DESIGN.md §2 names Tailwind's
|
||
* default `--tw-ring-color` (`rgb(59, 130, 246) / 0.5`) as the
|
||
* keyboard focus indicator. We reproduce it as a 3px halo
|
||
* (Tailwind's `ring-2` shape) — the blue is intentional and
|
||
* non-negotiable for a11y, even though the rest of the system is
|
||
* achromatic.
|
||
*
|
||
* 9. The type scale tops out at 64px (`--text-4xl`), NOT the 320px
|
||
* hero display DESIGN.md §3 names. 320px is a hero-only treatment,
|
||
* not a token tier — components.html overrides `font-size` inline
|
||
* for that one cinematic moment. Reserving `--text-4xl` at 64px
|
||
* keeps the slot useful as the H1-equivalent ceiling for cards,
|
||
* sections, and modals across the system. (See vercel/tokens.css
|
||
* §6 for the same reasoning: tokens encode reusable tiers, not
|
||
* one-off hero crops.)
|
||
*
|
||
* 10. `--tracking-display` stays `normal`. GeistMono at display scale
|
||
* does NOT compress letter-spacing — the monospace grid is part of
|
||
* the aesthetic and tightening would collapse it. The uppercase
|
||
* button tracking (`1.4px`, DESIGN.md §4) is an interaction-specific
|
||
* value that lives inline on `.btn` since it applies only to
|
||
* command-line-styled labels, not display headlines.
|
||
*
|
||
* 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 shared schema. The GeistMono and universalSans
|
||
* faces are referenced by name only — artifacts that render acceptably
|
||
* fall back to the OS monospace and sans-serif stacks listed inside the
|
||
* font-family declarations.
|
||
* ─────────────────────────────────────────────────────────────── */
|
||
|
||
:root {
|
||
/* ─── Surface ─────────────────────────────────────────────────────
|
||
* #1f2228 is the singular canvas — warm near-black with a subtle
|
||
* blue undertone. `--surface` is the barely-visible 0.03 white tint
|
||
* that cards sit on; `--surface-warm` rises to 0.05 for hover and
|
||
* elevated rows. DESIGN.md §6's elevation ramp uses both values
|
||
* verbatim as "Surface (Level 1)" and "Surface Hover". */
|
||
--bg: #1f2228; /* warm near-black canvas — NEVER #000 */
|
||
--surface: rgba(255, 255, 255, 0.03); /* subtle card surface */
|
||
--surface-warm: rgba(255, 255, 255, 0.05); /* hover / elevated tier */
|
||
|
||
/* ─── Foreground ──────────────────────────────────────────────────
|
||
* Four-level opacity ramp per DESIGN.md §2. Pure white is "the
|
||
* voice"; subsequent tiers express hierarchy by dimming rather
|
||
* than by hue. Binding as rgba (not hex) keeps the ramp locked
|
||
* chromatically to the single foreground color. */
|
||
--fg: #ffffff; /* primary — headings, links, body */
|
||
--fg-2: rgba(255, 255, 255, 0.7); /* secondary — descriptions */
|
||
--muted: rgba(255, 255, 255, 0.5); /* tertiary — captions, timestamps */
|
||
--meta: rgba(255, 255, 255, 0.3); /* quaternary — disabled, annotations */
|
||
|
||
/* ─── Border ──────────────────────────────────────────────────────
|
||
* Opacity-based borders — barely visible, never absent. 0.1 is the
|
||
* default card / divider edge; 0.05 is the inner-row separator
|
||
* that should not visually compete. The 0.2 "strong" tier from
|
||
* DESIGN.md §2 lives inline per-component (hover/active states). */
|
||
--border: rgba(255, 255, 255, 0.1); /* default card / divider */
|
||
--border-soft: rgba(255, 255, 255, 0.05); /* inner row separator */
|
||
|
||
/* ─── Accent ──────────────────────────────────────────────────────
|
||
* White IS the accent. There is no chromatic color in xAI's
|
||
* monochromatic palette — primary CTAs are white-on-dark.
|
||
* `--accent-hover` dims to 0.9 alpha per DESIGN.md §4 (primary
|
||
* button hover); `--accent-active` drops a further step. The
|
||
* convention is REVERSED from most systems: hover dims, it does
|
||
* not brighten. */
|
||
--accent: #ffffff; /* the voice as bg */
|
||
--accent-on: #1f2228; /* canvas as fg on accent */
|
||
--accent-hover: rgba(255, 255, 255, 0.9); /* slight dimming on hover (DESIGN.md §4) */
|
||
--accent-active: rgba(255, 255, 255, 0.8); /* deeper dim on press */
|
||
|
||
/* ─── Semantic ────────────────────────────────────────────────────
|
||
* DESIGN.md §7 actively discourages colored status indicators
|
||
* ("Don't use colored status indicators unless absolutely
|
||
* necessary — keep everything in the white/dark spectrum"). We
|
||
* inherit schema defaults so the slots remain useful for the rare
|
||
* cases where status truly must render chromatically — but
|
||
* components should prefer monochrome cues (opacity, weight). */
|
||
--success: #16a34a;
|
||
--warn: #eab308;
|
||
--danger: #dc2626;
|
||
|
||
/* ─── Typography — fonts ──────────────────────────────────────────
|
||
* GeistMono is the brand's defining typographic decision: a
|
||
* monospace face used at display sizes. universalSans handles
|
||
* body and section headings. `--font-mono` aliases the display
|
||
* stack because GeistMono IS the monospace face — there is no
|
||
* separate code typeface. */
|
||
--font-display: "GeistMono", ui-monospace, "SF Mono", "Roboto Mono", Menlo, Monaco, "Liberation Mono", "DejaVu Sans Mono", "Courier New", monospace;
|
||
--font-body: "universalSans", "universalSans Fallback", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
|
||
--font-mono: "GeistMono", ui-monospace, "SF Mono", "Roboto Mono", Menlo, Monaco, "Liberation Mono", "DejaVu Sans Mono", "Courier New", monospace;
|
||
|
||
/* Type scale — DESIGN.md §3 hierarchy table.
|
||
* The 320px display hero is intentionally NOT a token tier;
|
||
* components.html overrides `font-size` inline for that one
|
||
* cinematic treatment. `--text-4xl` instead caps at 64px, the
|
||
* realistic ceiling for marketing H1s across cards/sections.
|
||
* `--text-2xl` (30px) matches DESIGN.md's "Section Heading" tier. */
|
||
--text-xs: 12px; /* small / meta — timestamps, footnotes */
|
||
--text-sm: 14px; /* button label / caption */
|
||
--text-base: 16px; /* body — universalSans 1.5 */
|
||
--text-lg: 20px; /* body large / introductions */
|
||
--text-xl: 24px; /* card title */
|
||
--text-2xl: 30px; /* section heading — DESIGN.md §3 */
|
||
--text-3xl: 40px; /* H1 */
|
||
--text-4xl: 64px; /* display ceiling (320px hero is inline-only) */
|
||
|
||
/* Leading + tracking.
|
||
* `--leading-body: 1.5` is universalSans body (DESIGN.md §3).
|
||
* `--leading-tight: 1.2` matches the 30px section heading.
|
||
* `--tracking-display: normal` because GeistMono at scale does
|
||
* NOT compress letter-spacing — the monospace grid is the
|
||
* aesthetic and tightening would collapse it. */
|
||
--leading-body: 1.5;
|
||
--leading-tight: 1.2;
|
||
--tracking-display: normal;
|
||
|
||
/* ─── Spacing ─────────────────────────────────────────────────────
|
||
* DESIGN.md §5 documents a deliberately sparse scale concentrated
|
||
* at the small end: 4 / 8 / 24 / 48. We bind the full schema slot
|
||
* range — components reach for 1/2/6/12 most often; the
|
||
* intermediate tiers are preserved for edge cases where a
|
||
* narrower step is structurally required. */
|
||
--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: "generous section padding 48px–
|
||
* 96px". 96 desktop / 64 tablet / 48 phone preserves the
|
||
* cinematic emptiness that is itself a design statement; the
|
||
* absence of decoration means whitespace is the primary structural
|
||
* tool. */
|
||
--section-y-desktop: 96px;
|
||
--section-y-tablet: 64px;
|
||
--section-y-phone: 48px;
|
||
|
||
/* ─── Radius ──────────────────────────────────────────────────────
|
||
* Brutalist precision. DESIGN.md §5: "Sharp (0px) primary
|
||
* treatment for buttons, cards, inputs — the default. Subtle (4px)
|
||
* occasional softening on secondary containers." `--radius-pill`
|
||
* stays at 9999px because the schema slot requires a pill value,
|
||
* even though xAI rarely renders one. */
|
||
--radius-sm: 0px; /* buttons, inputs — sharp */
|
||
--radius-md: 0px; /* cards — sharp */
|
||
--radius-lg: 4px; /* occasional secondary softening */
|
||
--radius-pill: 9999px; /* schema-required slot */
|
||
|
||
/* ─── Elevation ───────────────────────────────────────────────────
|
||
* Shadow-free system per DESIGN.md §6: "xAI rejects the
|
||
* conventional shadow-based elevation system entirely. There are
|
||
* no box-shadows anywhere on the site." `--elev-raised` is
|
||
* literally `none`; depth comes from opacity-based borders and
|
||
* background tints. `--elev-ring` preserves the hairline edge for
|
||
* components that read the elevation token. */
|
||
--elev-flat: none;
|
||
--elev-ring: 0 0 0 1px var(--border);
|
||
--elev-raised: none;
|
||
|
||
/* ─── Focus ───────────────────────────────────────────────────────
|
||
* The single chromatic exception. Tailwind's default
|
||
* `--tw-ring-color` (DESIGN.md §2 "Ring Blue") at 50% opacity, as
|
||
* a 3px halo matching the `ring-2` shape xAI uses for keyboard
|
||
* accessibility focus states. Non-negotiable for a11y. */
|
||
--focus-ring: 0 0 0 3px rgba(59, 130, 246, 0.5);
|
||
|
||
/* ─── Motion ──────────────────────────────────────────────────────
|
||
* Schema defaults. xAI does not choreograph — transitions are
|
||
* short, purposeful, utilitarian. No long-form entrances. */
|
||
--motion-fast: 150ms;
|
||
--motion-base: 200ms;
|
||
--ease-standard: cubic-bezier(0.2, 0, 0, 1);
|
||
|
||
/* ─── Layout ──────────────────────────────────────────────────────
|
||
* DESIGN.md §5: "Max content width: approximately 1200px." Gutters
|
||
* narrow on mobile so the dense-but-deliberate vertical rhythm
|
||
* keeps reading even when the dark canvas reaches the edge. */
|
||
--container-max: 1200px;
|
||
--container-gutter-desktop: 24px;
|
||
--container-gutter-tablet: 16px;
|
||
--container-gutter-phone: 12px;
|
||
}
|