marcel/mealprep
1
0
Fork 0
Code Issues 22 Pull Requests Actions Packages Projects Releases Wiki Activity

feat(planner): add flip-tile design tokens to app.css

Browse Source 
Adds --color-ring-today, --color-ring-selected, --opacity-dimmed,
9 protein gradient tokens and 5 cuisine gradient tokens as @theme
custom properties, integrating into the existing token layer.

Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>
This commit is contained in:
Marcel Raddatz
2026-04-10 10:44:46 +02:00
parent 16e1539ac0
commit f2071ca5d8
2 changed files with 44 additions and 1 deletions
Download Patch File Download Diff File Expand all files Collapse all files

23
frontend/src/app.css
View File

@@ -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%);
}

22
frontend/src/lib/design-system/tokens.test.ts
View File

@@ -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', () => {