/* * BuddyPilot: Warstwa wariantow tla sekcji (kontrakt atrybutu `background`) * * Kazdy blok motywu dziala w trzech wariantach tla: dark (navy), light (ice), * white. Wariant ustawia sie atrybutem `background` w edytorze; render dokleja * klase `bp-bg--dark|light|white` na elemencie
(patrz * inc/block-helpers.php: buddypilot_bg_class). * * ZASADA: klasa wariantu ustawia ZMIENNE, nie kolory. Reguly blokowe w * blocks.css konsumuja var(--bp-v-*) i dzieki temu nie musza wiedziec, na jakim * tle stoja. Alternatywa (11 blokow x 3 warianty = 33 zestawy overrideow) bylaby * nie do utrzymania. * * Karty o swiadomie odwrotnym kontrascie (np. .bp-persona-group, ciemna karta na * jasnej sekcji) re-deklaruja scope lokalnie i dzialaja w kazdym wariancie bez * dodatkowych regul. * * Defaulty blokow odtwarzaja dzisiejszy wyglad strony (patrz block.json kazdego * bloku), wiec istniejace wzorce nie wymagaja zmian. * * Reguly ukladu (z briefu "Biblioteka blokow"): * - pomarancz --bp-orange NIGDY jako tekst na jasnym tle: tylko wypelnienia CTA * i liczby na granacie. Na jasnym liczby schodza na --bp-tx-pri / --bp-cobalt. * - nigdy dwa te same tla z rzedu: konwencja redakcyjna, nieegzekwowana w kodzie. * * Obramowania na ciemnym tle zostaja literalami rgba w blocks.css: produkcja ma * ich 18 w dziesieciu alfach, a DS nie ma nazwanej skali. Ujednolicenie zmieni * wyglad kilkunastu krawedzi, wiec czeka na decyzje Design (handoff zwrotny). * * PULAPKA KOLEJNOSCI: ten arkusz laduje sie PRZED base.css, mimo zadeklarowanej * zaleznosci. WordPress wypisuje style blokow (block.json "style" i ich deps) * wczesniej niz style enqueue'owane w setup.php. Kolejnosc w to: * variants, blocks, base, layout, ... Dla var() nie ma to znaczenia (wartosc * rozwiazuje sie przy obliczaniu, nie przy parsowaniu), ale przy ROWNEJ * specyficznosci wygra base.css, nie wariant. Selektory wariantow maja (0,2,0), * wiec bija typowe (0,1,0) z base.css; gdyby jednak trzeba bylo przebic regule * o tej samej wadze, nie podnos specyficznosci tutaj, tylko usun hardkod tam * (tak zrobiono z `.bp-hero .bp-brand__buddy` w base.css). */ /* =================================================== Warianty: scope zmiennych =================================================== */ .bp-bg--dark { --bp-v-bg: var(--bp-navy); --bp-v-surface: var(--bp-bg-card-dark); /* karta na sekcji */ --bp-v-fg1: var(--bp-tx-l1); /* naglowki */ --bp-v-fg2: var(--bp-tx-l2); /* tekst body */ --bp-v-accent: var(--bp-tx-sky); /* akcent tekstowy (ikony, wyroznienia) */ --bp-v-label: var(--bp-tx-sky); /* .section-label */ --bp-v-em: var(--bp-sky); /* w naglowku; pomarancz jest zarezerwowany dla liczb statystyk */ --bp-v-shadow: var(--bp-sh-lg); /* --bp-sh jest liczony na rgba(10,15,30): niewidoczny na navy */ --bp-v-rule: var(--bp-border-dark-subtle); --bp-v-grid-rule: rgba(255, 255, 255, .07); /* przeswit siatki statystyk */ --bp-v-step-num: rgba(147, 197, 253, .20); /* wielka cyfra kroku: kobalt znika na granacie */ --bp-v-tag: rgba(147, 197, 253, .85); /* 7.2:1 na #0D1626 */ --bp-v-tag-bd: rgba(147, 197, 253, .30); --bp-v-stars: #FBBF24; /* 11.4:1 na navy; #78350F daje ~2:1 */ --bp-v-creds-bg: var(--bp-navy); /* kolumna poswiadczen zalozyciela */ --bp-v-c-yes: var(--bp-c-yes-dark); --bp-v-c-partial: var(--bp-c-partial-dark); --bp-v-c-no: var(--bp-c-no-dark); } .bp-bg--light { --bp-v-bg: var(--bp-ice); --bp-v-surface: var(--bp-white); --bp-v-fg1: var(--bp-tx-pri); --bp-v-fg2: var(--bp-tx-sec); --bp-v-accent: var(--bp-cobalt); --bp-v-label: var(--bp-cobalt); /* kanon DS: kicker sekcji niesie akcent */ --bp-v-em: var(--bp-cobalt); /* nigdy pomarancz na jasnym */ --bp-v-shadow: var(--bp-sh); --bp-v-rule: rgba(0, 0, 0, .12); --bp-v-grid-rule: var(--bp-border); --bp-v-step-num: rgba(25, 68, 203, .15); --bp-v-tag: var(--bp-cobalt); /* 7.68:1 na bieli */ --bp-v-tag-bd: rgba(25, 68, 203, .35); --bp-v-stars: #78350F; /* 9.1:1 na bieli */ --bp-v-creds-bg: var(--bp-white); /* kolumna poswiadczen zalozyciela */ --bp-v-c-yes: var(--bp-c-yes); --bp-v-c-partial: var(--bp-c-partial); --bp-v-c-no: var(--bp-c-no); } .bp-bg--white { --bp-v-bg: var(--bp-white); --bp-v-surface: var(--bp-ice); /* karta musi odciac sie od bieli */ --bp-v-fg1: var(--bp-tx-pri); --bp-v-fg2: var(--bp-tx-sec); --bp-v-accent: var(--bp-cobalt); --bp-v-label: var(--bp-cobalt); --bp-v-em: var(--bp-cobalt); --bp-v-shadow: var(--bp-sh); --bp-v-rule: rgba(0, 0, 0, .12); --bp-v-grid-rule: var(--bp-border); --bp-v-step-num: rgba(25, 68, 203, .15); --bp-v-tag: var(--bp-cobalt); --bp-v-tag-bd: rgba(25, 68, 203, .35); --bp-v-stars: #78350F; --bp-v-creds-bg: var(--bp-white); /* kolumna poswiadczen zalozyciela */ --bp-v-c-yes: var(--bp-c-yes); --bp-v-c-partial: var(--bp-c-partial); --bp-v-c-no: var(--bp-c-no); } /* Tlo sekcji: jedyna regula, ktora sam wariant maluje wprost. */ .bp-bg--dark, .bp-bg--light, .bp-bg--white { background: var(--bp-v-bg); } /* Naglowek i tekst sekcji. Regula bazowa `.section-header h2` w layout.css ma specyficznosc (0,1,1) i remisuje z `.page-entry__content h2` z blog.css (0,1,1), ktore laduje sie pozniej i dlatego wygrywa. Skutkiem byl ciemny naglowek na ciemnym tle dla kazdego bloku wstawionego na zwykla strone (page.php). Tu specyficznosc to (0,2,1), wiec wariant wygrywa wszedzie. */ .bp-bg--dark .section-header h2, .bp-bg--light .section-header h2, .bp-bg--white .section-header h2 { color: var(--bp-v-fg1); } .bp-bg--dark .section-header p:not(.section-label), .bp-bg--light .section-header p:not(.section-label), .bp-bg--white .section-header p:not(.section-label) { color: var(--bp-v-fg2); } .bp-bg--dark .section-header .section-label, .bp-bg--light .section-header .section-label, .bp-bg--white .section-header .section-label { color: var(--bp-v-label); border-top-color: var(--bp-v-rule); } /* =================================================== Wordmark: buddy + pilot =================================================== Filtr `the_content` (inc/brand.php) wstrzykuje wordmark wszedzie, takze w naglowki i akapity sekcji, wiec musi czytac tlo. Same kolory sa w base.css: czlon "buddy" dziedziczy kolor tekstu sekcji, a "pilot" czyta zmienna --bp-brand-pilot, ktora warianty tla ustawiaja razem z pozostalymi. */ /* =================================================== HERO: widget dashboardu =================================================== Natywnie ciemny: tlo to rgba(255,255,255,.06) liczone na granat. Na jasnej sekcji ta sama warstwa daje niemal biel, a tekst zostaje jasny, wiec widget znika. Na jasnym dostaje wlasna, nieprzezroczysta plaszczyzne. */ .bp-bg--light .bp-hero__dashboard, .bp-bg--white .bp-hero__dashboard { background: var(--bp-v-surface); border-color: var(--bp-border); box-shadow: var(--bp-v-shadow); } .bp-bg--light .bp-dashboard__title, .bp-bg--white .bp-dashboard__title { color: var(--bp-cobalt); } .bp-bg--light .bp-dashboard__row, .bp-bg--white .bp-dashboard__row { color: var(--bp-v-fg2); border-bottom-color: var(--bp-border); } /* =================================================== Przycisk outline =================================================== base.css liczy go pod ciemne sekcje (jasny tekst, jasna ramka). Na jasnym wariancie tekst musi zejsc na granat, a ramka na przydymiony granat. */ .bp-bg--light .btn-outline, .bp-bg--white .btn-outline { color: var(--bp-tx-pri); border-color: rgba(15, 31, 61, .28); } .bp-bg--light .btn-outline:hover, .bp-bg--white .btn-outline:hover { color: var(--bp-cobalt); border-color: var(--bp-cobalt); background: rgba(25, 68, 203, .06); } /* =================================================== HERO: plakietki statusu w dashboardzie =================================================== Zielen i bursztyn sa dobrane pod granat; na jasnej plaszczyznie musza sciemniec, zeby utrzymac kontrast. */ .bp-bg--light .bp-status--ok, .bp-bg--white .bp-status--ok { background: rgba(20, 83, 45, .10); color: var(--bp-success-tx); /* 9.21:1 na jasnym tle */ } .bp-bg--light .bp-status--warn, .bp-bg--white .bp-status--warn { background: rgba(120, 53, 15, .10); color: var(--bp-warning-tx); /* 9.1:1 na jasnym tle */ } /* =================================================== NAV + FOOTER: gotowe, NIEAKTYWNE =================================================== Nav i footer nie sa blokami: to header.php i footer.php (motyw jest hybrydowy, nie pelny block theme), wiec nie maja atrybutu `background`. Handoff wymienia je jako bloki 12 z 12; ponizsze reguly sa przelozone na tokeny motywu i czekaja gotowe, ale NIC ich dzis nie wlacza. Nav i footer zostaja na navy. WARUNEK NA DZIEN AKTYWACJI: ten arkusz laduje sie jako zaleznosc handle'a buddypilot-blocks, czyli TYLKO gdy na stronie jest jakis blok. Nav i footer sa zawsze, wiec aktywacja wymaga przeniesienia tej sekcji do arkusza ladowanego bezwarunkowo (base.css albo osobny handle w setup.php). Wlaczenie: dodac klase bp-bg--* na
/