Mercurial

diff mrjunejune/src/notes/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 60918f88070e
children
line wrap: on
line diff
--- a/mrjunejune/src/notes/index.html	Tue Aug 04 16:49:11 2026 -0700
+++ b/mrjunejune/src/notes/index.html	Wed Aug 05 05:25:40 2026 -0700
@@ -7,7 +7,7 @@
     .notes-page {
       min-width: 70%;
       margin: 0 auto;
-      padding: 20px;
+      padding: var(--zenbu-sys-padding-lg);
     }
     .notes-header {
       display: flex;
@@ -15,36 +15,36 @@
       align-items: center;
       margin-bottom: 20px;
       flex-wrap: wrap;
-      gap: 12px;
+      gap: var(--zenbu-sys-space-control);
     }
     .notes-header h1 {
       margin: 0;
       display: flex;
       align-items: center;
-      gap: 12px;
+      gap: var(--zenbu-sys-space-control);
     }
     .note-id-display {
-      font-size: 14px;
+      font-size: var(--zenbu-sys-font-size-sm);
       color: #666;
       background: #f0f0f0;
-      padding: 4px 12px;
-      border-radius: 4px;
+      padding:
+        var(--zenbu-sys-control-padding-block-xs)
+        var(--zenbu-sys-control-padding-inline-sm);
+      border-radius: var(--zenbu-sys-radius-control-small);
       font-weight: normal;
     }
     .notes-actions {
       display: flex;
-      gap: 8px;
+      gap: var(--zenbu-sys-space-related);
       align-items: center;
     }
     .notes-actions button, .notes-actions a {
-      padding: 8px 16px;
       border: 1px solid #ccc;
-      border-radius: 4px;
+      border-radius: var(--zenbu-sys-radius-control-small);
       background: #fff;
       cursor: pointer;
       text-decoration: none;
       color: #333;
-      font-size: 14px;
     }
     .notes-actions button:hover, .notes-actions a:hover {
       background: #f5f5f5;
@@ -78,8 +78,8 @@
     }
     .new-note-form {
       background: white;
-      padding: 24px;
-      border-radius: 8px;
+      padding: var(--zenbu-sys-padding-lg);
+      border-radius: var(--zenbu-sys-radius-control);
       width: 400px;
       max-width: 90%;
     }
@@ -88,23 +88,21 @@
     }
     .new-note-form input {
       width: 100%;
-      padding: 10px;
+      padding: var(--zenbu-sys-padding-sm);
       border: 1px solid #ccc;
-      border-radius: 4px;
-      font-size: 16px;
+      border-radius: var(--zenbu-sys-radius-control-small);
+      font-size: var(--zenbu-sys-font-size-md);
       box-sizing: border-box;
       margin-bottom: 16px;
     }
     .new-note-form .form-actions {
       display: flex;
-      gap: 8px;
+      gap: var(--zenbu-sys-space-related);
       justify-content: flex-end;
     }
     .new-note-form button {
-      padding: 8px 16px;
-      border-radius: 4px;
+      border-radius: var(--zenbu-sys-radius-control-small);
       cursor: pointer;
-      font-size: 14px;
     }
     .new-note-form .btn-cancel {
       background: #f5f5f5;
@@ -116,7 +114,7 @@
       border: none;
     }
     .note-hint {
-      font-size: 12px;
+      font-size: var(--zenbu-sys-font-size-xs);
       color: #666;
       margin-top: -12px;
       margin-bottom: 16px;
@@ -133,8 +131,12 @@
         <span class="note-id-display" id="note-id-display">index</span>
       </h1>
       <div class="notes-actions">
-        <button onclick="goHome()"> Home </button>
-        <button onclick="logout()" class="btn-danger">Logout</button>
+        <zen-button appearance="plain" size="sm">
+          <button onclick="goHome()"> Home </button>
+        </zen-button>
+        <zen-button appearance="plain" size="sm">
+          <button onclick="logout()" class="btn-danger">Logout</button>
+        </zen-button>
       </div>
     </div>
 
@@ -145,11 +147,17 @@
   <div class="new-note-dialog" id="new-note-dialog">
     <div class="new-note-form">
       <h2>Create New Note</h2>
-      <input type="text" id="new-note-id" placeholder="note-id (e.g., my-ideas)">
+      <zen-input appearance="plain" size="md">
+        <input type="text" id="new-note-id" placeholder="note-id (e.g., my-ideas)">
+      </zen-input>
       <p class="note-hint">Use lowercase letters, numbers, and hyphens only</p>
       <div class="form-actions">
-        <button class="btn-cancel" onclick="hideNewNoteDialog()">Cancel</button>
-        <button class="btn-create" onclick="createNewNote()">Create & Open</button>
+        <zen-button appearance="plain" size="sm">
+          <button class="btn-cancel" onclick="hideNewNoteDialog()">Cancel</button>
+        </zen-button>
+        <zen-button appearance="plain" size="sm">
+          <button class="btn-create" onclick="createNewNote()">Create & Open</button>
+        </zen-button>
       </div>
     </div>
   </div>