/* ======================================================================== FVE Dashboard — 4-axis theming tokens. Phase 8 + Designer alignment (2026-05-28). 4 nezávislé osy ovládané přes data-* atributy na : data-theme = midnight | daylight | solar | aurora | contrast | slate data-shape = sharp | standard | soft data-density = compact | normal | comfortable data-layout = standard | hero | compact | executive POZN: Tento soubor se nacita POSLEDNI (dashboard.css, layout.css, plant_selector.css, widgets.css, THEN themes.css) — viz base.html. Diky tomu legacy-bridge ;mapuje stara jmena (--bg-0/1/2/3, --primary, --plant-pp atd.) na semanticka (--bg-page, --bg-widget, --accent, --pp). ─── PREFEROVANE NAMING (Designer alignment) ──────────────────────────── Backgroundy: --bg-page, --bg-panel, --bg-widget, --bg-widget-hover Borders: --border, --border-strong Text: --text, --text-muted, --text-dim Brand: --accent (= --primary), --accent-bg, --accent-text Semantic: --success, --danger Plants: --pp (fialova), --ag (zelena), --ns (modra) — fixni napric tematy ─── LEGACY ALIASES (zacny pouzivat nove, stare zustanou funkcni) ────── --bg-0 = --bg-page, --bg-1 = --bg-panel, --bg-2 = --bg-widget, --bg-3 = --bg-widget-hover, --line = --border, --line-2 = --border-strong, --text-2 = --text-muted, --text-3 = --text-dim, --primary = --accent, --plant-pp/ag/ns = --pp/ag/ns, --amber = --pp, --cyan = --ns, --green/-2 = --success, --red = --danger. ======================================================================== */ :root { /* DEFAULTY (theme=midnight, shape=standard, density=normal) */ --bg-page: #0a0d1a; --bg-panel: #11142a; --bg-widget: #161a32; --bg-widget-hover: #20254a; /* FinDash demo --bg-hover (lehky posun do fialova) */ --bg-sidebar: #0d1024; /* FinDash demo exact (mezi page a panel, lehce do fialova) */ /* Account/elevated karta — DEFAULT color-mix (widget↔hover). Je tu v :root PRED [data-theme] bloky, takze midnight #1a1f3a / daylight #f9fafc (nize) ho prebiji (stejna specificita 0,1,0, ale pozdejsi zdroj vyhrava). Ostatni temata = mix. */ --bg-card-2: color-mix(in srgb, var(--bg-widget) 60%, var(--bg-widget-hover)); --border: rgba(255,255,255,0.07); --border-strong: rgba(255,255,255,0.12); --text: #e9ebf7; /* FinDash demo --fg */ --text-muted: #8b90b8; /* FinDash demo --fg-3 (fialovo-seda — pouziva se i pro nav-item text) */ --text-dim: #7e85b0; /* FinDash demo --fg-4 */ /* Accent — FinDash AI Designer EXACT 2026-05-28 (drive #4f7eff blue; vraceno na demo purple #7c5cff aby gradient + glow matchnul). */ --accent: #7c5cff; --accent-bg: rgba(124, 92, 255, 0.15); --accent-glow: rgba(124, 92, 255, 0.35); --accent-grad: linear-gradient(135deg, #8b6dff 0%, #5b3bff 100%); --accent-text: #ffffff; /* Textovy accent odkaz — svetlejsi fialova (5.95:1 na tmavem). --accent #7c5cff = 3.93:1, pod AA pro maly text → na odkazy pouzij --accent-link, tlacitka/velke prvky nech na --accent. (--accent-text je BILY text NA accent pozadi, jiny ucel — nesahat.) */ --accent-link: #9b87ff; --danger: #ef4444; --success: #4ade80; /* Plant colors — FIXNI napric tematy. Sjednoceno s Claude Designer mockupem (2026-05-28): PP=orange, AG=purple, NS=cyan. Paleta navrzena tak aby: - kazda byla jasne odlisitelna od ostatnich - sladena s ostatnimi semantickymi barvami (green=success, blue=accent, red=danger) — bez kolize - skalovala na ~30 FVE (slot 1-12 definovan, dalsi auto-assign). */ /* User-zvolena paleta (2026-06-14) odvozena z Claude Designer predlohy (FinDash demo): PP fialova, AG zelena, NS modra, DV oranzova. POZOR: --amber/--cyan (semanticke warn/info) jsou NIZE odpojeny od --pp/--ns. */ --pp: #a855f7; /* fialova — drive orange (#f59e0b) */ --ag: #22c55e; /* zelena (grass) — drive purple (#a855f7) */ --ns: #3b82f6; /* modra — drive cyan (#06b6d4) */ --de1: #14b8a6; /* DS teal — drive orange (uvolneno pro DV) */ --de2: #f59e0b; /* DV oranzova — drive teal */ --de3: #6366f1; /* DJ indigo */ /* Rezerva pro dalsi FVE — pojmenovany podle slotu, mapuj nove FVE na --p-slot-N podle poradi pridani. */ --p-slot-4: #d946ef; /* fuchsia */ --p-slot-5: #0ea5e9; /* sky */ --p-slot-6: #84cc16; /* lime */ --p-slot-7: #f43f5e; /* rose */ --p-slot-8: #8b5cf6; /* violet */ --p-slot-9: #34d399; /* emerald-bright */ --p-slot-10: #fb923c; /* orange-light */ --p-slot-11: #2dd4bf; /* teal-bright */ --p-slot-12: #818cf8; /* indigo-light */ /* Shape defaults — sjednoceno s Designer mockupem (2026-05-28): widget=12px (drive 10), button/chip=6px (stejne). */ --widget-radius: 12px; --button-radius: 6px; --chip-radius: 6px; /* Chrome (rail/topbar/menu) radius — shape osa se propisuje i mimo widgety (S2-07) */ --chrome-radius: 12px; --border-width: 1px; --shadow-widget: 0 1px 3px rgba(0,0,0,0.2); --shadow-hover: 0 4px 12px rgba(0,0,0,0.3); /* Density defaults — srovnano s [data-density="normal"] (o chlup tesnejsi 2026-06-02) */ --density-pad: 14px; --density-gap: 13px; --density-row: 7px; --density-font: 14px; --density-kpi: 30px; --density-h1: 24px; /* Font škála (S3-03) — pojmenované role místo ad-hoc velikostí a půlpixelů. caption = table th / drobné popisky, label = uppercase mikro-labely, body-s / body / ui = běžný text. Nové CSS má sahat po tokenu, ne po px. */ --fs-caption: 10px; --fs-label: 11px; --fs-body-s: 12px; --fs-body: 13px; --fs-ui: 14px; /* Font tokens (Designer alignment 2026-06-28) — drive jen v settings_srw.css */ --font-display: 'Manrope','Inter',system-ui,-apple-system,sans-serif; --font-body: 'Inter',system-ui,-apple-system,"Segoe UI",sans-serif; --font-mono: ui-monospace,'SF Mono',Menlo,Consolas,monospace; } /* ─────────────── THEMES (6 color palettes) ─────────────── */ [data-theme="midnight"] { --bg-page: #0a0d1a; --bg-panel: #11142a; --bg-widget: #161a32; --bg-widget-hover: #20254a; /* FinDash demo --bg-hover (drive #1a2440 — lehky posun do fialova) */ --bg-sidebar: #0d1024; /* FinDash demo exact */ --bg-card-2: #1a1f3a; /* FinDash demo exact — account karta + popup */ --border: rgba(255,255,255,0.07); --border-strong: rgba(255,255,255,0.12); --text: #e9ebf7; /* FinDash demo --fg (drive #e2e8f0 — lehky posun do fialova) */ --text-muted: #8b90b8; /* FinDash demo --fg-3 (drive #94a3b8 — fialovo-seda) */ --text-dim: #7e85b0; /* FinDash demo --fg-4 (drive #64748b) */ /* Topbar icon buttons — FinDash demo --bg-card / --fg-2 (presny vzorek z dema) */ --ico-btn-bg: #161a32; --ico-btn-fg: #c5c8e0; /* Accent — FinDash AI Designer EXACT 2026-05-28 (drive #4f7eff blue; vraceno na demo purple #7c5cff aby gradient + glow matchnul). */ --accent: #7c5cff; --accent-bg: rgba(124, 92, 255, 0.15); --accent-glow: rgba(124, 92, 255, 0.35); --accent-grad: linear-gradient(135deg, #8b6dff 0%, #5b3bff 100%); --accent-text: #ffffff; --accent-link: #9b87ff; /* svetlejsi fialova pro accent-barevny TEXT/odkazy (5.95:1) */ /* --pp/ag/ns: FIXNI hodnoty napric tematy — chipy a krivky maji vzdy stejnou barvu nezavisle na vybranem data-theme. Definovany jen v :root, themes je NEPREPISUJI. */ } [data-theme="daylight"] { --bg-page: #f5f6fa; --bg-panel: #ffffff; --bg-widget: #ffffff; --bg-widget-hover: #f0f2f7; --bg-sidebar: #ffffff; /* FinDash demo exact */ --bg-card-2: #f9fafc; /* FinDash demo exact — account karta + popup */ --border: #e2e8f0; --border-strong: #cbd5e1; --text: #0f172a; --text-muted: #64748b; --text-dim: #6b7a90; /* WCAG AA: drive #94a3b8 (2.56:1) — male popisky citelne na bilem */ /* Topbar icon buttons — FinDash demo light --bg-card / --fg-2 */ --ico-btn-bg: #ffffff; --ico-btn-fg: #38406a; --accent: #2563eb; --accent-bg: rgba(37, 99, 235, 0.08); --accent-glow: rgba(37, 99, 235, 0.35); --accent-grad: linear-gradient(135deg, #3b82f6 0%, #1d4ed8 100%); --accent-text: #ffffff; } [data-theme="solar"] { --bg-page: #0c0805; --bg-panel: #1a120a; --bg-widget: #1f1610; --bg-widget-hover: #2a1d12; --bg-sidebar: #150d07; /* mezi page a panel, drzi demo logiku */ --border: #3d2810; --border-strong: #5a3c1c; --text: #fef3c7; --text-muted: #d6b070; --text-dim: #8a6a3a; --accent: #f59e0b; --accent-bg: rgba(245, 158, 11, 0.15); --accent-glow: rgba(245, 158, 11, 0.4); --accent-grad: linear-gradient(135deg, #fbbf24 0%, #b45309 100%); --accent-text: #1a120a; } [data-theme="aurora"] { --bg-page: #051410; --bg-panel: #0a1f1a; --bg-widget: #0e2620; --bg-widget-hover: #143028; --bg-sidebar: #071a15; /* mezi page a panel */ --border: #1a3a30; --border-strong: #285548; --text: #d1fae5; --text-muted: #6ee7b7; --text-dim: #34a682; --accent: #10b981; --accent-bg: rgba(16, 185, 129, 0.15); --accent-glow: rgba(16, 185, 129, 0.4); --accent-grad: linear-gradient(135deg, #4ade80 0%, #15803d 100%); --accent-text: #051410; } [data-theme="contrast"] { --bg-page: #000000; --bg-panel: #0a0a0a; --bg-widget: #0d0d0d; --bg-widget-hover: #1a1a1a; --bg-sidebar: #050505; /* mezi page a panel */ --border: #2a2a2a; --border-strong: #555555; --text: #ffffff; --text-muted: #b0b0b0; --text-dim: #707070; --accent: #fbbf24; --accent-bg: rgba(251, 191, 36, 0.18); --accent-glow: rgba(251, 191, 36, 0.45); --accent-grad: linear-gradient(135deg, #fbbf24 0%, #ef4444 100%); --accent-text: #000000; } [data-theme="slate"] { --bg-page: #1a1f2e; --bg-panel: #232938; --bg-widget: #2a3142; --bg-widget-hover: #313a4f; --bg-sidebar: #1d2331; /* mezi page a panel */ --border: #2d3548; --border-strong: #3a4660; --text: #f1f5f9; --text-muted: #cbd5e1; --text-dim: #94a3b8; --accent: #818cf8; --accent-bg: rgba(129, 140, 248, 0.18); --accent-glow: rgba(129, 140, 248, 0.4); --accent-grad: linear-gradient(135deg, #a8b3ff 0%, #4f7eff 100%); --accent-text: #ffffff; } /* ─────────────── SHAPES (3 corner styles) ─────────────── */ [data-shape="sharp"] { --widget-radius: 3px; --button-radius: 3px; --chip-radius: 3px; --chrome-radius: 3px; --border-width: 1px; --shadow-widget: none; --shadow-hover: 0 0 0 1px var(--border-strong); } [data-shape="standard"] { /* Sjednoceno s Designer mockupem 2026-05-28: widget=12px (drive 10). */ --widget-radius: 12px; --button-radius: 6px; --chip-radius: 6px; --chrome-radius: 12px; --border-width: 1px; --shadow-widget: 0 1px 3px rgba(0,0,0,0.15); --shadow-hover: 0 4px 12px rgba(0,0,0,0.25); } [data-shape="soft"] { --widget-radius: 20px; --button-radius: 999px; --chip-radius: 999px; --chrome-radius: 16px; --border-width: 0px; --shadow-widget: 0 2px 12px rgba(0,0,0,0.18); --shadow-hover: 0 8px 24px rgba(0,0,0,0.28); } /* Theme + shape interakce — contrast theme vyzaduje silnejsi borders */ [data-theme="contrast"][data-shape="sharp"] { --border-width: 2px; } [data-theme="contrast"][data-shape="standard"] { --border-width: 2px; } [data-theme="contrast"][data-shape="soft"] { --border-width: 0; --shadow-widget: 0 0 0 2px var(--border); } /* Daylight (light theme): soft shape s outline */ [data-theme="daylight"][data-shape="soft"] { --shadow-widget: 0 2px 16px rgba(0,0,0,0.06); } /* Daylight: shape bloky vyse by svetlemu tematu vnutily tmave stiny (vlastni ma jen soft kombo) → svetly stin pro standard/fallback. Plain selektor (0,1,0) je ZA shape bloky → pro daylight vyhrava; kombo selektory (0,2,0) sharp/soft ho prebiji. Nutne pro bridge --shadow-card→--shadow-widget. */ [data-theme="daylight"] { --shadow-widget: 0 1px 3px rgba(15,23,42,0.08); } [data-theme="daylight"][data-shape="sharp"] { --shadow-widget: none; } /* ─────────────── DENSITIES (3 spacing levels) ─────────────── --density-gap = mezera mezi widgety v gridu. WidgetGridEngine ho cte přes getComputedStyle a aplikuje jako CSS Grid `gap` (jednoduchá mezera, ne 2x margin jak měl drive GridStack). */ [data-density="compact"] { --density-pad: 9px; --density-gap: 10px; --density-row: 5px; --density-font: 13px; --density-kpi: 24px; --density-h1: 20px; } [data-density="normal"] { --density-pad: 14px; --density-gap: 13px; --density-row: 7px; --density-font: 14px; --density-kpi: 30px; --density-h1: 24px; } [data-density="comfortable"] { --density-pad: 20px; --density-gap: 18px; --density-row: 11px; --density-font: 15px; --density-kpi: 38px; --density-h1: 28px; } /* ─────────────── LEGACY BRIDGE — dashboard.css tokens ───────────────── Existujici CSS pouziva --bg-0, --bg-1, --bg-2, --bg-3, --line, --line-2, --primary, --primary-2, --plant-pp/ag/ns, --green-2, --red, --amber, --cyan. Mapujeme je na nove theming tokens aby existujici widgety automaticky reagovaly na zmenu tematu. */ :root { --bg-0: var(--bg-page); --bg-1: var(--bg-panel); --bg-2: var(--bg-widget); --bg-3: var(--bg-widget-hover); --line: var(--border); --line-2: var(--border-strong); /* Soft prusvitny ramecek (FinDash demo --border) — bila na tmavych, tmava na svetlych tematech; adaptuje se pres --text. Pro account kartu + popup. */ --border-soft: color-mix(in srgb, var(--text) 8%, transparent); /* Text bridge — bylo MISSING! dashboard.css :root definoval --text-2/-3 primo, takze bridge neprebijel. Vysledek: nav-item text drzel sterilni modrosedou #a4abc1 misto demo fialove #8b90b8. */ --text-1: var(--text); /* FinDash slovnik (user-name, account-item) — drive nedefinovan */ --text-2: var(--text-muted); --text-3: var(--text-dim); /* Brand colors: --primary se uziva pro CTA (purple), --accent z tematu */ --primary: var(--accent); --primary-2: var(--accent); /* Plant colors — bridge na --pp/ag/ns z :root (FIXNI napric tematy) */ --plant-pp: var(--pp); --plant-ag: var(--ag); --plant-ns: var(--ns); --plant-de1: var(--de1); --plant-de2: var(--de2); --plant-de3: var(--de3); /* Semantic */ --green: var(--success); --green-2: var(--success); --red: var(--danger); /* Shadow bridge (S2-07) — .widget i .card dedi shape-aware stin. Jedina definice --shadow-card v repu (drive konkurencni set v dashboard.css). */ --shadow-card: var(--shadow-widget); /* --amber/--cyan = SEMANTICKE (warn/info ikony, alert.warn/info, kumulativni serie). Drive nabindovane na --pp/--ns; ODPOJENO 2026-06-14 kdyz PP→fialova a NS→modra, jinak by se varovne/info prvky prebarvily. Fixni hex. */ --amber: #f59e0b; --cyan: #06b6d4; --blue: #3b82f6; /* datová modrá (heatmap škála, grafy) — přesunuto z dashboard.css při fázi-2 úklidu */ /* Density-driven defaults pro grid */ --pad: var(--density-pad); --gap: var(--density-gap); } /* ─── Daylight (light theme) — ztmavene semanticke barvy pro WCAG AA (>=4.5:1) na bilem pozadi. Vychozi jasne odstiny jsou ladene na TMAVE pozadi a jako text na bile propadaji (success #4ade80 = 1.74:1). MUSI byt ZA :root vyse, protoze --amber/--cyan jsou definovany tam (shodna specificita → pozdejsi zdroj vyhrava). Dark temata zustavaji nedotcena. Grafy ctou tyto tokeny pres bridge (--green-2/--red = var(--success)/var(--danger)) → srovnaji se. */ [data-theme="daylight"] { --success: #15803d; /* 5.02:1 */ --danger: #dc2626; /* 4.83:1 */ --amber: #b45309; /* 5.02:1 */ --cyan: #0e7490; /* 5.36:1 */ }