mirror of
https://github.com/Memo-2023/mana-monorepo.git
synced 2026-05-15 19:19:41 +02:00
fix(web): remove hardcoded white text, use theme tokens for light mode
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>
This commit is contained in:
Till JS
parent
3deee755b3
commit
248100d490
5 changed files with 48 additions and 33 deletions
|
|
@ -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;
|
||||
}
|
||||
|
|
|
|||
|
|
@ -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>
|
||||
|
|
|
|||
|
|
@ -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>
|
||||
|
|
|
|||
|
|
@ -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)]"
|
||||
>
|
||||
«{quotesStore.getText(quote)}»
|
||||
</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>
|
||||
|
|
|
|||
|
|
@ -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}
|
||||
|
|
|
|||
Loading…
Add table
Add a link
Reference in a new issue