/* * COPIE. Originalul e `public/css/tokens.css`, al portalului vechi. * * De pe 14 septembrie 2026 v4 nu mai ia NIMIC de la portalul CodeIgniter la * rulare: foile, fonturile, imaginile si pluginurile stau in `v4/web/public/` * si se servesc de sub `base`-ul aplicatiei (vezi `vite.config.ts`, PORTAL_STYLES). * Regulile de stil sunt neschimbate; in `app.css` caile `url(/public/...)` au * devenit relative la foaie (`url(../fonts/...)`, `url(../images/...)`). * Pana cand portalul vechi dispare, cele doua copii se tin la fel. */ /* * ============================================================================= * tokens.css - culorile, spatiile si umbrele portalului, scrise o singura data * ============================================================================= * * DE CE EXISTA * ----------------------------------------------------------------------------- * * `resources/sass/_variables.scss` defineste 88 de variabile si e sistemul * adevarat. Machetele il ocolesc: 520 de coduri hexa scrise direct in view-uri, * 199 in JS, peste 7.166 de `style=""`. Cel putin cinci griuri diferite si * patru rosuri care ar trebui sa fie acelasi rosu. * * Cauza nu e neglijenta. Lantul de build (`npm run dev`) nu se poate rula in * orice sesiune - `node_modules/` e gol si instalarea e grea - deci orice * ajustare mica de stil ajunge, rational, intr-un `style=""` sau intr-un fisier * CSS de pagina. Sistemul din SASS e de neatins tocmai cand ai nevoie de el. * * Fisierul asta e scris de mana si commit-uit. Se incarca in antetul comun, * inaintea foilor de pagina, si se citeste din orice fisier CSS fara build: * * .ceva { color: var(--od-ink-soft); } * * Asa ajustarea rapida foloseste tokenul in loc sa inventeze o culoare, iar * sistemul se aduna in loc sa se imprastie. * * ----------------------------------------------------------------------------- * CULORILE DE AICI TREC PRAGUL DE CONTRAST * ----------------------------------------------------------------------------- * * Fiecare valoare are langa ea raportul de contrast pe fundal alb, calculat cu * formula WCAG 2.1. Pragul pentru text normal e 4,5:1. Griurile vechi din * machete (#b3b3b3 la 2,10:1, #98a1aa la 2,62:1, #8a94a0 la 3,08:1) nu-l * treceau nici pe departe - de-aia nu se regasesc aici. Cand atingi un ecran * care le foloseste, inlocuieste-le cu `--od-ink-soft` sau `--od-ink-faint`. * * Culoarea unui MODUL ramane identitatea lui si nu se schimba aici. Ce s-a * corectat - in `od_ux.css`, nu in fisierul asta - sunt doar suprafetele pe * care sta text alb peste ea. */ :root { /* --------------------------------------------------------------------- TEXT --------------------------------------------------------------------- */ --od-ink: #1f2933; /* 13,3:1 - text obisnuit */ --od-ink-soft: #5b6672; /* 5,8:1 - text secundar, etichete */ --od-ink-faint: #6b7480; /* 4,7:1 - cel mai deschis inca lizibil */ --od-ink-on-color: #ffffff; /* text peste culoarea unui modul */ /* --------------------------------------------------------------------- SUPRAFETE SI LINII --------------------------------------------------------------------- */ --od-ground: #f4f6f8; /* fundalul paginii */ --od-surface: #ffffff; /* cartonase, panouri, randuri de tabel */ --od-surface-alt: #f7f9fa; /* randul alternativ, zona de unelte */ --od-rule: #d9dee4; /* linie vizibila */ --od-rule-soft: #e8ecef; /* linie de despartire discreta */ /* --------------------------------------------------------------------- STARI --------------------------------------------------------------------- */ --od-ok: #008300; /* 4,95:1 - a mers, e la zi, autorizat */ --od-ok-bg: #e4f2e4; --od-warn: #9e6b00; /* 4,61:1 - cere atentie, nu e o cadere */ --od-warn-bg: #fbf1dc; --od-crit: #b42318; /* 6,57:1 - a cazut, neautorizat, expirat */ --od-crit-bg: #fbe6e4; --od-info: #1f62cb; /* 5,4:1 - o lamurire, nu o stare */ --od-info-bg: #e6edfa; /* Culorile vechi de stare si de ce nu se mai folosesc: #36c321 (2,34:1) verde prea deschis, pica pragul #e34c4c (3,89:1) rosu prea deschis, pica pragul #f35958 (3,29:1) al doilea rosu, acelasi inteles #eda100 (2,17:1) galben, cel mai prost dintre toate */ /* --------------------------------------------------------------------- IDENTITATEA MODULELOR --------------------------------------------------------------------- Aceleasi valori ca in `_variables.scss`: astea sunt marca fiecarui modul si raman neatinse. Pentru suprafetele cu text alb peste ele exista perechea `-deep`, care trece pragul de contrast pastrand aceeasi nuanta. --------------------------------------------------------------------- */ --od-inventoree: #b16131; /* 4,54:1 - trece asa cum e */ --od-inventoree-deep: #b16131; --od-easeedesk: #32777e; /* 5,15:1 */ --od-easeedesk-deep: #32777e; --od-proactivitee: #d83430; /* 4,72:1 */ --od-proactivitee-deep: #d83430; --od-protectee: #534f8b; /* 7,35:1 */ --od-protectee-deep: #534f8b; --od-softsee: #52bbb6; /* 2,30:1 - identitate */ --od-softsee-deep: #33807d; /* 4,64:1 - sub text alb */ --od-productivitee: #d98c31; /* 2,71:1 - identitate ($productivitee) */ --od-productivitee-deep:#a06a1f; /* 4,59:1 - sub text alb */ --od-opteemum: #1fa67a; /* 3,09:1 */ --od-opteemum-deep: #198461; /* 4,65:1 */ --od-overview: #797979; /* 4,35:1 */ --od-overview-deep: #757575; /* 4,61:1 */ --od-securitee: #4e7cb5; /* 4,31:1 */ --od-securitee-deep: #4a77b0; /* 4,61:1 */ /* --------------------------------------------------------------------- SPATII --------------------------------------------------------------------- Scara e 4px. Nu fiindca 4 ar fi sfant, ci ca doua ecrane facute in saptamani diferite sa nu aiba 13px si 15px pentru acelasi lucru. --------------------------------------------------------------------- */ --od-space-1: 4px; --od-space-2: 8px; --od-space-3: 12px; --od-space-4: 16px; --od-space-5: 24px; --od-space-6: 32px; --od-space-7: 48px; /* --------------------------------------------------------------------- TIPOGRAFIE --------------------------------------------------------------------- Doua familii si o scara, scrise o data. Pana acum machetele cereau fontul pe nume - 'Open Sans' scris de mana in zeci de reguli, iar unde nu era scris cadea pe ce nimerea browserul. Cu tokenul, o schimbare de font e o schimbare intr-un rand, si o zona care vrea alt font si-l suprascrie la ea (vezi `settings_console.css`). Serif-ul e pentru UN rand pe ecran - titlul care numeste pagina. Doua titluri serif pe acelasi ecran nu mai sunt o semnatura, sunt un stil. Scara are sapte trepte si se opreste acolo dinadins: fiecare treapta in plus e o alta ocazie ca doua ecrane sa aiba 15px si 16px pentru acelasi lucru. --------------------------------------------------------------------- */ --od-font: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Open Sans", "Helvetica Neue", sans-serif; --od-font-display: "Source Serif 4", "Source Serif Pro", Georgia, "Times New Roman", serif; --od-text-display: 26px; /* titlul paginii, serif */ --od-text-metric: 30px; /* cifra mare dintr-un card */ --od-text-lg: 16px; /* titlu de sectiune, nume de card */ --od-text-md: 14px; /* corpul, butoanele, etichetele de camp */ --od-text-sm: 13px; /* text secundar sub o cifra */ --od-text-xs: 12px; /* pastile, tag-uri, ajutorul de sub camp */ --od-text-2xs: 11px; /* eticheta de grup, cu majuscule si spatiere */ --od-weight-normal: 400; --od-weight-medium: 500; --od-weight-semibold: 600; --od-weight-bold: 700; /* --------------------------------------------------------------------- RESTUL --------------------------------------------------------------------- */ --od-radius: 3px; --od-radius-lg: 6px; --od-shadow: 0 1px 2px rgba(31, 41, 51, .08); --od-shadow-lg: 0 2px 4px rgba(31, 41, 51, .08), 0 8px 24px -12px rgba(31, 41, 51, .25); --od-font-mono: "IBM Plex Mono", "SFMono-Regular", Consolas, "Liberation Mono", Menlo, monospace; }