@aexol/spectral 0.7.0 → 0.7.1

package/dist/designer/data/systems/cal/tokens.css

@@ -0,0 +1,265 @@
+/* ─────────────────────────────────────────────────────────────────────────
+ * 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;
+}

package/dist/designer/data/systems/canva/DESIGN.md

@@ -0,0 +1,157 @@
+# Design System Inspired by Canva
+
+> Category: Design & Creative
+> Visual creation platform. Vivid purple-blue gradient, generous spacing, friendly geometry.
+
+## 1. Visual Theme & Atmosphere
+
+Canva is the friendly face of design tools — the brand makes a point of looking inviting where Adobe looks intimidating. The page is built on a clean white canvas (`#ffffff`) with a signature **purple-to-blue gradient** (`#7d2ae8` → `#00c4cc`) used in the brand mark, hero buttons, and Pro/Magic moments. Surfaces are generously padded, edges are gently rounded (8–16px), and shadows are soft and cool-toned.
+
+Typography uses **Canva Sans** (a custom geometric sans) for chrome and prose, with rounded letterforms that share DNA with brands like Airbnb and Asana. Weight contrast does the heavy lifting — 800 for hero display, 700 for section heads, 400 for body — while size hierarchy is more compressed than typical product brands so cards and templates read at a glance.
+
+The shape system is ultra-soft: 12px on most cards, 16–20px on larger panels, 9999px on chips. Buttons are rectangles with a subtle elevation shadow (`0 2px 8px rgba(0,0,0,0.06)`) that grows on hover. Iconography is filled and rounded, never line-only — Canva's icons speak the same shape language as its UI.
+
+**Key Characteristics:**
+- White canvas with a violet-to-cyan gradient (`#7d2ae8` → `#00c4cc`)
+- Canva Sans (rounded geometric) for everything; weight contrast over color
+- 12–20px radii everywhere; 9999px pills for chips and tags
+- Soft cool-toned shadows that grow on hover
+- Filled rounded iconography — never outlined
+- Vibrant secondary palette (coral, mint, tangerine) for category tags
+- Pro/Magic moments lit by a static gradient — no animation
+
+## 2. Color Palette & Roles
+
+### Brand Gradient
+- **Canva Purple** (`#7d2ae8`): Brand primary; gradient origin.
+- **Canva Cyan** (`#00c4cc`): Brand secondary; gradient terminus.
+- **Canva Pink** (`#ff5757`): Tertiary brand accent (Magic Studio).
+
+### Surface
+- **Canvas** (`#ffffff`): Primary background.
+- **Surface Subtle** (`#f4f5f7`): Section break, sidebar.
+- **Surface Inset** (`#e8eaed`): Disabled, inset block.
+- **Surface Cool** (`#eef0fc`): Hover tint on purple-themed cards.
+
+### Ink & Text
+- **Ink Primary** (`#0e1318`): Primary text.
+- **Ink Secondary** (`#3c4043`): Body prose.
+- **Ink Muted** (`#5f6368`): Captions, descriptions.
+- **Ink Faint** (`#9aa0a6`): Placeholder, disabled label.
+
+### Semantic
+- **Success** (`#00b894`): Saved, exported.
+- **Warning** (`#ffb020`): Storage limit, advisory.
+- **Error** (`#ff5757`): Validation, destructive.
+- **Info** (`#0d99ff`): Tip, link.
+
+### Category Accents (Template Tags)
+- **Coral** (`#ff7059`): Social posts.
+- **Tangerine** (`#ff9633`): Marketing.
+- **Mint** (`#48c997`): Education.
+- **Sky** (`#3ea6ff`): Business.
+- **Lavender** (`#9b87f5`): Personal.
+
+### Border
+- **Border Default** (`#e1e3e6`): Standard hairline.
+- **Border Strong** (`#c7cdd3`): Emphasized border, hover state.
+
+## 3. Typography Rules
+
+### Font Family
+- **Display / UI / Body**: `Canva Sans`, with fallback: `'YS Text', system-ui, -apple-system, sans-serif`
+- **Editorial (rare)**: `Canva Sans Display`, with fallback: `'Canva Sans', sans-serif`
+- **Code (devtools only)**: `JetBrains Mono`, with fallback: `ui-monospace, Menlo, Consolas, monospace`
+
+### Hierarchy
+
+| Role | Font | Size | Weight | Line Height | Letter Spacing | Notes |
+|------|------|------|--------|-------------|----------------|-------|
+| Hero | Canva Sans | 64px (4rem) | 800 | 1.05 | -0.02em | Marketing hero, "Design anything." |
+| H1 | Canva Sans | 36px (2.25rem) | 700 | 1.15 | -0.01em | Page heading |
+| H2 | Canva Sans | 24px (1.5rem) | 700 | 1.2 | -0.005em | Section heading |
+| H3 | Canva Sans | 18px (1.125rem) | 600 | 1.3 | normal | Sub-section, card title |
+| Body Large | Canva Sans | 16px (1rem) | 400 | 1.55 | normal | Lede, marketing body |
+| Body | Canva Sans | 14px (0.875rem) | 400 | 1.5 | normal | Standard UI prose |
+| Caption | Canva Sans | 12px (0.75rem) | 500 | 1.4 | 0.005em | Metadata, hint text |
+| Button | Canva Sans | 14px (0.875rem) | 600 | 1.2 | normal | Default button label |
+| Tag | Canva Sans | 11px (0.6875rem) | 600 | 1.2 | 0.04em | Uppercase category chip |
+
+### Principles
+- **Weight contrast over color contrast**: hierarchy steps via 800→700→600→400; the surface stays neutral.
+- **Tight line-height for cards**: card titles use 1.15–1.2 so a 3-line title still fits a 4:3 thumbnail.
+- **No display serif**: Canva is sans-only across all surfaces; serifs appear only as user-selectable template fonts inside the editor.
+
+## 4. Component Stylings
+
+### Buttons
+
+**Primary (Gradient)**
+- Background: `linear-gradient(135deg, #7d2ae8, #00c4cc)`
+- Text: `#ffffff`
+- Padding: 12px 20px
+- Radius: 8px
+- Shadow: `0 2px 8px rgba(125, 42, 232, 0.2)`
+- Hover: shadow grows to `0 4px 14px rgba(125, 42, 232, 0.3)`
+- Use: hero CTAs, "Try Canva Pro"
+
+**Primary (Solid Purple)**
+- Background: `#7d2ae8`
+- Text: `#ffffff`
+- Padding: 12px 20px
+- Radius: 8px
+- Hover: `#6815d4`
+
+**Secondary**
+- Background: `#ffffff`
+- Text: `#0e1318`
+- Border: 1px solid `#e1e3e6`
+- Radius: 8px
+- Hover: background `#f4f5f7`, border `#c7cdd3`
+
+**Subtle / Tertiary**
+- Background: `rgba(125, 42, 232, 0.08)`
+- Text: `#7d2ae8`
+- Hover: background `rgba(125, 42, 232, 0.14)`
+
+### Cards / Template Tiles
+- Background: `#ffffff`
+- Border: 1px solid `#e1e3e6`
+- Radius: 12px
+- Shadow at rest: `0 1px 3px rgba(0,0,0,0.04)`
+- Shadow on hover: `0 8px 24px rgba(0,0,0,0.08)`, lift 2px
+- Aspect ratio: thumbnail respects template (1:1, 4:3, 9:16)
+
+### Inputs
+- Background: `#ffffff`
+- Border: 1px solid `#e1e3e6`
+- Radius: 8px
+- Padding: 10px 14px
+- Focus: border `#7d2ae8`, ring `0 0 0 3px rgba(125, 42, 232, 0.16)`
+
+### Chips / Tags
+- Background: category-tinted soft.
+- Text: matching strong category color.
+- Padding: 4px 10px
+- Radius: 9999px
+- Font: 11px / 600 / uppercase
+
+### Pro Badge
+- Background: `linear-gradient(135deg, #7d2ae8, #ff5757)`
+- Text: `#ffffff`
+- Padding: 2px 8px
+- Radius: 9999px
+- Font: 10px / 700 / uppercase
+
+## 5. Spacing & Layout
+
+- **Base unit**: 4px. Scale: 4, 8, 12, 16, 24, 32, 48, 64, 96.
+- **Container**: max 1320px, 32px gutter.
+- **Sidebar (editor)**: 320px wide; collapses to 56px icons.
+- **Card grid gap**: 16px on mobile, 24px on desktop.
+
+## 6. Motion
+
+- **Duration**: 180ms for hover; 280ms for menu open; 420ms for editor sidebar collapse.
+- **Easing**: `cubic-bezier(0.4, 0, 0.2, 1)` (Material-style).
+- **Card lift**: translateY(-2px) + shadow grow on hover, single transition.