james.maes
ff2104eb50
Three npm packages (create-jarvis-file CLI, jarvis-file-core browser framework, jarvis-file-backend AI services), starter HTML templates, design system CSS, CI/CD workflows, docs stubs, and design specs.
1.1 KiB
1.1 KiB
Design System
CSS component guide for Jarvis File's dark-theme design system.
CSS Custom Properties
Theme colors are set dynamically from window.JF.theme by config-loader.js. Override by changing config values.
TODO: Phase 4 -- document all CSS classes from Section 7 of the design spec.
Available Components
| Component | Class | Description |
|---|---|---|
| Card | .jf-card |
Dark surface with border, radius, padding |
| Stat Card | .jf-stat-card |
Number + label for KPIs |
| Stat Grid | .jf-stat-grid |
Responsive grid for stat cards |
| Badge | .jf-badge |
Small colored label |
| Table | .jf-table |
Striped dark table with hover |
| Code Block | .jf-code |
Monospace with syntax background |
| Tabs | .jf-tabs |
Horizontal tab navigation |
| Section | .jf-section |
Content section with margin |
| Hero | .jf-hero |
Full-width gradient section |
| Grid | .jf-grid-2/3/4 |
Responsive column grids |
| Alert | .jf-alert |
Callout boxes (warn, info) |
| List | .jf-list |
Styled list with markers |
| Divider | .jf-divider |
Horizontal rule |