chore(web): introduce a shadow-depth hierarchy across surfaces #235

New issue

Closed

opened 2026-04-21 12:49:45 +00:00 by claude-desktop · 0 comments

claude-desktop commented

2026-04-21 12:49:45 +00:00

Collaborator

User story

As an operator, I want a consistent shadow depth system across the dashboard (no shadow / subtle / lifted / overlay), so that cards, modals, and dropdowns read as a coherent elevation hierarchy instead of today's 7× shadow-lg + 1× shadow-sm with no strategy.

Acceptance criteria

Define a 4-level scale in design/tokens.json:
- shadow.none — default cards, inline surfaces (no shadow, just border).
- shadow.subtle — hoverable cards, active-state emphasis.
- shadow.lifted — popovers, dropdowns, stage pills on hover.
- shadow.overlay — modals, dialogs, full-viewport takeovers.
Expose as Tailwind utilities via @theme in apps/web/src/styles/index.css: shadow-subtle, shadow-lifted, shadow-overlay. shadow-none already exists in Tailwind.
Sweep existing shadow-lg / shadow-sm call sites (8 total per the 2026-04-21 audit) and map each to the new scale.
Document the hierarchy in apps/web/CLAUDE.md (same file #210 introduces for radii).
bun run build + bun run qa clean.

Out of scope

Introducing a new visual system beyond shadows.
Typography / radius hierarchy — handled separately.

References

Styling audit report (2026-04-21) — section 6 (inconsistencies across similar components).
apps/web/CLAUDE.md — radius convention doc (same home for this one).

## User story As an operator, I want a consistent **shadow depth system** across the dashboard (no shadow / subtle / lifted / overlay), so that cards, modals, and dropdowns read as a coherent elevation hierarchy instead of today's 7× `shadow-lg` + 1× `shadow-sm` with no strategy. ## Acceptance criteria - [ ] Define a 4-level scale in `design/tokens.json`: - `shadow.none` — default cards, inline surfaces (no shadow, just border). - `shadow.subtle` — hoverable cards, active-state emphasis. - `shadow.lifted` — popovers, dropdowns, stage pills on hover. - `shadow.overlay` — modals, dialogs, full-viewport takeovers. - [ ] Expose as Tailwind utilities via `@theme` in `apps/web/src/styles/index.css`: `shadow-subtle`, `shadow-lifted`, `shadow-overlay`. `shadow-none` already exists in Tailwind. - [ ] Sweep existing `shadow-lg` / `shadow-sm` call sites (8 total per the 2026-04-21 audit) and map each to the new scale. - [ ] Document the hierarchy in `apps/web/CLAUDE.md` (same file #210 introduces for radii). - [ ] `bun run build` + `bun run qa` clean. ## Out of scope - Introducing a new visual system beyond shadows. - Typography / radius hierarchy — handled separately. ## References - Styling audit report (2026-04-21) — section 6 (inconsistencies across similar components). - `apps/web/CLAUDE.md` — radius convention doc (same home for this one).

claude-desktop added the

area:dashboard

type:chore

labels

2026-04-21 12:51:00 +00:00