Mercurial

diff mrjunejune/src/notes/login.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 6cdee35a7ba9
children
line wrap: on
line diff
--- a/mrjunejune/src/notes/login.html	Tue Aug 04 16:49:11 2026 -0700
+++ b/mrjunejune/src/notes/login.html	Wed Aug 05 05:25:40 2026 -0700
@@ -7,18 +7,18 @@
     .login-page {
       max-width: 400px;
       margin: 100px auto;
-      padding: 20px;
+      padding: var(--zenbu-sys-padding-lg);
     }
     .login-box {
       background: #fff;
       border: 1px solid #ddd;
-      border-radius: 8px;
-      padding: 32px;
+      border-radius: var(--zenbu-sys-radius-control);
+      padding: var(--zenbu-sys-padding-xl);
       box-shadow: 0 2px 8px rgba(0,0,0,0.1);
     }
     .login-box h1 {
       margin: 0 0 24px 0;
-      font-size: 24px;
+      font-size: var(--zenbu-sys-font-size-2xl);
       text-align: center;
     }
     .login-box label {
@@ -28,10 +28,14 @@
     }
     .login-box input {
       width: 100%;
-      padding: 12px;
+      min-height: var(--zenbu-control-height);
+      padding:
+        var(--zenbu-control-padding-block)
+        var(--zenbu-control-padding-inline);
       border: 1px solid #ccc;
-      border-radius: 4px;
-      font-size: 16px;
+      border-radius: var(--zenbu-sys-radius-control-small);
+      font-size: var(--zenbu-control-font-size);
+      line-height: var(--zenbu-control-line-height);
       box-sizing: border-box;
     }
     .login-box input:focus {
@@ -40,15 +44,16 @@
     }
     .login-box button {
       width: 100%;
-      padding: 12px;
       margin-top: 16px;
       background: #0078ff;
       color: white;
       border: none;
-      border-radius: 4px;
-      font-size: 16px;
+      border-radius: var(--zenbu-sys-radius-control-small);
       cursor: pointer;
     }
+    .login-box zen-button {
+      width: 100%;
+    }
     .login-box button:hover {
       background: #0066dd;
     }
@@ -67,9 +72,13 @@
     <div class="login-box">
       <h1>Notes Login</h1>
       <form id="login-form">
-        <label for="token">Access Token</label>
-        <input type="password" id="token" placeholder="Enter your access token" required>
-        <button type="submit">Login</button>
+        <zen-field appearance="plain" size="lg">
+          <label for="token">Access Token</label>
+          <input type="password" id="token" placeholder="Enter your access token" required>
+        </zen-field>
+        <zen-button appearance="plain" size="lg">
+          <button type="submit">Login</button>
+        </zen-button>
         <p class="error-msg" id="error-msg">Invalid token</p>
       </form>
     </div>