/* * tokens.css — znormalizowana skala wartości. * * Jedno źródło prawdy dla liczb i kolorów w arkuszach theme'u. W odróżnieniu * od wersji z paczki `theme-patch` tokeny NIE powtarzają liczb literalnie, * tylko wskazują na presety generowane z theme.json (`--wp--preset--*`, * `--wp--custom--*`). Powód jest prozaiczny: literalna kopia rozjeżdża się * przy pierwszej zmianie palety w Edytorze witryny — wtedy szablony (presety) * i arkusz (kopia) pokazują dwa różne odcienie. Tu wartość jest dokładnie * jedna, w theme.json, a ten plik daje jej krótką nazwę. * * Zasada: w arkuszach theme'u nie pojawia się liczba ani hex, którego nie ma * poniżej. Brakuje stopnia — dopisujesz go do theme.json i tutaj, nie do * reguły. * * Skale po normalizacji (patrz NORMALIZACJA.md w projekcie designu): * odstępy 4 8 12 16 20 24 32 40 48 56 64 80 96 128 * pismo 12 14 16 18 22 28 36 46 58 * wysokości 28 34 44 54 (kontrolki) + 56 (awatar) * ikony 16 18 22 28 * promienie 2 (kontrolki) 4 (karty, media) 999 (badge) */ :root { /* --------------------------------------------------------------- Kolor. Każdy hex i rgba, który dotąd siedział wpisany w regułach albo w markupie bloków, ma tu nazwę i preset w theme.json. --------------------------------------------------------------- */ --surface-page: var(--wp--preset--color--base); --surface-warm: var(--wp--preset--color--base-alt); --surface-card: var(--wp--preset--color--surface-card); --surface-deep: var(--wp--preset--color--surface-deep); --surface-inverse: var(--wp--preset--color--primary); --surface-inverse-light: var(--wp--preset--color--primary-light); --surface-inverse-deep: var(--wp--preset--color--primary-dark); --text-body: var(--wp--preset--color--contrast); --text-muted: var(--wp--preset--color--contrast-muted); --text-heading: var(--wp--preset--color--primary); --text-accent: var(--wp--preset--color--accent-mid); --text-accent-deep: var(--wp--preset--color--accent-deep); --text-on-dark: var(--wp--preset--color--on-dark); --text-on-dark-warm: var(--wp--preset--color--base-alt); --text-on-dark-muted: var(--wp--preset--color--on-dark-muted); --accent: var(--wp--preset--color--accent); --accent-soft: var(--wp--preset--color--accent-soft); --sage: var(--wp--preset--color--sage); --sale: var(--wp--preset--color--sale); --sale-soft: var(--wp--preset--color--sale-soft); --ok: var(--wp--preset--color--ok); --hairline: var(--wp--preset--color--hairline); --hairline-strong: var(--wp--preset--color--hairline-strong); --hairline-on-dark: var(--wp--preset--color--hairline-on-dark); --veil-cream: var(--wp--custom--veil-cream); --scrim: var(--wp--custom--scrim); --focus-ring: var(--accent); --focus-ring-shadow: var(--wp--custom--focus-ring); /* --------------------------------------------------------------- Odstępy — jedna skala 4-bazowa. Wartości 2, 6, 9, 10, 14, 18, 26 i 30 px z poprzedniego arkusza są zsnapowane do najbliższego stopnia (NORMALIZACJA.md, tabele 3 i 4). --------------------------------------------------------------- */ --space-1: var(--wp--preset--spacing--10); --space-2: var(--wp--preset--spacing--20); --space-3: var(--wp--preset--spacing--25); --space-4: var(--wp--preset--spacing--30); --space-5: var(--wp--preset--spacing--35); --space-6: var(--wp--preset--spacing--40); --space-8: var(--wp--preset--spacing--50); --space-10: var(--wp--preset--spacing--55); --space-12: var(--wp--preset--spacing--60); --space-14: var(--wp--preset--spacing--65); --space-16: var(--wp--preset--spacing--68); --space-20: var(--wp--preset--spacing--75); --space-24: var(--wp--preset--spacing--70); --space-32: var(--wp--preset--spacing--80); /* Odstępy wewnątrz kontrolek — jedna para na rozmiar. Koniec z „6px 12px", „8px 10px", „14px 26px", „9px 16px". */ --pad-control-xs: var(--wp--custom--pad-control--xs); --pad-control-sm: var(--wp--custom--pad-control--sm); --pad-control-md: var(--wp--custom--pad-control--md); --pad-control-lg: var(--wp--custom--pad-control--lg); --pad-card: var(--space-5); --pad-card-lg: var(--space-8); /* --------------------------------------------------------------- Pismo — 9 stopni. 11 → 12, 13 → 14, 20 → 22, 30 → 28. --------------------------------------------------------------- */ --font-display: var(--wp--preset--font-family--heading); --font-body: var(--wp--preset--font-family--body); --font-script: var(--wp--preset--font-family--script); --text-2xs: var(--wp--preset--font-size--tiny); --text-sm: var(--wp--preset--font-size--small); --text-base: var(--wp--preset--font-size--medium); --text-md: var(--wp--preset--font-size--md); --text-lg: var(--wp--preset--font-size--large); --text-xl: var(--wp--preset--font-size--xl); --text-2xl: var(--wp--preset--font-size--x-large); --text-3xl: var(--wp--preset--font-size--xx-large); --text-4xl: var(--wp--preset--font-size--huge); --leading-tight: 1.08; --leading-snug: 1.22; --leading-normal: 1.5; --leading-relaxed: 1.72; --weight-light: 300; --weight-regular: 400; --weight-medium: 500; --weight-semibold: 600; --tracking-wide: var(--wp--custom--tracking--wide); --tracking-wider: var(--wp--custom--tracking--wider); --tracking-widest: var(--wp--custom--tracking--widest); /* Role typograficzne. Skrót `font:` ustawia naraz wagę, stopień, interlinię i krój — dzięki temu nie da się użyć rozmiaru bez jego interlinii, co było źródłem połowy rozjazdów. */ --type-hero: var(--weight-light) var(--text-4xl) / var(--leading-tight) var(--font-display); --type-h1: var(--weight-regular) var(--text-3xl) / var(--leading-tight) var(--font-display); --type-h2: var(--weight-regular) var(--text-2xl) / var(--leading-snug) var(--font-display); --type-h3: var(--weight-medium) var(--text-lg) / var(--leading-snug) var(--font-display); --type-eyebrow: var(--weight-semibold) var(--text-2xs) / 1.2 var(--font-body); --type-body: var(--weight-regular) var(--text-base) / var(--leading-relaxed) var(--font-body); --type-body-sm: var(--weight-regular) var(--text-sm) / var(--leading-normal) var(--font-body); --type-label: var(--weight-semibold) var(--text-sm) / 1.3 var(--font-body); --type-price: var(--weight-medium) var(--text-md) / 1.2 var(--font-body); --type-script: var(--weight-regular) var(--text-2xl) / 1.25 var(--font-script); /* --------------------------------------------------------------- Wysokości i rozmiary. 26/28 → 28, 36/38 → 34, 40 → 44, 48 → 56. --------------------------------------------------------------- */ --control-h-xs: var(--wp--custom--control-h--xs); --control-h-sm: var(--wp--custom--control-h--sm); --control-h-md: var(--wp--custom--control-h--md); --control-h-lg: var(--wp--custom--control-h--lg); --avatar-size: var(--wp--custom--avatar-size); --icon-sm: var(--wp--custom--icon--sm); --icon-md: var(--wp--custom--icon--md); --icon-lg: var(--wp--custom--icon--lg); --icon-xl: var(--wp--custom--icon--xl); /* Nagłówek na telefonie: pasek 64 px z logo 30 px. Oba stopnie są spoza skali (48/56 dla wysokości), bo pochodzą wprost z projektu „header mobilny” i dotyczą wyłącznie tego jednego paska. */ --header-h-mobile: var(--wp--custom--header-h-mobile); --logo-h-mobile: var(--wp--custom--logo-h-mobile); /* Koszyk: pełny ekran na telefonie (jak menu) i szuflada 440 px na desktopie. Miniatura pozycji 64 px, na desktopie 72 px — oba stopnie spoza skali ikon, bo to media, nie ikony. Plakietka ma własną wysokość 22 px, jak Badge w systemie projektowym. */ --badge-h: var(--wp--custom--badge-h); --cart-thumb: var(--wp--custom--cart-thumb); --cart-thumb-lg: var(--wp--custom--cart-thumb-lg); --drawer-w: var(--wp--custom--drawer-w); --hero-h: var(--wp--custom--hero-h); --hero-h-compact: var(--wp--custom--hero-h-compact); --sticky-offset: var(--wp--custom--sticky-offset); --sticky-offset-admin: var(--wp--custom--sticky-offset-admin); --measure-prose: var(--wp--custom--measure-prose); /* --------------------------------------------------------------- Promienie, cienie, ruch --------------------------------------------------------------- */ --radius-control: var(--wp--custom--radius--control); --radius-card: var(--wp--custom--radius--card); --radius-pill: var(--wp--custom--radius--pill); --shadow-card: var(--wp--preset--shadow--card); --shadow-card-hover: var(--wp--preset--shadow--card-hover); --shadow-raised: var(--wp--preset--shadow--raised); --duration-fast: var(--wp--custom--duration--fast); --duration-base: var(--wp--custom--duration--base); --duration-slow: var(--wp--custom--duration--slow); --easing-standard: var(--wp--custom--easing--standard); --easing-entrance: var(--wp--custom--easing--entrance); --blur-veil: var(--wp--custom--blur-veil); }