/* ═══════════════════════════════════════════════════════════════════ theme-tokens.css — JEDINÝ zdroj pravdy pro proměnné témat (paleta, text, hrany, stíny, layout rozměry). Vyčleněno z app.css, aby lehké stránky (mobilní shell) mohly dědit témata bez tažení celého desktop stylesheetu. Načítají oba: base.html (desktop) i mobile/shell.html. Řazení light/dark drží data-bs-theme (Bootstrap), pojmenovaná témata data-theme. ═══════════════════════════════════════════════════════════════════ */ /* ── CSS proměnné ─────────────────────────────────────────────── */ :root { --sidebar-w: 248px; --topbar-h: 58px; --radius: 14px; --radius-sm: 9px; --radius-lg: 20px; --t: 0.2s ease; /* Barvy – Cloud brand palette */ --accent: #009aaa; /* Cloud tyrkys */ --accent-2: #016ae7; /* Cloud modrá */ --accent-3: #33487a; /* Cloud navy */ --accent-warm: #f59e0b; --accent-red: #ef4444; /* Sémantická stavová paleta — JEDEN zdroj pravdy pro ok/warn/err/muted. základ = kontrastní text; `-fill` = sytá tečka/výplň. Konzumují CSS třídy (.site-status--*, .badge-*, .alert-*, .text-expired) i JS (přes getComputedStyle). */ --status-ok: #059669; --status-ok-fill: #10b981; --status-warn: #d97706; --status-warn-fill: #f59e0b; --status-err: #dc2626; --status-err-fill: #ef4444; --status-muted: #94a3b8; --status-info: #0ea5e9; /* Sémantické role energetického schématu (ADR-028). NE stav a NE akcent: role je IDENTITA zdroje energie — „jantarová = FVE" si má uživatel zapamatovat a poznat ji ve schématu toků i ve sloupcích pod ním. Kdyby se braly ze stavové palety, změna barvy varování by přebarvila fotovoltaiku. DVA FUNKČNÍ KROKY, ne jedna hodnota — táž disciplína jako u stavové palety výše (`--status-ok` vs. `--status-ok-fill`). Dělí se podle TVARU značky, ne podle toho, zda jde o text: základ TEXT a TENKÁ LINKA — popisek uzlu, obrys rámečku, čára a hrot šipky. Písmo i vlásečnice na světlém podkladu MUSÍ být tmavé, jinak zmizí → 4,5:1. `-fill` PLOCHA — výplň sloupce, prstenec, tónovaná plocha rámečku, puntík legendy. Velká barevná plocha nese význam SYTOSTÍ, ne kontrastem vůči stránce; ztmavit ji na textový práh znamená v sRGB přijít o veškerou sytost (jantarová při Y ≈ 0,14 zhnědne). Světlý motiv to tak už dnes dělá u `--status-warn-fill` (#f59e0b, 1,94:1) i `--status-ok-fill` (#10b981, 2,30:1) — plošný krok rolí sedí na téže hladině, ne níž. Hodnoty `-fill` jsou odvozené v OKLCH z TMAVÉHO protějšku: týž odstín i sytost, jen světlost o 0,08 níž, aby barva sedla na světlý podklad. Oba motivy tak ukazují touž barvu, ne dvě různé. Pevný cíl kontrastu se záměrně nepoužil — kontrast je funkcí světlosti a ta je hue-specific: žlutá by se musela ztmavit do hněda a modrá zesvětlit do bledé, takže by role ztratily stejnou vizuální váhu. Dolní mez plošného kroku hlídá `verify/contrast_check.py`; rozdělení podle tvaru značky drží `mobile.css`. */ --role-pv: #9a5907; --role-pv-fill: #d5901f; --role-grid: #1d5aa8; --role-grid-fill: #4a87da; --role-load: #596b7f; --role-load-fill: #8799ae; --role-battery: #0f7853; --role-battery-fill: #00b881; /* Hladiny řízení úložiště (Level 1–5). SAMOSTATNÁ osa, ne varianta barev rolí: role odpovídá na otázku ODKUD energie teče, hladina na otázku CO SE V TU HODINU DĚJE. Kdyby sdílely paletu, zelená by na jedné obrazovce znamenala baterii a na druhé nákup ze sítě. Odstíny odpovídají externí optimalizaci, kde zákazník tutéž pětici už zná. Dva kroky ze stejného důvodu jako u rolí výše: barva hladiny nese kromě sloupce i popisek „Teď" v souhrnu pod grafem. Plošný krok se odvozuje TOUŽ cestou (OKLCH, světlost o 0,08 níž než tmavý protějšek při zachovaném odstínu i sytosti), takže externí předloha zůstává rozpoznatelná — sytost se nikam netlačí. */ --level-l1: #357742; /* nákup do baterie ze sítě */ --level-l1-fill: #41a657; --level-l2: #5f6b7a; /* klid, dobíjení jen z FVE */ --level-l2-fill: #828f9f; --level-l3: #836614; /* přímý přetok z FVE do sítě */ --level-l3-fill: #c69c0e; --level-l4: #b84141; /* spotřeba z baterie */ --level-l4-fill: #cc5757; --level-l5: #7d4fc0; /* prodej z baterie do sítě */ --level-l5-fill: #9165cd; --grad-main: linear-gradient(135deg, #009aaa 0%, #016ae7 100%); --grad-energy: linear-gradient(135deg, #f59e0b 0%, #ef4444 100%); --grad-cool: linear-gradient(135deg, #009aaa 0%, #33487a 100%); --grad-purple: linear-gradient(135deg, #016ae7 0%, #33487a 100%); --grad-amber: linear-gradient(135deg, #b45309 0%, #f59e0b 100%); /* Světlý režim */ --bg-base: #f0f4f8; --bg-card: #ffffff; --bg-sidebar: #ffffff; --bg-input: #f4f7fb; --text-1: #0d1f35; --text-2: #4a5568; --text-3: #94a3b8; --border: rgba(15,30,60,0.07); --border-acc: rgba(0,154,170,0.3); --shadow-sm: 0 1px 3px rgba(15,30,60,0.06), 0 4px 16px rgba(15,30,60,0.04); --shadow: 0 4px 12px rgba(15,30,60,0.08), 0 16px 40px rgba(15,30,60,0.05); --shadow-hover: 0 8px 28px rgba(0,154,170,0.2), 0 2px 8px rgba(15,30,60,0.06); --glow: 0 0 0 3px rgba(0,154,170,0.16); } :root[data-bs-theme="dark"] { --bg-base: #06101c; --bg-card: #0c1a2b; --bg-sidebar: #071424; --bg-input: #091528; --text-1: #ddeeff; --text-2: #6e8aaa; --text-3: #334d66; --border: rgba(255,255,255,0.055); --border-acc: rgba(0,154,170,0.25); --shadow-sm: 0 1px 3px rgba(0,0,0,0.35), 0 4px 16px rgba(0,0,0,0.22); --shadow: 0 4px 12px rgba(0,0,0,0.45), 0 16px 40px rgba(0,0,0,0.3); --shadow-hover: 0 8px 32px rgba(0,154,170,0.25), 0 0 0 1px rgba(0,154,170,0.1); --glow: 0 0 0 3px rgba(0,154,170,0.22); /* Stavová paleta v tmavém režimu — jasnější text pro kontrast (výplň zůstává). */ --status-ok: #34d399; --status-warn: #fbbf24; --status-err: #f87171; /* Role na tmavé ploše: týž odstín, zesvětlený na kontrast ≥ 4,5:1 vůči `--bg-base`. Grafický krok se zde od textového NELIŠÍ, a to není opomenutí: na tmavém podkladu jde zvýšení kontrastu a zvýšení sytosti týmž směrem, takže hodnota, která už vyhoví textu, je zároveň ta nejsytější dostupná — rozdělovat ji by znamenalo grafiku zbytečně ztlumit. Odkaz na základ (ne kopie hodnoty) drží Princip 1: krok `-fill` existuje v obou polaritách, ale jeho hodnota má i tady jediný zdroj. */ --role-pv: #f0a942; --role-pv-fill: var(--role-pv); --role-grid: #62a0f5; --role-grid-fill: var(--role-grid); --role-load: #9fb2c7; --role-load-fill: var(--role-load); --role-battery: #34d399; --role-battery-fill: var(--role-battery); /* Hladiny na tmavé ploše — týž význam, zesvětlené; `-fill` opět identita (viz výše). */ --level-l1: #5cc06f; --level-l1-fill: var(--level-l1); --level-l2: #9aa8b8; --level-l2-fill: var(--level-l2); --level-l3: #e0b53a; --level-l3-fill: var(--level-l3); --level-l4: #e8706e; --level-l4-fill: var(--level-l4); --level-l5: #a97ee8; --level-l5-fill: var(--level-l5); } /* ── Rozšířená témata (paleta přes data-theme; rodinu light/dark drží data-bs-theme pro Bootstrap komponenty). Stávající „Světlé"/„Tmavé" zůstávají beze změny — překrývají se jen tato pojmenovaná témata. Statický, greppatelný seznam. VŠECHNY bloky jsou ukotvené na `:root`, tedy na , kam motiv zapisuje `theme.js`. Bez toho by je přepsal KTERÝKOLI vnořený prvek nesoucí `data-theme` — a přesně to se stalo přepínači motivu v mobilní appce: každá položka seznamu měla atribut se svým motivem, takže si uvnitř sebe předefinovala `--text-1` a vykreslila popisek barvou CIZÍHO motivu na pozadí toho aktuálního. Světlé varianty tak byly na tmavém pozadí nečitelné. Tokeny patří výhradně na kořen dokumentu; nikde jinde se nedefinují. ───── */ /* Kontrastní světlé — výrazné hrany karet, tmavší text, sytější pozadí plochy */ :root[data-theme="light-contrast"] { --bg-base: #e5ebf2; --bg-card: #ffffff; --bg-sidebar: #ffffff; --bg-input: #eef3f9; --text-1: #081627; --text-2: #33445a; --text-3: #5f7186; --border: rgba(15,30,60,0.20); --border-acc: rgba(0,154,170,0.5); --shadow-sm: 0 1px 2px rgba(15,30,60,0.10), 0 4px 14px rgba(15,30,60,0.07); --shadow: 0 4px 12px rgba(15,30,60,0.12), 0 16px 40px rgba(15,30,60,0.08); } /* Teplé / sépie — teplá papírová paleta, jemné hnědé hrany */ :root[data-theme="light-warm"] { --bg-base: #f4ede1; --bg-card: #fffdf8; --bg-sidebar: #fbf5ea; --bg-input: #f1e9db; --text-1: #2a2214; --text-2: #5a4d38; --text-3: #94856c; --border: rgba(90,70,40,0.20); --border-acc: rgba(180,120,40,0.45); --accent-2: #b4741e; --shadow-sm: 0 1px 2px rgba(90,70,40,0.10), 0 4px 14px rgba(90,70,40,0.06); --shadow: 0 4px 12px rgba(90,70,40,0.12), 0 16px 40px rgba(90,70,40,0.07); } /* Tlumené tmavé — měkčí slate, čitelnější sekundární text, klidné ploché dlaždice */ :root[data-theme="dark-muted"] { --bg-base: #0e1722; --bg-card: #17232f; --bg-sidebar: #121c27; --bg-input: #16212d; --text-1: #d7e2ec; --text-2: #8ba0b3; --text-3: #5a7086; --border: rgba(255,255,255,0.085); --border-acc: rgba(0,154,170,0.3); } /* Vysoký kontrast tmavé — téměř černé pozadí, bílý text, viditelné hrany */ :root[data-theme="dark-contrast"] { --bg-base: #000308; --bg-card: #0a1524; --bg-sidebar: #050d18; --bg-input: #08111f; --text-1: #ffffff; --text-2: #a9bccd; --text-3: #6b869e; --border: rgba(255,255,255,0.16); --border-acc: rgba(0,154,170,0.55); }