@aexol/spectral 0.7.0 → 0.7.1

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

@@ -0,0 +1,191 @@
+/* ─────────────────────────────────────────────────────────────────────────
+ * design-systems/webflow/tokens.css
+ *
+ * Structured token bindings for "Design System Inspired by Webflow".
+ * The visual web builder: a white marketing-grade canvas, near-black
+ * ink, the signature Webflow Blue (#146ef5), conservative 4px corners,
+ * and a five-layer cascading shadow that gives every card a built-not-
+ * floating quality.
+ *
+ * Key brand decisions encoded here:
+ *   - White canvas with near-black (#080808) text — DESIGN.md §1 / §9.
+ *     The marketing site does NOT shift surfaces warm; section variation
+ *     comes from borders + the 5-layer shadow stack, not from tinting.
+ *   - Webflow Blue (#146ef5) as the single accent, with the documented
+ *     darker Button Hover Blue (#0055d4) as `--accent-hover` (not a
+ *     formulaic black-mix — Webflow's docs specify the hover value).
+ *   - Four-tier foreground ramp: #080808 → #363636 → #5a5a5a → #ababab,
+ *     matching the Near Black / Gray 700 / Mid Gray / Gray 300 scale
+ *     from DESIGN.md §2 so cross-brand components targeting --fg-2 and
+ *     --meta resolve to Webflow's actual gray ramp.
+ *   - Conservative radius (4px–8px). DESIGN.md §7 forbids rounding
+ *     beyond 8px for functional elements — sharp, precise, tool-like.
+ *   - Five-layer cascading shadow on --elev-raised, reproduced verbatim
+ *     from DESIGN.md §2 / §6: the stack is the depth signature and
+ *     should never be flattened to a single blur.
+ *   - WF Visual Sans Variable display + body, Inconsolata for code —
+ *     the dual identity DESIGN.md §3 calls out (design + code).
+ *   - Webflow Green / Yellow / Red bound to semantic tokens (DESIGN.md
+ *     §2 Secondary Accents) so semantic state stays inside the brand
+ *     palette rather than borrowing the schema's generic hues.
+ *
+ * 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 (no warm tier) ───────────────────────────────────────
+   * Webflow's marketing canvas is pure white. Sections do not shift
+   * background color — depth comes from the 5-layer shadow stack and
+   * 1px borders, not from tinted surfaces. `--surface-warm` aliases
+   * to surface because the brand has no warmer tier. */
+  --bg: #ffffff;                      /* White — the page canvas */
+  --surface: #ffffff;                 /* White — cards stay flush with the canvas */
+  --surface-warm: var(--surface);     /* alias — Webflow has no warm tier */
+
+  /* ─── Foreground ramp (4 levels) ──────────────────────────────────
+   * Near Black → Gray 700 → Mid Gray → Gray 300, the four documented
+   * text tiers from DESIGN.md §2 (headings / body / captions / muted).
+   * `#080808` instead of `#000000` matters — DESIGN.md §1 / §9 names
+   * the near-black explicitly. The four tiers are independently bound
+   * (not aliased) because Webflow's marketing site genuinely uses all
+   * four: H1 black, body Gray 700, captions Mid Gray, placeholder /
+   * disabled Gray 300. */
+  --fg: #080808;                      /* Near Black — primary text */
+  --fg-2: #363636;                    /* Gray 700 — body description */
+  --muted: #5a5a5a;                   /* Mid Gray — captions, link text */
+  --meta: #ababab;                    /* Gray 300 — placeholder, disabled */
+
+  /* ─── Border (2 levels) ──────────────────────────────────────────
+   * Borders are visible and structural in Webflow — `1px solid #d8d8d8`
+   * is the documented card edge (DESIGN.md §4). `--border-soft` drops
+   * to a paler tint for inner row separators that must not visually
+   * compete with the card outline. */
+  --border: #d8d8d8;                  /* Border Gray — card / divider edge */
+  --border-soft: #ebebeb;             /* paler tint — inner row separator */
+
+  /* ─── Accent ─────────────────────────────────────────────────────
+   * Webflow Blue (#146ef5): primary CTA, link, focus ring, badge tint.
+   * `--accent-hover` is the documented Button Hover Blue (#0055d4),
+   * NOT a formulaic black-mix — Webflow's brand spec names the darker
+   * value, so we honor it verbatim instead of computing one. Hard cap
+   * of ≤2 visible uses per screen (schema lint). */
+  --accent: #146ef5;                  /* Webflow Blue — primary brand signal */
+  --accent-on: #ffffff;               /* white label on saturated blue */
+  --accent-hover: #0055d4;            /* Button Hover Blue — documented value */
+  --accent-active: color-mix(in oklab, var(--accent), black 14%);
+
+  /* ─── Semantic ───────────────────────────────────────────────────
+   * Bound to Webflow's secondary palette (DESIGN.md §2) so state
+   * colors live inside the brand instead of borrowing the schema's
+   * generic semantic hues. Webflow Green / Yellow / Red are vivid
+   * enough to read as state without falling out of the system. */
+  --success: #00d722;                 /* Webflow Green */
+  --warn: #ffae13;                    /* Webflow Yellow */
+  --danger: #ee1d36;                  /* Webflow Red */
+
+  /* ─── Typography — fonts ─────────────────────────────────────────
+   * WF Visual Sans Variable is Webflow's custom variable face used at
+   * weight 500–600 throughout. Inter/Arial fall back so artifacts
+   * render legibly when the brand face is not loaded. Inconsolata is
+   * the companion monospace from DESIGN.md §3 — the "design + code"
+   * dual identity is part of the brand voice. */
+  --font-display: "WF Visual Sans Variable", "Inter", Arial, system-ui, sans-serif;
+  --font-body: "WF Visual Sans Variable", "Inter", Arial, system-ui, sans-serif;
+  --font-mono: "Inconsolata", ui-monospace, "SF Mono", Menlo, Monaco, Consolas, monospace;
+
+  /* Type scale (px) — DESIGN.md §3 hierarchy table. Display hero is
+   * 80px (the big marketing-page number), section heading is 56px,
+   * sub-heading 32px, feature 24px, body 20px, body-standard 16px,
+   * caption 14px. The schema's 8 tiers map directly onto Webflow's
+   * documented sizes. */
+  --text-xs: 12px;                    /* badge uppercase / micro */
+  --text-sm: 14px;                    /* caption */
+  --text-base: 16px;                  /* body standard / button */
+  --text-lg: 20px;                    /* body */
+  --text-xl: 24px;                    /* feature title */
+  --text-2xl: 32px;                   /* sub-heading */
+  --text-3xl: 56px;                   /* section heading */
+  --text-4xl: 80px;                   /* display hero */
+
+  /* `--leading-tight` is 1.04 (DESIGN.md §3 display + section line-
+   * height). `--leading-body` is 1.6 (the documented body-standard
+   * ratio). `--tracking-display` is `-0.01em`, the em-relative form
+   * of Webflow's `-0.8px at 80px` display tracking — scales correctly
+   * with size. */
+  --leading-body: 1.6;
+  --leading-tight: 1.04;
+  --tracking-display: -0.01em;
+
+  /* ─── Spacing ────────────────────────────────────────────────────
+   * 4px-grid base. DESIGN.md §5's fractional scale (2.4 / 3.2 / 5.6 /
+   * 7.2 / 9.6) is component-internal micro-padding and is inlined
+   * per-component; the 4/8/12/16/20/24/32/48 tier carries the
+   * structural rhythm. */
+  --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 — Webflow's marketing sections breathe but stay
+   * tighter than a gallery: 96px desktop, 64px tablet, 48px phone
+   * (matching the documented 992 / 768 / 479 breakpoints in §8). */
+  --section-y-desktop: 96px;
+  --section-y-tablet: 64px;
+  --section-y-phone: 48px;
+
+  /* ─── Radius ─────────────────────────────────────────────────────
+   * DESIGN.md §5: 2 / 4 / 8 / 50%. The "Do" list (§7) is explicit:
+   * 4px is the default, do NOT round beyond 8px for functional
+   * elements. We bind sm/md to 4px (buttons, inputs, cards), lg to
+   * 8px (featured containers), pill to 9999px (badges, avatars). */
+  --radius-sm: 4px;                   /* buttons, inputs, chips */
+  --radius-md: 4px;                   /* cards, modals — same conservative 4px */
+  --radius-lg: 8px;                   /* featured containers — the soft cap */
+  --radius-pill: 9999px;              /* badges, avatars */
+
+  /* ─── Elevation (3 levels, raised = 5-layer cascade) ─────────────
+   * The 5-layer shadow stack from DESIGN.md §2 / §6 is the depth
+   * signature. The outer layer at 84px is a "presence" cushion (alpha
+   * 0), the inner 3px layer is the contact shadow, and three middle
+   * layers create the smooth falloff. Never flatten this stack to a
+   * single blur — the cascade is what makes Webflow cards feel
+   * physically built rather than digitally floating. */
+  --elev-flat: none;
+  --elev-ring: 0 0 0 1px var(--border);
+  --elev-raised:
+    0px 84px 24px rgba(0, 0, 0, 0),
+    0px 54px 22px rgba(0, 0, 0, 0.01),
+    0px 30px 18px rgba(0, 0, 0, 0.04),
+    0px 13px 13px rgba(0, 0, 0, 0.08),
+    0px 3px 7px rgba(0, 0, 0, 0.09);
+
+  /* ─── Focus ring ─────────────────────────────────────────────────
+   * Webflow Blue at 30% — the accent is already the brand's focus
+   * color in product, so the schema default (alpha glow of accent)
+   * matches without override. */
+  --focus-ring: 0 0 0 3px color-mix(in oklab, var(--accent), transparent 70%);
+
+  /* ─── Motion ─────────────────────────────────────────────────────
+   * 150 / 200ms with standard easing. Webflow's marketing site uses a
+   * 6px translate hover on buttons (DESIGN.md §4) — that micro-move
+   * runs at --motion-fast. */
+  --motion-fast: 150ms;
+  --motion-base: 200ms;
+  --ease-standard: cubic-bezier(0.2, 0, 0, 1);
+
+  /* ─── Layout ─────────────────────────────────────────────────────
+   * 1200px max content width — Webflow's marketing pages cap around
+   * this width to keep line lengths readable. Breakpoints from
+   * DESIGN.md §8 (992 / 768 / 479) gate the gutter scale. */
+  --container-max: 1200px;
+  --container-gutter-desktop: 24px;
+  --container-gutter-tablet: 16px;
+  --container-gutter-phone: 12px;
+}

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

