/* ========================================================================== PALETY WYDARZEŃ — jedyne źródło kolorów w projekcie. ========================================================================== Każdy blok `[data-theme="…"]` definiuje DOKŁADNIE cztery zmienne bazowe: --surface tło strony --surface-alt tło kart i sekcji --accent kolor akcji i akcentów --ink kolor tekstu podstawowego …plus `--font-display` (krój nagłówkowy), bo typografia rozróżnia warstwę weselną od firmowej dokładnie tak samo jak kolor. Wszystko pozostałe — obramowania, stany hover, tła komunikatów, tekst pomocniczy — WYLICZA `app.css` przez `color-mix()`. Dzięki temu dodanie siódmej palety to jeden blok, a nie przepisywanie arkusza. Plik jest osobny od `app.css` celowo: `tests/test_theming.py` parsuje go maszynowo i porównuje z `core.theming.EventTheme`. Dwa źródła prawdy (Python i CSS) bez takiej bramki rozjadą się przy pierwszej zmianie. Atrybut `data-theme` na `` ustawia zawsze `templates/base.html` (domyślnie `core.theming.DEFAULT_THEME`). Dokument, który tego znacznika nie kontroluje — czyli `/admin/`, gdzie `` należy do Django — nakłada paletę neutralną KLASĄ na ``; szczegół przy bloku `slate`. ========================================================================== */ /* --- Palety weselne ------------------------------------------------------ ODCIEŃ MA ZGADZAĆ SIĘ Z NAZWĄ i jest to wymaganie, nie estetyka: nazwę palety czyta Organizator przy wyborze („Blush — róż pudrowy"), więc paleta, która nazywa się różem, a wychodzi łososiem, kłamie w miejscu, w którym nikt nie sprawdza. Pierwsza wersja tych trzech miała akcent na 18.6° (pomarańcz) przy różu leżącym na ~355° i złoto o jasności, przy której żółć czyta się jako oliwka. Odcienie są dziś spójne w obrębie palety: akcent, atrament i obie powierzchnie stoją na jednym kącie ±10°. HERO TYCH PALET JEST JASNE (ADR-068) — patrz blok `--hero-*` niżej. */ [data-theme="blush"] { --surface: #FCF6F8; --surface-alt: #E9CDD7; --accent: #BE859B; --ink: #503641; --font-display: var(--font-serif); } /* ZŁOTO NIESIE TU CAŁA PALETA, NIE JEDNA POWIERZCHNIA — i to jest wniosek z dwóch nieudanych podejść. Samo tło hero podkręcone do C ≈ 0.09 wychodzi żółte jak ser i kłóci się z akcentem, który został tam, gdzie był; sam akcent na beżowym tle (C ≈ 0.03) ginie i zostaje „ciemnozłoty przycisk". Nasycenie idzie więc w górę wzdłuż CAŁEJ palety, z tłem w pół drogi między jednym a drugim (C ≈ 0.06), a atrament jest cieplejszy niż w pozostałych paletach (H ≈ 70) — bo to z niego powstaje przycisk, a brąz na złotym tle czyta się jak pomyłka. */ [data-theme="ivory"] { --surface: #FBF7EC; --surface-alt: #EBDDB2; --accent: #BA9B40; --ink: #48351E; --font-display: var(--font-serif); } [data-theme="powder"] { --surface: #F4F8FB; --surface-alt: #CCDEEC; --accent: #6592B2; --ink: #2A3E4D; --font-display: var(--font-serif); } /* --- Palety firmowe ------------------------------------------------------ */ /* Paleta neutralna. Wchodzi DWIEMA drogami i jest jedyną taką w tym pliku. Klasa `.theme-slate` to wejście dla dokumentu, w którym atrybut `data-theme` jest już czymś zajęty. Dziś jest nim `/admin/`: Django trzyma pod tą nazwą tryb jasny/ciemny (`light`/`dark`/`auto`), a znacznika `` tam nie kontrolujemy (ADR-064), więc klasa siada na ``. Wygrywa przez DZIEDZICZENIE, nie przez wagę — deklaracja bliżej elementu bije odziedziczoną niezależnie od specyficzności, więc nie licytujemy się z cudzym arkuszem. Nazwę klasy szablon składa z `core.theming.DEFAULT_THEME`, zamiast wpisywać ją wprost; spina to bramka w `tests/test_admin_visual_identity.py`. */ .theme-slate, [data-theme="slate"] { --surface: #F6F7F8; --surface-alt: #D8DEE4; --accent: #2F4156; --ink: #1B2733; --font-display: var(--font-sans); } [data-theme="indigo"] { --surface: #F5F5FA; --surface-alt: #D5D6EC; --accent: #3D3A8C; --ink: #23214F; --font-display: var(--font-sans); } [data-theme="graphite"] { --surface: #F7F7F6; --surface-alt: #DCDCD8; --accent: #3A3A38; --ink: #1E1E1D; --font-display: var(--font-sans); } /* --- Schemat hero -------------------------------------------------------- NA CZYM STOI HERO GOŚCIA — jedyna rzecz o palecie, której NIE DA SIĘ z jej czterech kolorów wyliczyć, bo nie jest funkcją barwy, tylko decyzją (ADR-068). Domyślnie hero jest CIEMNE: pole w kolorze atramentu, jasny tekst na nim. Tak wygląda warstwa firmowa i tak wyglądały wszystkie sześć palet do #168. Palety WESELNE odwracają to i jest to sedno tamtej zmiany. Róż pudrowy, beż i błękit są z definicji kolorami JASNYMI — ich ciemne warianty to śliwka, oliwka i granat, więc na ciemnym polu nazwa palety nigdy nie mogła się zgodzić z tym, co widać. Zaproszenie weselne dostaje więc jasną powierzchnię i ciemny tekst, czyli kolorystykę papieru. DWIE DEKLARACJE, NIE CZTERY. Wszystko, co na hero stoi — akcent, tekst drugorzędny, podkładka pod znakiem — `app.css` wylicza z tej pary jednym wzorem na token, mieszając W STRONĘ wskazanego atramentu. Dzięki temu siódma paleta wybiera schemat, a nie dobiera pięciu barw. ------------------------------------------------------------------------ */ :root { --hero-surface: var(--ink); --hero-ink: var(--surface); /* Udział akcentu w tonie stojącym NA hero. Dwie wartości, po jednej na schemat, i to nie jest strojenie per paleta: na ciemnym polu ton musi się od tła oddalić W GÓRĘ, na jasnym W DÓŁ, a tło jasnego schematu (`--surface-alt`) jest ciemniejsze od karty, więc akcent musi tam zejść niżej niż `--accent-strong`. Przy 40 % nadkreślnik w `blush` daje 4.20:1, czyli pod progiem. */ --hero-accent-share: 55%; } [data-theme="blush"], [data-theme="ivory"], [data-theme="powder"] { --hero-surface: var(--surface-alt); --hero-ink: var(--ink); --hero-accent-share: 30%; }