/* ========================================================================== DESIGNOVÉ TOKENY -------------------------------------------------------------------------- Sekce 1–4 dodal designér. Originál v nedotčené podobě leží v CHYTRA_SOLARNI/TONY/tokens.css — až přijde aktualizace, porovnej ji proti němu a bude vidět přesně, co se změnilo. Sekce 5 na konci jsou NAŠE DOPLŇKY (rozhodnuto Petrem 10. 9. 2026: nový soubor od designéra nebude, doplňky patří sem). Je oddělená schválně: diff proti TONY pak ukáže jen ji, ne rozsypanou hrst změn po celém souboru. Do sekcí 1–4 se nepíše. Doprovodný text s odůvodněním: CHYTRA_SOLARNI/TONY/HANDOFF.md ========================================================================== */ /* ========================================================================== Chytrá solární — design tokens -------------------------------------------------------------------------- Import once, before all other stylesheets: @import "./tokens.css"; Three theme states, matching the sidebar switcher: follows the OS, dark if no preference forced dark forced light --------------------------------------------------------------------------- THE COLOUR RULE — read this before changing anything --------------------------------------------------------------------------- Two systems share four hues. They are NOT interchangeable. 1. DOMAIN — what kind of energy this is solar orange battery green grid blue consumption red 2. VALENCE — money and maths positive / income green negative / expense red current value orange This is why the same physical event has two colours depending on framing: "Do sítě" blue (grid as infrastructure — energy flowing) "Prodej do sítě" green (money coming in) "Ze sítě" blue (grid as infrastructure) "Nákup ze sítě" red (money going out) These are correct and deliberate. Do not "fix" them to match. --------------------------------------------------------------------------- THE ALARM RULE --------------------------------------------------------------------------- Consumption and alarms are both red. They are separated by FORM, not hue: Alarms are ALWAYS a filled badge with an icon. Never bare red text. Never a red line. If an alarm ever renders as plain coloured text it becomes indistinguishable from a consumption value. This rule is load-bearing. --------------------------------------------------------------------------- THEME BEHAVIOUR --------------------------------------------------------------------------- Solid accents dark = bright shade, light = deep shade Gradient fills identical in both modes (backgrounds, arcs, lines) Gradient text identical in both modes — same as gradient fills ========================================================================== */ /* ========================================================================== 1. PRIMITIVES Raw values. Never reference these directly in component CSS — always go through a semantic token in section 2. ========================================================================== */ :root { /* --- Surfaces ---------------------------------------------------------- A plain ramp, lightest to darkest. Deliberately unlabelled by theme: primitives do not belong to a mode, and several steps are used by both. #111214 is the dark module gradient start and also the light-mode ink. Section 2 and 3 decide which step each theme reaches for. */ --neutral-0: #FFFFFF; --neutral-25: #FAFAFA; --neutral-50: #F5F5F5; --neutral-100: #E6E6E6; --neutral-200: #BDBDBD; --neutral-450: #424242; --neutral-850: #1B1E25; --neutral-900: #13151A; --neutral-950: #111214; --neutral-1000: #0C0D0F; /* --- Text & border alphas ---------------------------------------------- */ /* Dark mode paints with white, light mode with ink. Same three steps. The semantic layer in sections 2 and 3 picks the right family. Figma displays these as 16.08% and 72.16% rather than 16% and 72%. That is hex quantization, not an error — they were imported as 8-digit hex, which only has 256 alpha steps, so 0.16 lands on 0x29 = 41/255. The values below are the intended ones. The difference is invisible. */ --alpha-white-72: rgb(255 255 255 / 0.72); --alpha-white-27: rgb(255 255 255 / 0.27); --alpha-white-16: rgb(255 255 255 / 0.16); --alpha-ink-72: rgb(17 18 20 / 0.72); --alpha-ink-16: rgb(17 18 20 / 0.16); /* --- Orange — solar production, current value -------------------------- */ --orange-400: #FCB314; /* bright — dark mode solids, gradient start */ --orange-600: #FC7514; /* deep — gradient end */ /* --- Red — consumption, expenditure, alarms ---------------------------- */ --red-400: #F96238; /* coral — gradient start */ --red-600: #FC1414; /* saturated — gradient end, alarm badges */ /* --- Green — battery, income, positive --------------------------------- */ --green-400: #23E16F; /* bright — dark mode solids, gradient start */ --green-600: #137B3D; /* deep — gradient end, light mode solids */ /* --- Blue — grid infrastructure ---------------------------------------- */ --blue-400: #5C87EE; /* bright — dark mode solids, gradient start */ --blue-600: #255FE5; /* deep — gradient end, light mode solids */ /* --- Spacing — 4pt base ------------------------------------------------ */ /* Component padding — small end of the scale: */ --space-4: 4px; /* alarm badge vertical padding */ --space-8: 8px; /* hotspot nodes, info banners, alarm badge sides, calendar dropdown vertical */ --space-12: 12px; /* sidebar nav items, chart legend items, module gaps on mobile */ /* Layout spacing — module padding, gaps, and spacing between frames inside modules. The internal scale is 16 / 24 / 32 / 40 / 48 / 64. */ --space-16: 16px; /* calendar, calendar dropdown sides, module gaps on desktop */ --space-24: 24px; /* module padding on mobile, Nabito/Vybito hover, Prodej/Nakup banners */ --space-32: 32px; /* module padding on desktop */ --space-40: 40px; /* module title to content (all sizes), module bottom padding on mobile */ --space-48: 48px; --space-64: 64px; --space-96: 96px; /* module bottom padding, desktop */ /* --- Radius ------------------------------------------------------------ */ --radius-4: 4px; /* alarm badges, bar chart end caps */ --radius-8: 8px; /* sidebar nav hover, info banners, calendar dropdowns */ --radius-16: 16px; /* calendar, chart legend items */ --radius-24: 24px; /* Prodej/Nakup banners */ --radius-32: 32px; /* modules (desktop and mobile), Nabito/Vybito hover */ --radius-full: 9999px; /* segmented control, pills, toggles */ /* --- Type -------------------------------------------------------------- */ --font-family-base: "Inter", -apple-system, BlinkMacSystemFont, sans-serif; --font-size-10: 0.625rem; --font-size-12: 0.75rem; --font-size-14: 0.875rem; --font-size-16: 1rem; --font-size-18: 1.125rem; --font-size-20: 1.25rem; --font-size-24: 1.5rem; --font-size-32: 2rem; --font-size-36: 2.25rem; --font-size-48: 3rem; --font-weight-regular: 400; --font-weight-medium: 500; --font-weight-semibold: 600; --font-weight-bold: 700; /* Every style except the Calendar group uses Figma's "Auto" line height, which derives from the font's own metrics. CSS "normal" does exactly the same thing from the same metrics, so the two match without hardcoding a number. For Inter this resolves to roughly 1.21. */ --line-height-auto: normal; /* The Calendar component sets explicit values: */ --line-height-100: 1; --line-height-140: 1.4; --line-height-160: 1.6; --tracking-normal: 0; --tracking-label: 0.04em; /* Overline/XS — 4% */ --tracking-wide: 0.06em; /* Axis/S — 6% */ /* --- Dimensions -------------------------------------------------------- */ --border-1: 1px; /* dividers, chart grid lines, dropdown borders */ --border-2: 2px; /* tooltip cursor line, energy flow lines */ --stroke-ring: 16px; /* donut and SOC ring thickness */ --stroke-line: 2px; /* chart series lines, energy flow lines */ --layout-sidebar-width: 260px; /* --- Module layout ------------------------------------------------------ Modules carry more padding at the bottom than on the other three sides. Values switch at the mobile breakpoint below. */ --module-padding: var(--space-32); --module-padding-bottom: var(--space-96); /* --- Shadows ------------------------------------------------------------ Effect styles in Figma, not colour styles. Theme-agnostic: identical in light and dark, so they live here rather than in the theme blocks. */ /* --- Motion ------------------------------------------------------------- Durations for hover, theme switching, slider drag and value updates. */ --motion-fast: 120ms; /* hover, focus, small state changes */ --motion-base: 220ms; /* theme switch, panel reflow, value flash */ --shadow-glow-battery: 0 0 24px 0 rgb( 35 225 111 / 0.24); /* SOC ring */ --shadow-default: 0 2px 4px 0 rgb( 0 0 0 / 0.12); /* info + value banners, slider handles — anything raised off the surface */ } /* -------------------------------------------------------------------------- Mobile padding. Switches at the phone boundary, NOT at the grid breakpoint — tablet keeps desktop padding but drops to a single column. See below. -------------------------------------------------------------------------- */ @media (max-width: 768px) { :root { --module-padding: var(--space-24); --module-padding-bottom: var(--space-40); } } /* ========================================================================== MODULE GRID -------------------------------------------------------------------------- At the 1728px design width, with a 260px sidebar, 24px outer padding and a 16px gap, each column is 702px: (1728 - 260 - 48 - 16) / 2 = 702px The widest module minimum is 686px, so there is only 16px of headroom. The grid computes its own breakpoint from that minimum — no media query is needed for the column count. auto-fit collapses empty tracks, so a half-width module whose neighbour is switched off stretches to full width instead of leaving a gap. Clients can toggle modules on and off, so the layout has to survive any subset. 768px padding drops to 24 / 40 (the only layout media query) Modules in the same row are equal height, matching the tallest. CSS Grid does this by default via align-items: stretch, so no extra work is needed. .module-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(686px, 1fr)); gap: var(--space-16); padding: var(--space-24); } .module-grid > .module--wide { grid-column: 1 / -1; } @media (max-width: 768px) { .module-grid { gap: var(--space-12); padding: var(--space-16); } } Inside a module, contents stack when the MODULE drops below its threshold — not when the viewport does. The same module can hit that width in a two-column desktop layout or a one-column tablet layout, so these are container queries, not media queries. Thresholds differ per module, measured from the design: 1000px wide modules spanning both columns (Vývoj dne, Monitoring spotřeby, Spotové ceny) 686px Data Baterie and similar half-width modules 660px Domácnost a síť .module { container-type: inline-size; } @container (max-width: 686px) { .module__row { flex-direction: column; } } Tune the per-module values during implementation — they are starting points from the design, not hard constraints. Figma has no container queries — build the two states as component variants, or design them as separate frames. The Figma equivalent is less automatic: the row frame is a horizontal auto-layout with height Hug, and each module inside is height FILL, not Hug. Hug modules keep their own height and will not match a taller neighbour. Full-width modules stay Hug. ========================================================================== */ /* ========================================================================== 2. SEMANTIC — DARK (default) This is the layer component CSS should reference. ========================================================================== */ :root, [data-theme="dark"] { /* --- Background -------------------------------------------------------- */ --bg-canvas: var(--neutral-1000); /* #0C0D0F */ --bg-sidebar: var(--neutral-1000); --bg-surface: var(--neutral-950); /* flat fallback for gradient */ --bg-surface-raised: var(--neutral-850); --bg-hover: var(--neutral-850); /* #1B1E25 */ --bg-control: var(--neutral-850); /* segmented control track */ --bg-control-selected: var(--alpha-white-27); /* active segment */ --bg-track: var(--neutral-450); /* slider track, ticks */ --bg-track-fill: var(--green-400); /* filled portion of sliders */ --bg-banner: var(--neutral-450); /* info banners, grey tooltip */ /* --- Border ------------------------------------------------------------ */ --border-default: var(--alpha-white-16); /* button outlines */ --border-divider: var(--alpha-white-16); /* --- Text -------------------------------------------------------------- */ /* Two levels only, per spec. If axis labels compete with the data, add a third at 50% rather than dimming --text-secondary. */ --text-primary: #FFFFFF; --text-secondary: var(--alpha-white-72); /* kWh, Více, Zobrazit detail */ --text-inverse: var(--neutral-950); --text-on-accent: #FFFFFF; /* on filled coloured cards */ /* --- Energy — DOMAIN --------------------------------------------------- */ --energy-solar: var(--orange-400); --energy-battery: var(--green-400); --energy-grid: var(--blue-400); --energy-consumption: var(--red-400); /* --- Value — VALENCE --------------------------------------------------- */ /* Separate names from the domain tokens above even where values coincide. This is what lets you decouple them later without a file-wide hunt. */ --value-positive: var(--green-400); /* Prodej do sítě, positive bars */ --value-negative: var(--red-400); /* Nákup ze sítě, negative bars */ --value-current: var(--orange-400); /* "now" marker in Spotové ceny */ --value-neutral: var(--neutral-450); /* past bars in Spotové ceny */ /* --- Status ------------------------------------------------------------ */ /* Status badges are filled containers with white text, so they use the deep shades for contrast. Identical in light mode. */ --status-ok: var(--green-600); /* Připojeno k síti */ --status-warning: var(--orange-600); --status-danger: var(--red-600); /* alarms — filled badge + icon only */ --status-info: var(--blue-600); /* PROPOSED — no offline state exists in the design yet. Needed for inverter or grid disconnection, where there is no data to show. */ --status-offline: var(--neutral-200); /* --- Charts ------------------------------------------------------------ */ --chart-series-solar: var(--energy-solar); --chart-series-consumption: var(--energy-consumption); --chart-series-battery: var(--energy-battery); --chart-series-grid: var(--energy-grid); --chart-grid-line: var(--neutral-450); /* #424242 */ --chart-axis-label: var(--text-secondary); --chart-cursor: currentColor; /* 2px, matches active series */ /* Vývoj dne tooltips take the colour of the selected series, always the deep shade. Identical in both themes, so light does not override them. The Spotové ceny tooltip is the grey --bg-banner instead. */ --chart-tooltip-solar: var(--orange-600); --chart-tooltip-consumption: var(--red-600); --chart-tooltip-battery: var(--green-600); --chart-tooltip-grid: var(--blue-600); /* Area fill under each series line. Vertical gradient from the line down to the axis: bright shade at 32% on top, deep shade at 4% at the bottom. These are gradients, so they are color STYLES in Figma, not variables. */ --chart-fill-solar: linear-gradient(180deg, rgb(252 179 20 / 0.32) 0%, rgb(252 117 20 / 0.04) 100%); --chart-fill-consumption: linear-gradient(180deg, rgb(249 98 56 / 0.32) 0%, rgb(252 20 20 / 0.04) 100%); --chart-fill-battery: linear-gradient(180deg, rgb( 35 225 111 / 0.32) 0%, rgb( 19 123 61 / 0.04) 100%); --chart-fill-grid: linear-gradient(180deg, rgb( 92 135 238 / 0.32) 0%, rgb( 37 95 229 / 0.04) 100%); /* --- Donut segments ---------------------------------------------------- */ /* Segments are coloured by the OTHER end of the flow, not the module title. AC Výroba shows where production goes; Spotřeba zátěže where it comes from. That is why neither donut contains its own title's colour. */ --donut-to-load: var(--energy-consumption); --donut-to-grid: var(--energy-grid); --donut-from-solar: var(--energy-solar); --donut-from-grid: var(--energy-grid); --donut-track: var(--neutral-450); /* --- Action & state ---------------------------------------------------- */ --action-primary-bg: var(--orange-600); --action-primary-bg-hover: var(--orange-400); --action-primary-text: #FFFFFF; --action-link: var(--text-secondary); --action-link-hover: var(--text-primary); --action-refresh: var(--orange-400); /* sidebar refresh icon */ /* Brand orange is kept separate from solar even though the values match today. The logo and a production reading are different concepts and may diverge. PROPOSED — confirm against the logo. */ --brand-primary: var(--orange-600); --state-selected: var(--neutral-850); /* same value as --bg-hover */ /* Brief tint when a live value changes. A BACKGROUND tint, not a colour change: the values that update are white, orange, green, red and blue, so no single flash colour is visible against all of them. PROPOSED — no flash exists in the design yet. */ --state-value-flash: var(--alpha-white-16); /* Keyboard focus. Deliberately neutral rather than blue — blue already means grid in this system. Use with --border-2 and a small offset. */ --state-focus-ring: var(--neutral-0); --state-toggle-on: var(--green-400); --state-toggle-off: var(--neutral-450); /* --- Gradients --------------------------------------------------------- One per hue, used for everything: backgrounds, donut arcs, chart lines, filled cards, and gradient-filled numbers via background-clip: text. Identical in both themes. */ --gradient-surface: linear-gradient(45deg, var(--neutral-950) 0%, var(--neutral-900) 100%); --gradient-solar: linear-gradient(90deg, var(--orange-400) 0%, var(--orange-600) 100%); --gradient-consumption: linear-gradient(90deg, var(--red-400) 0%, var(--red-600) 100%); --gradient-battery: linear-gradient(90deg, var(--green-400) 0%, var(--green-600) 100%); --gradient-grid: linear-gradient(90deg, var(--blue-400) 0%, var(--blue-600) 100%); /* SOC ring — same colours, rotated vertical. The only vertical use of an accent gradient, so it is the only direction variant in the system. */ --gradient-battery-vertical: linear-gradient(180deg, var(--green-400) 0%, var(--green-600) 100%); } /* ========================================================================== 3. SEMANTIC — LIGHT -------------------------------------------------------------------------- Solid accents step to the deep shade. Gradients are identical to dark. THREE theme states, matching the sidebar switcher: dark the default, in section 2 light explicit, via [data-theme="light"] auto follows the OS via prefers-color-scheme The block below is duplicated: once inside the media query for the auto case, once as an explicit override. The :not([data-theme="dark"]) guard stops the OS preference from beating an explicit dark choice. THE TWO COPIES MUST STAY IDENTICAL. Change one, change the other. ========================================================================== */ @media (prefers-color-scheme: light) { :root:not([data-theme="dark"]) { --bg-canvas: var(--neutral-50); /* #F5F5F5 */ --bg-sidebar: var(--neutral-0); --bg-surface: var(--neutral-0); --bg-surface-raised: var(--neutral-25); --bg-hover: var(--neutral-100); /* #E6E6E6 */ /* Inverted in light: light track, solid white thumb. White at 27% would be invisible over a light surface. PROPOSED — confirm against the design. */ --bg-control: var(--neutral-100); --bg-control-selected: var(--neutral-0); --bg-track: var(--alpha-ink-16); --bg-track-fill: var(--green-600); --bg-banner: var(--neutral-200); /* #BDBDBD */ --border-default: var(--alpha-ink-16); --border-divider: var(--alpha-ink-16); --text-primary: var(--neutral-950); /* #111214 */ --text-secondary: var(--alpha-ink-72); --text-inverse: #FFFFFF; --text-on-accent: #FFFFFF; --energy-solar: var(--orange-600); --energy-battery: var(--green-600); --energy-grid: var(--blue-600); --energy-consumption: var(--red-600); --value-positive: var(--green-600); --value-negative: var(--red-600); --value-current: var(--orange-600); --value-neutral: var(--neutral-200); /* past bars, Spotove ceny */ --status-ok: var(--green-600); --status-warning: var(--orange-600); --status-danger: var(--red-600); /* same in both modes — already the deep shade. Matches --energy-consumption here, so the badge form is what separates alarms from consumption. */ --status-info: var(--blue-600); --status-offline: var(--neutral-450); --chart-series-solar: var(--energy-solar); --chart-series-consumption: var(--energy-consumption); --chart-series-battery: var(--energy-battery); --chart-series-grid: var(--energy-grid); --chart-grid-line: var(--neutral-200); /* #BDBDBD */ --chart-axis-label: var(--text-secondary); /* Identical to dark — chart fills are gradients, and gradients do not change between themes. */ --donut-to-load: var(--energy-consumption); --donut-to-grid: var(--energy-grid); --donut-from-solar: var(--energy-solar); --donut-from-grid: var(--energy-grid); --donut-track: var(--neutral-200); --action-primary-bg: var(--orange-600); --action-primary-bg-hover: var(--orange-600); --action-primary-text: #FFFFFF; --action-link: var(--text-secondary); --action-link-hover: var(--text-primary); --action-refresh: var(--orange-600); --brand-primary: var(--orange-600); --state-selected: var(--neutral-100); /* same value as --bg-hover */ --state-value-flash: var(--alpha-ink-16); --state-focus-ring: var(--neutral-950); --state-toggle-on: var(--green-600); --state-toggle-off: var(--neutral-200); /* Gradients — unchanged from dark, per spec */ --gradient-surface: linear-gradient(45deg, var(--neutral-25) 0%, var(--neutral-0) 100%); } } /* Explicit light — user picked light rather than following the OS. */ [data-theme="light"] { --bg-canvas: var(--neutral-50); /* #F5F5F5 */ --bg-sidebar: var(--neutral-0); --bg-surface: var(--neutral-0); --bg-surface-raised: var(--neutral-25); --bg-hover: var(--neutral-100); /* #E6E6E6 */ /* Inverted in light: light track, solid white thumb. White at 27% would be invisible over a light surface. PROPOSED — confirm against the design. */ --bg-control: var(--neutral-100); --bg-control-selected: var(--neutral-0); --bg-track: var(--alpha-ink-16); --bg-track-fill: var(--green-600); --bg-banner: var(--neutral-200); /* #BDBDBD */ --border-default: var(--alpha-ink-16); --border-divider: var(--alpha-ink-16); --text-primary: var(--neutral-950); /* #111214 */ --text-secondary: var(--alpha-ink-72); --text-inverse: #FFFFFF; --text-on-accent: #FFFFFF; --energy-solar: var(--orange-600); --energy-battery: var(--green-600); --energy-grid: var(--blue-600); --energy-consumption: var(--red-600); --value-positive: var(--green-600); --value-negative: var(--red-600); --value-current: var(--orange-600); --value-neutral: var(--neutral-200); /* past bars, Spotove ceny */ --status-ok: var(--green-600); --status-warning: var(--orange-600); --status-danger: var(--red-600); /* same in both modes — already the deep shade. Matches --energy-consumption here, so the badge form is what separates alarms from consumption. */ --status-info: var(--blue-600); --status-offline: var(--neutral-450); --chart-series-solar: var(--energy-solar); --chart-series-consumption: var(--energy-consumption); --chart-series-battery: var(--energy-battery); --chart-series-grid: var(--energy-grid); --chart-grid-line: var(--neutral-200); /* #BDBDBD */ --chart-axis-label: var(--text-secondary); /* Identical to dark — chart fills are gradients, and gradients do not change between themes. */ --donut-to-load: var(--energy-consumption); --donut-to-grid: var(--energy-grid); --donut-from-solar: var(--energy-solar); --donut-from-grid: var(--energy-grid); --donut-track: var(--neutral-200); --action-primary-bg: var(--orange-600); --action-primary-bg-hover: var(--orange-600); --action-primary-text: #FFFFFF; --action-link: var(--text-secondary); --action-link-hover: var(--text-primary); --action-refresh: var(--orange-600); --brand-primary: var(--orange-600); --state-selected: var(--neutral-100); /* same value as --bg-hover */ --state-value-flash: var(--alpha-ink-16); --state-focus-ring: var(--neutral-950); --state-toggle-on: var(--green-600); --state-toggle-off: var(--neutral-200); /* Gradients — unchanged from dark, per spec */ --gradient-surface: linear-gradient(45deg, var(--neutral-25) 0%, var(--neutral-0) 100%); } /* ========================================================================== 4. MIGRATION ALIASES (temporary) -------------------------------------------------------------------------- Maps the Czech token names in the current tokens.css onto this system, so existing component CSS keeps working while it is renamed. Every var(--barva-plocha), var(--mezera-4) etc. picks up the new value with no change to the components. Delete this section once components use the English names directly. ========================================================================== */ :root { /* --- Surfaces and text ------------------------------------------------- */ --barva-podklad: var(--bg-canvas); --barva-plocha: var(--bg-surface); --barva-plocha-2: var(--bg-surface-raised); --barva-linka: var(--border-default); --barva-text: var(--text-primary); --barva-text-2: var(--text-secondary); /* The design has two text levels, not three. Aliased to secondary; if a genuinely quieter level is needed, add it to the design first. */ --barva-text-3: var(--text-secondary); /* --- Brand ------------------------------------------------------------- */ --barva-znacka: var(--brand-primary); --barva-znacka-tmava: var(--orange-600); --barva-znacka-jemna: rgb(252 179 20 / 0.08); /* --- Quantities -------------------------------------------------------- */ /* Two changes worth flagging to whoever renames these: - vyroba was yellow, is now the solar orange - sit was blue and stays blue, but a different blue - soc was a separate purple; it now folds into battery green */ --barva-vyroba: var(--energy-solar); --barva-spotreba: var(--energy-consumption); --barva-baterie: var(--energy-battery); --barva-sit: var(--energy-grid); --barva-soc: var(--energy-battery); /* --- States ------------------------------------------------------------ */ --barva-ok: var(--status-ok); --barva-varovani: var(--status-warning); --barva-chyba: var(--status-danger); --barva-offline: var(--status-offline); /* --- Spacing ----------------------------------------------------------- */ --mezera-1: var(--space-4); --mezera-2: var(--space-8); --mezera-3: var(--space-12); --mezera-4: var(--space-16); --mezera-5: var(--space-24); --mezera-6: var(--space-32); --mezera-7: var(--space-48); /* --- Type -------------------------------------------------------------- */ --pismo: var(--font-family-base); --pismo-cisla: var(--font-family-base); --text-drobne: var(--font-size-12); --text-male: var(--font-size-14); --text-zakladni: var(--font-size-16); --text-velke: var(--font-size-18); --text-nadpis: var(--font-size-20); --text-cislo: var(--font-size-32); /* --- Shape and motion -------------------------------------------------- */ /* The old radius scale was 6 / 10 / 16. The new one has no 6 or 10, so these round to the nearest step. */ --oblouk-1: var(--radius-8); --oblouk-2: var(--radius-8); --oblouk-3: var(--radius-16); --stin: var(--shadow-default); --pohyb-rychly: var(--motion-fast); --pohyb-bezny: var(--motion-base); } /* -------------------------------------------------------------------------- NOT COVERED — new concepts with no Czech equivalent. Use the English names: --energy-* (four quantities, plus the domain/valence split) --value-positive / --value-negative / --value-current / --value-neutral --chart-series-* / --chart-fill-* / --chart-tooltip-* / --chart-grid-line --donut-* / --gradient-* / --bg-control / --bg-control-selected --bg-track / --bg-track-fill / --bg-banner / --state-* --module-padding / --module-padding-bottom -------------------------------------------------------------------------- */ /* ========================================================================== 5. TEXT STYLES Mirrors the Figma text styles exactly. Sizes: 12 / 14 / 16 / 18 / 20 / 32 / 36 / 48. Line height is Auto everywhere except the Calendar group. ========================================================================== */ /* --- Display — large numeric values ------------------------------------- */ .type-display-l { font-variant-numeric: tabular-nums; font-size: var(--font-size-48); font-weight: var(--font-weight-bold); line-height: var(--line-height-auto); } .type-display-m { font-variant-numeric: tabular-nums; font-size: var(--font-size-36); font-weight: var(--font-weight-bold); line-height: var(--line-height-auto); } .type-display-s { font-variant-numeric: tabular-nums; font-size: var(--font-size-32); font-weight: var(--font-weight-bold); line-height: var(--line-height-auto); } /* --- Headings — same size, distinguished by weight ---------------------- */ .type-heading-page { font-size: var(--font-size-20); font-weight: var(--font-weight-bold); line-height: var(--line-height-auto); } .type-heading-module { font-size: var(--font-size-20); font-weight: var(--font-weight-semibold); line-height: var(--line-height-auto); } /* --- Body and values ---------------------------------------------------- Units (kWh, W, Síť) use .type-body-m with color: var(--text-secondary). The only difference is colour, which is not part of a text style. */ .type-body-l { font-size: var(--font-size-18); font-weight: var(--font-weight-medium); line-height: var(--line-height-auto); } .type-body-m { font-size: var(--font-size-16); font-weight: var(--font-weight-medium); line-height: var(--line-height-auto); } .type-value-l { font-variant-numeric: tabular-nums; font-size: var(--font-size-24); font-weight: var(--font-weight-bold); line-height: var(--line-height-auto); } .type-value-m { font-variant-numeric: tabular-nums; font-size: var(--font-size-20); font-weight: var(--font-weight-bold); line-height: var(--line-height-auto); } .type-value-s { font-variant-numeric: tabular-nums; font-size: var(--font-size-16); font-weight: var(--font-weight-semibold); line-height: var(--line-height-auto); } /* --- Small text --------------------------------------------------------- */ /* Label carries two weights: medium for inactive/secondary, semibold for active/emphasis. Used by the chart legend and the 3D / Schema control. */ .type-label-s-medium { font-size: var(--font-size-14); font-weight: var(--font-weight-medium); line-height: var(--line-height-auto); } .type-label-s-semibold { font-size: var(--font-size-14); font-weight: var(--font-weight-semibold); line-height: var(--line-height-auto); } .type-caption-s { font-size: var(--font-size-14); font-weight: var(--font-weight-regular); line-height: var(--line-height-auto); } .type-caption-xs { font-size: var(--font-size-10); font-weight: var(--font-weight-medium); line-height: var(--line-height-auto); } .type-axis-s { font-size: var(--font-size-14); font-weight: var(--font-weight-regular); line-height: var(--line-height-auto); letter-spacing: var(--tracking-wide); } .type-badge-s { font-size: var(--font-size-14); font-weight: var(--font-weight-bold); line-height: var(--line-height-auto); } .type-link-m { font-size: var(--font-size-14); font-weight: var(--font-weight-medium); line-height: var(--line-height-auto); text-decoration: underline; } /* --- Overline ----------------------------------------------------------- */ .type-overline-xs { font-size: var(--font-size-12); font-weight: var(--font-weight-bold); line-height: var(--line-height-auto); letter-spacing: var(--tracking-label); text-transform: uppercase; } /* --- Calendar — component-scoped, the only Regular-weight styles --------- */ .type-calendar-dropdown { font-size: var(--font-size-16); font-weight: var(--font-weight-regular); line-height: var(--line-height-100); } .type-calendar-day { font-size: var(--font-size-16); font-weight: var(--font-weight-regular); line-height: var(--line-height-140); } .type-calendar-daylabel { font-size: var(--font-size-12); font-weight: var(--font-weight-regular); line-height: var(--line-height-160); } /* ========================================================================== 6. GRADIENT TEXT HELPER Works for both themes: in light mode the token resolves to a solid colour, which background-clip renders as a flat fill. ========================================================================== */ .gradient-text { background: var(--gradient-solar); -webkit-background-clip: text; background-clip: text; color: transparent; } /* ========================================================================== 7. FOCUS RING The offset is not a token — it appears in one rule and has no Figma equivalent, so it lives here as a literal. :focus-visible rather than :focus, so the ring shows for keyboard navigation but not on mouse clicks. ========================================================================== */ .focus-ring:focus-visible, button:focus-visible, a:focus-visible, input:focus-visible, select:focus-visible, [tabindex]:focus-visible { outline: var(--border-2) solid var(--state-focus-ring); outline-offset: 2px; } /* ========================================================================== 8. REDUCED MOTION Respects the OS setting for users who find animation uncomfortable. ========================================================================== */ @media (prefers-reduced-motion: reduce) { :root { --motion-fast: 0ms; --motion-base: 0ms; } *, *::before, *::after { animation-duration: 0.01ms !important; animation-iteration-count: 1 !important; transition-duration: 0.01ms !important; } } /* ========================================================================== 5 · NAŠE DOPLŇKY -------------------------------------------------------------------------- Co designér popsal v textu patche (10. 9. 2026), ale nedodal v souboru. Každý řádek má odkud pochází — kdyby později dorazil jeho vlastní zápis, je vidět, co porovnat a co zahodit. ========================================================================== */ :root { /* Záře kroužku SOC ve tvaru pro drop-shadow(). Designérův --shadow-glow-battery je psaný pro box-shadow a má ČTYŘI délky (0 0 24px 0). drop-shadow() přijímá nejvýš tři, takže s ním byl celý filtr neplatný a záře se vůbec nekreslila — proto tu jsou vlastní varianty se stejnou barvou i rozostřením. Při najetí se krytí zvyšuje z 24 % na 64 % (Petr, 10. 9.). ⚠️ 18. 9. jsem tyhle hodnoty zesílil, protože na produkci nebyla záře vidět. Petr to vrátil zpět: na DEV vypadá designérovo zadání dobře a problém na produkci je jinde — tam nesvítí ANI klidová záře, což zesílením hover stavu nevysvětlíš. Hodnoty jsou tedy znovu přesně podle designéra a hledá se skutečná příčina. */ --glow-soc: 0 0 24px rgb(35 225 111 / 0.24); --glow-soc-silny: 0 0 24px rgb(35 225 111 / 0.64); } /* Záře drobných kulatých značek (mřížka kontrol, 20. 9.). Malá varianta designérova --shadow-glow-battery. Jeho 24 px je na značku o průměru 28 px půlka průměru navíc — rozsvítilo by se celé okolí místo prvku. Barvy jsou --green-400 a --red-400, tedy ty, ze kterých je gradient pod značkou; není to nový odstín, jen jeho záře. Alfa 0,55 je mezi designérovým klidem (0,24 u --glow-soc) a jeho zvýrazněním (0,64 u --glow-soc-silny) — na 10 px a 0,40 to bylo podle Petra sotva vidět. ⚠️ 20. 9. se při auditu ukázalo, že tyhle dva tokeny seděly v designérově sekci 1 a měly česká jména. Přestěhováno sem a přejmenováno; hlídá test/tokeny-designer.test.js. */ :root { --glow-mark-ok: 0 0 14px 0 rgb( 35 225 111 / 0.55); --glow-mark-alert: 0 0 14px 0 rgb(249 98 56 / 0.55); /* ⚠️ Modrá záře designér nezadal — má jen zelenou a oranžovou pro „v pořádku" a „pozor". Kalibrace ale není ani jedno: je to zásah do sítě, a proto má i tlačítko přechod `--gradient-grid`. Zelená záře pod modrým tlačítkem vypadala jako chyba (Petr, 22. 9.: „hover je zelený a ne modrý"). Složeno ze stejného modrého odstínu a stejným způsobem jako ty dvě nad tím (--blue-400). */ --glow-mark-grid: 0 0 14px 0 rgb( 92 135 238 / 0.55); } /* Šířka sbaleného panelu (audit odchylek, 20. 9.). Designér zadal `--layout-sidebar-width` pro rozbalený stav, sbalený pruh s ikonami nechal bez tokenu. ⚠️ TOHLE ČÍSLO MUSÍ SEDĚT NA DVOU MÍSTECH: šířka panelu (panel.css) a odsazení obsahu vedle něj (base.css). Do 20. 9. bylo v obou napsané natvrdo — změna jednoho by obsah buď podsunula pod panel, nebo nechala mezeru. Jméno je anglicky jako celý jmenný prostor. */ :root { --layout-sidebar-width-collapsed: 90px; } /* Stín nadzvednuté karty (Nastavení dohledu → Instalace, 18. 9.). Designér zadal jen --shadow-default pro klidný stav; karta, která se při najetí zvedne o dva body, potřebuje stín o kus hlubší, jinak se zvedne a stín zůstane ležet. Stejná černá, jen dál a měkčeji. */ :root { --shadow-raised: 0 6px 16px 0 rgb(0 0 0 / 0.28); } /* Typografie tlačítek. Designér zadal dva styly, CTA/primary i CTA/secondary, oba 18px Inter Semibold (patch 4.0). Hodnoty jsou dnes shodné, ale jména se drží oddělená schválně: kdyby je designér rozešel, mění se to na jednom místě a ne v každém tlačítku zvlášť. Řadí se k ostatním .type-* stylům ze sekce 3. */ .type-cta-primary, .type-cta-secondary { font-size: var(--font-size-18); font-weight: var(--font-weight-semibold); line-height: var(--line-height-auto); } /* Plocha popisku ve Flow energie. Designér zadal přesné hodnoty: světlý motiv zleva doprava #F5F5F5 100 % → 24 %, tmavý zleva doprava #FFFFFF 8 % → 0 %. Bez stínu v obou. Zrcadlená varianta je pro pravé popisky, které mají proužek vpravo a rostou doleva — přechod musí téct od proužku, jinak plocha vypadá obráceně. */ :root { --gradient-hotspot: linear-gradient( 90deg, rgb(255 255 255 / 0.08) 0%, rgb(255 255 255 / 0) 100%); --gradient-hotspot-zrcadlo: linear-gradient(270deg, rgb(255 255 255 / 0.08) 0%, rgb(255 255 255 / 0) 100%); } @media (prefers-color-scheme: light) { :root:not([data-theme="dark"]) { --gradient-hotspot: linear-gradient( 90deg, rgb(245 245 245 / 1) 0%, rgb(245 245 245 / 0.24) 100%); --gradient-hotspot-zrcadlo: linear-gradient(270deg, rgb(245 245 245 / 1) 0%, rgb(245 245 245 / 0.24) 100%); } } :root[data-theme="light"] { --gradient-hotspot: linear-gradient( 90deg, rgb(245 245 245 / 1) 0%, rgb(245 245 245 / 0.24) 100%); --gradient-hotspot-zrcadlo: linear-gradient(270deg, rgb(245 245 245 / 1) 0%, rgb(245 245 245 / 0.24) 100%); } :root[data-theme="dark"] { --gradient-hotspot: linear-gradient( 90deg, rgb(255 255 255 / 0.08) 0%, rgb(255 255 255 / 0) 100%); --gradient-hotspot-zrcadlo: linear-gradient(270deg, rgb(255 255 255 / 0.08) 0%, rgb(255 255 255 / 0) 100%); } /* Teplá záře pod domem ve Flow energie. Hodnoty z designérova prototypu (TONY/flow-prototype.html) — stejné v obou motivech, protože je to světlo scény, ne barva rozhraní. */ :root { --flow-zare: radial-gradient(ellipse 55% 45% at 50% 55%, rgb(255 166 80 / 0.14), rgb(255 166 80 / 0) 70%); } /* Barva neaktivní linky ve Flow energie. Spec (oddíl 4) ji zadává bílou s krytím 85 %; psal se pro tmavý motiv, takže na světlém podkladu se musí obrátit — v paletě k tomu žádný hotový token není. Aktivní linky mají VLASTNÍ dvojici barev, ne barvy domén z oddílu 2. Specifikace (oddíl 4) je zadává takhle: proudění z Baterie #23E16F využívaná energie #E1BF23 neaktivní dráha bílá 85 % Proč vlastní tokeny a ne --energy-battery / --energy-consumption: ty dvě říkají, JAKÁ energie to je (doména), kdežto tady jde o to, CO se s ní zrovna děje (role). Zelená z Baterie je náhodou týž hex jako --energy-battery, ale žlutá v paletě domén vůbec není — spotřeba je tam korálová #F96238. Kdyby se sem dosadila, obrázek by přestal odpovídat návrhu (ověřeno 14. 9.: přesně tak to tam chvíli bylo). Stejné v obou motivech. Plyne to z pravidla v hlavičce souboru: plné barvy se s motivem mění, ale výplně a LINKY zůstávají. */ :root { --flow-zdroj: #23E16F; /* energie na cestě od zdroje */ --flow-vyuzita: #E1BF23; /* energie vcházející do spotřeby */ --flow-neaktivni: rgb(255 255 255 / 0.85); } /* Ve světlém motivu NE inkoustová, ale světlá šedá (Petr, 14. 9.). Do té doby tu byla `rgb(17 18 20 / 0.85)` a klidné dráhy vypadaly jako tlusté černé čáry proříznuté domem — přesný opak toho, co specifikace chce („bílá 85 %", oddíl 4). Doslova bílá by ale na světlé kartě (#FAFAFA) zmizela, takže se bere nejsvětlejší šedá z palety, která je na ní ještě vidět a přes šedý dům čte jako světlá linka. */ @media (prefers-color-scheme: light) { :root:not([data-theme="dark"]) { --flow-neaktivni: rgb(189 189 189 / 0.9); } } :root[data-theme="light"] { --flow-neaktivni: rgb(189 189 189 / 0.9); } :root[data-theme="dark"] { --flow-neaktivni: rgb(255 255 255 / 0.85); } /* Závoj pod vysunutou nabídkou na telefonu. V paletě žádná černá s krytím není — nabídka ale musí od obsahu pod sebou odlišit a pouhé ztmavení je nejmenší možný zásah do návrhu. Stejné v obou motivech: na světlém podkladu by ztmavení muselo být silnější, ne opačné. */ :root { --zavoj: rgb(0 0 0 / 0.5); } /* Ztmavení pod modálním oknem. Designér ho určil přesně — #000000 na 72 % (patch 4.0) — a je tmavší než závoj pod vysunutou nabídkou schválně: pod modálem se nic dělat nedá. */ :root { --zavoj-modal: rgb(0 0 0 / 0.72); } /* ── Síť rozdělená na dva směry ─────────────────────────── Zadal Petr 10. 9.: místo jedné řady „Síť", která šla do minusu, dvě samostatné — „Do sítě" tmavším odstínem modré, „Ze sítě" světlejším, a to STEJNĚ v obou motivech. Designér obojí v HANDOFF.md 1.1 vede jako modré (řádky 45 a 47), jen pro ně neurčil odstíny. Bereme je z jeho palety: Do sítě --blue-600 #255FE5 (tmavší) Ze sítě --blue-400 #5C87EE (světlejší) Proto se tyhle čtyři neodkazují na --energy-grid: ta se mezi motivy převrací a rozdíl mezi oběma směry by se v jednom z nich ztratil. Výplně mají tvar designérova --chart-fill-grid, jen místo dvojice odstínů použijí každá tu svou. Bublina je v obou případech tmavší odstín — designér ji tak popsal pro všechny řady (10. 9.) a světle modrá by pod bílým textem nebyla čitelná. */ :root { --chart-series-do-site: var(--blue-600); --chart-series-ze-site: var(--blue-400); --chart-tooltip-do-site: var(--blue-600); --chart-tooltip-ze-site: var(--blue-600); --chart-fill-do-site: linear-gradient(180deg, rgb(37 95 229 / 0.32) 0%, rgb(37 95 229 / 0.04) 100%); --chart-fill-ze-site: linear-gradient(180deg, rgb(92 135 238 / 0.32) 0%, rgb(92 135 238 / 0.04) 100%); } /* ── Odznak dohledu: D1 / M1 (24. 9. 2026) ─────────────────────── Petr: „zkus všude tu ikonku M1 D1 přebarvit (invertovat barvy, že barva bude na pozadí a M1 D1 bude v barvě pozadí) — zapiš to jako token, budeme to používat na více místech." M1 elektrárna je napojená na náš Monitor 1 — vidíme z ní data D1 je jen v evidenci — děláme dohled, data nemáme ⚠️ DVĚ BARVY Z DESIGNÉROVY PALETY, ŽÁDNÝ NOVÝ ODSTÍN. Zelená (battery) říká „vidíme data", modrá (grid) „jen evidence". Význam se tím nepřidává — na dashboardu zelená znamená baterii a modrá síť; tady je to jen stav elektrárny. ⚠️ PŘECHOD OD DESIGNÉRA, ne plná barva (Petr 24. 9.: „udělej to v gradientu ty M1 D1… jako barva designera, vždy se tím snaž řídit"). Bereme `--gradient-battery` a `--gradient-grid` tak, jak je má v paletě — nemícháme vlastní. Text je `--text-on-accent`. Je to designérova barva pro text na vybarvené ploše („on filled coloured cards") a v aplikaci už tenhle pár existuje u kalibrace baterie — přechod plus `--text-on-accent`. Druhá podoba téhož by se jednou rozešla. */ :root { --odznak-m1-plocha: var(--gradient-battery); --odznak-d1-plocha: var(--gradient-grid); --odznak-text: var(--text-on-accent); /* Propadlá revize nosí totéž ošetření (Petr 24. 9.: „když je revize propadlá, opět by měla být prohozená barva a mělo by to být v gradientově červené bublince"). Červená je designérova `--gradient-consumption` — tatáž, kterou nesou alarmy. ⚠️ Stav „řešit" zůstává jen oranžovým textem, ne pilulkou. Kdyby vybarvené bylo obojí, splynulo by upozornění s poplachem a na propadlou revizi by se přestalo koukat jinak. */ --odznak-propadla-plocha: var(--gradient-consumption); }