Mercurial

diff 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
line wrap: on
line diff
--- a/design_system/src/index.html	Tue Aug 04 16:49:11 2026 -0700
+++ b/design_system/src/index.html	Wed Aug 05 05:25:40 2026 -0700
@@ -8,8 +8,8 @@
     <link rel="stylesheet" href="/styles/tokens.css" />
     <link rel="stylesheet" href="/styles/themes.css" />
     <link rel="stylesheet" href="/styles/components.css" />
-    <link rel="stylesheet" href="/storybook.css" />
-    <script type="module" src="/storybook.js"></script>
+    <link rel="stylesheet" href="/catalog.css" />
+    <script type="module" src="/catalog.js"></script>
   </head>
   <body>
     <div class="catalog-shell">
@@ -50,9 +50,11 @@
           <a href="/components/stack" data-catalog-link>Stack</a>
         </nav>
 
-        <button id="themeToggle" class="theme-toggle" type="button">
-          Toggle theme
-        </button>
+        <zen-button class="theme-toggle-wrap" appearance="plain" size="sm">
+          <button id="themeToggle" class="theme-toggle" type="button">
+            Toggle theme
+          </button>
+        </zen-button>
       </aside>
 
       <main id="catalogMain" class="catalog-main" tabindex="-1">
@@ -175,6 +177,25 @@
               </zen-stack>
             </section>
             <section class="token-group">
+              <h2>Size scale</h2>
+              <zen-stack gap="tight">
+                <code>xs · sm · md · lg · xl</code>
+                <code>--zenbu-sys-control-height-*</code>
+                <code>--zenbu-sys-control-padding-*</code>
+                <code>--zenbu-sys-font-size-* / --zenbu-sys-line-height-*</code>
+                <code>--zenbu-sys-padding-* / --zenbu-sys-icon-size-*</code>
+              </zen-stack>
+            </section>
+            <section class="token-group token-group-wide">
+              <h2>Token layers</h2>
+              <zen-stack direction="row">
+                <code>--zenbu-ref-* · available values</code>
+                <code>--zenbu-sys-* · semantic intent</code>
+                <code>--zenbu-&lt;component&gt;-* · local aliases</code>
+              </zen-stack>
+              <p>Components consume semantic intent. Themes and density remap the system layer.</p>
+            </section>
+            <section class="token-group">
               <h2>Shape</h2>
               <zen-stack gap="tight">
                 <code>--zen-radius-sm</code>
@@ -210,6 +231,17 @@
               </zen-stack>
             </template>
           </zen-story>
+          <zen-story name="Sizes">
+            <template>
+              <zen-stack direction="row">
+                <zen-button size="xs"><button type="button">Extra small</button></zen-button>
+                <zen-button size="sm"><button type="button">Small</button></zen-button>
+                <zen-button size="md"><button type="button">Medium</button></zen-button>
+                <zen-button size="lg"><button type="button">Large</button></zen-button>
+                <zen-button size="xl"><button type="button">Extra large</button></zen-button>
+              </zen-stack>
+            </template>
+          </zen-story>
           <zen-story name="States">
             <template>
               <zen-stack direction="row">