@agentic-design-kits/verdigris 0.0.0-stage → 2026.1113.1

package/kit/example.html

@@ -0,0 +1,186 @@
+<!doctype html>
+<html lang="en">
+<head>
+  <meta charset="utf-8">
+  <meta name="viewport" content="width=device-width, initial-scale=1">
+  <title>Swiss Minimal example</title>
+  <!-- Swiss Minimal's files are read from its kit/, at the root of the repository. -->
+  <link rel="stylesheet" href="../../kit/theme.css">
+  <link rel="stylesheet" href="fonts.css">
+  <link rel="stylesheet" href="verdigris.css">
+  <script>
+    try { var t = localStorage.getItem('theme'); if (t === 'light' || t === 'dark') document.documentElement.dataset.theme = t; } catch (e) {}
+  </script>
+  <style>
+    :root { --bar-h: 0rem; }  /* this page has no fixed bottom bar */
+    /* Page-specific layout only. Everything else comes from theme.css. */
+    .bar { display: flex; align-items: center; justify-content: space-between; border-bottom: 2px solid currentColor; padding: 0.75rem 0; }
+    .hero { padding: 3rem 0 4rem 0; }
+    .hero p { max-width: 28rem; margin: 2rem 0 0 0; }
+    .section { border-top: 2px solid var(--ink); padding-top: 0.75rem; margin-bottom: 4rem; }
+    .section-head { display: grid; grid-template-columns: 3rem 1fr; column-gap: 0.5rem; align-items: baseline; padding-bottom: 1.5rem; }
+    .section-head .num { padding-left: 0.5rem; }
+    .row { display: grid; grid-template-columns: 3rem 1fr 1.75rem; column-gap: 0.5rem; align-items: start; padding: 1rem 0; }
+    .row .num { padding-left: 1rem; }  /* clear of the active row's 6px edge */
+    @media (min-width: 768px) { .row .num { padding-left: 1.25rem; } }
+    .page-acc { margin-bottom: 2.5rem; }
+    .swatches { display: grid; grid-template-columns: repeat(auto-fill, minmax(9rem, 1fr)); gap: 0.75rem; margin: 1rem 0 3rem 0; }
+    .sw { padding: 1rem; border: 1px solid var(--rule); font-size: 0.875rem; }
+    .sw b { display: block; height: 2.5rem; margin-bottom: 0.5rem; border: 1px solid var(--rule); }
+    form { max-width: 28rem; background: var(--bar); color: var(--bar-ink); padding: 1.5rem; margin-bottom: 4rem; }
+    form .btn { margin-top: 1.5rem; }
+  </style>
+</head>
+<body>
+  <a class="skip-link" href="#main">Skip to main content</a>
+  <div class="topbar">
+    <div class="page">
+      <div class="bar">
+        <span class="small" style="font-weight:500">Swiss Minimal example</span>
+        <span style="display:flex;gap:0.5rem">
+          <button type="button" class="topbar-btn burger" data-panel-button aria-label="Menu" aria-expanded="false" aria-controls="panel"><i></i><i></i><i></i></button>
+          <button class="topbar-btn topbar-btn--text" id="toggle">
+            <span class="label-stack"><span id="toggle-label">Dark</span><span aria-hidden="true">Dark</span><span aria-hidden="true">Light</span></span>
+          </button>
+        </span>
+      </div>
+    </div>
+  </div>
+
+  <div id="panel" class="panel" data-panel role="dialog" aria-modal="true" aria-label="Menu" aria-hidden="true" inert>
+    <div class="panel-inner">
+      <nav aria-label="Menu">
+        <ul class="menu-list">
+          <li><a class="menu-link" href="#" aria-current="page" data-panel-close>Home</a></li>
+          <li>
+            <details class="acc" name="menu">
+              <summary>Work <span class="acc-icon" aria-hidden="true"><i></i><i></i></span></summary>
+              <div class="acc-body">
+                <ul class="submenu">
+                  <li><a href="#europe" data-panel-close>Writing</a></li>
+                  <li>
+                    <details class="acc" name="menu-1">
+                      <summary>Projects <span class="acc-icon" aria-hidden="true"><i></i><i></i></span></summary>
+                      <div class="acc-body">
+                        <ul class="submenu">
+                          <li><a href="#japan" data-panel-close>Current</a></li>
+                          <li><a href="#korea" data-panel-close>Archive</a></li>
+                        </ul>
+                      </div>
+                    </details>
+                  </li>
+                  <li><a href="#americas" data-panel-close>Talks</a></li>
+                </ul>
+              </div>
+            </details>
+          </li>
+          <li>
+            <details class="acc" name="menu">
+              <summary>About <span class="acc-icon" aria-hidden="true"><i></i><i></i></span></summary>
+              <div class="acc-body">
+                <ul class="submenu">
+                  <li><a href="#story" data-panel-close>The story</a></li>
+                  <li><a href="#credits" data-panel-close>Credits</a></li>
+                </ul>
+              </div>
+            </details>
+          </li>
+          <li><a class="menu-link" href="#contact" data-panel-close>Contact</a></li>
+        </ul>
+      </nav>
+    </div>
+  </div>
+
+  <div data-panel-page>
+  <div class="page">
+    <main id="main" tabindex="-1">
+    <header class="hero">
+      <h1 class="display">Swiss<br>Minimal</h1>
+      <p class="lead">Flat color, thick rules, one typeface. Everything here is theme.css and nothing else.</p>
+    </header>
+
+    <div class="swatches" id="swatches"></div>
+
+    <details class="page-acc">
+      <summary>
+        <span><span class="page-acc-title">Filter by category</span><span class="page-acc-status" id="chip-status">All items</span></span>
+        <span class="acc-icon" aria-hidden="true"><i></i><i></i></span>
+      </summary>
+      <div class="page-acc-body chip-group" role="group" aria-label="Category">
+        <button type="button" class="chip" aria-pressed="true">All <span class="chip-count">3</span></button>
+        <button type="button" class="chip" aria-pressed="false">Writing <span class="chip-count">1</span></button>
+        <button type="button" class="chip" aria-pressed="false">Design &amp; code <span class="chip-count">2</span></button>
+      </div>
+    </details>
+
+    <section class="section">
+      <div class="section-head">
+        <p class="num small muted" style="margin:0;font-weight:500">01–03</p>
+        <h2 class="h2">Selected work</h2>
+      </div>
+      <ul style="list-style:none;margin:0;padding:0">
+        <li class="row" data-active="true">
+          <span class="num small muted" style="font-weight:500">01</span>
+          <span><span class="title" style="display:block">Field notes</span><span class="small muted">Essay, 2026</span></span>
+          <span class="eq" aria-hidden="true"><i></i><i></i><i></i></span>
+        </li>
+        <li class="row">
+          <span class="num small muted" style="font-weight:500">02</span>
+          <span><span class="title" style="display:block">A type specimen</span><span class="small muted">Design, 2025</span></span>
+          <span></span>
+        </li>
+        <li class="row">
+          <span class="num small muted" style="font-weight:500">03</span>
+          <span><span class="title" style="display:block">Small tools</span><span class="small muted">Code, 2025</span></span>
+          <span></span>
+        </li>
+      </ul>
+    </section>
+
+    <form onsubmit="return false">
+      <label class="field-label" for="n">Your name</label>
+      <input class="field" id="n" placeholder="Jane">
+      <button class="btn" type="submit">Send</button>
+    </form>
+    </main>
+  </div>
+  </div>
+
+  <script src="../../kit/panel.js"></script>
+  <script>
+    var root = document.documentElement, btn = document.getElementById('toggle');
+    function cur() { return root.dataset.theme || (matchMedia('(prefers-color-scheme: dark)').matches ? 'dark' : 'light'); }
+    function sync() { document.getElementById('toggle-label').textContent = cur() === 'dark' ? 'Light' : 'Dark'; swatches(); }
+    btn.onclick = function () {
+      var n = cur() === 'dark' ? 'light' : 'dark'; root.dataset.theme = n;
+      try { localStorage.setItem('theme', n); } catch (e) {} sync();
+    };
+    function swatches() {
+      var names = ['paper', 'ink', 'muted', 'rule', 'accent', 'accent-text', 'accent-bright', 'bar',
+                   'row-hover-bg', 'row-active-bg', 'row-fg', 'row-edge'];
+      // Resolve through a probe element: some tokens are declared as var(--other), which
+      // getPropertyValue would return unresolved.
+      var probe = document.body.appendChild(document.createElement('i'));
+      document.getElementById('swatches').innerHTML = names.map(function (n) {
+        probe.style.color = 'var(--' + n + ')';
+        var v = '#' + getComputedStyle(probe).color.match(/\d+/g).slice(0, 3).map(function (c) {
+          return ('0' + (+c).toString(16)).slice(-2);
+        }).join('');
+        return '<div class="sw"><b style="background:' + v + '"></b>--' + n + '<br><span class="muted">' + v + '</span></div>';
+      }).join('');
+      probe.remove();
+    }
+    sync();
+
+    // Filter buttons: only one is pressed, and the accordion's summary says which.
+    var chips = document.querySelectorAll('.chip');
+    chips.forEach(function (chip) {
+      chip.onclick = function () {
+        chips.forEach(function (c) { c.setAttribute('aria-pressed', String(c === chip)); });
+        document.getElementById('chip-status').textContent =
+          chip === chips[0] ? 'All items' : chip.firstChild.textContent.trim();
+      };
+    });
+  </script>
+</body>
+</html>

