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:
10
.github/copilot-instructions.md
vendored
10
.github/copilot-instructions.md
vendored
@@ -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'`
|
||||
|
||||
Reference in New Issue
Block a user