@1agh/maude 0.15.0

package/plugins/design/templates/design-system-inspiration/core/colors_and_type.css.tpl

@@ -0,0 +1,111 @@
+/*
+ * {{project_label}} — design tokens
+ *
+ * Authoritative token file. Every canvas in <designRoot>/ui/ links to this.
+ * Production code should consume the same values (compiled to TS/JS or kept as CSS vars).
+ *
+ * Contract:
+ * - OKLCH for accent + status colors (better gamut control than HSL/hex)
+ * - One accent family only (no --accent2)
+ * - Theme: {{theme_default}} (single-block) — duplicate for both-equal projects
+ * - Motion durations + easings + reduced-motion guard
+ * - 8-step type ladder, 4px-base spacing scale
+ */
+
+:root,
+.{{root_class}}[data-theme="{{theme_default}}"] {
+  /* ─── Surfaces (deepest → highest) ─────────────────────────────────── */
+  --bg-0: {{bg_0_oklch}};   /* page bg                    */
+  --bg-1: {{bg_1_oklch}};   /* card / panel bg            */
+  --bg-2: {{bg_2_oklch}};   /* nested panel / popover     */
+  --bg-3: {{bg_3_oklch}};   /* input bg / subtle row hover */
+  --bg-4: {{bg_4_oklch}};   /* hover / pressed state      */
+
+  /* ─── Borders ──────────────────────────────────────────────────────── */
+  --border-subtle:  oklch(from var(--bg-1) calc(l + 0.04) c h);
+  --border-default: oklch(from var(--bg-1) calc(l + 0.08) c h);
+  --border-strong:  oklch(from var(--bg-1) calc(l + 0.14) c h);
+
+  /* ─── Text ─────────────────────────────────────────────────────────── */
+  --fg-0: {{fg_0_oklch}};   /* primary text                */
+  --fg-1: {{fg_1_oklch}};   /* secondary text              */
+  --fg-2: {{fg_2_oklch}};   /* tertiary / muted            */
+  --fg-3: {{fg_3_oklch}};   /* disabled                    */
+
+  /* ─── Accent (ONE family only) ─────────────────────────────────────── */
+  --accent:        {{accent_oklch}};
+  --accent-hover:  oklch(from var(--accent) calc(l - 0.04) c h);
+  --accent-active: oklch(from var(--accent) calc(l - 0.08) c h);
+  --accent-fg:     {{accent_fg_oklch}};
+
+  /* ─── Status (only if "status" ∈ activeFamilies) ───────────────────── */
+  --status-success: oklch(70% 0.18 145);
+  --status-warn:    oklch(78% 0.16  85);
+  --status-error:   oklch(64% 0.21  25);
+  --status-info:    oklch(70% 0.13 230);
+
+  /* ─── Presence (only if "presence" ∈ activeFamilies) ───────────────── */
+  --presence-online:  var(--status-success);
+  --presence-away:    var(--status-warn);
+  --presence-offline: var(--fg-3);
+
+  /* ─── Shadows / elevation ──────────────────────────────────────────── */
+  --shadow-sm: 0 1px 2px oklch(0 0 0 / 0.20);
+  --shadow-md: 0 4px 12px oklch(0 0 0 / 0.25);
+  --shadow-lg: 0 12px 32px oklch(0 0 0 / 0.30);
+
+  /* ─── Radii ────────────────────────────────────────────────────────── */
+  --radius-xs: {{radius_xs}};
+  --radius-sm: {{radius_sm}};
+  --radius-md: {{radius_md}};
+  --radius-lg: {{radius_lg}};
+  --radius-xl: {{radius_xl}};
+  --radius-pill: 999px;
+
+  /* ─── Spacing (4px base) ───────────────────────────────────────────── */
+  --space-0:  0;
+  --space-1:  4px;
+  --space-2:  8px;
+  --space-3: 12px;
+  --space-4: 16px;
+  --space-5: 24px;
+  --space-6: 32px;
+  --space-7: 48px;
+  --space-8: 64px;
+
+  /* ─── Typography ───────────────────────────────────────────────────── */
+  --font-display: {{font_display}};
+  --font-body:    {{font_body}};
+  --font-mono:    {{font_mono}};
+
+  /* 8-step type scale */
+  --type-xs:   12px;  --lh-xs:   16px;
+  --type-sm:   13px;  --lh-sm:   18px;
+  --type-base: 14px;  --lh-base: 20px;
+  --type-md:   16px;  --lh-md:   22px;
+  --type-lg:   18px;  --lh-lg:   26px;
+  --type-xl:   22px;  --lh-xl:   30px;
+  --type-2xl:  28px;  --lh-2xl:  36px;
+  --type-3xl:  36px;  --lh-3xl:  44px;
+
+  /* ─── Motion ───────────────────────────────────────────────────────── */
+  --dur-flip:  {{dur_flip}};
+  --dur-panel: {{dur_panel}};
+  --dur-route: {{dur_route}};
+  --dur-soft:  {{dur_soft}};
+  --ease-out:    cubic-bezier(0.22, 1, 0.36, 1);
+  --ease-in-out: cubic-bezier(0.65, 0, 0.35, 1);
+
+  /* ─── Layout ───────────────────────────────────────────────────────── */
+  --layout-max-w: 1200px;
+  --layout-gutter: var(--space-4);
+}
+
+@media (prefers-reduced-motion: reduce) {
+  :root, .{{root_class}}[data-theme="{{theme_default}}"] {
+    --dur-flip:  1ms;
+    --dur-panel: 1ms;
+    --dur-route: 1ms;
+    --dur-soft:  1ms;
+  }
+}

