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 <noreply@anthropic.com>
2026-03-16 12:14:31 +01:00
parent d89d70f3c7
commit 4f74c79fda
3 changed files with 293 additions and 0 deletions
--- a/src/i18n/de.json
+++ 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"
+  }
+}
--- a/src/i18n/en.json
+++ 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"
+  }
+}
--- a/src/index.css
+++ 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;
+  }
+}