@@ -0,0 +1,302 @@
+# WeChat Design System
+
+> Category: Social & Messaging
+> Brand visual language for WeChat Mini Programs, official accounts, and open ecosystem extensions.
+
+## Brand Identity
+
+WeChat's identity is built on simplicity, cleanness, and trust — reflecting its role as a super-app that connects people, services, and businesses.
+
+---
+
+## Color Palette
+
+### Brand Colors
+
+| Token | Hex | Usage |
+|---|----|----|
+| `--wechat-green` | `#07C160` | Primary brand, CTA buttons, active states |
+| `--wechat-green-light` | `#10B160` | Hover state for primary actions |
+| `--wechat-green-dark` | `#059050` | Pressed/active state |
+
+### Chat Bubble Colors
+
+| Token | Hex | Usage |
+|---|----|----|
+| `--wechat-bubble-self` | `#95EC69` | Outgoing message bubbles |
+| `--wechat-bubble-other` | `#FFFFFF` | Incoming message bubbles |
+| `--wechat-bubble-text` | `#1A1A1A` | Primary text in bubbles |
+
+### UI Neutrals
+
+| Token | Hex | Usage |
+|---|----|----|
+| `--wechat-bg` | `#EDEDED` | Page/app background |
+| `--wechat-surface` | `#F7F7F7` | Card, modal surfaces |
+| `--wechat-border` | `#E0E0E0` | Dividers, borders |
+| `--wechat-ink` | `#1A1A1A` | Primary text |
+| `--wechat-muted` | `#888888` | Secondary text, timestamps |
+
+### Functional Colors
+
+| Token | Hex | Usage |
+|---|----|----|
+| `--wechat-red` | `#FA5151` | Errors, destructive actions |
+| `--wechat-orange` | `#FAB702` | Warnings |
+| `--wechat-blue` | `#576B95` | Links, info states |
+
+---
+
+## Typography
+
+### Font Stack
+
+```
+font-family: -apple-system, BlinkMacSystemFont, "PingFang SC", "Helvetica Neue", Helvetica, Arial, sans-serif;
+```
+
+### Type Scale
+
+| Role | Size | Weight | Line Height |
+|---|---|---|---|
+| Page Title | 18px | 600 | 1.3 |
+| Section Header | 16px | 600 | 1.4 |
+| Body Text | 15px | 400 | 1.6 |
+| Secondary Text | 13px | 400 | 1.5 |
+| Caption/Timestamp | 11px | 400 | 1.4 |
+| Button Label | 16px | 500 | 1.0 |
+
+---
+
+## Spacing System
+
+4px base unit.
+
+| Token | Value |
+|---|-----|
+| `--space-xs` | 4px |
+| `--space-sm` | 8px |
+| `--space-md` | 12px |
+| `--space-lg` | 16px |
+| `--space-xl` | 24px |
+| `--space-2xl` | 32px |
+
+### Border Radius
+
+| Token | Value |
+|---|-----|
+| `--radius-sm` | 4px |
+| `--radius-md` | 8px |
+| `--radius-lg` | 16px |
+| `--radius-bubble` | 16px (with directional corner clip) |
+| `--radius-full` | 9999px (avatars, pills) |
+
+---
+
+## Components
+
+### Chat Bubble
+
+```css
+.wechat-bubble {
+  max-width: 70%;
+  padding: 10px 14px;
+  border-radius: var(--radius-bubble);
+  font-size: 15px;
+  line-height: 1.6;
+  position: relative;
+}
+
+.wechat-bubble.self {
+  background: var(--wechat-bubble-self);
+  color: var(--wechat-bubble-text);
+  border-top-right-radius: 4px;
+  margin-left: auto;
+}
+
+.wechat-bubble.other {
+  background: var(--wechat-bubble-other);
+  color: var(--wechat-bubble-text);
+  border-top-left-radius: 4px;
+  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.06);
+}
+```
+
+### Primary Button (Send / Confirm)
+
+```css
+.btn-wechat-primary {
+  background: var(--wechat-green);
+  color: #fff;
+  border: none;
+  border-radius: var(--radius-md);
+  padding: 12px 32px;
+  font-size: 16px;
+  font-weight: 500;
+  cursor: pointer;
+  transition: background 0.15s;
+}
+
+.btn-wechat-primary:hover {
+  background: var(--wechat-green-light);
+}
+
+.btn-wechat-primary:active {
+  background: var(--wechat-green-dark);
+}
+```
+
+### Tab Bar
+
+```css
+.tab-bar {
+  display: flex;
+  background: var(--wechat-surface);
+  border-top: 1px solid var(--wechat-border);
+  padding: 8px 0 calc(8px + env(safe-area-inset-bottom));
+}
+
+.tab-bar-item {
+  flex: 1;
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  gap: 4px;
+  color: var(--wechat-muted);
+  font-size: 10px;
+  cursor: pointer;
+  transition: color 0.15s;
+}
+
+.tab-bar-item.active {
+  color: var(--wechat-green);
+}
+
+.tab-bar-item svg {
+  width: 24px;
+  height: 24px;
+}
+```
+
+### Message Input Bar
+
+```css
+.input-bar {
+  display: flex;
+  align-items: flex-end;
+  gap: 8px;
+  padding: 10px 12px calc(10px + env(safe-area-inset-bottom));
+  background: var(--wechat-surface);
+  border-top: 1px solid var(--wechat-border);
+}
+
+.input-bar textarea {
+  flex: 1;
+  min-height: 36px;
+  max-height: 100px;
+  padding: 8px 12px;
+  background: var(--wechat-bg);
+  border: 1px solid var(--wechat-border);
+  border-radius: var(--radius-lg);
+  font-size: 15px;
+  line-height: 1.5;
+  resize: none;
+  outline: none;
+}
+
+.input-bar textarea:focus {
+  border-color: var(--wechat-green);
+}
+```
+
+### Avatar
+
+```css
+.avatar {
+  width: 40px;
+  height: 40px;
+  border-radius: var(--radius-full);
+  object-fit: cover;
+  background: var(--wechat-border);
+}
+
+.avatar.sm { width: 32px; height: 32px; }
+.avatar.lg { width: 56px; height: 56px; }
+```
+
+### Timestamp Badge
+
+```css
+.timestamp {
+  display: inline-block;
+  padding: 4px 8px;
+  background: rgba(0, 0, 0, 0.08);
+  border-radius: var(--radius-sm);
+  font-size: 11px;
+  color: var(--wechat-muted);
+  text-align: center;
+}
+```
+
+---
+
+## Motion & Animation
+
+| Token | Value |
+|---|-----|
+| `--duration-instant` | 100ms |
+| `--duration-fast` | 200ms |
+| `--duration-normal` | 300ms |
+| `--ease-default` | cubic-bezier(0.25, 0.1, 0.25, 1) |
+
+Chat message entry: fade-in + slight slide up, 200ms.
+
+---
+
+## Dark Mode
+
+| Token | Light | Dark |
+|---|---|---|
+| `--wechat-bg` | `#EDEDED` | `#1A1A1A` |
+| `--wechat-surface` | `#F7F7F7` | `#2C2C2C` |
+| `--wechat-ink` | `#1A1A1A` | `#F7F7F7` |
+| `--wechat-bubble-self` | `#95EC69` | `#4CAF50` |
+| `--wechat-bubble-other` | `#FFFFFF` | `#2C2C2C` |
+
+---
+
+## Usage
+
+```css
+:root {
+  --wechat-green: #07C160;
+  --wechat-green-light: #10B160;
+  --wechat-green-dark: #059050;
+  --wechat-bubble-self: #95EC69;
+  --wechat-bubble-other: #FFFFFF;
+  --wechat-bubble-text: #1A1A1A;
+  --wechat-bg: #EDEDED;
+  --wechat-surface: #F7F7F7;
+  --wechat-border: #E0E0E0;
+  --wechat-ink: #1A1A1A;
+  --wechat-muted: #888888;
+  --wechat-red: #FA5151;
+  --wechat-orange: #FAB702;
+  --wechat-blue: #576B95;
+  --space-xs: 4px;
+  --space-sm: 8px;
+  --space-md: 12px;
+  --space-lg: 16px;
+  --space-xl: 24px;
+  --space-2xl: 32px;
+  --radius-sm: 4px;
+  --radius-md: 8px;
+  --radius-lg: 16px;
+  --radius-bubble: 16px;
+  --radius-full: 9999px;
+  --duration-instant: 100ms;
+  --duration-fast: 200ms;
+  --duration-normal: 300ms;
+  --ease-default: cubic-bezier(0.25, 0.1, 0.25, 1);
+}
+```