package/plugins/design/templates/design-system-inspiration/core/config.json.tpl

@@ -0,0 +1,28 @@
+{
+  "$schema": "https://raw.githubusercontent.com/1aGh/maude/main/plugins/design/dev-server/config.schema.json",
+  "name": "{{project_name}}",
+  "projectLabel": "{{project_label}}",
+  "designRoot": ".design",
+  "canvasGroups": [
+    { "label": "Design system", "path": "system" },
+    { "label": "UI kit", "path": "ui" }
+  ],
+  "rootClass": "{{root_class}}",
+  "themeDefault": "{{theme_default}}",
+  "tokensCssRel": "system/{{ds_dirname}}/colors_and_type.css",
+  "teamAccentDefault": null,
+  "handoffTargets": {{handoff_targets}},
+  "newCanvasDir": "ui/{{ds_dirname}}",
+  "newComponentDir": "ui/{{ds_dirname}}/components",
+  "extensions": [],
+  "completenessProfile": "standard",
+  "activeFamilies": {{active_families}},
+  "designSystems": [
+    {
+      "name": "{{ds_dirname}}",
+      "path": "system/{{ds_dirname}}",
+      "description": "{{ds_description}}"
+    }
+  ],
+  "defaultDesignSystem": "{{ds_dirname}}"
+}

package/plugins/design/templates/design-system-inspiration/core/preview/_layout.css

