Files

Claude Agent 67b0082df0 docs: Restructure styling documentation and add theme toggle docs

- Simplify CLAUDE.md from ~460 to ~145 lines with imports
- Add Theme System section to css-design-system.md (3 modes: auto/light/dark)
- Document theme toggle UI, localStorage persistence, CSS priority order
- Add paths: frontmatter to authentication.md and company-period.md
- Update DESIGN_TOKENS.md Dark Mode section with toggle documentation
- Clean auto-build-memory.md header (remove non-existent auto-sync reference)
- Remove non-existent plugin from settings.json

🤖 Generated with [Claude Code](https://claude.com/claude-code)

Co-Authored-By: Claude Opus 4.5 <noreply@anthropic.com>

2026-01-06 14:58:24 +00:00

3.5 KiB

Raw Blame History

paths

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:

Click buton temă în header (ciclează auto→light→dark)
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

background: var(--surface-card);     /* Cards, modals, containers */
background: var(--surface-ground);   /* Page background */
background: var(--surface-hover);    /* Hover states */

Text

color: var(--text-color);            /* Primary text */
color: var(--text-color-secondary);  /* Secondary/muted text */

Borders

border-color: var(--surface-border); /* Standard borders */

Status Colors

/* 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

3.5 KiB Raw Blame History