--- 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/` ## Theme System (3 Modes) - CRITICAL ROA2WEB are **theme toggle în header**: auto → light → dark | Mode | Comportament | CSS Selector | |------|--------------|--------------| | `auto` | Urmează preferința OS | `@media (prefers-color-scheme: dark)` | | `light` | Forțează light mode | `[data-theme="light"]` pe `` | | `dark` | Forțează dark mode | `[data-theme="dark"]` pe `` | **Detalii implementare:** - **Toggle:** `AppHeader.vue` (lines 137-175) - **Persistență:** `localStorage['user-theme']` (valori: 'light', 'dark', sau absent=auto) - **CSS Priority:** `[data-theme]` > `@media (prefers-color-scheme)` > default light **Testare OBLIGATORIE:** 1. Click buton temă în header (ciclează auto→light→dark) 2. DevTools → Rendering → Emulate CSS media → prefers-color-scheme: dark **Semantic surface tokens (funcționează în TOATE modurile):** | Token | Light | Dark | Use For | |-------|-------|------|---------| | `--surface-card` | white | #1e293b | Card/container backgrounds | | `--surface-ground` | #f8fafc | #0f172a | Page background | | `--surface-hover` | #f1f5f9 | #334155 | Hover states | | `--surface-border` | #e2e8f0 | #475569 | Borders | | `--text-color` | #111827 | #f9fafb | Primary text | | `--text-color-secondary` | #6b7280 | #d1d5db | Secondary text | **Status colors (scales 50-900):** - 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 - **Skip theme testing** - ALWAYS test cu toggle (auto/light/dark) + DevTools dark mode ## PrimeVue Component Patterns ### Dropdown în Forme Compacte **OBLIGATORIU:** Folosește clasa `dropdown-borderless` pentru toate dropdown-urile în forme compacte/inline: ```html ``` Clasa este definită global (în `ReceiptCreateView.vue` non-scoped) și elimină border, background și box-shadow pentru un look minimalist. ### Entry Chips / Inline Labels (Dark Mode) Pentru elemente custom care afișează date inline (chips, tags, badges): ```css /* ✅ CORECT - folosește semantic tokens */ .entry-chip { background: var(--surface-hover); color: var(--text-color); } [data-theme="dark"] .entry-chip { background: var(--surface-100); } /* ❌ GREȘIT - culori hardcodate */ .entry-chip { background: #f1f5f9; /* NU! */ color: #111827; /* NU! */ } ``` ### Reguli Dark Mode pentru Componente Custom 1. **Text:** Folosește `var(--text-color)` sau `var(--text-color-secondary)` - se adaptează automat 2. **Background:** Folosește `var(--surface-hover)` pentru hover/chips în light mode 3. **Dark override:** Folosește `[data-theme="dark"]` cu `var(--surface-100)` sau `var(--surface-200)` 4. **NU hardcoda:** Niciodată `#d1d5db`, `#f9fafb`, `#334155` direct în CSS