From 73d8e5c7ba235a84a6b11d6eea7b1404aced2d6f Mon Sep 17 00:00:00 2001
From: Till JS <tills95@gmail.com>
Date: Thu, 9 Apr 2026 01:59:10 +0200
Subject: [PATCH] fix(mana/web): drop stray closing paren from
 hsl(var(--color-X))) CSS
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

The mechanical var()→hsl(var()) sweep in commit 6e20c298a left 14
lines across spiral/+page.svelte and KeyboardShortcutsModal.svelte
with three closing parens instead of two:

  background: hsl(var(--color-card)));
                                    ^ extra

Each of those originals had a hex fallback like
`var(--color-card, #fff)` and the replacer kept the trailing close
paren after dropping the fallback. The styles never showed up wrong
in the browser because the parser silently dropped the entire
declaration, but Tailwind 4's CSS validator catches it now and the
production build fails with "Missing opening (".

Mechanical fix via sed `s/hsl\(var\(--color-([a-z-]+)\)\)\);/
hsl(var(--color-$1));/g` on the two files. No semantic change.

Co-Authored-By: Claude Opus 4.6 (1M context) <noreply@anthropic.com>
---
 .../components/KeyboardShortcutsModal.svelte  |  8 ++++----
 .../web/src/routes/(app)/spiral/+page.svelte  | 20 +++++++++----------
 2 files changed, 14 insertions(+), 14 deletions(-)

diff --git a/apps/mana/apps/web/src/lib/components/KeyboardShortcutsModal.svelte b/apps/mana/apps/web/src/lib/components/KeyboardShortcutsModal.svelte
index cb426aaca..c07cdc40f 100644
--- a/apps/mana/apps/web/src/lib/components/KeyboardShortcutsModal.svelte
+++ b/apps/mana/apps/web/src/lib/components/KeyboardShortcutsModal.svelte
@@ -56,7 +56,7 @@
 		transform: translate(-50%, -50%);
 		z-index: 55;
 		background: hsl(var(--color-card));
-		border: 1px solid hsl(var(--color-border)));
+		border: 1px solid hsl(var(--color-border));
 		border-radius: 12px;
 		padding: 24px;
 		min-width: 320px;
@@ -89,7 +89,7 @@
 	}
 
 	.close-btn:hover {
-		background: hsl(var(--color-muted)));
+		background: hsl(var(--color-muted));
 	}
 
 	.shortcut-list {
@@ -114,8 +114,8 @@
 		display: inline-flex;
 		align-items: center;
 		padding: 2px 8px;
-		background: hsl(var(--color-muted)));
-		border: 1px solid hsl(var(--color-border)));
+		background: hsl(var(--color-muted));
+		border: 1px solid hsl(var(--color-border));
 		border-radius: 5px;
 		font-size: 12px;
 		font-family: system-ui, sans-serif;
diff --git a/apps/mana/apps/web/src/routes/(app)/spiral/+page.svelte b/apps/mana/apps/web/src/routes/(app)/spiral/+page.svelte
index 3d52964f4..2196ce923 100644
--- a/apps/mana/apps/web/src/routes/(app)/spiral/+page.svelte
+++ b/apps/mana/apps/web/src/routes/(app)/spiral/+page.svelte
@@ -306,8 +306,8 @@
 	}
 
 	.section {
-		background: hsl(var(--color-card)));
-		border: 1px solid hsl(var(--color-border)));
+		background: hsl(var(--color-card));
+		border: 1px solid hsl(var(--color-border));
 		border-radius: 12px;
 		padding: 1.25rem;
 	}
@@ -398,7 +398,7 @@
 	}
 
 	.pixel-detail code {
-		background: hsl(var(--color-background)));
+		background: hsl(var(--color-background));
 		padding: 0.125rem 0.5rem;
 		border-radius: 4px;
 		font-family: monospace;
@@ -427,7 +427,7 @@
 	.stat {
 		text-align: center;
 		padding: 0.75rem;
-		background: hsl(var(--color-background)));
+		background: hsl(var(--color-background));
 		border-radius: 8px;
 	}
 
@@ -466,7 +466,7 @@
 
 	.app-card {
 		padding: 0.75rem;
-		background: hsl(var(--color-background)));
+		background: hsl(var(--color-background));
 		border-radius: 8px;
 	}
 
@@ -492,7 +492,7 @@
 
 	.app-bar {
 		height: 4px;
-		background: hsl(var(--color-border)));
+		background: hsl(var(--color-border));
 		border-radius: 2px;
 		overflow: hidden;
 		margin-bottom: 0.375rem;
@@ -569,15 +569,15 @@
 		border-radius: 8px;
 		font-size: 0.875rem;
 		font-weight: 500;
-		border: 1px solid hsl(var(--color-border)));
-		background: hsl(var(--color-background)));
+		border: 1px solid hsl(var(--color-border));
+		background: hsl(var(--color-background));
 		color: hsl(var(--color-foreground));
 		cursor: pointer;
 		transition: all 0.15s;
 	}
 
 	.btn:hover:not(:disabled) {
-		background: hsl(var(--color-accent)));
+		background: hsl(var(--color-accent));
 	}
 
 	.btn:disabled {
@@ -606,7 +606,7 @@
 
 	.info-box {
 		padding: 1rem;
-		background: hsl(var(--color-background)));
+		background: hsl(var(--color-background));
 		border-radius: 8px;
 		border-left: 4px solid hsl(var(--color-primary));
 	}