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

refactor(planner): replace hardcoded values with design tokens

Browse Source 
- border-radius: 10px → var(--radius-lg) in both tile components
- opacity: 0.42 → var(--opacity-dimmed) in DesktopDayTile
- var(--yellow) → var(--color-ring-today) for today ring and date circle

Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>
This commit is contained in:
Marcel Raddatz
2026-04-10 14:17:50 +02:00
parent 9423cd673c
commit 3f9bd2b226
2 changed files with 8 additions and 8 deletions
Download Patch File Download Diff File Expand all files Collapse all files

14
frontend/src/lib/planner/DesktopDayTile.svelte
View File

@@ -197,7 +197,7 @@
height: 100%; height: 100%;
width: 100%; width: 100%;
cursor: pointer; cursor: pointer;
border-radius: 10px; border-radius: var(--radius-lg);
box-shadow: 0 1px 3px rgba(28,28,24,.06), 0 1px 2px rgba(28,28,24,.04); box-shadow: 0 1px 3px rgba(28,28,24,.06), 0 1px 2px rgba(28,28,24,.04);
transition: box-shadow .15s, opacity .15s; transition: box-shadow .15s, opacity .15s;
} }
@@ -205,10 +205,10 @@
box-shadow: 0 6px 18px rgba(28,28,24,.14), 0 2px 6px rgba(28,28,24,.08); box-shadow: 0 6px 18px rgba(28,28,24,.14), 0 2px 6px rgba(28,28,24,.08);
} }
.scene-today { .scene-today {
box-shadow: 0 0 0 2px var(--yellow), 0 1px 3px rgba(28,28,24,.06); box-shadow: 0 0 0 2px var(--color-ring-today), 0 1px 3px rgba(28,28,24,.06);
} }
.scene-today:hover { .scene-today:hover {
box-shadow: 0 0 0 2px var(--yellow), 0 6px 18px rgba(28,28,24,.14); box-shadow: 0 0 0 2px var(--color-ring-today), 0 6px 18px rgba(28,28,24,.14);
} }
.scene-selected { .scene-selected {
box-shadow: 0 0 0 2px var(--green-dark), 0 6px 18px rgba(28,28,24,.14); box-shadow: 0 0 0 2px var(--green-dark), 0 6px 18px rgba(28,28,24,.14);
@@ -218,7 +218,7 @@
box-shadow: 0 0 0 2px var(--green-dark), 0 6px 18px rgba(28,28,24,.14); box-shadow: 0 0 0 2px var(--green-dark), 0 6px 18px rgba(28,28,24,.14);
} }
.scene-dimmed { .scene-dimmed {
opacity: 0.42; opacity: var(--opacity-dimmed);
pointer-events: none; pointer-events: none;
} }
@@ -243,7 +243,7 @@
.card-front-inner { .card-front-inner {
position: absolute; position: absolute;
inset: 0; inset: 0;
border-radius: 10px; border-radius: var(--radius-lg);
overflow: hidden; overflow: hidden;
} }
@@ -288,7 +288,7 @@
background: rgba(255,255,255,.22); background: rgba(255,255,255,.22);
} }
.dn-today { .dn-today {
background: var(--yellow) !important; background: var(--color-ring-today) !important;
color: #fff !important; color: #fff !important;
} }
.dn-selected { .dn-selected {
@@ -336,7 +336,7 @@
.card-back-inner { .card-back-inner {
position: absolute; position: absolute;
inset: 0; inset: 0;
border-radius: 10px; border-radius: var(--radius-lg);
overflow-y: auto; overflow-y: auto;
background: var(--color-page); background: var(--color-page);
border: 1px solid var(--color-border); border: 1px solid var(--color-border);

2
frontend/src/lib/planner/EmptyDayTile.svelte
View File

@@ -31,7 +31,7 @@
data-testid="empty-day-tile" data-testid="empty-day-tile"
role="group" role="group"
class="h-full flex flex-col overflow-hidden" class="h-full flex flex-col overflow-hidden"
style="border: 1.5px dashed var(--color-border); border-radius: 10px; background: var(--color-surface); box-shadow: 0 1px 3px rgba(28,28,24,.06);" style="border: 1.5px dashed var(--color-border); border-radius: var(--radius-lg); background: var(--color-surface); box-shadow: 0 1px 3px rgba(28,28,24,.06);"
> >
<!-- Day header --> <!-- Day header -->
<div style="display: flex; align-items: center; justify-content: space-between; padding: 7px 8px 0; flex-shrink: 0;"> <div style="display: flex; align-items: center; justify-content: space-between; padding: 7px 8px 0; flex-shrink: 0;">