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

fix: dark-mode-aware shadows — elevated surfaces + faint accent glow

Browse Source 
Black shadows are invisible on dark backgrounds. Replaced with:
- Primary button hover: faint cyan glow (rgba 0.2)
- Ghost button hover: brighter border only (no shadow)
- tab-active-shadow: bg-elevated + faint cyan glow (rgba 0.08)
- card-lift: brighter border + subtle cyan glow on hover

Co-Authored-By: Claude Opus 4.6 (1M context) <noreply@anthropic.com>
This commit is contained in:
Michael Chihlas
2026-03-22 05:18:37 -04:00
parent 6eae234991
commit 20b3627fe0
2 changed files with 31 additions and 24 deletions
Download Patch File Download Diff File Expand all files Collapse all files

32
DESIGN-SYSTEM.md
View File

@@ -321,31 +321,37 @@ Color: accent-text
## Shadows
Shadows communicate **interaction state**, not decoration. Elements earn shadows through user interaction.
Shadows communicate **interaction state**, not decoration. On dark backgrounds, traditional black shadows are invisible — use **brighter surfaces + faint accent glow** instead.
**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)`
**Elevation on dark backgrounds (the principle):** Instead of shadow = darker, elevation = lighter. A "raised" element gets a brighter surface color (`bg-elevated` / `#1c1f2a`) and optionally a very faint cyan glow. This creates perceived depth through contrast.
**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`
**Hover state (buttons):** Lift effect with accent glow.
**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)`
- Primary button hover: `0 2px 10px rgba(34,211,238,0.2)` + `translateY(-1px)` — cyan glow
- Ghost button hover: brighter border (`border-hover`) + `translateY(-1px)`, no shadow
- Active/click: glow fades, element "presses down" to `translateY(0)`
**Active/selected state (tabs, toggles):** Elevated surface + faint accent glow.
- Active tab: `bg-elevated` + `box-shadow: 0 1px 4px rgba(34,211,238,0.08)` — class: `tab-active-shadow`
**Card hover lift (optional):** For clickable cards.
- Hover: brighter border + `0 2px 8px rgba(34,211,238,0.06)` + `translateY(-2px)` — class: `card-lift`
**Overlays:** Flyouts, dropdowns, modals get stronger shadows (they overlay lighter content).
**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 `rgba(0,0,0,...)` shadows on resting elements (invisible on dark bg)
- No permanent decorative shadows
- No colored glow shadows (except primary button cyan tint on hover)
- No heavy glow effects — accent glow should be barely perceptible (≤ 0.1 opacity)
---