From 3cfa9a8b125f81d9be972b63e8e69c45388c740d Mon Sep 17 00:00:00 2001
From: vegard <vnotnes@pm.me>
Date: Thu, 19 Mar 2026 07:14:13 +0000
Subject: [PATCH] =?UTF-8?q?H=C3=A5ndlagde=20tema-presets=20med=20mer=20var?=
 =?UTF-8?q?iasjon=20og=20harmoni?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

Hvert preset har nå individuelt justerte farger per overflate i stedet
for auto-genererte. Canvas, header, panel og border har subtilt ulike
nyanser for dybde. Omdøpt: Standard→Midnatt, Hav→Dyphav, Rosa→Kirsebær,
Lys→Dagslys, Monokrom→Kull. Alle mørke temaer har varm/kald karakter.

Co-Authored-By: Claude Opus 4.6 (1M context) <noreply@anthropic.com>
---
 frontend/src/lib/workspace/theme.ts | 89 ++++++++++++++++++++++++++---
 1 file changed, 81 insertions(+), 8 deletions(-)

diff --git a/frontend/src/lib/workspace/theme.ts b/frontend/src/lib/workspace/theme.ts
index 75f90f8..4de46e1 100644
--- a/frontend/src/lib/workspace/theme.ts
+++ b/frontend/src/lib/workspace/theme.ts
@@ -62,14 +62,87 @@ function preset(
 }
 
 export const THEME_PRESETS: ThemePreset[] = [
-	{ name: 'Standard',   emoji: '🌑', theme: DEFAULT_THEME },
-	{ name: 'Hav',        emoji: '🌊', theme: preset([200, 75, 60], 5) },
-	{ name: 'Skog',       emoji: '🌲', theme: preset([142, 65, 55], 5) },
-	{ name: 'Solnedgang', emoji: '🌅', theme: preset([25,  80, 60], 6) },
-	{ name: 'Lavendel',   emoji: '💜', theme: preset([280, 65, 60], 5) },
-	{ name: 'Rosa',       emoji: '🌸', theme: preset([330, 70, 60], 5) },
-	{ name: 'Lys',        emoji: '☀️', theme: preset([220, 50, 50], 95) },
-	{ name: 'Monokrom',   emoji: '⚫', theme: preset([0,   0,  60], 5) },
+	{
+		name: 'Midnatt', emoji: '🌑',
+		theme: DEFAULT_THEME,
+	},
+	{
+		name: 'Dyphav', emoji: '🌊',
+		theme: {
+			canvas:  { hue: 215, saturation: 25, lightness: 5 },
+			header:  { hue: 210, saturation: 20, lightness: 12 },
+			panel:   { hue: 205, saturation: 18, lightness: 14 },
+			border:  { hue: 210, saturation: 15, lightness: 20 },
+			accent:  { hue: 190, saturation: 80, lightness: 55 },
+			text:    { hue: 200, saturation: 10, lightness: 88 },
+		},
+	},
+	{
+		name: 'Skog', emoji: '🌲',
+		theme: {
+			canvas:  { hue: 160, saturation: 18, lightness: 4 },
+			header:  { hue: 150, saturation: 14, lightness: 11 },
+			panel:   { hue: 145, saturation: 12, lightness: 13 },
+			border:  { hue: 155, saturation: 10, lightness: 19 },
+			accent:  { hue: 135, saturation: 60, lightness: 50 },
+			text:    { hue: 140, saturation: 8,  lightness: 85 },
+		},
+	},
+	{
+		name: 'Solnedgang', emoji: '🌅',
+		theme: {
+			canvas:  { hue: 20,  saturation: 20, lightness: 5 },
+			header:  { hue: 15,  saturation: 16, lightness: 12 },
+			panel:   { hue: 12,  saturation: 14, lightness: 14 },
+			border:  { hue: 18,  saturation: 12, lightness: 20 },
+			accent:  { hue: 30,  saturation: 85, lightness: 58 },
+			text:    { hue: 25,  saturation: 10, lightness: 90 },
+		},
+	},
+	{
+		name: 'Lavendel', emoji: '💜',
+		theme: {
+			canvas:  { hue: 265, saturation: 15, lightness: 5 },
+			header:  { hue: 270, saturation: 12, lightness: 13 },
+			panel:   { hue: 275, saturation: 10, lightness: 15 },
+			border:  { hue: 268, saturation: 8,  lightness: 22 },
+			accent:  { hue: 280, saturation: 60, lightness: 62 },
+			text:    { hue: 270, saturation: 8,  lightness: 88 },
+		},
+	},
+	{
+		name: 'Kirsebær', emoji: '🌸',
+		theme: {
+			canvas:  { hue: 340, saturation: 14, lightness: 5 },
+			header:  { hue: 335, saturation: 12, lightness: 12 },
+			panel:   { hue: 330, saturation: 10, lightness: 14 },
+			border:  { hue: 338, saturation: 8,  lightness: 20 },
+			accent:  { hue: 345, saturation: 65, lightness: 58 },
+			text:    { hue: 340, saturation: 6,  lightness: 90 },
+		},
+	},
+	{
+		name: 'Dagslys', emoji: '☀️',
+		theme: {
+			canvas:  { hue: 220, saturation: 15, lightness: 96 },
+			header:  { hue: 220, saturation: 12, lightness: 100 },
+			panel:   { hue: 220, saturation: 10, lightness: 100 },
+			border:  { hue: 220, saturation: 10, lightness: 85 },
+			accent:  { hue: 230, saturation: 65, lightness: 50 },
+			text:    { hue: 220, saturation: 10, lightness: 12 },
+		},
+	},
+	{
+		name: 'Kull', emoji: '⚫',
+		theme: {
+			canvas:  { hue: 0, saturation: 0,  lightness: 8 },
+			header:  { hue: 0, saturation: 0,  lightness: 14 },
+			panel:   { hue: 0, saturation: 0,  lightness: 16 },
+			border:  { hue: 0, saturation: 0,  lightness: 22 },
+			accent:  { hue: 0, saturation: 0,  lightness: 65 },
+			text:    { hue: 0, saturation: 0,  lightness: 82 },
+		},
+	},
 ];
 
 function hsl(c: SurfaceColor): string {