3c0b64cd35ea

give Kepr a richer palette: warm stone text, vivid amber and a five-colour set (amber, red, green, rose, lavender) across code, timeline, labels and word cloud; tests now pinned to koh 3.8.6 (v3.1.12)

time
2026-10-08 00:32 UTC · 5 days ago
machine
Junes-MacBook-Pro.local
agent
claude-opus-5-5
session
vivid kepr palette
parent
10bc050dee95
5 files package.json+1 −1public/css/kepr.css+67 −47public/js/kepr.js+4 −4src/pages/layout.ts+1 −1tests/koh-version.txt+1 −1
package.json+1 −1
@@ -1,6 +1,6 @@11 {22 	"name": "kepr",3-	"version": "3.1.11",3+	"version": "3.1.12",44 	"private": true,55 	"type": "module",66 	"scripts": {

view file

public/css/kepr.css+67 −47
@@ -1,23 +1,25 @@1-/* Kepr 3: Kepr 2's look (kepr.uk, gold theme), ported only as far as the pages that exist use it. */1+/* Kepr 3: Kepr 2's look (kepr.uk, gold theme), its palette made richer and more saturated (June, 2026-10-07), ported only as far as the pages that exist use it. */22 33 :root {4-	--bg: #090706;5-	--bg-surface: #0e0c09;6-	--bg-elevated: #1b1710;7-	--border: #2a2018;8-	--text: #c8b898;9-	--text-secondary: #7a6a50;10-	--text-muted: #7a6a50;11-	--text-faint: #4a3a28;12-	--text-heading: #e8d8b8;13-	--accent: #c89a5a;14-	--accent-bright: #d9b88c;15-	--accent-dim: #85663c;16-	--accent-flash: #5a88c8;17-	--red-flash: #c8483a;18-	--accent-tint-04: rgba(200, 154, 90, 0.04);19-	--accent-tint-12: rgba(200, 154, 90, 0.12);20-	--sage: #7a9a68;4+	--bg: #0d0805;5+	--bg-surface: #150d07;6+	--bg-elevated: #22160c;7+	--border: #3d2814;8+	--text: #efe3d3;9+	--text-secondary: #c9ab9c;10+	--text-muted: #9a7d70;11+	--text-faint: #6a4c40;12+	--text-heading: #fff4e8;13+	--accent: #ffad33;14+	--accent-bright: #ffc966;15+	--accent-dim: #b8741c;16+	--accent-flash: #4da3ff;17+	--red: #ff5c4d;18+	--accent-tint-04: rgba(255, 173, 51, 0.04);19+	--accent-tint-12: rgba(255, 173, 51, 0.12);20+	--sage: #9ad65f;21+	--rose: #ff8ab4;22+	--lavender: #c9a0ff;2123 	--sans: "Quicksand", system-ui, sans-serif;2224 	--mono: "Martian Mono", ui-monospace, monospace;2325 }@@ -39,6 +41,11 @@3941 	line-height: 1.6;4042 	overflow-x: hidden;4143 }44+body {45+	background:46+		radial-gradient(ellipse 90% 60% at 50% -15%, rgba(255, 120, 30, 0.12), transparent 70%) fixed,47+		var(--bg);48+}4249 4350 a {4451 	color: inherit;@@ -114,7 +121,7 @@114121 		color: var(--accent);115122 	}116123 	95% {117-		color: var(--red-flash);124+		color: var(--red);118125 	}119126 }120127 .wordmark-by {@@ -284,6 +291,7 @@284291 .repo-contributor {285292 	margin: 4px 0 0;286293 	font-size: 0.8125rem;294+	color: var(--rose);287295 	animation: fadeUp 280ms 40ms ease both;288296 }289297 .repo-contributor a:hover {@@ -318,7 +326,7 @@318326 .lang-badge {319327 	font-family: var(--mono);320328 	font-size: 0.6875rem;321-	color: var(--accent-dim);329+	color: var(--lavender);322330 	background: var(--bg-surface);323331 	border: 1px solid var(--border);324332 	border-radius: 3px;@@ -384,7 +392,7 @@384392 	max-width: 100%;385393 	font-family: var(--mono);386394 	font-size: 0.75rem;387-	color: var(--text-muted);395+	color: var(--sage);388396 	background: var(--bg-surface);389397 	border: 1px solid var(--border);390398 	border-radius: 3px;@@ -486,7 +494,7 @@486494 .section-label {487495 	font-size: 0.6875rem;488496 	letter-spacing: 0.12em;489-	color: var(--text-secondary);497+	color: var(--lavender);490498 	text-transform: uppercase;491499 }492500 .section-count {@@ -538,7 +546,7 @@538546 	z-index: 200;539547 	max-width: 340px;540548 	padding: 0.45rem 0.7rem;541-	background: #0f0c08;549+	background: var(--bg-elevated);542550 	border: 1px solid var(--border);543551 	border-radius: 4px;544552 	pointer-events: none;@@ -661,7 +669,7 @@661669 	cursor: pointer;662670 	padding: 4px 8px;663671 	background: var(--bg);664-	border: 1px solid rgba(200, 154, 90, 0.45);672+	border: 1px solid rgba(255, 173, 51, 0.45);665673 	border-radius: 2px;666674 	font-size: 0.625rem;667675 	color: var(--accent);@@ -710,15 +718,15 @@710718 	align-items: center;711719 	gap: 8px;712720 	padding: 6px 10px;713-	border-bottom: 1px solid rgba(42, 32, 24, 0.4);721+	border-bottom: 1px solid rgba(61, 40, 20, 0.4);714722 	color: var(--text-muted);715723 }716724 .atlas-picker-row:hover {717-	background: rgba(200, 154, 90, 0.06);725+	background: rgba(255, 173, 51, 0.06);718726 	text-decoration: none;719727 }720728 .atlas-picker-row.active {721-	background: rgba(200, 154, 90, 0.1);729+	background: rgba(255, 173, 51, 0.1);722730 }723731 .atlas-picker-row:hover *,724732 .atlas-picker-row.active * {@@ -826,7 +834,7 @@826834 	align-items: baseline;827835 	gap: 0 12px;828836 	padding: 6px 8px;829-	border-bottom: 1px solid rgba(42, 32, 24, 0.62);837+	border-bottom: 1px solid rgba(61, 40, 20, 0.62);830838 	cursor: pointer;831839 	transition: background 100ms;832840 }@@ -1072,7 +1080,7 @@10721080 	text-decoration: none;10731081 }10741082 1075-/* Shiki's CSS-variables theme roles, in Kepr 2's highlight.js colours. */1083+/* Shiki's CSS-variables theme roles in five colours: amber, red, green, rose and lavender. */10761084 .tk-comment {10771085 	color: var(--text-muted);10781086 	font-style: italic;@@ -1085,13 +1093,13 @@10851093 	color: var(--sage);10861094 }10871095 .tk-constant {1088-	color: var(--accent-bright);1096+	color: var(--rose);10891097 }10901098 .tk-function {1091-	color: var(--accent);1099+	color: var(--red);10921100 }10931101 .tk-parameter {1094-	color: var(--text);1102+	color: var(--lavender);10951103 }10961104 .tk-punctuation {10971105 	color: var(--text-secondary);@@ -1104,7 +1112,7 @@11041112 	color: var(--sage);11051113 }11061114 .tk-deleted {1107-	color: #c45c5c;1115+	color: var(--red);11081116 }11091117 .tk-i {11101118 	font-style: italic;@@ -1120,9 +1128,9 @@11201128 .save-flag {11211129 	margin: 12px 0 0;11221130 	padding: 8px 12px;1123-	border: 1px solid #6a3a2a;1124-	border-left: 2px solid #c45c5c;1125-	background: rgba(196, 92, 92, 0.08);1131+	border: 1px solid #7a2a1e;1132+	border-left: 2px solid var(--red);1133+	background: rgba(255, 92, 77, 0.08);11261134 	color: var(--text-heading);11271135 }11281136 .save-flag-label {@@ -1130,7 +1138,7 @@11301138 	font-size: 0.625rem;11311139 	letter-spacing: 0.12em;11321140 	text-transform: uppercase;1133-	color: #c45c5c;1141+	color: var(--red);11341142 }11351143 .save-message-head {11361144 	font-size: 2.25rem;@@ -1211,7 +1219,7 @@12111219 	color: var(--sage);12121220 }12131221 .diff-del {1214-	color: #c45c5c;1222+	color: var(--red);12151223 }12161224 .diff-note {12171225 	color: var(--text-faint);@@ -1263,16 +1271,16 @@12631271 	user-select: none;12641272 }12651273 .diff .dl-add {1266-	background: rgba(122, 154, 104, 0.1);1274+	background: rgba(154, 214, 95, 0.1);12671275 }12681276 .diff .dl-add .ds {12691277 	color: var(--sage);12701278 }12711279 .diff .dl-del {1272-	background: rgba(196, 92, 92, 0.08);1280+	background: rgba(255, 92, 77, 0.08);12731281 }12741282 .diff .dl-del .ds {1275-	color: #c45c5c;1283+	color: var(--red);12761284 }12771285 12781286 /* ----- archives ----------------------------------------------------------- */@@ -1716,7 +1724,7 @@17161724 }17171725 .issues-error {17181726 	font-size: 0.75rem;1719-	color: #c86a5a;1727+	color: var(--red);17201728 }17211729 /* The honeypot: off-screen for people, still in the form for bots. */17221730 .issues-hp {@@ -1869,12 +1877,24 @@18691877 	font-family: var(--mono);18701878 	letter-spacing: 0.03em;18711879 	white-space: nowrap;1872-	color: var(--accent-dim);1880+	color: var(--accent);18731881 	transition:18741882 		color 0.2s,18751883 		opacity 0.2s,18761884 		text-shadow 0.2s;18771885 }1886+.tc-tag:nth-child(5n + 2) {1887+	color: var(--red);1888+}1889+.tc-tag:nth-child(5n + 3) {1890+	color: var(--sage);1891+}1892+.tc-tag:nth-child(5n + 4) {1893+	color: var(--rose);1894+}1895+.tc-tag:nth-child(5n) {1896+	color: var(--lavender);1897+}18781898 .tc-tag:hover {18791899 	color: var(--accent);18801900 	opacity: 1;@@ -2625,7 +2645,7 @@26252645 	margin-left: 12px;26262646 	padding: 1px 7px;26272647 	background: transparent;2628-	border: 1px solid rgba(200, 154, 90, 0.2);2648+	border: 1px solid rgba(255, 173, 51, 0.2);26292649 	border-radius: 2px;26302650 	font-size: 0.625rem;26312651 	color: var(--text-faint);@@ -2713,7 +2733,7 @@27132733 	z-index: 2000;27142734 	display: flex;27152735 	flex-direction: column;2716-	background: rgba(8, 7, 5, 0.97);2736+	background: rgba(13, 8, 5, 0.97);27172737 	outline: none;27182738 	animation: fv-in 200ms ease both;27192739 }@@ -2773,7 +2793,7 @@27732793 }27742794 .fv-ctrl-btn {27752795 	background: transparent;2776-	border: 1px solid rgba(200, 154, 90, 0.2);2796+	border: 1px solid rgba(255, 173, 51, 0.2);27772797 	border-radius: 2px;27782798 	padding: 3px 7px;27792799 	font: inherit;@@ -2787,7 +2807,7 @@27872807 .fv-ctrl-btn:hover:not(:disabled),27882808 .fv-ctrl-btn.active {27892809 	color: var(--accent);2790-	border-color: rgba(200, 154, 90, 0.5);2810+	border-color: rgba(255, 173, 51, 0.5);27912811 	text-decoration: none;27922812 }27932813 .fv-ctrl-btn:disabled {

view file

public/js/kepr.js+4 −4
@@ -6,14 +6,14 @@66 // Kepr 2's save kinds (canvas.js), first match wins: each dot's colour and strength.77 const KINDS = [88 	[/\b(release|version|bump|tag)\b/i, "accent", 1],9-	[/\b(fix|bug|patch|issue|crash|error|regress|revert)\b/i, "accent-dim", 0.8],10-	[/\b(add|new|implement|feat|introduce|wire|support)\b/i, "accent", 1],9+	[/\b(fix|bug|patch|issue|crash|error|regress|revert)\b/i, "red", 0.9],10+	[/\b(add|new|implement|feat|introduce|wire|support)\b/i, "sage", 1],1111 	[1212 		/\b(refactor|restructure|reorganize|extract|move|rename|split|cleanup|clean up)\b/i,13-		"text",13+		"lavender",1414 		0.85,1515 	],16-	[/\b(perf|optim|speed|fast|slow|cache|memory|alloc)\b/i, "accent", 0.9],16+	[/\b(perf|optim|speed|fast|slow|cache|memory|alloc)\b/i, "rose", 0.9],1717 	[/\b(test|spec|coverage|assert)\b/i, "text-secondary", 0.74],1818 	[/\b(doc|readme|comment|example|guide)\b/i, "text-secondary", 0.7],1919 	[/\b(polish|style|format|lint|whitespace|typo|wording|copy)\b/i, "text-secondary", 0.66],

view file

src/pages/layout.ts+1 −1
@@ -67,7 +67,7 @@6767 <meta name="twitter:card" content="summary">6868 <meta name="twitter:title" content="${title}">6969 <meta name="twitter:description" content="${options.description}">70-<meta name="theme-color" content="#090706">70+<meta name="theme-color" content="#0d0805">7171 <link rel="canonical" href="${url}">7272 <link rel="icon" href="/favicon.svg" type="image/svg+xml">7373 <link rel="stylesheet" href="/static/css/kepr.css?v=${version}">

view file

tests/koh-version.txt+1 −1
@@ -1 +1 @@1-3.8.51+3.8.6

view file