/* * Game Night Planner — Theme CSS (Phase 13) * * All colours are defined as CSS custom properties here and only here. * No component file (planner.css, admin.css) hardcodes a hex value — * they all reference var(--gnp-*). Switching themes is therefore purely * a matter of toggling data-theme="dark" on .gnp-root or .gnp-admin-wrap. * * Dark-theme palette is tuned to sit comfortably next to Community Calendar's * own dark mode (data-cc-theme="dark"), using CC's exact values as a reference: * CC bg: #1e1e2e → GNP bg: #1a1a2e (slightly darker, distinct) * CC surface: #2a2a3c → GNP surface: #252538 (one step lighter than bg) * CC border: #3a3a50 → GNP border: #383850 (matches CC closely) * CC text: #e0e0ef → GNP text: #e2e2f0 (identical brightness) * CC muted: #9090aa → GNP muted: #9292ac (matched) * CC accent: #5a8fc8 → GNP accent: #4A88C8 (same hue family, GNP blue) * * Adding a third theme (e.g. high-contrast) requires only a new variable * block — no component changes needed (Section 17, extensibility). * * Loaded via wp_enqueue_style('gnp-theme') before planner.css and admin.css * so that variable definitions are available when components reference them. */ /* ══════════════════════════════════════════════════════════════════════════ LIGHT THEME — default, applied to all .gnp-root and .gnp-admin-wrap ══════════════════════════════════════════════════════════════════════════ */ .gnp-root, .gnp-admin-wrap, .gnp-page-wrap, .gnp-planner-bar, .gnp-create-planner-group, .gnp-hook-toast { /* Brand */ --gnp-blue: #2E4A6F; --gnp-blue-mid: #4A6FA5; --gnp-blue-light: #EAF0F9; --gnp-button-text: #ffffff; /* Text colour on solid --gnp-blue/--gnp-danger-solid buttons */ /* Surface */ --gnp-bg: #f0f0f1; /* wp-admin page bg equivalent */ --gnp-surface: #ffffff; --gnp-surface-alt: #F7F8FA; /* Text */ --gnp-text: #1d2327; --gnp-text-muted: #6B7280; /* Borders & shadows */ --gnp-border: #DDE3ED; --gnp-shadow: 0 1px 4px rgba(0,0,0,.10); /* Semantic colours */ --gnp-success: #1e7e34; --gnp-success-bg: #D4EDDA; --gnp-success-solid: #1e7e34; /* Solid fills (buttons/toasts) w/ white text */ --gnp-danger: #C0392B; --gnp-danger-bg: #F8D7DA; --gnp-danger-solid: #C0392B; /* Solid fills (buttons/toasts) w/ white text */ --gnp-warn: #856404; --gnp-warn-bg: #FFF3CD; --gnp-info: #1a5276; --gnp-info-bg: #D6EAF8; /* Layout */ --gnp-radius: 8px; --gnp-transition: 180ms ease; /* Input */ --gnp-input-bg: #ffffff; --gnp-input-border: #DDE3ED; --gnp-input-text: #1d2327; /* Skeleton shimmer */ --gnp-skeleton-from: #e8e8e8; --gnp-skeleton-via: #f5f5f5; } /* ══════════════════════════════════════════════════════════════════════════ DARK THEME — applied when data-theme="dark" is set on the root element. The JS theme switcher (gnp-theme.js) and the PHP gnp_resolve_theme() function both add this attribute; prefers-color-scheme is honoured as a tertiary fallback via the JS switcher (Section 12.2). ══════════════════════════════════════════════════════════════════════════ */ [data-theme="dark"].gnp-root, [data-theme="dark"].gnp-admin-wrap, [data-theme="dark"].gnp-page-wrap, /* These three live directly in Community Calendar's page markup, not inside .gnp-root/.gnp-page-wrap, so [data-theme="dark"] (only ever printed on .gnp-admin-wrap/.gnp-root by GNP_Theme::attr()) never reaches them. cc-hook.js instead sets data-gnp-cc-theme on itself from the server-resolved theme — see includes/class-gnp-integration.php's maybe_enqueue_dom_hook() and cc-hook.js's top-of-file comment — so these three key off that attribute instead, on the same shared variable list. */ body[data-gnp-cc-theme="dark"] .gnp-planner-bar, body[data-gnp-cc-theme="dark"] .gnp-create-planner-group, body[data-gnp-cc-theme="dark"] .gnp-hook-toast { /* Brand — lighter to stay visible on dark bg */ --gnp-blue: #4A88C8; --gnp-blue-mid: #6AA3DB; --gnp-blue-light: #1e3050; --gnp-button-text: #ffffff; /* Surface — matches CC dark palette closely */ --gnp-bg: #1a1a2e; --gnp-surface: #252538; --gnp-surface-alt: #1e1e30; /* Text */ --gnp-text: #e2e2f0; --gnp-text-muted: #9292ac; /* Borders & shadows */ --gnp-border: #383850; --gnp-shadow: 0 1px 6px rgba(0,0,0,.40); /* Semantic colours — adjusted for dark bg legibility */ --gnp-success: #4CAF82; --gnp-success-bg: #1a3828; --gnp-success-solid: #2f8f5c; /* Solid fills w/ white text — stays saturated, unlike --gnp-success */ --gnp-danger: #E57373; --gnp-danger-bg: #3b1a1a; --gnp-danger-solid: #b3392b; /* Solid fills w/ white text — stays saturated, unlike --gnp-danger */ --gnp-warn: #FFD54F; --gnp-warn-bg: #3b2e0a; --gnp-info: #64B5F6; --gnp-info-bg: #1a2a3b; /* Input */ --gnp-input-bg: #1e1e30; --gnp-input-border: #383850; --gnp-input-text: #e2e2f0; /* Skeleton shimmer */ --gnp-skeleton-from: #2a2a40; --gnp-skeleton-via: #323248; } /* ── Dark-mode input / form overrides ────────────────────────────────────── */ /* * BUG FIX (dropdowns/inputs unreadable in dark mode): this block used to * only match [data-theme="dark"] ancestors — which is correct for GNP's own * pages (.gnp-root / .gnp-admin-wrap / .gnp-page-wrap), but elements that * live inside Community Calendar's own DOM (.gnp-planner-bar, * .gnp-create-planner-group, .gnp-hook-toast, and anything cc-hook.js / * admin-cc-event-hook.js inject) are instead scoped under * body[data-gnp-cc-theme="dark"] — a different attribute, on — same * as the CSS-variable block above. Every selector below is now duplicated * under that attribute too so inputs/selects hosted inside CC's markup * actually pick up the dark palette instead of silently keeping their * light-mode (dark-text-on-dark-bg) styling. */ [data-theme="dark"] .gnp-search-input, [data-theme="dark"] .gnp-filter-select, [data-theme="dark"] .gnp-library-search__input, [data-theme="dark"] input[type="text"], [data-theme="dark"] input[type="search"], [data-theme="dark"] input[type="number"], [data-theme="dark"] input[type="date"], [data-theme="dark"] input[type="url"], [data-theme="dark"] textarea, [data-theme="dark"] select, body[data-gnp-cc-theme="dark"] .gnp-search-input, body[data-gnp-cc-theme="dark"] .gnp-filter-select, body[data-gnp-cc-theme="dark"] .gnp-library-search__input, body[data-gnp-cc-theme="dark"] input[type="text"], body[data-gnp-cc-theme="dark"] input[type="search"], body[data-gnp-cc-theme="dark"] input[type="number"], body[data-gnp-cc-theme="dark"] input[type="date"], body[data-gnp-cc-theme="dark"] input[type="url"], body[data-gnp-cc-theme="dark"] textarea, body[data-gnp-cc-theme="dark"] select { background-color: var(--gnp-input-bg); border-color: var(--gnp-input-border); color: var(--gnp-input-text); color-scheme: dark; } /* ── Dark-mode button overrides ──────────────────────────────────────────── */ [data-theme="dark"] .button, [data-theme="dark"] .gnp-card-btn, [data-theme="dark"] .gnp-row-btn, body[data-gnp-cc-theme="dark"] .button, body[data-gnp-cc-theme="dark"] .gnp-card-btn, body[data-gnp-cc-theme="dark"] .gnp-row-btn { background-color: var(--gnp-surface-alt); border-color: var(--gnp-border); color: var(--gnp-text); } [data-theme="dark"] .button-primary, [data-theme="dark"] .gnp-add-btn--library, [data-theme="dark"] .gnp-shortcode-btn:not(.gnp-shortcode-btn--create), body[data-gnp-cc-theme="dark"] .button-primary, body[data-gnp-cc-theme="dark"] .gnp-add-btn--library, body[data-gnp-cc-theme="dark"] .gnp-shortcode-btn:not(.gnp-shortcode-btn--create) { background-color: var(--gnp-blue) !important; border-color: var(--gnp-blue) !important; color: var(--gnp-button-text) !important; } /* ── Dark-mode skeleton ──────────────────────────────────────────────────── */ [data-theme="dark"] .gnp-skeleton-line, [data-theme="dark"] .gnp-card--skeleton .gnp-card__img-placeholder, body[data-gnp-cc-theme="dark"] .gnp-skeleton-line, body[data-gnp-cc-theme="dark"] .gnp-card--skeleton .gnp-card__img-placeholder { background: linear-gradient( 90deg, var(--gnp-skeleton-from) 25%, var(--gnp-skeleton-via) 50%, var(--gnp-skeleton-from) 75% ); background-size: 800px 100%; } /* ── Dark-mode toast ─────────────────────────────────────────────────────── */ [data-theme="dark"] .gnp-toast, body[data-gnp-cc-theme="dark"] .gnp-toast { background: var(--gnp-surface); color: var(--gnp-text); border: 1px solid var(--gnp-border); } /* ── Dark-mode modal ─────────────────────────────────────────────────────── */ [data-theme="dark"] .gnp-modal__box, body[data-gnp-cc-theme="dark"] .gnp-modal__box { background: var(--gnp-surface); border: 1px solid var(--gnp-border); } /* ── Dark-mode admin card overrides ──────────────────────────────────────── */ [data-theme="dark"] .gnp-card { background: var(--gnp-surface); border-color: var(--gnp-border); } [data-theme="dark"] .gnp-card__footer, [data-theme="dark"] .gnp-card__img-placeholder { background: var(--gnp-surface-alt); } /* ── Dark-mode status badges ─────────────────────────────────────────────── */ [data-theme="dark"] .gnp-status-badge--draft { background: #2a2a40; color: #b0b0cc; } [data-theme="dark"] .gnp-status-badge--active { background: var(--gnp-success-bg); color: var(--gnp-success); } [data-theme="dark"] .gnp-status-badge--archived { background: var(--gnp-danger-bg); color: var(--gnp-danger); } [data-theme="dark"] .gnp-status-badge--canceled { background: var(--gnp-danger-bg); color: var(--gnp-danger); } /* ── Dark-mode complexity badges ─────────────────────────────────────────── */ [data-theme="dark"] .gnp-complexity-badge--light { background: #1a3828; color: #4CAF82; } [data-theme="dark"] .gnp-complexity-badge--medium { background: var(--gnp-warn-bg); color: var(--gnp-warn); } [data-theme="dark"] .gnp-complexity-badge--heavy { background: var(--gnp-danger-bg); color: var(--gnp-danger); } [data-theme="dark"] .gnp-card__img-placeholder--light { background: #1a3828; } [data-theme="dark"] .gnp-card__img-placeholder--medium { background: var(--gnp-warn-bg); } [data-theme="dark"] .gnp-card__img-placeholder--heavy { background: var(--gnp-danger-bg); } /* ── Dark-mode attendance-likelihood badges ──────────────────────────────── */ /* .gnp-likelihood--low already uses var(--gnp-blue-light)/var(--gnp-blue) and is theme-aware on its own; --high and --mid were hardcoded to light-mode hex values with no dark counterpart (audit finding), unlike the otherwise identical .gnp-status-badge--active / .gnp-complexity-badge--medium patterns above — matched to those here for consistency. */ [data-theme="dark"] .gnp-likelihood--high { background: var(--gnp-success-bg); color: var(--gnp-success); } [data-theme="dark"] .gnp-likelihood--mid { background: var(--gnp-warn-bg); color: var(--gnp-warn); } /* ── Dark-mode admin toolbar / planner list ──────────────────────────────── */ [data-theme="dark"] .gnp-toolbar, [data-theme="dark"] .gnp-planner-list, [data-theme="dark"] .gnp-planner-row { background: var(--gnp-surface); border-color: var(--gnp-border); } [data-theme="dark"] .gnp-planner-row:hover { background: var(--gnp-blue-light); } /* ── Dark-mode admin header badge ────────────────────────────────────────── */ [data-theme="dark"] .gnp-cc-badge { background: var(--gnp-blue-light); color: var(--gnp-blue); } /* ── Dark-mode comments panel ────────────────────────────────────────────── */ [data-theme="dark"] .gnp-comments-panel { background: var(--gnp-surface); border-color: var(--gnp-border); } /* ── Dark-mode banners ───────────────────────────────────────────────────── */ [data-theme="dark"] .gnp-banner--warn { background: var(--gnp-warn-bg); color: var(--gnp-warn); border-color: var(--gnp-warn); } [data-theme="dark"] .gnp-banner--info { background: var(--gnp-info-bg); color: var(--gnp-info); border-color: var(--gnp-info); } /* ══════════════════════════════════════════════════════════════════════════ THEME TOGGLE BUTTON (front-end planner page) Small floating button in the top-right corner of the planner page. Rendered by gnp-theme.js — hidden if user has no JS. ══════════════════════════════════════════════════════════════════════════ */ .gnp-theme-toggle { position: fixed; bottom: 24px; left: 24px; z-index: 9000; width: 40px; height: 40px; border-radius: 50%; border: 1px solid var(--gnp-border); background: var(--gnp-surface); color: var(--gnp-text-muted); cursor: pointer; display: flex; align-items: center; justify-content: center; font-size: 18px; box-shadow: 0 2px 8px rgba(0,0,0,.15); transition: background var(--gnp-transition), color var(--gnp-transition), border-color var(--gnp-transition), box-shadow var(--gnp-transition); } .gnp-theme-toggle:hover { background: var(--gnp-blue-light); color: var(--gnp-blue); border-color: var(--gnp-blue-mid); } /* Nudge the toast above the theme toggle on mobile */ @media ( max-width: 599px ) { .gnp-toast { bottom: 76px; } }