/* Svět Zítřka — designové tokeny (dvojmotiv) * * Zdrojem pravdy je TENTO soubor SPOLU s manifestem * src/core/design/tokens.py. Test src/core/tests/test_contrast.py hlídá, * že se obojí přesně shoduje **v každém motivu zvlášť** a že každá * používaná dvojice popředí/pozadí splňuje WCAG AA. Token přidaný jen * sem, nebo jen do manifestu, shodí build. * * Motivy jsou právě dva a jsou to dva **materiály na jednom rozhraní**, * ne jiný web. Rozvržení, komponenty ani chování se mezi nimi nemění. * * :root světlý motiv — manilový archivní papír. * Je **výchozí konstrukcí**: server nikdy * nevypisuje data-theme="light". * html[data-theme="dark"] tmavý motiv — původní noirová „Městská * registratura Tomorrowlandu". Hodnoty jsou * beze změny takové, jaké web měl před * zavedením dvojmotivu. * * Veřejná část **nezná `auto`** a `prefers-color-scheme` o ní nerozhoduje. * Motiv volí jedině přepínač (localStorage `sz-theme`). Django Admin má * vlastní nezávislé ovládání i vlastní úložiště. * * Pozor na strukturu souboru: blok motivu je jen ten na **nejvyšší * úrovni**. `:root` uvnitř `@media` (níž, u prefers-reduced-motion) je * doladění jediné vlastnosti, ne třetí motiv — parser v testu to * rozlišuje a duplicitní selektor motivu odmítne. */ :root { color-scheme: light; /* ====================================================================== * SVĚTLÝ MOTIV — prezentační hodnoty * ====================================================================== * Materiál: nažloutlý manilový papír kartotéční karty, tmavý tisk. * Záměrně platí: stránka je TMAVŠÍ než karty, čtecí plocha je * nejklidnější, ale **není bílá**. Ostrá bílá byla vyzkoušena * (`--reading-surface: #f8f4ea` s `--text-primary: #1d1a13`) a majitel * ji zamítl jako unavující; hlídá to seznam zamítnutých odstínů * v manifestu. */ /* --- Povrchy ------------------------------------------------------------ * Od nejtmavšího po nejsvětlejší. Ve světlém motivu je závazný pro * kontrast NEJTMAVŠÍ povrch (--surface-inset): tam má každé tmavé * popředí nejmenší rezervu. Je to zrcadlově opačně než v tmavém motivu * a manifest to drží jako **polaritu** motivu, ne jako natvrdo zapsaný * název povrchu. */ --surface-inset: #dacdb0; --surface-base: #e0d2b0; --surface-panel: #eee2c8; --reading-surface: #f2ead8; --surface-panel-alt: #e8dabc; /* --- Plné výplně ------------------------------------------------------ * Podklad destruktivního tlačítka. Na papíře je to razítko červenou * barvou, na kterém musí být čitelný tmavý tisk (--text-primary), * takže je nutně světlejší než rezavá výplň tmavého motivu. */ --state-danger-solid: #d28068; /* --- Text ------------------------------------------------------------- */ --text-primary: #2a261a; --text-secondary: #474233; --text-tertiary: #564f3d; /* --- Akcenty a odkazy ------------------------------------------------- * Na světlém podkladu nese zdůraznění TMAVŠÍ odstín, ne světlejší: * --accent-amber (hover) je proto tmavší než --accent-brass, přesně * obráceně než v tmavém motivu. Vztah „hover = víc kontrastu" zůstává. */ --accent-brass: #6a4d0e; --accent-amber: #7d3a03; --link: #1a4a78; --link-visited: #5b3f7a; /* --- Stavy ------------------------------------------------------------ * Barva nikdy není jediným nositelem informace — každý stav má vedle * odstínu i glyf a slovní popisek. */ --state-success: #2b5828; --state-warning: #764a07; --state-danger-fg: #8f3320; --state-archived: #545044; /* --- Ovládací prvky --------------------------------------------------- */ --focus-ring: #14458c; --border-control: #6f6247; /* --- Dekorace — bez požadavku na kontrast ----------------------------- * Ve světlém motivu jsou konstrukční linky schválně slabé: karta se má * odlišovat plochou, ne obtaženým rámečkem. */ --border-structural: #c4b48c; --rule-faint: #e4d8bc; /* --- Rastr pozadí — dekorativní, bez prahu ----------------------------- * Technický papír, ne mřížkovaný sešit. Leží pod skořápkou aplikace, * nikdy přes karty ani text, a vypíná se při prefers-contrast: more * i v tisku (base.css, print.css). */ --grid-minor: #dcd0b4; --grid-major: #d4c6a6; --grid-wash: #e6d8b8; /* --- Akcenty typů záznamů --------------------------------------------- * Používají se VÝHRADNĚ na 3px hranu karty a na ikonu typu. * Nikdy jako barva textu — popisky typu jsou v --text-secondary. */ --type-npc: #3f5f78; --type-group: #7a4f30; --type-location: #3f6340; --type-mission: #8a4d1c; --type-encyclopedia: #5a4d75; --type-trademark: #2f6460; --type-aspect: #8a4550; --type-calendar-event: #5f5330; /* --- Aliasy ------------------------------------------------------------- * Zapisují se JEN TADY a platí pro **oba** motivy. Hodnota `var(--cíl)` * se počítá na tomtéž elementu (`html`), na kterém motiv přepisuje svůj * cíl, takže alias motiv sleduje sám od sebe. Nemají vlastní hex, takže * nemohou vzniknout duplicitou literálu — a proto se ani nemohou * rozejít. */ --type-agent: var(--accent-brass); --type-report: var(--state-archived); /* Papírky na nástěnce. Vědomě aliasy, ne nové odstíny. */ --type-board-note: var(--accent-amber); --type-board-task: var(--state-warning); /* --- Prezentace pozadí a výplní --------------------------------------- * Nejsou to barvy palety (mají alfu, resp. je to celá zkratka * `background`), takže je hlídač shody s manifestem nevidí. Každý motiv * si je definuje sám — díky tomu si tmavý motiv ponechá svoji PŮVODNÍ * texturu a nedostane světlý rastr. */ --surface-texture: linear-gradient(var(--grid-major) 1px, transparent 1px) 0 0 / var(--grid-major-step) var(--grid-major-step), linear-gradient(90deg, var(--grid-major) 1px, transparent 1px) 0 0 / var(--grid-major-step) var(--grid-major-step), linear-gradient(var(--grid-minor) 1px, transparent 1px) 0 0 / var(--grid-minor-step) var(--grid-minor-step), linear-gradient(90deg, var(--grid-minor) 1px, transparent 1px) 0 0 / var(--grid-minor-step) var(--grid-minor-step), radial-gradient(ellipse at 50% 0%, var(--grid-wash), transparent 65%); /* Šrafura zástupného obrázku. Odvozená od --border-structural daného motivu, jen s alfou — proto literál, ne var(). */ --placeholder-hatch: rgb(196 180 140 / 55%); /* ====================================================================== * NEMĚNNÁ GEOMETRIE — společná oběma motivům * ====================================================================== * Rozestupy, míry, škály, kroky rastru a doby přechodů se definují * JEDNOU. Motiv je materiál, ne jiné rozvržení. */ /* --- Rastr: rozteče ---------------------------------------------------- */ --grid-minor-step: 8px; --grid-major-step: 48px; /* --- Děrný štítek: rozměry --------------------------------------------- * Geometrie, tedy `:root` — rozměry se definují JEDNOU, i když je zatím * kreslí jenom světlý motiv. Tmavý motiv si ponechává původní vzhled * a žádné z těchhle pravidel nespotřebuje; barvy a stíny fyzické vrstvy * proto v `:root` nejsou a žijí výhradně ve světlé větvi * v `components.css`. * * Značka je obdélníkový průsek, ne kruhová děrovačka do pořadače: * vyšší než širší, v pravidelné rozteči jako sloupec děrného štítku. */ --punch-slot-w: 3px; --punch-slot-h: 5px; --punch-pitch: 8px; --punch-strip-inset: 4px; /* Seříznutý roh kartotéční karty (orientační zkos děrného štítku). */ --dossier-cut: 14px; /* O kolik se karta vysune ze štosu při ukázání a při fokusu. */ --card-lift: 2px; /* --- Typografie --------------------------------------------------------- * Rodiny podle §11.4. IBM Plex se zatím **nepřibaluje** — otázka volby * písma je v §11.12 stále otevřená a externí služba nepřipadá v úvahu * (CSP default-src 'self'). Jmenuje se proto první a systémový fallback * drží stejný charakter: serif na čtení, humanistický sans na rozhraní, * mono na kódy. Přidání @font-face později nevyžaduje změnu šablon. * * Tyto tokeny nejsou barvy, takže je hlídač shody s manifestem * (test_contrast.py) záměrně nevidí — hlídá jen zápisy `--token: #hex`. */ --font-read: "IBM Plex Serif", "Source Serif 4", Georgia, "Times New Roman", serif; --font-ui: "IBM Plex Sans", "Public Sans", system-ui, -apple-system, "Segoe UI", sans-serif; --font-condensed: "IBM Plex Sans Condensed", var(--font-ui); --font-mono: "IBM Plex Mono", "JetBrains Mono", ui-monospace, "Cascadia Mono", monospace; /* Škála s poměrem 1,2 (§11.4). */ --text-2xs: 0.75rem; --text-xs: 0.875rem; --text-sm: 1rem; --text-md: 1.125rem; --text-lg: 1.25rem; --text-xl: 1.5rem; --text-2xl: 1.875rem; --text-3xl: 2.25rem; --leading-read: 1.65; --leading-ui: 1.45; --leading-heading: 1.3; --tracking-label: 0.08em; /* --- Rozestupy ---------------------------------------------------------- */ --space-1: 0.25rem; --space-2: 0.5rem; --space-3: 0.75rem; --space-4: 1rem; --space-5: 1.5rem; --space-6: 2rem; --space-7: 3rem; /* --- Míry a rámy -------------------------------------------------------- */ --measure-read: 68ch; --width-main: 1100px; --width-rail: 260px; --radius: 2px; --edge-type: 3px; /* --- Pohyb -------------------------------------------------------------- * Jen barva a okraj. Nic se netočí, nenaklání, netřese ani nebliká. */ --motion-fast: 120ms; --motion-drawer: 180ms; } /* ======================================================================== * TMAVÝ MOTIV — původní noirová registratura * ======================================================================== * Tohle NENÍ nový návrh. Jsou to přesně ty hodnoty, které web měl před * zavedením dvojmotivu (značka `original-dark-before-light-theme`). * Nic se tu nesmí „vylepšovat": po přepnutí do tmy má mít majitel pocit, * že se vrátil původní web. * * Závazný pro kontrast je tady NEJSVĚTLEJŠÍ povrch (--surface-panel-alt), * tedy opačný extrém než ve světlém motivu. */ html[data-theme="dark"] { color-scheme: dark; /* --- Povrchy ---------------------------------------------------------- */ --surface-inset: #0d1114; --surface-base: #12161a; --surface-panel: #1b2228; --reading-surface: #1e242a; --surface-panel-alt: #1c2a30; /* --- Plné výplně ------------------------------------------------------ */ --state-danger-solid: #8e3524; /* --- Text ------------------------------------------------------------- */ --text-primary: #e8e2d5; --text-secondary: #b4ae9e; --text-tertiary: #9a9a90; /* --- Akcenty a odkazy ------------------------------------------------- */ --accent-brass: #c9962e; --accent-amber: #e0a94b; --link: #7fb6c4; --link-visited: #9aa8c4; /* --- Stavy ------------------------------------------------------------ */ --state-success: #82ae74; --state-warning: #d49a4e; --state-danger-fg: #df8064; --state-archived: #9ba0a8; /* --- Ovládací prvky --------------------------------------------------- */ --focus-ring: #f0c04a; --border-control: #7a8b96; /* --- Dekorace — bez požadavku na kontrast ----------------------------- */ --border-structural: #46545e; --rule-faint: #2e3841; /* --- Rastr pozadí — deklarovaný, ale NEMALOVANÝ ----------------------- * Tmavý motiv si schválně **ponechává svou původní texturu** (jantarový * nádech shora a jemné vodorovné linky, viz --surface-texture níž) a * kreslený rastr světlého motivu nedostává. Hodnoty tady přesto jsou: * test vynucuje **paritu barevných tokenů** mezi motivy, aby se paleta * nemohla rozejít tím, že jeden motiv na token zapomene. Jsou to tedy * deklarované rastrové inkousty noirové rodiny, ne popis toho, co je * na pozadí vidět. */ --grid-minor: #1a2026; --grid-major: #26313a; --grid-wash: #141a1f; /* --- Akcenty typů záznamů --------------------------------------------- */ --type-npc: #8fa9b8; --type-group: #a4785c; --type-location: #7d9b7a; --type-mission: #c07a4a; --type-encyclopedia: #8a7f9e; --type-trademark: #6fa6a0; --type-aspect: #bf8a8a; --type-calendar-event: #9a8a6e; /* --- Prezentace pozadí a výplní --------------------------------------- * PŮVODNÍ textura, znak za znakem: jediná pevná vrstva, krytí <= 0,02, * bez scanline efektu, blikání, aberace a rozmazání. Hodnoty jsou * záměrně zapsané literálem — jsou to barvy s alfou a jakýkoli přepočet * přes color-mix() by nesl riziko, že se tmavý motiv vizuálně pohne. */ --surface-texture: radial-gradient(ellipse at 50% 0%, rgb(201 150 46 / 2%), transparent 60%), repeating-linear-gradient(0deg, rgb(255 255 255 / 1.2%) 0 1px, transparent 1px 3px); --placeholder-hatch: rgb(70 84 94 / 18%); } /* Doladění jediné vlastnosti, ne třetí motiv. */ @media (prefers-reduced-motion: reduce) { :root { --motion-fast: 0.01ms; --motion-drawer: 0.01ms; } }