Design system: @taraba/css și @taraba/react

Toate cele patru aplicații (site, Backoffice, CRM, stare) folosesc aceleași două pachete pentru aspect și componente. Un element comun se schimbă într-un singur loc și se vede la fel peste tot.

Pachet	Ce conține	Cine îl folosește
@taraba/css (packages/css)	tokens.css: variabilele de design (culori, colțuri, umbre), tema luminoasă și întunecată · base.css: stilurile de bază · components.css: clasele de componente care arată la fel peste tot · workspace.css: spațiul de lucru (Backoffice, CRM), mai dens · status.css: elementele paginii de stare	toate aplicațiile
@taraba/react (packages/react)	componentele (Button, SideNav, Dialog, tabelele, graficele, WorkspaceShell, StaffLogin), tema, traducerile, clientul API	toate aplicațiile

Logica fără aspect (rute, bani, identificatori de firmă) rămâne în @taraba/shared.

Reguli

• Variabilele se definesc doar în tokens.css. O aplicație adaugă doar variabile proprii (site-ul: subsolul și inima de la favorite; spațiul de lucru: meniul lateral și colțurile mai mici).
• O clasă care arată la fel în toate aplicațiile stă în components.css, o singură dată. Spațiul de lucru păstrează intenționat variante mai dense pentru butoane, câmpuri și etichete, în workspace.css.
• Ordinea importurilor contează: tokens.css primul, stilurile aplicației, apoi components.css la final. Așa e în main.tsx al fiecărei aplicații.
• Componentele React primesc variante, nu clase: <Button variant="primary" size="lg">, <SideNav items={…} />. Structura și clasele vin împreună, deci nu se pot desincroniza (cum s-a întâmplat la meniul paginilor juridice).

Verificarea vizuală

tests/browser/visual/capture.mjs fotografiază 24 de pagini din toate aplicațiile, în ambele teme, pe desktop și pe mobil. Se rulează înainte și după o schimbare de stil, iar capturile se compară; diferențele acceptate sunt doar cele voite.

cd tests/browser
node visual/capture.mjs /tmp/inainte   # înainte de schimbare
node visual/capture.mjs /tmp/dupa      # după

Cere API-ul pe portul 3000 și aplicațiile în modul de dezvoltare (5173, 5174, 5175, 5177), pe date demo proaspete.