Mercurial

diff mrjunejune/test/snapshots/talk.snapshot @ 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/mrjunejune/test/snapshots/talk.snapshot	Tue Aug 04 16:49:11 2026 -0700
+++ b/mrjunejune/test/snapshots/talk.snapshot	Wed Aug 05 05:25:40 2026 -0700
@@ -34,8 +34,8 @@
 <script src="/public/pwa-register.js" defer></script>
 
   <style>
-    body { font-family: sans-serif; padding: 20px; }
-    #messages { height: 200px; border: 1px solid #ccc; overflow-y: scroll; margin-bottom: 10px; padding: 10px; }
+    body { font-family: sans-serif; padding: var(--zenbu-sys-padding-lg); }
+    #messages { height: 200px; border: 1px solid #ccc; overflow-y: scroll; margin-bottom: var(--zenbu-sys-space-control); padding: var(--zenbu-sys-padding-md); }
     #chat { display: flex; gap: 10px; }
     input { flex-grow: 1; }
   </style>
@@ -61,16 +61,11 @@
   }
 
   #themeToggle {
+    display: flex;
     flex-direction: column;
-    min-width: 4.5rem;
-    padding: 0.35rem;
-    border-radius: 1.5rem;
-  }
-
-  #themeName {
-    font-family: "More", sans-serif;
-    font-size: 0.65rem;
-    line-height: 1;
+    padding: 0;
+    border: 0;
+    background: transparent;
   }
 
   /* Professional header */
@@ -78,7 +73,6 @@
     margin: auto;
     padding: 1.5em 1em;
     font-family: "More", sans-serif;
-    box-shadow: var(--zen-shadow-sm);
     width: 720px;
     max-width: calc(100% - 2em);
     text-align: center;
@@ -180,7 +174,7 @@
   }
 </style>
 
-<zen-button id="themeControl" variant="quiet">
+<zen-button id="themeControl" appearance="plain" size="xl">
   <button
     id="themeToggle"
     type="button"
@@ -194,12 +188,12 @@
       height="50"
       width="50"
     >
-    <span id="themeName" aria-live="polite">Auto</span>
+    <span id="themeName" class="zen-visually-hidden" aria-live="polite">Auto</span>
   </button>
 </zen-button>
 
 <header>
-  <h1><a href="/">MrJuneJune</a></h1>
+  <h1><a href="/" data-zen-link-effect="none">MrJuneJune</a></h1>
 </header>
 <script src="/index.js"></script>
 
@@ -209,8 +203,12 @@
     <div id="messages"></div>
 
     <div id="chat">
-      <input type="text" id="messageInput" placeholder="Type a message...">
-      <button id="sendBtn">Send</button>
+      <zen-input appearance="plain" size="md">
+        <input type="text" id="messageInput" placeholder="Type a message...">
+      </zen-input>
+      <zen-button appearance="plain" size="md">
+        <button id="sendBtn">Send</button>
+      </zen-button>
     </div>
   </main>
   <div style="display: flex; align-items: center; justify-content: center; margin: 30px 0px;">