mirror of
https://github.com/Memo-2023/mana-monorepo.git
synced 2026-05-15 01:21:09 +02:00
style(mana/web): migrate (app) page-level routes to theme tokens (P5)
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
parent
4423c03573
commit
0987b08185
5 changed files with 83 additions and 77 deletions
|
|
@ -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;
|
||||
|
|
|
|||
|
|
@ -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;
|
||||
|
|
|
|||
|
|
@ -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;
|
||||
}
|
||||
|
|
|
|||
|
|
@ -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 {
|
||||
|
|
|
|||
|
|
@ -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;
|
||||
|
|
|
|||
Loading…
Add table
Add a link
Reference in a new issue