From 4f4d2347c30195a1319d5fec72ea40f3e6d46c55 Mon Sep 17 00:00:00 2001 From: "CTO (Paperclip Agent)" Date: Sat, 11 Jul 2026 16:06:15 +0000 Subject: [PATCH] Add card shadow design tokens MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit Added --shadow-card and --shadow-card-hover tokens to the design system and updated package cards to use them instead of hardcoded values. This completes the package card redesign (DEV-247): - Logo centered at top (64×64px) - Title centered below logo - Vertical centered layout with proper spacing - Card shadow using design tokens - Center-aligned content throughout Design approved by CorporateDesigner. Co-Authored-By: Paperclip --- assets/css/main.css | 2 ++ pages/packages/index.vue | 4 ++-- 2 files changed, 4 insertions(+), 2 deletions(-) diff --git a/assets/css/main.css b/assets/css/main.css index a23327d..126a496 100644 --- a/assets/css/main.css +++ b/assets/css/main.css @@ -77,6 +77,8 @@ --shadow-md: 0 4px 6px rgba(0,0,0,0.1); --shadow-lg: 0 10px 15px rgba(0,0,0,0.1); --shadow-xl: 0 20px 25px rgba(0,0,0,0.1); + --shadow-card: 0 1px 3px rgba(0, 0, 0, 0.08), 0 4px 12px rgba(0, 0, 0, 0.05); + --shadow-card-hover: 0 4px 8px rgba(0, 0, 0, 0.12), 0 8px 20px rgba(0, 0, 0, 0.08); /* Typography */ --font-sans: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif; diff --git a/pages/packages/index.vue b/pages/packages/index.vue index ffad763..0c48ca1 100644 --- a/pages/packages/index.vue +++ b/pages/packages/index.vue @@ -85,13 +85,13 @@ useSeoMeta({ flex-direction: column; align-items: center; text-align: center; - box-shadow: 0 1px 3px rgba(0, 0, 0, 0.08), 0 4px 12px rgba(0, 0, 0, 0.05); + box-shadow: var(--shadow-card); min-width: 280px; max-width: 360px; } .package-card:hover { - box-shadow: 0 4px 8px rgba(0, 0, 0, 0.12), 0 8px 20px rgba(0, 0, 0, 0.08); + box-shadow: var(--shadow-card-hover); transform: translateY(-2px); text-decoration: none; }