Mercurial

comparison design_system/src/index.html @ 258:60a876c4587a

Find changesets by keywords (author, files, the commit message), revision number or hash, or revset expression.
[ui] Add semantic primitive ownership Build a layered Zenbu token and sizing system, make authored controls use native-underneath primitives, migrate mrjunejune without imposing visual surfaces, and document/enforce HTML ownership in the catalog and wiki. Co-authored-by: Copilot <[email protected]>
author MrJuneJune <me@mrjunejune.com>
date Wed, 05 Aug 2026 05:25:40 -0700
parents 30c2196d03d4
children
comparison
equal deleted inserted replaced
257:609d3c6aff4e 258:60a876c4587a
6 <meta name="color-scheme" content="light dark" /> 6 <meta name="color-scheme" content="light dark" />
7 <title>Zenbu UI</title> 7 <title>Zenbu UI</title>
8 <link rel="stylesheet" href="/styles/tokens.css" /> 8 <link rel="stylesheet" href="/styles/tokens.css" />
9 <link rel="stylesheet" href="/styles/themes.css" /> 9 <link rel="stylesheet" href="/styles/themes.css" />
10 <link rel="stylesheet" href="/styles/components.css" /> 10 <link rel="stylesheet" href="/styles/components.css" />
11 <link rel="stylesheet" href="/storybook.css" /> 11 <link rel="stylesheet" href="/catalog.css" />
12 <script type="module" src="/storybook.js"></script> 12 <script type="module" src="/catalog.js"></script>
13 </head> 13 </head>
14 <body> 14 <body>
15 <div class="catalog-shell"> 15 <div class="catalog-shell">
16 <aside class="catalog-sidebar"> 16 <aside class="catalog-sidebar">
17 <a class="catalog-brand" href="/" data-catalog-link> 17 <a class="catalog-brand" href="/" data-catalog-link>
48 <a href="/components/field" data-catalog-link>Field</a> 48 <a href="/components/field" data-catalog-link>Field</a>
49 <a href="/components/notifications" data-catalog-link>Notifications</a> 49 <a href="/components/notifications" data-catalog-link>Notifications</a>
50 <a href="/components/stack" data-catalog-link>Stack</a> 50 <a href="/components/stack" data-catalog-link>Stack</a>
51 </nav> 51 </nav>
52 52
53 <button id="themeToggle" class="theme-toggle" type="button"> 53 <zen-button class="theme-toggle-wrap" appearance="plain" size="sm">
54 Toggle theme 54 <button id="themeToggle" class="theme-toggle" type="button">
55 </button> 55 Toggle theme
56 </button>
57 </zen-button>
56 </aside> 58 </aside>
57 59
58 <main id="catalogMain" class="catalog-main" tabindex="-1"> 60 <main id="catalogMain" class="catalog-main" tabindex="-1">
59 <section class="catalog-page" data-catalog-page="overview"> 61 <section class="catalog-page" data-catalog-page="overview">
60 <header class="page-heading"> 62 <header class="page-heading">
173 <code>--zen-space-4: 1rem</code> 175 <code>--zen-space-4: 1rem</code>
174 <code>--zen-space-6: 2rem</code> 176 <code>--zen-space-6: 2rem</code>
175 </zen-stack> 177 </zen-stack>
176 </section> 178 </section>
177 <section class="token-group"> 179 <section class="token-group">
180 <h2>Size scale</h2>
181 <zen-stack gap="tight">
182 <code>xs · sm · md · lg · xl</code>
183 <code>--zenbu-sys-control-height-*</code>
184 <code>--zenbu-sys-control-padding-*</code>
185 <code>--zenbu-sys-font-size-* / --zenbu-sys-line-height-*</code>
186 <code>--zenbu-sys-padding-* / --zenbu-sys-icon-size-*</code>
187 </zen-stack>
188 </section>
189 <section class="token-group token-group-wide">
190 <h2>Token layers</h2>
191 <zen-stack direction="row">
192 <code>--zenbu-ref-* · available values</code>
193 <code>--zenbu-sys-* · semantic intent</code>
194 <code>--zenbu-&lt;component&gt;-* · local aliases</code>
195 </zen-stack>
196 <p>Components consume semantic intent. Themes and density remap the system layer.</p>
197 </section>
198 <section class="token-group">
178 <h2>Shape</h2> 199 <h2>Shape</h2>
179 <zen-stack gap="tight"> 200 <zen-stack gap="tight">
180 <code>--zen-radius-sm</code> 201 <code>--zen-radius-sm</code>
181 <code>--zen-radius-md</code> 202 <code>--zen-radius-md</code>
182 <code>--zen-radius-lg</code> 203 <code>--zen-radius-lg</code>
205 <template> 226 <template>
206 <zen-stack direction="row"> 227 <zen-stack direction="row">
207 <zen-button><button type="button">Primary action</button></zen-button> 228 <zen-button><button type="button">Primary action</button></zen-button>
208 <zen-button variant="quiet"><button type="button">Quiet action</button></zen-button> 229 <zen-button variant="quiet"><button type="button">Quiet action</button></zen-button>
209 <zen-button variant="danger"><button type="button">Delete item</button></zen-button> 230 <zen-button variant="danger"><button type="button">Delete item</button></zen-button>
231 </zen-stack>
232 </template>
233 </zen-story>
234 <zen-story name="Sizes">
235 <template>
236 <zen-stack direction="row">
237 <zen-button size="xs"><button type="button">Extra small</button></zen-button>
238 <zen-button size="sm"><button type="button">Small</button></zen-button>
239 <zen-button size="md"><button type="button">Medium</button></zen-button>
240 <zen-button size="lg"><button type="button">Large</button></zen-button>
241 <zen-button size="xl"><button type="button">Extra large</button></zen-button>
210 </zen-stack> 242 </zen-stack>
211 </template> 243 </template>
212 </zen-story> 244 </zen-story>
213 <zen-story name="States"> 245 <zen-story name="States">
214 <template> 246 <template>