From ea8ca13d37d5e855c281b9b9238115964e43a861 Mon Sep 17 00:00:00 2001 From: Till JS Date: Thu, 9 Apr 2026 13:02:33 +0200 Subject: [PATCH] fix(mana/web): wrap bare var(--color-X) refs in hsl() across 19 files (P5) MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit These were latent rendering bugs: --color-X holds raw HSL channels at runtime (set by createThemeStore), so a bare var(--color-foreground) is not a valid CSS color value — the browser falls back to inherited and the affected elements render with the wrong color (often invisible text on the same-colored background). Mechanical wrap of every bare reference in the affected files: var(--color-X) → hsl(var(--color-X)) var(--color-X, #fallback) → hsl(var(--color-X)) (fallback dropped) color-mix(... var(--color-X) N%, transparent) → hsl(var(--color-X) / 0.NN) Also re-mapped two long-removed token names: --color-surface → --color-muted (subtle surface intent) --color-destructive → --color-error (semantic alias) 190 refs across 19 files (habits, photos, notes, places, todo, cycles helpers + their parent route shells). Brand-literal hex/rgba colors left untouched (cycles pink, sport/category palettes, indigo→violet gradients, photo placeholder gradients). Co-Authored-By: Claude Opus 4.6 (1M context) --- .../cycles/components/SymptomManager.svelte | 2 +- .../src/lib/modules/habits/ListView.svelte | 52 ++++++++--------- .../habits/components/DayTimeline.svelte | 10 ++-- .../habits/components/HabitBoard.svelte | 10 ++-- .../habits/components/HabitDetail.svelte | 52 ++++++++--------- .../habits/components/HabitForm.svelte | 44 +++++++-------- .../src/lib/modules/photos/ListView.svelte | 34 +++++------ .../photos/components/albums/AlbumCard.svelte | 10 +--- .../photos/components/albums/AlbumGrid.svelte | 4 +- .../components/gallery/PhotoGrid.svelte | 4 +- .../src/lib/modules/places/ListView.svelte | 36 ++++++------ .../todo/components/pages/PageEditBar.svelte | 8 +-- .../todo/components/pages/PagePicker.svelte | 4 +- .../web/src/routes/(app)/habits/+page.svelte | 8 +-- .../src/routes/(app)/habits/[id]/+page.svelte | 6 +- .../web/src/routes/(app)/notes/+page.svelte | 56 +++++++++---------- .../src/routes/(app)/notes/[id]/+page.svelte | 26 ++++----- .../web/src/routes/(app)/photos/+page.svelte | 4 +- .../routes/(app)/photos/upload/+page.svelte | 12 ++-- 19 files changed, 189 insertions(+), 193 deletions(-) diff --git a/apps/mana/apps/web/src/lib/modules/cycles/components/SymptomManager.svelte b/apps/mana/apps/web/src/lib/modules/cycles/components/SymptomManager.svelte index f7364e745..8b6ec5cd8 100644 --- a/apps/mana/apps/web/src/lib/modules/cycles/components/SymptomManager.svelte +++ b/apps/mana/apps/web/src/lib/modules/cycles/components/SymptomManager.svelte @@ -115,7 +115,7 @@ {:else}
{sym.name} diff --git a/apps/mana/apps/web/src/lib/modules/habits/ListView.svelte b/apps/mana/apps/web/src/lib/modules/habits/ListView.svelte index b6d43bb8d..322cedb01 100644 --- a/apps/mana/apps/web/src/lib/modules/habits/ListView.svelte +++ b/apps/mana/apps/web/src/lib/modules/habits/ListView.svelte @@ -305,15 +305,15 @@ gap: 0.125rem; padding: 0.5rem 0.25rem; border-radius: 0.75rem; - background: var(--color-surface, rgba(255, 255, 255, 0.04)); - border: 1px solid var(--color-border, rgba(255, 255, 255, 0.08)); + background: hsl(var(--color-muted)); + border: 1px solid hsl(var(--color-border)); cursor: pointer; transition: transform 0.15s, box-shadow 0.15s; user-select: none; touch-action: manipulation; - color: var(--color-foreground, #fff); + color: hsl(var(--color-foreground)); } .tally-item:hover { @@ -355,7 +355,7 @@ .tally-name { font-size: 0.625rem; - color: var(--color-muted-foreground); + color: hsl(var(--color-muted-foreground)); text-overflow: ellipsis; overflow: hidden; white-space: nowrap; @@ -373,7 +373,7 @@ font-weight: 600; text-transform: uppercase; letter-spacing: 0.05em; - color: var(--color-muted-foreground); + color: hsl(var(--color-muted-foreground)); padding: 0.25rem 0; } @@ -393,7 +393,7 @@ } .log-name { - color: var(--color-foreground); + color: hsl(var(--color-foreground)); flex: 1; overflow: hidden; text-overflow: ellipsis; @@ -401,28 +401,28 @@ } .log-time { - color: var(--color-muted-foreground); + color: hsl(var(--color-muted-foreground)); font-variant-numeric: tabular-nums; flex-shrink: 0; } .add-btn { - border: 2px dashed var(--color-border, rgba(255, 255, 255, 0.15)); + border: 2px dashed hsl(var(--color-border)); background: transparent; } .add-btn:hover { - border-color: var(--color-primary, #6366f1); - color: var(--color-primary, #6366f1); + border-color: hsl(var(--color-primary)); + color: hsl(var(--color-primary)); } .add-icon { font-size: 1.25rem; font-weight: 300; line-height: 1; - color: var(--color-muted-foreground); + color: hsl(var(--color-muted-foreground)); } .add-btn:hover .add-icon { - color: var(--color-primary, #6366f1); + color: hsl(var(--color-primary)); } /* ── Create Form ──────────────────────────────── */ @@ -432,8 +432,8 @@ gap: 0.5rem; padding: 0.75rem; border-radius: 0.75rem; - background: var(--color-surface, rgba(255, 255, 255, 0.06)); - border: 1px solid var(--color-border, rgba(255, 255, 255, 0.1)); + background: hsl(var(--color-muted)); + border: 1px solid hsl(var(--color-border)); } .create-row { @@ -463,25 +463,25 @@ overflow-y: auto; border-radius: 0.5rem; padding: 0.5rem; - background: var(--color-surface, rgba(255, 255, 255, 0.03)); - border: 1px solid var(--color-border, rgba(255, 255, 255, 0.08)); + background: hsl(var(--color-muted)); + border: 1px solid hsl(var(--color-border)); } .create-input { flex: 1; background: transparent; border: none; - border-bottom: 2px solid var(--color-border, rgba(255, 255, 255, 0.15)); - color: var(--color-foreground); + border-bottom: 2px solid hsl(var(--color-border)); + color: hsl(var(--color-foreground)); font-size: 0.875rem; padding: 0.375rem 0; outline: none; } .create-input:focus { - border-color: var(--color-primary, #6366f1); + border-color: hsl(var(--color-primary)); } .create-input::placeholder { - color: var(--color-muted-foreground); + color: hsl(var(--color-muted-foreground)); } .color-row { @@ -502,7 +502,7 @@ } .color-dot.selected { border-color: white; - box-shadow: 0 0 0 1px var(--color-primary, #6366f1); + box-shadow: 0 0 0 1px hsl(var(--color-primary)); } .create-actions { @@ -523,14 +523,14 @@ .btn-cancel { background: transparent; - color: var(--color-muted-foreground); + color: hsl(var(--color-muted-foreground)); } .btn-cancel:hover { - background: var(--color-muted, rgba(255, 255, 255, 0.08)); + background: hsl(var(--color-muted)); } .btn-create { - background: var(--color-primary, #6366f1); + background: hsl(var(--color-primary)); color: white; } .btn-create:hover:not(:disabled) { @@ -544,7 +544,7 @@ /* ── Empty / Misc ─────────────────────────────── */ .empty { text-align: center; - color: var(--color-muted-foreground); + color: hsl(var(--color-muted-foreground)); font-size: 0.875rem; padding: 2rem 0; display: flex; @@ -556,7 +556,7 @@ .empty-add-btn { padding: 0.5rem 1rem; border-radius: 0.5rem; - background: var(--color-primary, #6366f1); + background: hsl(var(--color-primary)); color: white; border: none; font-size: 0.8125rem; diff --git a/apps/mana/apps/web/src/lib/modules/habits/components/DayTimeline.svelte b/apps/mana/apps/web/src/lib/modules/habits/components/DayTimeline.svelte index 324a3f1aa..599451a1a 100644 --- a/apps/mana/apps/web/src/lib/modules/habits/components/DayTimeline.svelte +++ b/apps/mana/apps/web/src/lib/modules/habits/components/DayTimeline.svelte @@ -73,7 +73,7 @@ font-weight: 600; text-transform: uppercase; letter-spacing: 0.05em; - color: var(--color-muted-foreground); + color: hsl(var(--color-muted-foreground)); padding: 0 0.25rem; } @@ -89,7 +89,7 @@ gap: 0.5rem; padding: 0.5rem 0.75rem; border-radius: 0.5rem; - background: var(--color-surface, rgba(255, 255, 255, 0.04)); + background: hsl(var(--color-muted)); font-size: 0.875rem; } @@ -107,19 +107,19 @@ } .entry-title { - color: var(--color-foreground); + color: hsl(var(--color-foreground)); font-weight: 500; } .entry-time { margin-left: auto; - color: var(--color-muted-foreground); + color: hsl(var(--color-muted-foreground)); font-size: 0.8125rem; font-variant-numeric: tabular-nums; } .entry-note { - color: var(--color-muted-foreground); + color: hsl(var(--color-muted-foreground)); font-size: 0.8125rem; font-style: italic; } diff --git a/apps/mana/apps/web/src/lib/modules/habits/components/HabitBoard.svelte b/apps/mana/apps/web/src/lib/modules/habits/components/HabitBoard.svelte index fff1b4bcc..4c13c8499 100644 --- a/apps/mana/apps/web/src/lib/modules/habits/components/HabitBoard.svelte +++ b/apps/mana/apps/web/src/lib/modules/habits/components/HabitBoard.svelte @@ -73,16 +73,16 @@ gap: 0.25rem; aspect-ratio: 1; border-radius: 1rem; - background: var(--color-surface, rgba(255, 255, 255, 0.04)); - border: 2px dashed var(--color-border, rgba(255, 255, 255, 0.15)); - color: var(--color-muted-foreground); + background: hsl(var(--color-muted)); + border: 2px dashed hsl(var(--color-border)); + color: hsl(var(--color-muted-foreground)); cursor: pointer; transition: all 0.15s; } .add-tile:hover { - border-color: var(--color-primary, #6366f1); - color: var(--color-primary, #6366f1); + border-color: hsl(var(--color-primary)); + color: hsl(var(--color-primary)); background: rgba(99, 102, 241, 0.06); } diff --git a/apps/mana/apps/web/src/lib/modules/habits/components/HabitDetail.svelte b/apps/mana/apps/web/src/lib/modules/habits/components/HabitDetail.svelte index 1160e0dd3..b917f2ce2 100644 --- a/apps/mana/apps/web/src/lib/modules/habits/components/HabitDetail.svelte +++ b/apps/mana/apps/web/src/lib/modules/habits/components/HabitDetail.svelte @@ -209,14 +209,14 @@ height: 2rem; border-radius: 0.5rem; background: transparent; - color: var(--color-muted-foreground); + color: hsl(var(--color-muted-foreground)); border: none; cursor: pointer; transition: background 0.15s; } .back-btn:hover, .edit-btn:hover { - background: var(--color-muted, rgba(255, 255, 255, 0.08)); + background: hsl(var(--color-muted)); } .header-info { @@ -234,7 +234,7 @@ .header-title { font-size: 1.25rem; font-weight: 700; - color: var(--color-foreground); + color: hsl(var(--color-foreground)); } .stats-grid { @@ -249,34 +249,34 @@ align-items: center; padding: 0.75rem; border-radius: 0.75rem; - background: var(--color-surface, rgba(255, 255, 255, 0.04)); - border: 1px solid var(--color-border, rgba(255, 255, 255, 0.08)); + background: hsl(var(--color-muted)); + border: 1px solid hsl(var(--color-border)); } .stat-value { font-size: 1.5rem; font-weight: 700; - color: var(--color-foreground); + color: hsl(var(--color-foreground)); font-variant-numeric: tabular-nums; } .stat-label { font-size: 0.75rem; - color: var(--color-muted-foreground); + color: hsl(var(--color-muted-foreground)); margin-top: 0.125rem; } .week-chart { padding: 1rem; border-radius: 0.75rem; - background: var(--color-surface, rgba(255, 255, 255, 0.04)); - border: 1px solid var(--color-border, rgba(255, 255, 255, 0.08)); + background: hsl(var(--color-muted)); + border: 1px solid hsl(var(--color-border)); } .chart-title { font-size: 0.75rem; font-weight: 600; - color: var(--color-muted-foreground); + color: hsl(var(--color-muted-foreground)); margin-bottom: 0.75rem; } @@ -315,13 +315,13 @@ .bar-count { font-size: 0.6875rem; font-weight: 600; - color: var(--color-foreground); + color: hsl(var(--color-foreground)); font-variant-numeric: tabular-nums; } .bar-day { font-size: 0.625rem; - color: var(--color-muted-foreground); + color: hsl(var(--color-muted-foreground)); text-transform: uppercase; } @@ -358,7 +358,7 @@ .section-title { font-size: 0.875rem; font-weight: 600; - color: var(--color-foreground); + color: hsl(var(--color-foreground)); } .day-group { @@ -372,7 +372,7 @@ font-weight: 600; text-transform: uppercase; letter-spacing: 0.05em; - color: var(--color-muted-foreground); + color: hsl(var(--color-muted-foreground)); padding: 0.25rem 0; } @@ -382,19 +382,19 @@ gap: 0.5rem; padding: 0.375rem 0.5rem; border-radius: 0.375rem; - background: var(--color-surface, rgba(255, 255, 255, 0.03)); + background: hsl(var(--color-muted)); } .log-time { font-size: 0.8125rem; font-weight: 500; - color: var(--color-foreground); + color: hsl(var(--color-foreground)); font-variant-numeric: tabular-nums; } .log-note { font-size: 0.8125rem; - color: var(--color-muted-foreground); + color: hsl(var(--color-muted-foreground)); font-style: italic; flex: 1; } @@ -407,7 +407,7 @@ height: 1.25rem; border-radius: 0.25rem; background: transparent; - color: var(--color-muted-foreground); + color: hsl(var(--color-muted-foreground)); border: none; cursor: pointer; opacity: 0; @@ -418,7 +418,7 @@ opacity: 1; } .log-delete:hover { - color: var(--color-destructive, #ef4444); + color: hsl(var(--color-error)); background: rgba(239, 68, 68, 0.1); } @@ -426,7 +426,7 @@ display: flex; gap: 0.5rem; padding-top: 0.5rem; - border-top: 1px solid var(--color-border, rgba(255, 255, 255, 0.08)); + border-top: 1px solid hsl(var(--color-border)); } .action-btn { @@ -434,18 +434,18 @@ border-radius: 0.5rem; font-size: 0.8125rem; font-weight: 500; - background: var(--color-surface, rgba(255, 255, 255, 0.06)); - color: var(--color-muted-foreground); - border: 1px solid var(--color-border, rgba(255, 255, 255, 0.1)); + background: hsl(var(--color-muted)); + color: hsl(var(--color-muted-foreground)); + border: 1px solid hsl(var(--color-border)); cursor: pointer; transition: all 0.15s; } .action-btn:hover { - background: var(--color-muted, rgba(255, 255, 255, 0.1)); + background: hsl(var(--color-muted)); } .action-btn.danger { - color: var(--color-destructive, #ef4444); + color: hsl(var(--color-error)); border-color: rgba(239, 68, 68, 0.2); } .action-btn.danger:hover { @@ -453,7 +453,7 @@ } .empty-text { - color: var(--color-muted-foreground); + color: hsl(var(--color-muted-foreground)); font-size: 0.875rem; text-align: center; padding: 1.5rem 0; diff --git a/apps/mana/apps/web/src/lib/modules/habits/components/HabitForm.svelte b/apps/mana/apps/web/src/lib/modules/habits/components/HabitForm.svelte index 255bd4dc9..5dfaa0992 100644 --- a/apps/mana/apps/web/src/lib/modules/habits/components/HabitForm.svelte +++ b/apps/mana/apps/web/src/lib/modules/habits/components/HabitForm.svelte @@ -202,8 +202,8 @@ gap: 0.75rem; padding: 1rem; border-radius: 1rem; - background: var(--color-surface, rgba(255, 255, 255, 0.06)); - border: 1px solid var(--color-border, rgba(255, 255, 255, 0.1)); + background: hsl(var(--color-muted)); + border: 1px solid hsl(var(--color-border)); } .form-row { @@ -232,17 +232,17 @@ flex: 1; background: transparent; border: none; - border-bottom: 2px solid var(--color-border, rgba(255, 255, 255, 0.15)); - color: var(--color-foreground); + border-bottom: 2px solid hsl(var(--color-border)); + color: hsl(var(--color-foreground)); font-size: 1rem; padding: 0.5rem 0; outline: none; } .title-input:focus { - border-color: var(--color-primary, #6366f1); + border-color: hsl(var(--color-primary)); } .title-input::placeholder { - color: var(--color-muted-foreground); + color: hsl(var(--color-muted-foreground)); } .icon-picker-wrapper { @@ -250,8 +250,8 @@ overflow-y: auto; border-radius: 0.5rem; padding: 0.5rem; - background: var(--color-surface, rgba(255, 255, 255, 0.03)); - border: 1px solid var(--color-border, rgba(255, 255, 255, 0.08)); + background: hsl(var(--color-muted)); + border: 1px solid hsl(var(--color-border)); } .color-picker { @@ -273,7 +273,7 @@ } .color-swatch.selected { border-color: white; - box-shadow: 0 0 0 2px var(--color-primary, #6366f1); + box-shadow: 0 0 0 2px hsl(var(--color-primary)); } .target-label { @@ -281,22 +281,22 @@ align-items: center; gap: 0.5rem; font-size: 0.875rem; - color: var(--color-muted-foreground); + color: hsl(var(--color-muted-foreground)); } .target-input { width: 4rem; background: transparent; - border: 1px solid var(--color-border, rgba(255, 255, 255, 0.15)); + border: 1px solid hsl(var(--color-border)); border-radius: 0.5rem; - color: var(--color-foreground); + color: hsl(var(--color-foreground)); font-size: 0.875rem; padding: 0.375rem 0.5rem; outline: none; text-align: center; } .target-input:focus { - border-color: var(--color-primary, #6366f1); + border-color: hsl(var(--color-primary)); } .schedule-section { @@ -309,7 +309,7 @@ align-items: center; gap: 0.5rem; font-size: 0.875rem; - color: var(--color-muted-foreground); + color: hsl(var(--color-muted-foreground)); cursor: pointer; } .schedule-days { @@ -320,20 +320,20 @@ width: 2rem; height: 2rem; border-radius: 50%; - border: 1px solid var(--color-border, rgba(255, 255, 255, 0.15)); + border: 1px solid hsl(var(--color-border)); background: transparent; - color: var(--color-muted-foreground); + color: hsl(var(--color-muted-foreground)); font-size: 0.6875rem; font-weight: 500; cursor: pointer; transition: all 0.15s; } .day-btn:hover { - border-color: var(--color-primary, #6366f1); + border-color: hsl(var(--color-primary)); } .day-btn.active { - background: var(--color-primary, #6366f1); - border-color: var(--color-primary, #6366f1); + background: hsl(var(--color-primary)); + border-color: hsl(var(--color-primary)); color: white; } @@ -356,14 +356,14 @@ .btn-cancel { background: transparent; - color: var(--color-muted-foreground); + color: hsl(var(--color-muted-foreground)); } .btn-cancel:hover { - background: var(--color-muted, rgba(255, 255, 255, 0.08)); + background: hsl(var(--color-muted)); } .btn-save { - background: var(--color-primary, #6366f1); + background: hsl(var(--color-primary)); color: white; } .btn-save:hover:not(:disabled) { diff --git a/apps/mana/apps/web/src/lib/modules/photos/ListView.svelte b/apps/mana/apps/web/src/lib/modules/photos/ListView.svelte index 861158456..8a2937eaa 100644 --- a/apps/mana/apps/web/src/lib/modules/photos/ListView.svelte +++ b/apps/mana/apps/web/src/lib/modules/photos/ListView.svelte @@ -259,9 +259,9 @@ justify-content: center; gap: 0.5rem; background: rgba(99, 102, 241, 0.15); - border: 2px dashed var(--color-primary, #6366f1); + border: 2px dashed hsl(var(--color-primary)); border-radius: 0.75rem; - color: var(--color-primary, #6366f1); + color: hsl(var(--color-primary)); font-size: 0.875rem; font-weight: 600; pointer-events: none; @@ -272,7 +272,7 @@ display: flex; gap: 0.75rem; font-size: 0.75rem; - color: var(--color-muted-foreground, rgba(255, 255, 255, 0.4)); + color: hsl(var(--color-muted-foreground)); } /* ── Upload Button ─────────────────────────────── */ @@ -283,17 +283,17 @@ gap: 0.5rem; padding: 0.625rem; border-radius: 0.5rem; - border: 2px dashed var(--color-border, rgba(255, 255, 255, 0.15)); + border: 2px dashed hsl(var(--color-border)); background: transparent; - color: var(--color-muted-foreground, rgba(255, 255, 255, 0.5)); + color: hsl(var(--color-muted-foreground)); font-size: 0.8125rem; font-weight: 500; cursor: pointer; transition: all 0.15s; } .upload-btn:hover { - border-color: var(--color-primary, #6366f1); - color: var(--color-primary, #6366f1); + border-color: hsl(var(--color-primary)); + color: hsl(var(--color-primary)); background: rgba(99, 102, 241, 0.05); } @@ -315,7 +315,7 @@ aspect-ratio: 1; border-radius: 0.375rem; overflow: hidden; - background: var(--color-surface, rgba(255, 255, 255, 0.04)); + background: hsl(var(--color-muted)); } .upload-thumb img { width: 100%; @@ -327,7 +327,7 @@ outline-offset: -2px; } .upload-thumb.error { - outline: 2px solid var(--color-destructive, #ef4444); + outline: 2px solid hsl(var(--color-error)); outline-offset: -2px; } @@ -370,7 +370,7 @@ font-weight: 600; text-transform: uppercase; letter-spacing: 0.05em; - color: var(--color-muted-foreground, rgba(255, 255, 255, 0.4)); + color: hsl(var(--color-muted-foreground)); margin-bottom: 0.5rem; } @@ -385,7 +385,7 @@ cursor: pointer; } .album-row:hover { - background: var(--color-surface, rgba(255, 255, 255, 0.05)); + background: hsl(var(--color-muted)); } .album-icon { @@ -395,8 +395,8 @@ width: 1.75rem; height: 1.75rem; border-radius: 0.375rem; - background: var(--color-surface, rgba(255, 255, 255, 0.06)); - color: var(--color-muted-foreground); + background: hsl(var(--color-muted)); + color: hsl(var(--color-muted-foreground)); flex-shrink: 0; } @@ -408,7 +408,7 @@ .album-name { font-size: 0.8125rem; font-weight: 500; - color: var(--color-foreground, rgba(255, 255, 255, 0.8)); + color: hsl(var(--color-foreground)); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; @@ -416,7 +416,7 @@ .album-desc { font-size: 0.6875rem; - color: var(--color-muted-foreground, rgba(255, 255, 255, 0.3)); + color: hsl(var(--color-muted-foreground)); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; @@ -424,7 +424,7 @@ .album-badge { font-size: 0.625rem; - color: var(--color-muted-foreground, rgba(255, 255, 255, 0.3)); + color: hsl(var(--color-muted-foreground)); flex-shrink: 0; } @@ -432,7 +432,7 @@ padding: 2rem 0; text-align: center; font-size: 0.8125rem; - color: var(--color-muted-foreground, rgba(255, 255, 255, 0.3)); + color: hsl(var(--color-muted-foreground)); } @keyframes spin { diff --git a/apps/mana/apps/web/src/lib/modules/photos/components/albums/AlbumCard.svelte b/apps/mana/apps/web/src/lib/modules/photos/components/albums/AlbumCard.svelte index a48c8e930..e7e97c44e 100644 --- a/apps/mana/apps/web/src/lib/modules/photos/components/albums/AlbumCard.svelte +++ b/apps/mana/apps/web/src/lib/modules/photos/components/albums/AlbumCard.svelte @@ -33,7 +33,7 @@ aspect-ratio: 4/3; overflow: hidden; border-radius: 0.75rem; - background-color: var(--color-muted, #f1f5f9); + background-color: hsl(var(--color-muted)); cursor: pointer; border: none; padding: 0; @@ -60,12 +60,8 @@ display: flex; align-items: center; justify-content: center; - color: var(--color-muted-foreground, #64748b); - background: linear-gradient( - 135deg, - var(--color-muted, #f1f5f9) 0%, - var(--color-accent, #e2e8f0) 100% - ); + color: hsl(var(--color-muted-foreground)); + background: linear-gradient(135deg, hsl(var(--color-muted)) 0%, hsl(var(--color-accent)) 100%); } .album-overlay { diff --git a/apps/mana/apps/web/src/lib/modules/photos/components/albums/AlbumGrid.svelte b/apps/mana/apps/web/src/lib/modules/photos/components/albums/AlbumGrid.svelte index 100224744..6a03e2a82 100644 --- a/apps/mana/apps/web/src/lib/modules/photos/components/albums/AlbumGrid.svelte +++ b/apps/mana/apps/web/src/lib/modules/photos/components/albums/AlbumGrid.svelte @@ -39,8 +39,8 @@ .spinner { width: 32px; height: 32px; - border: 3px solid var(--color-border, #e2e8f0); - border-top-color: var(--color-primary, #6366f1); + border: 3px solid hsl(var(--color-border)); + border-top-color: hsl(var(--color-primary)); border-radius: 50%; animation: spin 1s linear infinite; } diff --git a/apps/mana/apps/web/src/lib/modules/photos/components/gallery/PhotoGrid.svelte b/apps/mana/apps/web/src/lib/modules/photos/components/gallery/PhotoGrid.svelte index 7d5d3d263..8555b3d23 100644 --- a/apps/mana/apps/web/src/lib/modules/photos/components/gallery/PhotoGrid.svelte +++ b/apps/mana/apps/web/src/lib/modules/photos/components/gallery/PhotoGrid.svelte @@ -87,8 +87,8 @@ .spinner { width: 32px; height: 32px; - border: 3px solid var(--color-border, #e2e8f0); - border-top-color: var(--color-primary, #6366f1); + border: 3px solid hsl(var(--color-border)); + border-top-color: hsl(var(--color-primary)); border-radius: 50%; animation: spin 1s linear infinite; } diff --git a/apps/mana/apps/web/src/lib/modules/places/ListView.svelte b/apps/mana/apps/web/src/lib/modules/places/ListView.svelte index 6c2406bb5..a251d7a9b 100644 --- a/apps/mana/apps/web/src/lib/modules/places/ListView.svelte +++ b/apps/mana/apps/web/src/lib/modules/places/ListView.svelte @@ -273,8 +273,8 @@ gap: 0.25rem; padding: 0.5rem; border-radius: 0.75rem; - background: var(--color-surface, rgba(255, 255, 255, 0.04)); - border: 1px solid var(--color-border, rgba(255, 255, 255, 0.08)); + background: hsl(var(--color-muted)); + border: 1px solid hsl(var(--color-border)); } .tracking-row { @@ -289,9 +289,9 @@ gap: 0.375rem; padding: 0.375rem 0.75rem; border-radius: 9999px; - border: 1px solid var(--color-border, rgba(255, 255, 255, 0.15)); + border: 1px solid hsl(var(--color-border)); background: transparent; - color: var(--color-foreground); + color: hsl(var(--color-foreground)); font-size: 0.75rem; font-weight: 500; cursor: pointer; @@ -323,7 +323,7 @@ .tracking-coords { font-size: 0.6875rem; - color: var(--color-muted-foreground); + color: hsl(var(--color-muted-foreground)); font-variant-numeric: tabular-nums; } @@ -341,9 +341,9 @@ flex: 1; padding: 0.375rem 0.625rem; border-radius: 0.5rem; - border: 1px solid var(--color-border, rgba(255, 255, 255, 0.1)); + border: 1px solid hsl(var(--color-border)); background: transparent; - color: var(--color-foreground); + color: hsl(var(--color-foreground)); font-size: 0.8125rem; outline: none; } @@ -353,7 +353,7 @@ } .search-input::placeholder { - color: var(--color-muted-foreground); + color: hsl(var(--color-muted-foreground)); } /* ── Quick Create ─────────────────────────── */ @@ -366,9 +366,9 @@ flex: 1; padding: 0.375rem 0.625rem; border-radius: 0.5rem; - border: 1px solid var(--color-border, rgba(255, 255, 255, 0.1)); + border: 1px solid hsl(var(--color-border)); background: transparent; - color: var(--color-foreground); + color: hsl(var(--color-foreground)); font-size: 0.8125rem; outline: none; } @@ -378,15 +378,15 @@ } .create-input::placeholder { - color: var(--color-muted-foreground); + color: hsl(var(--color-muted-foreground)); } .create-btn { padding: 0.375rem 0.5rem; border-radius: 0.5rem; - border: 1px solid var(--color-border, rgba(255, 255, 255, 0.1)); + border: 1px solid hsl(var(--color-border)); background: transparent; - color: var(--color-foreground); + color: hsl(var(--color-foreground)); cursor: pointer; display: flex; align-items: center; @@ -419,7 +419,7 @@ border-radius: 0.5rem; border: none; background: transparent; - color: var(--color-foreground); + color: hsl(var(--color-foreground)); cursor: pointer; text-align: left; transition: background 0.15s; @@ -427,7 +427,7 @@ } .place-item:hover { - background: var(--color-surface, rgba(255, 255, 255, 0.04)); + background: hsl(var(--color-muted)); } .place-icon { @@ -465,7 +465,7 @@ align-items: center; gap: 0.375rem; font-size: 0.6875rem; - color: var(--color-muted-foreground); + color: hsl(var(--color-muted-foreground)); } .category-badge { @@ -500,14 +500,14 @@ .visit-count { font-size: 0.6875rem; font-weight: 600; - color: var(--color-muted-foreground); + color: hsl(var(--color-muted-foreground)); font-variant-numeric: tabular-nums; } /* ── Empty ────────────────────────────────── */ .empty { text-align: center; - color: var(--color-muted-foreground); + color: hsl(var(--color-muted-foreground)); font-size: 0.8125rem; padding: 2rem 0; } diff --git a/apps/mana/apps/web/src/lib/modules/todo/components/pages/PageEditBar.svelte b/apps/mana/apps/web/src/lib/modules/todo/components/pages/PageEditBar.svelte index 3fd399113..10789b435 100644 --- a/apps/mana/apps/web/src/lib/modules/todo/components/pages/PageEditBar.svelte +++ b/apps/mana/apps/web/src/lib/modules/todo/components/pages/PageEditBar.svelte @@ -194,7 +194,7 @@ color: hsl(var(--color-foreground)); } .icon-btn.active { - background: var(--color-primary, #8b5cf6); + background: hsl(var(--color-primary)); color: hsl(var(--color-primary-foreground)); } .filter-toggle { @@ -261,8 +261,8 @@ color: hsl(var(--color-foreground)); } .filter-pill.active { - background: var(--pill-color, var(--color-primary, #8b5cf6)); - border-color: var(--pill-color, var(--color-primary, #8b5cf6)); + background: var(--pill-color, hsl(var(--color-primary))); + border-color: var(--pill-color, hsl(var(--color-primary))); color: hsl(var(--color-primary-foreground)); } .completed-toggle { @@ -276,7 +276,7 @@ .completed-toggle input { width: 14px; height: 14px; - accent-color: var(--color-primary, #8b5cf6); + accent-color: hsl(var(--color-primary)); cursor: pointer; } .actions-row { diff --git a/apps/mana/apps/web/src/lib/modules/todo/components/pages/PagePicker.svelte b/apps/mana/apps/web/src/lib/modules/todo/components/pages/PagePicker.svelte index 138bf2dbb..e0e75686a 100644 --- a/apps/mana/apps/web/src/lib/modules/todo/components/pages/PagePicker.svelte +++ b/apps/mana/apps/web/src/lib/modules/todo/components/pages/PagePicker.svelte @@ -111,7 +111,7 @@ margin-top: 0.25rem; } :global(.picker .custom-icon) { - color: var(--color-primary, #8b5cf6); - background: color-mix(in srgb, var(--color-primary, #8b5cf6) 10%, transparent); + color: hsl(var(--color-primary)); + background: hsl(var(--color-primary) / 0.1); } diff --git a/apps/mana/apps/web/src/routes/(app)/habits/+page.svelte b/apps/mana/apps/web/src/routes/(app)/habits/+page.svelte index 1cdadaa43..a297d49ac 100644 --- a/apps/mana/apps/web/src/routes/(app)/habits/+page.svelte +++ b/apps/mana/apps/web/src/routes/(app)/habits/+page.svelte @@ -87,7 +87,7 @@ .habits-title { font-size: 1.5rem; font-weight: 700; - color: var(--color-foreground); + color: hsl(var(--color-foreground)); } .habits-stats { @@ -95,7 +95,7 @@ gap: 1rem; margin-top: 0.25rem; font-size: 0.875rem; - color: var(--color-muted-foreground); + color: hsl(var(--color-muted-foreground)); } .board-section { @@ -111,11 +111,11 @@ .section-title { font-size: 0.875rem; font-weight: 600; - color: var(--color-foreground); + color: hsl(var(--color-foreground)); } .loading { - color: var(--color-muted-foreground); + color: hsl(var(--color-muted-foreground)); text-align: center; padding: 3rem 0; } diff --git a/apps/mana/apps/web/src/routes/(app)/habits/[id]/+page.svelte b/apps/mana/apps/web/src/routes/(app)/habits/[id]/+page.svelte index df4bea81d..a834af9b3 100644 --- a/apps/mana/apps/web/src/routes/(app)/habits/[id]/+page.svelte +++ b/apps/mana/apps/web/src/routes/(app)/habits/[id]/+page.svelte @@ -55,21 +55,21 @@ .not-found { text-align: center; padding: 3rem 0; - color: var(--color-muted-foreground); + color: hsl(var(--color-muted-foreground)); } .not-found button { margin-top: 1rem; padding: 0.5rem 1rem; border-radius: 0.5rem; - background: var(--color-primary, #6366f1); + background: hsl(var(--color-primary)); color: white; border: none; cursor: pointer; } .loading { - color: var(--color-muted-foreground); + color: hsl(var(--color-muted-foreground)); text-align: center; padding: 3rem 0; } diff --git a/apps/mana/apps/web/src/routes/(app)/notes/+page.svelte b/apps/mana/apps/web/src/routes/(app)/notes/+page.svelte index 390e9c9f8..ab248f2a8 100644 --- a/apps/mana/apps/web/src/routes/(app)/notes/+page.svelte +++ b/apps/mana/apps/web/src/routes/(app)/notes/+page.svelte @@ -94,7 +94,7 @@ type="button" class="color-dot" class:selected={newColor === c} - style:background={c ?? 'var(--color-muted-foreground)'} + style:background={c ?? 'hsl(var(--color-muted-foreground))'} style:opacity={c ? 1 : 0.4} onclick={() => (newColor = c)} > @@ -181,11 +181,11 @@ .notes-title { font-size: 1.5rem; font-weight: 700; - color: var(--color-foreground); + color: hsl(var(--color-foreground)); } .notes-stats { font-size: 0.875rem; - color: var(--color-muted-foreground); + color: hsl(var(--color-muted-foreground)); margin-top: 0.25rem; } @@ -196,25 +196,25 @@ .search-input { flex: 1; - background: var(--color-surface, rgba(255, 255, 255, 0.04)); - border: 1px solid var(--color-border, rgba(255, 255, 255, 0.1)); + background: hsl(var(--color-muted)); + border: 1px solid hsl(var(--color-border)); border-radius: 0.5rem; - color: var(--color-foreground); + color: hsl(var(--color-foreground)); font-size: 0.875rem; padding: 0.5rem 0.75rem; outline: none; } .search-input:focus { - border-color: var(--color-primary, #6366f1); + border-color: hsl(var(--color-primary)); } .search-input::placeholder { - color: var(--color-muted-foreground); + color: hsl(var(--color-muted-foreground)); } .add-btn { padding: 0.5rem 1rem; border-radius: 0.5rem; - background: var(--color-primary, #6366f1); + background: hsl(var(--color-primary)); color: white; border: none; font-size: 0.875rem; @@ -233,27 +233,27 @@ gap: 0.5rem; padding: 1rem; border-radius: 0.75rem; - background: var(--color-surface, rgba(255, 255, 255, 0.06)); - border: 1px solid var(--color-border, rgba(255, 255, 255, 0.1)); + background: hsl(var(--color-muted)); + border: 1px solid hsl(var(--color-border)); } .create-title { background: transparent; border: none; - color: var(--color-foreground); + color: hsl(var(--color-foreground)); font-size: 1rem; font-weight: 600; padding: 0.25rem 0; outline: none; } .create-title::placeholder { - color: var(--color-muted-foreground); + color: hsl(var(--color-muted-foreground)); } .create-content { background: transparent; border: none; - color: var(--color-foreground); + color: hsl(var(--color-foreground)); font-size: 0.875rem; padding: 0.25rem 0; outline: none; @@ -262,7 +262,7 @@ font-family: inherit; } .create-content::placeholder { - color: var(--color-muted-foreground); + color: hsl(var(--color-muted-foreground)); } .create-footer { @@ -288,7 +288,7 @@ } .color-dot.selected { border-color: white; - box-shadow: 0 0 0 1px var(--color-primary, #6366f1); + box-shadow: 0 0 0 1px hsl(var(--color-primary)); } .create-actions { @@ -306,13 +306,13 @@ } .btn-cancel { background: transparent; - color: var(--color-muted-foreground); + color: hsl(var(--color-muted-foreground)); } .btn-cancel:hover { - background: var(--color-muted, rgba(255, 255, 255, 0.08)); + background: hsl(var(--color-muted)); } .btn-save { - background: var(--color-primary, #6366f1); + background: hsl(var(--color-primary)); color: white; } .btn-save:hover { @@ -329,7 +329,7 @@ font-weight: 600; text-transform: uppercase; letter-spacing: 0.05em; - color: var(--color-muted-foreground); + color: hsl(var(--color-muted-foreground)); } .notes-grid { @@ -344,8 +344,8 @@ gap: 0.375rem; padding: 0.75rem; border-radius: 0.75rem; - background: var(--color-surface, rgba(255, 255, 255, 0.04)); - border: 1px solid var(--color-border, rgba(255, 255, 255, 0.08)); + background: hsl(var(--color-muted)); + border: 1px solid hsl(var(--color-border)); border-top: 3px solid transparent; text-decoration: none; transition: @@ -354,14 +354,14 @@ min-height: 6rem; } .note-card:hover { - background: var(--color-muted, rgba(255, 255, 255, 0.08)); + background: hsl(var(--color-muted)); transform: translateY(-1px); } .card-title { font-size: 0.875rem; font-weight: 600; - color: var(--color-foreground); + color: hsl(var(--color-foreground)); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; @@ -369,7 +369,7 @@ .card-preview { font-size: 0.8125rem; - color: var(--color-muted-foreground); + color: hsl(var(--color-muted-foreground)); display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; @@ -379,14 +379,14 @@ .card-meta { font-size: 0.6875rem; - color: var(--color-muted-foreground); + color: hsl(var(--color-muted-foreground)); opacity: 0.7; margin-top: auto; } .empty { text-align: center; - color: var(--color-muted-foreground); + color: hsl(var(--color-muted-foreground)); font-size: 0.875rem; padding: 3rem 0; display: flex; @@ -396,7 +396,7 @@ } .loading { - color: var(--color-muted-foreground); + color: hsl(var(--color-muted-foreground)); text-align: center; padding: 3rem 0; } diff --git a/apps/mana/apps/web/src/routes/(app)/notes/[id]/+page.svelte b/apps/mana/apps/web/src/routes/(app)/notes/[id]/+page.svelte index 4d201099b..58f44a2d8 100644 --- a/apps/mana/apps/web/src/routes/(app)/notes/[id]/+page.svelte +++ b/apps/mana/apps/web/src/routes/(app)/notes/[id]/+page.svelte @@ -131,7 +131,7 @@ type="button" class="color-dot" class:selected={note.color === c} - style:background={c ?? 'var(--color-muted-foreground)'} + style:background={c ?? 'hsl(var(--color-muted-foreground))'} style:opacity={c ? 1 : 0.4} onclick={() => handleColorChange(c)} > @@ -178,18 +178,18 @@ height: 2rem; border-radius: 0.5rem; background: transparent; - color: var(--color-muted-foreground); + color: hsl(var(--color-muted-foreground)); border: none; cursor: pointer; } .back-btn:hover { - background: var(--color-muted, rgba(255, 255, 255, 0.08)); + background: hsl(var(--color-muted)); } .header-meta { flex: 1; font-size: 0.8125rem; - color: var(--color-muted-foreground); + color: hsl(var(--color-muted-foreground)); } .header-actions { @@ -219,20 +219,20 @@ .detail-title { background: transparent; border: none; - color: var(--color-foreground); + color: hsl(var(--color-foreground)); font-size: 1.5rem; font-weight: 700; padding: 0; outline: none; } .detail-title::placeholder { - color: var(--color-muted-foreground); + color: hsl(var(--color-muted-foreground)); } .detail-content { background: transparent; border: none; - color: var(--color-foreground); + color: hsl(var(--color-foreground)); font-size: 0.9375rem; line-height: 1.6; padding: 0; @@ -243,7 +243,7 @@ flex: 1; } .detail-content::placeholder { - color: var(--color-muted-foreground); + color: hsl(var(--color-muted-foreground)); } .detail-footer { @@ -251,7 +251,7 @@ justify-content: space-between; align-items: center; padding-top: 0.75rem; - border-top: 1px solid var(--color-border, rgba(255, 255, 255, 0.08)); + border-top: 1px solid hsl(var(--color-border)); } .color-row { @@ -272,7 +272,7 @@ } .color-dot.selected { border-color: white; - box-shadow: 0 0 0 1px var(--color-primary, #6366f1); + box-shadow: 0 0 0 1px hsl(var(--color-primary)); } .danger-actions { @@ -285,7 +285,7 @@ font-size: 0.8125rem; font-weight: 500; background: transparent; - color: var(--color-destructive, #ef4444); + color: hsl(var(--color-error)); border: 1px solid rgba(239, 68, 68, 0.2); cursor: pointer; } @@ -300,13 +300,13 @@ .loading { text-align: center; padding: 3rem 0; - color: var(--color-muted-foreground); + color: hsl(var(--color-muted-foreground)); } .not-found button { margin-top: 1rem; padding: 0.5rem 1rem; border-radius: 0.5rem; - background: var(--color-primary, #6366f1); + background: hsl(var(--color-primary)); color: white; border: none; cursor: pointer; diff --git a/apps/mana/apps/web/src/routes/(app)/photos/+page.svelte b/apps/mana/apps/web/src/routes/(app)/photos/+page.svelte index ac9dbd6f6..cbba8eca2 100644 --- a/apps/mana/apps/web/src/routes/(app)/photos/+page.svelte +++ b/apps/mana/apps/web/src/routes/(app)/photos/+page.svelte @@ -110,8 +110,8 @@ .error-message { padding: 1rem; - background-color: var(--color-destructive); - color: var(--color-destructive-foreground); + background-color: hsl(var(--color-error)); + color: white; border-radius: var(--radius-md); margin-bottom: 1rem; } diff --git a/apps/mana/apps/web/src/routes/(app)/photos/upload/+page.svelte b/apps/mana/apps/web/src/routes/(app)/photos/upload/+page.svelte index b73b15491..01207c5aa 100644 --- a/apps/mana/apps/web/src/routes/(app)/photos/upload/+page.svelte +++ b/apps/mana/apps/web/src/routes/(app)/photos/upload/+page.svelte @@ -194,15 +194,15 @@ aspect-ratio: 1; border-radius: var(--radius-md); overflow: hidden; - background: var(--color-muted); + background: hsl(var(--color-muted)); } .file-item.success { - outline: 2px solid var(--color-success, #22c55e); + outline: 2px solid hsl(var(--color-success)); } .file-item.error { - outline: 2px solid var(--color-destructive); + outline: 2px solid hsl(var(--color-error)); } .file-preview { @@ -236,7 +236,7 @@ padding: 0.5rem; border-radius: 50%; background: rgba(255, 255, 255, 0.9); - color: var(--color-foreground); + color: hsl(var(--color-foreground)); border: none; cursor: pointer; } @@ -271,11 +271,11 @@ } .status-icon.success { - background: var(--color-success, #22c55e); + background: hsl(var(--color-success)); } .status-icon.error { - background: var(--color-destructive); + background: hsl(var(--color-error)); } .file-name {