feat(ui): align button styles, toolbar tokens, and nav drawer with learn-dvc

Author: alisadeghiaghili

src/style.css

@@ -13,14 +13,14 @@
   --coral: #f07070;
   --paper: #f3ede3;
   --paper-ink: #1a1f22;
-  --line: #2a353b;
+  --line: #2e3d4d;
 
   /* shell aliases (learn-r structure uses these names) */
-  --haze: var(--muted);
+  --haze: #8fa0b2;
   --text: var(--ink);
-  --panel-2: var(--raised);
-  --dvc: var(--amber);
-  --code: var(--amber);
+  --panel-2: #22303c;
+  --dvc: #3776ab;
+  --code: #60a5fa;
   --ok: var(--teal);
   --warn: var(--amber);
   --err: var(--coral);
@@ -171,18 +171,14 @@ body {
 .nav-bars::after { top: 6px; }
 
 .nav-drawer {
-  display: contents !important;
-}
-
-.nav-drawer button {
-  min-height: 40px;
+  display: contents;
 }
 
 .help-btn {
-  width: 40px;
-  height: 40px;
-  min-width: 40px;
-  min-height: 40px;
+  width: 36px;
+  height: 36px;
+  min-width: 36px;
+  min-height: 36px;
   padding: 0;
   border: 1px solid var(--line);
   border-radius: 8px;
@@ -207,8 +203,8 @@ body {
   display: inline-flex;
   align-items: center;
   gap: 6px;
-  min-height: 40px;
-  padding: 8px 12px;
+  min-height: 36px;
+  padding: 7px 12px;
   border-radius: 8px;
   border: 1px solid var(--line);
   background: transparent;
@@ -225,26 +221,31 @@ body {
   text-decoration: none;
 }
 
+.tb-link:focus-visible {
+  outline: 2px solid var(--code);
+  outline-offset: 2px;
+}
+
 .tb-stat {
   display: inline-flex;
   align-items: center;
   gap: 6px;
-  min-height: 40px;
-  padding: 8px 12px;
+  min-height: 36px;
+  padding: 6px 10px;
   border-radius: 8px;
-  border: 1px solid color-mix(in srgb, var(--amber) 35%, var(--line));
+  border: 1px solid color-mix(in srgb, var(--dvc) 35%, var(--line));
   background: color-mix(in srgb, var(--panel-2) 65%, transparent);
-  color: color-mix(in srgb, var(--text) 90%, var(--amber));
+  color: color-mix(in srgb, var(--text) 90%, var(--dvc));
   font-family: var(--mono);
   font-size: 13px;
-  font-weight: 500;
-  letter-spacing: 0.02em;
+  font-weight: 600;
+  letter-spacing: 0.04em;
   box-sizing: border-box;
   user-select: none;
 }
 
 .tb-stat .visitor-icon {
-  color: var(--amber);
+  color: var(--dvc);
   flex-shrink: 0;
 }
 
@@ -254,15 +255,20 @@ body {
 
 .tb-link.support {
   color: #ffe6b0;
-  border-color: color-mix(in srgb, var(--amber) 55%, var(--line));
-  background: color-mix(in srgb, var(--amber) 14%, var(--panel-2));
+  border-color: color-mix(in srgb, var(--remote) 55%, var(--line));
+  background: color-mix(in srgb, var(--remote) 14%, var(--panel-2));
+}
+
+.tb-link.support:hover {
+  background: color-mix(in srgb, var(--remote) 24%, var(--panel-2));
 }
 
 .tb-link.gh {
   gap: 0;
   justify-content: center;
-  width: 40px;
-  min-width: 40px;
+  width: 36px;
+  min-width: 36px;
+  height: 36px;
   padding: 0;
 }
 
@@ -275,7 +281,7 @@ button,
 .btn {
   appearance: none;
   border: 1px solid var(--line);
-  background: var(--raised);
+  background: var(--panel-2);
   color: var(--text);
   border-radius: 8px;
   padding: 7px 12px;
@@ -288,21 +294,27 @@ button,
 
 button:hover,
 .btn:hover {
-  border-color: var(--amber);
-  color: var(--amber);
-  background: #222c32;
+  border-color: var(--haze);
+  color: var(--text);
+  background: #2a3a4a;
 }
 
 button:focus-visible,
 .btn:focus-visible {
-  outline: 2px solid var(--amber);
+  outline: 2px solid var(--code);
   outline-offset: 2px;
 }
 
+button:disabled,
+.btn:disabled {
+  opacity: 0.45;
+  cursor: not-allowed;
+}
+
 button.primary,
 .btn.primary {
-  background: color-mix(in srgb, var(--amber) 28%, var(--panel-2));
-  border-color: color-mix(in srgb, var(--amber) 55%, var(--line));
+  background: color-mix(in srgb, var(--dvc) 35%, var(--panel-2));
+  border-color: color-mix(in srgb, var(--dvc) 55%, var(--line));
   color: var(--text);
 }
 
@@ -316,6 +328,12 @@ button.ghost,
   background: transparent;
 }
 
+.btn-sm {
+  min-height: 28px;
+  padding: 4px 10px;
+  font-size: 12px;
+}
+
 /* —— Board area (Memory / Plot tabs) —— */
 .board-wrap {
   display: flex;
@@ -1318,7 +1336,7 @@ button.ghost,
   }
 
   .nav-drawer {
-    display: none !important;
+    display: none;
     position: absolute;
     top: calc(100% + 6px);
     inset-inline-end: 0;
@@ -1335,11 +1353,30 @@ button.ghost,
   }
 
   .nav-drawer.is-open {
+    display: flex;
+  }
+
+  .nav-drawer[hidden] {
+    display: none !important;
+  }
+
+  .nav-drawer.is-open[hidden] {
     display: flex !important;
   }
 
-  .nav-drawer button {
+  .nav-drawer button,
+  .nav-drawer .tb-link {
     width: 100%;
+    justify-content: flex-start;
+    min-height: 44px;
+  }
+
+  .modal-actions {
+    flex-wrap: wrap;
+  }
+
+  .modal-actions button {
+    flex: 1 1 auto;
     min-height: 44px;
   }
 

src/ui/app.ts

@@ -162,7 +162,7 @@ export class App {
             <button type="button" class="nav-toggle" data-action="nav-toggle" aria-label="Menu" aria-expanded="false" aria-controls="nav-drawer">
               <span class="nav-bars" aria-hidden="true"></span>
             </button>
-            <div class="nav-drawer" id="nav-drawer">
+            <div class="nav-drawer" id="nav-drawer" hidden>
               <button type="button" data-action="levels">Levels</button>
               <button type="button" data-action="lesson">Lesson</button>
               <button type="button" data-action="goal">Guide</button>
@@ -260,24 +260,17 @@ export class App {
     const drawer = this.root.querySelector<HTMLElement>('#nav-drawer');
     const btn = this.root.querySelector<HTMLButtonElement>('[data-action="nav-toggle"]');
     if (!drawer || !btn) return;
-    const open = drawer.hasAttribute('hidden');
-    if (open) {
-      drawer.removeAttribute('hidden');
-      drawer.classList.add('is-open');
-      btn.setAttribute('aria-expanded', 'true');
-    } else {
-      drawer.setAttribute('hidden', '');
-      drawer.classList.remove('is-open');
-      btn.setAttribute('aria-expanded', 'false');
-    }
+    const open = drawer.classList.toggle('is-open');
+    drawer.hidden = !open;
+    btn.setAttribute('aria-expanded', String(open));
   }
 
   private closeNav(): void {
     const drawer = this.root.querySelector<HTMLElement>('#nav-drawer');
     const btn = this.root.querySelector<HTMLButtonElement>('[data-action="nav-toggle"]');
     if (!drawer || !btn) return;
-    drawer.setAttribute('hidden', '');
     drawer.classList.remove('is-open');
+    drawer.hidden = true;
     btn.setAttribute('aria-expanded', 'false');
   }