yusiboyz/platform
1
0
Fork 0
Code Issues 1 Pull Requests Actions Packages Projects Releases Wiki Activity

style: taste-skill refinements — tinted shadows, stagger animations, tactile press

Browse Source 
Pre-redesign checkpoint.

Co-Authored-By: Claude Opus 4.6 (1M context) <noreply@anthropic.com>
This commit is contained in:
Yusuf Suleman
2026-03-30 20:51:56 -05:00
parent fa5a748a60
commit 3704687793
5 changed files with 1382 additions and 19 deletions
Download Patch File Download Diff File Expand all files Collapse all files

34
frontend-v2/src/app.css
View File

@@ -232,6 +232,29 @@
100% { background-position: -200% 0; }
}
/* ── Staggered reveal ──
* Add .stagger to a container and children auto-cascade.
* Or use .reveal on individual elements.
*/
@keyframes cardIn {
from { opacity: 0; transform: translateY(12px); }
to { opacity: 1; transform: translateY(0); }
}
.reveal {
animation: cardIn 0.5s cubic-bezier(0.16, 1, 0.3, 1) both;
}
.stagger > * {
animation: cardIn 0.45s cubic-bezier(0.16, 1, 0.3, 1) both;
}
.stagger > *:nth-child(1) { animation-delay: 0ms; }
.stagger > *:nth-child(2) { animation-delay: 60ms; }
.stagger > *:nth-child(3) { animation-delay: 120ms; }
.stagger > *:nth-child(4) { animation-delay: 180ms; }
.stagger > *:nth-child(5) { animation-delay: 240ms; }
.stagger > *:nth-child(6) { animation-delay: 300ms; }
.stagger > *:nth-child(7) { animation-delay: 360ms; }
.stagger > *:nth-child(8) { animation-delay: 420ms; }
/* ── Buttons ── */
.btn-primary {
padding: var(--sp-2) var(--sp-4);
@@ -245,8 +268,8 @@
transition: all 0.2s ease;
letter-spacing: 0.01em;
}
.btn-primary:hover { filter: brightness(1.1); transform: translateY(-1px); }
.btn-primary:active { transform: translateY(0); }
.btn-primary:hover { filter: brightness(1.1); transform: translateY(-1px); box-shadow: 0 4px 12px var(--accent-dim); }
.btn-primary:active { transform: scale(0.97); filter: none; }
.btn-primary.full {
width: 100%;
padding: var(--sp-3) var(--sp-4);
@@ -267,6 +290,7 @@
transition: all var(--transition);
}
.btn-secondary:hover { background: var(--card-hover); color: var(--text-1); }
.btn-secondary:active { transform: scale(0.97); }
.btn-icon {
width: 36px;
@@ -358,14 +382,12 @@
align-items: center;
gap: var(--inner-gap);
padding: var(--row-pad-y) var(--row-pad-x);
transition: background 0.15s ease;
transition: background 0.2s ease, transform 0.2s ease;
border-radius: var(--radius-sm);
margin: 0 calc(-1 * var(--sp-1));
padding-left: calc(var(--row-pad-x) + var(--sp-1));
padding-right: calc(var(--row-pad-x) + var(--sp-1));
}
.data-row:hover { background: var(--card-hover); }
.data-row + .data-row { border-top: 1px solid var(--border); }
.data-row:active { transform: scale(0.995); }
/* ── Badges ──
* Semantic status badges. Variants: error, success, warning, accent, muted.

21
frontend-v2/src/lib/components/dashboard/DashboardActionCard.svelte
View File

@@ -43,13 +43,13 @@
display: flex;
align-items: center;
justify-content: space-between;
padding: var(--sp-5) var(--sp-5);
padding: var(--sp-4) var(--sp-5);
border-radius: var(--radius);
background: var(--card);
border: 1px solid var(--border);
border-left: 3px solid var(--border);
box-shadow: var(--shadow-sm);
transition: all 0.2s ease;
box-shadow: var(--shadow-xs);
transition: all 0.25s cubic-bezier(0.16, 1, 0.3, 1);
cursor: pointer;
text-decoration: none;
}
@@ -59,17 +59,16 @@
.action-card:hover {
transform: translateY(-2px);
box-shadow: var(--shadow-lg);
box-shadow: var(--shadow-md);
}
.action-card.budget:hover { box-shadow: 0 4px 16px var(--accent-dim), var(--shadow-sm); }
.action-card.inventory:hover { box-shadow: 0 4px 16px var(--error-dim), var(--shadow-sm); }
.action-card.fitness:hover { box-shadow: 0 4px 16px var(--success-dim), var(--shadow-sm); }
.action-card:active { transform: scale(0.985); }
.action-card.primary {
box-shadow: var(--shadow-lg);
transform: translateY(-1px);
}
.action-card.primary:hover {
transform: translateY(-3px);
box-shadow: var(--shadow-lg);
box-shadow: var(--shadow-sm);
}
.action-card-left {

4
frontend-v2/src/routes/(app)/+page.svelte
View File

@@ -158,7 +158,7 @@
<TaskSlideOver bind:open={taskPanelOpen} onclose={() => { taskPanelOpen = false; loadTasks(); }} />
<!-- Action cards -->
<div class="action-cards">
<div class="action-cards stagger">
<DashboardActionCard
title="{budgetUncatCount} uncategorized transactions"
description="{budgetSpending} spent &middot; {budgetIncome} income"
@@ -314,7 +314,7 @@
.action-cards {
display: flex;
flex-direction: column;
gap: var(--sp-3);
gap: var(--sp-2);
margin-bottom: var(--section-gap);
}