package/kit/fonts.css

@@ -0,0 +1,50 @@
+/* Verdigris's typeface. tailwind.css loads this after Swiss Minimal's theme.css, so its
+   --font-sans wins. The fonts live in ../fonts (SIL OFL 1.1, keep Cormorant-LICENSE.txt beside
+   them). Source Code Pro, for code, comes with Swiss Minimal. */
+
+@font-face {
+  font-family: "Cormorant";
+  src: url("../fonts/Cormorant-Light.woff2") format("woff2");
+  font-weight: 300;
+  font-style: normal;
+  font-display: swap;
+}
+@font-face {
+  font-family: "Cormorant";
+  src: url("../fonts/Cormorant-LightItalic.woff2") format("woff2");
+  font-weight: 300;
+  font-style: italic;
+  font-display: swap;
+}
+@font-face {
+  font-family: "Cormorant";
+  src: url("../fonts/Cormorant-Medium.woff2") format("woff2");
+  font-weight: 500;
+  font-style: normal;
+  font-display: swap;
+}
+@font-face {
+  font-family: "Cormorant";
+  src: url("../fonts/Cormorant-MediumItalic.woff2") format("woff2");
+  font-weight: 500;
+  font-style: italic;
+  font-display: swap;
+}
+@font-face {
+  font-family: "Cormorant";
+  src: url("../fonts/Cormorant-SemiBold.woff2") format("woff2");
+  font-weight: 600;
+  font-style: normal;
+  font-display: swap;
+}
+@font-face {
+  font-family: "Cormorant";
+  src: url("../fonts/Cormorant-SemiBoldItalic.woff2") format("woff2");
+  font-weight: 600;
+  font-style: italic;
+  font-display: swap;
+}
+
+:root {
+  --font-sans: "Cormorant", Garamond, "Iowan Old Style", Georgia, serif;
+}

