V3: 3 Farbschemata, Grundprofil auf Plan-Ebene, Erstellungs-Popups, integer-Zahlenfelder mit Beschleunigungs-Spinner, Carry-Forward des Zielwerts, gefuehrter Uebergang
Deploy App / deploy (push) Successful in 1m51s
Deploy App / deploy (push) Successful in 1m51s
- Theming: semantische CSS-Tokens + 3 waehlbare Schemata (Hell/Dunkel/Warm/Sunset), Umschalter im Profil-Menue, FOUC-frei via Inline-Script, localStorage; Klassen-Sweep aller Komponenten, Recharts aus Tokens - Datenmodell: Household entfaellt; Plan traegt Haushaltsform/Personen/Inflation selbst (Person -> planId, Plan -> userId); destruktive Migration (TRUNCATE); Onboarding/HouseholdSettings entfernt; Plan-Erstellung & -Einstellungen mit Profilfeldern - Popups: Element-Erstellung mit Inline-Feldern (geteilte ElementPhaseFields/ElementTransitionFields), Phase- und Plan-Popups mit Direkteingabe - Zahlenfelder: 1'000er-Runden entfernt (floorToThousand/roundToHundred weg), integer MoneyInput mit beschleunigendem Press-and-Hold-Spinner, 0-Bug-Fix, harte Live-Caps - Quote: Amortisation + Tilgung neu quotenwirksam; Restquote sichtbar (sinkt beim Verteilen); Invest-Deckel = verfuegbares Kapital + fortgeschriebener Zielwert - Carry-Forward: Startwert der Folgephase = Zielwert der Vorphase minus Uebergangs-Bezug (live abgeleitet); optionale Zusatzinvestition aus verfuegbarem Kapital - Matrix: Zelle zeigt Start -> Ziel; Uebergangs-Spaltenkopf mit "n offen"-Badge + gefuehrtem Pruef-Panel Co-Authored-By: Claude Opus 4.8 <noreply@anthropic.com>
This commit is contained in:
+118
-14
@@ -1,26 +1,130 @@
|
||||
@import "tailwindcss";
|
||||
|
||||
:root {
|
||||
--background: #f8fafc;
|
||||
--foreground: #1e293b;
|
||||
/* -------------------------------------------------------------------------
|
||||
Semantische Farb-Tokens. Drei umschaltbare Schemata ueber data-theme am
|
||||
<html>: "light", "dark", "warm". Ohne explizite Wahl folgt das Standard-
|
||||
:root der OS-Einstellung (prefers-color-scheme). Umschaltung: lib/theme.ts.
|
||||
------------------------------------------------------------------------- */
|
||||
|
||||
:root,
|
||||
:root[data-theme="light"] {
|
||||
--bg: #f8fafc;
|
||||
--surface: #ffffff;
|
||||
--surface-2: #f4f4f5;
|
||||
--input: #ffffff;
|
||||
--border: #e4e4e7;
|
||||
--border-strong: #d4d4d8;
|
||||
--fg: #18181b;
|
||||
--muted: #52525b;
|
||||
--faint: #a1a1aa;
|
||||
--accent: #4f46e5;
|
||||
--accent-hover: #4338ca;
|
||||
--accent-fg: #ffffff;
|
||||
--accent-soft: #eef2ff;
|
||||
--accent-soft-fg: #4338ca;
|
||||
--danger: #dc2626;
|
||||
--danger-soft: #fef2f2;
|
||||
--success: #059669;
|
||||
--person-a: #4f46e5;
|
||||
--person-b: #0ea5e9;
|
||||
}
|
||||
|
||||
:root[data-theme="dark"] {
|
||||
--bg: #10131c;
|
||||
--surface: #18181b;
|
||||
--surface-2: #27272a;
|
||||
--input: #27272a;
|
||||
--border: #27272a;
|
||||
--border-strong: #3f3f46;
|
||||
--fg: #f4f4f5;
|
||||
--muted: #a1a1aa;
|
||||
--faint: #71717a;
|
||||
--accent: #6366f1;
|
||||
--accent-hover: #818cf8;
|
||||
--accent-fg: #ffffff;
|
||||
--accent-soft: rgba(99, 102, 241, 0.16);
|
||||
--accent-soft-fg: #a5b4fc;
|
||||
--danger: #f87171;
|
||||
--danger-soft: rgba(220, 38, 38, 0.16);
|
||||
--success: #34d399;
|
||||
--person-a: #818cf8;
|
||||
--person-b: #38bdf8;
|
||||
}
|
||||
|
||||
/* Warm / Sunset: cremefarbener Grund, Koralle-Akzent, Amber-Sekundaerton. */
|
||||
:root[data-theme="warm"] {
|
||||
--bg: #fbf7f2;
|
||||
--surface: #fffdfa;
|
||||
--surface-2: #f5ede3;
|
||||
--input: #ffffff;
|
||||
--border: #eadfd2;
|
||||
--border-strong: #dac9b6;
|
||||
--fg: #2b2320;
|
||||
--muted: #6b5d53;
|
||||
--faint: #a89a8c;
|
||||
--accent: #e8663c;
|
||||
--accent-hover: #d2542c;
|
||||
--accent-fg: #ffffff;
|
||||
--accent-soft: #fcebe2;
|
||||
--accent-soft-fg: #b24521;
|
||||
--danger: #c0392b;
|
||||
--danger-soft: #fbeae7;
|
||||
--success: #2e9e7b;
|
||||
--person-a: #e8663c;
|
||||
--person-b: #f2a93b;
|
||||
}
|
||||
|
||||
/* Ohne gespeicherte Wahl der Dunkel-OS-Einstellung folgen. */
|
||||
@media (prefers-color-scheme: dark) {
|
||||
:root:not([data-theme]) {
|
||||
--bg: #10131c;
|
||||
--surface: #18181b;
|
||||
--surface-2: #27272a;
|
||||
--input: #27272a;
|
||||
--border: #27272a;
|
||||
--border-strong: #3f3f46;
|
||||
--fg: #f4f4f5;
|
||||
--muted: #a1a1aa;
|
||||
--faint: #71717a;
|
||||
--accent: #6366f1;
|
||||
--accent-hover: #818cf8;
|
||||
--accent-fg: #ffffff;
|
||||
--accent-soft: rgba(99, 102, 241, 0.16);
|
||||
--accent-soft-fg: #a5b4fc;
|
||||
--danger: #f87171;
|
||||
--danger-soft: rgba(220, 38, 38, 0.16);
|
||||
--success: #34d399;
|
||||
--person-a: #818cf8;
|
||||
--person-b: #38bdf8;
|
||||
}
|
||||
}
|
||||
|
||||
@theme inline {
|
||||
--color-background: var(--background);
|
||||
--color-foreground: var(--foreground);
|
||||
--color-bg: var(--bg);
|
||||
--color-surface: var(--surface);
|
||||
--color-surface-2: var(--surface-2);
|
||||
--color-input: var(--input);
|
||||
--color-border: var(--border);
|
||||
--color-border-strong: var(--border-strong);
|
||||
--color-fg: var(--fg);
|
||||
--color-muted: var(--muted);
|
||||
--color-faint: var(--faint);
|
||||
--color-accent: var(--accent);
|
||||
--color-accent-hover: var(--accent-hover);
|
||||
--color-accent-fg: var(--accent-fg);
|
||||
--color-accent-soft: var(--accent-soft);
|
||||
--color-accent-soft-fg: var(--accent-soft-fg);
|
||||
--color-danger: var(--danger);
|
||||
--color-danger-soft: var(--danger-soft);
|
||||
--color-success: var(--success);
|
||||
--color-person-a: var(--person-a);
|
||||
--color-person-b: var(--person-b);
|
||||
--font-sans: var(--font-geist-sans);
|
||||
--font-mono: var(--font-geist-mono);
|
||||
}
|
||||
|
||||
@media (prefers-color-scheme: dark) {
|
||||
:root {
|
||||
--background: #10131c;
|
||||
--foreground: #e2e8f0;
|
||||
}
|
||||
}
|
||||
|
||||
body {
|
||||
background: var(--background);
|
||||
color: var(--foreground);
|
||||
background: var(--bg);
|
||||
color: var(--fg);
|
||||
font-family: Arial, Helvetica, sans-serif;
|
||||
}
|
||||
|
||||
Reference in New Issue
Block a user