/* ============================================================ Kropka — Color tokens (Design System) ŹRÓDŁO: docs/Nowy-Design-Kropka/_ds/kropka-eduhub-design-system- 9cab01f8-efff-4109-8fa5-976f5fbd8656/tokens/colors.css ODSTĘPSTWO OD ŹRÓDŁA (świadome, patrz openspec design D1 oraz redesign-gws-import D3): blok „Semantic aliases" z oryginału NIE jest kopiowany w całości. Aliasy dokładamy pojedynczo, na żądanie konkretnej strony, po sprawdzeniu kolizji nazw. NADAL POMINIĘTE: --accent, --accent-hover, --accent-press, --accent-tint, --bg, --surface-card, --text-strong, --text-body, --text-secondary, --text-muted, --text-hint, --chip-ink. Powód pominięcia --accent*: aplikacja definiuje własne --accent na :root (templates/base.html) i nadpisuje je per rola przez body.role-*. Wczytanie aliasów DS na :root podmieniłoby akcent aplikacji na niebieski DS na każdej stronie bez klasy body.role-* (np. landing dla niezalogowanego), bo obie deklaracje mają tę samą specyficzność i wygrywa późniejsza. Pozostałe pominięte nazwy nie kolidują — po prostu nie ma jeszcze ich konsumenta. DOŁOŻONE (ekran /auth/gws-import/): --bg-sunken, --focus-ring. DOŁOŻONE (Aktualności): --link, --link-hover oraz --overlay. DOŁOŻONY (górny pasek konta): --veil. Sprawdzone przed dodaniem: żadna z tych nazw nie występowała w templates/ ani static/. --overlay jest jedynym tokenem w tym pliku, którego NIE MA w źródle: wartość przyciemnienia pod modalem podaje wyłącznie proza readme DS („Transparency & blur"). Przy aktualizacji ze źródła nie usuwaj go jako „obcego". UWAGA na tryb ciemny: alias będący pośredniością do tokenu, który jest nadpisywany w body.dark, MUSI zostać powtórzony w bloku body.dark. Podstawienie var() zachodzi na elemencie deklaracji, więc alias z :root zamraża jasną wartość. Dotyczy --bg-sunken (wskazuje na --paper-2). Nie dotyczy --focus-ring — --blue-600 nie ma nadpisania ciemnego. Przy aktualizacji tego pliku ze źródła: NIE kopiuj bloku aliasów hurtem, dopóki aplikacja nie przejdzie w całości na tokeny DS. ============================================================ */ :root { /* ── Brand — blue (primary/interactive accent) ───────────── */ --blue-700: rgb(29, 78, 216); /* pressed / deep */ --blue-600: rgb(37, 99, 235); /* PRIMARY — CTA, active nav, focus, links */ --blue-500: rgb(59, 130, 246); /* hover-light / illustration */ --blue-100: rgb(219, 234, 254); /* tint surface */ --blue-050: rgb(239, 246, 255); /* faint tint well */ /* ── Neutrals — warm off-white → ink ─────────────────────── */ --paper: rgb(241, 241, 239); /* app background — warm paper */ --paper-2: rgb(240, 241, 239); /* sunken wells / progress track */ --surface: rgb(255, 255, 255); /* cards + panels */ /* ── Drabina wysokości ──────────────────────────────────── W trybie JASNYM wysokość niosą DWA sygnały naraz: powierzchnia jaśniejsza od tła (biel na papierze) ORAZ cień. W trybie CIEMNYM zostaje pierwszy — cień jest czarny na prawie czarnym tle, czyli niewidoczny. Jeden token `--surface` nie potrafi znaczyć naraz „powierzchnia karty" i „coś jaśniejszego niż karta", bo w ciemnym to są RÓŻNE wartości, a w jasnym ta sama. Dlatego tutaj drabina jest ZDEGENEROWANA — wszystkie poziomy wyniesione równe `--surface`, a wgłębienie równe `--paper-2`. Wprowadzenie drabiny nie zmienia trybu jasnego ani o piksel; cała różnica mieszka w wartościach ciemnych. Prymityw NIE maluje się tymi tokenami wprost: przebazowuje na sobie `--surface`, żeby wyliczenia `color-mix(…, var(--surface))` w jego wnętrzu liczyły się względem powierzchni, na której NAPRAWDĘ leżą. */ --surface-1: rgb(255, 255, 255); /* wyniesione: przycisk, pole, aktywna zakładka */ --surface-2: rgb(255, 255, 255); /* wyniesione nad wyniesionym: toast, wnętrze okna */ --surface-well: rgb(240, 241, 239); /* wgłębienie: szyna segmentu, szapka tabeli, tor */ --ink: rgb(0, 0, 0); /* primary text / wordmark */ --ink-2: rgb(45, 47, 46); /* strong secondary (dense card titles) */ --ink-3: rgb(63, 63, 63); /* dark chip / neutral pill fill */ --muted: rgb(90, 92, 90); /* tertiary text */ --hint: rgb(93, 93, 93); /* hint copy */ --border: rgb(232, 232, 230); /* hairlines */ --border-soft: rgba(172, 173, 172, 0.2); /* faint card stroke */ --divider: rgb(216, 216, 216); /* dividers / pill fill */ /* ── Semantic status ─────────────────────────────────────── */ --status-urgent: rgb(179, 27, 37); /* overdue / ≤ today — brick red */ --status-warning: rgb(255, 106, 0); /* soon — hot orange */ --status-ok: rgb(68, 131, 97); /* healthy — forest green */ --status-info: rgb(37, 99, 235); /* informational — blue */ --status-urgent-bg: rgba(179, 27, 37, 0.10); --status-warning-bg: rgba(255, 106, 0, 0.10); --status-ok-bg: rgba(68, 131, 97, 0.10); --status-info-bg: rgba(37, 99, 235, 0.10); /* ── Barwa TEKSTU na tincie statusowym ──────────────────────── ROZSZERZENIE POZA MAKIETY, wynik pomiaru (patrz openspec redesign-gws-import). Makiety piszą etykietę statusu wprost kolorem statusu na jego 10-procentowym tincie. Dla zieleni daje to 3.99:1 przy wymaganych 4.5:1 dla tekstu 11px — czyli poniżej AA. Ten sam przepis dla pomarańczy schodzi do 2.58:1. Dokładamy więc osobną barwę tekstu, ciemniejszą o tyle, żeby przejść próg, z zachowaniem odcienia. `--status-urgent` NIE dostaje `-ink`: zmierzone niezależnie, surowy kolor na własnym tincie daje 5.71:1 — nad progiem z zapasem, ciemniejszy wariant byłby zgadywaniem bez konsumenta. `--status-info` też zostaje bez `-ink`, ale NIE dlatego, że przechodzi: liczy 4.4999:1, formalnie POD progiem o ułamek promila. To zachowanie bazowego `.kp-chip` sprzed katalogowych modyfikatorów `--warning`/`--urgent`/`--info` (2026-08-09), poza zakresem tamtej zmiany — odnotowane tutaj, nienaprawione. Przepis dla kolejnego koloru: dobierz odcień tak, by na własnym tincie dał >= 4.5:1, i wpisz zmierzoną wartość tutaj zamiast zgadywać. */ --status-ok-ink: rgb(56, 120, 88); /* 4.71:1 na --status-ok-bg */ /* Drugi konsument: `.kp-chip--warning` (audyt `zamowienia.md`, diff #3 z redakcji katalogu 2026-08-09). Surowy `--status-warning` na własnym 10-procentowym tincie liczy 2.58:1 — ponad dwa razy pod progiem 4.5:1. Odcień poniżej to ten sam ton przyciemniony (sRGB × 0.72) do progu — zmierzone 4.63:1 na `--status-warning-bg` (sRGB→linear→luminancja WCAG, tło = tint złożony na `--surface`, ta sama metoda co przy `--status-ok-ink` wyżej). */ --status-warning-ink: rgb(184, 76, 0); /* 4.63:1 na --status-warning-bg */ /* ── Categorical palette (color-coding — not tied to any subject) ── Paleta wyboru koloru pozycji paska bocznego. --c-blue jest CELOWO wyłączony z katalogu (apps/users/sidebar_colors.py) — zarezerwowany jako akcent chrome. Pozostałe 19 kolorów jest do wyboru. */ --c-red: rgb(212, 76, 71); /* brick */ /* Głęboka czerwień z makiet. Wartościowo to `--status-urgent` w wariancie JASNYM, ale mieszka w palecie kategorycznej, bo — inaczej niż token statusowy — NIE przełącza się z motywem (statusowy schodzi w ciemnym na rgb(240,100,108), gdzie biały tekst przepada). Dodana 2026-07-30 dla kafelka zaległości: makieta maluje go właśnie tą czerwienią w obu motywach, a `--c-red` był zauważalnie jaśniejszy. Biały na tym tle daje 6.77:1, czyli najwyższy kontrast ze wszystkich kafelków. NIE dopisana do katalogu sidebar_colors — to nie jest kolor do wyboru dla pozycji paska, tylko wypełnienie statusowe o stałej wartości. */ --c-brick: rgb(179, 27, 37); --c-coral: rgb(230, 108, 90); --c-orange: rgb(240, 138, 30); --c-amber: rgb(216, 118, 32); --c-yellow: rgb(232, 179, 30); --c-olive: rgb(160, 158, 54); --c-lime: rgb(124, 179, 66); --c-green: rgb(68, 131, 97); /* forest */ --c-emerald: rgb(46, 150, 118); --c-teal: rgb(42, 148, 149); --c-cyan: rgb(51, 126, 169); /* cerulean */ --c-blue: rgb(37, 99, 235); --c-indigo: rgb(79, 92, 190); --c-violet: rgb(144, 101, 176); --c-purple: rgb(122, 78, 158); --c-magenta: rgb(193, 76, 138); --c-pink: rgb(214, 96, 140); --c-clay: rgb(159, 107, 83); --c-brown: rgb(140, 96, 66); --c-slate: rgb(96, 108, 122); /* ── Subject aliases (course color-coding — draw from palette) ──── */ --subj-math: var(--c-green); --subj-polish: var(--c-clay); --subj-english: var(--c-cyan); --subj-physics: var(--c-red); --subj-chemistry: var(--c-magenta); --subj-info: var(--c-violet); --subj-geo: var(--c-amber); --subj-history: var(--c-brown); --subj-bio: var(--c-lime); /* ── Grade-mark palette (Polish 1–6 scale) ───────────────── */ --mark-6: rgb(37, 99, 235); /* celujący — blue */ --mark-5: rgb(56, 142, 78); /* bardzo dobry — green */ --mark-4: rgb(124, 179, 66); /* dobry — light green */ --mark-3: rgb(232, 179, 30); /* dostateczny — yellow */ --mark-2: rgb(240, 138, 30); /* dopuszczający — orange */ --mark-1: rgb(179, 27, 37); /* niedostateczny — red */ /* ── Semantic aliases (dokładane pojedynczo, patrz nagłówek) ── --bg-sunken dołożyły niezależnie dwie wyspy (kanban i import z GWS); po scaleniu deklaracja jest tu JEDNA. Uwaga: wersja z wyspy kanban głosiła, że „ciemny wariant przychodzi sam, bo --paper-2 jest nadpisane w body.dark". To nieprawda i zostało zmierzone — patrz powtórzenie w bloku body.dark niżej. */ --bg-sunken: var(--paper-2); /* hover wiersza, szapka grupy, well */ --focus-ring: var(--blue-600); /* obrys focusu pól i przycisków */ /* Barwa TEKSTU odnośnika. Osobny token, nie --blue-600 wprost: skala blue nie ma nadpisania ciemnego, a --blue-600 na ciemnym papierze daje 3.62:1 (zmierzone, patrz readme DS). Wartość wpisana WPROST, nie przez var(), z tego samego powodu co --status-ok-ink — alias zamroziłby wersję jasną. W trybie jasnym to --blue-700, nie --blue-600: odnośnik bywa w wierszu z tintem statusowym (np. wiersz wpłaty na nieaktualne konto), gdzie --blue-600 schodzi do 4.22:1. --blue-700 daje tam ~5.9:1, a na białej powierzchni 6.3:1. */ --link-ink: rgb(29, 78, 216); /* = --blue-700 */ /* Barwa MIKRO-ETYKIETY sekcji (`.kp-sectlabel`). Ta sama pułapka co przy --link-ink i ten sam powód istnienia osobnego tokena: prymityw malował się `var(--blue-600)`, a skala blue nie ma nadpisania ciemnego, więc etykieta miała w trybie ciemnym 3.62:1 — poniżej progu 4.5 dla tekstu, a przy 10.5px łagodniejszy próg dla dużego tekstu jej nie ratuje. Zmierzone na `/help/` wobec tła rgb(18,18,18); liczba zgadza się co do drugiego miejsca z tą, którą podaje komentarz --link-ink wyżej. Osobny token, a nie użycie --link-ink: etykieta sekcji NIE jest odnośnikiem. Wspólny token znaczyłby, że zmiana barwy linków po cichu przemalowuje 83 mikro-etykiety w 38 plikach. W trybie jasnym zostaje dokładnie --blue-600, czyli dotychczasowa wartość — ta zmiana MA NIE RUSZAĆ wyglądu trybu jasnego (4.88:1 na --paper przechodzi). Wpisana wprost, nie przez var(), bo alias z :root zamroziłby wersję jasną — patrz --status-ok-ink i --bg-sunken. */ --sectlabel-ink: rgb(37, 99, 235); /* = --blue-600 */ /* Tekst na tle w kolorze oceny. DODANE PONAD ŹRÓDŁO: bundle DS używa do tego --chip-ink: var(--paper), które w trybie ciemnym staje się prawie czarne. Skala --mark-* jest w obu motywach identyczna (blok body.dark jej nie nadpisuje), więc odwracanie koloru tekstu psułoby kontrast na ciemnym motywie. Ten token jest celowo stały. */ --mark-ink: rgb(255, 255, 255); /* Dołożone przez Aktualności (redesign-news-page). Oba wskazują na skalę blue, która NIE ma nadpisania w body.dark, więc powtórzenie w bloku ciemnym jest zbędne — inaczej niż przy --bg-sunken. */ --link: var(--blue-600); --link-hover: var(--blue-700); /* Przyciemnienie pod modalem — DODANE, NIE SKOPIOWANE. Źródłowe tokens/colors.css nie ma takiego tokena; wartość podaje wyłącznie proza readme DS (sekcja „Transparency & blur") i powtarza wprost każda makieta. Bez tokena każdy modal wpisywałby ją ręcznie. Celowo literał, a nie color-mix z --ink: --ink przełącza się w body.dark na niemal biały, więc wyliczane przyciemnienie rozjaśniałoby ekran zamiast go przyciemniać. */ --overlay: rgba(13, 15, 14, 0.32); /* ── Welon chrome — barwa, KU KTÓREJ gaśnie treść pod paskiem ── DODANY 2026-08-11 (górny pasek konta, decyzja użytkownika). To jest ODWROTNOŚĆ `--ink`, i o to w nim chodzi. W jasnym motywie welon ROZJAŚNIA, w ciemnym PRZYCIEMNIA — czyli dokładnie na odwrót, niż wyszłoby z mieszania `--ink`, bo ten przełącza się z motywem na niemal biały. Wyliczyć tego z istniejących tokenów się nie da: żaden nie jest biały w jasnym i czarny w ciemnym. Dlatego token, a nie reguła `body.dark` w warstwie komponentów — plik tokenów jest z definicji miejscem, w którym mieszka zależność od motywu. UWAGA NA ZASIĘG: paleta ma tu mało miejsca. W jasnym motywie papier ma rgb(241,241,239), czyli od bieli dzieli go 14 jednostek; w ciemnym rgb(19,20,19), czyli od tej wartości 6 jednostek. Welon nałożony na SAM PAPIER jest więc z natury ledwo widoczny w obu motywach — pracuje dopiero na treści, która pod niego wjeżdża. Jeżeli kiedyś ma być widoczny także w spoczynku, potrzebna jest inna barwa, a nie większy procent. */ --veil: rgb(255, 255, 255); /* ── Powierzchnia inwersyjna i tekst na przyciemnieniu ────── DODANE przy scalaniu warstwy (consolidate-ds-primitive-layer). Te trzy tokeny mieszkały w `dashboard.css`, czyli w arkuszu strony, zapisane jako `rgb(...)` wprost. Własność niestandardowa deklarowana w arkuszu strony jest widoczna tylko tam, więc druga wyspa musiałaby ją przepisać — a wartość koloru należy do warstwy tokenów. Karta inwersyjna zostaje CIEMNA W OBU MOTYWACH (w ciemnym tylko się rozjaśnia, żeby nie zniknąć na tle `--paper`), dlatego jej ink NIE może brać `--ink` ani `--surface`: te przełączają się razem z motywem i kontrast by się odwrócił. Stąd ta sama wartość w obu blokach. `--on-overlay` to tekst i obramowanie leżące na `--overlay`, czyli na przyciemnieniu pod modalem. Przyciemnienie jest ciemne w obu motywach, więc ten token też się nie przełącza. Wartości półprzezroczyste liczy się z niego przez `color-mix`, zamiast wpisywać `rgba(255,255,255,…)`. */ --kp-inverse: rgb(24, 26, 24); --kp-inverse-ink: rgb(241, 241, 239); --on-overlay: rgb(255, 255, 255); /* `--on-fill` to tekst leżący NA wypełnieniu kolorem kategorialnym (kafelek licznikowy, chip licznika sekcji). Ma tę samą wartość co `--on-overlay`, ale inne znaczenie i inne warunki poprawności, więc jest osobnym tokenem: wolno go użyć WYŁĄCZNIE na odcieniach, które w katalogu `apps/users/sidebar_colors.py` mają `on_fill == 'white'`. Na pozostałych (żółty 1.93:1, limonka 2.51:1, pomarańczowy 2.51:1 — pomiary tamże) biały tekst łamie 4.5:1 i trzeba wziąć `--ink`. Nie przełącza się z motywem: wypełnienie jest kolorem kategorii, a nie powierzchnią. */ --on-fill: rgb(255, 255, 255); } /* ── Tryb ciemny ────────────────────────────────────────────── Oryginał DS trzyma nadpisania pod `.kropka-root.dark`; aplikacja Kropka używa `body.dark` (patrz templates/base.html, sekcja TRYB CIEMNY), więc selektor jest przepięty. Wartości bez zmian. */ body.dark { /* NIE jest tokenem, a mimo to mieszka tutaj, bo rozstrzyga kolor tej części interfejsu, do której CSS nie ma dostępu: natywnych fragmentów kontrolek rysowanych przez przeglądarkę. Bez tej deklaracji ikona kalendarza w `input[type=date]`, strzałki pola liczbowego i pasek przewijania wewnątrz kontrolki zostają w wersji JASNEJ — czyli ciemnym glifem na ciemnej powierzchni. Zmierzone 2026-08-17 na polu „Data wydania" w ewidencji legitymacji: pole stylowane poprawnie tokenami DS (tło rgb(29,31,29), obrys rgb(48,51,48)), a ikona niewidoczna. Deklaracja stoi na `body.dark`, a nie na `html.dark`: `color-scheme` jest dziedziczony, więc kontrolki wewnątrz dokumentu dostają ją tak czy inaczej, a `html` odpowiada dodatkowo za pasek przewijania CAŁEGO okna i za kolor tła poza obszarem dokumentu — to jest osobna decyzja wizualna, nie skutek uboczny naprawy pól formularza. */ color-scheme: dark; --paper: rgb(19, 20, 19); --paper-2: rgb(30, 32, 30); --surface: rgb(29, 31, 29); /* Drabina wysokości — TU dzieje się cała różnica między motywami. Kroki liczone jako nakładka `--ink` na `--surface`: 6% i 10%. Kontrast wobec karty rgb(29,31,29): 1.166:1 i 1.321:1. DLACZEGO NIE 4%: nakładka 4% to rgb(37,39,37), czyli dokładnie dzisiejsza wartość `--bg-sunken`. Gdyby `--surface-1` ją powtarzał, poziom wyniesiony byłby nieodróżnialny od podświetlenia `:hover` — a hover elementu wyniesionego musi jeszcze mieć dokąd pójść. WGŁĘBIENIE IDZIE W DÓŁ, tak samo jak w trybie jasnym: `--surface-well` to `--paper`, czyli tło strony. Wgłębienie w karcie pokazuje to, co pod kartą leży. Kierunek jest wspólny dla obu motywów — odwrócenie go sprawiało, że ten sam element raz był zagłębieniem, a raz stopniem wyniesienia. */ --surface-1: rgb(42, 43, 41); --surface-2: rgb(50, 52, 50); --surface-well: rgb(19, 20, 19); --ink: rgb(238, 239, 236); --ink-2: rgb(214, 216, 213); --ink-3: rgb(226, 227, 224); --muted: rgb(151, 154, 151); --hint: rgb(140, 142, 140); --border: rgb(48, 51, 48); --border-soft: rgba(120, 124, 120, 0.18); --divider: rgb(58, 61, 58); /* Barwy statusowe w wersji ciemnej — te same odcienie co tinty niżej, tylko o krok jaśniejsze. Wcześniej nadpisane były WYŁĄCZNIE tinty, a barwa tekstu zostawała ciemna. Zmierzone niezależnie w dwóch miejscach: · pigułka statusu na /auth/gws-import/ — zieleń rgb(68,131,97) na ciemnym tincie dawała 2.80:1 (redesign-gws-import), · alert wpłat na nieaktualne konto w księgowości — ceglasty rgb(179,27,37) dawał 2.33:1 (redesign-accounting-module). Pierwsze podejście brało odcienie wprost z tint (232,80,90 itd.); dla alertu na --paper (ciemniejszym niż --surface) dawało to dopiero 4.39:1. Wartości poniżej są o krok jaśniejsze i przechodzą próg w obu kontekstach — na tincie nad --surface i nad --paper. UWAGA przy użyciu: te tokeny PRZEŁĄCZAJĄ SIĘ z motywem, więc nie nadają się na wypełnienie pod tekstem o stałym kolorze — tam idzie paleta kategoryczna --c-*, wspólna dla obu motywów. */ --status-urgent: rgb(240, 100, 108); --status-warning: rgb(255, 160, 80); --status-ok: rgb(110, 195, 148); --status-info: rgb(110, 160, 245); --status-urgent-bg: rgba(232, 80, 90, 0.16); --status-warning-bg: rgba(255, 150, 60, 0.16); --status-ok-bg: rgba(90, 180, 130, 0.16); --status-info-bg: rgba(80, 140, 240, 0.16); /* Wartość wpisana wprost, NIE var(--status-ok): podstawienie var() zachodzi na elemencie deklaracji, więc alias z :root zamroziłby wersję jasną. Ta sama pułapka co przy --bg-sunken wyżej. */ --status-ok-ink: rgb(90, 180, 130); /* 4.97:1 na ciemnym tincie */ /* --status-warning-ink z :root (rgb(184,76,0), dobrany dla trybu jasnego) NIE nadaje się tu wprost: policzone na tym tincie ciemnym daje 2.39:1 — odcień jest za ciemny na ciemne tło, dokładnie ta sama pułapka co przy --link-ink i --sectlabel-ink. Zamiast szukać nowego odcienia, token w trybie ciemnym przyjmuje wartość identyczną z `--status-warning` ciemnym (rgb(255,160,80)) — ten kolor już istniał jako barwa wypełnień wymagających czytelności na ciemnym tle i sam, bez modyfikacji, daje 6.09:1 na `--status-warning-bg` ciemnym. Wpisana wprost, nie przez var(--status-warning): alias z :root zamroziłby wersję jasną (ta sama pułapka co przy --status-ok-ink wyżej). */ --status-warning-ink: rgb(255, 160, 80); /* 6.09:1 na ciemnym tincie */ /* --blue-600 na ciemnym papierze to 3.62:1, --blue-500 daje 5.09:1 — ale odnośnik bywa w wierszu z tintem statusowym (np. „uzupełnij numer karty" w wierszu pomarańczowym), gdzie --blue-500 schodzi do 3.92:1. Odcień poniżej daje tam 6.2:1, a na samej powierzchni 7.1:1. Poza skalą blue, bo skala nie ma jaśniejszego kroku niż --blue-500 przed --blue-100. */ --link-ink: rgb(120, 170, 255); /* Mikro-etykieta sekcji w trybie ciemnym. Ten sam odcień co --link-ink, ale pod własną nazwą — powód rozdzielenia stoi przy deklaracji jasnej. Zmierzone: 7.94:1 na --paper, 7.10:1 na --surface. --blue-500 dałby 5.09:1 i też przechodzi, ale etykieta jest wersalikowa i mała (10.5px, letter-spacing 1.4px), więc bierze odcień z zapasem, nie na styk. */ --sectlabel-ink: rgb(120, 170, 255); /* Powtórzenie aliasu jest KONIECZNE, nie jest nadmiarem. var() w deklaracji własności niestandardowej jest podstawiane na tym elemencie, na którym własność zadeklarowano. --bg-sunken zadeklarowane na :root podstawia --paper-2 Z :root, czyli wartość jasną — nadpisanie --paper-2 na body.dark nigdy by go nie dosięgło (zmierzone w przeglądarce: alias zostawał jasny). Ta sama pułapka co --kp-color w pasku, patrz docs/DECYZJE.md. Nie „upraszczaj" tej linijki usuwając ją. WARTOŚĆ WPROST, nie var(--paper-2): makiety trzymają w ciemnym motywie osobny odcień wgłębienia — `--bg-sunken: rgb(37,39,37)` obok `--paper-2: rgb(30,32,30)` (patrz blok `.kropka-root.dark` w każdym *.dc.html). Alias dawał 30,32,30 i szapka tabeli była ciemniejsza od makiety (zmierzone: 30,32,30 przeciw 37,39,37). */ --bg-sunken: rgb(37, 39, 37); /* WARTOŚĆ ZOSTAJE — nie jest błędem, mimo że jest JAŚNIEJSZA od `--surface`. Ten token pełni dwie role naraz: w samym katalogu 7 użyć to `:hover` wiersza, a 16 to tło wyciszone. Dla obu ról krok w GÓRĘ jest poprawny — podświetlenie ma jaśnieć, nie ciemnieć. Błędny był wyłącznie dla PRAWDZIWYCH wgłębień (szyna segmentu, szapka tabeli, tor przełącznika) i te przeszły na `--surface-well`. Zmiana wartości tutaj zepsułaby hovery w 44 plikach. */ /* Karta inwersyjna rozjaśnia się w ciemnym motywie, jej ink zostaje ten sam. `--on-overlay` też — przyciemnienie jest ciemne w obu motywach. Alias powtórzony tu świadomie: własność niestandardowa liczy się w miejscu deklaracji, więc zapisana tylko na `:root` zamroziłaby wartość jasną. */ --kp-inverse: rgb(46, 49, 46); --kp-inverse-ink: rgb(241, 241, 239); --on-overlay: rgb(255, 255, 255); --on-fill: rgb(255, 255, 255); /* Welon chrome ODWRACA SIĘ — to jest cały powód istnienia tego tokenu. W jasnym motywie biel (rozjaśnia), tutaj wartość CIEMNIEJSZA OD PAPIERU rgb(19,20,19), żeby treść wjeżdżająca pod pasek gasła w dół, a nie w górę. Ta sama barwa co pod modalem (`--overlay`), bo to ten sam rodzaj przyciemnienia. */ --veil: rgb(13, 15, 14); } /* ── Druk: papier nie ma trybu ciemnego ─────────────────────────── ZMIERZONY BŁĄD (2026-08-16): strona drukowana z przeglądarki przy włączonym trybie ciemnym wychodziła jasnym tekstem na białym papierze — kontrast 1.15:1 przy wymaganych 4.5:1. Powód: `body.dark` obowiązuje także w kontekście druku, a przeglądarki domyślnie NIE drukują teł, więc ciemna powierzchnia znika, a jasny atrament zostaje. Dotyczy KAŻDEJ strony drukowanej z przeglądarki, nie jednego ekranu — dlatego naprawa stoi w tokenach, a nie w arkuszu wyspy. Wydruki składane przez WeasyPrint problemu nie mają: idą własnymi szablonami, które motywu nie znają. Wartości są KOPIĄ deklaracji jasnych z `:root` powyżej i muszą nią zostać. Pilnuje tego `tests/test_tokens_print.py`: gdy w `body.dark` pojawi się token, którego nie ma tutaj, test pada — bo taki token wróciłby na papier w wersji ciemnej i nikt by tego nie zauważył do czasu wydruku. */ @media print { body.dark { /* Odwrotność deklaracji z bloku ciemnego. Papier jest biały niezależnie od motywu wybranego na ekranie, więc natywne fragmenty kontrolek mają jechać na wydruk w wersji jasnej — tak samo jak reszta tokenów niżej. Pilnuje tego `test_druk_odwraca_schemat_kolorow`. */ color-scheme: light; --paper: rgb(241, 241, 239); --paper-2: rgb(240, 241, 239); --surface: rgb(255, 255, 255); /* Drabina też wraca na papier w wersji jasnej — inaczej element wyniesiony wyszedłby na wydruk ciemną plamą. Parametru pilnuje `tests/test_tokens_print.py`. */ --surface-1: rgb(255, 255, 255); --surface-2: rgb(255, 255, 255); --surface-well: rgb(240, 241, 239); --ink: rgb(0, 0, 0); --ink-2: rgb(45, 47, 46); --ink-3: rgb(63, 63, 63); --muted: rgb(90, 92, 90); --hint: rgb(93, 93, 93); --border: rgb(232, 232, 230); --border-soft: rgba(172, 173, 172, 0.2); --divider: rgb(216, 216, 216); --status-urgent: rgb(179, 27, 37); --status-warning: rgb(255, 106, 0); --status-ok: rgb(68, 131, 97); --status-info: rgb(37, 99, 235); --status-urgent-bg: rgba(179, 27, 37, 0.10); --status-warning-bg: rgba(255, 106, 0, 0.10); --status-ok-bg: rgba(68, 131, 97, 0.10); --status-info-bg: rgba(37, 99, 235, 0.10); --status-ok-ink: rgb(56, 120, 88); --status-warning-ink: rgb(184, 76, 0); --link-ink: rgb(29, 78, 216); --sectlabel-ink: rgb(37, 99, 235); /* WARTOŚĆ WPROST, nie var(--paper-2): własność niestandardowa liczy się w miejscu deklaracji, a ten plik ostrzega przed tym aliasem dwa razy. Zależność od kolejności kaskady wewnątrz @media byłaby dokładnie tą pułapką, przed którą ostrzega. */ --bg-sunken: rgb(240, 241, 239); --kp-inverse: rgb(24, 26, 24); --kp-inverse-ink: rgb(241, 241, 239); --on-overlay: rgb(255, 255, 255); --on-fill: rgb(255, 255, 255); --veil: rgb(255, 255, 255); } }