package/kit/shared/astro/BottomBar.ts

@@ -0,0 +1,2 @@
+// Written by scripts/shared.mjs (npm run shared). Do not edit.
+export { default } from '@agentic-design-kits/swiss-minimal/astro/BottomBar.astro';

package/kit/shared/astro/CardGrid.ts

@@ -0,0 +1,2 @@
+// Written by scripts/shared.mjs (npm run shared). Do not edit.
+export { default } from '@agentic-design-kits/swiss-minimal/astro/CardGrid.astro';

package/kit/shared/astro/Cta.ts

@@ -0,0 +1,2 @@
+// Written by scripts/shared.mjs (npm run shared). Do not edit.
+export { default } from '@agentic-design-kits/swiss-minimal/astro/Cta.astro';

package/kit/shared/astro/Dialog.ts

@@ -0,0 +1,2 @@
+// Written by scripts/shared.mjs (npm run shared). Do not edit.
+export { default } from '@agentic-design-kits/swiss-minimal/astro/Dialog.astro';

package/kit/shared/astro/Drawer.ts

@@ -0,0 +1,2 @@
+// Written by scripts/shared.mjs (npm run shared). Do not edit.
+export { default } from '@agentic-design-kits/swiss-minimal/astro/Drawer.astro';

package/kit/shared/astro/DrawerButton.ts

@@ -0,0 +1,2 @@
+// Written by scripts/shared.mjs (npm run shared). Do not edit.
+export { default } from '@agentic-design-kits/swiss-minimal/astro/DrawerButton.astro';

package/kit/shared/astro/Ellipse.ts

@@ -0,0 +1,2 @@
+// Written by scripts/shared.mjs (npm run shared). Do not edit.
+export { default } from '@agentic-design-kits/swiss-minimal/astro/Ellipse.astro';

