/** * Mito Design Tokens - jedno zrodlo prawdy dla designu mitoterapii * * Tokeny CSS (custom properties) wystawione globalnie na :root. Zrodlem marki jest * AT Framework (Advanced Themer) - kazdy token referuje zmienna AT z hex-fallbackiem * (wzorzec `var(--at-*, #hex)`). Fallback dziala tam, gdzie zmienne sie nie laduja * (mail, iframe, izolowany kontekst). * * To NIE jest rownolegly framework, tylko warstwa semantyczna: nadaje rolom nazwy * (`--mito-color-border`) i wskazuje, ktora zmienna AT te role pelni. Sam AT robi * dokladnie to samo (`--at-btn-primary-background: var(--at-primary)`). * * Historia: do 2026-07-12 zrodlem byl ACSS (`var(--primary, #hex)`). Plugin zostal * wylaczony, zmienne przepisane na AT, a rownolegla warstwa 92 zmiennych `--mito-*` * w Bricks Variable Managerze zlikwidowana (zostalo 6). Szczegoly: docs/migracja-css/PLAN.md. * * Marka mitoterapii: firmowy turkus #0ba1bf (NIE granat #1a3a7e - to kolor MediRaty). * Font: Montserrat (body + naglowki), body weight 400. * * DARK MODE (od 2026-07-13). Wiekszosc tokenow odwraca sie ZA DARMO, bo wskazuje na kolor * palety AT, a kazdy kolor AT ma osobne rawValue dla light i dark. Wariantu dark wymagaja * tylko te role, dla ktorych AT nie ma odpowiednika (powierzchnia, hairline, tekst stonowany, * cienie) - siedza w bloku html[data-theme="dark"] nizej. Przelacznikiem jest atrybut * data-theme na , ustawiany przez AT (element brxc-darkmode-toggle). * * Dokumentacja i zasady uzycia: docs/specs/ref-design-system.md * Przyszla migracja: prefix --mito-* -> --lukuro-* (Lukuro Framework). * * @author lukuro */ :root { /* ---------- Kolory: marka / akcja ---------- */ --mito-color-primary: var(--at-primary, #0ba1bf); --mito-color-primary-hover: var(--at-primary-l-1, #37b2cb); --mito-color-primary-active: var(--at-primary-d-2, #076e82); --mito-color-accent: var(--at-primary-d-1, #0987a0); /* Tekst na tle primary. Wskazuje na --at-white, wiec odwraca sie sam: biel w light, grafit w dark. To ten sam mechanizm, ktorego uzywa Bricks (--at-white jako `color` w 134 miejscach). W dark daje 6.03:1 na turkusie (AA). UWAGA: w light to biel na turkusie = 3.06:1, ponizej AA. Znane, zmierzone, swiadomie NIE naprawiane - naprawa zmienia odcien marki na produkcji. */ --mito-color-on-primary: var(--at-white, #ffffff); /* ---------- Kolory: tla i powierzchnie ---------- */ /* bg jedzie na --at-white: biel w light, grafit hsla(190,24%,7%) w dark (04-dark-mode.php). Czysta czern zostala z niego swiadomie usunieta - patrz naglowek tamtego skryptu. */ --mito-color-bg: var(--at-white, #ffffff); --mito-color-surface: #ffffff; --mito-color-surface-tint: var(--at-primary-l-5, #d1eff4); /* Neutralne tlo drugiego planu: placeholdery miniatur, hover pozycji listy, tor paska postepu. W light ledwie odcina sie od bieli (1.12:1) i tak ma byc. */ --mito-color-surface-subtle: #f1f2f3; /* ---------- Kolory: bordery ---------- */ --mito-color-border: var(--at-primary-t-5, rgba(11, 161, 191, 0.2)); --mito-color-hairline: rgba(20, 24, 28, 0.09); /* Obramowanie kontrolek (inputy, radio, pierscien wyboru). Grubsza kreska niz hairline. */ --mito-color-border-control: #d2d5d9; /* ---------- Kolory: tekst ---------- */ /* Fallback siedzi wewnatrz var(), wiec color-mix zadziala takze, gdy zmienne AT sie nie zaladuja. AT nie ma slotu na kolor tekstu, a to 80% odcienia naglowkowego. W dark --at-primary-d-5 lustruje sie na jasny teal, wiec tekst odwraca sie sam. */ --mito-color-text: color-mix(in srgb, var(--at-primary-d-5, #022931) 80%, transparent); --mito-color-text-muted: #5b626a; /* ---------- Kolory: stany ---------- */ /* ACSS nigdy ich nie definiowal - jada na hex-fallbackach. Podmiana na --at-* zmienilaby m.in. gwiazdki opinii ze zlotych na turkusowe. ZIELEN IDZIE PO SLOT BRICKSA (decyzja usera 2026-08-26). `var(--success, ...)` NIGDY nie trafialo w nic: zmierzone tego dnia - siedem plikow w `uploads/automatic-css/` zawiera slowo "success" ZERO razy, wiec przez caly czas dzialal fallback `#32cd53`, czyli nasza wlasna zielen obok zieleni motywu. `--bricks-text-success` (`#11b76b`) i `--bricks-bg-success` (`#e6f6ed`) przychodza z `frontend-light.min.css`, ktory Bricks laduje zawsze - to ten sam odcien, ktorym motyw maluje wlasne komunikaty. */ --mito-color-success: var(--bricks-text-success, #11b76b); --mito-color-danger: var(--danger, #d92638); /* Komunikaty w ramce (box sukcesu / bledu): tlo + tekst na nim. Rola TEKSTOWA nie moze wziac surowej zieleni motywu: `#11b76b` na bieli daje 2,62:1 przy progu 4,5:1 (a takze ponizej 3:1 wymaganych dla elementow nietekstowych). Bierze wiec TEN SAM odcien przyciemniony do 62% - skalowanie wszystkich skladowych zachowuje barwe i nasycenie, wiec ton zostaje ten sam (`#0b7142`), a kontrast idzie z 2,62:1 na 6,08:1 wobec bieli, 5,43:1 wobec wlasnego tla i 5,39:1 wobec tinty 12%. Liczone z tokenu, nie wpisane hexem: gdy klientka zmieni zielen w palecie Bricksa, tekst pojdzie za nia sam. */ --mito-color-success-bg: var(--bricks-bg-success, #e6f6ed); --mito-color-success-text: color-mix(in srgb, var(--bricks-text-success, #11b76b) 62%, black); --mito-color-danger-bg: #fee2e2; --mito-color-danger-text: #991b1b; /* Zlote gwiazdki opinii. Swiadomie NIE sa kolorem marki i nie odwracaja sie: 11.06:1 na tle dark, 1.67:1 na bieli (to wypelnienie ikony, nie tekst - AA ich nie dotyczy). */ --mito-color-star: #fbbf24; --mito-color-star-empty: rgba(0, 0, 0, 0.2); /* Pasek krokow checkoutu (koszyk -> podsumowanie -> przyjete). Komponent zyje w builderze i trzyma wlasne zmienne (--bg-color / --empty-color / --active-color); 05-dark-mode-bricks.php przepina je na te tokeny. Wartosci light sa DOKLADNIE takie, jak byly zahardkodowane - light nie zmienia sie o jeden odcien. */ --mito-color-steps-bg: #f2fcfe; --mito-color-steps-empty: #ffffff; --mito-color-steps-active: #daf8ff; /* ---------- Radiusy (skala AT, odwzorowanie ACSS 1:1) ---------- */ --mito-radius-xs: var(--at-radius--xs, 8.8888888889px); --mito-radius-sm: var(--at-radius--s, 13.3333333333px); --mito-radius-md: var(--at-radius--m, 20px); --mito-radius-lg: var(--at-radius--l, 30px); --mito-radius-pill: 999px; /* ---------- Typografia ---------- */ --mito-font-family: var(--text-font-family, "Montserrat", sans-serif); --mito-font-weight-body: 400; --mito-font-weight-medium: 500; --mito-font-size-sm: 0.8125rem; --mito-font-size-base: 1rem; --mito-line-height-base: 1.55; --mito-line-height-tight: 1.3; /* ---------- Cienie ---------- */ --mito-shadow-modal: 0 1px 1px rgba(20, 24, 28, 0.04), 0 10px 20px -10px rgba(20, 24, 28, 0.18), 0 28px 56px -20px rgba(16, 19, 23, 0.3); --mito-shadow-card: var(--at-shadow--m, 0 20px 5px -5px rgba(0, 0, 0, 0.02), 0 8px 10px -6px rgba(0, 0, 0, 0.05)); } /* --------------------------------------------------------------------------- DARK MODE - tylko role, ktorych AT nie ma Wszystko, co wskazuje na kolor palety AT (primary, bg, border, text, surface-tint, on-primary), odwraca sie samo i NIE powtarza sie tutaj. Ponizej siedza wylacznie tokeny, ktore w light trzymaly literal, bo AT nie ma dla nich slotu. Wartosci dobrane pomiarem kontrastu WCAG, nie na oko. Liczby w komentarzach to zmierzone wspolczynniki - patrz raport sesji 2026-07-13. --------------------------------------------------------------------------- */ html[data-theme="dark"] { /* Powierzchnia kart i modali. Musi byc JASNIEJSZA od tla strony (w dark elevation idzie w gore jasnoscia, nie cieniem). Tlo = hsla(190,24%,7%), tu 15%: elevation 1.26:1, a --at-primary jako link na tej powierzchni ma 4.80:1 (AA). Wyzej sie nie da - przy 18% primary spada do 4.26:1 i wypada z AA. */ --mito-color-surface: hsla(190, 16%, 15%, 1); /* Tlo drugiego planu idzie o szczebel WYZEJ niz powierzchnia (1.31:1), a nie nizej - w dark mode "glebiej" znaczy jasniej. */ --mito-color-surface-subtle: hsla(190, 12%, 22%, 1); /* Hairline odwraca kierunek: ciemna kreska na jasnym -> jasna na ciemnym. */ --mito-color-hairline: rgba(255, 255, 255, 0.12); /* Obramowanie kontrolek: 3.01:1 wobec powierzchni, czyli AA dla elementow UI. (W light ten sam token ma 1.47:1 i AA nie spelnia - znane, patrz raport.) */ --mito-color-border-control: rgba(255, 255, 255, 0.34); /* Tekst stonowany. 7.04:1 na tle strony, 5.7:1 na powierzchni (AA). Lustro jasnosci tokenu z light (#5b626a, 6.18:1 na bieli). */ --mito-color-text-muted: hsla(195, 9%, 62%, 1); /* Czerwien bledu musi sie rozjasnic: #d92638 z light ma na ciemnym tle tylko 3.77:1 i NIE przechodzi AA. Ten wariant daje 5.69:1 na tle i 4.53:1 na karcie. (Zieleni sukcesu rozjasniac nie trzeba: `--bricks-text-success` #11b76b ma na tle ciemnym 6.9:1, wiec `--mito-color-success` zostaje bez wariantu dark. Rola tekstowa i tlo boxu maja ponizej swoje - przyciemniony wariant z light bylby na ciemnym nieczytelny.) */ --mito-color-danger: hsla(354, 72%, 65%, 1); /* Boxy komunikatow: tlo przyciemnione do poziomu powierzchni, tekst rozjasniony. Sukces 9.09:1, blad 8.25:1 - oba z zapasem ponad AA. */ --mito-color-success-bg: hsla(160, 40%, 14%, 1); --mito-color-success-text: hsla(158, 60%, 72%, 1); --mito-color-danger-bg: hsla(354, 38%, 15%, 1); --mito-color-danger-text: hsla(354, 80%, 80%, 1); /* Pusta gwiazdka: czarna z alfa na bieli -> biala z alfa na ciemnym. */ --mito-color-star-empty: rgba(255, 255, 255, 0.24); /* Pasek krokow checkoutu: jasny blok w light, ciemny w dark. Tlo o szczebel ciemniejsze niz powierzchnia (to pas pod naglowkiem, nie karta), kolko puste jasniejsze, kolko aktywne w turkusie marki. */ --mito-color-steps-bg: hsla(190, 20%, 11%, 1); --mito-color-steps-empty: hsla(190, 14%, 20%, 1); --mito-color-steps-active: hsla(190, 55%, 25%, 1); /* Cien na ciemnym tle prawie nie istnieje - sama czern na czerni nic nie rzezbi. Glebia idzie z obwodki (1px jasnej kreski) plus mocniejszy rzut. */ --mito-shadow-modal: 0 0 0 1px rgba(255, 255, 255, 0.08), 0 10px 20px -10px rgba(0, 0, 0, 0.6), 0 28px 56px -20px rgba(0, 0, 0, 0.8); --mito-shadow-card: 0 0 0 1px rgba(255, 255, 255, 0.06), 0 8px 10px -6px rgba(0, 0, 0, 0.5); } /* ---------- Wysokosc headera ---------- --at-header-height (100px desktop / 90px <=990px) NIE jest ustawiana tutaj. AT ma na nia dedykowany blok w swoim custom CSS (Theme Settings -> Advanced CSS, "Manually set the header height at different breakpoints") i ustawia ja tam na `body`, per breakpoint. Wartosc z `body` dziedziczy sie do wszystkich potomkow, wiec przykryje cokolwiek zdefiniujemy tu na :root - niezaleznie od specyficznosci, bo to inny element w lancuchu dziedziczenia, a nie konkurencyjna regula. Blok AT byl fabrycznym placeholderem (150px, "Measure and set manually") - wypelnia go docs/migracja-css/03-konsolidacja.php. Jesli kiedys wysokosc headera sie zmieni, zmieniaj TAM, nie tutaj. */ /* ============================================================ * Aliasy slotow semantycznych frameworka Lukuro (v1.16.0+). * Arkusze modulow frameworka (reviews, sticky-atc, cat-nav, * free-shipping, timeline) konsumuja var(--lukuro-color-*) * z fallbackami; aliasy podpinaja je do warstwy semantycznej * mitoterapii, wiec odwracaja sie razem z motywem dark * (var() rozwiazuje sie dynamicznie - redefinicja --mito-color-* * w html[data-theme="dark"] przeplywa przez alias). * ============================================================ */ :root { --lukuro-color-primary: var(--mito-color-primary); --lukuro-color-on-primary: var(--mito-color-on-primary); --lukuro-color-surface: var(--mito-color-surface); --lukuro-color-surface-subtle: var(--mito-color-surface-subtle); --lukuro-color-hairline: var(--mito-color-hairline); --lukuro-color-border-control: var(--mito-color-border-control); --lukuro-color-text: var(--mito-color-text); --lukuro-color-text-muted: var(--mito-color-text-muted); --lukuro-color-success: var(--mito-color-success); --lukuro-color-success-bg: var(--mito-color-success-bg); --lukuro-color-success-text: var(--mito-color-success-text); --lukuro-color-danger: var(--mito-color-danger); --lukuro-color-danger-bg: var(--mito-color-danger-bg); --lukuro-color-danger-text: var(--mito-color-danger-text); --lukuro-color-star: var(--mito-color-star); --lukuro-color-star-empty: var(--mito-color-star-empty); }