Mercurial

diff mrjunejune/test/snapshots/tools_file_converter.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/tools_file_converter.snapshot	Tue Aug 04 16:49:11 2026 -0700
+++ b/mrjunejune/test/snapshots/tools_file_converter.snapshot	Wed Aug 05 05:25:40 2026 -0700
@@ -38,13 +38,13 @@
         .container {
             max-width: 800px;
             margin: 2rem auto;
-            padding: 2rem;
+            padding: var(--zenbu-sys-padding-xl);
         }
 
         .converter-section {
-            border-radius: 8px;
+            border-radius: var(--zenbu-sys-radius-control);
             border: 2px solid var(--lightgray);
-            padding: 2rem;
+            padding: var(--zenbu-sys-padding-xl);
             margin-bottom: 2rem;
         }
 
@@ -64,11 +64,11 @@
         }
 
         input[type="file"] {
-            padding: 0.75rem;
+            padding: var(--zenbu-sys-padding-sm);
             border: 2px dashed #ccc;
-            border-radius: 4px;
+            border-radius: var(--zenbu-sys-radius-control-small);
             background: white;
-            font-size: 16px;
+            font-size: var(--zenbu-sys-font-size-md);
         }
 
         button {
@@ -76,12 +76,9 @@
             font-family: "More Thin", sans-serif;
             color: var(--gray-gradient);
             border: none;
-            padding: 0.75rem 1.5rem;
-            border-radius: 4px;
+            border-radius: var(--zenbu-sys-radius-control-small);
             cursor: pointer;
-            font-size: 1rem;
             margin-top: 1rem;
-            min-height: 44px;
         }
 
         button:hover {
@@ -95,9 +92,9 @@
 
         .result {
             margin-top: 1rem;
-            padding: 1rem;
+            padding: var(--zenbu-sys-padding-md);
             background: white;
-            border-radius: 4px;
+            border-radius: var(--zenbu-sys-radius-control-small);
             display: none;
         }
 
@@ -136,30 +133,28 @@
         /* Mobile responsive */
         @media (max-width: 720px) {
             .container {
-                padding: 1rem;
+                padding: var(--zenbu-sys-padding-md);
                 margin: 1rem auto;
             }
 
             .converter-section {
-                padding: 1.5rem 1rem;
+                padding:
+                  var(--zenbu-sys-padding-lg)
+                  var(--zenbu-sys-padding-md);
             }
 
             .converter-section h2 {
-                font-size: 1.5rem;
+                font-size: var(--zenbu-sys-font-size-2xl);
             }
 
             .file-input-wrapper label {
-                font-size: 1rem;
+                font-size: var(--zenbu-sys-font-size-md);
             }
 
-            button {
-                font-size: 1.1rem;
-                padding: 1rem 1.5rem;
-            }
 
             .result {
-                padding: 1rem;
-                font-size: 1rem;
+                padding: var(--zenbu-sys-padding-md);
+                font-size: var(--zenbu-sys-font-size-md);
             }
         }
     </style>
@@ -185,16 +180,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 */
@@ -202,7 +192,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;
@@ -304,7 +293,7 @@
   }
 </style>
 
-<zen-button id="themeControl" variant="quiet">
+<zen-button id="themeControl" appearance="plain" size="xl">
   <button
     id="themeToggle"
     type="button"
@@ -318,12 +307,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>
 
@@ -338,10 +327,14 @@
 
             <div class="file-input-wrapper">
                 <label for="imageInput">Choose an image file:</label>
-                <input type="file" id="imageInput" accept="image/*">
+                <zen-input appearance="plain" size="md">
+                  <input type="file" id="imageInput" accept="image/*">
+                </zen-input>
             </div>
 
-            <button id="convertImageBtn" onclick="convertImageToWebP()">Convert to WebP</button>
+            <zen-button appearance="plain" size="md">
+              <button id="convertImageBtn" onclick="convertImageToWebP()">Convert to WebP</button>
+            </zen-button>
 
             <div class="loading" id="imageLoading">Converting... Please wait.</div>
 
@@ -357,10 +350,14 @@
 
             <div class="file-input-wrapper">
                 <label for="videoInput">Choose a video file:</label>
-                <input type="file" id="videoInput" accept="video/*">
+                <zen-input appearance="plain" size="md">
+                  <input type="file" id="videoInput" accept="video/*">
+                </zen-input>
             </div>
 
-            <button id="convertVideoBtn" onclick="convertVideoToMP4()">Convert to MP4</button>
+            <zen-button appearance="plain" size="md">
+              <button id="convertVideoBtn" onclick="convertVideoToMP4()">Convert to MP4</button>
+            </zen-button>
 
             <div class="loading" id="videoLoading">Converting... Please wait.</div>