@tenonhq/dovetail-dashboard 0.0.25 → 0.0.27

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@tenonhq/dovetail-dashboard",
-  "version": "0.0.25",
+  "version": "0.0.27",
   "description": "Update Set Dashboard for Dovetail",
   "main": "server.js",
   "scripts": {

package/public/claude-plans.css

@@ -1088,57 +1088,95 @@
 
 /* ════════════════════════════════════════════════════════════════════════════
    Dark theme overrides.
-   The page already flows through the semantic tokens, so only the semantic
-   color chips that hardcode light pastels need explicit dark variants here.
+   Status pills, badges, and callouts route through the tag tokens — which
+   tokens.css redefines for dark — so no hex literals are needed here. Each
+   selector picks the tag pair whose semantic meaning matches the chip.
    The .cp-theme-toggle button itself is styled in styles.css (shared).
    ════════════════════════════════════════════════════════════════════════════ */
-[data-theme="dark"] .cp-status-DRAFT    { background: #322d0c; color: #e8d860; border-color: #f4dc0033; }
-[data-theme="dark"] .cp-status-APPROVED { background: #14301c; color: #8fe39d; border-color: #62dc4433; }
+[data-theme="dark"] .cp-status-DRAFT {
+  background: var(--tag-yellow-bg);
+  color: var(--tag-yellow-fg);
+  border-color: var(--tag-yellow-fg);
+  border-color: color-mix(in srgb, var(--tag-yellow-fg) 20%, transparent);
+}
+[data-theme="dark"] .cp-status-APPROVED {
+  background: var(--tag-green-bg);
+  color: var(--tag-green-fg);
+  border-color: color-mix(in srgb, var(--tag-green-fg) 20%, transparent);
+}
 
-[data-theme="dark"] .cp-c-badge-success { background: #14301c; color: #8fe39d; border-color: #62dc4433; }
-[data-theme="dark"] .cp-c-badge-warning { background: #322d0c; color: #e8d860; border-color: #f4dc0033; }
-[data-theme="dark"] .cp-c-badge-danger  { background: #371616; color: #f08f8f; border-color: #f4393933; }
-[data-theme="dark"] .cp-c-badge-info    { background: #0e2c3a; color: #8fd9f5; border-color: #76d6ff33; }
+[data-theme="dark"] .cp-c-badge-success {
+  background: var(--tag-green-bg);
+  color: var(--tag-green-fg);
+  border-color: color-mix(in srgb, var(--tag-green-fg) 20%, transparent);
+}
+[data-theme="dark"] .cp-c-badge-warning {
+  background: var(--tag-yellow-bg);
+  color: var(--tag-yellow-fg);
+  border-color: color-mix(in srgb, var(--tag-yellow-fg) 20%, transparent);
+}
+[data-theme="dark"] .cp-c-badge-danger {
+  background: var(--tag-red-bg);
+  color: var(--tag-red-fg);
+  border-color: color-mix(in srgb, var(--tag-red-fg) 20%, transparent);
+}
+[data-theme="dark"] .cp-c-badge-info {
+  background: var(--tag-cyan-bg);
+  color: var(--tag-cyan-fg);
+  border-color: color-mix(in srgb, var(--tag-cyan-fg) 20%, transparent);
+}
 
-[data-theme="dark"] .cp-c-callout-info    { background: #0e2c3a55; border-color: #76d6ff33; }
-[data-theme="dark"] .cp-c-callout-success { background: #14301c55; border-color: #62dc4433; }
-[data-theme="dark"] .cp-c-callout-warning { background: #322d0c55; border-color: #f4dc0033; }
-[data-theme="dark"] .cp-c-callout-danger  { background: #37161655; border-color: #f4393933; }
-[data-theme="dark"] .cp-c-callout-info    .cp-c-callout-icon { color: #8fd9f5; }
-[data-theme="dark"] .cp-c-callout-success .cp-c-callout-icon { color: #8fe39d; }
-[data-theme="dark"] .cp-c-callout-warning .cp-c-callout-icon { color: #e8d860; }
-[data-theme="dark"] .cp-c-callout-danger  .cp-c-callout-icon { color: #f08f8f; }
+[data-theme="dark"] .cp-c-callout-info {
+  background: color-mix(in srgb, var(--tag-cyan-bg) 60%, transparent);
+  border-color: color-mix(in srgb, var(--tag-cyan-fg) 20%, transparent);
+}
+[data-theme="dark"] .cp-c-callout-success {
+  background: color-mix(in srgb, var(--tag-green-bg) 60%, transparent);
+  border-color: color-mix(in srgb, var(--tag-green-fg) 20%, transparent);
+}
+[data-theme="dark"] .cp-c-callout-warning {
+  background: color-mix(in srgb, var(--tag-yellow-bg) 60%, transparent);
+  border-color: color-mix(in srgb, var(--tag-yellow-fg) 20%, transparent);
+}
+[data-theme="dark"] .cp-c-callout-danger {
+  background: color-mix(in srgb, var(--tag-red-bg) 60%, transparent);
+  border-color: color-mix(in srgb, var(--tag-red-fg) 20%, transparent);
+}
+[data-theme="dark"] .cp-c-callout-info    .cp-c-callout-icon { color: var(--tag-cyan-fg); }
+[data-theme="dark"] .cp-c-callout-success .cp-c-callout-icon { color: var(--tag-green-fg); }
+[data-theme="dark"] .cp-c-callout-warning .cp-c-callout-icon { color: var(--tag-yellow-fg); }
+[data-theme="dark"] .cp-c-callout-danger  .cp-c-callout-icon { color: var(--tag-red-fg); }
 
 [data-theme="dark"] .cp-mermaid-error {
-  background: #37161655;
-  border-color: #f4393933;
+  background: color-mix(in srgb, var(--tag-red-bg) 60%, transparent);
+  border-color: color-mix(in srgb, var(--tag-red-fg) 20%, transparent);
 }
 
 [data-theme="dark"] .cp-pr-badge {
-  background: #0e2c3a;
-  color: #8fd9f5;
-  border-color: #76d6ff33;
+  background: var(--tag-cyan-bg);
+  color: var(--tag-cyan-fg);
+  border-color: color-mix(in srgb, var(--tag-cyan-fg) 20%, transparent);
 }
 [data-theme="dark"] .cp-pr-badge:hover {
-  background: #14384a;
-  color: #b6e8ff;
+  background: var(--tag-cyan-hover);
+  color: var(--tag-cyan-fg);
 }
 
 /* ─── Topics cloud ─────────────────────────────────────────────────────────── */
 
 .cp-topics {
-  margin: 0 24px 12px;
-  background: var(--surface-raised);
-  border: 1px solid var(--border);
-  border-radius: var(--radius-md, 8px);
-  box-shadow: var(--shadow-1, 0 1px 2px rgba(0,0,0,0.04));
+  background: transparent;
+  border: none;
+  border-bottom: 1px solid var(--border);
+  box-shadow: none;
+  border-radius: 0;
 }
 
 .cp-topics-summary {
   display: flex;
   align-items: center;
   gap: 8px;
-  padding: 10px 14px;
+  padding: 8px 12px;
   cursor: pointer;
   list-style: none;
   user-select: none;
@@ -1196,7 +1234,7 @@
   display: flex;
   flex-wrap: wrap;
   gap: 6px 8px;
-  padding: 10px 14px 14px;
+  padding: 8px 12px 10px;
   border-top: 1px solid var(--border-subtle, var(--border));
   line-height: 1.3;
 }

package/public/claude-plans.html

@@ -36,33 +36,32 @@
     </div>
   </header>
 
-  <details class="cp-topics" id="cp-topics" open>
-    <summary class="cp-topics-summary">
-      <span class="cp-topics-caret" aria-hidden="true">▾</span>
-      <span class="cp-topics-title">Topics</span>
-      <span class="cp-topics-count" id="cp-topics-count">0</span>
-      <button
-        type="button"
-        class="cp-topics-clear"
-        id="cp-topics-clear"
-        hidden
-        title="Clear topic filter"
-        aria-label="Clear topic filter"
-      >Clear filter</button>
-    </summary>
-    <div class="cp-topics-cloud" id="cp-topics-cloud" role="group" aria-label="Plan topics">
-      <span class="cp-topics-empty" id="cp-topics-empty">
-        No topics yet. Push a plan and topics will appear here.
-      </span>
-    </div>
-  </details>
-
   <main class="cp-layout">
     <aside class="cp-rail" id="cp-rail">
       <div class="cp-rail-header">
         <span class="cp-rail-title">Plans</span>
         <span class="cp-count" id="cp-count">0</span>
       </div>
+      <details class="cp-topics" id="cp-topics" open>
+        <summary class="cp-topics-summary">
+          <span class="cp-topics-caret" aria-hidden="true">▾</span>
+          <span class="cp-topics-title">Topics</span>
+          <span class="cp-topics-count" id="cp-topics-count">0</span>
+          <button
+            type="button"
+            class="cp-topics-clear"
+            id="cp-topics-clear"
+            hidden
+            title="Clear topic filter"
+            aria-label="Clear topic filter"
+          >Clear filter</button>
+        </summary>
+        <div class="cp-topics-cloud" id="cp-topics-cloud" role="group" aria-label="Plan topics">
+          <span class="cp-topics-empty" id="cp-topics-empty">
+            No topics yet. Push a plan and topics will appear here.
+          </span>
+        </div>
+      </details>
       <div class="cp-search">
         <input
           type="search"

package/public/tokens.css

@@ -163,35 +163,38 @@
 
 /* ============================================================================
    Dark theme — activated by <html data-theme="dark">.
-   Used by the Claude Plans page; safe to adopt dashboard-wide later.
-   Overrides the semantic aliases only — the raw color scales above are shared.
-   Brand emerald and neon accent are preserved; grounds invert to dark woodgrain.
+   Mirrors the canonical [data-theme="dark"] block in the Tenon design system
+   (ClaudeDesign/project/colors_and_type.css). Overrides semantic aliases only;
+   the raw color scales above are shared. Grounds invert to a deep woodgrain-
+   emerald palette (#0A1A11 → #16352A two-step elevation). Brand emerald and
+   neon accent preserved; ink on neon stays emerald-900. Status tokens shift
+   from the 700 ramp to the 300 ramp for readability on dark.
    ============================================================================ */
 [data-theme="dark"] {
-  --bg: #0d1410;
-  --bg-subtle: #121c16;
-  --bg-muted: #18241c;
-  --bg-paper: #121c16;
-  --bg-oak: #20302554;
+  --bg: #0a1a11;
+  --bg-subtle: #0f2418;
+  --bg-muted: #16352a;
+  --bg-paper: #1a2418;
+  --bg-oak: #2a2a1f;
   --bg-deep: #060b08;
   --bg-overlay: rgba(0, 0, 0, 0.66);
 
-  --surface: #121c16;
-  --surface-raised: #18241c;
+  --surface: #10241a;
+  --surface-raised: #16352a;
 
-  --fg: #e9efe9;
-  --fg-muted: #8da095;
-  --fg-subtle: #5f7167;
-  --fg-on-dark: #e9efe9;
-  --fg-on-neon: var(--emerald-700);
+  --fg: #ecf3ef;
+  --fg-muted: #a3b8aa;        /* lifted to clear AA 4.5:1 on --surface */
+  --fg-subtle: #6f8378;
+  --fg-on-dark: #ecf3ef;
+  --fg-on-neon: var(--emerald-900);
 
   --accent: var(--neon-300);
   --accent-hover: var(--neon-500);
   --accent-press: var(--neon-700);
-  --accent-fg: #0d1410;
+  --accent-fg: var(--emerald-900);
 
   --brand: var(--emerald-50);
-  --brand-deep: #e9efe9;
+  --brand-deep: #ecf3ef;
 
   --success: var(--success-300);
   --warning: var(--warning-300);
@@ -199,8 +202,8 @@
   --danger-hover: var(--error-500);
   --info: var(--blue-300);
 
-  --border: #26342b;
-  --border-strong: #344538;
+  --border: #2b4233;
+  --border-strong: #3d5847;
   --border-subtle: #1d2922;
   --border-focus: var(--neon-500);
 
@@ -214,7 +217,7 @@
   --tag-blue-bg: #182040;   --tag-blue-fg: #aab4ff;
   --tag-cyan-bg: #0e2c3a;   --tag-cyan-fg: #8fd9f5;
   --tag-sage-bg: #1d2922;   --tag-sage-fg: #b6c6bc;
-  --tag-warm-bg: #2c2417;   --tag-warm-fg: #d8c4a2;
+  --tag-warm-bg: #2c2417;   --tag-warm-fg: #e6d3ae;   /* lifted from #d8c4a2 */
   --tag-yellow-bg: #322d0c; --tag-yellow-fg: #e8d860;
   --tag-purple-bg: #2a1633; --tag-purple-fg: #e29bf0;
   --tag-orange-bg: #331c0c; --tag-orange-fg: #f0a878;