/* * WPFolks Design Tokens — Dark mode + new semantic aliases * ───────────────────────────────────────────────────────────────── * IMPORTANT: This file does NOT define the canonical light theme. * The canonical token set lives in assets/css/main.css (top of * file, in its :root block). That set predates dark-mode work and * powers most existing components. We extend it here. * * This file contributes three things: * * 1. New semantic aliases under :root and [data-theme="light"] * that map onto the existing main.css tokens. New components * can use modern names like --accent-primary, --surface-1, * --text-tertiary while pointing at the same underlying * values. Old components using --brand-primary, --text-primary, * --surface-white, etc. keep working unchanged. * * 2. A [data-theme="dark"] block that overrides EVERY meaningful * token (main.css's existing names + this file's new names) to * dark-mode-tuned values. Activated by inc/theme-mode/loader.php * setting . This is the ONLY trigger * for dark mode — OS prefers-color-scheme is not consulted. * * Load order: enqueued BEFORE main.css in inc/enqueue.php. That * matters for the data-theme overrides because attribute selectors * have higher specificity than :root and win regardless of order, * but the :root aliases below need main.css to define the source * variables they alias — both rules land in cascade order, both * apply, neither conflicts (different property names). * * Naming convention (new aliases): * --surface-{1|2|3|body|elevated|inverse} * --text-{primary|secondary|tertiary|muted|subtle|inverse|link} * --border-{subtle|default|strong|focus} * --accent-primary{|-hover|-active|-soft|-softer|-on} * --{success|warning|danger|info}{|-soft|-on} * * Migration guidance: * - New components SHOULD use the semantic names from this file * (more flexible long-term naming). * - Existing components using main.css names DO NOT need to be * refactored; both name systems are first-class and supported * in light + dark. * * @since 1.22.858 */ /* ───────────────────────────────────────────────────────────────── * NEW SEMANTIC ALIASES (light) * Defined under :root + [data-theme="light"] so the dark * attribute selector can override them. * ───────────────────────────────────────────────────────────────── */ :root, [data-theme="light"] { /* Surfaces */ --surface-body: #f6f7f7; --surface-1: #ffffff; --surface-2: #fafafa; --surface-3: #f8fafc; --surface-elevated: #ffffff; --surface-inverse: #0f172a; --surface-overlay: rgba(15, 23, 42, 0.55); /* 1.22.867 — `--surface` (no suffix) is an alias many components reference as `var(--surface, #ffffff)`. Defining it here makes those references flip in dark mode instead of falling back to the hardcoded white. */ --surface: var(--surface-1); /* 1.22.868 — Additional missing aliases found across the codebase. Each is referenced via `var(--name, #fallback)` in dozens of places, but was never defined, so the hardcoded fallback won in every theme. Defining them here makes all those components auto-flip in dark mode. */ --color-bg-secondary: var(--surface-2); --color-text-muted: var(--text-muted); --color-brand: var(--brand-primary); --color-muted: var(--text-muted); --accent: var(--brand-primary); /* 1.22.923 — `--bg-soft` is referenced inline in page-profile.php for the engagement-visibility notice and not defined anywhere else, so it always fell back to its #f1f5f9 literal. Aliasing it to --surface-2 makes the notice flip via the token chain. */ --bg-soft: var(--surface-2); /* Text (additional roles beyond main.css) */ --text-tertiary: #475569; --text-subtle: #94a3b8; --text-inverse: #f8fafc; --text-link: #4f46e5; --text-link-hover: #4338ca; /* Borders */ --border-subtle: #f1f5f9; --border-focus: #818cf8; /* Brand accent — modern indigo palette used by newer components (event-hero, newsletter, featured-event, etc.). Coexists with main.css's WP-admin blue --brand-primary. Long-term these can consolidate but no urgency. */ --accent-primary: #4f46e5; --accent-primary-hover: #4338ca; --accent-primary-active: #3730a3; --accent-primary-soft: #ede9fe; --accent-primary-softer: #f5f3ff; --accent-primary-on: #ffffff; --accent-secondary: #a78bfa; --accent-secondary-soft: #ddd6fe; /* Brand raw (theme-invariant — same in light + dark, e.g. logo) */ --brand-navy: #1e1b4b; --brand-navy-deep: #0b1023; --brand-indigo: #4f46e5; --brand-indigo-light: #818cf8; --brand-violet: #a78bfa; --brand-violet-soft: #c4b5fd; /* Semantic state (new soft/on variants — main.css has --color-{success,warning,error}{|-bg|-text} already) */ --success: #059669; --success-soft: #d1fae5; --success-on: #065f46; --warning: #f59e0b; --warning-soft: #fef3c7; --warning-on: #92400e; --danger: #d63638; --danger-soft: #fcf0f1; --danger-on: #8a1f11; --info: #2271b1; --info-soft: #d2dafc; --info-on: #1d4ed8; /* Tier / role accents */ --tier-gold: #d4af37; --tier-silver: #94a3b8; --tier-bronze: #b45309; /* Elevation (new heavier shadows for cards on light surfaces) */ --shadow-lg: 0 14px 28px -18px rgba(15, 23, 42, 0.25); --shadow-xl: 0 18px 36px -24px rgba(15, 23, 42, 0.18); --shadow-focus: 0 0 0 3px rgba(129, 140, 248, 0.30); /* Radii (extending main.css's --radius-{xs|sm|md|lg|full}) */ --radius-xl: 14px; --radius-2xl: 18px; /* Misc */ --avatar-fallback-bg: linear-gradient(135deg, #ede9fe 0%, #ddd6fe 100%); --skeleton-bg: #f1f5f9; --skeleton-shimmer: #e2e8f0; } /* ───────────────────────────────────────────────────────────────── * DARK THEME OVERRIDES * Overrides BOTH main.css's existing tokens AND this file's new * aliases. When , every meaningful color * variable flips to a dark-mode-tuned value. * * Higher specificity than :root so this wins regardless of where * the original was defined in the cascade. * ───────────────────────────────────────────────────────────────── */ /* 1.22.905 — `:root[data-theme="dark"]` (not bare `[data-theme="dark"]`). Specificity (0,2,0) beats main.css's `:root` rule at (0,1,0). Without the `:root` qualifier this block ties main.css on specificity and loses to source order (main.css enqueues AFTER tokens.css), so the light --surface-white wins and the page stays half-light in dark mode. The previous `@media (prefers-color-scheme: dark)` block masked this bug because its `:root:not([data-theme="light"])` selector already had (0,2,0) specificity. */ :root[data-theme="dark"] { /* ───── Override main.css tokens ───── */ /* Brand primary — lighten so indigo stays visible on dark backgrounds. #2145e6 → #818cf8 is the contrast-tested swap. */ --brand-primary: #818cf8; --brand-primary-hover: #a5b4fc; --brand-primary-active: #c7d2fe; --brand-primary-light: rgba(129, 140, 248, 0.16); --brand-primary-lighter: rgba(129, 140, 248, 0.08); --brand-primary-text: #a5b4fc; /* Dark surfaces become near-black with subtle navy tint */ --surface-dark: #0b1023; --surface-dark-2: #11172e; --surface-dark-3: #161d38; --surface-dark-4: #1c2342; /* "Light" surfaces flip to dark grey — anything that uses --surface-light-* expecting a light bg now gets a dark bg. */ --surface-white: #11172e; --surface-light-1: #0b1023; --surface-light-2: #161d38; --surface-light-3: #1c2342; /* Text */ --text-primary: #f1f5f9; --text-secondary: #cbd5e1; --text-muted: #94a3b8; --text-placeholder: #64748b; --text-on-dark: #f1f5f9; --text-on-dark-2: #cbd5e1; --text-on-dark-3: #94a3b8; /* Borders — translucent white reads more elegantly on dark than hard greys do, and adapts to whatever surface the border sits on. */ --border-light: rgba(255, 255, 255, 0.06); --border-default: rgba(255, 255, 255, 0.10); --border-medium: rgba(255, 255, 255, 0.18); --border-strong: rgba(255, 255, 255, 0.25); --border-brand: #818cf8; --border-dark: rgba(255, 255, 255, 0.10); /* Semantic state — translucent fills instead of pastel (pastels look washed-out on dark). */ --color-success: #34d399; --color-success-bg: rgba(52, 211, 153, 0.14); --color-success-text: #6ee7b7; --color-warning: #fbbf24; --color-warning-bg: rgba(251, 191, 36, 0.14); --color-warning-text: #fcd34d; --color-error: #f87171; --color-error-bg: rgba(248, 113, 113, 0.14); --color-error-text: #fca5a5; /* Shadows are mostly invisible on dark; rely on border tone for elevation. Keep shadow vars defined so components that reference them don't break, but use heavier opacity. */ --shadow-xs: 0 1px 1px rgba(0, 0, 0, 0.40); --shadow-sm: 0 1px 4px rgba(0, 0, 0, 0.55), 0 1px 2px rgba(0, 0, 0, 0.4); --shadow-md: 0 4px 14px rgba(0, 0, 0, 0.60), 0 2px 4px rgba(0, 0, 0, 0.4); --shadow-brand: 0 0 0 3px rgba(129, 140, 248, 0.35); /* ───── Override new aliases too ───── */ --surface-body: #0b1023; --surface-1: #11172e; --surface-2: #161d38; --surface-3: #1c2342; --surface-elevated: #1f2647; --surface-inverse: #f8fafc; --surface-overlay: rgba(0, 0, 0, 0.7); --surface: var(--surface-1); --text-tertiary: #94a3b8; --text-subtle: #64748b; --text-inverse: #0f172a; --text-link: #a5b4fc; --text-link-hover: #c7d2fe; --border-subtle: rgba(255, 255, 255, 0.06); --border-focus: #a5b4fc; --accent-primary: #818cf8; --accent-primary-hover: #a5b4fc; --accent-primary-active: #c7d2fe; --accent-primary-soft: rgba(129, 140, 248, 0.16); --accent-primary-softer: rgba(129, 140, 248, 0.08); --accent-primary-on: #0b1023; --accent-secondary: #c4b5fd; --accent-secondary-soft: rgba(196, 181, 253, 0.16); --success: #34d399; --success-soft: rgba(52, 211, 153, 0.14); --success-on: #6ee7b7; --warning: #fbbf24; --warning-soft: rgba(251, 191, 36, 0.14); --warning-on: #fcd34d; --danger: #f87171; --danger-soft: rgba(248, 113, 113, 0.14); --danger-on: #fca5a5; --info: #60a5fa; --info-soft: rgba(96, 165, 250, 0.14); --info-on: #93c5fd; --tier-gold: #fcd34d; --tier-silver: #cbd5e1; --tier-bronze: #fb923c; --shadow-lg: 0 14px 28px rgba(0, 0, 0, 0.45); --shadow-xl: 0 24px 48px rgba(0, 0, 0, 0.55); --shadow-focus: 0 0 0 3px rgba(165, 180, 252, 0.40); --avatar-fallback-bg: linear-gradient(135deg, #312e81 0%, #3730a3 100%); --skeleton-bg: #1c2342; --skeleton-shimmer: #232c50; } /* 1.22.904 — `@media (prefers-color-scheme: dark)` fallback block removed. Dark mode is now driven entirely by the user's explicit choice via . OS preference is not consulted. This keeps a light-OS machine fully dark when the user picks Dark. */ /* ───────────────────────────────────────────────────────────────── * color-scheme hint to the browser. Tells native widgets * (scrollbars, form controls, autofill) which palette to draw * without per-element CSS. * ───────────────────────────────────────────────────────────────── */ :root, [data-theme="light"] { color-scheme: light; } [data-theme="dark"] { color-scheme: dark; }