claude-code-memory-explorer 1.3.3 → 1.3.4

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "claude-code-memory-explorer",
-  "version": "1.3.3",
+  "version": "1.3.4",
   "description": "Memory explorer dashboard for Claude Code",
   "main": "server.js",
   "type": "commonjs",

package/public/app.js

@@ -672,7 +672,7 @@ function renderTree() {
     const fp = footprintHighlight && footprintHit(item) ? ' fp-hit' : '';
     let h = `<div class="tree-item${sel}${indent ? ' tree-child' : ''}${isConditional ? ' tree-conditional' : ''}${muted}${fp}" data-id="${esc(item.id)}" title="${esc(item.path)}" onclick="selectFile('${escAttrJs(item.id)}')"${pad}>`;
     h += chevron;
-    h += `<span class="load-icon" title="${loadTitle}" style="color:var(--scope-${item.scope})">${loadIcon}</span>`;
+    h += `<span class="load-icon" title="${loadTitle}" style="color:color-mix(in srgb, var(--scope-${item.scope}) var(--glyph-mix), #000)">${loadIcon}</span>`;
     h += `<span class="file-name">${esc(item.name)}</span>`;
     const hs = treeHealth.get(item.id);
     if (hs) {
@@ -701,7 +701,7 @@ function renderTree() {
     const chevron = collapsible ? `<span class="group-chevron">${collapsed ? '\u25B8' : '\u25BE'}</span>` : '';
     const headerClass = collapsible ? 'tree-group-header tree-group-clickable' : 'tree-group-header';
     const onclick = collapsible ? ` onclick="_toggleGroup('${escAttrJs(scope)}')"` : '';
-    html += `<div class="${headerClass}" data-scope="${esc(scope)}"${onclick}>${chevron}<span class="scope-dot" style="color:var(--scope-${scope})">\u25CF</span> ${esc(label)} <span style="opacity:0.5">${items.length}</span></div>`;
+    html += `<div class="${headerClass}" data-scope="${esc(scope)}"${onclick}>${chevron}<span class="scope-dot" style="color:color-mix(in srgb, var(--scope-${scope}) var(--glyph-mix), #000)">\u25CF</span> ${esc(label)} <span style="opacity:0.5">${items.length}</span></div>`;
     if (collapsed) continue;
     if (scope === 'agent-memory') {
       const sorted = [...items].sort((a, b) => {
@@ -1536,6 +1536,10 @@ function scopeBadge(f) {
   return `<span class="scope-tag t-${esc(f.scope)}" title="${esc(title)}">${esc(f.scope)}</span>`;
 }
 
+function sevLabel(f) {
+  return `<span class="sev-label">${esc(f.severity)}</span>`;
+}
+
 function copyText(text, okMsg) {
   navigator.clipboard
     .writeText(text)
@@ -1747,11 +1751,12 @@ function renderHealthDash(st, shown) {
   const dirty = new Set(findings.flatMap((f) => (f.files || []).flatMap((n) => findingFileIds(n, f.scope))));
   const clean = audited.filter((s) => !dirty.has(s.id)).length;
   const score = healthScore(findings);
-  const scoreColor = score >= 80 ? 'var(--success)' : score >= 50 ? 'var(--warning)' : 'var(--error)';
+  const scoreTone = score >= 80 ? 'success' : score >= 50 ? 'warning' : 'error';
+  const scoreColor = `var(--${scoreTone})`;
   const CIRC = 163.4; // 2πr for r=26
   let html = '<div class="hv-tiles">';
   html += '<div class="hv-tile hv-ring-tile">';
-  html += `<div class="hv-ring"><svg width="64" height="64" viewBox="0 0 64 64"><circle cx="32" cy="32" r="26" fill="none" stroke="var(--bg-hover)" stroke-width="6"/><circle cx="32" cy="32" r="26" fill="none" stroke="${esc(scoreColor)}" stroke-width="6" stroke-linecap="round" transform="rotate(-90 32 32)" stroke-dasharray="${CIRC}" stroke-dashoffset="${esc((CIRC * (100 - score)) / 100)}"/></svg><span class="hv-ring-val" style="color:${scoreColor}">${score}</span></div>`;
+  html += `<div class="hv-ring"><svg width="64" height="64" viewBox="0 0 64 64"><circle cx="32" cy="32" r="26" fill="none" stroke="var(--bg-hover)" stroke-width="6"/><circle cx="32" cy="32" r="26" fill="none" stroke="${esc(scoreColor)}" stroke-width="6" stroke-linecap="round" transform="rotate(-90 32 32)" stroke-dasharray="${CIRC}" stroke-dashoffset="${esc((CIRC * (100 - score)) / 100)}"/></svg><span class="hv-ring-val" style="color:var(--${scoreTone}-ink)">${score}</span></div>`;
   html += `<div class="hv-tile-txt" title="Score = 100 − 10/high − 3/med − 1/low"><span class="hv-lbl">Health</span><span class="hv-sub">of 100</span></div></div>`;
   for (const [sev, label] of [
     ['high', 'High'],
@@ -1814,7 +1819,7 @@ function renderMemoryMap(shown) {
     const title = `${s.name} — ${s.lines}L${n ? ` · ${n} finding${n > 1 ? 's' : ''} (worst: ${sev})` : ' · clean'}`;
     html += `<div class="hv-cell hv-${esc(sev)}${analysisFileFilter?.id === s.id ? ' active' : ''}" onclick="_setFileFilter('${escAttrJs(s.id)}','${escAttrJs(s.name)}')" title="${esc(title)} — click to filter findings">`;
     if (n) html += `<span class="hv-cell-n hv-cn-${esc(sev)}">${n}</span>`;
-    html += `<span class="hv-cell-name">${esc(s.name)}</span><span class="hv-cell-meta">${s.lines}L</span></div>`;
+    html += `<span class="hv-cell-name">${esc(s.name)}</span><span class="hv-cell-meta">${s.lines} lines</span></div>`;
   }
   html += '</div>';
   return html;
@@ -1832,6 +1837,7 @@ function renderFileFindings(source) {
   for (const [f, i] of hits) {
     html += `<div class="analysis-card pf-card ${esc(`sev-${f.severity}`)}">`;
     html += `<div class="analysis-card-head" onclick="this.parentElement.classList.toggle('expanded')">`;
+    html += sevLabel(f);
     html += `<span class="kind-badge ${esc(`kind-${f.kind}`)}">${esc(f.kind)}</span>`;
     html += scopeBadge(f);
     html += `<span class="analysis-card-title">${esc(f.title)}</span>`;
@@ -1983,7 +1989,9 @@ function renderAnalysis(st) {
     return html;
   }
   const r = shown.result;
-  analysisFindings = r.findings || [];
+  analysisFindings = [...(r.findings || [])].sort(
+    (a, b) => (SEV_ORDER[a.severity] ?? 3) - (SEV_ORDER[b.severity] ?? 3),
+  );
   const byName = Object.fromEntries(stackData.map((s) => [s.name, s]));
   html += renderHealthDash(st, shown);
   if (r.summary) html += `<div class="analysis-summary">${esc(r.summary)}</div>`;
@@ -2022,6 +2030,7 @@ function renderAnalysis(st) {
     html += `<div class="analysis-card ${esc(`sev-${f.severity}`)}">`;
     html += '<div class="analysis-card-head">';
     html += `<input type="checkbox" class="fix-check" ${fixSelected.has(findingKey(f)) ? 'checked ' : ''}onclick="_toggleFixSelect(${idx})" title="Queue for the fix plan">`;
+    html += sevLabel(f);
     html += `<span class="kind-badge ${esc(`kind-${f.kind}`)}">${esc(f.kind)}</span>`;
     html += scopeBadge(f);
     html += `<span class="analysis-card-title">${esc(f.title)}</span>`;

package/public/style.css

@@ -53,6 +53,21 @@ textarea {
 }
 
 body {
+  /* Text on a tint needs a darker shade of the meaning color in light mode; the
+     ink tokens are declared on body so they pick up body.light's --ink-mix. */
+  --ink-mix: 100%;
+  --glyph-mix: 100%;
+  --error-ink: color-mix(in srgb, var(--error) var(--ink-mix), #000);
+  --warning-ink: color-mix(in srgb, var(--warning) var(--ink-mix), #000);
+  --success-ink: color-mix(in srgb, var(--success) var(--ink-mix), #000);
+  --scope-user-ink: color-mix(in srgb, var(--scope-user) var(--ink-mix), #000);
+  --scope-project-ink: color-mix(in srgb, var(--scope-project) var(--ink-mix), #000);
+  --scope-local-ink: color-mix(in srgb, var(--scope-local) var(--ink-mix), #000);
+  --scope-rule-ink: color-mix(in srgb, var(--scope-rule) var(--ink-mix), #000);
+  --scope-skill-ink: color-mix(in srgb, var(--scope-skill) var(--ink-mix), #000);
+  --scope-memory-ink: color-mix(in srgb, var(--scope-memory) var(--ink-mix), #000);
+  --scope-agent-memory-ink: color-mix(in srgb, var(--scope-agent-memory) var(--ink-mix), #000);
+  --scope-policy-ink: color-mix(in srgb, var(--scope-policy) var(--ink-mix), #000);
   /* native widgets (select popups, form controls) follow color-scheme, not CSS vars */
   color-scheme: dark;
   background: var(--bg-deep);
@@ -273,9 +288,9 @@ body.fp-mode .tree-item.fp-hit {
 .budget-label {
   display: flex;
   justify-content: space-between;
-  font-size: 9px;
-  color: var(--text-muted);
-  margin-bottom: 3px;
+  font-size: 10px;
+  color: var(--text-tertiary);
+  margin-bottom: 2px;
   text-transform: uppercase;
   letter-spacing: 0.3px;
 }
@@ -869,7 +884,7 @@ body.home-mode .summary-bar {
   padding: 1px 5px;
   border-radius: 3px;
   background: rgba(138, 168, 163, 0.12);
-  color: var(--scope-agent-memory);
+  color: var(--scope-agent-memory-ink);
   opacity: 0.85;
 }
 .tree-group-clickable {
@@ -906,8 +921,8 @@ body.light .tree-agent-item .file-name {
 }
 .tree-item.selected {
   background: var(--accent-dim);
-  color: var(--accent);
-  box-shadow: inset 2px 0 0 var(--accent);
+  color: var(--text-primary);
+  box-shadow: inset 3px 0 0 var(--accent);
 }
 .tree-item .tree-chevron,
 .tree-item .tree-chevron-spacer {
@@ -929,7 +944,7 @@ body.light .tree-agent-item .file-name {
   background: var(--accent-dim);
 }
 .tree-item .load-icon {
-  font-size: 10px;
+  font-size: 12px;
   width: 12px;
   text-align: center;
   flex-shrink: 0;
@@ -943,11 +958,10 @@ body.light .tree-agent-item .file-name {
   white-space: nowrap;
 }
 .tree-item .file-meta {
-  font-size: 10px;
-  color: var(--text-muted);
+  font-size: 11px;
+  color: var(--text-tertiary);
   font-family: var(--font-mono);
   font-variant-numeric: tabular-nums;
-  opacity: 0.7;
   flex-shrink: 0;
 }
 .tree-child .file-name {
@@ -1076,7 +1090,7 @@ body.light .tree-conditional .file-name {
   opacity: 0.85;
 }
 .import-link {
-  color: var(--accent);
+  color: var(--accent-text);
   cursor: pointer;
   text-decoration: underline;
   text-decoration-style: dotted;
@@ -1085,7 +1099,7 @@ body.light .tree-conditional .file-name {
   text-decoration-style: solid;
 }
 .inline-import {
-  color: var(--accent);
+  color: var(--accent-text);
   text-decoration: underline;
   text-decoration-style: dotted;
   cursor: pointer;
@@ -1162,7 +1176,7 @@ body.light .tree-conditional .file-name {
 /* #region BADGES */
 .scope-badge {
   display: inline-block;
-  font-size: 9px;
+  font-size: 10px;
   padding: 1px 5px;
   border-radius: 3px;
   font-weight: 600;
@@ -1171,43 +1185,45 @@ body.light .tree-conditional .file-name {
 }
 .scope-user {
   background: rgba(196, 149, 106, 0.18);
-  color: var(--scope-user);
+  color: var(--scope-user-ink);
 }
 .scope-project {
   background: rgba(122, 181, 160, 0.18);
-  color: var(--scope-project);
+  color: var(--scope-project-ink);
 }
 .scope-local {
   background: rgba(138, 155, 181, 0.18);
-  color: var(--scope-local);
+  color: var(--scope-local-ink);
 }
 .scope-rule {
   background: rgba(168, 155, 196, 0.18);
-  color: var(--scope-rule);
+  color: var(--scope-rule-ink);
 }
 .scope-skill {
   background: rgba(122, 155, 196, 0.18);
-  color: var(--scope-skill);
+  color: var(--scope-skill-ink);
 }
 .scope-memory {
   background: rgba(196, 149, 106, 0.18);
-  color: var(--scope-memory);
+  color: var(--scope-memory-ink);
 }
 .scope-agent-memory {
   background: rgba(138, 168, 163, 0.18);
-  color: var(--scope-agent-memory);
+  color: var(--scope-agent-memory-ink);
 }
 .scope-policy {
   background: rgba(181, 138, 138, 0.18);
-  color: var(--scope-policy);
+  color: var(--scope-policy-ink);
 }
 .load-badge {
   display: inline-block;
-  font-size: 9px;
-  padding: 1px 5px;
+  font-size: 10px;
+  padding: 1px 6px;
   border-radius: 3px;
   border: 1px solid var(--border);
-  color: var(--text-muted);
+  background: var(--bg-elevated);
+  color: var(--text-tertiary);
+  font-family: var(--font-mono);
 }
 .tag-badge {
   display: inline-block;
@@ -1246,11 +1262,11 @@ body.light .tree-conditional .file-name {
   font-family: var(--font-mono);
   font-size: 11px;
   font-weight: 600;
-  color: var(--accent);
+  color: var(--accent-text);
 }
 .sc-label {
-  font-size: 9px;
-  color: var(--text-muted);
+  font-size: 11px;
+  color: var(--text-tertiary);
   text-transform: uppercase;
 }
 /* #endregion SUMMARY_BAR */
@@ -1427,10 +1443,15 @@ body.light .tree-conditional .file-name {
 .action-btn.small {
   padding: 2px 6px;
   font-size: 10px;
+  min-height: 24px;
   display: inline-flex;
   align-items: center;
   justify-content: center;
 }
+.preview-actions .action-btn.small {
+  min-width: 28px;
+  min-height: 28px;
+}
 .shortcut-section {
   font-size: 11px;
   color: var(--text-muted);
@@ -1727,6 +1748,8 @@ kbd {
 /* #region LIGHT_THEME */
 body.light {
   color-scheme: light;
+  --ink-mix: 50%;
+  --glyph-mix: 75%;
   --bg-deep: #e8e6e3;
   --bg-surface: #efede9;
   --bg-elevated: #fbfaf9;
@@ -1835,8 +1858,8 @@ body.light {
   animation: spin 0.9s linear infinite;
 }
 .analysis-card {
-  margin-top: 10px;
-  padding: 10px 12px;
+  margin-top: 8px;
+  padding: 8px 12px;
   border: 1px solid var(--border);
   border-radius: 6px;
   background: var(--bg-elevated);
@@ -1877,6 +1900,22 @@ body.light {
 .analysis-card.sev-med .analysis-card-head::before {
   background: var(--warning);
 }
+.sev-label {
+  font-family: var(--font-mono);
+  font-size: 10px;
+  font-weight: 600;
+  text-transform: uppercase;
+  letter-spacing: 0.5px;
+  min-width: 4ch;
+  color: var(--text-tertiary);
+  flex-shrink: 0;
+}
+.analysis-card.sev-high .sev-label {
+  color: var(--error-ink);
+}
+.analysis-card.sev-med .sev-label {
+  color: var(--warning-ink);
+}
 .analysis-card-head {
   display: flex;
   align-items: center;
@@ -1916,22 +1955,22 @@ body.light {
   padding: 1px 6px;
   border-radius: 4px;
   background: var(--bg-hover);
-  color: var(--text-tertiary);
+  color: var(--text-secondary);
   flex-shrink: 0;
 }
 .kind-badge.kind-contradiction,
 .kind-badge.kind-invalidate {
   background: var(--error-dim);
-  color: var(--error);
+  color: var(--error-ink);
 }
 .kind-badge.kind-duplicate,
 .kind-badge.kind-merge {
   background: var(--warning-dim);
-  color: var(--warning);
+  color: var(--warning-ink);
 }
 .kind-badge.kind-promote {
   background: var(--success-dim);
-  color: var(--success);
+  color: var(--success-ink);
 }
 .analysis-card-title {
   flex: 1;
@@ -1946,27 +1985,22 @@ body.light {
   cursor: default;
 }
 
-/* per-card actions — appear on hover */
 .card-actions {
   display: flex;
   gap: 6px;
-  opacity: 0;
-  transition: opacity 0.15s;
   flex-shrink: 0;
 }
-.analysis-card:hover .card-actions {
-  opacity: 1;
-}
 .card-btn {
   display: inline-flex;
   align-items: center;
   gap: 4px;
+  min-height: 24px;
   background: var(--bg-surface);
   border: 1px solid var(--border);
   border-radius: 6px;
-  color: var(--text-tertiary);
+  color: var(--text-secondary);
   font-family: var(--font-mono);
-  font-size: 10px;
+  font-size: 11px;
   padding: 2px 8px;
   cursor: pointer;
   white-space: nowrap;
@@ -2003,28 +2037,27 @@ a.file-chip:hover {
   border-color: var(--accent);
 }
 .file-chip .fscope {
-  font-size: 8px;
+  font-size: 9px;
   text-transform: uppercase;
   letter-spacing: 0.5px;
-  opacity: 0.85;
 }
 .file-chip .fscope-memory {
-  color: var(--scope-memory);
+  color: var(--scope-memory-ink);
 }
 .file-chip .fscope-skill {
-  color: var(--scope-skill);
+  color: var(--scope-skill-ink);
 }
 .file-chip .fscope-agent {
-  color: var(--scope-agent-memory);
+  color: var(--scope-agent-memory-ink);
 }
 .file-chip .fscope-user {
-  color: var(--scope-user);
+  color: var(--scope-user-ink);
 }
 .file-chip .fscope-project {
-  color: var(--scope-project);
+  color: var(--scope-project-ink);
 }
 .file-chip .fscope-local {
-  color: var(--scope-local);
+  color: var(--scope-local-ink);
 }
 .no-files {
   font-size: 10px;
@@ -2090,7 +2123,7 @@ a.file-chip:hover {
 }
 .run-chip-user.active {
   border-color: var(--scope-user);
-  color: var(--scope-user);
+  color: var(--scope-user-ink);
   background: rgba(192, 128, 80, 0.12);
 }
 .sev-strip {
@@ -2103,6 +2136,7 @@ a.file-chip:hover {
 .sev-pill {
   font-family: var(--font-mono);
   font-size: 11px;
+  min-height: 24px;
   padding: 2px 10px;
   border-radius: 20px;
   border: 1px solid var(--border);
@@ -2189,7 +2223,7 @@ a.file-chip:hover {
   pointer-events: none;
 }
 .scope-tag {
-  font-size: 9px;
+  font-size: 10px;
   text-transform: uppercase;
   letter-spacing: 0.5px;
   padding: 0 6px;
@@ -2198,27 +2232,27 @@ a.file-chip:hover {
 }
 .scope-tag.t-memory {
   background: rgba(196, 160, 106, 0.18);
-  color: var(--scope-memory);
+  color: var(--scope-memory-ink);
 }
 .scope-tag.t-skill {
   background: rgba(122, 155, 196, 0.18);
-  color: var(--scope-skill);
+  color: var(--scope-skill-ink);
 }
 .scope-tag.t-agent {
   background: rgba(138, 168, 163, 0.18);
-  color: var(--scope-agent-memory);
+  color: var(--scope-agent-memory-ink);
 }
 .scope-tag.t-claudemd {
   background: rgba(122, 181, 160, 0.18);
-  color: var(--scope-project);
+  color: var(--scope-project-ink);
 }
 .scope-tag.t-user {
   background: rgba(192, 128, 80, 0.18);
-  color: var(--scope-user);
+  color: var(--scope-user-ink);
 }
 .scope-tag.t-cross {
   background: rgba(155, 130, 190, 0.18);
-  color: var(--scope-rule);
+  color: var(--scope-rule-ink);
 }
 .scope-meta {
   color: var(--text-muted);
@@ -2314,15 +2348,15 @@ a.file-chip:hover {
 }
 .tree-health.th-high {
   background: var(--error-dim);
-  color: var(--error);
+  color: var(--error-ink);
 }
 .tree-health.th-med {
   background: var(--warning-dim);
-  color: var(--warning);
+  color: var(--warning-ink);
 }
 .tree-health.th-low {
   background: var(--bg-hover);
-  color: var(--text-tertiary);
+  color: var(--text-secondary);
 }
 .tree-health.th-clean {
   min-width: 0;
@@ -2427,10 +2461,10 @@ a.file-chip:hover {
   color: var(--text-tertiary);
 }
 .hv-num-high {
-  color: var(--error);
+  color: var(--error-ink);
 }
 .hv-num-med {
-  color: var(--warning);
+  color: var(--warning-ink);
 }
 .hv-num-low {
   color: var(--text-tertiary);
@@ -2534,6 +2568,7 @@ a.file-chip:hover {
 }
 .hv-cell.hv-low {
   background: var(--bg-hover);
+  border-color: var(--text-muted);
 }
 .hv-cell.hv-med {
   background: var(--warning-dim);
@@ -2569,10 +2604,10 @@ a.file-chip:hover {
   background: var(--bg-deep);
 }
 .hv-cn-high {
-  color: var(--error);
+  color: var(--error-ink);
 }
 .hv-cn-med {
-  color: var(--warning);
+  color: var(--warning-ink);
 }
 .hv-cn-low {
   color: var(--text-tertiary);
@@ -2586,7 +2621,7 @@ a.file-chip:hover {
 }
 .pf-card {
   margin-top: 6px;
-  padding: 6px 10px;
+  padding: 4px 10px;
 }
 .pf-card .analysis-card-head {
   cursor: pointer;

package/public/themes.css

@@ -52,7 +52,7 @@ body:not([data-color-theme]):not(.light) {
   --text-primary: #f0f1f3;
   --text-secondary: #c2c4c9;
   --text-tertiary: #9a9da5;
-  --text-muted: #7d808a;
+  --text-muted: #858891;
 }
 body.light:not([data-color-theme]) {
   --accent: #e86f33;
@@ -67,7 +67,7 @@ body.light:not([data-color-theme]) {
   --text-primary: #0a0a0a;
   --text-secondary: #2c2c2c;
   --text-tertiary: #565656;
-  --text-muted: #767676;
+  --text-muted: #666666;
 }
 
 /* Gruvbox */
@@ -84,7 +84,7 @@ body[data-color-theme="gruvbox"]:not(.light) {
   --text-primary: #ebdbb2;
   --text-secondary: #d5c4a1;
   --text-tertiary: #bdae93;
-  --text-muted: #928374;
+  --text-muted: #a69782;
 }
 body.light[data-color-theme="gruvbox"] {
   --accent: #d65d0e;
@@ -98,8 +98,8 @@ body.light[data-color-theme="gruvbox"] {
   --border: #c9bc9d;
   --text-primary: #3c3836;
   --text-secondary: #504945;
-  --text-tertiary: #665c54;
-  --text-muted: #7c6f64;
+  --text-tertiary: #5f564f;
+  --text-muted: #70645b;
 }
 
 /* Catppuccin */
@@ -116,7 +116,7 @@ body[data-color-theme="catppuccin"]:not(.light) {
   --text-primary: #cdd6f4;
   --text-secondary: #bac2de;
   --text-tertiary: #a6adc8;
-  --text-muted: #7f849c;
+  --text-muted: #82879f;
 }
 body.light[data-color-theme="catppuccin"] {
   --accent: #8839ef;
@@ -130,8 +130,8 @@ body.light[data-color-theme="catppuccin"] {
   --border: #bcc0cc;
   --text-primary: #4c4f69;
   --text-secondary: #5c5f77;
-  --text-tertiary: #6c6f85;
-  --text-muted: #8c8fa1;
+  --text-tertiary: #545770;
+  --text-muted: #63667d;
 }
 
 /* Tokyo Night */
@@ -147,8 +147,8 @@ body[data-color-theme="tokyo-night"]:not(.light) {
   --border: #3b4261;
   --text-primary: #c0caf5;
   --text-secondary: #a9b1d6;
-  --text-tertiary: #787c99;
-  --text-muted: #565f89;
+  --text-tertiary: #959cbe;
+  --text-muted: #838aaf;
 }
 body.light[data-color-theme="tokyo-night"] {
   --accent: #2e7de9;
@@ -162,8 +162,8 @@ body.light[data-color-theme="tokyo-night"] {
   --border: #a8aecb;
   --text-primary: #343b58;
   --text-secondary: #565a6e;
-  --text-tertiary: #6c6e75;
-  --text-muted: #848cb5;
+  --text-tertiary: #505466;
+  --text-muted: #5d627a;
 }
 
 /* Solarized */
@@ -179,8 +179,8 @@ body[data-color-theme="solarized"]:not(.light) {
   --border: #586e75;
   --text-primary: #e2dfd0;
   --text-secondary: #b7c0bf;
-  --text-tertiary: #93a1a1;
-  --text-muted: #839496;
+  --text-tertiary: #b7beb7;
+  --text-muted: #9faaa7;
 }
 body.light[data-color-theme="solarized"] {
   --accent: #2280c2;
@@ -194,8 +194,8 @@ body.light[data-color-theme="solarized"] {
   --border: #cdc4ab;
   --text-primary: #073642;
   --text-secondary: #4f6369;
-  --text-tertiary: #586e75;
-  --text-muted: #728589;
+  --text-tertiary: #385861;
+  --text-muted: #4a666e;
   --sidebar-bg: #e6dfc7;
   --sidebar-item-bg: #f3ecd6;
 }
@@ -213,8 +213,8 @@ body[data-color-theme="dracula"]:not(.light) {
   --border: #565a75;
   --text-primary: #f8f8f2;
   --text-secondary: #d8d8d2;
-  --text-tertiary: #b0b3c5;
-  --text-muted: #6272a4;
+  --text-tertiary: #b2b5c6;
+  --text-muted: #9aa1bc;
 }
 body.light[data-color-theme="dracula"] {
   --accent: #7c3aed;
@@ -228,8 +228,8 @@ body.light[data-color-theme="dracula"] {
   --border: #c9c9d6;
   --text-primary: #16161e;
   --text-secondary: #34343f;
-  --text-tertiary: #5a5a68;
-  --text-muted: #787885;
+  --text-tertiary: #575765;
+  --text-muted: #666674;
 }
 
 /* Nord */
@@ -245,8 +245,8 @@ body[data-color-theme="nord"]:not(.light) {
   --border: #4c566a;
   --text-primary: #eceff4;
   --text-secondary: #d8dee9;
-  --text-tertiary: #aeb6c5;
-  --text-muted: #7b88a1;
+  --text-tertiary: #bec4d1;
+  --text-muted: #a7b0c1;
 }
 body.light[data-color-theme="nord"] {
   --accent: #5e81ac;
@@ -261,7 +261,7 @@ body.light[data-color-theme="nord"] {
   --text-primary: #2e3440;
   --text-secondary: #3b4252;
   --text-tertiary: #4c566a;
-  --text-muted: #6b7589;
+  --text-muted: #5e687c;
 }
 
 /* Rosé Pine */
@@ -277,8 +277,8 @@ body[data-color-theme="rose-pine"]:not(.light) {
   --border: #403d52;
   --text-primary: #e0def4;
   --text-secondary: #c5c2dd;
-  --text-tertiary: #908caa;
-  --text-muted: #6e6a86;
+  --text-tertiary: #a09db9;
+  --text-muted: #8e8ba7;
 }
 body.light[data-color-theme="rose-pine"] {
   --accent: #907aa9;
@@ -292,8 +292,8 @@ body.light[data-color-theme="rose-pine"] {
   --border: #cecacd;
   --text-primary: #575279;
   --text-secondary: #635e87;
-  --text-tertiary: #6e6a88;
-  --text-muted: #857f96;
+  --text-tertiary: #5a557b;
+  --text-muted: #6a6485;
 }
 
 /* Everforest */
@@ -309,8 +309,8 @@ body[data-color-theme="everforest"]:not(.light) {
   --border: #475258;
   --text-primary: #d3c6aa;
   --text-secondary: #bfb6a3;
-  --text-tertiary: #9da9a0;
-  --text-muted: #859289;
+  --text-tertiary: #c3bea7;
+  --text-muted: #a8ab9a;
 }
 body.light[data-color-theme="everforest"] {
   --accent: #6f8352;
@@ -324,8 +324,8 @@ body.light[data-color-theme="everforest"] {
   --border: #d3d2bf;
   --text-primary: #3d484e;
   --text-secondary: #55636b;
-  --text-tertiary: #66705f;
-  --text-muted: #7a8577;
+  --text-tertiary: #515b56;
+  --text-muted: #606a62;
 }
 
 /* Kanagawa */
@@ -342,7 +342,7 @@ body[data-color-theme="kanagawa"]:not(.light) {
   --text-primary: #dcd7ba;
   --text-secondary: #c8c093;
   --text-tertiary: #a6a69c;
-  --text-muted: #727169;
+  --text-muted: #94948a;
 }
 body.light[data-color-theme="kanagawa"] {
   --accent: #4d699b;
@@ -356,8 +356,8 @@ body.light[data-color-theme="kanagawa"] {
   --border: #d2ccb6;
   --text-primary: #545464;
   --text-secondary: #66667a;
-  --text-tertiary: #716e61;
-  --text-muted: #8a8775;
+  --text-tertiary: #565564;
+  --text-muted: #666469;
 }
 
 /* One Dark */
@@ -373,8 +373,8 @@ body[data-color-theme="one-dark"]:not(.light) {
   --border: #4b5263;
   --text-primary: #d7dae0;
   --text-secondary: #abb2bf;
-  --text-tertiary: #8b919e;
-  --text-muted: #5c6370;
+  --text-tertiary: #acb0ba;
+  --text-muted: #999ea8;
 }
 body.light[data-color-theme="one-dark"] {
   --accent: #4078f2;
@@ -388,8 +388,8 @@ body.light[data-color-theme="one-dark"] {
   --border: #d4d4d6;
   --text-primary: #383a42;
   --text-secondary: #50525a;
-  --text-tertiary: #696c77;
-  --text-muted: #a0a1a7;
+  --text-tertiary: #575963;
+  --text-muted: #666871;
 }
 
 /* Night Owl */
@@ -405,8 +405,8 @@ body[data-color-theme="night-owl"]:not(.light) {
   --border: #5f7e97;
   --text-primary: #d6deeb;
   --text-secondary: #b8c5d6;
-  --text-tertiary: #8ba3b8;
-  --text-muted: #637777;
+  --text-tertiary: #9bb0c3;
+  --text-muted: #899eab;
 }
 body.light[data-color-theme="night-owl"] {
   --accent: #0c969b;
@@ -420,8 +420,8 @@ body.light[data-color-theme="night-owl"] {
   --border: #d0d0d0;
   --text-primary: #403f53;
   --text-secondary: #545167;
-  --text-tertiary: #6f6e85;
-  --text-muted: #989fb1;
+  --text-tertiary: #5a596f;
+  --text-muted: #68687e;
 }
 
 /* Monokai Pro */
@@ -437,8 +437,8 @@ body[data-color-theme="monokai"]:not(.light) {
   --border: #5b595c;
   --text-primary: #fcfcfa;
   --text-secondary: #d9d8d6;
-  --text-tertiary: #939293;
-  --text-muted: #727072;
+  --text-tertiary: #bfbfbe;
+  --text-muted: #ababab;
 }
 body.light[data-color-theme="monokai"] {
   --accent: #c08a00;
@@ -452,8 +452,8 @@ body.light[data-color-theme="monokai"] {
   --border: #cdc8c5;
   --text-primary: #2c292d;
   --text-secondary: #46434a;
-  --text-tertiary: #6b686d;
-  --text-muted: #8d8a8d;
+  --text-tertiary: #59565b;
+  --text-muted: #68656a;
 }
 
 /* GitHub */
@@ -469,8 +469,8 @@ body[data-color-theme="github"]:not(.light) {
   --border: #444d56;
   --text-primary: #e1e4e8;
   --text-secondary: #d1d5da;
-  --text-tertiary: #959da5;
-  --text-muted: #6a737d;
+  --text-tertiary: #a6adb4;
+  --text-muted: #929aa2;
 }
 body.light[data-color-theme="github"] {
   --accent: #0366d6;
@@ -484,8 +484,8 @@ body.light[data-color-theme="github"] {
   --border: #d1d5da;
   --text-primary: #24292e;
   --text-secondary: #444d56;
-  --text-tertiary: #586069;
-  --text-muted: #6a737d;
+  --text-tertiary: #575f68;
+  --text-muted: #666e78;
 }
 
 /* Ayu */
@@ -501,8 +501,8 @@ body[data-color-theme="ayu"]:not(.light) {
   --border: #2d3343;
   --text-primary: #bfbdb6;
   --text-secondary: #a8a6a0;
-  --text-tertiary: #8a9199;
-  --text-muted: #6c7380;
+  --text-tertiary: #8d949b;
+  --text-muted: #7c838d;
 }
 body.light[data-color-theme="ayu"] {
   --accent: #c97612;
@@ -516,8 +516,8 @@ body.light[data-color-theme="ayu"] {
   --border: #d8dde2;
   --text-primary: #3d4149;
   --text-secondary: #5c6166;
-  --text-tertiary: #787b80;
-  --text-muted: #8a9199;
+  --text-tertiary: #5a5e64;
+  --text-muted: #686d74;
 }
 
 /* Vitesse */
@@ -533,8 +533,8 @@ body[data-color-theme="vitesse"]:not(.light) {
   --border: #333333;
   --text-primary: #dbd7ca;
   --text-secondary: #bfbaaa;
-  --text-tertiary: #8f8f85;
-  --text-muted: #758575;
+  --text-tertiary: #99998e;
+  --text-muted: #7e8a7b;
 }
 body.light[data-color-theme="vitesse"] {
   --accent: #1c6b48;
@@ -548,8 +548,8 @@ body.light[data-color-theme="vitesse"] {
   --border: #d6d6d6;
   --text-primary: #393a34;
   --text-secondary: #4e4f47;
-  --text-tertiary: #6b6d63;
-  --text-muted: #a0ada0;
+  --text-tertiary: #5d5e56;
+  --text-muted: #6a6d64;
 }
 
 /* Synthwave '84 */
@@ -566,7 +566,7 @@ body[data-color-theme="synthwave"]:not(.light) {
   --text-primary: #ffffff;
   --text-secondary: #d8d6e8;
   --text-tertiary: #b6b1d8;
-  --text-muted: #848bbd;
+  --text-muted: #8f94c3;
 }
 body.light[data-color-theme="synthwave"] {
   --accent: #c936a6;
@@ -580,6 +580,6 @@ body.light[data-color-theme="synthwave"] {
   --border: #c5bcdd;
   --text-primary: #241b2f;
   --text-secondary: #3d3455;
-  --text-tertiary: #5c5380;
-  --text-muted: #7d76a3;
+  --text-tertiary: #59507c;
+  --text-muted: #675f8b;
 }