rar-autopass/DESIGN.md

DESIGN.md — Sistem de design AutoPass (by ROMFAST)

Sursa de adevar pentru identitatea vizuala a dashboard-ului. Implementarea concreta sta in app/web/templates/base.html (variabile CSS :root + [data-theme="light"]). Acest fisier spune ce si de ce; base.html spune cum.

Lucrul de retinut

„Software serios pentru o obligatie legala serioasa — dar parte din familia ROMFAST/ROA, nu un tool anonim." Operatorul de service trebuie sa simta ca declara la stat printr-un instrument de incredere, cu identitatea producatorului (ROMFAST) prezenta discret, nu griul generic de azi.

Context produs

Gateway web care declara prezentari de service-auto la RAR AUTOPASS (L.142/2023). Utilizatori: operatori de service-auto si integratori ROAAUTO. Face parte din familia ROA — Romfast Applications (ERP romanesc, modul Service Auto). Referinta de brand: romfast.ro — alb curat, accent albastru azur, pill-uri rotunjite, comutator de tema, logo rosu+albastru.

Decizie cromatica

Accentul functional = albastrul ROMFAST (acelasi cu „FAST" din logo si cu accentul de pe romfast.ro), nu albastrul generic SaaS de pana acum. Rosul apare DOAR in wordmark-ul „ROM" — nu ca accent de UI, fiindca rosul e rezervat starilor de eroare. Un singur accent, restul neutre, ca sistemul sa ramana discret.

Paleta — Dark (default)

--bg:    #0f1218   fundal aplicatie
--card:  #181c24   suprafete (carduri, modal, inputuri pe fundal)
--card2: #0f1218   fundal input slim / carduri-contor (= --bg, nivelul cel mai adanc)
--ink:   #e6e9ef   text principal
--muted: #8b93a7   text secundar (label-uri, coduri, „by")
--line:  #262b36   borduri, separatoare
--line2: #1f2530   separator subtire lista slim (mai subtil decat --line)
--accent:#2E74D6   azur ROMFAST — butoane primare, pill activ, linkuri, focus
--ok:    #2FBF8F   sent / succes
--warn:  #E0A93B   sending / atentie / Lipsa cod
--err:   #E05D5D   error / needs_data / Date incomplete

Paleta — Light ([data-theme="light"])

--bg:    #f5f7fa   fundal (alb-rece ca romfast.ro)
--card:  #ffffff   suprafete
--card2: #f5f7fa   fundal input slim / carduri-contor (= --bg)
--ink:   #1a1d24   text principal
--muted: #5c6473   text secundar
--line:  #e2e5ea   borduri
--line2: #eaedf2   separator subtire lista slim (mai subtil decat --line)
--accent:#1F66C9   azur, varianta mai inchisa pentru contrast AA pe alb
--ok:    #15803d   verde AA pe alb
--warn:  #b45309   chihlimbar AA pe alb
--err:   #dc2626   rosu AA pe alb

Paleta — Petrol ([data-theme="petrol"], tema selectabila)

Tema intunecata alternativa, cu accent petrol-teal (directia initiala aleasa, pastrata ca optiune). Aceleasi neutre-calde inchise; doar accentul difera de azur.

--bg:    #0e1416   fundal petrol-inchis
--card:  #161e20   suprafete
--card2: #0e1416   fundal input/contor (= --bg)
--ink:   #e6e9ef   text principal
--muted: #8b93a7   text secundar
--line:  #232c2e   borduri
--line2: #1c2426   separator subtire (intre --bg si --line)
--accent:#0E7C7B   teal petrol — butoane, pill activ, linkuri, focus
--ok:    #2FBF8F   sent
--warn:  #E0A93B   atentie
--err:   #E05D5D   eroare

Paleta — Grafit ([data-theme="grafit"], tema selectabila — adaugata PRD 5.15)

Similara cu dark, accent azur deschis (preluat din landing, --infot). Distinta de dark la cererea userului (D2). Mapare landing->app: --text->--ink, --sub->--muted, --okt->--ok, --errt->--err, --infot->--accent.

--bg:    #0f1218   fundal (identic cu dark)
--card:  #181c24   suprafete
--card2: #0f1218   fundal input/contor (= --bg)
--ink:   #e6e9ef   text principal
--muted: #8b93a7   text secundar
--line:  #262b36   borduri
--line2: #1f2530   separator subtire
--accent:#6ea2ec   azur deschis (landing --infot) — linkuri, focus, pill activ
--ok:    #2FBF8F   sent / succes
--warn:  #E0A93B   atentie
--err:   #E05D5D   eroare

Paleta — Cobalt ([data-theme="cobalt"], tema selectabila — adaugata PRD 5.15)

Fundal bleumarin adanc, accent albastru viu. Atmosfera tehnica/corporatista rece.

--bg:    #080d1c   fundal bleumarin adanc
--card:  #111a33   suprafete
--card2: #0b1226   fundal input/contor
--ink:   #e9ecfb   text principal (usor albastrat)
--muted: #8a93b8   text secundar
--line:  #1d2747   borduri
--line2: #161f3a   separator subtire
--accent:#8aa0ff   albastru viu (landing --infot)
--ok:    #2fd0a6   sent / succes (teal mai saturat)
--warn:  #E0A93B   atentie
--err:   #f06a7a   eroare (roz saturat pe bleumarin)

Paleta — Cupru ([data-theme="cupru"], tema selectabila — adaugata PRD 5.15)

Fundal cald ciocolata, accent chihlimbar. Atmosfera artizanala/calda.

--bg:    #15110b   fundal maro inchis-cald
--card:  #211a12   suprafete
--card2: #15110b   fundal input/contor (= --bg)
--ink:   #efe6d6   text principal (crem cald)
--muted: #a89a85   text secundar
--line:  #36291c   borduri
--line2: #281e14   separator subtire
--accent:#dfa45c   chihlimbar cald (landing --infot)
--ok:    #67b98c   sent / succes (verde muted-cald)
--warn:  #c97d2e   atentie (chihlimbar mai inchis)
--err:   #e2685a   eroare (coral pe maro)

Paleta — Hartie ([data-theme="hartie"], tema selectabila — adaugata PRD 5.15)

Fundal crem cald (hartie vintage), accent albastru clasic. Similara cu light, distinta la cererea userului. Ambele teme luminoase (hartie + light) respecta contrast AA.

--bg:    #f3efe6   fundal crem cald
--card:  #fffdf7   suprafete (crem-alb)
--card2: #f3efe6   fundal input/contor (= --bg)
--ink:   #1e1a13   text principal (maro-inchis, AA pe crem)
--muted: #6a6052   text secundar
--line:  #e2dccc   borduri
--line2: #ece6d9   separator subtire (mai deschis decat line)
--accent:#1F5FBF   albastru clasic (landing --infot = --accent) — 6.5:1 pe --bg, AA
--ok:    #1c7d5d   sent / succes (verde AA pe crem)
--warn:  #b45309   atentie (chihlimbar AA pe crem)
--err:   #bd463c   eroare (rosu AA pe crem)

Tokeni noi adaugati la PRD 5.15 (in toate cele 7 teme)

--card2   fundal input slim si carduri-contor (US-001/002); pe dark = --bg (cel mai adanc nivel)
--line2   separator subtire intre randuri lista slim (US-001/002); mai subtil decat --line

Culori de brand (doar wordmark, NU variabile de UI)

ROM:  #D1342F   rosu logo
FAST: #2E74D6   albastru logo (= accentul de UI in dark)

Contrast: textul principal pe fundal ramane AA in ambele teme; accentul pe alb foloseste varianta mai inchisa (#1F66C9) ca text/linkul sa treaca AA.

Tipografie

• UI / titluri: IBM Plex Sans — sans-serif cu caracter ingineresc, open-source, potrivit pentru „software serios", parte din limbajul vizual tehnic. Fallback: system-ui, sans-serif.
• Coduri / monospace: IBM Plex Mono — pentru coduri RAR (REV2), VIN, numar inmatriculare, detalii tehnice. Inlocuieste ui-monospace/Menlo actual cu o familie coerenta cu UI-ul.
• Incarcare: self-host woff2 (subset latin + latin-ext pentru diacritice romanesti) in app/web/static/fonts/, font-display: swap. Fara CDN extern (gateway intern, fara dependente de retea la runtime). Pana la self-host, fallback la stiva de sistem nu strica layout-ul.

Header & branding

• Titlul „Gateway RAR AUTOPASS" centrat pe header.
• Sub titlu, mic: logo-ul ROMFAST (/static/romfast_logo.png, ~28px inaltime). Decizie user (2026-06-25, US-012b): se foloseste PNG-ul real al logo-ului (ROM rosu + FAST albastru, fundal transparent — lizibil pe light/dark/petrol), NU wordmark-ul text. Wordmark-ul text (by ROM FAST cu ROM #D1342F / FAST #2E74D6) ramane documentat ca alternativa, dar livrabila finala foloseste imaginea.
• Controalele (comutator tema, versiune, hamburger ☰) raman la dreapta, fara a strica centrarea optica a titlului (ex. grila 3 coloane: stanga goala/echilibru, centru titlu, dreapta controale).
• Responsiv: pe mobil, wordmark-ul ramane sub titlu; controalele nu se suprapun (degrada elegant, eventual titlu mai mic).

Selector de tema

Inlocuieste comutatorul binar soare/luna cu un buton ciclic (pattern ca demoanaf.ro): un singur buton care roteste la fiecare click prin setul de teme, cu iconita + tooltip/aria-label care arata tema curenta („Tema: Light" etc.).

Ordinea ciclului (PRD 5.15 — teme aditive D2): Light → Dark → Petrol → Grafit → Cobalt → Cupru → Hartie → Auto → (inapoi la Light).

• Light → data-theme="light" (azur pe alb) — ☀
• Dark → data-theme="dark" (azur pe inchis, comportamentul implicit actual) — ☾
• Petrol → data-theme="petrol" (teal pe petrol-inchis) — ◐
• Grafit → data-theme="grafit" (azur deschis pe negru-grafit, similar dark) — ◑
• Cobalt → data-theme="cobalt" (albastru viu pe bleumarin adanc) — ◆
• Cupru → data-theme="cupru" (chihlimbar pe maro cald) — ◇
• Hartie → data-theme="hartie" (albastru clasic pe crem cald, similar light) — ○
• Auto → urmeaza prefers-color-scheme; rezolva la light (OS light) sau dark (OS dark). — ◉

Persistenta: preferinta explicita (inclusiv „Auto") in localStorage, doar la click. Scriptul anti-FOUC din <head> cunoaste toate cele 7+1 stari; valori vechi (light/dark/petrol) raman valide fara migrare fortata; valoare lipsa/necunoscuta → auto (fallback sigur, fara blink).

Implementare DRY (E2 PRD 5.15): configuratia temelor traieste intr-o singura structura JS var THEMES = [...] (sursa de adevar), din care se DERIVA CYCLE/VALID/ICONS/LABELS/NEXT. Adaugarea unei teme noi = O singura intrare in THEMES.

Default la prima vizita = Auto (OS-aware), ca inainte.

Componente — note de aplicare

• Pill-uri de stare/filtru: rotunjite (border-radius:99px), ca badge-ul „ROA" de pe romfast.ro. Pill activ = fundal accent discret (color-mix(in srgb, var(--accent) ...)), text pe accent. Categoriile de problema isi pastreaza registrul: Date incomplete/Eroare = --err, Lipsa cod = --warn.
• Butoane primare: fundal --accent, text alb (neschimbat ca structura, doar culoarea noua).
• Linkuri / sugestii: --accent.
• Focus: outline:2px solid var(--accent) (deja folosit pe randuri).
• Suprafete de stare (banner, flash, eroare-3n): raman pe color-mix peste --err/--warn/--ok, deci se adapteaza automat la noua paleta si la light/dark.

Componente slim (PRD 5.15 US-002)

Adaugate in base.html (sectiunea SENTINEL-COMPONENTE-SLIM). Toate culorile exclusiv prin var(--token) — zero hex hardcodat. Consumate de US-003 (dashboard), US-004 (lista), US-007 (formular).

.contor-card

Card cifra-contor compact: fundal --card2, bordura --line, border-radius:8px, padding 10-12px.

<div class="contor-card">
  <div class="contor-cifra s-ok">847</div>  <!-- variante de culoare prin .s-ok/.s-err/.s-queued -->
  <div class="contor-label">Trimise (total)</div>
  <div class="contor-sub">luna 124 · azi 9</div>  <!-- optional: sub-linie mono -->
</div>

Sub-elemente:

• .contor-cifra — font-size:22px; font-weight:700; culoare prin .s-* existente
• .contor-label — font-size:11px; color:var(--muted)
• .contor-sub — IBM Plex Mono, font-size:10px; color:var(--muted)

.lista-trimiteri-slim + .trimitere-slim

Lista compacta cu separator --line2. Randul este clickabil (rol button), tinta min-height:44px.

<ul class="lista-trimiteri-slim">
  <li class="trimitere-slim" role="button" tabindex="0">
    <div>
      <div class="slim-vin">WBA8E9...K7F2</div>
      <div class="slim-meta">Inspectie tehnica · 09:42</div>
    </div>
    <span class="pill s-sent">Trimis</span>
  </li>
</ul>

Sub-elemente:

• .slim-vin — IBM Plex Mono, font-size:13px; font-weight:500; color:var(--ink)
• .slim-meta — font-size:11px; color:var(--muted) (operatie + ora)

.camp-slim + macro camp(slim=True)

Varianta compacta de camp formular: label 11px muted deasupra, input height:30px, fundal --card2. Integrata in macro-ul camp din _macros.html prin flagul slim=False (default — randarea actuala ramane neschimbata).

{{ camp('vin', 'VIN (serie sasiu)', vin, slim=True) }}

Pentru campuri mono (VIN, odometru, nr. inmatriculare): adauga clasa camp-mono pe input (via style="" sau atribut class="" direct — macro-ul nu il pune automat, consumatorul decide).

.chips + .chip + .chip-del

Prestatii multi-select: container .chips (fundal --card2), item .chip (accent 18%, IBM Plex Mono 11px), buton de stergere .chip-del (accesibil cu aria-label).

<div class="chips" role="group" aria-label="Prestatii selectate">
  <span class="chip">
    <button class="chip-del" aria-label="Sterge codul REV2" type="button">&times;</button>
    REV2
  </span>
  <span class="chip chip-warn">   <!-- varianta warn pentru R-ODO/I-ODO -->
    <button class="chip-del" aria-label="Sterge codul R-ODO" type="button">&times;</button>
    R-ODO
  </span>
</div>

Clase aditionale:

• .chip-warn — fundal --warn 22% (pentru coduri R-ODO/I-ODO care cer odometruInitial)

.add-code + .op-row (picker E4)

Buton dashed pentru adaugare cod (.add-code) si randul operatie<->cod (.op-row, .op-row-name, .op-row-warn). Folosite de picker-ul E4 din US-007 (formular editare).

<div class="op-row">
  <span class="op-row-name">REVIZIE PERIODICA</span>
  <span class="chip">REV2 <button class="chip-del" ...>&times;</button></span>
  <button class="add-code" type="button">+ alt cod</button>
</div>
<div class="op-row op-row-warn">   <!-- bordura warn: lipsa cod -->
  <span class="op-row-name">SCHIMBARE PLACUTE FRANA</span>
  <button class="add-code" type="button">alege cod RAR</button>
</div>

Ce NU schimbam

• Mecanismul light/dark existent (anti-FOUC, persistenta localStorage, comutator) — il pastram, doar reimprospatam variabilele.
• Nu introducem rosu ca accent de UI (conflict cu eroare).
• Nu folosim PNG-ul logo cu efect 3D in interfata (wordmark redat ca text). REVIZUIT (decizie user 2026-06-25): logo-ul PNG real e folosit in header (US-012b). Fundal transparent + culori proprii il fac lizibil pe toate temele; nu aplicam filtre.
• Nu adaugam un al doilea accent — sistemul ramane monocrom-accent + neutre.

Legatura cu implementarea (PRD 5.10)

US-012 (header „by ROMFAST" + titlu centrat) si US-013 (paleta) din docs/prd/prd-5.10-ux-filtre-pill-paginare-mapari-meniu.md implementeaza acest sistem. Valorile de mai sus sunt sursa pentru variabilele din base.html.