/* ========================================================================== BookMint — FRONTEND (część publiczna): warstwa kontekstowa tokenów Wymaga wcześniejszego wczytania bookmint-core.css (źródło wartości). Ten plik NIE definiuje wartości kolorów — aliasuje prymitywy --bm-* na role frontendu i dokłada logikę, której panel nie ma: dziedziczenie z motywu WordPressa oraz wyliczanie wariantów akcentu. Kolejność wczytania: bookmint-core.css → tokens.css → components.css Kontener aplikacji musi mieć klasę .bmf. DWA TRYBY TYPOGRAFII I KOLORU TEKSTU ------------------------------------ .bmf → tryb DOMYŚLNY „dziedzicz z motywu". Fonty i kolor tekstu pochodzą z motywu WordPressa (inherit). BookMint dostarcza wyłącznie strukturę, powierzchnie, linie i akcent. Odcienie przygaszone są wyliczane z koloru tekstu motywu przez color-mix(), więc pozostają czytelne w każdym motywie. .bmf.bmf--styled → tryb OPCJONALNY „styl BookMint". Włącza typografię atom packa (Space Grotesk / Plus Jakarta Sans) i własne kolory tekstu oraz tło strony. Sterowane ustawieniem „Wygląd → typografia: motyw / BookMint". Liczby zawsze idą monospace (--bmf-font-mono) — także w trybie dziedziczenia. To świadomy wyjątek: kolumny kwot i godzin muszą być tabelaryczne. RÓŻNICE KONTEKSTOWE wobec panelu — patrz tabela w tokens.css paczki panelu. ========================================================================== */ .bmf { /* ==== TYPOGRAFIA ======================================================= */ /* Tryb domyślny: dziedziczenie. Nadpisywane w .bmf--styled poniżej. */ --bmf-font-body: inherit; --bmf-font-heading: inherit; --bmf-font-mono: var(--bm-font-mono); /* Rodziny BookMint trzymane pod ręką dla trybu „styl BookMint”. */ --bmf-font-display: var(--bm-font-display); --bmf-font-ui: var(--bm-font-ui); /* ==== KOLOR TEKSTU ==================================================== W trybie dziedziczenia tekst główny to kolor motywu (currentColor), a odcienie pomocnicze są z niego wyliczane — nie ma więc ryzyka, że szary #7C8388 wyląduje na ciemnym tle ciemnego motywu. Fallback (pierwsza deklaracja) dla przeglądarek bez color-mix. */ --bmf-ink: currentColor; --bmf-ink-2: var(--bm-warm-700); --bmf-ink-2: color-mix(in srgb, currentColor 76%, transparent); --bmf-muted: var(--bm-warm-500); --bmf-muted: color-mix(in srgb, currentColor 58%, transparent); --bmf-disabled: var(--bm-warm-450); --bmf-disabled: color-mix(in srgb, currentColor 38%, transparent); /* ==== POWIERZCHNIE I LINIE ============================================ Zawsze własne (nie dziedziczone): karta musi być kartą niezależnie od motywu. Ciepła, całkowicie odbarwiona skala z warstwy kanonicznej. */ --bmf-page: var(--bm-warm-50); --bmf-surface: var(--bm-white); --bmf-surface-2: var(--bm-warm-25); --bmf-line: var(--bm-warm-200); --bmf-line-strong: var(--bm-warm-300); /* hover karty */ --bmf-hair: var(--bm-warm-100); --bmf-control-line: var(--bm-warm-400); /* obwódka radio i checkboxa */ --bmf-ink-strong: var(--bm-warm-900); /* pigułki „ink”, tło segmentu */ --bmf-on-ink: var(--bm-white); /* Wzór placeholdera zdjęcia (do zastąpienia ) */ --bmf-thumb-a: var(--bm-warm-100); --bmf-thumb-b: var(--bm-warm-200); --bmf-thumb-ink: var(--bm-warm-600); /* ==== AKCENT: jedyna zmienna markowa ================================== Ustawienie „Wygląd → kolor akcentu" wstrzykuje inline na .bmf tylko --bmf-accent. Warianty liczy CSS (poniżej) albo serwer (patrz reguła). REGUŁA AUTO-KONTRASTU — implementacja serwerowa (PHP), obowiązująca zawsze, bo --bmf-on-accent nie da się policzyć w CSS: 1. Znormalizuj składowe: c = channel / 255 2. Linearyzuj: c_lin = (c <= 0.03928) ? c / 12.92 : ((c + 0.055) / 1.055) ^ 2.4 3. Luminancja: L = 0.2126*R_lin + 0.7152*G_lin + 0.0722*B_lin 4. Kontrast do bieli: Cw = 1.05 / (L + 0.05) Kontrast do grafitu --bm-ink-absolute #15171A (L ≈ 0.0111): Cd = (L+0.05)/0.0611 5. --bmf-on-accent = (Cw >= 4.5) ? #FFFFFF : (Cd >= 4.5) ? #15171A : ten z dwóch, który ma wyższy kontrast + ZACIEMNIJ akcent, aż Cw >= 4.5 (krok: -4% L) 6. --bmf-accent-soft = akcent 9% na tle --bmf-surface --bmf-accent-line = akcent 28% na tle --bmf-surface (mieszanie w sRGB; te same proporcje co color-mix niżej) Efekt: jasny akcent (np. limonka) dostaje ciemny tekst i przygaszone tło; ciemny akcent — biały tekst. CTA nigdy nie schodzi poniżej 4.5:1. Wartość zapisuj razem z akcentem w opcjach wtyczki, nie licz przy każdym renderze. */ --bmf-accent: var(--bm-accent-default); --bmf-on-accent: var(--bm-white); /* nadpisywane inline przez regułę wyżej */ --bmf-accent-soft: var(--bm-accent-soft-fallback); --bmf-accent-soft: color-mix(in srgb, var(--bmf-accent) 9%, var(--bmf-surface)); --bmf-accent-line: var(--bm-accent-line-fallback); --bmf-accent-line: color-mix(in srgb, var(--bmf-accent) 28%, var(--bmf-surface)); /* ==== STATUSY — niezależne od akcentu ================================= Sukces i informacja MUSZĄ mieć własny kolor, nie akcent: inaczej po zmianie akcentu na czerwony „potwierdzone" zrobi się czerwone. Odcienie przygaszone, żeby nie konkurowały z CTA. */ --bmf-success: var(--bm-ok-fg-quiet); --bmf-success-soft: var(--bm-ok-bg-quiet); --bmf-info: var(--bm-info-fg-quiet); --bmf-info-soft: var(--bm-info-bg-quiet); --bmf-warn: var(--bm-warn-fg-quiet); --bmf-warn-soft: var(--bm-warn-bg-quiet); --bmf-danger: var(--bm-error-fg-quiet); --bmf-danger-soft: var(--bm-error-bg-quiet); --bmf-danger-line: var(--bm-error-line-quiet); /* ==== HERO I LIGHTBOX (neutralny grafit, nie zieleń) ================== */ --bmf-hero: var(--bm-graphite-900); --bmf-hero-solid: var(--bm-graphite-800); --bmf-hero-gradient: linear-gradient(140deg, var(--bm-graphite-850), var(--bm-graphite-700) 60%, var(--bm-graphite-800)); --bmf-hero-ink: var(--bm-hero-ink); --bmf-hero-ink-2: var(--bm-hero-ink-2); --bmf-hero-ink-3: var(--bm-hero-ink-3); --bmf-hero-chip: var(--bm-hero-chip); --bmf-hero-chip-line: var(--bm-hero-chip-line); --bmf-scrim: var(--bm-scrim); --bmf-overlay: var(--bm-overlay); --bmf-spinner-track: var(--bm-spinner-track); /* ==== PROMIENIE ======================================================= */ --bmf-radius-xs: var(--bm-radius-xs); --bmf-radius-sm: var(--bm-radius-sm); --bmf-radius-md: var(--bm-radius-md); --bmf-radius-lg: var(--bm-radius-lg); --bmf-radius-xl: var(--bm-radius-xl); --bmf-radius-pill: var(--bm-radius-pill); /* ==== CIENIE ========================================================== */ --bmf-elev-1: var(--bm-elev-1-warm); --bmf-elev-2: var(--bm-elev-2-warm); --bmf-elev-3: var(--bm-elev-3-warm); --bmf-elev-bar: var(--bm-elev-bar-warm); /* ==== ODSTĘPY ========================================================= */ --bmf-space-1: var(--bm-space-1); --bmf-space-2: var(--bm-space-2); --bmf-space-3: var(--bm-space-3); --bmf-space-4: var(--bm-space-4); --bmf-space-5: var(--bm-space-5); --bmf-space-6: var(--bm-space-6-wide); --bmf-space-7: var(--bm-space-7-wide); --bmf-space-8: var(--bm-space-8-wide); /* ==== FOCUS =========================================================== */ --bmf-focus-ring: var(--bm-focus-ring); --bmf-focus-offset: var(--bm-focus-offset); --bmf-focus-color: var(--bmf-accent); /* front: pierścień w kolorze akcentu */ --bmf-focus-color-invert: var(--bm-focus-color-invert); /* ==== SKALA TYPOGRAFII (front jest przestrzenny: hero H1 52px) ======== W trybie dziedziczenia rozmiary nadal pochodzą stąd — motyw dostarcza rodzinę i kolor, BookMint rytm. Jeśli motyw ma narzucić także rozmiary, nadpisz te zmienne na .bmf w arkuszu motywu. */ --bmf-h1: 52px; --bmf-h1-m: 32px; --bmf-h1-sub: 40px; --bmf-h1-sub-m: 27px; --bmf-h2: 27px; --bmf-h2-m: 22px; --bmf-h3: 19.5px; --bmf-lead: 17px; --bmf-lead-m: 15px; --bmf-body: 15px; --bmf-sm: 13.5px; --bmf-xs: 12.5px; --bmf-label: 12.5px; --bmf-eyebrow: 11px; --bmf-price: 27px; /* ==== IKONY I GEOMETRIA =============================================== */ --bmf-icon-stroke: 1.9; --bmf-max-width: 1240px; --bmf-aside: 372px; --bmf-aside-checkout: 350px; --bmf-sticky-top: 16px; --bmf-tap: var(--bm-tap); } /* --- Tryb „styl BookMint" (opt-in) --------------------------------------- Włącz klasą .bmf--styled na kontenerze, gdy użytkownik wybierze typografię BookMint. Bez tej klasy wtyczka nie narzuca motywowi ani fontu, ani koloru tekstu, ani tła strony. ------------------------------------------------- */ .bmf.bmf--styled { --bmf-font-body: var(--bmf-font-ui); --bmf-font-heading: var(--bmf-font-display); --bmf-ink: var(--bm-warm-900); --bmf-ink-2: var(--bm-warm-700); --bmf-muted: var(--bm-warm-500); --bmf-disabled: var(--bm-warm-450); } /* --- Motyw ciemny po stronie frontu --------------------------------------- Nie ma osobnego trybu ciemnego: kolor tekstu dziedziczy motyw, więc treść jest czytelna od razu. Jeżeli motyw jest ciemny, nadpisz w jego arkuszu wyłącznie powierzchnie i linie — struktura klas .bmf-* pozostaje ta sama: .bmf { --bmf-page: #121512; --bmf-surface: #1A1E1B; --bmf-surface-2: #20241F; --bmf-line: #2C332D; --bmf-hair: #232823; --bmf-ink-strong: #EDEFEC; --bmf-on-ink: #121512; } W trybie ciemnym pamiętaj o ponownym przeliczeniu --bmf-on-accent regułą auto-kontrastu — tło zmieniło się, ale akcent nie. ---------------------- */