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

docs: update CLAUDE.md design system section to match new patterns

Browse Source 
Replace outdated monochrome design system reference with current
purple gradient accent tokens (bg-card, border-border, text-foreground,
bg-gradient-brand, etc.).

Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>
This commit is contained in:
chihlasm
2026-02-15 22:48:20 -05:00
parent fa709faa60
commit 293ceaa9e9
1 changed files with 12 additions and 8 deletions
Download Patch File Download Diff File Expand all files Collapse all files

20
CLAUDE.md
View File

@@ -1,6 +1,6 @@
# CLAUDE.md - Patherly / ResolutionFlow Project Context
> **Last Updated:** February 14, 2026
> **Last Updated:** February 15, 2026
---
@@ -262,15 +262,19 @@ navigate(`/trees/${newTree.id}/edit`)
---
## Monochrome Design System
## Design System (Purple Gradient Accent)
- **Backgrounds:** `bg-black`, subtle radial gradients
- **Cards:** `glass-card rounded-2xl` (NOT `bg-card border-border`)
- **Buttons:** Primary: `bg-white text-black hover:bg-white/90`. Secondary: `border border-white/10 text-white/60 hover:bg-white/10`
- **Inputs:** `border-white/10 bg-black/50 text-white` + focus: `border-white/30 ring-white/20`
- **Text:** `text-white` → `text-white/70` → `text-white/40` → `text-white/30`
- **Borders:** `border-white/[0.06]` or `border-white/10`
- **Theme:** Dark-only, purple gradient accents — NO monochrome `text-white/N` or `glass-card` patterns
- **Backgrounds:** `bg-background` (page), `bg-card` (cards/inputs/modals)
- **Cards:** `bg-card border border-border rounded-xl`
- **Buttons:** Primary: `bg-gradient-brand text-white shadow-lg shadow-primary/20 hover:opacity-90`. Secondary: `border border-border text-muted-foreground hover:bg-accent hover:text-foreground`
- **Inputs:** `border-border bg-card text-foreground placeholder:text-muted-foreground` + focus: `focus:border-primary focus:ring-1 focus:ring-primary/20`
- **Text:** `text-foreground` → `text-muted-foreground` (two levels only)
- **Borders:** `border-border` (single token, not opacity variants)
- **Hover states:** `hover:bg-accent` (backgrounds), `hover:text-foreground` (text)
- **Active/selected:** `bg-accent text-foreground` or `border-primary/30 bg-primary/10`
- **Functional color only:** emerald-400 (success), red-400 (error), yellow-400 (warning), blue-400 (info)
- **CSS variables:** Defined in `index.css` `:root` — `--primary`, `--card`, `--border`, `--accent`, `--muted-foreground`, etc.
---