72 lines
2.1 KiB
Markdown
72 lines
2.1 KiB
Markdown
|
## New Design System Styling Guidelines
|
||
|
|
|
||
|
|
### CSS Variables & Tailwind Config
|
||
|
|
|
||
|
|
The new design uses custom CSS variables defined in `src/styles/new/index.css` and configured in `tailwind.new.config.js`. All styles are scoped to the `.new-design` class.
|
||
|
|
|
||
|
|
### Colors
|
||
|
|
|
||
|
|
**Text colors** (use these instead of `text-gray-*`):
|
||
|
|
- `text-high` - Primary text, highest contrast
|
||
|
|
- `text-normal` - Standard text
|
||
|
|
- `text-low` - Muted/secondary text, placeholders
|
||
|
|
|
||
|
|
**Background colors**:
|
||
|
|
- `bg-primary` - Main background
|
||
|
|
- `bg-secondary` - Slightly darker, used for inputs, cards, sidebars
|
||
|
|
- `bg-panel` - Panel/elevated surfaces
|
||
|
|
|
||
|
|
**Accent colors**:
|
||
|
|
- `brand` - Orange accent (`hsl(25 82% 54%)`)
|
||
|
|
- `error` - Error states
|
||
|
|
- `success` - Success states
|
||
|
|
|
||
|
|
### Typography
|
||
|
|
|
||
|
|
**Font families**:
|
||
|
|
- `font-ibm-plex-sans` - Default sans-serif
|
||
|
|
- `font-ibm-plex-mono` - Monospace/code
|
||
|
|
|
||
|
|
**Font sizes** (smaller than typical Tailwind defaults):
|
||
|
|
- `text-xs` - 8px
|
||
|
|
- `text-sm` - 10px
|
||
|
|
- `text-base` - 12px (default)
|
||
|
|
- `text-lg` - 14px
|
||
|
|
- `text-xl` - 16px
|
||
|
|
|
||
|
|
### Spacing
|
||
|
|
|
||
|
|
Custom spacing tokens:
|
||
|
|
- `p-half` / `m-half` - 6px
|
||
|
|
- `p-base` / `m-base` - 12px
|
||
|
|
- `p-double` / `m-double` - 24px
|
||
|
|
|
||
|
|
### Border Radius
|
||
|
|
|
||
|
|
Uses a small radius by default (`--radius: 0.125rem`):
|
||
|
|
- `rounded` - Default small radius
|
||
|
|
- `rounded-sm`, `rounded-md`, `rounded-lg` - Progressively larger
|
||
|
|
|
||
|
|
### Focus States
|
||
|
|
|
||
|
|
Focus rings use `ring-brand` (orange) and are inset by default.
|
||
|
|
|
||
|
|
### Example Component Styling
|
||
|
|
|
||
|
|
```tsx
|
||
|
|
// Input field
|
||
|
|
className="px-base bg-secondary rounded border text-base text-normal placeholder:text-low focus:outline-none focus:ring-1 focus:ring-brand"
|
||
|
|
|
||
|
|
// Button (icon)
|
||
|
|
className="flex items-center justify-center bg-secondary rounded border text-low hover:text-normal"
|
||
|
|
|
||
|
|
// Sidebar container
|
||
|
|
className="w-64 bg-secondary shrink-0 p-base"
|
||
|
|
```
|
||
|
|
|
||
|
|
### Architecture Rules
|
||
|
|
|
||
|
|
- **View components** (in `views/`) should be stateless - receive all data via props
|
||
|
|
- **Container components** (in `containers/`) manage state and pass to views
|
||
|
|
- **UI components** (in `ui-new/`) are reusable primitives
|
||
|
|
- File names in `ui-new/` must be **PascalCase** (e.g., `Field.tsx`, `Label.tsx`)
|