/** * Monazo SOT — tokeny kolorystyczne. JEDYNE miejsce z wartościami kolorów. * * DLACZEGO OSOBNY PLIK. Przed tą zmianą ta sama paleta istniała w trzech * kopiach: `--mz-*` na `.mz-sot` (widget.css), `--mzc-*` na `.mzc` * (content.css) i hardkody w addonie odhaczania. Wartości były identyczne, * nazwy różne. Dołożenie trybu ciemnego „na miejscu” oznaczałoby sześć kopii * każdego koloru i pewny rozjazd po pierwszej zmianie — arkusze konsumujące * dostają więc gotowe tokeny, a własne nazwy zachowują jako aliasy. * * PALETA JEST WSPÓLNA Z MONAZO ESSENTIALS. Akordeon, popup, toast i tooltip * stoją na tej samej stronie co widget, a „Moje premie” otwierają się nad nim * w oknie modalnym. Trzy odcienie szarości w jednym kadrze zobaczy każdy, * dlatego wartości są przepisane z tamtych modułów, nie z projektu widgetu. * * ZGODNOŚĆ Z CACHE. Motyw rozstrzyga wyłącznie CSS czytający `data-scheme` * z . HTML jest identyczny w obu wariantach, więc pełny cache stron * pozostaje wspólny dla wszystkich. Ciasteczko `_color_schema` (znacznik * ręcznego wyboru) NIE MOŻE trafić do klucza cache — podwoiłoby liczbę * wariantów bez żadnego pożytku. */ :root { /* ── Powierzchnie ── */ --mz-paper: #fff; /* karta, panel widgetu */ --mz-inset: #f4f4f3; /* zagłębienie: pasek zakładek, panel premii */ /* ── Tekst ── */ --mz-ink: #111111; /* treść główna */ --mz-ink-soft: #35363b; /* treść drugorzędna */ --mz-muted: #6e6e6e; /* podpisy, etykiety */ --mz-faint: #9a9a9a; /* najsłabszy poziom: przekreślone ceny, notki */ /* Wartość „Nie” w tabeli parametrów. Osobny token, bo w OBU motywach ma czytać się mocniej niż zwykły tekst drugorzędny — to pełnoprawna odpowiedź („nie ma tej funkcji”), a nie przypis. */ --mz-kv-no: #222; /* ── Linie ── */ --mz-line: #ececee; /* podziały wewnątrz karty */ --mz-line-2: #dbdbdb; /* obramowania elementów na tle inset */ /* ── Akcent ── Jedna zieleń w obu motywach. Wcześniej istniał drugi odcień (`--mz-green-ink: #2c7a0a`) używany na hoverze i w pogrubieniach; został ujednolicony zgodnie z decyzją, którą Essentials podjął dla akordeonów, bo w trybie ciemnym był nieczytelny, a w jasnym dawał drugą zieleń serwisu bez powodu. Nazwa zostaje — konsumują ją reguły w obu arkuszach. */ --mz-green: #4cbb17; --mz-green-ink: #4cbb17; --mz-green-wash: #eef8e6; /* tło notek warunkowych */ --mz-green-line: #cfe9bd; /* Tekst na wypełnieniu zielonym. W trybie JASNYM biel — decyzja projektowa, spójna z przyciskami w reszcie serwisu. Świadomy koszt: biel na #4cbb17 daje kontrast 2,49:1, poniżej progu WCAG AA; wariant ciemny dawałby 7,2:1. Zapisane wprost, żeby nikt tego nie „poprawiał” w drugą stronę bez rozmowy. W trybie CIEMNYM tekst jest ciemny — patrz bloki niżej. */ --mz-on-green: #fff; /* ── Pasmo nagłówka karty ── Idzie za motywem: białe w jasnym, ciemne w ciemnym. Wcześniej było ciemne w obu, jako znak rozpoznawczy widgetu — decyzja zmieniona. */ --mz-deep: #fff; --mz-deep-ink: #111; /* Tekst drugorzędny w paśmie (nazwa banku, „/5”). Odcień z palety, a nie dawny #8f8f8f: ten był dobrany pod ciemne tło i na białym dawał kontrast 3,23:1 — poniżej progu WCAG AA dla 11 px. Teraz 5,10:1, a hierarchia zostaje: bank szary, tytuł czarny. */ --mz-deep-muted: #6e6e6e; /* ── Stany ── */ --mz-amber-wash: #fff7e8; --mz-amber-line: #f4dfa8; --mz-amber-ink: #8a5a00; --mz-red-wash: #fdf6f3; --mz-red-line: #e2b4a6; --mz-red-ink: #a8442a; /* ── Odnośniki w treści ── Wygląd przepisany z motywu: podkreślenie rysowane gradientem tła, które na najechaniu zwija się do zera. Wartości biorą zmienne motywu, ale KAŻDA ma zapas — widget renderuje się także w iframe edytora bloków i w kreatorze w kokpicie, gdzie zmiennych `--cs-*` nie ma i link zostałby bez koloru. Podkreślenie ma 1px niezależnie od motywu, bo to grubość kreski, a nie element marki. */ --mz-link-ink: var(--cs-color-accent, var(--mz-green)); --mz-link-pos: var(--cs-underline-bg-position, 0 100%); /* ── Kształt i ruch ── */ --mz-radius: 20px; --mz-radius-sm: 14px; --mz-radius-xs: 10px; --mz-shadow: 0 1px 2px rgba(16, 16, 18, .04), 0 12px 32px -12px rgba(16, 16, 18, .16); --mz-ease: cubic-bezier(.16, 1, .3, 1); /* Uniesienie elementow nad tlem inset (aktywna zakladka, pigulka segmentu). W trybie ciemnym cien czarnym po czarnym nie istnieje, wiec zastepuje go delikatna obwodka — inaczej aktywna zakladka gubi krawedz. */ --mz-lift: 0 1px 2px rgba(16, 16, 18, .06), 0 1px 0 rgba(16, 16, 18, .04); --mz-lift-2: 0 1px 2px rgba(16, 16, 18, .09), 0 3px 8px -2px rgba(16, 16, 18, .1); } /* ── Tryb ciemny ── Wartości 1:1 z modułami Monazo Essentials, które działają na produkcji — akordeon i popup stoją na tej samej stronie co widget, więc karta MUSI mieć dokładnie ich #232323, a nie własny odcień. `--mz-inset` celowo równa się tłu strony (#1c1c1c): zagłębienie ma wyglądać na wycięcie w karcie, a nie na kolejną warstwę nad nią. */ html[data-scheme="dark"] { --mz-paper: #232323; --mz-inset: #1c1c1c; --mz-ink: #f3f4f6; --mz-ink-soft: #d1d5db; --mz-muted: #9ca3af; --mz-kv-no: #f3f4f6; --mz-faint: #6e6e6e; /* Pasmo nagłówka bez zmian względem poprzednich wydań. */ --mz-deep: #111111; --mz-deep-ink: #fff; /* Na ciemnym paśmie wraca jaśniejszy odcień — tam #6e6e6e byłby nieczytelny. */ --mz-deep-muted: #8f8f8f; --mz-line: #333333; --mz-line-2: #454545; /* Zieleń zostaje bez zmian — #4cbb17 czyta się na obu tłach. Zmieniają się wyłącznie tła pochodne, bo jasne washe świecą na ciemnym. */ --mz-on-green: #0e1a08; --mz-green-wash: #1e2a16; --mz-green-line: #2f4423; --mz-amber-wash: #2b2513; --mz-amber-line: #4c4120; --mz-amber-ink: #e6c56e; --mz-red-wash: #2b1a16; --mz-red-line: #5a2b22; --mz-red-ink: #f0a08c; --mz-shadow: 0 1px 2px rgba(0, 0, 0, .3), 0 12px 32px -12px rgba(0, 0, 0, .6); /* Zakładka i thumb NIE mają obwódki w jasnym, więc nie wolno im jej mieć w ciemnym — style muszą być jednorodne między motywami. Cień czarnym po czarnym jest niewidoczny i taki ma zostać: aktywność odróżnia samo tło (paper na inset), dokładnie jak w modułach Essentials. */ --mz-lift: none; --mz-lift-2: none; } /* Siatka bezpieczeństwa: skrypt motywu ustawia `data-scheme` przed pierwszym malowaniem, więc atrybut jest praktycznie zawsze. Gdyby jednak nie doszedł do skutku (JavaScript wyłączony, błąd wcześniejszego skryptu), preferencja systemu i tak zadziała. Wzorzec przepisany z modułów Essentials, żeby oba zestawy arkuszy zachowywały się tak samo. */ @media (prefers-color-scheme: dark) { html:not([data-scheme="light"]) { --mz-paper: #232323; --mz-inset: #1c1c1c; --mz-ink: #f3f4f6; --mz-ink-soft: #d1d5db; --mz-muted: #9ca3af; --mz-kv-no: #f3f4f6; --mz-faint: #6e6e6e; /* Pasmo nagłówka bez zmian względem poprzednich wydań. */ --mz-deep: #111111; --mz-deep-ink: #fff; /* Na ciemnym paśmie wraca jaśniejszy odcień — tam #6e6e6e byłby nieczytelny. */ --mz-deep-muted: #8f8f8f; --mz-line: #333333; --mz-line-2: #454545; --mz-on-green: #0e1a08; --mz-green-wash: #1e2a16; --mz-green-line: #2f4423; --mz-amber-wash: #2b2513; --mz-amber-line: #4c4120; --mz-amber-ink: #e6c56e; --mz-red-wash: #2b1a16; --mz-red-line: #5a2b22; --mz-red-ink: #f0a08c; --mz-shadow: 0 1px 2px rgba(0, 0, 0, .3), 0 12px 32px -12px rgba(0, 0, 0, .6); /* Zakładka i thumb NIE mają obwódki w jasnym, więc nie wolno im jej mieć w ciemnym — style muszą być jednorodne między motywami. Cień czarnym po czarnym jest niewidoczny i taki ma zostać: aktywność odróżnia samo tło (paper na inset), dokładnie jak w modułach Essentials. */ --mz-lift: none; --mz-lift-2: none; } }