@aexol/spectral 0.7.0 → 0.7.1

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

@@ -0,0 +1,137 @@
+/* ─────────────────────────────────────────────────────────────────────────
+ * design-systems/arc/tokens.css
+ *
+ * Structured token bindings for "Design System Inspired by Arc Browser".
+ * Frosted glass over a peach-coral gradient: editorial warmth, squircle-
+ * soft geometry, sidebar-first calm. The browser that browses for you.
+ *
+ * Key brand decisions encoded here:
+ *   - Warm peach-cream canvas (#fdf3ec) — never pure white, always tinted
+ *   - Bright frosted-pane white (#ffffff) as the opaque approximation of
+ *     Arc's translucent rgba(255,255,255,0.7) glass surfaces
+ *   - Arc Coral (#ff5f5f) is the named brand color; the Sunset gradient
+ *     (peach → coral) is composed inline by primary CTAs in components,
+ *     so --accent stays a single resolvable value
+ *   - Squircle-soft 8 / 12 / 16 px radii — every edge softened, never sharp
+ *   - Editorial Argent CF serif for marketing display, Inter for product
+ *   - Apple-style spring easing (0.32, 0.72, 0, 1) at 200/320 ms
+ *   - Single long-throw shadow (0 8px 32px rgba(0,0,0,0.08)) — no harsh
+ *     elevation; depth comes from the gradient backdrop, not box edges
+ * ─────────────────────────────────────────────────────────────────── */
+
+:root {
+  /* ─── Surface ─────────────────────────────────────────────────────
+   * Peach-cream canvas. Cards float above as bright white frosted
+   * panes; the warm tier holds hero meta panels and sidebar washes. */
+  --bg: #fdf3ec;             /* Peach Cream — the calm canvas, barely warm */
+  --surface: #ffffff;        /* Frosted Pane — opaque approximation of glass */
+  --surface-warm: #fff4ea;   /* Warm Inset — hero meta, sidebar pill background */
+
+  /* ─── Foreground ──────────────────────────────────────────────────
+   * Three ink tiers from DESIGN.md §2 — never pure black, always
+   * slightly warm so type sits inside the peach atmosphere. */
+  --fg: #1a1a1f;             /* Ink Primary — body text, headings */
+  --fg-2: #54545a;           /* Ink Secondary — sidebar tabs at rest, sub-headings */
+  --muted: #8c8c93;          /* Ink Muted — captions, URL bar, metadata */
+  --meta: var(--muted);      /* alias — same muted tier suffices for metadata */
+
+  /* ─── Border ──────────────────────────────────────────────────────
+   * Borders are rare in Arc — DESIGN.md prefers tinted background
+   * washes. When present, they're hairline-thin and warm-toned. */
+  --border: #ece5db;         /* Warm hairline — card edge over peach cream */
+  --border-soft: #f6f0e8;    /* Softer inner separator — barely visible row line */
+
+  /* ─── Accent ──────────────────────────────────────────────────────
+   * Arc Coral — the marketing brand color used on arc.net. Components
+   * compose the Sunset gradient (peach #ff7e5f → coral #feb47b) inline
+   * for primary CTAs; --accent itself stays a single resolvable color
+   * so color-mix derivations work everywhere. */
+  --accent: #ff5f5f;
+  --accent-on: #ffffff;
+  --accent-hover: color-mix(in oklab, var(--accent), black 8%);
+  --accent-active: color-mix(in oklab, var(--accent), black 14%);
+
+  /* ─── Semantic ────────────────────────────────────────────────────
+   * DESIGN.md §2 semantic palette — mid-saturated to harmonize with
+   * the warm atmosphere, not clinical Tailwind reds. */
+  --success: #48bb78;
+  --warn: #f6ad55;
+  --danger: #f56565;
+
+  /* ─── Typography ──────────────────────────────────────────────────
+   * Inter for product chrome; Argent CF (editorial display serif)
+   * only for marketing — when Arc speaks publicly, it speaks in serif.
+   * Berkeley Mono for code, URL bar, devtools. */
+  --font-display: "Argent CF", "Source Serif Pro", Georgia, serif;
+  --font-body: "Inter", system-ui, -apple-system, BlinkMacSystemFont, sans-serif;
+  --font-mono: "Berkeley Mono", ui-monospace, Menlo, Consolas, monospace;
+
+  /* Type scale — DESIGN.md §3. 72px hero, 40px section, 32px h1,
+   * 22px h2, 18px featured body, 15px body, 13px tab/code, 12px caption.
+   * Tabs render small (13px) so a long sidebar of 30+ tabs stays scannable. */
+  --text-xs: 12px;           /* Caption — URL bar protocol, metadata */
+  --text-sm: 13px;           /* Tab Title / Code */
+  --text-base: 15px;         /* Body — settings prose, tooltips */
+  --text-lg: 18px;           /* Featured body — intro paragraphs */
+  --text-xl: 22px;           /* Page H2 — sub-section */
+  --text-2xl: 32px;          /* Page H1 — settings, command bar header */
+  --text-3xl: 40px;          /* Section Heading — Argent CF marketing */
+  --text-4xl: 72px;          /* Marketing Hero — Argent CF editorial display */
+
+  --leading-body: 1.55;      /* Generous body line-height — long-form reading */
+  --leading-tight: 1.05;     /* Hero line-height — Argent CF squeezed tight */
+  --tracking-display: -0.03em; /* ≈ -2.16px at 72px — editorial density */
+
+  /* ─── Spacing ─────────────────────────────────────────────────────
+   * 4px base. Pane internal padding lands on space-6 (24px) per
+   * DESIGN.md §5. */
+  --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 — generous editorial pacing on marketing pages. */
+  --section-y-desktop: 96px;
+  --section-y-tablet: 64px;
+  --section-y-phone: 48px;
+
+  /* ─── Radius ──────────────────────────────────────────────────────
+   * Squircle-soft: 8px on tabs/chips, 12px on buttons & command bar,
+   * 16px on cards/panes, 9999px on space pills. Every edge softened. */
+  --radius-sm: 8px;          /* Tabs / chips */
+  --radius-md: 12px;         /* Buttons / command bar input */
+  --radius-lg: 16px;         /* Cards / panes */
+  --radius-pill: 9999px;     /* Spaces, bookmarks folder pills */
+
+  /* ─── Elevation ───────────────────────────────────────────────────
+   * Single long-throw soft shadow — DESIGN.md §1 calls out this exact
+   * value as the signature card lift over the gradient backdrop. */
+  --elev-flat: none;
+  --elev-ring: 0 0 0 1px var(--border);
+  --elev-raised: 0 8px 32px rgba(0, 0, 0, 0.08);
+
+  /* ─── Focus ring ──────────────────────────────────────────────────
+   * 4px coral halo at 20% alpha — DESIGN.md §4 specifies this exact
+   * focus treatment for the command bar input. Wider and softer than
+   * the schema default, in keeping with Arc's frosted-glass language. */
+  --focus-ring: 0 0 0 4px color-mix(in oklab, var(--accent), transparent 80%);
+
+  /* ─── Motion ──────────────────────────────────────────────────────
+   * Apple-style spring curve from DESIGN.md §6. 200ms for hover,
+   * 320ms for tab create/close — Arc's motion is spring, not bounce. */
+  --motion-fast: 200ms;
+  --motion-base: 320ms;
+  --ease-standard: cubic-bezier(0.32, 0.72, 0, 1);
+
+  /* ─── Layout ──────────────────────────────────────────────────────
+   * 1200px max — wide enough for sidebar + content but never enterprise-
+   * dense. Generous gutters echo the 24px pane padding. */
+  --container-max: 1200px;
+  --container-gutter-desktop: 32px;
+  --container-gutter-tablet: 24px;
+  --container-gutter-phone: 16px;
+}

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

