diff --git a/src/themes/kanagawa.css b/src/themes/kanagawa.css index f4252795..7bd92d10 100644 --- a/src/themes/kanagawa.css +++ b/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 - from lotusWhite's yellow to a neutral off-white. + Light scheme → Lotus (lotusWhite parchment, lotusInk ink, lotusBlue + 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. */ - --color-bg: light-dark(#f3f1e8, #1f1f28); - --color-surface: light-dark(#faf9f4, #2a2a37); - --color-surface-raised: light-dark(#ffffff, #363646); - --color-surface-sunken: light-dark(#e9e6da, #16161d); + Wave: sumiInk0 · sumiInk3 · sumiInk4 · sumiInk5. + Lotus: lotusWhite1 · lotusWhite3 · lotusWhite2 · lotusWhite3 — paper + darkens where the editor draws gutters and floats. */ + --color-bg: light-dark(#f2ecbc, #1f1f28); + --color-surface: light-dark(#e7dfb2, #2a2a37); + --color-surface-raised: light-dark(#f2ecbc, #363646); + --color-surface-sunken: light-dark(#dcd5ac, #16161d); - /* Borders — hairlines tinted from the ink */ - --color-border: light-dark(rgb(84 84 100 / 0.18), rgb(220 215 186 / 0.13)); + /* Borders — lotusWhite0 / sumiInk6, the editor's split lines */ + --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(220 215 186 / 0.08) + rgb(113 110 97 / 0.16), + 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-hover: light-dark(#a8344a, #ff5d62); + --color-danger-bg: light-dark(#ecd2ac, #43242b); + --color-danger-hover: light-dark(#d7474b, #ff5d62); - /* Success — springGreen on winterGreen / lotusGreen */ - --color-success: light-dark(#56703c, #98bb6c); - --color-success-bg: light-dark(#e3ead9, #2b3328); - --color-success-hover: light-dark(#4a6133, #b0cf85); + /* Success — springGreen on winterGreen / lotusGreen on paper */ + --color-success: light-dark(#6f894e, #98bb6c); + --color-success-bg: light-dark(#dadaa8, #2b3328); + --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(220 215 186 / 0.08) + rgb(113 110 97 / 0.16), + rgb(84 84 109 / 0.4) ); - /* Theme-only hues — waveBlue2 / lotusBlue3 for rules, oniViolet / - lotusViolet4 for the brand, waveBlue1 / lotusBlue1 for selections. */ - --kngw-wave: light-dark(#9fb5c9, #2d4f67); - --kngw-violet: light-dark(#624c83, #957fb8); - --kngw-selection: light-dark(#c7d7e0, #223249); + /* Theme-only hues, straight from the syntax groups: + comment fujiGray / lotusGray3 · keyword oniViolet / lotusViolet4 + string springGreen / lotusGreen · number sakuraPink / lotusPink + chrome sumiInk1 / lotusWhite1 (sidebars, tabline) + 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); +}