Mercurial

diff design_system/src/index.html @ 251:117c4d53c9a4

Find changesets by keywords (author, files, the commit message), revision number or hash, or revset expression.
[ui] Add HTML-first Web Component system Co-authored-by: Copilot <[email protected]>
author MrJuneJune <me@mrjunejune.com>
date Tue, 04 Aug 2026 09:14:57 -0700
parents
children 7a7581f040e8
line wrap: on
line diff
--- /dev/null	Thu Jan 01 00:00:00 1970 +0000
+++ b/design_system/src/index.html	Tue Aug 04 09:14:57 2026 -0700
@@ -0,0 +1,245 @@
+<!doctype html>
+<html lang="en">
+  <head>
+    <meta charset="utf-8" />
+    <meta name="viewport" content="width=device-width, initial-scale=1" />
+    <meta name="color-scheme" content="light dark" />
+    <title>Zenbu UI</title>
+    <link rel="stylesheet" href="/styles/tokens.css" />
+    <link rel="stylesheet" href="/styles/components.css" />
+    <link rel="stylesheet" href="/storybook.css" />
+    <script type="module" src="/storybook.js"></script>
+  </head>
+  <body>
+    <div class="catalog-shell">
+      <aside class="catalog-sidebar">
+        <a class="catalog-brand" href="/" data-catalog-link>
+          <span class="catalog-mark" aria-hidden="true">全</span>
+          Zenbu UI
+        </a>
+
+        <h2>Foundations</h2>
+        <nav class="catalog-nav" aria-label="Foundations">
+          <a href="/" data-catalog-link>Overview</a>
+          <a href="/tokens" data-catalog-link>Tokens</a>
+        </nav>
+
+        <h2>Components</h2>
+        <nav class="catalog-nav" aria-label="Components">
+          <a href="/components/button" data-catalog-link>Button</a>
+          <a href="/components/card" data-catalog-link>Card</a>
+          <a href="/components/alert" data-catalog-link>Alert</a>
+          <a href="/components/field" data-catalog-link>Field</a>
+          <a href="/components/stack" data-catalog-link>Stack</a>
+        </nav>
+
+        <button id="themeToggle" class="theme-toggle" type="button">
+          Toggle theme
+        </button>
+      </aside>
+
+      <main id="catalogMain" class="catalog-main" tabindex="-1">
+        <section class="catalog-page" data-catalog-page="overview">
+          <header class="page-heading">
+            <p class="eyebrow">HTML first</p>
+            <h1>A small design system that stays close to the platform.</h1>
+            <p>
+              Zenbu UI uses light-DOM Web Components to organize styling and
+              behavior without hiding the native button, link, label, input,
+              article, and section elements that already work.
+            </p>
+          </header>
+
+          <div class="principles">
+            <article class="principle">
+              <h2>Native underneath</h2>
+              <p>Interactive wrappers contain real HTML controls, preserving forms, links, keyboard behavior, and browser APIs.</p>
+            </article>
+            <article class="principle">
+              <h2>Light DOM</h2>
+              <p>Application code can inspect, style, test, and progressively enhance every element without crossing a shadow boundary.</p>
+            </article>
+            <article class="principle">
+              <h2>Portable tokens</h2>
+              <p>CSS custom properties provide the visual contract. Components remain dependency-free ES modules.</p>
+            </article>
+          </div>
+
+          <h2>Components</h2>
+          <div class="component-grid">
+            <a href="/components/button" data-catalog-link>
+              <zen-card interactive><article><h3>Button</h3><p>Native buttons and links with shared variants and loading state.</p></article></zen-card>
+            </a>
+            <a href="/components/card" data-catalog-link>
+              <zen-card interactive><article><h3>Card</h3><p>A visual container that leaves article semantics in your HTML.</p></article></zen-card>
+            </a>
+            <a href="/components/alert" data-catalog-link>
+              <zen-card interactive><article><h3>Alert</h3><p>Status and alert messages with optional dismissal.</p></article></zen-card>
+            </a>
+            <a href="/components/field" data-catalog-link>
+              <zen-card interactive><article><h3>Field</h3><p>Labels, controls, help text, and validity wiring.</p></article></zen-card>
+            </a>
+            <a href="/components/stack" data-catalog-link>
+              <zen-card interactive><article><h3>Stack</h3><p>A tiny layout primitive driven by HTML attributes.</p></article></zen-card>
+            </a>
+          </div>
+        </section>
+
+        <section class="catalog-page" data-catalog-page="tokens" hidden>
+          <header class="page-heading">
+            <p class="eyebrow">Foundations</p>
+            <h1>Design tokens</h1>
+            <p>Import one CSS file and override any <code>--zen-*</code> property at the application boundary.</p>
+          </header>
+          <div class="token-grid">
+            <section class="token-group">
+              <h2>Color</h2>
+              <dl class="swatch-list">
+                <div><span class="swatch" style="--swatch: var(--zen-color-accent)"></span><div><dt>--zen-color-accent</dt><dd>Primary action</dd></div></div>
+                <div><span class="swatch" style="--swatch: var(--zen-color-info)"></span><div><dt>--zen-color-info</dt><dd>Informational state</dd></div></div>
+                <div><span class="swatch" style="--swatch: var(--zen-color-success)"></span><div><dt>--zen-color-success</dt><dd>Successful state</dd></div></div>
+                <div><span class="swatch" style="--swatch: var(--zen-color-danger)"></span><div><dt>--zen-color-danger</dt><dd>Dangerous state</dd></div></div>
+              </dl>
+            </section>
+            <section class="token-group">
+              <h2>Spacing</h2>
+              <zen-stack gap="tight">
+                <code>--zen-space-1: 0.25rem</code>
+                <code>--zen-space-2: 0.5rem</code>
+                <code>--zen-space-4: 1rem</code>
+                <code>--zen-space-6: 2rem</code>
+              </zen-stack>
+            </section>
+            <section class="token-group">
+              <h2>Shape</h2>
+              <zen-stack gap="tight">
+                <code>--zen-radius-sm</code>
+                <code>--zen-radius-md</code>
+                <code>--zen-radius-lg</code>
+                <code>--zen-shadow-sm / md</code>
+              </zen-stack>
+            </section>
+          </div>
+        </section>
+
+        <section class="catalog-page" data-catalog-page="button" hidden>
+          <header class="page-heading">
+            <p class="eyebrow">Component</p>
+            <h1>Button</h1>
+            <p>Wrap a native <code>button</code> or <code>a</code>. The browser keeps responsibility for forms and navigation.</p>
+          </header>
+          <zen-story name="Variants">
+            <template>
+              <zen-stack direction="row">
+                <zen-button><button type="button">Primary action</button></zen-button>
+                <zen-button variant="quiet"><button type="button">Quiet action</button></zen-button>
+                <zen-button variant="danger"><button type="button">Delete item</button></zen-button>
+              </zen-stack>
+            </template>
+          </zen-story>
+          <zen-story name="States">
+            <template>
+              <zen-stack direction="row">
+                <zen-button loading><button type="button">Saving</button></zen-button>
+                <zen-button disabled><button type="button">Unavailable</button></zen-button>
+                <zen-button variant="quiet"><a href="/tokens">Token link</a></zen-button>
+              </zen-stack>
+            </template>
+          </zen-story>
+        </section>
+
+        <section class="catalog-page" data-catalog-page="card" hidden>
+          <header class="page-heading">
+            <p class="eyebrow">Component</p>
+            <h1>Card</h1>
+            <p>The wrapper owns presentation. You choose the native sectioning element and heading level.</p>
+          </header>
+          <zen-story name="Article cards">
+            <template>
+              <div class="demo-card-grid">
+                <zen-card>
+                  <article>
+                    <h3>Repository health</h3>
+                    <p>All worker queues are healthy and the last deployment passed.</p>
+                    <zen-button variant="quiet"><a href="/components/alert">View status</a></zen-button>
+                  </article>
+                </zen-card>
+                <zen-card interactive>
+                  <article>
+                    <h3>Interactive treatment</h3>
+                    <p>Add the attribute when the whole card leads somewhere.</p>
+                  </article>
+                </zen-card>
+              </div>
+            </template>
+          </zen-story>
+        </section>
+
+        <section class="catalog-page" data-catalog-page="alert" hidden>
+          <header class="page-heading">
+            <p class="eyebrow">Component</p>
+            <h1>Alert</h1>
+            <p>Tone selects status semantics and color. Add <code>dismissible</code> for a generated native close button.</p>
+          </header>
+          <zen-story name="Tones">
+            <template>
+              <zen-stack>
+                <zen-alert><p><strong>Info:</strong> The new bundle is ready to inspect.</p></zen-alert>
+                <zen-alert tone="success"><p><strong>Success:</strong> All tests passed.</p></zen-alert>
+                <zen-alert tone="warning"><p><strong>Warning:</strong> One worker slot remains.</p></zen-alert>
+                <zen-alert tone="danger" dismissible><p><strong>Error:</strong> Deployment failed and was rolled back.</p></zen-alert>
+              </zen-stack>
+            </template>
+          </zen-story>
+        </section>
+
+        <section class="catalog-page" data-catalog-page="field" hidden>
+          <header class="page-heading">
+            <p class="eyebrow">Component</p>
+            <h1>Field</h1>
+            <p>Write a label and native control. The component supplies IDs, label association, help text, and invalid state.</p>
+          </header>
+          <zen-story name="Input and textarea">
+            <template>
+              <zen-stack>
+                <zen-field>
+                  <label>Email address</label>
+                  <input type="email" required placeholder="[email protected]" />
+                  <small>Used only for build notifications.</small>
+                </zen-field>
+                <zen-field>
+                  <label>Deployment note</label>
+                  <textarea placeholder="What changed?"></textarea>
+                  <small>Keep it short and useful.</small>
+                </zen-field>
+              </zen-stack>
+            </template>
+          </zen-story>
+        </section>
+
+        <section class="catalog-page" data-catalog-page="stack" hidden>
+          <header class="page-heading">
+            <p class="eyebrow">Component</p>
+            <h1>Stack</h1>
+            <p>A flex layout primitive with readable direction and gap attributes.</p>
+          </header>
+          <zen-story name="Vertical and horizontal">
+            <template>
+              <zen-stack gap="loose">
+                <zen-stack gap="tight">
+                  <strong>Vertical stack</strong>
+                  <span>One item</span>
+                  <span>Another item</span>
+                </zen-stack>
+                <zen-stack direction="row">
+                  <zen-button><button type="button">Accept</button></zen-button>
+                  <zen-button variant="quiet"><button type="button">Cancel</button></zen-button>
+                </zen-stack>
+              </zen-stack>
+            </template>
+          </zen-story>
+        </section>
+      </main>
+    </div>
+  </body>
+</html>