b4a226409c
New unified receipt creation system with: - UnifiedReceiptForm component with inline OCR preview and confidence indicators - Compact upload zone with drag-drop and camera support - TVA and Payment fields with dynamic add/remove - Supplier dual-field with autocomplete and OCR hint - Receipt form sections with collapsible auxiliary data Backend OCR improvements: - Add confidence_tva and confidence_payment to extraction results - Update TVA extraction to return confidence scores - Include TVA (15%) and payment (10%) in overall_confidence calculation Also includes: - CSS design system rules documentation - Port check helper function for service scripts - Expanded design tokens documentation in CLAUDE.md Co-Authored-By: Claude Opus 4.5 <noreply@anthropic.com>
137 lines
4.7 KiB
Markdown
137 lines
4.7 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/`
|
|
|
|
## 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 `<html>` |
|
|
| `dark` | Forțează dark mode | `[data-theme="dark"]` pe `<html>` |
|
|
|
|
**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
|
|
<Dropdown ... class="my-select dropdown-borderless" />
|
|
```
|
|
|
|
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
|