diff --git a/frontend/src/app.css b/frontend/src/app.css index 988ac1c..f7ba542 100644 --- a/frontend/src/app.css +++ b/frontend/src/app.css @@ -86,4 +86,27 @@ --btn-font-size: 13px; --btn-font-weight: 500; --btn-letter-spacing: 0.04em; + + /* ── Planner flip-tile semantic tokens ──────────────────────────── */ + --color-ring-today: var(--yellow-text); + --color-ring-selected: var(--green-dark); + --opacity-dimmed: 0.38; + + /* ── Protein gradient tokens ────────────────────────────────────── */ + --gradient-protein-haehnchen: linear-gradient(135deg, #f59e0b 0%, #d97706 100%); + --gradient-protein-rind: linear-gradient(135deg, #ef4444 0%, #b91c1c 100%); + --gradient-protein-fisch: linear-gradient(135deg, #3b82f6 0%, #1d4ed8 100%); + --gradient-protein-tofu: linear-gradient(135deg, #22c55e 0%, #15803d 100%); + --gradient-protein-veg: linear-gradient(135deg, #86efac 0%, #4ade80 100%); + --gradient-protein-schwein: linear-gradient(135deg, #fca5a5 0%, #f87171 100%); + --gradient-protein-lamm: linear-gradient(135deg, #92400e 0%, #78350f 100%); + --gradient-protein-ei: linear-gradient(135deg, #fbbf24 0%, #f59e0b 100%); + --gradient-protein-huelsenfruechte: linear-gradient(135deg, #a16207 0%, #854d0e 100%); + + /* ── Cuisine gradient tokens ────────────────────────────────────── */ + --gradient-cuisine-italienisch: linear-gradient(135deg, #dc2626 0%, #991b1b 100%); + --gradient-cuisine-asiatisch: linear-gradient(135deg, #166534 0%, #14532d 100%); + --gradient-cuisine-indisch: linear-gradient(135deg, #ca8a04 0%, #a16207 100%); + --gradient-cuisine-mexikanisch: linear-gradient(135deg, #ea580c 0%, #c2410c 100%); + --gradient-cuisine-mediterran: linear-gradient(135deg, #2563eb 0%, #1d4ed8 100%); } diff --git a/frontend/src/lib/design-system/tokens.test.ts b/frontend/src/lib/design-system/tokens.test.ts index 1928339..7c6d1ae 100644 --- a/frontend/src/lib/design-system/tokens.test.ts +++ b/frontend/src/lib/design-system/tokens.test.ts @@ -47,7 +47,27 @@ const requiredTokens = [ // Shadows '--shadow-card', '--shadow-raised', - '--shadow-overlay' + '--shadow-overlay', + // Planner flip-tile semantic tokens + '--color-ring-today', + '--color-ring-selected', + '--opacity-dimmed', + // Protein gradient tokens + '--gradient-protein-haehnchen', + '--gradient-protein-rind', + '--gradient-protein-fisch', + '--gradient-protein-tofu', + '--gradient-protein-veg', + '--gradient-protein-schwein', + '--gradient-protein-lamm', + '--gradient-protein-ei', + '--gradient-protein-huelsenfruechte', + // Cuisine gradient tokens + '--gradient-cuisine-italienisch', + '--gradient-cuisine-asiatisch', + '--gradient-cuisine-indisch', + '--gradient-cuisine-mexikanisch', + '--gradient-cuisine-mediterran' ]; describe('design token completeness', () => {