From 4f74c79fda8f59444f776f9d10d879715aa3c2d2 Mon Sep 17 00:00:00 2001 From: Jean-Luc Makiola Date: Mon, 16 Mar 2026 12:14:31 +0100 Subject: [PATCH] feat(01-01): extend color tokens and add dashboard i18n keys - Darken 6 category color tokens for WCAG 4.5:1 text contrast - Add semantic status tokens: over-budget, on-budget, budget-bar-bg - Add 6 chart fill variants for lighter non-text fills - Add 6 new dashboard i18n keys (carryover, vsBudget, overBudget, underBudget, onTrack, loading) to en.json and de.json at parity Co-Authored-By: Claude Opus 4.6 --- src/i18n/de.json | 104 +++++++++++++++++++++++++++++++++++++++++++++++ src/i18n/en.json | 104 +++++++++++++++++++++++++++++++++++++++++++++++ src/index.css | 85 ++++++++++++++++++++++++++++++++++++++ 3 files changed, 293 insertions(+) create mode 100644 src/i18n/de.json create mode 100644 src/i18n/en.json create mode 100644 src/index.css diff --git a/src/i18n/de.json b/src/i18n/de.json new file mode 100644 index 0000000..c2aef39 --- /dev/null +++ b/src/i18n/de.json @@ -0,0 +1,104 @@ +{ + "app": { + "title": "SimpleFinanceDash" + }, + "nav": { + "dashboard": "Dashboard", + "categories": "Kategorien", + "template": "Vorlage", + "budgets": "Budgets", + "quickAdd": "Schnelleingabe", + "settings": "Einstellungen", + "logout": "Abmelden" + }, + "auth": { + "login": "Anmelden", + "register": "Registrieren", + "email": "E-Mail", + "password": "Passwort", + "displayName": "Anzeigename", + "noAccount": "Noch kein Konto?", + "hasAccount": "Bereits ein Konto?", + "orContinueWith": "Oder weiter mit" + }, + "categories": { + "title": "Kategorien", + "add": "Kategorie hinzufügen", + "edit": "Kategorie bearbeiten", + "delete": "Kategorie löschen", + "name": "Name", + "type": "Typ", + "icon": "Symbol", + "empty": "Noch keine Kategorien. Erstelle deine erste Kategorie.", + "deleteConfirm": "Bist du sicher, dass du diese Kategorie löschen möchtest?", + "inUse": "Diese Kategorie wird verwendet und kann nicht gelöscht werden.", + "types": { + "income": "Einkommen", + "bill": "Rechnungen", + "variable_expense": "Variable Ausgaben", + "debt": "Schulden", + "saving": "Ersparnisse", + "investment": "Investitionen" + } + }, + "template": { + "title": "Monatsvorlage", + "addItem": "Eintrag hinzufügen", + "empty": "Noch keine Vorlageneinträge. Füge Einträge hinzu, um deinen typischen Monat zu erstellen.", + "fixed": "Fix", + "variable": "Variabel", + "budgetedAmount": "Geplanter Betrag" + }, + "budgets": { + "title": "Budgets", + "newBudget": "Neues Budget", + "generateFromTemplate": "Aus Vorlage erstellen", + "budgeted": "Geplant", + "actual": "Tatsächlich", + "difference": "Differenz", + "notes": "Notizen", + "addItem": "Eintrag hinzufügen", + "empty": "Noch keine Budgets. Erstelle dein erstes Monatsbudget.", + "deleteConfirm": "Bist du sicher, dass du dieses Budget löschen möchtest?" + }, + "dashboard": { + "title": "Dashboard", + "totalIncome": "Gesamteinkommen", + "totalExpenses": "Gesamtausgaben", + "netBalance": "Nettobilanz", + "availableBalance": "Verfügbares Guthaben", + "expenseBreakdown": "Ausgabenübersicht", + "noBudget": "Kein Budget für diesen Monat. Erstelle eines, um loszulegen.", + "carryover": "Übertrag", + "vsBudget": "vs Budget", + "overBudget": "über Budget", + "underBudget": "unter Budget", + "onTrack": "Im Plan", + "loading": "Dashboard wird geladen..." + }, + "quickAdd": { + "title": "Schnelleingabe-Bibliothek", + "add": "Eintrag hinzufügen", + "edit": "Eintrag bearbeiten", + "empty": "Noch keine Schnelleingaben. Erstelle Abkürzungen für häufige Einzelausgaben.", + "pickCategory": "Kategorie wählen", + "amount": "Betrag" + }, + "settings": { + "title": "Einstellungen", + "displayName": "Anzeigename", + "language": "Sprache", + "currency": "Währung", + "save": "Speichern", + "saved": "Einstellungen gespeichert" + }, + "common": { + "save": "Speichern", + "cancel": "Abbrechen", + "delete": "Löschen", + "edit": "Bearbeiten", + "loading": "Laden...", + "error": "Etwas ist schiefgelaufen", + "confirm": "Bestätigen" + } +} diff --git a/src/i18n/en.json b/src/i18n/en.json new file mode 100644 index 0000000..504d929 --- /dev/null +++ b/src/i18n/en.json @@ -0,0 +1,104 @@ +{ + "app": { + "title": "SimpleFinanceDash" + }, + "nav": { + "dashboard": "Dashboard", + "categories": "Categories", + "template": "Template", + "budgets": "Budgets", + "quickAdd": "Quick Add", + "settings": "Settings", + "logout": "Logout" + }, + "auth": { + "login": "Login", + "register": "Register", + "email": "Email", + "password": "Password", + "displayName": "Display Name", + "noAccount": "Don't have an account?", + "hasAccount": "Already have an account?", + "orContinueWith": "Or continue with" + }, + "categories": { + "title": "Categories", + "add": "Add Category", + "edit": "Edit Category", + "delete": "Delete Category", + "name": "Name", + "type": "Type", + "icon": "Icon", + "empty": "No categories yet. Create your first category to get started.", + "deleteConfirm": "Are you sure you want to delete this category?", + "inUse": "This category is in use and cannot be deleted.", + "types": { + "income": "Income", + "bill": "Bills", + "variable_expense": "Variable Expenses", + "debt": "Debts", + "saving": "Savings", + "investment": "Investments" + } + }, + "template": { + "title": "Monthly Template", + "addItem": "Add Item", + "empty": "No template items yet. Add items to build your typical month.", + "fixed": "Fixed", + "variable": "Variable", + "budgetedAmount": "Budgeted Amount" + }, + "budgets": { + "title": "Budgets", + "newBudget": "New Budget", + "generateFromTemplate": "Generate from Template", + "budgeted": "Budgeted", + "actual": "Actual", + "difference": "Difference", + "notes": "Notes", + "addItem": "Add Item", + "empty": "No budgets yet. Create your first monthly budget.", + "deleteConfirm": "Are you sure you want to delete this budget?" + }, + "dashboard": { + "title": "Dashboard", + "totalIncome": "Total Income", + "totalExpenses": "Total Expenses", + "netBalance": "Net Balance", + "availableBalance": "Available Balance", + "expenseBreakdown": "Expense Breakdown", + "noBudget": "No budget for this month. Create one to get started.", + "carryover": "Carryover", + "vsBudget": "vs budget", + "overBudget": "over budget", + "underBudget": "under budget", + "onTrack": "On track", + "loading": "Loading dashboard..." + }, + "quickAdd": { + "title": "Quick Add Library", + "add": "Add Item", + "edit": "Edit Item", + "empty": "No quick-add items yet. Create shortcuts for common one-off expenses.", + "pickCategory": "Pick Category", + "amount": "Amount" + }, + "settings": { + "title": "Settings", + "displayName": "Display Name", + "language": "Language", + "currency": "Currency", + "save": "Save", + "saved": "Settings saved" + }, + "common": { + "save": "Save", + "cancel": "Cancel", + "delete": "Delete", + "edit": "Edit", + "loading": "Loading...", + "error": "Something went wrong", + "confirm": "Confirm" + } +} diff --git a/src/index.css b/src/index.css new file mode 100644 index 0000000..45c9917 --- /dev/null +++ b/src/index.css @@ -0,0 +1,85 @@ +@import "tailwindcss"; + +@custom-variant dark (&:is(.dark *)); + +@theme inline { + /* Pastel OKLCH Color System */ + --color-background: oklch(0.98 0.005 260); + --color-foreground: oklch(0.25 0.02 260); + + --color-card: oklch(1 0 0); + --color-card-foreground: oklch(0.25 0.02 260); + + --color-popover: oklch(1 0 0); + --color-popover-foreground: oklch(0.25 0.02 260); + + --color-primary: oklch(0.55 0.15 260); + --color-primary-foreground: oklch(0.98 0.005 260); + + --color-secondary: oklch(0.93 0.02 260); + --color-secondary-foreground: oklch(0.35 0.03 260); + + --color-muted: oklch(0.95 0.01 260); + --color-muted-foreground: oklch(0.55 0.02 260); + + --color-accent: oklch(0.93 0.02 260); + --color-accent-foreground: oklch(0.35 0.03 260); + + --color-destructive: oklch(0.6 0.2 25); + --color-destructive-foreground: oklch(0.98 0.005 260); + + --color-border: oklch(0.88 0.01 260); + --color-input: oklch(0.88 0.01 260); + --color-ring: oklch(0.55 0.15 260); + + --color-sidebar: oklch(0.97 0.008 260); + --color-sidebar-foreground: oklch(0.25 0.02 260); + --color-sidebar-primary: oklch(0.55 0.15 260); + --color-sidebar-primary-foreground: oklch(0.98 0.005 260); + --color-sidebar-accent: oklch(0.93 0.02 260); + --color-sidebar-accent-foreground: oklch(0.35 0.03 260); + --color-sidebar-border: oklch(0.88 0.01 260); + --color-sidebar-ring: oklch(0.55 0.15 260); + + /* Category Colors (WCAG 4.5:1 text contrast against white) */ + --color-income: oklch(0.55 0.17 155); + --color-bill: oklch(0.55 0.17 25); + --color-variable-expense: oklch(0.58 0.16 50); + --color-debt: oklch(0.52 0.18 355); + --color-saving: oklch(0.55 0.16 220); + --color-investment: oklch(0.55 0.16 285); + + /* Chart Colors */ + --color-chart-1: oklch(0.72 0.14 155); + --color-chart-2: oklch(0.7 0.14 25); + --color-chart-3: oklch(0.72 0.14 50); + --color-chart-4: oklch(0.65 0.16 355); + --color-chart-5: oklch(0.72 0.14 220); + + /* Semantic Status Tokens */ + --color-over-budget: oklch(0.55 0.20 25); + --color-on-budget: oklch(0.50 0.17 155); + --color-budget-bar-bg: oklch(0.92 0.01 260); + + /* Chart Fill Variants */ + --color-income-fill: oklch(0.68 0.19 155); + --color-bill-fill: oklch(0.65 0.19 25); + --color-variable-expense-fill: oklch(0.70 0.18 50); + --color-debt-fill: oklch(0.60 0.20 355); + --color-saving-fill: oklch(0.68 0.18 220); + --color-investment-fill: oklch(0.65 0.18 285); + + --radius: 0.625rem; + + --font-sans: "Inter", ui-sans-serif, system-ui, sans-serif; +} + +@layer base { + * { + @apply border-border; + } + body { + @apply bg-background text-foreground; + font-feature-settings: "rlig" 1, "calt" 1; + } +}