/** * ╔══════════════════════════════════════════════════════════════════╗ * ║ GESELLE — Design Tokens ║ * ║ 3-layer system: Primitive → Semantic → Component ║ * ╠══════════════════════════════════════════════════════════════════╣ * ║ Stack: WordPress + Goldish 3.47 + Elementor Pro + Child Theme ║ * ║ WCAG: 2.1 AA compliance ║ * ║ Generated: 2026-04-12 ║ * ╠══════════════════════════════════════════════════════════════════╣ * ║ WP: wp_enqueue_style('geselle-tokens', ║ * ║ get_stylesheet_directory_uri().'/design-tokens.css'); ║ * ║ HTML: ║ * ╚══════════════════════════════════════════════════════════════════╝ * * ZASADY UŻYWANIA: * ✓ Nowe komponenty: używaj --geselle-* (semantic) lub komponentowych * ✓ Overrides Goldish: używaj --geselle-* → mapuje na --ip-color-accent * ✗ Nie używaj primitive --color-* bezpośrednio w komponentach * ✗ Nie hardkoduj wartości hex (#755400) w stylach * ✗ !important TYLKO dla display:none w izolacji checkout */ /* ════════════════════════════════════════════════════════════════════ LAYER 1 — PRIMITIVE TOKENS Surowe wartości bez semantycznego znaczenia. Nigdy nie używaj bezpośrednio w komponentach — użyj Layer 2. ════════════════════════════════════════════════════════════════════ */ :root { /* ── Kolory: Gold ─────────────────────────────────────────────── */ --color-gold-50: #FDF8EE; /* tło z subtelnym złotem */ --color-gold-100: #F7F0D4; /* jaśniejszy tint */ --color-gold-500: #755400; /* główny akcent — WCAG vs white: 6.95:1 ✅ AA */ --color-gold-700: #6B4C00; /* hover/ciemniejszy — WCAG vs white: ~8.7:1 ✅ AAA */ /* ↑ KOREKTA: w Goldish bug '#694C0' — poprawna wartość #6B4C00 */ --color-gold-900: #211600; /* najciemniejszy — WCAG vs white: 17.8:1 ✅ AAA */ /* ── Kolory: Cream/Neutral ────────────────────────────────────── */ --color-cream-50: #FFFFFF; --color-cream-100: #F7F7F7; /* tło kart, obrazków */ --color-cream-200: #E2E1DE; /* ⚠️ 1.31:1 vs white — TYLKO obramowania/dividers, nigdy tekst */ --color-cream-300: #ABA69E; /* ⚠️ 2.42:1 vs white — TYLKO dekoracja/placeholder, nigdy tekst */ --color-cream-400: #70685A; /* WCAG vs white: 5.49:1 ✅ AA (nie AAA) — tekst secondary */ --color-cream-500: #4D4533; /* WCAG vs white: 9.47:1 ✅ AAA — body text */ --color-cream-700: #1A140C; /* WCAG vs white: 18.75:1 ✅ AAA — najciemniejszy tekst (Elementor) */ --color-cream-900: #211600; /* alias of gold-900 — --text-color motywu */ /* ── Kolory: Status ───────────────────────────────────────────── */ /* * WAŻNE — pary tekst/tło spełniające WCAG AA 4.5:1: * * Red #BB033A vs white: 6.60:1 ✅ → biały tekst na czerwonym tle * Green #03BB89 vs white: 2.48:1 ❌ → ciemny tekst (#211600) na zielonym tle (7.17:1 ✅) * Orange #BB8703 vs white: 3.19:1 ⚠️ → tylko duże napisy AA; ciemny tekst na pomarańczowym (5.57:1 ✅) * Blue #03A5BB vs white: 2.96:1 ❌ → ciemny tekst (#211600) na niebieskim tle (6.01:1 ✅) */ --color-red-500: #BB033A; --color-green-500: #03BB89; --color-orange-500: #BB8703; --color-blue-500: #03A5BB; --color-grey-900: #312D2A; /* WCAG vs white: 13.7:1 ✅ AAA */ --color-star: #FFBB54; /* ⚠️ 1.68:1 — wyłącznie gwiazdki/dekoracja, nigdy tekst */ /* ── Spacing: skala 4px ───────────────────────────────────────── */ --space-0: 0px; --space-1: 4px; /* xs — tight icon gap */ --space-2: 8px; /* sm — inline gap */ --space-3: 12px; /* — — component inner padding */ --space-4: 16px; /* md — between elements */ --space-5: 20px; /* — — button padding-top */ --space-6: 24px; /* lg — section inner */ --space-8: 32px; /* xl — section gap, button padding-x */ --space-10: 40px; --space-12: 48px; /* 2xl — major sections */ --space-16: 64px; --space-20: 80px; /* 3xl — doc sections */ /* ── Typografia: skala fontów ─────────────────────────────────── */ --font-family-base: 'Dosis', sans-serif; --font-size-10: 10px; /* xs — caption, badge */ --font-size-11: 11px; /* sm — label, meta */ --font-size-13: 13px; /* base — body, button */ --font-size-14: 14px; /* md — body-lg */ --font-size-16: 16px; /* lg — heading-sm */ --font-size-20: 20px; /* xl — price, heading-md */ --font-size-24: 24px; /* 2xl — heading-lg */ --font-size-28: 28px; --font-size-32: 32px; /* 3xl — display */ --font-size-40: 40px; --font-size-48: 48px; /* display */ --font-size-61: 61px; /* hero — title large */ --font-weight-thin: 200; --font-weight-light: 300; --font-weight-regular: 400; --font-weight-medium: 500; --font-weight-semibold: 600; --font-weight-bold: 700; --font-weight-extra: 800; /* ── Obramowanie ──────────────────────────────────────────────── */ --radius-0: 0px; --radius-sm: 2px; --radius-md: 4px; /* standard geselle */ --radius-lg: 8px; --radius-xl: 12px; --radius-full: 9999px; /* ── Cienie (elevation scale) ─────────────────────────────────── */ --shadow-0: none; --shadow-1: 0 1px 3px rgba(33, 22, 0, 0.06), 0 1px 2px rgba(33, 22, 0, 0.04); /* card resting */ --shadow-2: 0 4px 12px rgba(33, 22, 0, 0.08), 0 2px 4px rgba(33, 22, 0, 0.04); /* dropdown, hover */ --shadow-3: 0 8px 24px rgba(33, 22, 0, 0.10), 0 4px 8px rgba(33, 22, 0, 0.06); /* modal, drawer */ --shadow-4: 0 16px 48px rgba(33, 22, 0, 0.14), 0 8px 16px rgba(33, 22, 0, 0.08); /* toast, top-level */ /* ── Z-index scale ────────────────────────────────────────────── */ --z-below: -1; --z-base: 0; --z-raised: 10; /* floating elements, sticky elements below nav */ --z-dropdown: 100; /* menus, tooltips */ --z-sticky: 200; /* sticky header, sticky CTA */ --z-overlay: 400; /* modal backdrop */ --z-modal: 500; /* modal, drawer */ --z-toast: 600; /* toast notifications */ --z-max: 9999; /* critical overrides only */ /* ── Animacje ─────────────────────────────────────────────────── */ --duration-instant: 80ms; --duration-fast: 150ms; /* hover transitions */ --duration-base: 200ms; /* most transitions */ --duration-slow: 300ms; /* modal open/close */ --duration-slower: 500ms; /* page transitions */ --easing-linear: linear; --easing-ease-out: cubic-bezier(0.4, 0, 0.2, 1); --easing-ease-in: cubic-bezier(0.4, 0, 1, 1); --easing-spring: cubic-bezier(0.34, 1.56, 0.64, 1); /* subtle bounce */ } /* ════════════════════════════════════════════════════════════════════ LAYER 2 — SEMANTIC TOKENS Tokeny z przeznaczeniem. Używaj tych w komponentach. ════════════════════════════════════════════════════════════════════ */ :root { /* ── Kolor: akcja / brand ─────────────────────────────────────── */ --geselle-color-action: var(--color-gold-500); --geselle-color-action-hover: var(--color-gold-900); --geselle-color-action-muted: var(--color-gold-50); /* tło z subtelnym akcentem */ --geselle-color-action-text: var(--color-cream-50); /* biały tekst na złotym tle — 6.95:1 ✅ */ /* ── Kolor: tekst ─────────────────────────────────────────────── */ --geselle-color-text-primary: var(--color-cream-900); /* nagłówki, etykiety */ --geselle-color-text-body: var(--color-cream-500); /* tekst akapitowy */ --geselle-color-text-secondary: var(--color-cream-400); /* meta, secondary */ --geselle-color-text-disabled: var(--color-cream-300); /* ⚠️ placeholder/disabled ONLY */ --geselle-color-text-inverse: var(--color-cream-50); /* tekst na ciemnym tle */ --geselle-color-text-link: var(--color-gold-500); --geselle-color-text-link-hover:var(--color-gold-900); /* ── Kolor: tło / powierzchnie ────────────────────────────────── */ --geselle-color-bg: var(--color-cream-50); --geselle-color-bg-subtle: var(--color-cream-100); --geselle-color-bg-overlay: rgba(33, 22, 0, 0.50); --geselle-color-bg-action: var(--color-gold-50); /* ── Kolor: obramowanie ───────────────────────────────────────── */ --geselle-color-border: var(--color-cream-200); --geselle-color-border-strong: var(--color-cream-300); --geselle-color-border-action: var(--color-gold-500); --geselle-color-focus-ring: 0 0 0 3px rgba(117, 84, 0, 0.15); /* ── Kolor: status (WCAG-compliant pary bg + tekst) ──────────── */ --geselle-color-sale-bg: var(--color-red-500); --geselle-color-sale-text: var(--color-cream-50); /* biały — 6.60:1 ✅ */ --geselle-color-sale-text-on-white: var(--color-red-500); /* czerwony na białym — 6.60:1 ✅ */ --geselle-color-success-bg: var(--color-green-500); --geselle-color-success-text: var(--color-cream-900); /* ciemny — 7.17:1 ✅ (nie biały!) */ --geselle-color-warning-bg: var(--color-orange-500); --geselle-color-warning-text: var(--color-cream-900); /* ciemny — 5.57:1 ✅ */ --geselle-color-info-bg: var(--color-blue-500); --geselle-color-info-text: var(--color-cream-900); /* ciemny — 6.01:1 ✅ (nie biały!) */ /* Pasek reklamowy — rgba() zamiast color-mix() (lepsza kompatybilność) */ --geselle-color-advert-bg: rgba(3, 165, 187, 0.12); /* ≈ #DCF4F8 na białym tle */ /* ── Typografia ───────────────────────────────────────────────── */ --geselle-font: var(--font-family-base); --geselle-text-xs: var(--font-size-10); /* caption, badge */ --geselle-text-sm: var(--font-size-11); /* label, meta, trust signals */ --geselle-text-base: var(--font-size-13); /* body, button */ --geselle-text-md: var(--font-size-14); /* body-lg */ --geselle-text-lg: var(--font-size-16); /* heading-sm */ --geselle-text-xl: var(--font-size-20); /* price, heading-md */ --geselle-text-2xl: var(--font-size-24); /* heading-lg */ --geselle-text-3xl: var(--font-size-32); /* display */ --geselle-text-hero: var(--font-size-61); /* hero / title large */ --geselle-weight-light: var(--font-weight-light); --geselle-weight-regular: var(--font-weight-regular); --geselle-weight-medium: var(--font-weight-medium); --geselle-weight-semibold: var(--font-weight-semibold); --geselle-leading-tight: 1.2; --geselle-leading-snug: 1.4; --geselle-leading-base: 1.6; --geselle-leading-loose: 1.8; --geselle-tracking-tight: -0.02em; --geselle-tracking-normal: 0em; --geselle-tracking-wide: 0.02em; --geselle-tracking-wider: 0.05em; --geselle-tracking-caps: 0.10em; /* button tracking */ --geselle-tracking-widest: 0.15em; /* label/caption tracking */ /* ── Kształt ──────────────────────────────────────────────────── */ --geselle-radius: var(--radius-md); /* 4px — standard */ --geselle-radius-lg: var(--radius-lg); /* 8px — karta, modal */ --geselle-radius-pill: var(--radius-full); /* ── Elevacja ─────────────────────────────────────────────────── */ --geselle-shadow-card: var(--shadow-1); --geselle-shadow-hover: var(--shadow-2); --geselle-shadow-dropdown: var(--shadow-2); --geselle-shadow-modal: var(--shadow-3); --geselle-shadow-toast: var(--shadow-4); /* ── Animacje ─────────────────────────────────────────────────── */ --geselle-transition: var(--duration-fast) var(--easing-linear); --geselle-transition-smooth: var(--duration-base) var(--easing-ease-out); --geselle-transition-bounce: var(--duration-slow) var(--easing-spring); /* ── Layout ───────────────────────────────────────────────────── */ --geselle-container-max: 1380px; --geselle-container-pad: 30px; --geselle-container-pad-sm: 16px; --geselle-logo-desktop: 142px; --geselle-logo-mobile: 155px; } /* ════════════════════════════════════════════════════════════════════ LAYER 3 — COMPONENT TOKENS Zmienne per-komponent. Nadpisywalne przez kontekst/temat. ════════════════════════════════════════════════════════════════════ */ :root { /* ────────────────────────────────────── Button */ --geselle-btn-bg: var(--geselle-color-action); --geselle-btn-bg-hover: var(--geselle-color-action-hover); --geselle-btn-color: var(--geselle-color-action-text); --geselle-btn-radius: var(--geselle-radius); --geselle-btn-pad-x: var(--space-8); /* 32px ≈ computed 30px */ --geselle-btn-pad-y-t: var(--space-5); /* 20px top */ --geselle-btn-pad-y-b: 19px; /* 19px bottom — asymetryczny (computed) */ --geselle-btn-font-size: var(--geselle-text-base); --geselle-btn-weight: var(--geselle-weight-medium); --geselle-btn-tracking: var(--geselle-tracking-caps); --geselle-btn-transform: uppercase; --geselle-btn-transition: var(--geselle-transition); /* ────────────────────────────────────── Input / Form */ --geselle-input-bg: var(--geselle-color-bg); --geselle-input-border: 1px solid var(--geselle-color-border); --geselle-input-border-focus: 1px solid var(--geselle-color-border-action); --geselle-input-radius: var(--geselle-radius); --geselle-input-pad: var(--space-3) var(--space-4); --geselle-input-color: var(--geselle-color-text-primary); --geselle-input-placeholder:var(--geselle-color-text-disabled); --geselle-input-focus-ring: var(--geselle-color-focus-ring); --geselle-input-font-size: var(--geselle-text-base); --geselle-label-font-size: var(--geselle-text-sm); --geselle-label-weight: var(--geselle-weight-medium); --geselle-label-tracking: var(--geselle-tracking-widest); --geselle-label-transform: uppercase; /* ────────────────────────────────────── Badge */ --geselle-badge-radius: var(--radius-sm); --geselle-badge-pad: 2px var(--space-2); --geselle-badge-font-size: var(--geselle-text-xs); --geselle-badge-weight: var(--geselle-weight-semibold); --geselle-badge-tracking: var(--geselle-tracking-wider); /* ────────────────────────────────────── Product Card */ --geselle-card-bg: var(--geselle-color-bg); --geselle-card-img-bg: var(--geselle-color-bg-subtle); --geselle-card-radius: var(--geselle-radius); --geselle-card-shadow: var(--geselle-shadow-card); --geselle-card-hover-shadow:var(--geselle-shadow-hover); --geselle-card-hover-lift: translateY(-4px); --geselle-card-transition: var(--geselle-transition-smooth); /* ────────────────────────────────────── Price display */ --geselle-price-font-size: var(--geselle-text-xl); /* 20px — strona produktu */ --geselle-price-weight: var(--geselle-weight-regular); --geselle-price-tracking: var(--geselle-tracking-wide); --geselle-price-sale-color: var(--geselle-color-sale-text-on-white); --geselle-price-del-color: var(--geselle-color-text-disabled); /* ────────────────────────────────────── Stepper */ --geselle-step-size: 30px; --geselle-step-radius: var(--geselle-radius-pill); --geselle-step-font-size: var(--geselle-text-sm); --geselle-step-label-font: var(--geselle-text-xs); --geselle-step-active-bg: var(--geselle-color-action); --geselle-step-active-color:var(--geselle-color-action-text); --geselle-step-done-bg: var(--geselle-color-action); --geselle-step-done-color: var(--geselle-color-action-text); --geselle-step-inactive-bg: var(--geselle-color-border); --geselle-step-inactive-color: var(--geselle-color-text-disabled); --geselle-step-line: var(--geselle-color-border); --geselle-step-line-done: var(--geselle-color-action); /* ────────────────────────────────────── Trust Signals */ --geselle-trust-font-size: var(--geselle-text-sm); --geselle-trust-color: var(--geselle-color-text-secondary); --geselle-trust-icon-color: var(--geselle-color-action); --geselle-trust-gap: var(--space-2); --geselle-trust-border: 1px solid var(--geselle-color-border); /* ────────────────────────────────────── Header */ --geselle-header-bg: var(--geselle-color-bg); --geselle-header-border: 1px solid rgba(33, 22, 0, 0.08); --geselle-header-z: var(--z-sticky); --geselle-advert-bg: var(--geselle-color-advert-bg); --geselle-advert-color: var(--geselle-color-text-primary); --geselle-nav-color: var(--geselle-color-text-primary); --geselle-nav-color-hover: var(--geselle-color-action); --geselle-nav-tracking: var(--geselle-tracking-wide); /* ────────────────────────────────────── Checkout Flow */ --geselle-flow-header-bg: var(--geselle-color-bg); --geselle-flow-help-bg: var(--geselle-color-bg-subtle); --geselle-flow-help-border: var(--geselle-color-border); /* ────────────────────────────────────── Thank You / Order Steps */ --geselle-order-steps-bg: var(--geselle-color-bg-subtle); --geselle-order-steps-border: 3px solid var(--geselle-color-action); --geselle-order-steps-radius: var(--geselle-radius); } /* ════════════════════════════════════════════════════════════════════ GOLDISH / ELEMENTOR BRIDGE Mapuje geselle tokeny → zmienne Goldish i Elementor. Wczytany po stylu Goldish → nadpisuje jego wartości. UWAGA: Goldish Customizer może też ustawić --ip-color-accent. Ponieważ ten plik jest wczytywany później (wyższy priority w wp_enqueue_style), nasze tokeny mają pierwszeństwo. ════════════════════════════════════════════════════════════════════ */ :root { /* Goldish theme bridge */ --ip-color-accent: var(--geselle-color-action); /* Goldish text/bg bridge (używane przez wp-content/themes/goldish/) */ --accent-color: var(--geselle-color-action); --text-color: var(--geselle-color-text-primary); --text-color-body: var(--geselle-color-text-body); /* Kolor motywu — accent-color-dark BUG FIX: Goldish ma '#694C0' (brakuje cyfra) */ --accent-color-dark:var(--color-gold-700); /* poprawna wartość: #6B4C00 */ }