From 248100d490fb75b45668fef1a2908baa98a26f82 Mon Sep 17 00:00:00 2001
From: Till JS <tills95@gmail.com>
Date: Sun, 12 Apr 2026 16:07:40 +0200
Subject: [PATCH] fix(web): remove hardcoded white text, use theme tokens for
 light mode
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

PageShell header icon/title had opacity: 0.5 — removed for full
visibility. Moodlit, Zitare, Skilltree and BaseListView used
text-white/* classes that were invisible in light mode — migrated
to hsl(var(--color-foreground/muted-foreground)) tokens.

Co-Authored-By: Claude Opus 4.6 (1M context) <noreply@anthropic.com>
---
 .../components/page-carousel/PageShell.svelte |  4 +--
 .../src/lib/modules/moodlit/ListView.svelte   | 29 +++++++++-------
 .../src/lib/modules/skilltree/ListView.svelte | 34 ++++++++++++-------
 .../src/lib/modules/zitare/ListView.svelte    | 12 ++++---
 .../src/organisms/BaseListView.svelte         |  2 +-
 5 files changed, 48 insertions(+), 33 deletions(-)

diff --git a/apps/mana/apps/web/src/lib/components/page-carousel/PageShell.svelte b/apps/mana/apps/web/src/lib/components/page-carousel/PageShell.svelte
index 143999d72..e38ae2bf9 100644
--- a/apps/mana/apps/web/src/lib/components/page-carousel/PageShell.svelte
+++ b/apps/mana/apps/web/src/lib/components/page-carousel/PageShell.svelte
@@ -343,7 +343,6 @@
 		display: flex;
 		align-items: center;
 		color: hsl(var(--color-foreground));
-		opacity: 0.5;
 	}
 	.color-dot {
 		width: 0.625rem;
@@ -355,7 +354,6 @@
 		font-size: 0.95rem;
 		font-weight: 600;
 		color: hsl(var(--color-foreground));
-		opacity: 0.5;
 		transform: translateY(1px);
 	}
 	a.page-title-link {
@@ -383,7 +381,7 @@
 		border-radius: 50%;
 		border: none;
 		background: transparent;
-		color: hsl(var(--color-muted-foreground) / 0.5);
+		color: hsl(var(--color-muted-foreground));
 		cursor: pointer;
 		transition: all 0.15s;
 	}
diff --git a/apps/mana/apps/web/src/lib/modules/moodlit/ListView.svelte b/apps/mana/apps/web/src/lib/modules/moodlit/ListView.svelte
index 06c1061ec..aa1690851 100644
--- a/apps/mana/apps/web/src/lib/modules/moodlit/ListView.svelte
+++ b/apps/mana/apps/web/src/lib/modules/moodlit/ListView.svelte
@@ -112,17 +112,19 @@
 				<p class="text-sm font-medium text-white drop-shadow">{activeMood.name}</p>
 			</div>
 		{:else}
-			<div class="flex h-24 items-center justify-center rounded-lg bg-white/5">
-				<p class="text-sm text-white/30">Kein Mood aktiv</p>
+			<div
+				class="flex h-24 items-center justify-center rounded-lg bg-[hsl(var(--color-foreground)/0.05)]"
+			>
+				<p class="text-sm text-[hsl(var(--color-muted-foreground))]">Kein Mood aktiv</p>
 			</div>
 		{/if}
 
 		<!-- Create toggle -->
 		<div class="flex items-center justify-between">
-			<span class="text-xs text-white/40">{moods.length} Moods</span>
+			<span class="text-xs text-[hsl(var(--color-muted-foreground))]">{moods.length} Moods</span>
 			<button
 				type="button"
-				class="text-xs text-white/50 transition-colors hover:text-white/80"
+				class="text-xs text-[hsl(var(--color-muted-foreground))] transition-colors hover:text-[hsl(var(--color-foreground))]"
 				onclick={() => (creating = !creating)}
 			>
 				{creating ? 'Abbrechen' : '+ Neues Mood'}
@@ -130,7 +132,7 @@
 		</div>
 
 		{#if creating}
-			<div class="flex flex-col gap-2 rounded-lg bg-white/5 p-3">
+			<div class="flex flex-col gap-2 rounded-lg bg-[hsl(var(--color-foreground)/0.05)] p-3">
 				<!-- Preview -->
 				<div
 					class="flex h-12 items-center justify-center rounded-md"
@@ -144,7 +146,7 @@
 					type="text"
 					bind:value={newName}
 					placeholder="Mood-Name"
-					class="rounded-md border border-white/10 bg-white/5 px-3 py-1.5 text-sm text-white placeholder:text-white/30 focus:border-white/20 focus:outline-none"
+					class="rounded-md border border-[hsl(var(--color-border))] bg-[hsl(var(--color-foreground)/0.05)] px-3 py-1.5 text-sm text-[hsl(var(--color-foreground))] placeholder:text-[hsl(var(--color-muted-foreground)/0.5)] focus:border-[hsl(var(--color-border))] focus:outline-none"
 				/>
 
 				<!-- Colors -->
@@ -157,7 +159,7 @@
 								onchange={(e) => {
 									newColors = newColors.map((c, j) => (j === i ? e.currentTarget.value : c));
 								}}
-								class="h-8 w-8 cursor-pointer rounded-md border border-white/10"
+								class="h-8 w-8 cursor-pointer rounded-md border border-[hsl(var(--color-border))]"
 							/>
 							{#if newColors.length > 1}
 								<button
@@ -171,7 +173,7 @@
 					{#if newColors.length < 8}
 						<button
 							type="button"
-							class="flex h-8 w-8 items-center justify-center rounded-md border border-dashed border-white/20 text-white/40 transition-colors hover:text-white/60"
+							class="flex h-8 w-8 items-center justify-center rounded-md border border-dashed border-[hsl(var(--color-border))] text-[hsl(var(--color-muted-foreground))] transition-colors hover:text-[hsl(var(--color-foreground))]"
 							onclick={addColor}>+</button
 						>
 					{/if}
@@ -180,7 +182,7 @@
 				<!-- Animation -->
 				<select
 					bind:value={newAnimation}
-					class="rounded-md border border-white/10 bg-white/5 px-3 py-1.5 text-sm text-white focus:border-white/20 focus:outline-none"
+					class="rounded-md border border-[hsl(var(--color-border))] bg-[hsl(var(--color-foreground)/0.05)] px-3 py-1.5 text-sm text-[hsl(var(--color-foreground))] focus:border-[hsl(var(--color-border))] focus:outline-none"
 				>
 					{#each ANIMATIONS as anim (anim.id)}
 						<option value={anim.id}>{anim.name}</option>
@@ -204,11 +206,14 @@
 		<button
 			onclick={() => (activeMoodId = activeMoodId === mood.id ? null : mood.id)}
 			oncontextmenu={(e) => ctxMenu.open(e, mood)}
-			class="group flex flex-col items-center gap-1.5 rounded-lg p-2 transition-colors hover:bg-white/5
-				{activeMoodId === mood.id ? 'ring-1 ring-white/30' : ''}"
+			class="group flex flex-col items-center gap-1.5 rounded-lg p-2 transition-colors hover:bg-[hsl(var(--color-foreground)/0.05)]
+				{activeMoodId === mood.id ? 'ring-1 ring-[hsl(var(--color-border))]' : ''}"
 		>
 			<div class="h-10 w-10 rounded-full" style={gradientStyle(mood.colors)}></div>
-			<span class="text-[10px] text-white/50 group-hover:text-white/70">{mood.name}</span>
+			<span
+				class="text-[10px] text-[hsl(var(--color-muted-foreground))] group-hover:text-[hsl(var(--color-foreground))]"
+				>{mood.name}</span
+			>
 		</button>
 	{/snippet}
 </BaseListView>
diff --git a/apps/mana/apps/web/src/lib/modules/skilltree/ListView.svelte b/apps/mana/apps/web/src/lib/modules/skilltree/ListView.svelte
index 23ebd67b5..57f2ad99e 100644
--- a/apps/mana/apps/web/src/lib/modules/skilltree/ListView.svelte
+++ b/apps/mana/apps/web/src/lib/modules/skilltree/ListView.svelte
@@ -51,10 +51,12 @@
 <BaseListView items={skills} getKey={(s) => s.id} emptyTitle="Keine Skills angelegt">
 	{#snippet toolbar()}
 		<div class="flex items-center justify-between">
-			<span class="text-xs text-white/40">{totalXp} XP · Level {highestLevel}</span>
+			<span class="text-xs text-[hsl(var(--color-muted-foreground))]"
+				>{totalXp} XP · Level {highestLevel}</span
+			>
 			<button
 				type="button"
-				class="text-xs text-white/50 transition-colors hover:text-white/80"
+				class="text-xs text-[hsl(var(--color-muted-foreground))] transition-colors hover:text-[hsl(var(--color-foreground))]"
 				onclick={() => (creating = !creating)}
 			>
 				{creating ? 'Abbrechen' : '+ Neuer Skill'}
@@ -62,17 +64,20 @@
 		</div>
 
 		{#if creating}
-			<form class="flex flex-col gap-2 rounded-lg bg-white/5 p-3" onsubmit={handleCreate}>
+			<form
+				class="flex flex-col gap-2 rounded-lg bg-[hsl(var(--color-foreground)/0.05)] p-3"
+				onsubmit={handleCreate}
+			>
 				<input
 					type="text"
 					bind:value={newName}
 					placeholder="Skill-Name (z. B. Gitarre, Python, Kochen)"
 					required
-					class="rounded-md border border-white/10 bg-white/5 px-3 py-1.5 text-sm text-white placeholder:text-white/30 focus:border-white/20 focus:outline-none"
+					class="rounded-md border border-[hsl(var(--color-border))] bg-[hsl(var(--color-foreground)/0.05)] px-3 py-1.5 text-sm text-[hsl(var(--color-foreground))] placeholder:text-[hsl(var(--color-muted-foreground)/0.5)] focus:border-[hsl(var(--color-border))] focus:outline-none"
 				/>
 				<select
 					bind:value={newBranch}
-					class="rounded-md border border-white/10 bg-white/5 px-3 py-1.5 text-sm text-white focus:border-white/20 focus:outline-none"
+					class="rounded-md border border-[hsl(var(--color-border))] bg-[hsl(var(--color-foreground)/0.05)] px-3 py-1.5 text-sm text-[hsl(var(--color-foreground))] focus:border-[hsl(var(--color-border))] focus:outline-none"
 				>
 					{#each branches as [key, info] (key)}
 						<option value={key}>{info.name}</option>
@@ -105,22 +110,27 @@
 					_siblingIds: skills.map((s) => s.id),
 					_siblingKey: 'skillId',
 				})}
-			class="mb-2 w-full rounded-md border border-white/10 px-3 py-2.5 text-left transition-colors hover:bg-white/5 min-h-[44px]"
+			class="mb-2 w-full rounded-md border border-[hsl(var(--color-border))] px-3 py-2.5 text-left transition-colors hover:bg-[hsl(var(--color-foreground)/0.05)] min-h-[44px]"
 		>
 			<div class="flex items-center justify-between">
 				<div class="flex items-center gap-2">
 					<span class="text-sm">{skill.icon}</span>
-					<p class="text-sm font-medium text-white/80">{skill.name}</p>
+					<p class="text-sm font-medium text-[hsl(var(--color-foreground)/0.8)]">{skill.name}</p>
 				</div>
-				<span class="text-xs text-white/50">Lv. {skill.level}</span>
+				<span class="text-xs text-[hsl(var(--color-muted-foreground))]">Lv. {skill.level}</span>
 			</div>
 			<div class="mt-1 flex items-center gap-2">
-				<div class="h-1 flex-1 rounded-full bg-white/10">
-					<div class="h-full rounded-full bg-white/30" style="width: {progress}%"></div>
+				<div class="h-1 flex-1 rounded-full bg-[hsl(var(--color-foreground)/0.1)]">
+					<div
+						class="h-full rounded-full bg-[hsl(var(--color-foreground)/0.3)]"
+						style="width: {progress}%"
+					></div>
 				</div>
-				<span class="text-[10px] text-white/30">{skill.currentXp} XP</span>
+				<span class="text-[10px] text-[hsl(var(--color-muted-foreground))]"
+					>{skill.currentXp} XP</span
+				>
 			</div>
-			<p class="mt-0.5 text-[10px] text-white/30">
+			<p class="mt-0.5 text-[10px] text-[hsl(var(--color-muted-foreground))]">
 				{branch?.name ?? skill.branch} — {LEVEL_NAMES[skill.level] ?? 'Unbekannt'}
 			</p>
 		</button>
diff --git a/apps/mana/apps/web/src/lib/modules/zitare/ListView.svelte b/apps/mana/apps/web/src/lib/modules/zitare/ListView.svelte
index d086927c2..fc815dc7f 100644
--- a/apps/mana/apps/web/src/lib/modules/zitare/ListView.svelte
+++ b/apps/mana/apps/web/src/lib/modules/zitare/ListView.svelte
@@ -112,18 +112,18 @@
 	{#if quote}
 		<div class="quote-transition" class:fade-out={transitioning}>
 			<blockquote
-				class="max-w-[280px] text-center text-base font-light italic leading-relaxed text-white/80"
+				class="max-w-[280px] text-center text-base font-light italic leading-relaxed text-[hsl(var(--color-foreground)/0.8)]"
 			>
 				&laquo;{quotesStore.getText(quote)}&raquo;
 			</blockquote>
-			<p class="mt-3 text-xs text-white/40">— {quote.author}</p>
+			<p class="mt-3 text-xs text-[hsl(var(--color-muted-foreground))]">— {quote.author}</p>
 
 			<!-- Tags -->
 			{#if currentTags.length > 0}
 				<div class="mt-2 flex flex-wrap justify-center gap-1">
 					{#each currentTags as tag (tag.id)}
 						<span
-							class="inline-flex items-center gap-1 rounded-full px-2 py-0.5 text-[10px] text-white/50"
+							class="inline-flex items-center gap-1 rounded-full px-2 py-0.5 text-[10px] text-[hsl(var(--color-muted-foreground))]"
 							style="background: {tag.color}20; border: 1px solid {tag.color}30"
 						>
 							<span class="h-1.5 w-1.5 rounded-full" style="background: {tag.color}"></span>
@@ -135,12 +135,14 @@
 
 			<button
 				onclick={toggleFav}
-				class="mt-3 min-h-[44px] rounded-full p-1.5 transition-colors hover:bg-white/5"
+				class="mt-3 min-h-[44px] rounded-full p-1.5 transition-colors hover:bg-[hsl(var(--color-foreground)/0.05)]"
 			>
 				<Heart
 					size={16}
 					weight={isFav ? 'fill' : 'regular'}
-					class="transition-colors {isFav ? 'text-red-400' : 'text-white/20 hover:text-white/40'}"
+					class="transition-colors {isFav
+						? 'text-red-400'
+						: 'text-[hsl(var(--color-muted-foreground)/0.5)] hover:text-[hsl(var(--color-muted-foreground))]'}"
 				/>
 			</button>
 		</div>
diff --git a/packages/shared-ui/src/organisms/BaseListView.svelte b/packages/shared-ui/src/organisms/BaseListView.svelte
index 19e27f3b1..87200883c 100644
--- a/packages/shared-ui/src/organisms/BaseListView.svelte
+++ b/packages/shared-ui/src/organisms/BaseListView.svelte
@@ -76,7 +76,7 @@
 	{/if}
 
 	{#if header}
-		<div class="flex gap-3 text-xs text-white/40">
+		<div class="flex gap-3 text-xs text-[hsl(var(--color-muted-foreground))]">
 			{@render header()}
 		</div>
 	{/if}