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。
266 lines
16 KiB
CSS
266 lines
16 KiB
CSS
/* ─────────────────────────────────────────────────────────────────────────
|
||
* design-systems/cal/tokens.css
|
||
*
|
||
* Structured token bindings for "Design System Inspired by Cal.com" —
|
||
* open-source scheduling infrastructure rendered as a grayscale photograph.
|
||
* Pure-white canvas, near-black charcoal text, one reserved link-blue, and
|
||
* a multi-layer shadow stack that replaces CSS borders with ring-shadows.
|
||
*
|
||
* This file pre-compiles the values described in `DESIGN.md` into the
|
||
* shared schema. Agents generating an artifact for cal 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 Cal.com's voice rather than the cross-brand default):
|
||
*
|
||
* 1. `--fg` is `#242424` (Charcoal), NOT `#000000`. DESIGN.md §2 names
|
||
* it the "signature near-black, warmer than pure black" — the
|
||
* micro-warmth is what keeps the canvas from feeling harsh, the
|
||
* same role `#171717` plays for Vercel. `--fg-2` independently
|
||
* binds to `#111111` (Midnight) because Cal uses it for highest-
|
||
* contrast nav links and deep emphasis; `--muted` lands on
|
||
* `#898989` (Mid Gray) for descriptions, the third documented
|
||
* tier in the grayscale palette.
|
||
*
|
||
* 2. `--accent` is `#0099ff` (Link Blue), the ONLY non-grayscale
|
||
* value in the brand. DESIGN.md §2 calls it "the only blue in
|
||
* the system, reserved strictly for hyperlinks" — color is a
|
||
* "foreign substance" deliberately quarantined to text links and
|
||
* focus rings. Primary CTAs use `--fg` (Charcoal) as the button
|
||
* background, mirroring Cal.com's signature dark-on-white button.
|
||
* Keeping the link-blue in `--accent` (not promoting Charcoal to
|
||
* double-duty) preserves the lint's "≤2 accent uses per screen"
|
||
* semantic and matches where blue actually appears in product.
|
||
*
|
||
* 3. `--border` is `rgba(34, 42, 53, 0.08)` — the literal Cal.com
|
||
* ring-shadow alpha, NOT a solid hex. DESIGN.md §1 + §6 calls
|
||
* out the shadow-as-border technique: surfaces use `0 0 0 1px`
|
||
* ring shadows instead of CSS borders, "avoiding CSS border
|
||
* entirely". Binding `--border` to the same alpha lets
|
||
* `--elev-ring` reproduce the Cal hairline by default, and lets
|
||
* `border: 1px solid var(--border)` match exactly when a true
|
||
* border is structurally needed. `--border-soft` drops to 0.05
|
||
* alpha (the same value used in the diffused-shadow layer of
|
||
* the card stack) for inner separators that shouldn't compete.
|
||
*
|
||
* 4. `--surface-warm` aliases to `--surface` and `--meta` aliases to
|
||
* `--muted`. Cal.com is intentionally monochrome — there is no
|
||
* warm surface tier and no fourth gray below `--muted`. Following
|
||
* the schema, an unused tier collapses via `var()` instead of
|
||
* introducing a fabricated value.
|
||
*
|
||
* 5. `--elev-raised` is the full multi-layer Cal card stack
|
||
* (`0 1px 5px -4px rgba(19,19,22,0.7), 0 0 0 1px rgba(34,42,53,0.08),
|
||
* 0 4px 8px rgba(34,42,53,0.05)`), reproduced VERBATIM from
|
||
* DESIGN.md §6 Level 2. The composition is the workhorse: a sharp
|
||
* contact shadow at the bottom edge (the `-4px` spread lifts the
|
||
* blur off the top), a ring-shadow that paints the hairline edge,
|
||
* and a soft diffused ambient at 5% alpha. Drop any layer and
|
||
* the card stops looking "built" — it floats.
|
||
*
|
||
* 6. The type scale tops out at 64px (`--text-4xl`) per DESIGN.md §3
|
||
* "Display Hero: Cal Sans 64px / 600 / 1.10". `--leading-tight`
|
||
* is 1.1 to match. `--tracking-display` is `0` (not negative)
|
||
* because Cal Sans was DESIGNED with extremely tight default
|
||
* letter-spacing at large sizes — DESIGN.md §3 lists letter-
|
||
* spacing 0px at 64/48/24 and warns that adding negative tracking
|
||
* at small sizes cramps the font. Positive tracking compensation
|
||
* for sub-24px Cal Sans usage stays a component-local concern.
|
||
*
|
||
* 7. `--font-display` leads with `Cal Sans` (the custom geometric
|
||
* display face by Mark Davis, open-source via Google Fonts),
|
||
* falling back to Inter so artifacts render legibly when Cal
|
||
* Sans is not loaded. `--font-body` is Inter ("rock-solid"
|
||
* body face per DESIGN.md §3). `--font-mono` leads with
|
||
* Roboto Mono per the documented code-block font.
|
||
*
|
||
* 8. Section rhythm is generous: `96px` desktop, `64px` tablet,
|
||
* `48px` phone (`--section-y-*`). DESIGN.md §5 demands "80px–96px
|
||
* vertical between major sections (generous)" and DESIGN.md §7
|
||
* forbids dropping below 48px on any breakpoint — "the generous
|
||
* whitespace is core to the premium monochrome aesthetic".
|
||
* Container caps at `1200px` (the documented max content width).
|
||
*
|
||
* 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
|
||
* ─────────────────────────────────────────────────────────────────── */
|
||
|
||
:root {
|
||
/* ─── Surface ─────────────────────────────────────────────────────
|
||
* Cal.com's canvas is achromatic and uniform — pure white page, pure
|
||
* white cards, no warm tier anywhere. `--surface-warm` aliases to
|
||
* `--surface` because the brand explicitly forbids background tinting
|
||
* (DESIGN.md §2: "boldness through monochrome"); depth comes from the
|
||
* multi-layer shadow stack, not from surface-color variation. */
|
||
--bg: #ffffff; /* Pure White — the dominant canvas */
|
||
--surface: #ffffff; /* White card surface — depth via shadow, not color */
|
||
--surface-warm: var(--surface); /* alias — Cal.com has no warm tier */
|
||
|
||
/* ─── Foreground ──────────────────────────────────────────────────
|
||
* Three grayscale tiers from DESIGN.md §2 palette: Charcoal (#242424,
|
||
* the warmer-than-black signature), Midnight (#111111, deepest text
|
||
* for nav and high-contrast emphasis), and Mid Gray (#898989, the
|
||
* documented secondary / muted tier). `--meta` collapses to `--muted`
|
||
* because Cal has no fourth tier — there is no tertiary gray below
|
||
* Mid Gray in the brand spec. */
|
||
--fg: #242424; /* Charcoal — primary text, button bg, signature near-black */
|
||
--fg-2: #111111; /* Midnight — deepest text, nav, high-contrast emphasis */
|
||
--muted: #898989; /* Mid Gray — descriptions, secondary labels, muted content */
|
||
--meta: var(--muted); /* alias — Cal has only three grayscale tiers */
|
||
|
||
/* ─── Border ──────────────────────────────────────────────────────
|
||
* Shadow-as-border is THE signature: `rgba(34, 42, 53, 0.08)` at 1px
|
||
* spread replaces CSS borders throughout (DESIGN.md §1 + §6). Binding
|
||
* `--border` to the alpha (not a solid hex) lets `--elev-ring`
|
||
* reproduce the Cal hairline by default, and lets `border: 1px solid
|
||
* var(--border)` paint the same value when a real border is
|
||
* structurally required. `--border-soft` drops to 0.05 (the diffused-
|
||
* shadow layer alpha) for inner row separators that must not compete
|
||
* with the card edge. */
|
||
--border: rgba(34, 42, 53, 0.08); /* signature ring-shadow alpha — used as border */
|
||
--border-soft: rgba(34, 42, 53, 0.05); /* inner separator — quieter than the card edge */
|
||
|
||
/* ─── Accent ──────────────────────────────────────────────────────
|
||
* Link Blue (#0099ff) — the ONLY chromatic color in the entire
|
||
* system. DESIGN.md §2: "reserved strictly for hyperlinks". Cal's
|
||
* marketing site treats color as "a foreign substance"; primary CTAs
|
||
* use `--fg` (Charcoal) as the button background, not `--accent`,
|
||
* which keeps the blue exclusively where it appears in product:
|
||
* inline text links and the focus-ring tint. */
|
||
--accent: #0099ff; /* Link Blue — only non-grayscale color, link-only */
|
||
--accent-on: #ffffff; /* white label on the rare blue surface */
|
||
--accent-hover: color-mix(in oklab, var(--accent), black 8%);
|
||
--accent-active: color-mix(in oklab, var(--accent), black 14%);
|
||
|
||
/* ─── Semantic ────────────────────────────────────────────────────
|
||
* Cal.com's marketing surface rarely renders state. We inherit the
|
||
* schema defaults (no grayscale-shift) — the product UI does show
|
||
* greens and blues in scheduling screenshots, but per DESIGN.md §2
|
||
* those colors belong to the product image, not the marketing frame. */
|
||
--success: #16a34a;
|
||
--warn: #eab308;
|
||
--danger: #dc2626;
|
||
|
||
/* ─── Typography ──────────────────────────────────────────────────
|
||
* Cal Sans + Inter — the documented two-face pairing (DESIGN.md §3).
|
||
* Cal Sans is exclusively for headings (24px+) with extremely tight
|
||
* default letter-spacing; Inter is "rock-solid" body. The font stacks
|
||
* fall through to system-installed faces so artifacts render legibly
|
||
* even when Cal Sans / Inter are not loaded. */
|
||
--font-display: "Cal Sans", "Inter", -apple-system, "Segoe UI", Arial, sans-serif;
|
||
--font-body: "Inter", -apple-system, "Segoe UI", Arial, sans-serif;
|
||
--font-mono: "Roboto Mono", ui-monospace, "SF Mono", "JetBrains Mono", Menlo, Monaco, Consolas, monospace;
|
||
|
||
/* Type scale (px) — derived from DESIGN.md §3 hierarchy table. The
|
||
* scale tops out at 64px (display hero, Cal Sans 600 / 1.10) and
|
||
* keeps the documented 48 / 24 / 20 / 16 / 14 / 12 anchors. The
|
||
* `--text-2xl` step at 32px bridges the 24→48 gap so cross-brand
|
||
* components reading `--text-2xl` get a sensible section-title size
|
||
* even though DESIGN.md does not list 32px explicitly. */
|
||
--text-xs: 12px; /* caption / micro / Cal Sans label */
|
||
--text-sm: 14px; /* caption / nav micro / Roboto Mono code */
|
||
--text-base: 16px; /* body / UI label / card title */
|
||
--text-lg: 20px; /* sub-heading (Cal Sans 600 / 1.20 / +0.2px) */
|
||
--text-xl: 24px; /* feature heading (Cal Sans 600 / 1.30) */
|
||
--text-2xl: 32px; /* bridge tier (24→48) for cross-brand consumers */
|
||
--text-3xl: 48px; /* section heading (Cal Sans 600 / 1.10) */
|
||
--text-4xl: 64px; /* display hero (Cal Sans 600 / 1.10) */
|
||
|
||
/* `--leading-tight` is 1.1 to match DESIGN.md's "Cal Sans display
|
||
* 1.10" and "Section Heading 1.10" rows. `--leading-body` is 1.5,
|
||
* the documented Inter body-text leading. `--tracking-display` is
|
||
* `0` — Cal Sans is DESIGNED with extremely tight default letter-
|
||
* spacing at large sizes, and DESIGN.md §3 lists tracking 0px at
|
||
* 64 / 48 / 24px. Negative tracking at display would over-cramp it. */
|
||
--leading-body: 1.5;
|
||
--leading-tight: 1.1;
|
||
--tracking-display: 0;
|
||
|
||
/* ─── Spacing ─────────────────────────────────────────────────────
|
||
* 4px-grid base scale matching the schema defaults. Cal.com's DESIGN
|
||
* §5 spacing scale (1/2/3/4/6/8/12/16/20/24/28 sub-tiers) covers many
|
||
* micro-padding values that are too fine for the shared schema; those
|
||
* stay component-local. The 4/8/12/16/20/24/32/48 tier here covers
|
||
* the structural rhythm — the deliberate jump from 28px to 80px in
|
||
* DESIGN.md is preserved by the `--section-y-*` tier below. */
|
||
--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: "80px–96px vertical between major
|
||
* sections (generous)" + §7 forbids dropping below 48px on mobile.
|
||
* We anchor at the upper end (96px desktop), step down to 64px on
|
||
* tablet, and bottom out at the 48px mobile floor. The whitespace
|
||
* is the design — DESIGN.md §5 calls it "lavish section spacing". */
|
||
--section-y-desktop: 96px;
|
||
--section-y-tablet: 64px;
|
||
--section-y-phone: 48px;
|
||
|
||
/* ─── Radius ──────────────────────────────────────────────────────
|
||
* DESIGN.md §5 documents an unusually wide radius scale (2/4/6/8/12/
|
||
* 16/29/100/1000/9999). We bind the four schema tiers to: 8 (the
|
||
* "standard interactive element" radius for buttons / inputs /
|
||
* images), 12 (medium containers), 16 (large section containers),
|
||
* 9999 (pill for badges and rounded actions). The intermediate
|
||
* 29px / 100px tiers are component-specific and stay inline. */
|
||
--radius-sm: 8px; /* buttons, inputs, standard interactive */
|
||
--radius-md: 12px; /* cards, medium containers */
|
||
--radius-lg: 16px; /* large section containers */
|
||
--radius-pill: 9999px; /* pill badges, fully rounded actions */
|
||
|
||
/* ─── Elevation ───────────────────────────────────────────────────
|
||
* Cal.com's depth system is shadow-LED via multi-layer compositing
|
||
* (DESIGN.md §6: "11 shadow definitions"). Three sanctioned levels:
|
||
*
|
||
* --elev-flat no shadow (page canvas, basic text containers)
|
||
* --elev-ring the signature 1px ring-as-border (most surfaces)
|
||
* --elev-raised the workhorse card stack (Level 2 in DESIGN.md §6)
|
||
*
|
||
* `--elev-raised` is reproduced VERBATIM from DESIGN.md §6 Level 2:
|
||
* contact: 0 1px 5px -4px rgba(19,19,22,0.7) — sharp bottom edge
|
||
* ring: 0 0 0 1px rgba(34,42,53,0.08) — hairline border
|
||
* ambient: 0 4px 8px rgba(34,42,53,0.05) — soft diffused depth
|
||
* Drop any layer and the card loses the "physical card on a table"
|
||
* quality that DESIGN.md §6 calls out as the system's signature. */
|
||
--elev-flat: none;
|
||
--elev-ring: 0 0 0 1px var(--border);
|
||
--elev-raised:
|
||
0 1px 5px -4px rgba(19, 19, 22, 0.7),
|
||
0 0 0 1px rgba(34, 42, 53, 0.08),
|
||
0 4px 8px rgba(34, 42, 53, 0.05);
|
||
|
||
/* ─── Focus ring ──────────────────────────────────────────────────
|
||
* The schema default (a soft alpha glow at `--accent`) reproduces
|
||
* Cal.com's focus aesthetic well — DESIGN.md §2 names the focus
|
||
* indicator as "Focus Ring: #3b82f6 at 50% opacity", and our Link
|
||
* Blue accent tinted to ~30% alpha sits in the same family without
|
||
* introducing a brand-foreign hue. */
|
||
--focus-ring: 0 0 0 3px color-mix(in oklab, var(--accent), transparent 70%);
|
||
|
||
/* ─── Motion ──────────────────────────────────────────────────────
|
||
* Two durations + one easing curve. Cal.com's transitions are quick
|
||
* and unobtrusive — DESIGN.md §4 describes hover as a simple opacity
|
||
* reduction, never a long-form choreographed entrance. */
|
||
--motion-fast: 150ms;
|
||
--motion-base: 200ms;
|
||
--ease-standard: cubic-bezier(0.2, 0, 0, 1);
|
||
|
||
/* ─── Layout ──────────────────────────────────────────────────────
|
||
* 1200px max content width per DESIGN.md §5: "~1200px content
|
||
* container, centered". Gutters narrow on mobile so body copy stays
|
||
* comfortable on small screens — Cal.com does not edge-bleed text
|
||
* at any breakpoint. */
|
||
--container-max: 1200px;
|
||
--container-gutter-desktop: 24px;
|
||
--container-gutter-tablet: 16px;
|
||
--container-gutter-phone: 12px;
|
||
}
|