From 0987b08185dea8d89c19b9498495ee3eda406888 Mon Sep 17 00:00:00 2001 From: Till JS Date: Thu, 9 Apr 2026 12:43:24 +0200 Subject: [PATCH] style(mana/web): migrate (app) page-level routes to theme tokens (P5) MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit calendar, contacts, finance, spiral, todo route shells: bare var() references → wrapped hsl(), broken rgba/hex fallback chains dropped. DnD overlay (`.mana-drop-target-hover` / `-success`) is duplicated inline in calendar/contacts/todo since it's a `:global()` rule each route declares for itself; all three now read --color-primary + --color-success for the drop animation instead of literal indigo/green. finance: income=success, expense=error, type-toggle uses --color-error/--color-success with /0.15 + /0.3 alpha modifiers. spiral: indigo→violet stat highlight + app-bar gradient stay literal (spiral's brand mark is the indigo→violet ramp, not the app theme primary). Danger button now uses --color-error. Skipped: rsvp/[token] (public landing, deliberate rose palette outside the auth-gated chrome) and observatory (cosmic-scenes brand palette, already established as brand-legitimate). Co-Authored-By: Claude Opus 4.6 (1M context) --- .../src/routes/(app)/calendar/+page.svelte | 15 +-- .../src/routes/(app)/contacts/+page.svelte | 18 ++-- .../web/src/routes/(app)/finance/+page.svelte | 94 +++++++++---------- .../web/src/routes/(app)/spiral/+page.svelte | 17 ++-- .../web/src/routes/(app)/todo/+page.svelte | 16 ++-- 5 files changed, 83 insertions(+), 77 deletions(-) diff --git a/apps/mana/apps/web/src/routes/(app)/calendar/+page.svelte b/apps/mana/apps/web/src/routes/(app)/calendar/+page.svelte index 718da4b39..a0e71240b 100644 --- a/apps/mana/apps/web/src/routes/(app)/calendar/+page.svelte +++ b/apps/mana/apps/web/src/routes/(app)/calendar/+page.svelte @@ -310,10 +310,11 @@ z-index: 50; } + /* Modal backdrop overlay is intentionally near-black regardless of theme */ .modal-backdrop-inner { position: absolute; inset: 0; - background: rgba(0, 0, 0, 0.5); + background: hsl(0 0% 0% / 0.5); display: flex; align-items: center; justify-content: center; @@ -324,8 +325,8 @@ .modal-container { background: hsl(var(--color-card)); border: 1px solid hsl(var(--color-border)); - border-radius: var(--radius-lg, 12px); - box-shadow: 0 25px 50px -12px rgba(0, 0, 0, 0.5); + border-radius: 0.75rem; + box-shadow: 0 25px 50px -12px hsl(0 0% 0% / 0.5); width: 100%; max-width: 500px; max-height: 90vh; @@ -363,10 +364,10 @@ /* DnD styles */ :global(.mana-drop-target-hover) { - outline: 2px solid var(--color-primary, #6366f1); + outline: 2px solid hsl(var(--color-primary)); outline-offset: -2px; border-radius: 0.5rem; - background: rgba(99, 102, 241, 0.06) !important; + background: hsl(var(--color-primary) / 0.06) !important; } :global(.mana-drop-target-success) { @@ -375,8 +376,8 @@ @keyframes drop-success { 0% { - outline-color: #10b981; - background: rgba(16, 185, 129, 0.1); + outline-color: hsl(var(--color-success)); + background: hsl(var(--color-success) / 0.1); } 100% { outline-color: transparent; diff --git a/apps/mana/apps/web/src/routes/(app)/contacts/+page.svelte b/apps/mana/apps/web/src/routes/(app)/contacts/+page.svelte index 8e7d41640..4e589ee6f 100644 --- a/apps/mana/apps/web/src/routes/(app)/contacts/+page.svelte +++ b/apps/mana/apps/web/src/routes/(app)/contacts/+page.svelte @@ -411,13 +411,13 @@ .contacts-title { font-size: 1.5rem; font-weight: 700; - color: var(--color-foreground); + color: hsl(var(--color-foreground)); } .contacts-stats { margin-top: 0.25rem; font-size: 0.875rem; - color: var(--color-muted-foreground); + color: hsl(var(--color-muted-foreground)); } .header-actions { @@ -434,7 +434,7 @@ :global(.search-icon) { position: absolute; left: 0.625rem; - color: var(--color-muted-foreground); + color: hsl(var(--color-muted-foreground)); pointer-events: none; } .search-input { @@ -462,12 +462,12 @@ padding: 0.125rem; border: none; background: none; - color: var(--color-muted-foreground); + color: hsl(var(--color-muted-foreground)); cursor: pointer; border-radius: 0.25rem; } .search-clear:hover { - color: var(--color-foreground); + color: hsl(var(--color-foreground)); } .new-btn { @@ -533,10 +533,10 @@ } :global(.mana-drop-target-hover) { - outline: 2px solid var(--color-primary, #6366f1); + outline: 2px solid hsl(var(--color-primary)); outline-offset: -2px; border-radius: 0.5rem; - background: rgba(99, 102, 241, 0.06) !important; + background: hsl(var(--color-primary) / 0.06) !important; } :global(.mana-drop-target-success) { @@ -545,8 +545,8 @@ @keyframes drop-success { 0% { - outline-color: #10b981; - background: rgba(16, 185, 129, 0.1); + outline-color: hsl(var(--color-success)); + background: hsl(var(--color-success) / 0.1); } 100% { outline-color: transparent; diff --git a/apps/mana/apps/web/src/routes/(app)/finance/+page.svelte b/apps/mana/apps/web/src/routes/(app)/finance/+page.svelte index 21967eb89..dd75e9eaa 100644 --- a/apps/mana/apps/web/src/routes/(app)/finance/+page.svelte +++ b/apps/mana/apps/web/src/routes/(app)/finance/+page.svelte @@ -250,7 +250,7 @@ .page-title { font-size: 1.5rem; font-weight: 700; - color: var(--color-foreground); + color: hsl(var(--color-foreground)); } .month-nav { @@ -264,8 +264,8 @@ height: 2rem; border-radius: 0.5rem; background: transparent; - color: var(--color-muted-foreground); - border: 1px solid var(--color-border, rgba(255, 255, 255, 0.1)); + color: hsl(var(--color-muted-foreground)); + border: 1px solid hsl(var(--color-border)); cursor: pointer; font-size: 0.875rem; display: flex; @@ -273,12 +273,12 @@ justify-content: center; } .nav-btn:hover { - background: var(--color-muted, rgba(255, 255, 255, 0.08)); + background: hsl(var(--color-muted)); } .month-label { font-size: 1rem; font-weight: 600; - color: var(--color-foreground); + color: hsl(var(--color-foreground)); } .summary-cards { @@ -292,15 +292,15 @@ align-items: center; padding: 0.75rem 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-card)); + border: 1px solid hsl(var(--color-border)); } .summary-card.highlight { - background: rgba(99, 102, 241, 0.06); + background: hsl(var(--color-primary) / 0.06); } .card-label { font-size: 0.75rem; - color: var(--color-muted-foreground); + color: hsl(var(--color-muted-foreground)); } .card-value { font-size: 1rem; @@ -309,10 +309,10 @@ margin-top: 0.25rem; } .card-value.income { - color: #22c55e; + color: hsl(var(--color-success)); } .card-value.expense { - color: #ef4444; + color: hsl(var(--color-error)); } .section { @@ -323,7 +323,7 @@ .section-title { font-size: 0.875rem; font-weight: 600; - color: var(--color-foreground); + color: hsl(var(--color-foreground)); } .cat-breakdown { @@ -342,7 +342,7 @@ } .cat-name { width: 5rem; - color: var(--color-foreground); + color: hsl(var(--color-foreground)); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; @@ -351,7 +351,7 @@ flex: 1; height: 0.5rem; border-radius: 0.25rem; - background: var(--color-surface, rgba(255, 255, 255, 0.06)); + background: hsl(var(--color-muted)); overflow: hidden; } .cat-bar-fill { @@ -362,7 +362,7 @@ .cat-amount { font-weight: 600; font-variant-numeric: tabular-nums; - color: var(--color-foreground); + color: hsl(var(--color-foreground)); flex-shrink: 0; } @@ -370,7 +370,7 @@ width: 100%; padding: 0.625rem; border-radius: 0.5rem; - background: var(--color-primary, #6366f1); + background: hsl(var(--color-primary)); color: white; border: none; font-size: 0.875rem; @@ -388,8 +388,8 @@ gap: 0.75rem; 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)); } .type-toggle { @@ -403,19 +403,19 @@ font-size: 0.875rem; font-weight: 500; background: transparent; - color: var(--color-muted-foreground); - border: 1px solid var(--color-border, rgba(255, 255, 255, 0.1)); + color: hsl(var(--color-muted-foreground)); + border: 1px solid hsl(var(--color-border)); cursor: pointer; } .type-btn.active { - background: rgba(239, 68, 68, 0.15); - color: #ef4444; - border-color: rgba(239, 68, 68, 0.3); + background: hsl(var(--color-error) / 0.15); + color: hsl(var(--color-error)); + border-color: hsl(var(--color-error) / 0.3); } .type-btn.inc.active { - background: rgba(34, 197, 94, 0.15); - color: #22c55e; - border-color: rgba(34, 197, 94, 0.3); + background: hsl(var(--color-success) / 0.15); + color: hsl(var(--color-success)); + border-color: hsl(var(--color-success) / 0.3); } .amount-row { @@ -427,8 +427,8 @@ 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: 1.75rem; font-weight: 700; padding: 0.25rem 0; @@ -437,28 +437,28 @@ font-variant-numeric: tabular-nums; } .amount-input:focus { - border-color: var(--color-primary, #6366f1); + border-color: hsl(var(--color-primary)); } .amount-input::placeholder { - color: var(--color-muted-foreground); + color: hsl(var(--color-muted-foreground)); font-weight: 400; } .currency { - color: var(--color-muted-foreground); + color: hsl(var(--color-muted-foreground)); font-size: 1.25rem; } .desc-input { background: transparent; border: none; - border-bottom: 1px solid var(--color-border, rgba(255, 255, 255, 0.1)); - color: var(--color-foreground); + border-bottom: 1px solid hsl(var(--color-border)); + color: hsl(var(--color-foreground)); font-size: 0.875rem; padding: 0.5rem 0; outline: none; } .desc-input::placeholder { - color: var(--color-muted-foreground); + color: hsl(var(--color-muted-foreground)); } .cat-chips { @@ -470,25 +470,25 @@ padding: 0.375rem 0.75rem; border-radius: 9999px; font-size: 0.8125rem; - background: rgba(255, 255, 255, 0.06); - border: 1px solid var(--color-border, rgba(255, 255, 255, 0.1)); - color: var(--color-foreground); + background: hsl(var(--color-muted)); + border: 1px solid hsl(var(--color-border)); + color: hsl(var(--color-foreground)); cursor: pointer; transition: all 0.15s; } .cat-chip:hover { - background: rgba(255, 255, 255, 0.1); + background: hsl(var(--color-surface-hover)); } .cat-chip.selected { - border-color: var(--color-primary, #6366f1); - background: rgba(99, 102, 241, 0.15); + border-color: hsl(var(--color-primary)); + background: hsl(var(--color-primary) / 0.15); } .submit-btn { width: 100%; padding: 0.625rem; border-radius: 0.5rem; - background: var(--color-primary, #6366f1); + background: hsl(var(--color-primary)); color: white; border: none; font-size: 0.875rem; @@ -513,7 +513,7 @@ font-weight: 600; text-transform: uppercase; letter-spacing: 0.05em; - color: var(--color-muted-foreground); + color: hsl(var(--color-muted-foreground)); padding: 0.5rem 0 0.25rem; } .tx-row { @@ -534,14 +534,14 @@ } .tx-desc { font-size: 0.875rem; - color: var(--color-foreground); + color: hsl(var(--color-foreground)); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .tx-cat { font-size: 0.75rem; - color: var(--color-muted-foreground); + color: hsl(var(--color-muted-foreground)); } .tx-amount { font-size: 0.875rem; @@ -550,14 +550,14 @@ flex-shrink: 0; } .tx-amount.income { - color: #22c55e; + color: hsl(var(--color-success)); } .tx-amount.expense { - color: #ef4444; + color: hsl(var(--color-error)); } .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)/spiral/+page.svelte b/apps/mana/apps/web/src/routes/(app)/spiral/+page.svelte index 2196ce923..e42befbbf 100644 --- a/apps/mana/apps/web/src/routes/(app)/spiral/+page.svelte +++ b/apps/mana/apps/web/src/routes/(app)/spiral/+page.svelte @@ -380,7 +380,11 @@ display: flex; justify-content: center; padding: 2rem; - background: radial-gradient(ellipse at center, rgba(99, 102, 241, 0.05) 0%, transparent 70%); + background: radial-gradient( + ellipse at center, + hsl(var(--color-primary) / 0.05) 0%, + transparent 70% + ); border-radius: 8px; overflow: auto; } @@ -446,8 +450,9 @@ margin-top: 0.25rem; } + /* Indigo→violet gradient is the spiral module's literal brand mark */ .stat.highlight { - background: linear-gradient(135deg, rgba(99, 102, 241, 0.2), rgba(139, 92, 246, 0.2)); + background: linear-gradient(135deg, rgb(99 102 241 / 0.2), rgb(139 92 246 / 0.2)); } .collected-at { @@ -548,7 +553,7 @@ width: 14px; height: 14px; border-radius: 3px; - border: 1px solid rgba(255, 255, 255, 0.2); + border: 1px solid hsl(var(--color-border)); flex-shrink: 0; } @@ -596,12 +601,12 @@ } .btn-danger { - color: #ef4444; - border-color: rgba(239, 68, 68, 0.3); + color: hsl(var(--color-error)); + border-color: hsl(var(--color-error) / 0.3); } .btn-danger:hover:not(:disabled) { - background: rgba(239, 68, 68, 0.1); + background: hsl(var(--color-error) / 0.1); } .info-box { diff --git a/apps/mana/apps/web/src/routes/(app)/todo/+page.svelte b/apps/mana/apps/web/src/routes/(app)/todo/+page.svelte index 4689c1de3..463b390b5 100644 --- a/apps/mana/apps/web/src/routes/(app)/todo/+page.svelte +++ b/apps/mana/apps/web/src/routes/(app)/todo/+page.svelte @@ -337,7 +337,7 @@ .todo-title { font-size: 1.5rem; font-weight: 700; - color: var(--color-foreground); + color: hsl(var(--color-foreground)); } .todo-stats { @@ -345,7 +345,7 @@ gap: 1rem; margin-top: 0.25rem; font-size: 0.875rem; - color: var(--color-muted-foreground); + color: hsl(var(--color-muted-foreground)); } .todo-header-actions { @@ -361,11 +361,11 @@ width: 2rem; height: 2rem; border-radius: 0.5rem; - color: var(--color-muted-foreground); + color: hsl(var(--color-muted-foreground)); transition: background 0.15s; } .settings-btn:hover { - background: var(--color-muted); + background: hsl(var(--color-muted)); } .quick-add-wrapper { @@ -374,18 +374,18 @@ } :global(.mana-drop-target-hover) { - outline: 2px solid var(--color-primary, #6366f1); + outline: 2px solid hsl(var(--color-primary)); outline-offset: -2px; border-radius: 0.5rem; - background: rgba(99, 102, 241, 0.06) !important; + background: hsl(var(--color-primary) / 0.06) !important; } :global(.mana-drop-target-success) { animation: drop-success 400ms ease-out; } @keyframes drop-success { 0% { - outline-color: #10b981; - background: rgba(16, 185, 129, 0.1); + outline-color: hsl(var(--color-success)); + background: hsl(var(--color-success) / 0.1); } 100% { outline-color: transparent;