/* ========================================================================== MNS HRIS — Design Tokens (Single Source of Truth) -------------------------------------------------------------------------- Promijeni vrijednost OVDJE — vidiš efekat svuda u app-u. Tokeni su definisani na :root da svaki element u DOM-u može da ih čita. Stari templates (sa Bootstrap klasama) automatski dobijaju novi izgled preko bootstrap-overrides.css koji mapira ove tokene na --bs-* varijable. Per-tenant theming: dodaj klasu na (npr. body.tenant-mazars). Tenant override-uje samo brand boje, ostalo nasljeđuje. ========================================================================== */ :root { /* ======================================================================== 1. BRAND BOJE (default = MNS plava) ======================================================================== */ --hr-primary: #165076; --hr-primary-dark: #0d3a59; --hr-primary-soft: #EAF2F8; --hr-primary-softer: #F0F7FB; --hr-primary-rgb: 22, 80, 118; /* Accent (sekundarna) — za "AI" gradijent i highlights */ --hr-accent-1: #667eea; --hr-accent-2: #764ba2; /* ======================================================================== 2. NEUTRALNE BOJE ======================================================================== */ --hr-text: #1A2B3C; --hr-text-muted: #5A6B7C; --hr-text-dim: #9AA8B5; --hr-border: #E5EAF0; --hr-border-soft: #F0F4F8; --hr-bg: #F5F7FA; --hr-bg-soft: #F8FAFC; --hr-bg-hover: #FAFCFE; --hr-white: #FFFFFF; /* Zebra row colors — vidljiva ali suptilna razlika, NIKAD pure white */ --hr-row-1: #F4F7FA; /* odd row — svjetlija nijansa */ --hr-row-2: #EAEFF5; /* even row — malo tamnija (Bojan: "da se lakše uoči razlika") */ /* ======================================================================== 3. STATUS BOJE (bg + fg + dot triple) ======================================================================== */ --hr-status-active-bg: #E8F5E9; --hr-status-active-fg: #1B5E20; --hr-status-active-dot: #2E7D32; --hr-status-leave-bg: #FFF8E1; --hr-status-leave-fg: #7B5A00; --hr-status-leave-dot: #F57F17; --hr-status-trial-bg: #E3F2FD; --hr-status-trial-fg: #0D47A1; --hr-status-trial-dot: #1976D2; --hr-status-inactive-bg: #FFEBEE; --hr-status-inactive-fg: #B71C1C; --hr-status-inactive-dot:#C62828; --hr-status-info-bg: #E0F2FE; --hr-status-info-fg: #0C4A6E; --hr-status-info-dot: #0EA5E9; --hr-status-purple-bg: #F3E8FF; --hr-status-purple-fg: #6B21A8; --hr-status-purple-dot: #9333EA; /* ======================================================================== 4. TIPOGRAFIJA Inter = najsavremeniji UI font (HiBob, Linear, Vercel ga koriste). Roboto fallback dok se Inter ne učita preko Google Fonts. ======================================================================== */ --hr-font: 'Inter', 'Roboto', -apple-system, BlinkMacSystemFont, "Segoe UI", system-ui, sans-serif; --hr-font-mono: 'JetBrains Mono', 'SF Mono', Menlo, Consolas, monospace; /* Base font ladder */ --hr-font-size-xs: 11px; --hr-font-size-sm: 12px; --hr-font-size: 14px; --hr-font-size-lg: 16px; --hr-font-size-xl: 20px; --hr-font-size-2xl: 24px; --hr-font-size-3xl: 32px; --hr-font-size-4xl: 40px; /* Heading skala (mapirano na H1-H6 u bootstrap-overrides.css) */ --hr-h1-size: 32px; --hr-h1-weight: 700; --hr-h1-ls: -0.02em; --hr-h2-size: 24px; --hr-h2-weight: 700; --hr-h2-ls: -0.015em; --hr-h3-size: 20px; --hr-h3-weight: 600; --hr-h3-ls: -0.01em; --hr-h4-size: 16px; --hr-h4-weight: 600; --hr-h4-ls: normal; --hr-h5-size: 14px; --hr-h5-weight: 600; --hr-h5-ls: normal; --hr-h6-size: 12px; --hr-h6-weight: 600; --hr-h6-ls: 0.04em; /* Line height ladder */ --hr-leading-tight: 1.2; --hr-leading-snug: 1.35; --hr-leading-normal: 1.5; --hr-leading-relaxed: 1.65; /* ======================================================================== 5. SPACING (4px scale) ======================================================================== */ --hr-space-1: 4px; --hr-space-2: 8px; --hr-space-3: 12px; --hr-space-4: 16px; --hr-space-5: 24px; --hr-space-6: 32px; --hr-space-7: 48px; --hr-space-8: 64px; /* ======================================================================== 6. RADII ======================================================================== */ --hr-radius-sm: 6px; --hr-radius: 10px; --hr-radius-lg: 14px; --hr-radius-xl: 20px; --hr-radius-pill: 999px; /* ======================================================================== 7. SHADOWS (layered, suptilne) ======================================================================== */ --hr-shadow-xs: 0 1px 2px rgba(15, 23, 42, .04); --hr-shadow-sm: 0 2px 4px rgba(15, 23, 42, .05), 0 1px 2px rgba(15, 23, 42, .04); --hr-shadow: 0 4px 12px rgba(15, 23, 42, .07), 0 2px 4px rgba(15, 23, 42, .04); --hr-shadow-lg: 0 12px 32px rgba(15, 23, 42, .10), 0 4px 8px rgba(15, 23, 42, .06); --hr-shadow-xl: 0 24px 56px rgba(15, 23, 42, .16); /* Focus ring — markantan, accesibility-friendly */ --hr-ring: 0 0 0 3px rgba(var(--hr-primary-rgb), 0.20); --hr-ring-soft: 0 0 0 3px rgba(var(--hr-primary-rgb), 0.12); /* ======================================================================== 8. IKONICE — centralizovana kontrola veličine ======================================================================== */ --hr-icon-size-xs: 14px; --hr-icon-size-sm: 16px; --hr-icon-size: 20px; --hr-icon-size-lg: 24px; --hr-icon-size-xl: 32px; /* ======================================================================== 9. TRANSITIONS ======================================================================== */ --hr-transition-fast: 100ms ease; --hr-transition: 150ms ease; --hr-transition-slow: 300ms ease; /* Spring-like za drawer/modal — daje "product polish" feel */ --hr-transition-spring: 280ms cubic-bezier(0.4, 0.0, 0.2, 1); /* ======================================================================== 10. Z-INDEX SKALA ======================================================================== */ --hr-z-sidebar: 1020; --hr-z-topbar: 1030; --hr-z-dropdown: 1040; --hr-z-modal: 1050; --hr-z-tooltip: 1070; --hr-z-toast: 1080; /* ======================================================================== 11. PRODUCT POLISH — sitnice koje odvajaju SaaS od internal tool-a ======================================================================== */ --hr-page-max-width: 1440px; /* content max-width na big screens */ --hr-page-padding: 24px; /* page padding */ --hr-card-padding: 20px; /* default card padding */ --hr-scrollbar-thumb: rgba(15, 23, 42, .20); --hr-scrollbar-track: transparent; --hr-selection-bg: rgba(var(--hr-primary-rgb), 0.20); --hr-selection-fg: var(--hr-text); } /* ========================================================================== PER-TENANT BRAND OVERRIDES -------------------------------------------------------------------------- Koristi .tenant-* na bilo kojem ancestoru (preferirano body kroz context_processor — vidi MNS_HRIS/settings/base.py TEMPLATES, ili ručno dodaj klasu na
u template-ima). ŠTA SE MOŽE OVERRIDE-OVATI PO TENANTU: - Brand boje (--hr-primary*, --hr-accent-*) - Font familija (--hr-font, --hr-font-mono) - Border radius (--hr-radius*) — npr. flat brand vs rounded - Heading weight-ovi (--hr-h1-weight itd.) - Bilo koji drugi token DODAVANJE NOVOG TENANTA: 1. Dodaj .tenant-novi { --hr-primary: ...; --hr-font: '...'; } 2. Dodaj Google Fonts link u base.html za novi font (ako nije Inter/Roboto) 3. Postavi tenant klasu na body preko context_processor-a ========================================================================== */ .tenant-mns { /* MNS — korporativna plava, Inter font */ --hr-primary: #165076; --hr-primary-dark: #0d3a59; --hr-primary-soft: #EAF2F8; --hr-primary-softer: #F0F7FB; --hr-primary-rgb: 22, 80, 118; --hr-font: 'Inter', 'Roboto', sans-serif; } .tenant-mazars { /* Mazars — korporativna zelena, IBM Plex Sans (lijep dorada Plex) */ --hr-primary: #006547; --hr-primary-dark: #004c34; --hr-primary-soft: #E6F2EE; --hr-primary-softer: #F0F8F4; --hr-primary-rgb: 0, 101, 71; --hr-font: 'IBM Plex Sans', 'Inter', sans-serif; } .tenant-demo { /* Demo — moderna ljubičasta, Plus Jakarta Sans (geometrijski moderan font) */ --hr-primary: #7C3AED; --hr-primary-dark: #5B21B6; --hr-primary-soft: #F3E8FF; --hr-primary-softer: #FAF5FF; --hr-primary-rgb: 124, 58, 237; --hr-font: 'Plus Jakarta Sans', 'Inter', sans-serif; /* Demo dobija i veći radius — flat softer izgled */ --hr-radius: 14px; --hr-radius-lg: 20px; --hr-radius-xl: 24px; } .tenant-ember { /* Ember — topla korporativna crvena, Inter font */ --hr-primary: #B91C1C; --hr-primary-dark: #7F1414; --hr-primary-soft: #FDECEC; --hr-primary-softer: #FEF5F5; --hr-primary-rgb: 185, 28, 28; --hr-font: 'Inter', 'Roboto', sans-serif; } /* ========================================================================== NAPOMENA: tokens.css NAMERNO ne dira , ::selection, scrollbar ili :focus-visible globalno. To pripada starim Bootstrap-only template-ima koji nisu dizajnirani za "modern" override-e — i razbijali su izgled. Polish kao font-family/scrollbar primjenjuje se SAMO unutar .hr-redesign scope-a (vidi design-system.css). Tokeni su dostupni svuda; primjena zavisi od opt-in wrapper-a. ========================================================================== */ /* Reduced motion respect (sigurno globalno — accessibility) */ @media (prefers-reduced-motion: reduce) { *, *::before, *::after { animation-duration: 0.01ms !important; animation-iteration-count: 1 !important; transition-duration: 0.01ms !important; scroll-behavior: auto !important; } }