@@ -0,0 +1,71 @@
+# Design System Inspired by Artistic
+
+> Category: Creative & Artistic
+> High-contrast, expressive style with creative typography and bold color choices for visually striking interfaces.
+
+## 1. Visual Theme & Atmosphere
+
+High-contrast, expressive style with creative typography and bold color choices for visually striking interfaces.
+
+- **Visual style:** high-contrast, artistic
+- **Color stance:** primary, neutral, success, warning, danger
+- **Design intent:** Keep outputs recognizable to this style family while preserving usability and readability.
+
+## 2. Color
+
+- **Primary:** `#3B82F6` — Token from style foundations.
+- **Secondary:** `#8B5CF6` — Token from style foundations.
+- **Success:** `#16A34A` — Token from style foundations.
+- **Warning:** `#D97706` — Token from style foundations.
+- **Danger:** `#DC2626` — Token from style foundations.
+- **Surface:** `#FFFFFF` — Token from style foundations.
+- **Text:** `#111827` — Token from style foundations.
+- **Neutral:** `#FFFFFF` — Derived from the surface token for official format compatibility.
+
+- Favor Primary (#3B82F6) for CTA emphasis.
+- Use Surface (#FFFFFF) for large backgrounds and cards.
+- Keep body copy on Text (#111827) for legibility.
+
+## 3. Typography
+
+- **Scale:** 12/14/16/18/24/30/36
+- **Families:** primary=Limelight, display=Limelight, mono=JetBrains Mono
+- **Weights:** 100, 200, 300, 400, 500, 600, 700, 800, 900
+- Headings should carry the style personality; body text should optimize scanability and contrast.
+
+## 4. Spacing & Grid
+
+- **Spacing scale:** 4/8/12/16/24/32
+- Keep vertical rhythm consistent across sections and components.
+- Align columns and modules to a predictable grid; avoid ad-hoc offsets.
+
+## 5. Layout & Composition
+
+- Prefer clear content blocks with consistent internal padding.
+- Keep hierarchy obvious: headline → support text → primary action.
+- Use whitespace to separate concerns before adding borders or shadows.
+
+## 6. Components
+
+- Buttons: primary action uses `#3B82F6`; secondary actions stay neutral.
+- Inputs: strong focus-visible states, clear labels, and predictable error messaging.
+- Cards/sections: use consistent radii, spacing, and elevation strategy across the page.
+
+## 7. Motion & Interaction
+
+- Use subtle transitions that emphasize Primary (#3B82F6) as the interaction signal.
+- Default to short, purposeful transitions (150–250ms) with stable easing.
+- Ensure hover, focus-visible, active, disabled, and loading states are explicit.
+
+## 8. Voice & Brand
+
+- Tone should reflect the visual style: concise, confident, and product-specific.
+- Keep microcopy action-oriented and avoid generic filler language.
+- Preserve the style identity in headlines while keeping UI labels literal and clear.
+
+## 9. Anti-patterns
+
+- Do not introduce off-palette colors when an existing token can solve the problem.
+- Do not flatten hierarchy by using the same type size/weight for all text.
+- Do not add decorative effects that reduce readability or accessibility.
+- Do not mix unrelated visual metaphors in the same interface.

package/dist/designer/data/systems/artistic/components.html

@@ -0,0 +1,136 @@
+<!doctype html>
+<html lang="en">
+  <head>
+    <meta charset="utf-8" />
+    <meta name="viewport" content="width=device-width, initial-scale=1" />
+    <title>Artistic - reference components</title>
+    <meta name="description" content="Reference fixture for design-systems/artistic: artistic gallery language with warm paper, rich accent, and expressive composition." />
+    <style>
+      :root {
+        --bg: #fbf6ee;
+        --surface: #fffdf8;
+        --surface-warm: #f1e3cf;
+        --fg: #201914;
+        --fg-2: #4c4037;
+        --muted: #7a6d63;
+        --meta: #9b5b32;
+        --border: #ded2c3;
+        --border-soft: #eee4d7;
+        --accent: #9b5b32;
+        --accent-on: #ffffff;
+        --accent-hover: color-mix(in oklab, var(--accent), black 8%);
+        --accent-active: color-mix(in oklab, var(--accent), black 14%);
+        --success: #4f8a4f;
+        --warn: #c9822f;
+        --danger: #b33a3a;
+        --font-display: Georgia, "Times New Roman", serif;
+        --font-body: Inter, system-ui, sans-serif;
+        --font-mono: "SF Mono", ui-monospace, Menlo, monospace;
+        --text-xs: 12px;
+        --text-sm: 14px;
+        --text-base: 17px;
+        --text-lg: 20px;
+        --text-xl: 28px;
+        --text-2xl: 42px;
+        --text-3xl: 64px;
+        --text-4xl: 88px;
+        --leading-body: 1.62;
+        --leading-tight: 1;
+        --tracking-display: -0.025em;
+        --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-y-desktop: 112px;
+        --section-y-tablet: 80px;
+        --section-y-phone: 56px;
+        --radius-sm: 10px;
+        --radius-md: 16px;
+        --radius-lg: 24px;
+        --radius-pill: 9999px;
+        --elev-flat: none;
+        --elev-ring: 0 0 0 1px var(--border);
+        --elev-raised: 0 20px 52px rgba(32, 25, 20, 0.12);
+        --focus-ring: 0 0 0 4px rgba(155, 91, 50, 0.24);
+        --motion-fast: 150ms;
+        --motion-base: 240ms;
+        --ease-standard: cubic-bezier(0.2, 0, 0, 1);
+        --container-max: 1180px;
+        --container-gutter-desktop: 36px;
+        --container-gutter-tablet: 24px;
+        --container-gutter-phone: 16px;
+      }
+
+      *, *::before, *::after { box-sizing: border-box; }
+      html, body { margin: 0; padding: 0; }
+      body { min-height: 100vh; background: var(--bg); color: var(--fg); font-family: var(--font-body); font-size: var(--text-base); line-height: var(--leading-body); -webkit-font-smoothing: antialiased; }
+      .page { min-height: 100vh; background: linear-gradient(135deg, #fbf6ee 0%, #fffdf8 58%, #f1e3cf 100%); }
+      .container { max-width: var(--container-max); margin-inline: auto; padding-inline: var(--container-gutter-desktop); }
+      section { padding-block: var(--section-y-desktop); }
+      @media (max-width: 1023px) { .container { padding-inline: var(--container-gutter-tablet); } section { padding-block: var(--section-y-tablet); } }
+      @media (max-width: 639px) { .container { padding-inline: var(--container-gutter-phone); } section { padding-block: var(--section-y-phone); } }
+      h1, h2, h3, p { margin: 0; }
+      h1, h2, h3 { font-family: var(--font-display); line-height: var(--leading-tight); letter-spacing: var(--tracking-display); }
+      h1 { max-width: 840px; font-size: var(--text-4xl); font-weight: 760; }
+      h2 { font-size: var(--text-3xl); font-weight: 700; }
+      h3 { font-size: var(--text-xl); font-weight: 700; }
+      .eyebrow { color: var(--meta); font-family: var(--font-mono); font-size: var(--text-xs); font-weight: 700; letter-spacing: 0.12em; text-transform: uppercase; }
+      .lead { max-width: 640px; color: var(--fg-2); font-size: var(--text-lg); }
+      .hero { display: grid; grid-template-columns: minmax(0, 1.1fr) minmax(320px, 0.9fr); gap: var(--space-8); align-items: center; }
+      .stack > * + * { margin-block-start: var(--space-4); }
+      .actions { display: flex; flex-wrap: wrap; gap: var(--space-3); margin-block-start: var(--space-6); }
+      .btn { display: inline-flex; align-items: center; justify-content: center; min-height: 44px; padding: 0 var(--space-5); border: 1px solid transparent; border-radius: var(--radius-md); font: 700 var(--text-sm) / 1 var(--font-body); color: inherit; text-decoration: none; cursor: pointer; transition: background-color var(--motion-fast) var(--ease-standard), border-color var(--motion-fast) var(--ease-standard), color var(--motion-fast) var(--ease-standard), transform var(--motion-fast) var(--ease-standard), box-shadow var(--motion-fast) var(--ease-standard); }
+      .btn:focus-visible { outline: none; box-shadow: var(--focus-ring); }
+      .btn-primary { background: var(--accent); color: var(--accent-on); }
+      .btn-primary:hover { background: var(--accent-hover); transform: translateY(-1px); }
+      .btn-secondary { background: var(--surface); color: var(--fg); border-color: var(--border); box-shadow: var(--elev-ring); }
+      .btn-secondary:hover { border-color: var(--accent); color: var(--accent); }
+      .panel { background: color-mix(in oklab, var(--surface), transparent 4%); border: 1px solid var(--border); border-radius: var(--radius-lg); box-shadow: var(--elev-raised); overflow: hidden; }
+      .panel-head { display: flex; justify-content: space-between; align-items: center; gap: var(--space-4); padding: var(--space-5); border-bottom: 1px solid var(--border-soft); }
+      .status { display: inline-flex; align-items: center; gap: var(--space-2); color: var(--meta); font: 700 var(--text-xs) / 1 var(--font-mono); text-transform: uppercase; letter-spacing: 0.08em; }
+      .status::before { width: 8px; height: 8px; border-radius: var(--radius-pill); background: var(--success); content: ""; }
+      .metric-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); border-bottom: 1px solid var(--border-soft); }
+      .metric { padding: var(--space-5); border-right: 1px solid var(--border-soft); }
+      .metric:last-child { border-right: 0; }
+      .metric strong { display: block; font-family: var(--font-display); font-size: var(--text-2xl); line-height: var(--leading-tight); }
+      .metric span { color: var(--muted); font-size: var(--text-sm); }
+      .card-row { display: grid; grid-template-columns: 1fr 1fr; gap: var(--space-4); padding: var(--space-5); }
+      .mini-card { min-height: 148px; padding: var(--space-5); border: 1px solid var(--border-soft); border-radius: var(--radius-md); background: var(--surface-warm); }
+      .mini-card p, .tile p { color: var(--muted); font-size: var(--text-sm); margin-block-start: var(--space-3); }
+      .swatches { display: flex; gap: var(--space-2); margin-block-start: var(--space-4); }
+      .swatch { width: 32px; height: 32px; border-radius: var(--radius-sm); border: 1px solid var(--border); }
+      .swatch.accent { background: var(--accent); } .swatch.surface { background: var(--surface); } .swatch.warm { background: var(--surface-warm); } .swatch.fg { background: var(--fg); }
+      .field { display: grid; gap: var(--space-2); margin-block-start: var(--space-5); }
+      label { color: var(--fg-2); font-size: var(--text-sm); font-weight: 700; }
+      input { width: 100%; min-height: 46px; padding: 0 var(--space-4); border: 1px solid var(--border); border-radius: var(--radius-sm); background: var(--surface); color: var(--fg); font: inherit; }
+      input:focus { outline: none; box-shadow: var(--focus-ring); border-color: var(--accent); }
+      .lower { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--space-4); }
+      .tile { padding: var(--space-5); border: 1px solid var(--border); border-radius: var(--radius-md); background: var(--surface); }
+      @media (max-width: 860px) { .hero, .lower { grid-template-columns: 1fr; } .metric-grid, .card-row { grid-template-columns: 1fr; } .metric { border-right: 0; border-bottom: 1px solid var(--border-soft); } .metric:last-child { border-bottom: 0; } }
+    </style>
+  </head>
+  <body>
+    <main class="page">
+      <section>
+        <div class="container hero">
+          <div class="stack">
+            <p class="eyebrow">Artistic design system</p>
+            <h1>Studio composition system</h1>
+            <p class="lead">Expressive portfolio surfaces, painterly rhythm, and gallery-forward component cards.</p>
+            <div class="actions" aria-label="Reference actions"><a class="btn btn-primary" href="#">Primary action</a><a class="btn btn-secondary" href="#">Secondary action</a></div>
+          </div>
+          <article class="panel" aria-label="Artistic component preview">
+            <div class="panel-head"><div><p class="eyebrow">Live module</p><h3>Reference component</h3></div><span class="status">online</span></div>
+            <div class="metric-grid"><div class="metric"><strong>98%</strong><span>Signal quality</span></div><div class="metric"><strong>24</strong><span>Active flows</span></div><div class="metric"><strong>3.2s</strong><span>Response time</span></div></div>
+            <div class="card-row"><div class="mini-card"><h3>Palette</h3><p>artistic gallery language with warm paper, rich accent, and expressive composition.</p><div class="swatches" aria-label="Token swatches"><span class="swatch accent"></span><span class="swatch surface"></span><span class="swatch warm"></span><span class="swatch fg"></span></div></div><div class="mini-card"><h3>Control</h3><p>Focus, hover, and status states share the same system signal.</p><div class="field"><label for="artistic-input">Reference input</label><input id="artistic-input" value="Artistic system token" /></div></div></div>
+          </article>
+        </div>
+      </section>
+      <section><div class="container lower"><article class="tile"><p class="eyebrow">Typography</p><h2>Display rhythm</h2><p>Headlines use the display stack with the declared scale and leading.</p></article><article class="tile"><p class="eyebrow">Surface</p><h2>Layer system</h2><p>Cards, warm panels, borders, and raised states resolve through shared tokens.</p></article><article class="tile"><p class="eyebrow">Interaction</p><h2>Motion states</h2><p>Buttons, inputs, and panels use system-specific focus rings and easing.</p></article></div></section>
+    </main>
+  </body>
+</html>

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

@@ -0,0 +1,63 @@
+/* design-systems/artistic/tokens.css
+ * Structured token bindings for Artistic.
+ * artistic gallery language with warm paper, rich accent, and expressive composition.
+ */
+
+:root {
+  --bg: #fbf6ee;
+  --surface: #fffdf8;
+  --surface-warm: #f1e3cf;
+  --fg: #201914;
+  --fg-2: #4c4037;
+  --muted: #7a6d63;
+  --meta: #9b5b32;
+  --border: #ded2c3;
+  --border-soft: #eee4d7;
+  --accent: #9b5b32;
+  --accent-on: #ffffff;
+  --accent-hover: color-mix(in oklab, var(--accent), black 8%);
+  --accent-active: color-mix(in oklab, var(--accent), black 14%);
+  --success: #4f8a4f;
+  --warn: #c9822f;
+  --danger: #b33a3a;
+  --font-display: Georgia, "Times New Roman", serif;
+  --font-body: Inter, system-ui, sans-serif;
+  --font-mono: "SF Mono", ui-monospace, Menlo, monospace;
+  --text-xs: 12px;
+  --text-sm: 14px;
+  --text-base: 17px;
+  --text-lg: 20px;
+  --text-xl: 28px;
+  --text-2xl: 42px;
+  --text-3xl: 64px;
+  --text-4xl: 88px;
+  --leading-body: 1.62;
+  --leading-tight: 1;
+  --tracking-display: -0.025em;
+  --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-y-desktop: 112px;
+  --section-y-tablet: 80px;
+  --section-y-phone: 56px;
+  --radius-sm: 10px;
+  --radius-md: 16px;
+  --radius-lg: 24px;
+  --radius-pill: 9999px;
+  --elev-flat: none;
+  --elev-ring: 0 0 0 1px var(--border);
+  --elev-raised: 0 20px 52px rgba(32, 25, 20, 0.12);
+  --focus-ring: 0 0 0 4px rgba(155, 91, 50, 0.24);
+  --motion-fast: 150ms;
+  --motion-base: 240ms;
+  --ease-standard: cubic-bezier(0.2, 0, 0, 1);
+  --container-max: 1180px;
+  --container-gutter-desktop: 36px;
+  --container-gutter-tablet: 24px;
+  --container-gutter-phone: 16px;
+}