/** * Design tokens shared across every block + page rendering. * Registered as `lrob-calendar-tokens`; all block stylesheets list it as a dep. * * Every CSS variable carries the `--lrob-cal-` prefix to avoid colliding with * theme/plugin globals on the same page. Admin Appearance settings override * --lrob-cal-primary via inline style on this same handle. */ :root { /* ─── Color palette ──────────────────────────────────────────── */ /* Primary (CTAs, today indicator, focus rings). Overridable from the admin Appearance section — inline style on this handle bumps only --lrob-cal-primary and derives the rest via color-mix. */ --lrob-cal-primary: #3b82f6; --lrob-cal-primary-hover: color-mix(in srgb, var(--lrob-cal-primary) 88%, black); --lrob-cal-primary-soft: color-mix(in srgb, var(--lrob-cal-primary) 12%, transparent); --lrob-cal-primary-fg: #ffffff; /* Secondary (used sparingly — accent areas where primary would be too loud). Optional; defaults to a neutral slate. */ --lrob-cal-secondary: #64748b; --lrob-cal-secondary-soft: color-mix(in srgb, var(--lrob-cal-secondary) 10%, transparent); /* Neutral surfaces and text */ --lrob-cal-surface: #ffffff; --lrob-cal-surface-muted: #f8fafc; --lrob-cal-surface-hover: #f1f5f9; --lrob-cal-text: #0f172a; --lrob-cal-text-muted: #64748b; --lrob-cal-text-subtle: #94a3b8; --lrob-cal-border: #e2e8f0; --lrob-cal-border-strong: #cbd5e1; /* Elevated surface (popup, modals). Soft and diffuse — not dark. */ --lrob-cal-shadow-elevated: 0 4px 6px -1px rgba(15, 23, 42, 0.04), 0 10px 30px -8px rgba(15, 23, 42, 0.12); --lrob-cal-shadow-card: 0 1px 2px rgba(15, 23, 42, 0.04), 0 1px 3px rgba(15, 23, 42, 0.06); /* Date-pill lightness. The hue + saturation of a pill are per-event and arrive as inline --pill-hue / --pill-sat custom properties (category colour, or a deterministic hash). Only the LIGHTNESS is mode-dependent, and it lives here so a dark surface can invert the pill without the inline style getting in the way — inline styles beat stylesheets, which is why the full colour used to be baked in and never adapted. */ --lrob-cal-pill-bg-l: 92%; --lrob-cal-pill-fg-l: 28%; /* ─── Spacing scale (8px grid, with one 4px sub-step) ───────── */ --lrob-cal-space-1: 4px; --lrob-cal-space-2: 8px; --lrob-cal-space-3: 12px; --lrob-cal-space-4: 16px; --lrob-cal-space-5: 24px; --lrob-cal-space-6: 32px; --lrob-cal-space-7: 48px; --lrob-cal-space-8: 64px; /* ─── Radius scale ───────────────────────────────────────────── */ --lrob-cal-radius-sm: 6px; /* small pills, dots, badges */ --lrob-cal-radius-md: 8px; /* buttons, inputs */ --lrob-cal-radius-lg: 12px; /* cards, popups, major surfaces */ --lrob-cal-radius-pill: 999px; /* ─── Typography ─────────────────────────────────────────────── */ --lrob-cal-line-tight: 1.25; --lrob-cal-line-comfortable: 1.55; --lrob-cal-font-weight-medium: 500; --lrob-cal-font-weight-semibold: 600; --lrob-cal-font-weight-bold: 700; /* ─── Motion ─────────────────────────────────────────────────── */ --lrob-cal-ease: cubic-bezier(0.4, 0, 0.2, 1); --lrob-cal-duration: 0.18s; /* ─── Backwards-compat aliases ───────────────────────────────── */ /* Old short-form names from the v1.0 token set. Kept as aliases so any third-party CSS that may have leaned on them still resolves. Internal stylesheets use the --lrob-cal-* names exclusively. */ --lrob-primary: var(--lrob-cal-primary); --lrob-primary-dark: var(--lrob-cal-primary-hover); --lrob-text: var(--lrob-cal-text); --lrob-text-light: var(--lrob-cal-text-muted); --lrob-border: var(--lrob-cal-border); --lrob-bg: var(--lrob-cal-surface-muted); --lrob-white: var(--lrob-cal-surface); } /* ─── Color modes ──────────────────────────────────────────────────────── There are exactly TWO palettes, Light and Dark, selected by `.lrob-is-light` / `.lrob-is-dark` on the block wrapper. Spacing / radius / typography / brand colours are mode-independent and stay on :root. How a wrapper gets its marker: - Light / Dark mode → PHP writes `lrob-theme-light lrob-is-light` (resp. dark) at render time. - Auto → PHP writes `lrob-theme-auto` only, and theme-detect.js measures the page background behind the block and adds the matching `lrob-is-*`. Auto is therefore just a *chooser* between the same two palettes — not a third rendering mode. Auto used to be a third mode that inherited the theme's text colour and kept surfaces transparent, to blend in. Two problems killed it: a calendar with the page's own background has no edge and dissolves into the page, and every token derived from `inherit`/`currentColor` collapses to black when a theme doesn't pass a colour down to arbitrary containers — black text on a black page. Resolving to a real palette removes that whole class of failure, and the palettes are admin-configurable if the defaults don't suit a theme. Before the script runs (and with JS off) an Auto wrapper has no marker and falls back to the :root Light palette — a readable card, possibly the wrong one, which is the right way to fail. */ .lrob-is-light { --lrob-cal-surface: #ffffff; --lrob-cal-surface-muted: #f8fafc; --lrob-cal-surface-hover: #f1f5f9; --lrob-cal-text: #0f172a; --lrob-cal-text-muted: #64748b; --lrob-cal-text-subtle: #94a3b8; --lrob-cal-border: #e2e8f0; --lrob-cal-border-strong: #cbd5e1; } .lrob-is-dark { --lrob-cal-surface: #1e2530; --lrob-cal-surface-muted: #252d3a; --lrob-cal-surface-hover: #2d3644; --lrob-cal-text: #e5e7eb; --lrob-cal-text-muted: #9ca3af; --lrob-cal-text-subtle: #6b7280; --lrob-cal-border: #374151; --lrob-cal-border-strong: #4b5563; --lrob-cal-shadow-elevated: 0 4px 6px -1px rgba(0, 0, 0, 0.3), 0 10px 30px -8px rgba(0, 0, 0, 0.55); --lrob-cal-shadow-card: 0 1px 2px rgba(0, 0, 0, 0.3), 0 1px 3px rgba(0, 0, 0, 0.45); /* Pills invert: deep saturated background, bright text of the same hue. */ --lrob-cal-pill-bg-l: 26%; --lrob-cal-pill-fg-l: 84%; } /* Shared icon utility — sizing handled by parent context, colour follows currentColor (every icon is a stroke SVG with stroke=currentColor). */ .lrob-icon { flex-shrink: 0; display: inline-block; vertical-align: middle; color: currentColor; } /* Tiny "Calendar by LRob" credit shown at the bottom of every block. Disable-able via Settings → Appearance → "Show branding". */ .lrob-cal-credit { margin: var(--lrob-cal-space-2) 0 0; padding: 0; text-align: right; font-size: 0.72em; line-height: 1; color: var(--lrob-cal-text-subtle); opacity: 0.65; } .lrob-cal-credit a { color: inherit; text-decoration: none; } .lrob-cal-credit a:hover { color: var(--lrob-cal-primary); opacity: 1; } /* Empty-state copy reused by every block */ .lrob-no-events { text-align: center; padding: var(--lrob-cal-space-6); color: var(--lrob-cal-text-muted); background: var(--lrob-cal-surface-muted); border: 1px solid var(--lrob-cal-border); border-radius: var(--lrob-cal-radius-lg); line-height: var(--lrob-cal-line-comfortable); }