v3: Kanagawa back in tone — Lotus keeps its yellow parchment, Wave borrows the syntax hues: comment-grey italic dates, string-green quotes, number-pink votes, keyword-violet brand

Co-Authored-By: Claude Opus 5 <noreply@anthropic.com>

src/themes/kanagawa.css

@@ -4,8 +4,10 @@
    and monospace type throughout, as befits an editor colorscheme.
 
    Dark scheme  → Wave  (sumiInk page, fujiWhite ink, crystalBlue accent).
-   Light scheme → Lotus (lotusInk ink, lotusBlue accent), on paper cooled
+   Light scheme → Lotus (lotusWhite parchment, lotusInk ink, lotusBlue
-                 from lotusWhite's yellow to a neutral off-white.
+                 accent) — the yellow paper is the point, keep it warm.
+   Syntax hues carry the character: fujiGray italic "comments" for dates,
+   springGreen "strings" for quotes, oniViolet "keywords" for the brand.
    ══════════════════════════════════════════════════════════════════════ */
 
 /* ── Palette (light-dark: see tokens.css) ─────────────────────────── */
@@ -26,26 +28,27 @@
   --color-text: light-dark(#545464, #dcd7ba);
   --color-text-secondary: light-dark(#716e61, #c8c093);
   --color-text-muted: light-dark(#766b90, #938aa9);
-  --color-on-accent: light-dark(#faf8f1, #16161d);
+  --color-on-accent: light-dark(#f2ecbc, #16161d);
 
   /* Surfaces — sunken < bg < surface < raised.
      Wave:  sumiInk0 · sumiInk3 · sumiInk4 · sumiInk5.
-     Lotus: lotusWhite desaturated to near-neutral off-whites. */
+     Lotus: lotusWhite1 · lotusWhite3 · lotusWhite2 · lotusWhite3 — paper
-  --color-bg: light-dark(#f3f1e8, #1f1f28);
+            darkens where the editor draws gutters and floats. */
-  --color-surface: light-dark(#faf9f4, #2a2a37);
+  --color-bg: light-dark(#f2ecbc, #1f1f28);
-  --color-surface-raised: light-dark(#ffffff, #363646);
+  --color-surface: light-dark(#e7dfb2, #2a2a37);
-  --color-surface-sunken: light-dark(#e9e6da, #16161d);
+  --color-surface-raised: light-dark(#f2ecbc, #363646);
+  --color-surface-sunken: light-dark(#dcd5ac, #16161d);
 
-  /* Borders — hairlines tinted from the ink */
+  /* Borders — lotusWhite0 / sumiInk6, the editor's split lines */
-  --color-border: light-dark(rgb(84 84 100 / 0.18), rgb(220 215 186 / 0.13));
+  --color-border: light-dark(rgb(113 110 97 / 0.28), rgb(84 84 109 / 0.7));
   --color-border-subtle: light-dark(
-    rgb(84 84 100 / 0.1),
+    rgb(113 110 97 / 0.16),
-    rgb(220 215 186 / 0.08)
+    rgb(84 84 109 / 0.4)
   );
 
-  /* Accent — crystalBlue / lotusBlue4 */
+  /* Accent — crystalBlue / lotusBlue4, hover springBlue / lotusBlue5 */
   --color-accent: light-dark(#4d699b, #7e9cd8);
-  --color-accent-hover: light-dark(#624c83, #7fb4ca);
+  --color-accent-hover: light-dark(#5d57a3, #7fb4ca);
   --color-accent-soft: light-dark(
     rgb(77 105 155 / 0.12),
     rgb(126 156 216 / 0.14)
@@ -57,17 +60,17 @@
 
   /* Links */
   --color-link: light-dark(#4d699b, #7e9cd8);
-  --color-link-hover: light-dark(#624c83, #7fb4ca);
+  --color-link-hover: light-dark(#5d57a3, #7fb4ca);
 
-  /* Danger — waveRed on winterRed / lotusRed */
+  /* Danger — waveRed on winterRed / lotusRed on paper */
   --color-danger: light-dark(#c84053, #e46876);
-  --color-danger-bg: light-dark(#f6e0dd, #43242b);
+  --color-danger-bg: light-dark(#ecd2ac, #43242b);
-  --color-danger-hover: light-dark(#a8344a, #ff5d62);
+  --color-danger-hover: light-dark(#d7474b, #ff5d62);
 
-  /* Success — springGreen on winterGreen / lotusGreen */
+  /* Success — springGreen on winterGreen / lotusGreen on paper */
-  --color-success: light-dark(#56703c, #98bb6c);
+  --color-success: light-dark(#6f894e, #98bb6c);
-  --color-success-bg: light-dark(#e3ead9, #2b3328);
+  --color-success-bg: light-dark(#dadaa8, #2b3328);
-  --color-success-hover: light-dark(#4a6133, #b0cf85);
+  --color-success-hover: light-dark(#6e915f, #b0cf85);
 
   /* Warning — roninYellow / lotusOrange */
   --color-warning: light-dark(#cc6d00, #ff9e3b);
@@ -81,17 +84,23 @@
   );
 
   /* Misc */
-  --color-option-bg: light-dark(#faf9f4, #2a2a37);
+  --color-option-bg: light-dark(#e7dfb2, #2a2a37);
   --color-option-border: light-dark(
-    rgb(84 84 100 / 0.1),
+    rgb(113 110 97 / 0.16),
-    rgb(220 215 186 / 0.08)
+    rgb(84 84 109 / 0.4)
   );
 
-  /* Theme-only hues — waveBlue2 / lotusBlue3 for rules, oniViolet /
+  /* Theme-only hues, straight from the syntax groups:
-     lotusViolet4 for the brand, waveBlue1 / lotusBlue1 for selections. */
+     comment  fujiGray / lotusGray3     · keyword oniViolet / lotusViolet4
-  --kngw-wave: light-dark(#9fb5c9, #2d4f67);
+     string   springGreen / lotusGreen  · number  sakuraPink / lotusPink
-  --kngw-violet: light-dark(#624c83, #957fb8);
+     chrome   sumiInk1 / lotusWhite1 (sidebars, tabline)
-  --kngw-selection: light-dark(#c7d7e0, #223249);
+     visual   waveBlue1 / lotusViolet3 (selection) */
+  --kngw-comment: light-dark(#8a8980, #727169);
+  --kngw-keyword: light-dark(#624c83, #957fb8);
+  --kngw-string: light-dark(#6f894e, #98bb6c);
+  --kngw-number: light-dark(#b35b79, #d27e99);
+  --kngw-chrome: light-dark(#e5ddb0, #181820);
+  --kngw-selection: light-dark(#c9cbd1, #223249);
 
   /* Shape & depth — flat like an editor, deep only where things float */
   --border-width: 1px;
@@ -101,7 +110,7 @@
     light-dark(rgb(84 84 100 / 0.3), rgb(0 0 0 / 0.7));
 
   /* Component skins */
-  --header-bg: var(--color-bg);
+  --header-bg: var(--kngw-chrome);
   --input-focus-bg: var(--color-surface-sunken);
   --overlay-filter: blur(2px);
   --modal-border: var(--color-border);
@@ -120,15 +129,48 @@
   background: var(--kngw-selection);
 }
 
+/* Brand as a keyword — oniViolet, italic like kanagawa's keywordStyle */
 [data-style="kanagawa"] .app-header-brand {
-  color: var(--kngw-violet);
+  color: var(--kngw-keyword);
+  font-style: italic;
 }
 
-/* ── Header — a wave-blue rule, like the editor's split border ───── */
+/* ── Header — the tabline: a shade off the page, split by a plain rule ── */
 [data-style="kanagawa"] .app-header {
-  border-bottom: 2px solid var(--kngw-wave);
+  border-bottom: 1px solid var(--color-border);
 }
 
 [data-style="kanagawa"] .feed-sort-btn:hover:not(.active) {
   background: var(--color-accent-soft);
 }
+
+/* ── Dates read as comments — fujiGray, italic ───────────────────── */
+[data-style="kanagawa"] time {
+  font-style: italic;
+}
+
+[data-style="kanagawa"] .journal-card:not(.journal-card--image) .journal-card-meta,
+[data-style="kanagawa"] .dump-card-date,
+[data-style="kanagawa"] .comment-time,
+[data-style="kanagawa"] .notification-time {
+  color: var(--kngw-comment);
+}
+
+/* ── Quotes read as string literals ──────────────────────────────── */
+[data-style="kanagawa"] .journal-card--quote {
+  background: var(--color-surface);
+}
+
+[data-style="kanagawa"] .journal-card-quotemark {
+  color: var(--kngw-string);
+  opacity: 0.35;
+}
+
+[data-style="kanagawa"] .journal-card-quote-body {
+  color: var(--kngw-string);
+}
+
+/* Vote tallies read as number literals */
+[data-style="kanagawa"] .vote-btn:not(.vote-btn--active) {
+  color: var(--kngw-number);
+}