package/kit/shared/astro/FavoriteButton.ts

@@ -0,0 +1,2 @@
+// Written by scripts/shared.mjs (npm run shared). Do not edit.
+export { default } from '@agentic-design-kits/swiss-minimal/astro/FavoriteButton.astro';

package/kit/shared/astro/FeaturesList.ts

@@ -0,0 +1,2 @@
+// Written by scripts/shared.mjs (npm run shared). Do not edit.
+export { default } from '@agentic-design-kits/swiss-minimal/astro/FeaturesList.astro';

package/kit/shared/astro/FilePicker.ts

@@ -0,0 +1,2 @@
+// Written by scripts/shared.mjs (npm run shared). Do not edit.
+export { default } from '@agentic-design-kits/swiss-minimal/astro/FilePicker.astro';

package/kit/shared/astro/Footer.ts

@@ -0,0 +1,2 @@
+// Written by scripts/shared.mjs (npm run shared). Do not edit.
+export { default } from '@agentic-design-kits/swiss-minimal/astro/Footer.astro';

package/kit/shared/astro/Hero.ts

@@ -0,0 +1,2 @@
+// Written by scripts/shared.mjs (npm run shared). Do not edit.
+export { default } from '@agentic-design-kits/swiss-minimal/astro/Hero.astro';

package/kit/shared/astro/IconTemplates.ts

@@ -0,0 +1,2 @@
+// Written by scripts/shared.mjs (npm run shared). Do not edit.
+export { default } from '@agentic-design-kits/swiss-minimal/astro/IconTemplates.astro';

package/kit/shared/astro/MenuButton.ts

@@ -0,0 +1,2 @@
+// Written by scripts/shared.mjs (npm run shared). Do not edit.
+export { default } from '@agentic-design-kits/swiss-minimal/astro/MenuButton.astro';

package/kit/shared/astro/MenuItems.ts

@@ -0,0 +1,2 @@
+// Written by scripts/shared.mjs (npm run shared). Do not edit.
+export { default } from '@agentic-design-kits/swiss-minimal/astro/MenuItems.astro';

package/kit/shared/astro/MenuPanel.ts

@@ -0,0 +1,2 @@
+// Written by scripts/shared.mjs (npm run shared). Do not edit.
+export { default } from '@agentic-design-kits/swiss-minimal/astro/MenuPanel.astro';

package/kit/shared/astro/NumCircle.ts

@@ -0,0 +1,2 @@
+// Written by scripts/shared.mjs (npm run shared). Do not edit.
+export { default } from '@agentic-design-kits/swiss-minimal/astro/NumCircle.astro';

package/kit/shared/astro/OutputPanel.ts

@@ -0,0 +1,2 @@
+// Written by scripts/shared.mjs (npm run shared). Do not edit.
+export { default } from '@agentic-design-kits/swiss-minimal/astro/OutputPanel.astro';

package/kit/shared/astro/PageTitle.ts

@@ -0,0 +1,2 @@
+// Written by scripts/shared.mjs (npm run shared). Do not edit.
+export { default } from '@agentic-design-kits/swiss-minimal/astro/PageTitle.astro';

package/kit/shared/astro/Pager.ts

@@ -0,0 +1,2 @@
+// Written by scripts/shared.mjs (npm run shared). Do not edit.
+export { default } from '@agentic-design-kits/swiss-minimal/astro/Pager.astro';

package/kit/shared/astro/PostFeature.ts

@@ -0,0 +1,2 @@
+// Written by scripts/shared.mjs (npm run shared). Do not edit.
+export { default } from '@agentic-design-kits/swiss-minimal/astro/PostFeature.astro';

package/kit/shared/astro/PostHeader.ts

@@ -0,0 +1,2 @@
+// Written by scripts/shared.mjs (npm run shared). Do not edit.
+export { default } from '@agentic-design-kits/swiss-minimal/astro/PostHeader.astro';

package/kit/shared/astro/PostList.ts

@@ -0,0 +1,2 @@
+// Written by scripts/shared.mjs (npm run shared). Do not edit.
+export { default } from '@agentic-design-kits/swiss-minimal/astro/PostList.astro';

package/kit/shared/astro/PostNav.ts

@@ -0,0 +1,2 @@
+// Written by scripts/shared.mjs (npm run shared). Do not edit.
+export { default } from '@agentic-design-kits/swiss-minimal/astro/PostNav.astro';

package/kit/shared/astro/SummaryList.ts