@@ -0,0 +1,113 @@
+/* Shared specimen chrome — copy as-is into every project's preview/_layout.css.
+ *
+ * Provides the page frame, swatch grid, and label styling for the demo pages.
+ * Specimen content uses var(--*) tokens; this file uses neutral base styles so
+ * the chrome works regardless of theme.
+ */
+
+* {
+  box-sizing: border-box;
+}
+
+html,
+body {
+  margin: 0;
+  padding: 0;
+  font-family: var(--font-body, system-ui, sans-serif);
+  font-size: var(--type-base, 14px);
+  line-height: var(--lh-base, 20px);
+  color: var(--fg-0, #e8eaed);
+  background: var(--bg-0, #0a0c10);
+}
+
+.specimen {
+  max-width: 960px;
+  margin: 0 auto;
+  padding: 32px 24px 80px;
+}
+
+.specimen h1 {
+  font-family: var(--font-display, var(--font-body, system-ui, sans-serif));
+  font-size: var(--type-2xl, 28px);
+  line-height: var(--lh-2xl, 36px);
+  margin: 0 0 8px;
+  font-weight: 600;
+  letter-spacing: -0.01em;
+}
+
+.specimen .lede {
+  color: var(--fg-1, #b6bac4);
+  font-size: var(--type-md, 16px);
+  line-height: var(--lh-md, 22px);
+  margin: 0 0 32px;
+  max-width: 60ch;
+}
+
+.specimen h2 {
+  font-family: var(--font-display, var(--font-body, system-ui, sans-serif));
+  font-size: var(--type-lg, 18px);
+  line-height: var(--lh-lg, 26px);
+  margin: 32px 0 12px;
+  font-weight: 600;
+}
+
+.specimen p {
+  margin: 0 0 12px;
+  max-width: 70ch;
+  color: var(--fg-1);
+}
+.specimen code {
+  font-family: var(--font-mono, ui-monospace, monospace);
+  font-size: 12px;
+}
+
+.grid {
+  display: grid;
+  gap: 12px;
+  grid-template-columns: repeat(auto-fill, minmax(180px, 1fr));
+  margin: 0 0 24px;
+}
+
+.swatch {
+  border-radius: var(--radius-md, 8px);
+  overflow: hidden;
+  border: 1px solid var(--border-default, rgba(255, 255, 255, 0.1));
+  background: var(--bg-1, #14171c);
+}
+
+.swatch .chip {
+  height: 64px;
+}
+.swatch .meta {
+  padding: 10px 12px;
+  font-size: var(--type-xs, 12px);
+  color: var(--fg-1);
+}
+.swatch .meta strong {
+  display: block;
+  color: var(--fg-0);
+  font-size: var(--type-sm, 13px);
+  margin-bottom: 2px;
+}
+
+.row {
+  display: flex;
+  flex-wrap: wrap;
+  gap: 12px;
+  align-items: center;
+  margin: 0 0 24px;
+}
+
+.divider {
+  height: 1px;
+  background: var(--border-subtle);
+  margin: 24px 0;
+}
+
+footer.legend {
+  margin-top: 64px;
+  padding-top: 24px;
+  border-top: 1px solid var(--border-subtle);
+  font-size: var(--type-xs);
+  color: var(--fg-2);
+}

package/plugins/design/templates/design-system-inspiration/core/preview/colors-accent.html

@@ -0,0 +1,48 @@
+<!--
+SPECIMEN: colors-accent
+DEMONSTRATES: --accent, --accent-hover, --accent-active, --accent-fg
+COMPOSITION: 4-state swatch grid + contextual button + link sample, demonstrating one-accent rule
+COPY VOICE: action verbs ("Save", "Confirm", "Continue") — never "Click here" / "Get Started"
+WHEN SCAFFOLDED: always (Core)
+NOTES: This is THE place to demonstrate one-accent rule. The card should NOT show any --accent2 variant. accent-fg must clear WCAG AA against the accent background.
+-->
+<!doctype html>
+<html lang="en">
+<head>
+  <meta charset="utf-8" />
+  <title>Colors — accent</title>
+  <link rel="stylesheet" href="../colors_and_type.css" />
+  <link rel="stylesheet" href="./_layout.css" />
+</head>
+<body class="app" data-theme="dark">
+  <main class="specimen">
+    <h1>Accent</h1>
+    <p class="lede">One accent family — four states. The one-accent rule means: when something needs attention, the answer is always this color, never a competing second hue. Sub-states cover hover, active, and the readable foreground that sits on top of it.</p>
+
+    <div class="grid">
+      <div class="swatch"><div class="chip" style="background: var(--accent);"></div><div class="meta"><strong>--accent</strong>Idle</div></div>
+      <div class="swatch"><div class="chip" style="background: var(--accent-hover);"></div><div class="meta"><strong>--accent-hover</strong>Hover</div></div>
+      <div class="swatch"><div class="chip" style="background: var(--accent-active);"></div><div class="meta"><strong>--accent-active</strong>Pressed</div></div>
+      <div class="swatch"><div class="chip" style="background: var(--accent-fg); border: 1px solid var(--border-default);"></div><div class="meta"><strong>--accent-fg</strong>Foreground</div></div>
+    </div>
+
+    <h2>In use</h2>
+    <div class="row">
+      <button style="background: var(--accent); color: var(--accent-fg); border: 0; padding: 8px 16px; border-radius: var(--radius-md); font: inherit; cursor: pointer; transition: background var(--dur-flip) var(--ease-out);">Save changes</button>
+      <a href="#" style="color: var(--accent); text-decoration: none; border-bottom: 1px solid currentColor;">Read the docs</a>
+      <span style="background: var(--accent); color: var(--accent-fg); padding: 2px 8px; border-radius: var(--radius-pill); font-size: var(--type-xs);">new</span>
+    </div>
+
+    <h2>Hover &amp; active visual</h2>
+    <div class="row">
+      <div style="background: var(--accent); color: var(--accent-fg); padding: 8px 16px; border-radius: var(--radius-md);">idle</div>
+      <div style="background: var(--accent-hover); color: var(--accent-fg); padding: 8px 16px; border-radius: var(--radius-md);">hover</div>
+      <div style="background: var(--accent-active); color: var(--accent-fg); padding: 8px 16px; border-radius: var(--radius-md);">active</div>
+    </div>
+
+    <footer class="legend">
+      <p>The one-accent rule: no <code>--accent2</code>. Calls-to-attention should compete with each other through hierarchy and size, not through parallel hues.</p>
+    </footer>
+  </main>
+</body>
+</html>

package/plugins/design/templates/design-system-inspiration/core/preview/colors-surfaces.html

@@ -0,0 +1,49 @@
+<!--
+SPECIMEN: colors-surfaces
+DEMONSTRATES: --bg-0, --bg-1, --bg-2, --bg-3, --bg-4, --border-subtle, --border-default
+COMPOSITION: 5 swatches showing surface ladder, plus stacked panel illustration showing depth in real use
+COPY VOICE: terse labels
+WHEN SCAFFOLDED: always (Core)
+NOTES: --bg-0 is deepest, --bg-4 is highest. Each step should add ~4% lightness in OKLCH. Borders derive from --bg-1 via oklch(from var(--bg-1) calc(l + N) c h).
+-->
+<!doctype html>
+<html lang="en">
+<head>
+  <meta charset="utf-8" />
+  <title>Colors — surfaces</title>
+  <link rel="stylesheet" href="../colors_and_type.css" />
+  <link rel="stylesheet" href="./_layout.css" />
+</head>
+<body class="app" data-theme="dark">
+  <main class="specimen">
+    <h1>Surface colors</h1>
+    <p class="lede">Five layers of background, deepest to highest. Use the lowest layer for the page; step up one level for cards / panels, two levels for nested controls, three for popovers and overlays.</p>
+
+    <div class="grid">
+      <div class="swatch"><div class="chip" style="background: var(--bg-0);"></div><div class="meta"><strong>--bg-0</strong>Page</div></div>
+      <div class="swatch"><div class="chip" style="background: var(--bg-1);"></div><div class="meta"><strong>--bg-1</strong>Card</div></div>
+      <div class="swatch"><div class="chip" style="background: var(--bg-2);"></div><div class="meta"><strong>--bg-2</strong>Nested</div></div>
+      <div class="swatch"><div class="chip" style="background: var(--bg-3);"></div><div class="meta"><strong>--bg-3</strong>Input</div></div>
+      <div class="swatch"><div class="chip" style="background: var(--bg-4);"></div><div class="meta"><strong>--bg-4</strong>Pressed</div></div>
+    </div>
+
+    <h2>Stacked example</h2>
+    <div style="background: var(--bg-0); padding: 24px; border-radius: var(--radius-lg); border: 1px solid var(--border-subtle);">
+      <div style="background: var(--bg-1); padding: 16px; border-radius: var(--radius-md); border: 1px solid var(--border-default);">
+        <strong>Card on page</strong> · <span style="color: var(--fg-1)">--bg-1 inside --bg-0</span>
+        <div style="background: var(--bg-2); padding: 12px; margin-top: 12px; border-radius: var(--radius-sm); border: 1px solid var(--border-subtle);">
+          <strong>Nested panel</strong> · <span style="color: var(--fg-1)">--bg-2 inside --bg-1</span>
+          <input type="text" placeholder="--bg-3 for inputs" style="background: var(--bg-3); border: 1px solid var(--border-default); color: var(--fg-0); padding: 6px 10px; border-radius: var(--radius-sm); margin-top: 8px; display: block; width: 200px;" />
+        </div>
+      </div>
+    </div>
+
+    <h2>Borders</h2>
+    <div class="row">
+      <div style="padding: 12px 16px; border: 1px solid var(--border-subtle); border-radius: var(--radius-md);">subtle</div>
+      <div style="padding: 12px 16px; border: 1px solid var(--border-default); border-radius: var(--radius-md);">default</div>
+      <div style="padding: 12px 16px; border: 1px solid var(--border-strong); border-radius: var(--radius-md);">strong</div>
+    </div>
+  </main>
+</body>
+</html>

package/plugins/design/templates/design-system-inspiration/core/preview/colors-text.html

@@ -0,0 +1,52 @@
+<!--
+SPECIMEN: colors-text
+DEMONSTRATES: --fg-0, --fg-1, --fg-2, --fg-3
+COMPOSITION: 4 swatches × 1 row + sample paragraph showing hierarchy in context
+COPY VOICE: short labels, no marketing puffery ("Primary", "Secondary", "Muted", "Disabled")
+WHEN SCAFFOLDED: always (Core)
+NOTES: Sample paragraph reuses each level to show how the hierarchy reads. --fg-3 must pass WCAG AA at 14px against --bg-1.
+-->
+<!doctype html>
+<html lang="en">
+<head>
+  <meta charset="utf-8" />
+  <title>Colors — text</title>
+  <link rel="stylesheet" href="../colors_and_type.css" />
+  <link rel="stylesheet" href="./_layout.css" />
+</head>
+<body class="app" data-theme="dark">
+  <main class="specimen">
+    <h1>Text colors</h1>
+    <p class="lede">Four levels of foreground, designed for hierarchy. Use <code>--fg-0</code> for the primary message in a region; lower numbers for supporting context and metadata.</p>
+
+    <div class="grid">
+      <div class="swatch">
+        <div class="chip" style="background: var(--fg-0); height: 64px;"></div>
+        <div class="meta"><strong>--fg-0</strong>Primary</div>
+      </div>
+      <div class="swatch">
+        <div class="chip" style="background: var(--fg-1); height: 64px;"></div>
+        <div class="meta"><strong>--fg-1</strong>Secondary</div>
+      </div>
+      <div class="swatch">
+        <div class="chip" style="background: var(--fg-2); height: 64px;"></div>
+        <div class="meta"><strong>--fg-2</strong>Muted</div>
+      </div>
+      <div class="swatch">
+        <div class="chip" style="background: var(--fg-3); height: 64px;"></div>
+        <div class="meta"><strong>--fg-3</strong>Disabled</div>
+      </div>
+    </div>
+
+    <h2>In context</h2>
+    <p style="color: var(--fg-0)"><strong>Match recap ready.</strong> Hat-trick from the captain; team rating B+.</p>
+    <p style="color: var(--fg-1)">Auto-saved at 19:42. View the breakdown or share with the squad.</p>
+    <p style="color: var(--fg-2)">Last 7 matches available in the archive.</p>
+    <p style="color: var(--fg-3)">Stats sync paused (no connection).</p>
+
+    <footer class="legend">
+      <p><code>--fg-3</code> contrast against <code>--bg-1</code> must clear WCAG AA at 14px. Verify on every theme.</p>
+    </footer>
+  </main>
+</body>
+</html>

package/plugins/design/templates/design-system-inspiration/core/preview/components-buttons.html

@@ -0,0 +1,83 @@
+<!--
+SPECIMEN: components-buttons
+DEMONSTRATES: --accent, --accent-hover, --accent-active, --accent-fg, --bg-1..4, --fg-0..2, --border-default, --radius-md, --dur-flip, --ease-out
+COMPOSITION: 4 variants × 5 states grid (primary / secondary / ghost / destructive × idle / hover / active / disabled / loading)
+COPY VOICE: action verbs, no marketing puffery ("Save", "Delete", not "Get Started Now!")
+WHEN SCAFFOLDED: always (Core)
+NOTES: Loading state uses --accent-fg color on accent bg with a pulsing dot — never spinner-only. Disabled uses --fg-3 + reduced opacity, no hover.
+-->
+<!doctype html>
+<html lang="en">
+<head>
+  <meta charset="utf-8" />
+  <title>Components — buttons</title>
+  <link rel="stylesheet" href="../colors_and_type.css" />
+  <link rel="stylesheet" href="./_layout.css" />
+  <style>
+    .btn { font: inherit; padding: 8px 14px; border-radius: var(--radius-md); border: 1px solid transparent; cursor: pointer; transition: background var(--dur-flip) var(--ease-out), border-color var(--dur-flip) var(--ease-out); display: inline-flex; align-items: center; gap: 8px; }
+    .btn--primary       { background: var(--accent);        color: var(--accent-fg); }
+    .btn--primary:hover { background: var(--accent-hover); }
+    .btn--primary.is-active, .btn--primary:active { background: var(--accent-active); }
+    .btn--secondary    { background: var(--bg-3); color: var(--fg-0); border-color: var(--border-default); }
+    .btn--secondary:hover { background: var(--bg-4); }
+    .btn--ghost        { background: transparent; color: var(--fg-0); }
+    .btn--ghost:hover  { background: var(--bg-2); }
+    .btn--destructive  { background: var(--status-error); color: var(--accent-fg); }
+    .btn[disabled], .btn.is-disabled { opacity: 0.5; cursor: not-allowed; }
+    .btn.is-loading::after { content: ''; width: 6px; height: 6px; border-radius: 50%; background: currentColor; animation: pulse 1s ease-in-out infinite; }
+    @keyframes pulse { 0%, 100% { opacity: 0.4; transform: scale(0.8); } 50% { opacity: 1; transform: scale(1.2); } }
+    @media (prefers-reduced-motion: reduce) { .btn.is-loading::after { animation: none; } }
+    .col { display: grid; gap: 12px; align-items: start; }
+    .grid-states { display: grid; grid-template-columns: 120px repeat(5, max-content); gap: 12px; align-items: center; margin: 16px 0; }
+    .grid-states > .head { font-size: var(--type-xs); color: var(--fg-2); text-transform: uppercase; letter-spacing: 0.04em; }
+  </style>
+</head>
+<body class="app" data-theme="dark">
+  <main class="specimen">
+    <h1>Buttons</h1>
+    <p class="lede">Four variants, five states. Primary carries the accent; secondary uses neutral surface + border; ghost is invisible until interaction; destructive uses status-error for irreversible actions.</p>
+
+    <div class="grid-states">
+      <span class="head"></span><span class="head">Idle</span><span class="head">Hover</span><span class="head">Active</span><span class="head">Disabled</span><span class="head">Loading</span>
+      <span style="color: var(--fg-1);">Primary</span>
+      <button class="btn btn--primary">Save</button>
+      <button class="btn btn--primary" style="background: var(--accent-hover);">Save</button>
+      <button class="btn btn--primary is-active">Save</button>
+      <button class="btn btn--primary" disabled>Save</button>
+      <button class="btn btn--primary is-loading">Saving</button>
+
+      <span style="color: var(--fg-1);">Secondary</span>
+      <button class="btn btn--secondary">Cancel</button>
+      <button class="btn btn--secondary" style="background: var(--bg-4);">Cancel</button>
+      <button class="btn btn--secondary" style="background: var(--bg-4); border-color: var(--border-strong);">Cancel</button>
+      <button class="btn btn--secondary" disabled>Cancel</button>
+      <button class="btn btn--secondary is-loading">Cancel</button>
+
+      <span style="color: var(--fg-1);">Ghost</span>
+      <button class="btn btn--ghost">More</button>
+      <button class="btn btn--ghost" style="background: var(--bg-2);">More</button>
+      <button class="btn btn--ghost" style="background: var(--bg-3);">More</button>
+      <button class="btn btn--ghost" disabled>More</button>
+      <button class="btn btn--ghost is-loading">More</button>
+
+      <span style="color: var(--fg-1);">Destructive</span>
+      <button class="btn btn--destructive">Delete</button>
+      <button class="btn btn--destructive" style="filter: brightness(1.05);">Delete</button>
+      <button class="btn btn--destructive" style="filter: brightness(0.95);">Delete</button>
+      <button class="btn btn--destructive" disabled>Delete</button>
+      <button class="btn btn--destructive is-loading">Deleting</button>
+    </div>
+
+    <h2>With icon</h2>
+    <div class="row">
+      <button class="btn btn--primary"><span aria-hidden="true">↑</span>Upload</button>
+      <button class="btn btn--secondary"><span aria-hidden="true">↓</span>Download</button>
+      <button class="btn btn--ghost"><span aria-hidden="true">⌄</span>Filter</button>
+    </div>
+
+    <footer class="legend">
+      <p>Loading state: keep the verb in the label, not "Loading…". "Saving", "Deleting", "Uploading" tells the user which action is in flight.</p>
+    </footer>
+  </main>
+</body>
+</html>

package/plugins/design/templates/design-system-inspiration/core/preview/components-cards.html

@@ -0,0 +1,79 @@
+<!--
+SPECIMEN: components-cards
+DEMONSTRATES: --bg-1, --bg-2, --border-subtle, --border-default, --radius-lg, --shadow-sm, --shadow-md, --space-3/4/5
+COMPOSITION: 3 card variants — flat (default), elevated, interactive — with realistic product content
+COPY VOICE: real product strings — match recap, scout report, team note — never placeholder
+WHEN SCAFFOLDED: always (Core)
+NOTES: Card hierarchy comes from border + bg step, not shadow alone. Reserve shadow for floating elements (popovers, dropdowns), not stationary cards.
+-->
+<!doctype html>
+<html lang="en">
+<head>
+  <meta charset="utf-8" />
+  <title>Components — cards</title>
+  <link rel="stylesheet" href="../colors_and_type.css" />
+  <link rel="stylesheet" href="./_layout.css" />
+  <style>
+    .card { background: var(--bg-1); border: 1px solid var(--border-default); border-radius: var(--radius-lg); padding: var(--space-4); display: grid; gap: var(--space-3); }
+    .card--elevated { box-shadow: var(--shadow-md); }
+    .card--interactive { transition: background var(--dur-flip) var(--ease-out), border-color var(--dur-flip) var(--ease-out); cursor: pointer; }
+    .card--interactive:hover { background: var(--bg-2); border-color: var(--border-strong); }
+    .card .head { display: flex; justify-content: space-between; align-items: center; }
+    .card .meta { color: var(--fg-2); font-size: var(--type-sm); }
+    .card .title { font-family: var(--font-display); font-size: var(--type-lg); font-weight: 600; line-height: var(--lh-lg); }
+    .pill { background: var(--accent); color: var(--accent-fg); padding: 2px 8px; border-radius: var(--radius-pill); font-size: var(--type-xs); }
+  </style>
+</head>
+<body class="app" data-theme="dark">
+  <main class="specimen">
+    <h1>Cards</h1>
+    <p class="lede">Three card patterns: flat for stationary content, elevated for dialogs and overlays, interactive for clickable list rows. Hierarchy comes from the border + bg step; shadow signals "floats above the page".</p>
+
+    <h2>Flat (default)</h2>
+    <div class="card" style="max-width: 360px;">
+      <div class="head">
+        <span class="title">Match recap</span>
+        <span class="meta">19:42</span>
+      </div>
+      <p style="margin: 0; color: var(--fg-1);">Hat-trick from the captain. Squad rating B+.</p>
+      <div class="row" style="gap: var(--space-2);">
+        <button style="background: var(--accent); color: var(--accent-fg); border: 0; padding: 6px 12px; border-radius: var(--radius-sm); font: inherit;">View</button>
+        <button style="background: var(--bg-3); color: var(--fg-0); border: 1px solid var(--border-default); padding: 6px 12px; border-radius: var(--radius-sm); font: inherit;">Share</button>
+      </div>
+    </div>
+
+    <h2>Elevated (overlay)</h2>
+    <div class="card card--elevated" style="max-width: 360px;">
+      <div class="head">
+        <span class="title">Confirm delete</span>
+      </div>
+      <p style="margin: 0; color: var(--fg-1);">This will remove "Scout Radar Mobile" and its iteration history. Cannot be undone.</p>
+      <div class="row" style="justify-content: flex-end; gap: var(--space-2);">
+        <button style="background: transparent; color: var(--fg-1); border: 0; padding: 6px 12px; border-radius: var(--radius-sm); font: inherit;">Cancel</button>
+        <button style="background: var(--status-error); color: var(--accent-fg); border: 0; padding: 6px 12px; border-radius: var(--radius-sm); font: inherit;">Delete</button>
+      </div>
+    </div>
+
+    <h2>Interactive (list row)</h2>
+    <div style="display: grid; gap: var(--space-2); max-width: 480px;">
+      <div class="card card--interactive">
+        <div class="head">
+          <div>
+            <div class="title">Roster: starting XI</div>
+            <div class="meta">11 players · last edited 2h ago</div>
+          </div>
+          <span class="pill">draft</span>
+        </div>
+      </div>
+      <div class="card card--interactive">
+        <div class="head">
+          <div>
+            <div class="title">Bench shortlist</div>
+            <div class="meta">7 players · synced</div>
+          </div>
+        </div>
+      </div>
+    </div>
+  </main>
+</body>
+</html>

package/plugins/design/templates/design-system-inspiration/core/preview/components-inputs.html

@@ -0,0 +1,82 @@
+<!--
+SPECIMEN: components-inputs
+DEMONSTRATES: --bg-3, --border-default, --border-strong, --accent (focus ring), --fg-0..2, --status-error, --radius-sm, --space-2/3
+COMPOSITION: text / textarea / select / search — each in idle, focused, error, disabled states
+COPY VOICE: real labels and helper text ("Player name", "Match notes", "Squad role") — never "Enter text here"
+WHEN SCAFFOLDED: always (Core)
+NOTES: Focus ring is --accent at 2px outline-offset 2px (NOT box-shadow inset). Error state colors the border + helper text. Labels are above, helper text below — never inside the input.
+-->
+<!doctype html>
+<html lang="en">
+<head>
+  <meta charset="utf-8" />
+  <title>Components — inputs</title>
+  <link rel="stylesheet" href="../colors_and_type.css" />
+  <link rel="stylesheet" href="./_layout.css" />
+  <style>
+    .field { display: grid; gap: 4px; max-width: 320px; margin-bottom: 16px; }
+    .field label { color: var(--fg-1); font-size: var(--type-sm); }
+    .field .helper { color: var(--fg-2); font-size: var(--type-xs); }
+    .field.is-error .helper { color: var(--status-error); }
+    .input, .select { background: var(--bg-3); color: var(--fg-0); border: 1px solid var(--border-default); padding: 8px 10px; border-radius: var(--radius-sm); font: inherit; transition: border-color var(--dur-flip) var(--ease-out); }
+    .input:focus, .select:focus { outline: 2px solid var(--accent); outline-offset: 2px; border-color: var(--border-strong); }
+    .field.is-error .input, .field.is-error .select { border-color: var(--status-error); }
+    .input[disabled] { opacity: 0.5; cursor: not-allowed; }
+    .row-fields { display: grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); gap: 24px; }
+  </style>
+</head>
+<body class="app" data-theme="dark">
+  <main class="specimen">
+    <h1>Inputs</h1>
+    <p class="lede">Text, textarea, select, search. Labels above, helper text below. The focus ring is always <code>--accent</code> at 2px outline-offset 2px — never an inset box-shadow, because that masks the border.</p>
+
+    <h2>States</h2>
+    <div class="row-fields">
+      <div class="field">
+        <label for="i1">Player name</label>
+        <input id="i1" class="input" type="text" value="Captain Kim" />
+        <span class="helper">Idle</span>
+      </div>
+      <div class="field">
+        <label for="i2">Squad role</label>
+        <input id="i2" class="input" type="text" value="Forward" style="outline: 2px solid var(--accent); outline-offset: 2px; border-color: var(--border-strong);" />
+        <span class="helper">Focused</span>
+      </div>
+      <div class="field is-error">
+        <label for="i3">Jersey number</label>
+        <input id="i3" class="input" type="text" value="0" />
+        <span class="helper">Must be between 1 and 99.</span>
+      </div>
+      <div class="field">
+        <label for="i4">Birth year</label>
+        <input id="i4" class="input" type="text" value="1998" disabled />
+        <span class="helper">Disabled (synced from registration)</span>
+      </div>
+    </div>
+
+    <h2>Textarea</h2>
+    <div class="field" style="max-width: 480px;">
+      <label for="t1">Match notes</label>
+      <textarea id="t1" class="input" rows="4" style="resize: vertical;">First-half tempo lifted after the press change; second-half rotation kept legs fresh.</textarea>
+      <span class="helper">Visible to the squad only.</span>
+    </div>
+
+    <h2>Select</h2>
+    <div class="field">
+      <label for="s1">Match outcome</label>
+      <select id="s1" class="select">
+        <option>Win</option>
+        <option>Draw</option>
+        <option>Loss</option>
+      </select>
+    </div>
+
+    <h2>Search</h2>
+    <div class="field" style="max-width: 360px;">
+      <label for="q1">Find a player</label>
+      <input id="q1" class="input" type="search" placeholder="Name, number, or position" />
+      <span class="helper">Fuzzy match across all squads.</span>
+    </div>
+  </main>
+</body>
+</html>