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)
---

23
frontend/src/index.css
View File

@@ -181,11 +181,11 @@
transition: filter 150ms ease, box-shadow 150ms ease, transform 150ms ease;
&:hover {
filter: brightness(1.1);
box-shadow: 0 2px 8px rgba(34, 211, 238, 0.25);
box-shadow: 0 2px 10px rgba(34, 211, 238, 0.2);
transform: translateY(-1px);
}
&:active {
box-shadow: 0 1px 2px rgba(34, 211, 238, 0.15);
box-shadow: 0 0 4px rgba(34, 211, 238, 0.1);
transform: translateY(0);
}
}
@@ -202,32 +202,33 @@
background: var(--color-bg-elevated);
color: var(--color-text-primary);
border-color: var(--color-border-hover);
box-shadow: 0 2px 6px rgba(0, 0, 0, 0.2);
transform: translateY(-1px);
}
&:active {
box-shadow: 0 1px 2px rgba(0, 0, 0, 0.15);
transform: translateY(0);
}
}
/* ── Interactive shadow patterns ────────────────── */
/* ── Interactive shadow patterns (dark-mode aware) ── */
/* On dark backgrounds, use brighter surfaces + faint accent glow
instead of black shadows (which are invisible on #0c0d10) */
/* Tab/toggle group: active item gets elevation shadow */
/* Tab/toggle group: active item gets elevated surface + faint accent glow */
@utility tab-active-shadow {
box-shadow: 0 2px 8px rgba(0, 0, 0, 0.25);
background: var(--color-bg-elevated);
box-shadow: 0 1px 4px rgba(34, 211, 238, 0.08);
}
/* Card hover lift — optional, add to cards that should feel interactive */
/* Card hover lift — brighter border + subtle accent glow */
@utility card-lift {
transition: box-shadow 200ms ease, transform 200ms ease, border-color 200ms ease;
&:hover {
box-shadow: 0 4px 12px rgba(0, 0, 0, 0.2);
transform: translateY(-2px);
border-color: var(--color-border-hover);
box-shadow: 0 2px 8px rgba(34, 211, 238, 0.06);
transform: translateY(-2px);
}
&:active {
box-shadow: 0 1px 4px rgba(0, 0, 0, 0.15);
box-shadow: none;
transform: translateY(0);
}
}