chihlasm/resolutionflow
1
0
Fork 0
Code Issues 23 Pull Requests 1 Actions Packages Projects Releases Wiki Activity

feat: add interactive shadow patterns — hover lift, active tab elevation

Browse Source 
Shadows communicate interaction state, not decoration:
- Primary buttons: cyan-tinted shadow + lift on hover
- Ghost buttons: subtle shadow + lift on hover
- Both: shadow shrinks on active/click (press effect)
- tab-active-shadow: elevation shadow for selected tabs/toggles
- card-lift: optional hover lift for interactive cards

Co-Authored-By: Claude Opus 4.6 (1M context) <noreply@anthropic.com>
This commit is contained in:
Michael Chihlas
2026-03-22 04:51:14 -04:00
parent 303a558432
commit a73d34c39b
2 changed files with 59 additions and 6 deletions
Download Patch File Download Diff File Expand all files Collapse all files

28
DESIGN-SYSTEM.md
View File

@@ -321,11 +321,31 @@ Color: accent-text
## Shadows
Minimal to none. No decorative shadows.
Shadows communicate **interaction state**, not decoration. Elements earn shadows through user interaction.
- Cards: none (border only)
- Dropdowns/flyouts: `0 4px 12px rgba(0,0,0,0.3)` if needed
- Logo mark: `0 2px 8px rgba(14,165,233,0.25)` (subtle brand glow on logo only)
**Resting state:** No shadows. Elements are flat with 1px borders.
**Hover state (buttons):** Subtle shadow + lift effect. Element feels like it rises off the surface.
- Primary button hover: `0 2px 8px rgba(34,211,238,0.25)` + `translateY(-1px)` — cyan-tinted shadow
- Ghost button hover: `0 2px 6px rgba(0,0,0,0.2)` + `translateY(-1px)`
- Active/click: shadow shrinks, element "presses down" to `translateY(0)`
**Active/selected state (tabs, toggles):** The selected item gets an elevation shadow to feel raised above siblings.
- Active tab: `0 2px 8px rgba(0,0,0,0.25)` — class: `tab-active-shadow`
**Card hover lift (optional):** For cards that should feel interactive (clickable list items, session cards).
- Hover: `0 4px 12px rgba(0,0,0,0.2)` + `translateY(-2px)` — class: `card-lift`
- Active: shadow shrinks to `0 1px 4px rgba(0,0,0,0.15)`
**Overlays:** Flyouts, dropdowns, modals get elevation shadows to separate from content.
- Drawer/flyout: `4px 0 12px rgba(0,0,0,0.2)`
- Dropdown: `0 4px 12px rgba(0,0,0,0.3)`
- Modal: `0 8px 24px rgba(0,0,0,0.4)`
**What NOT to do:**
- No shadows on resting cards (border only)
- No permanent decorative shadows
- No colored glow shadows (except primary button cyan tint on hover)
---