/** * Universal Shop — Design tokens (Layer 3 of theme-agnostic cascade). * * Strategy (doc/theme-agnostic.md): * - Every token maps from --wp--preset--* (theme token) with a hardcoded fallback. * - User overrides in theme.json / Customizer win. * - Component-specific tokens (OOS, sale, z-index, radius) are plugin-defined. * * NEVER add hardcoded hex/rgb directly in component styles — only via this file. */ :root { /* ───── Colors ───── */ --shop-color-primary: var(--wp--preset--color--contrast, #111); --shop-color-on-primary: var(--wp--preset--color--base, #fff); /* Cascade: Flatsome's --fs-color-* (if active) → block editor preset → hex fallback. Ensures the plugin retones with whichever theme is installed without us patching tokens per theme. */ --shop-color-accent: var(--fs-color-secondary, var(--wp--preset--color--accent, #d8613c)); --shop-color-on-accent: var(--fs-color-base, var(--wp--preset--color--base, #fff)); --shop-color-surface: var(--fs-color-base, var(--wp--preset--color--base-2, #fff)); --shop-color-surface-muted: var(--wp--preset--color--base, #f9f9f9); /* UI surfaces — used by buttons, stepper, hover states. Distinct enough from #fff input/card surface that controls read as separate elements. */ --shop-color-bg-soft: #f3f4f6; --shop-color-bg-hover: #e5e7eb; --shop-color-text: var(--wp--preset--color--contrast, #111); --shop-color-text-muted: var(--wp--preset--color--contrast-2, #636363); --shop-color-border: var(--wp--preset--color--contrast-3, #a4a4a4); /* Semantic state colors — Flatsome ships success/alert; we expose them for plugin consumers (notice, status badges) so a theme switch doesn't break the colour story. */ --shop-color-success: var(--fs-color-success, #2e8b57); --shop-color-alert: var(--fs-color-alert, #c0392b); /* Semantic (no theme equivalent — sale/warning/info/purple live here only) */ --shop-color-oos: var(--shop-color-alert); --shop-color-sale: var(--shop-color-accent); --shop-color-warning: #f39c12; --shop-color-info: #3498db; --shop-color-purple: #7a5cb8; /* ───── Typography ───── */ --shop-font-body: var(--wp--preset--font-family--body, inherit); --shop-font-heading: var(--wp--preset--font-family--heading, inherit); /* Sizes — keep `em` so themes (Flatsome) cascade scales: heading scale, --fs-experimental-base-font-size, Customizer "Body text size" all work. `rem`/WP preset would lock the size and bypass theme SSOT. */ --shop-text-xs: 0.75em; --shop-text-sm: 0.875em; --shop-text-base: 1em; --shop-text-lg: 1.25em; --shop-text-xl: 1.5em; /* ───── Spacing ───── */ --shop-space-xs: var(--wp--preset--spacing--10, 0.5rem); --shop-space-sm: var(--wp--preset--spacing--20, 1rem); --shop-space-md: var(--wp--preset--spacing--30, 1.5rem); --shop-space-lg: var(--wp--preset--spacing--40, 2.5rem); --shop-space-xl: var(--wp--preset--spacing--50, 4rem); /* ───── Layout ───── Sync with theme's content-size when available (block themes / theme.json). Classic themes that don't expose this token fall back to 1200px. Override per-site in Customizer → Additional CSS: :root { --shop-wrapper-max-width: 1080px; --shop-wrapper-padding-inline: 15px; } */ --shop-wrapper-max-width: var(--wp--style--global--content-size, 1200px); --shop-wrapper-padding-inline: clamp(1rem, 4vw, 1.5rem); /* ───── Component-specific ───── */ --shop-radius-sm: 4px; --shop-radius-md: 8px; --shop-radius-pill: 9999px; --shop-shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.06); --shop-shadow-md: 0 4px 12px rgba(0, 0, 0, 0.08); --shop-z-cart-drawer: 9999; --shop-z-modal: 10000; --shop-z-toast: 10001; --shop-transition-fast: 150ms ease; --shop-transition-base: 250ms ease; /* ───── Toast ───── Plugin-owned. Background derives from semantic state colors so a theme switch retones the toast automatically. CTA colour stays readable on whichever background variant is in play. Override per-site in Customizer → Additional CSS: :root { --shop-toast-bg-success: var(--fs-color-success); } */ --shop-toast-bg-success: color-mix(in srgb, var(--shop-color-success) 90%, #000); --shop-toast-bg-error: color-mix(in srgb, var(--shop-color-alert) 85%, #000); --shop-toast-bg-info: color-mix(in srgb, var(--shop-color-info) 85%, #000); --shop-toast-bg-warning: color-mix(in srgb, var(--shop-color-warning) 85%, #000); --shop-toast-color: var(--shop-color-on-accent); --shop-toast-cta-color: color-mix(in srgb, var(--shop-color-on-accent) 75%, transparent); --shop-toast-cta-hover: var(--shop-color-on-accent); --shop-toast-radius: var(--shop-radius-md); --shop-toast-shadow: 0 10px 30px rgba(0, 0, 0, 0.25); --shop-toast-progress-bg: color-mix(in srgb, var(--shop-color-on-accent) 25%, transparent); --shop-toast-progress-fill: var(--shop-color-on-accent); /* ───── Pagination ───── Plugin-owned. Override per-site in Customizer → Additional CSS: :root { --shop-pagination-current-bg: var(--fs-color-primary); } Font deliberately uses --shop-font-body → inherits theme font (Flatsome). */ --shop-pagination-size: 2.5rem; /* 40px target */ --shop-pagination-gap: 0.375rem; /* 6px between buttons */ --shop-pagination-radius: var(--shop-radius-md); --shop-pagination-color: var(--shop-color-text); --shop-pagination-bg: var(--shop-color-surface); --shop-pagination-border: var(--shop-color-border); --shop-pagination-hover-bg: var(--shop-color-bg-soft); --shop-pagination-current-color: var(--shop-color-on-accent); --shop-pagination-current-bg: var(--shop-color-accent); --shop-pagination-current-border: var(--shop-color-accent); --shop-pagination-disabled-color: var(--shop-color-text-muted); /* ───── Breadcrumb (responsive) ───── 3-step scale tuned for Thai text (which renders ~10% taller than Latin at the same px size). Defaults are mobile-first; the .shop-breadcrumb rule overrides at 30em (iPad portrait) and 64em (desktop) breakpoints. Override per-site in Customizer → Additional CSS: :root { --shop-breadcrumb-size-desktop: 1rem; } */ --shop-breadcrumb-size-mobile: 0.75rem; /* 12px — iPhone */ --shop-breadcrumb-size-tablet: 0.8125rem; /* 13px — iPad */ --shop-breadcrumb-size-desktop: 0.875rem; /* 14px — PC */ --shop-breadcrumb-gap-mobile: 0.25rem; /* tight on small screens */ --shop-breadcrumb-gap-desktop: 0.5rem; --shop-breadcrumb-margin-block-mobile: 0.5rem; --shop-breadcrumb-margin-block-desktop: var(--shop-space-md); /* ───── Product page price (responsive) ───── Admin override via Settings → หน้าสินค้า. H1 size intentionally not tokenised here — heading scale is owned by the active theme (rule 21). Override per-site in Customizer → Additional CSS: :root { --shop-product-price-size-desktop: 2.5rem; } */ --shop-product-price-size-mobile: 1.5rem; /* 24px */ --shop-product-price-size-tablet: 1.75rem; /* 28px */ --shop-product-price-size-desktop: 2rem; /* 32px */ }