@@ -0,0 +1,2 @@
+// Written by scripts/shared.mjs (npm run shared). Do not edit.
+export { default } from '@agentic-design-kits/swiss-minimal/astro/SummaryList.astro';

package/kit/shared/astro/ThemeToggle.ts

@@ -0,0 +1,2 @@
+// Written by scripts/shared.mjs (npm run shared). Do not edit.
+export { default } from '@agentic-design-kits/swiss-minimal/astro/ThemeToggle.astro';

package/kit/shared/dialog.ts

@@ -0,0 +1,2 @@
+// Written by scripts/shared.mjs (npm run shared). Do not edit.
+import '@agentic-design-kits/swiss-minimal/dialog.js';

package/kit/shared/drawer.ts

@@ -0,0 +1,2 @@
+// Written by scripts/shared.mjs (npm run shared). Do not edit.
+import '@agentic-design-kits/swiss-minimal/drawer.js';

package/kit/shared/favorites.ts

@@ -0,0 +1,2 @@
+// Written by scripts/shared.mjs (npm run shared). Do not edit.
+export * from '@agentic-design-kits/swiss-minimal/favorites.js';

package/kit/shared/file-pick.ts

@@ -0,0 +1,2 @@
+// Written by scripts/shared.mjs (npm run shared). Do not edit.
+import '@agentic-design-kits/swiss-minimal/file-pick.js';

package/kit/shared/icon-controls.ts

@@ -0,0 +1,2 @@
+// Written by scripts/shared.mjs (npm run shared). Do not edit.
+export * from '@agentic-design-kits/swiss-minimal/icon-controls.js';

package/kit/shared/jump.ts

@@ -0,0 +1,2 @@
+// Written by scripts/shared.mjs (npm run shared). Do not edit.
+import '@agentic-design-kits/swiss-minimal/jump.js';

package/kit/shared/marquee.ts

@@ -0,0 +1,2 @@
+// Written by scripts/shared.mjs (npm run shared). Do not edit.
+export * from '@agentic-design-kits/swiss-minimal/marquee.js';

package/kit/shared/new-dot.ts

@@ -0,0 +1,2 @@
+// Written by scripts/shared.mjs (npm run shared). Do not edit.
+import '@agentic-design-kits/swiss-minimal/new-dot.js';

package/kit/shared/output.ts

@@ -0,0 +1,2 @@
+// Written by scripts/shared.mjs (npm run shared). Do not edit.
+export * from '@agentic-design-kits/swiss-minimal/output.js';

package/kit/shared/panel.ts

@@ -0,0 +1,2 @@
+// Written by scripts/shared.mjs (npm run shared). Do not edit.
+import '@agentic-design-kits/swiss-minimal/panel.js';

package/kit/tailwind.css

@@ -0,0 +1,24 @@
+/* Verdigris for Tailwind v4. Import this once, from your site's global stylesheet:
+
+     @import "@agentic-design-kits/verdigris/tailwind.css";
+
+   It loads Swiss Minimal's Tailwind entry (Tailwind itself, the shared theme.css in Tailwind's
+   `components` layer, and the token utilities: bg-paper, text-ink, text-muted, border-rule,
+   bg-bar and so on), then puts Verdigris's typefaces and theme on top, in the same layer. A
+   utility in your markup (`pt-0`, `max-w-none`) still beats a kit class it sits beside. */
+@import "@agentic-design-kits/swiss-minimal/tailwind.css";
+@import "./fonts.css" layer(components);
+@import "./verdigris.css" layer(components);
+@source not inline("uppercase");   /* no capitals in Verdigris: the utility is never generated */
+
+/* Verdigris's own components. Tailwind does not look inside node_modules by itself. */
+@source "./astro";
+
+/* Copper, which Swiss Minimal does not have: text-copper and bg-copper (large shapes only),
+   text-copper-text (labels and small ornament on paper), text-copper-bright (on bar). Like
+   Swiss Minimal's, they point at the variables, so they follow light and dark. */
+@theme inline {
+  --color-copper: var(--copper);
+  --color-copper-text: var(--copper-text);
+  --color-copper-bright: var(--copper-bright);
+}

package/kit/types.ts

@@ -0,0 +1,3 @@
+// The kit's types (MenuItem, PanelTab, Post, Feature, …) are Swiss Minimal's.
+//   import type { MenuItem } from '@agentic-design-kits/verdigris/types';
+export * from '@agentic-design-kits/swiss-minimal/types';