1bb3a382de
- Add PWA manifest, icons (192x192, 512x512), and service worker - Register service worker in index.html with Apple mobile web app support - Consolidate CSS variables and design tokens documentation - Update PrimeVue overrides for consistent theming - Refactor data-entry components to use shared CSS patterns - Add frontend-style-auditor agent for style consistency checks - Minor OCR validation and job worker improvements - Update start-prod.sh configuration 🤖 Generated with [Claude Code](https://claude.com/claude-code) Co-Authored-By: Claude Opus 4.5 <noreply@anthropic.com>
83 lines
2.8 KiB
Markdown
83 lines
2.8 KiB
Markdown
---
|
|
paths: src/modules/**/*.{vue,css}
|
|
---
|
|
|
|
# CSS Design System Rules
|
|
|
|
## Documentation (READ FIRST)
|
|
- **Quick Start**: `docs/ONBOARDING_CSS.md` (5 min read)
|
|
- **Complete Patterns**: `docs/CSS_PATTERNS.md` (cards, forms, buttons, tables, etc.)
|
|
- **Design Tokens**: `docs/DESIGN_TOKENS.md` (colors, spacing, typography variables)
|
|
|
|
## Core Principles
|
|
- Use CSS variables from design tokens, NEVER hardcoded values
|
|
- Check `CSS_PATTERNS.md` BEFORE writing any CSS
|
|
- Import shared styles from `shared/frontend/styles/`
|
|
|
|
## Dark Mode Support (CRITICAL)
|
|
Dark mode is ACTIVE via `@media (prefers-color-scheme: dark)`.
|
|
|
|
**Use semantic surface tokens for backgrounds:**
|
|
| Token | Light | Dark | Use For |
|
|
|-------|-------|------|---------|
|
|
| `--surface-card` | white | dark | Card/container backgrounds |
|
|
| `--surface-ground` | light gray | darker | Page background |
|
|
| `--surface-hover` | hover gray | dark hover | Hover states |
|
|
| `--surface-border` | light border | dark border | Borders |
|
|
| `--text-color` | dark | light | Primary text |
|
|
| `--text-color-secondary` | gray | light gray | Secondary text |
|
|
|
|
**For status colors, use scales:**
|
|
- Success: `--green-50` to `--green-900` (bg: 50/100, text: 500/600)
|
|
- Warning: `--yellow-50` to `--yellow-900`
|
|
- Error: `--red-50` to `--red-900`
|
|
- Info: `--blue-50` to `--blue-900`
|
|
|
|
## Color Variable Quick Reference
|
|
|
|
### Backgrounds
|
|
```css
|
|
background: var(--surface-card); /* Cards, modals, containers */
|
|
background: var(--surface-ground); /* Page background */
|
|
background: var(--surface-hover); /* Hover states */
|
|
```
|
|
|
|
### Text
|
|
```css
|
|
color: var(--text-color); /* Primary text */
|
|
color: var(--text-color-secondary); /* Secondary/muted text */
|
|
```
|
|
|
|
### Borders
|
|
```css
|
|
border-color: var(--surface-border); /* Standard borders */
|
|
```
|
|
|
|
### Status Colors
|
|
```css
|
|
/* Success */
|
|
background: var(--green-50); /* Light success bg */
|
|
color: var(--green-600); /* Success text */
|
|
|
|
/* Warning */
|
|
background: var(--yellow-50); /* Light warning bg */
|
|
color: var(--yellow-700); /* Warning text */
|
|
|
|
/* Error */
|
|
background: var(--red-50); /* Light error bg */
|
|
color: var(--red-600); /* Error text */
|
|
```
|
|
|
|
## Shared Styles to Import
|
|
- Login: `@import 'shared/frontend/styles/login.css'`
|
|
- Header: `@import 'shared/frontend/styles/layout/header.css'`
|
|
- Navigation: `@import 'shared/frontend/styles/layout/navigation.css'`
|
|
|
|
## NEVER
|
|
- Use `:deep()` for PrimeVue overrides (use `vendor/` files)
|
|
- Duplicate patterns that exist in CSS_PATTERNS.md
|
|
- Use hardcoded colors like `#2563eb` (use `var(--color-primary)`)
|
|
- Use hardcoded backgrounds like `#ffffff` or `white` (use `var(--surface-card)`)
|
|
- Create scoped CSS for patterns that already exist in shared files
|
|
- Forget dark mode - always test with `prefers-color-scheme: dark`
|