/** * EventPixel design tokens — jediný zdroj pravdy pre farby, typografiu, spacing, radius, tiene * a motion naprieč všetkými tromi povrchmi appky (verejný web, portál, admin). * * Súbor je ADITÍVNY: existujúce assets/css/style.css, assets/css/portal.css a * admin/assets/admin.css sa touto zmenou NEUPRAVUJÚ a žiadna dnešná obrazovka ho zatiaľ * nenačítava. Migrácia jednotlivých obrazoviek na tieto tokeny je FÁZA 2.6 (po schválení), * nie súčasť tohto commitu — pozri docs/UI-INVENTORY.md pre stav pred zjednotením. * * Paleta nadväzuje na existujúcu (Pantone Mocha Mousse 17-1230 / Cloud Dancer 11-4201) — * tento súbor ju nemení, len ju robí kompletnou (dopĺňa dark mode a chýbajúce škály) a * zdokumentovanou na jednom mieste namiesto rozkopírovanej v troch CSS súboroch. * * Kontrast každej farebnej dvojice text/pozadie je overený nižšie v komentároch * (WCAG 2.1 relatívna luminancia, vzorec podľa §1.4.3). "AA-text" = ≥4.5:1 (bežný text), * "AA-large/UI" = ≥3:1 (veľký text ≥24px/18.66px bold, alebo hranice UI prvkov). */ /* Google Fonts sa načítavajú v cez inc/fonts_head.php (nie @import — PageSpeed render-blocking reťaz). */ :root { /* ============================================================ FARBY — LIGHT (predvolené) ============================================================ */ /* Neutrály */ --color-ink: #14120f; /* najtmavší neutrál — tmavé sekcie, dark-mode pozadie */ --color-ink-2: #1d1a15; /* o odtieň svetlejší tmavý neutrál — dark-mode "surface" */ --color-line-dark: #37322a; /* deliaca čiara na tmavom podklade */ --color-paper: #f0eee9; /* predvolené pozadie stránky (Cloud Dancer) */ --color-paper-2: #e6e0d6; /* mierne odlíšené pozadie (karty, hlavičky tabuliek) */ --color-line: #dcd4c6; /* deliaca čiara na svetlom podklade — text/paper = 1.27:1, len dekoratívne, NIE pre hranice interaktívnych prvkov */ --color-line-2: #c9bfa9; /* výraznejšia deliaca čiara/border inputu — 1.57:1, tiež len dekoratívne */ --color-text: #17140f; /* primárny text na paper — 15.84:1 AA-text */ --color-text-muted: #5c5646; /* sekundárny text na paper — 6.30:1 AA-text */ --color-faint: #8f8672; /* najslabší text (placeholder-level), NEPOUŽÍVAŤ pre čitateľný obsah */ --color-surface: #ffffff; /* biele karty na papierovom pozadí — text/surface = 18.37:1 AA-text */ /* Značka */ --color-accent: #a47764; /* Mocha Mousse — na paper = 3.35:1 (AA-large/UI, NIE pre malý text) */ --color-accent-2: #7a5644; /* tmavší accent pre malý text/odkazy na paper — 5.59:1 AA-text */ --color-accent-warm: #e3a468; /* teplý accent pre TMAVÉ podklady — pozri dark mode nižšie */ --color-accent-ink: #1a1208; /* text/ikona NA accent ploche (chip, primary button) — na accent = 4.76:1 AA-text (opravené z pôvodných 4.21:1, ktoré nesplnili AA pre bežný text — Lighthouse color-contrast audit) */ /* Sémantické — na paper, len ako TEXT/ikona, nie ako veľká plocha s bielym textom */ --color-success: #2f7a4d; /* na paper = 4.51:1 AA-text */ --color-danger: #c0392b; /* na paper = 4.69:1 AA-text */ --color-warning: #8a6a1f; /* na paper = 4.35:1 — AA-large/UI len! Pre malý bežný text použi --color-warning-text */ --color-warning-text: #6b5218; /* tmavší warning pre malý text (>4.5:1), --color-warning ostáva pre ikony/bordery/veľký text */ --color-info: #2f5f8a; /* na paper = 5.80:1 AA-text */ /* Sémantické pozadia (pre banner/alert plochy — text na nich vždy cez --color-*-text alebo --color-ink) */ --color-success-bg: #dcefe2; --color-danger-bg: #fbe0da; --color-warning-bg: #f7e6c4; --color-info-bg: #e2ecf5; /* ============================================================ TYPOGRAFIA — max 5 veľkostí (predtým 27 rôznych font-size hodnôt, pozri UI-INVENTORY §11) ============================================================ */ --font-body: 'Work Sans', ui-sans-serif, system-ui, sans-serif; --font-display: 'Archivo', ui-sans-serif, system-ui, sans-serif; --text-xs: 12px; --leading-xs: 1.4; /* meta, štítky, captions */ --text-sm: 14px; --leading-sm: 1.5; /* sekundárny text, popisky formulárov, tabuľky */ --text-base: 16px; --leading-base: 1.6; /* predvolený text tela */ --text-lg: 20px; --leading-lg: 1.3; /* nadpisy kariet, sekcií (H3/H4) */ --text-xl: 28px; --leading-xl: 1.15; /* nadpis stránky, hero číslo (H1/H2) */ --font-weight-regular: 400; --font-weight-medium: 500; --font-weight-semibold: 600; --font-weight-bold: 700; --font-weight-display: 800; /* len pre --font-display nadpisy */ /* ============================================================ SPACING — 4/8px systém ============================================================ */ --space-1: 4px; --space-2: 8px; --space-3: 12px; --space-4: 16px; --space-5: 24px; --space-6: 32px; --space-7: 48px; --space-8: 64px; /* ============================================================ RADIUS, TIENE, HRANICE — konsolidované zo 14 reálne používaných hodnôt (6/7/8/9/10/12/20/99/100px) ============================================================ */ --radius-sm: 6px; /* malé prvky — badge, input, tag */ --radius-md: 8px; /* predvolené — button, card, panel (pokrýva pôvodné 7/8/9px) */ --radius-lg: 12px; /* veľké panely, modály */ --radius-full: 999px; /* pill tvar — badge, avatar, kruhové tlačidlo */ --border-width: 1.5px; --shadow-sm: 0 1px 2px rgba(20, 18, 15, .05); --shadow-md: 0 1px 2px rgba(20, 18, 15, .05), 0 14px 30px rgba(20, 18, 15, .08); --shadow-lg: 0 4px 8px rgba(20, 18, 15, .06), 0 24px 48px rgba(20, 18, 15, .14); /* ============================================================ MOTION — konsolidované z nameraných .15s–.55s hodnôt ============================================================ */ --duration-fast: 120ms; /* hover/focus zmena farby, border */ --duration-base: 200ms; /* toggle, dropdown, badge */ --duration-slow: 320ms; /* modál/panel vstup, veľké layout zmeny */ --ease-standard: cubic-bezier(.4, 0, .2, 1); /* predvolený, symetrický */ --ease-decelerate: cubic-bezier(.16, 1, .3, 1); /* vstup na scénu (reveal, modál otvorenie) */ --ease-accelerate: cubic-bezier(.4, 0, 1, 1); /* odchod zo scény (modál zatvorenie) */ /* ============================================================ LAYOUT ============================================================ */ --sidebar-width: 264px; --touch-target-min: 44px; /* WCAG 2.5.5 — min. veľkosť dotykového cieľa */ } /* ============================================================ FARBY — DARK (system preferencia, žiadny explicitný výber) Rovnaký princíp ako doterajšie "tmavé sekcie" verejného webu (--ink/--paper-text) — dark mode len formalizuje niečo, čo appka čiastočne už mala, ako plnohodnotnú tému, nie dodatok. ============================================================ */ @media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) { --color-paper: #14120f; /* = pôvodné --ink, teraz ako "pozadie stránky" v dark mode */ --color-paper-2: #1d1a15; /* = pôvodné --ink-2 */ --color-surface: #221f19; /* mierne nadvihnutá karta nad pozadím */ --color-line: #37322a; /* = pôvodné --line-dark */ --color-line-2: #4a4437; --color-text: #f0eee9; /* = pôvodné --paper-text — na paper(dark) = 16.13:1 AA-text */ --color-text-muted: #b6ac96; /* = pôvodné --paper-text-muted — 8.31:1 AA-text */ --color-faint: #6f6754; --color-accent: #e3a468; /* = pôvodné --accent-warm, navrhnuté presne pre tmavé podklady — 8.70:1 AA-text */ --color-accent-2: #e3a468; --color-accent-warm: #a47764; /* prehodené — svetlý mód accent funguje ako "tlmený" accent na tmavom */ --color-accent-ink: #1a1208; /* text NA --color-accent ploche — 8.62:1 AA-text */ --color-success: #4caf7d; /* na dark paper = 6.89:1 AA-text */ --color-danger: #e6584a; /* na dark paper = 5.22:1 AA-text */ --color-warning: #d9a441; /* na dark paper = 8.31:1 AA-text (v dark mode stačí jeden warning token, --color-warning-text nie je potrebný) */ --color-warning-text: #d9a441; --color-info: #6fa3d8; /* na dark paper = 7.04:1 AA-text */ --color-success-bg: rgba(76, 175, 125, .16); --color-danger-bg: rgba(230, 88, 74, .16); --color-warning-bg: rgba(217, 164, 65, .16); --color-info-bg: rgba(111, 163, 216, .16); --shadow-sm: 0 1px 2px rgba(0, 0, 0, .3); --shadow-md: 0 1px 2px rgba(0, 0, 0, .3), 0 14px 30px rgba(0, 0, 0, .45); --shadow-lg: 0 4px 8px rgba(0, 0, 0, .35), 0 24px 48px rgba(0, 0, 0, .55); } } /* Explicitný výber tmavého motívu (napr. prepínač v UI) — víťazí nad OS preferenciou v OBOCH smeroch. */ :root[data-theme="dark"] { --color-paper: #14120f; --color-paper-2: #1d1a15; --color-surface: #221f19; --color-line: #37322a; --color-line-2: #4a4437; --color-text: #f0eee9; --color-text-muted: #b6ac96; --color-faint: #6f6754; --color-accent: #e3a468; --color-accent-2: #e3a468; --color-accent-warm: #a47764; --color-accent-ink: #1a1208; --color-success: #4caf7d; --color-danger: #e6584a; --color-warning: #d9a441; --color-warning-text: #d9a441; --color-info: #6fa3d8; --color-success-bg: rgba(76, 175, 125, .16); --color-danger-bg: rgba(230, 88, 74, .16); --color-warning-bg: rgba(217, 164, 65, .16); --color-info-bg: rgba(111, 163, 216, .16); --shadow-sm: 0 1px 2px rgba(0, 0, 0, .3); --shadow-md: 0 1px 2px rgba(0, 0, 0, .3), 0 14px 30px rgba(0, 0, 0, .45); --shadow-lg: 0 4px 8px rgba(0, 0, 0, .35), 0 24px 48px rgba(0, 0, 0, .55); } /* Explicitný výber svetlého motívu — víťazí nad OS "dark" preferenciou (rieši @media blok vyššie svojou :not([data-theme="light"]) podmienkou). */