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%;
width: 100%;
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);
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);
}
.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 {
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 {
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);
}
.scene-dimmed {
opacity: 0.42;
opacity: var(--opacity-dimmed);
pointer-events: none;
}
@@ -243,7 +243,7 @@
.card-front-inner {
position: absolute;
inset: 0;
border-radius: 10px;
border-radius: var(--radius-lg);
overflow: hidden;
}
@@ -288,7 +288,7 @@
background: rgba(255,255,255,.22);
}
.dn-today {
background: var(--yellow) !important;
background: var(--color-ring-today) !important;
color: #fff !important;
}
.dn-selected {
@@ -336,7 +336,7 @@
.card-back-inner {
position: absolute;
inset: 0;
border-radius: 10px;
border-radius: var(--radius-lg);
overflow-y: auto;
background: var(--color-page);
border: 1px solid var(--color-border);

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

@@ -31,7 +31,7 @@
data-testid="empty-day-tile"
role="group"
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 -->
<div style="display: flex; align-items: center; justify-content: space-between; padding: 7px 8px 0; flex-shrink: 0;">