till/managarten
1
0
Fork 0
mirror of https://github.com/Memo-2023/mana-monorepo.git synced 2026-05-25 22:54:38 +02:00
Code Issues Projects Releases Packages Wiki Activity Actions 5

style(mana/web): migrate (app) page-level routes to theme tokens (P5)

Browse source 
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) <noreply@anthropic.com>
This commit is contained in:
Till JS 2026-04-09 12:43:24 +02:00
parent 4423c03573
commit 0987b08185
5 changed files with 83 additions and 77 deletions
Download patch file Download diff file Expand all files Collapse all files

15
apps/mana/apps/web/src/routes/(app)/calendar/+page.svelte
View file

@ -310,10 +310,11 @@
z-index: 50; z-index: 50;
} }
/* Modal backdrop overlay is intentionally near-black regardless of theme */
.modal-backdrop-inner { .modal-backdrop-inner {
position: absolute; position: absolute;
inset: 0; inset: 0;
background: rgba(0, 0, 0, 0.5); background: hsl(0 0% 0% / 0.5);
display: flex; display: flex;
align-items: center; align-items: center;
justify-content: center; justify-content: center;
@ -324,8 +325,8 @@
.modal-container { .modal-container {
background: hsl(var(--color-card)); background: hsl(var(--color-card));
border: 1px solid hsl(var(--color-border)); border: 1px solid hsl(var(--color-border));
border-radius: var(--radius-lg, 12px); border-radius: 0.75rem;
box-shadow: 0 25px 50px -12px rgba(0, 0, 0, 0.5); box-shadow: 0 25px 50px -12px hsl(0 0% 0% / 0.5);
width: 100%; width: 100%;
max-width: 500px; max-width: 500px;
max-height: 90vh; max-height: 90vh;
@ -363,10 +364,10 @@
/* DnD styles */ /* DnD styles */
:global(.mana-drop-target-hover) { :global(.mana-drop-target-hover) {
outline: 2px solid var(--color-primary, #6366f1); outline: 2px solid hsl(var(--color-primary));
outline-offset: -2px; outline-offset: -2px;
border-radius: 0.5rem; 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) { :global(.mana-drop-target-success) {
@ -375,8 +376,8 @@
@keyframes drop-success { @keyframes drop-success {
0% { 0% {
outline-color: #10b981; outline-color: hsl(var(--color-success));
background: rgba(16, 185, 129, 0.1); background: hsl(var(--color-success) / 0.1);
} }
100% { 100% {
outline-color: transparent; outline-color: transparent;

18
apps/mana/apps/web/src/routes/(app)/contacts/+page.svelte
View file

@ -411,13 +411,13 @@
.contacts-title { .contacts-title {
font-size: 1.5rem; font-size: 1.5rem;
font-weight: 700; font-weight: 700;
color: var(--color-foreground); color: hsl(var(--color-foreground));
} }
.contacts-stats { .contacts-stats {
margin-top: 0.25rem; margin-top: 0.25rem;
font-size: 0.875rem; font-size: 0.875rem;
color: var(--color-muted-foreground); color: hsl(var(--color-muted-foreground));
} }
.header-actions { .header-actions {
@ -434,7 +434,7 @@
:global(.search-icon) { :global(.search-icon) {
position: absolute; position: absolute;
left: 0.625rem; left: 0.625rem;
color: var(--color-muted-foreground); color: hsl(var(--color-muted-foreground));
pointer-events: none; pointer-events: none;
} }
.search-input { .search-input {
@ -462,12 +462,12 @@
padding: 0.125rem; padding: 0.125rem;
border: none; border: none;
background: none; background: none;
color: var(--color-muted-foreground); color: hsl(var(--color-muted-foreground));
cursor: pointer; cursor: pointer;
border-radius: 0.25rem; border-radius: 0.25rem;
} }
.search-clear:hover { .search-clear:hover {
color: var(--color-foreground); color: hsl(var(--color-foreground));
} }
.new-btn { .new-btn {
@ -533,10 +533,10 @@
} }
:global(.mana-drop-target-hover) { :global(.mana-drop-target-hover) {
outline: 2px solid var(--color-primary, #6366f1); outline: 2px solid hsl(var(--color-primary));
outline-offset: -2px; outline-offset: -2px;
border-radius: 0.5rem; 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) { :global(.mana-drop-target-success) {
@ -545,8 +545,8 @@
@keyframes drop-success { @keyframes drop-success {
0% { 0% {
outline-color: #10b981; outline-color: hsl(var(--color-success));
background: rgba(16, 185, 129, 0.1); background: hsl(var(--color-success) / 0.1);
} }
100% { 100% {
outline-color: transparent; outline-color: transparent;

94
apps/mana/apps/web/src/routes/(app)/finance/+page.svelte
View file

@ -250,7 +250,7 @@
.page-title { .page-title {
font-size: 1.5rem; font-size: 1.5rem;
font-weight: 700; font-weight: 700;
color: var(--color-foreground); color: hsl(var(--color-foreground));
} }
.month-nav { .month-nav {
@ -264,8 +264,8 @@
height: 2rem; height: 2rem;
border-radius: 0.5rem; border-radius: 0.5rem;
background: transparent; background: transparent;
color: var(--color-muted-foreground); color: hsl(var(--color-muted-foreground));
border: 1px solid var(--color-border, rgba(255, 255, 255, 0.1)); border: 1px solid hsl(var(--color-border));
cursor: pointer; cursor: pointer;
font-size: 0.875rem; font-size: 0.875rem;
display: flex; display: flex;
@ -273,12 +273,12 @@
justify-content: center; justify-content: center;
} }
.nav-btn:hover { .nav-btn:hover {
background: var(--color-muted, rgba(255, 255, 255, 0.08)); background: hsl(var(--color-muted));
} }
.month-label { .month-label {
font-size: 1rem; font-size: 1rem;
font-weight: 600; font-weight: 600;
color: var(--color-foreground); color: hsl(var(--color-foreground));
} }
.summary-cards { .summary-cards {
@ -292,15 +292,15 @@
align-items: center; align-items: center;
padding: 0.75rem 0.5rem; padding: 0.75rem 0.5rem;
border-radius: 0.75rem; border-radius: 0.75rem;
background: var(--color-surface, rgba(255, 255, 255, 0.04)); background: hsl(var(--color-card));
border: 1px solid var(--color-border, rgba(255, 255, 255, 0.08)); border: 1px solid hsl(var(--color-border));
} }
.summary-card.highlight { .summary-card.highlight {
background: rgba(99, 102, 241, 0.06); background: hsl(var(--color-primary) / 0.06);
} }
.card-label { .card-label {
font-size: 0.75rem; font-size: 0.75rem;
color: var(--color-muted-foreground); color: hsl(var(--color-muted-foreground));
} }
.card-value { .card-value {
font-size: 1rem; font-size: 1rem;
@ -309,10 +309,10 @@
margin-top: 0.25rem; margin-top: 0.25rem;
} }
.card-value.income { .card-value.income {
color: #22c55e; color: hsl(var(--color-success));
} }
.card-value.expense { .card-value.expense {
color: #ef4444; color: hsl(var(--color-error));
} }
.section { .section {
@ -323,7 +323,7 @@
.section-title { .section-title {
font-size: 0.875rem; font-size: 0.875rem;
font-weight: 600; font-weight: 600;
color: var(--color-foreground); color: hsl(var(--color-foreground));
} }
.cat-breakdown { .cat-breakdown {
@ -342,7 +342,7 @@
} }
.cat-name { .cat-name {
width: 5rem; width: 5rem;
color: var(--color-foreground); color: hsl(var(--color-foreground));
overflow: hidden; overflow: hidden;
text-overflow: ellipsis; text-overflow: ellipsis;
white-space: nowrap; white-space: nowrap;
@ -351,7 +351,7 @@
flex: 1; flex: 1;
height: 0.5rem; height: 0.5rem;
border-radius: 0.25rem; border-radius: 0.25rem;
background: var(--color-surface, rgba(255, 255, 255, 0.06)); background: hsl(var(--color-muted));
overflow: hidden; overflow: hidden;
} }
.cat-bar-fill { .cat-bar-fill {
@ -362,7 +362,7 @@
.cat-amount { .cat-amount {
font-weight: 600; font-weight: 600;
font-variant-numeric: tabular-nums; font-variant-numeric: tabular-nums;
color: var(--color-foreground); color: hsl(var(--color-foreground));
flex-shrink: 0; flex-shrink: 0;
} }
@ -370,7 +370,7 @@
width: 100%; width: 100%;
padding: 0.625rem; padding: 0.625rem;
border-radius: 0.5rem; border-radius: 0.5rem;
background: var(--color-primary, #6366f1); background: hsl(var(--color-primary));
color: white; color: white;
border: none; border: none;
font-size: 0.875rem; font-size: 0.875rem;
@ -388,8 +388,8 @@
gap: 0.75rem; gap: 0.75rem;
padding: 1rem; padding: 1rem;
border-radius: 0.75rem; border-radius: 0.75rem;
background: var(--color-surface, rgba(255, 255, 255, 0.06)); background: hsl(var(--color-muted));
border: 1px solid var(--color-border, rgba(255, 255, 255, 0.1)); border: 1px solid hsl(var(--color-border));
} }
.type-toggle { .type-toggle {
@ -403,19 +403,19 @@
font-size: 0.875rem; font-size: 0.875rem;
font-weight: 500; font-weight: 500;
background: transparent; background: transparent;
color: var(--color-muted-foreground); color: hsl(var(--color-muted-foreground));
border: 1px solid var(--color-border, rgba(255, 255, 255, 0.1)); border: 1px solid hsl(var(--color-border));
cursor: pointer; cursor: pointer;
} }
.type-btn.active { .type-btn.active {
background: rgba(239, 68, 68, 0.15); background: hsl(var(--color-error) / 0.15);
color: #ef4444; color: hsl(var(--color-error));
border-color: rgba(239, 68, 68, 0.3); border-color: hsl(var(--color-error) / 0.3);
} }
.type-btn.inc.active { .type-btn.inc.active {
background: rgba(34, 197, 94, 0.15); background: hsl(var(--color-success) / 0.15);
color: #22c55e; color: hsl(var(--color-success));
border-color: rgba(34, 197, 94, 0.3); border-color: hsl(var(--color-success) / 0.3);
} }
.amount-row { .amount-row {
@ -427,8 +427,8 @@
flex: 1; flex: 1;
background: transparent; background: transparent;
border: none; border: none;
border-bottom: 2px solid var(--color-border, rgba(255, 255, 255, 0.15)); border-bottom: 2px solid hsl(var(--color-border));
color: var(--color-foreground); color: hsl(var(--color-foreground));
font-size: 1.75rem; font-size: 1.75rem;
font-weight: 700; font-weight: 700;
padding: 0.25rem 0; padding: 0.25rem 0;
@ -437,28 +437,28 @@
font-variant-numeric: tabular-nums; font-variant-numeric: tabular-nums;
} }
.amount-input:focus { .amount-input:focus {
border-color: var(--color-primary, #6366f1); border-color: hsl(var(--color-primary));
} }
.amount-input::placeholder { .amount-input::placeholder {
color: var(--color-muted-foreground); color: hsl(var(--color-muted-foreground));
font-weight: 400; font-weight: 400;
} }
.currency { .currency {
color: var(--color-muted-foreground); color: hsl(var(--color-muted-foreground));
font-size: 1.25rem; font-size: 1.25rem;
} }
.desc-input { .desc-input {
background: transparent; background: transparent;
border: none; border: none;
border-bottom: 1px solid var(--color-border, rgba(255, 255, 255, 0.1)); border-bottom: 1px solid hsl(var(--color-border));
color: var(--color-foreground); color: hsl(var(--color-foreground));
font-size: 0.875rem; font-size: 0.875rem;
padding: 0.5rem 0; padding: 0.5rem 0;
outline: none; outline: none;
} }
.desc-input::placeholder { .desc-input::placeholder {
color: var(--color-muted-foreground); color: hsl(var(--color-muted-foreground));
} }
.cat-chips { .cat-chips {
@ -470,25 +470,25 @@
padding: 0.375rem 0.75rem; padding: 0.375rem 0.75rem;
border-radius: 9999px; border-radius: 9999px;
font-size: 0.8125rem; font-size: 0.8125rem;
background: rgba(255, 255, 255, 0.06); background: hsl(var(--color-muted));
border: 1px solid var(--color-border, rgba(255, 255, 255, 0.1)); border: 1px solid hsl(var(--color-border));
color: var(--color-foreground); color: hsl(var(--color-foreground));
cursor: pointer; cursor: pointer;
transition: all 0.15s; transition: all 0.15s;
} }
.cat-chip:hover { .cat-chip:hover {
background: rgba(255, 255, 255, 0.1); background: hsl(var(--color-surface-hover));
} }
.cat-chip.selected { .cat-chip.selected {
border-color: var(--color-primary, #6366f1); border-color: hsl(var(--color-primary));
background: rgba(99, 102, 241, 0.15); background: hsl(var(--color-primary) / 0.15);
} }
.submit-btn { .submit-btn {
width: 100%; width: 100%;
padding: 0.625rem; padding: 0.625rem;
border-radius: 0.5rem; border-radius: 0.5rem;
background: var(--color-primary, #6366f1); background: hsl(var(--color-primary));
color: white; color: white;
border: none; border: none;
font-size: 0.875rem; font-size: 0.875rem;
@ -513,7 +513,7 @@
font-weight: 600; font-weight: 600;
text-transform: uppercase; text-transform: uppercase;
letter-spacing: 0.05em; letter-spacing: 0.05em;
color: var(--color-muted-foreground); color: hsl(var(--color-muted-foreground));
padding: 0.5rem 0 0.25rem; padding: 0.5rem 0 0.25rem;
} }
.tx-row { .tx-row {
@ -534,14 +534,14 @@
} }
.tx-desc { .tx-desc {
font-size: 0.875rem; font-size: 0.875rem;
color: var(--color-foreground); color: hsl(var(--color-foreground));
overflow: hidden; overflow: hidden;
text-overflow: ellipsis; text-overflow: ellipsis;
white-space: nowrap; white-space: nowrap;
} }
.tx-cat { .tx-cat {
font-size: 0.75rem; font-size: 0.75rem;
color: var(--color-muted-foreground); color: hsl(var(--color-muted-foreground));
} }
.tx-amount { .tx-amount {
font-size: 0.875rem; font-size: 0.875rem;
@ -550,14 +550,14 @@
flex-shrink: 0; flex-shrink: 0;
} }
.tx-amount.income { .tx-amount.income {
color: #22c55e; color: hsl(var(--color-success));
} }
.tx-amount.expense { .tx-amount.expense {
color: #ef4444; color: hsl(var(--color-error));
} }
.loading { .loading {
color: var(--color-muted-foreground); color: hsl(var(--color-muted-foreground));
text-align: center; text-align: center;
padding: 3rem 0; padding: 3rem 0;
} }

17
apps/mana/apps/web/src/routes/(app)/spiral/+page.svelte
View file

@ -380,7 +380,11 @@
display: flex; display: flex;
justify-content: center; justify-content: center;
padding: 2rem; 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; border-radius: 8px;
overflow: auto; overflow: auto;
} }
@ -446,8 +450,9 @@
margin-top: 0.25rem; margin-top: 0.25rem;
} }
/* Indigo→violet gradient is the spiral module's literal brand mark */
.stat.highlight { .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 { .collected-at {
@ -548,7 +553,7 @@
width: 14px; width: 14px;
height: 14px; height: 14px;
border-radius: 3px; border-radius: 3px;
border: 1px solid rgba(255, 255, 255, 0.2); border: 1px solid hsl(var(--color-border));
flex-shrink: 0; flex-shrink: 0;
} }
@ -596,12 +601,12 @@
} }
.btn-danger { .btn-danger {
color: #ef4444; color: hsl(var(--color-error));
border-color: rgba(239, 68, 68, 0.3); border-color: hsl(var(--color-error) / 0.3);
} }
.btn-danger:hover:not(:disabled) { .btn-danger:hover:not(:disabled) {
background: rgba(239, 68, 68, 0.1); background: hsl(var(--color-error) / 0.1);
} }
.info-box { .info-box {

16
apps/mana/apps/web/src/routes/(app)/todo/+page.svelte
View file

@ -337,7 +337,7 @@
.todo-title { .todo-title {
font-size: 1.5rem; font-size: 1.5rem;
font-weight: 700; font-weight: 700;
color: var(--color-foreground); color: hsl(var(--color-foreground));
} }
.todo-stats { .todo-stats {
@ -345,7 +345,7 @@
gap: 1rem; gap: 1rem;
margin-top: 0.25rem; margin-top: 0.25rem;
font-size: 0.875rem; font-size: 0.875rem;
color: var(--color-muted-foreground); color: hsl(var(--color-muted-foreground));
} }
.todo-header-actions { .todo-header-actions {
@ -361,11 +361,11 @@
width: 2rem; width: 2rem;
height: 2rem; height: 2rem;
border-radius: 0.5rem; border-radius: 0.5rem;
color: var(--color-muted-foreground); color: hsl(var(--color-muted-foreground));
transition: background 0.15s; transition: background 0.15s;
} }
.settings-btn:hover { .settings-btn:hover {
background: var(--color-muted); background: hsl(var(--color-muted));
} }
.quick-add-wrapper { .quick-add-wrapper {
@ -374,18 +374,18 @@
} }
:global(.mana-drop-target-hover) { :global(.mana-drop-target-hover) {
outline: 2px solid var(--color-primary, #6366f1); outline: 2px solid hsl(var(--color-primary));
outline-offset: -2px; outline-offset: -2px;
border-radius: 0.5rem; 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) { :global(.mana-drop-target-success) {
animation: drop-success 400ms ease-out; animation: drop-success 400ms ease-out;
} }
@keyframes drop-success { @keyframes drop-success {
0% { 0% {
outline-color: #10b981; outline-color: hsl(var(--color-success));
background: rgba(16, 185, 129, 0.1); background: hsl(var(--color-success) / 0.1);
} }
100% { 100% {
outline-color: transparent; outline-color: transparent;