docs: Add comprehensive styling conventions guide (#968)

Co-authored-by: copilot-swe-agent[bot] <198982749+Copilot@users.noreply.github.com>
Co-authored-by: thomasnordquist <7721625+thomasnordquist@users.noreply.github.com>
Co-authored-by: Thomas Nordquist <thomasnordquist@users.noreply.github.com>
This commit is contained in:
Copilot
2025-12-24 14:03:37 +01:00
committed by GitHub
parent 5f703695bb
commit 92fe005e3b
3 changed files with 224 additions and 0 deletions

View File

@@ -81,3 +81,13 @@ node dist/src/server.js 2>&1 | tee server.log
- `app/src/browserEventBus.ts` - Socket.io client
- `app/src/components/BrowserAuthWrapper.tsx` - Auth dialog
- `app/src/index.tsx` - React entry, theme providers
## Styling Conventions
When modifying or creating UI components, follow the styling patterns documented in <a>STYLING.md</a>.
**Key points for AI agents:**
- Use Material-UI (MUI) v7 components with `withStyles` HOC for styling
- Access theme colors via `theme.palette.*`, spacing via `theme.spacing()`, typography via `theme.typography.*`
- Support both light and dark modes with theme-conditional styling
- Import Material-UI colors: `import { blueGrey, amber, green, red } from '@mui/material/colors'`