/** * Webtron Docs — Block Design Tokens * * Single source of truth for the custom-block visual language (the Material/Claude * overhaul, plan: workspace/analysis/25-blocks-visual-overhaul.md). * * Every custom block under /blocks//style.css consumes these `--wds-*` tokens * instead of hardcoding its own colors / radii / shadows. Do NOT redefine these inside * individual block stylesheets — change a value here and it propagates everywhere. * * DELIVERY (how this reaches the page): * - Front end: @import'ed at the top of assets/css/block-styles.css (enqueued on * wp_enqueue_scripts, cache-busted by filemtime). * - Editor: listed in the add_editor_style() array in inc/setup/theme-support.php * so it is injected INTO the WP 6.9 iframe canvas (the @import alone is * not reliably honored inside the iframe — the explicit array entry is). * Never enqueue this on enqueue_block_editor_assets as a style — that lands in the * outer admin document and logs "was added to the iframe incorrectly". * * Brand values come from theme.json (Primary Blue #2372ce, Primary Dark #1d428a, * Gold #e8b82a, Dark #101820) — NOT the generic Tailwind blue the blocks shipped with. * * @package WebtronDocs * @version 1.0.0 */ :root { /* ---- Brand accent (from theme.json) ---- */ --wds-accent: #2372ce; /* Primary Blue */ --wds-accent-strong: #1d428a; /* Primary Dark */ --wds-accent-soft: #eaf2fb; /* tint for accent backgrounds / hovers */ --wds-accent-contrast:#ffffff; /* text on a solid accent fill */ --wds-gold: #e8b82a; /* secondary brand accent */ /* ---- Ink & text ---- */ --wds-ink: #101820; /* near-black brand dark */ --wds-text: #1e293b; /* primary body text on light surfaces */ --wds-text-muted: #64748b; /* secondary / meta text */ --wds-text-faint: #94a3b8; /* placeholders, disabled */ /* ---- Surfaces & borders ---- */ --wds-surface: #ffffff; /* card / block background */ --wds-surface-2: #f8fafc; /* recessed / striped / header background */ --wds-surface-3: #f1f5f9; /* deeper recess (code, wells) */ --wds-border: #e2e8f0; /* hairline 1px border */ --wds-border-strong: #cbd5e1; /* emphasized divider / input border */ /* ---- Semantic palette (callout types, error severities, status) ---- */ --wds-info: #2372ce; --wds-info-soft: #eaf2fb; --wds-success: #15803d; --wds-success-soft: #e8f5ec; --wds-warning: #b45309; --wds-warning-soft: #fdf3e7; --wds-danger: #dc2626; --wds-danger-soft: #fdeaea; --wds-tip: #5b21b6; --wds-tip-soft: #f3eefb; --wds-neutral: #475569; --wds-neutral-soft: #f1f5f9; /* TEXT colour for semantic TEXT/labels sitting ON the matching -soft tint (badges, pills, chips with WORDS). The base --wds- hue on its own -soft tint lands at ~4.2-4.5:1 — just under WCAG AA for normal text — so these are darkened (mixed with ink) to clear 4.5:1. Use --wds--on-soft for badge/pill TEXT; the plain --wds- is fine for eyebrows on the white surface and for meaningful ICONS (3:1). */ --wds-info-on-soft: #2064b4; --wds-success-on-soft: #147039; --wds-warning-on-soft: var(--wds-warning); /* already 4.6:1 on its soft */ --wds-danger-on-soft: #bd2425; --wds-tip-on-soft: var(--wds-tip); /* 7.9:1 */ --wds-neutral-on-soft: var(--wds-neutral); /* 6.9:1 */ --wds-accent-on-soft: #2064b4; /* ---- Shape ---- */ --wds-radius: 12px; /* cards, panels, primary containers */ --wds-radius-sm: 8px; /* inner elements, badges, inputs */ --wds-radius-pill: 999px; /* pills, number markers, chips */ /* ---- Elevation (one scale — no ad-hoc multi-layer shadows) ---- */ --wds-shadow-sm: 0 1px 2px rgba(16, 24, 32, 0.06); --wds-shadow: 0 1px 3px rgba(16, 24, 32, 0.10); --wds-shadow-lg: 0 4px 12px rgba(16, 24, 32, 0.08); /* hover / raised only */ --wds-focus-ring: 0 0 0 3px rgba(35, 114, 206, 0.30); /* :focus-visible */ /* ---- Motion ---- */ --wds-ease: cubic-bezier(0.2, 0, 0, 1); --wds-dur: 160ms; --wds-dur-slow: 240ms; /* ---- Spacing rhythm (convenience; blocks may still use their own) ---- */ --wds-gap: 1rem; --wds-pad: 1.25rem; --wds-pad-sm: 0.75rem; /* ==================================================================== DESIGN PRIMITIVES (doc 26 overhaul) — shared component vocabulary. Blocks consume these so the suite speaks ONE Claude/Material dialect instead of each block reinventing markers, chips, tables, fields. ==================================================================== */ /* ---- Elevation & shape (design layer) ---- */ --wds-shadow-card: 0 1px 2px rgba(16, 24, 32, 0.05), 0 4px 12px rgba(16, 24, 32, 0.06); /* layered soft "card" lift */ --wds-radius-lg: 16px; /* generous annotation / hero surfaces */ --wds-lift: translateY(-2px); /* canonical hover lift */ /* ---- Icon-chip (the signature motif: tinted rounded-square holding a glyph) ---- usage: width/height var(--wds-chip-size); border-radius var(--wds-chip-radius); background: -soft; color: ; glyph ~18-20px */ --wds-chip-size: 36px; --wds-chip-size-sm: 28px; --wds-chip-radius: 10px; /* ---- Marker + rail (timeline / procedure / step-wizard / checklist / annotated) ---- default = soft tint + accent glyph + ring; current = solid accent; complete = solid success */ --wds-marker-size: 34px; --wds-marker-radius: var(--wds-radius-sm); /* rounded-square = the signature (vs old circles) */ --wds-marker-bg: var(--wds-accent-soft); --wds-marker-fg: var(--wds-accent-strong); --wds-marker-ring: 0 0 0 1.5px color-mix(in srgb, var(--wds-accent) 28%, transparent); --wds-rail-color: var(--wds-border); --wds-rail-fill: var(--wds-accent); /* progress / completed spine fill */ --wds-rail-width: 2px; --wds-state-done-tint:var(--wds-success-soft); /* replaces ALL hardcoded green gradients */ /* ---- Eyebrow micro-label (scannability) ---- apply: font: 600 var(--wds-eyebrow-size)/1 inherit; text-transform: uppercase; letter-spacing: var(--wds-eyebrow-tracking); color: muted-or-semantic */ --wds-eyebrow-size: 0.6875rem; /* 11px */ --wds-eyebrow-tracking:0.06em; /* ---- Data-surface / table language ---- */ --wds-surface-frost: rgba(255, 255, 255, 0.72); /* frosted sticky header */ --wds-blur: blur(8px) saturate(1.4); --wds-lane-bg: var(--wds-accent-soft); /* "Recommended" column lane */ --wds-lane-cap: var(--wds-accent); /* 3px top edge on the lane header */ --wds-status-absent: var(--wds-text-faint); /* ✗ / — render CALM grey, never red */ /* ---- Unified code surface (code-highlight ↔ api-reference share one) ---- */ --wds-code-bg: #1b2330; --wds-code-fg: #e6edf3; --wds-code-toolbar-bg:rgba(255, 255, 255, 0.04); --wds-code-gutter: rgba(230, 237, 243, 0.32); --wds-code-line-hl: rgba(35, 114, 206, 0.16); /* accent-tinted line highlight */ --wds-font-mono: ui-monospace, 'SF Mono', 'JetBrains Mono', 'Cascadia Code', Menlo, Consolas, monospace; /* ---- Form-field / control / button / result-card (calculators, tabs, accordion, copy) ---- NOTE: the older --wds-field-* used elsewhere are scoped to the dark AI-glass UI; these are the theme-level light+dark field system for the docs blocks. */ --wds-field-height: 2.75rem; /* 44px touch target */ --wds-field-bg: var(--wds-surface); --wds-field-bg-hover: var(--wds-surface-2); --wds-field-border: var(--wds-border-strong); --wds-field-radius: 10px; --wds-control-track-bg: var(--wds-surface-2); /* segmented-control track */ --wds-control-thumb-bg: var(--wds-surface); /* sliding thumb */ --wds-control-thumb-shadow: var(--wds-shadow-sm); --wds-indicator-color: var(--wds-accent); /* sliding tab underline / active */ --wds-btn-radius: 10px; --wds-icon-btn-size: 2.25rem; /* 36px ghost icon-button */ --wds-icon-btn-hover-bg: color-mix(in srgb, var(--wds-accent) 8%, transparent); --wds-result-bg: var(--wds-accent-soft); /* calculator hero output card */ --wds-result-fg: var(--wds-accent-strong); --wds-result-radius: var(--wds-radius); /* ---- Motion (design layer) ---- */ --wds-dur-lg: 400ms; /* MD3 emphasized reveals / fills */ --wds-ease-emphasized:cubic-bezier(0.2, 0, 0, 1); } /* * Dark mode — flips the neutral/surface layer + lifts the accent for contrast; semantic * hues keep their meaning and are tuned lighter so they read on dark surfaces. * * IMPORTANT — block tokens must follow the SAME authority that drives the docs page * background (--docs-bg in inc/docs/assets/css/design-tokens.css), or they desync (page * light + block text light-grey = unreadable, the exact bug this avoids). The docs system's * authority is ONLY: * - html[data-theme="dark"] (explicit toggle — FAB + docs islands; on ) * - @media (prefers-color-scheme: dark) when no explicit data-theme="light" (system pref) * The docs design-tokens.css does NOT respond to the `.dark-mode` class at all. * * ⚠ DO NOT add `html.dark-mode` / `.dark-mode` here as a dark trigger on docs pages: the * flash-prevention script in parts/header.html adds `.dark-mode` to from a SEPARATE * localStorage key (`darkMode`) than the docs island uses (`webtron_docs_theme`/data-theme). * So `html.dark-mode` can be present while the docs page is rendering LIGHT (data-theme unset) * → blocks would go dark on a light page. We therefore key on `data-theme` only (matching the * docs authority). `body.dark-mode` is kept ONLY for NON-docs pages, where the FAB sets it * alongside data-theme and there is no docs --docs-* system to desync against. * * We toggle dark via: * - html[data-theme="dark"] (authoritative everywhere; FAB sets it AND docs sets it) * - body.dark-mode (non-docs FAB pages; harmless on docs since FAB also sets data-theme) * - .is-dark-theme (legacy island hook) * - @media (prefers-color-scheme: dark), not [data-theme="light"] (docs system-pref, scoped) * The dark VALUES live in the custom-property list below; both the selector rule and the * prefers-color-scheme media query apply the SAME list, so keep them in sync if edited. */ [data-theme="dark"], .is-dark-theme, body.dark-mode:not(.webtron-docs-single):not(.webtron-docs-archive):not(.webtron-docs-taxonomy) { --wds-accent: #5a9be0; --wds-accent-strong: #8bb9ec; --wds-accent-soft: rgba(90, 155, 224, 0.14); /* NOTE: --wds-accent-contrast is intentionally NOT flipped. It is the text colour for elements sitting on a SOLID accent fill (badges, active pills, parent cards). That fill stays a saturated blue in dark mode, so its text must stay white in both modes — flipping it to dark produced dark-on-blue low-contrast text. */ --wds-gold: #f1c84b; --wds-ink: #e5e9f0; --wds-text: #e2e8f0; --wds-text-muted: #94a3b8; --wds-text-faint: #64748b; --wds-surface: #1a2230; --wds-surface-2: #141b27; --wds-surface-3: #0f1620; --wds-border: #2b3648; --wds-border-strong: #3a4862; --wds-info: #5a9be0; --wds-info-soft: rgba(90, 155, 224, 0.14); --wds-success: #4ade80; --wds-success-soft: rgba(74, 222, 128, 0.13); --wds-warning: #fbbf24; --wds-warning-soft: rgba(251, 191, 36, 0.13); --wds-danger: #f87171; --wds-danger-soft: rgba(248, 113, 113, 0.13); --wds-tip: #a78bfa; --wds-tip-soft: rgba(167, 139, 250, 0.14); --wds-neutral: #94a3b8; --wds-neutral-soft: rgba(148, 163, 184, 0.12); /* -on-soft (dark): info/accent lifted to clear AA on their dark soft; rest already pass. */ --wds-info-on-soft: #6aa5e3; --wds-accent-on-soft: #6aa5e3; --wds-success-on-soft: var(--wds-success); --wds-warning-on-soft: var(--wds-warning); --wds-danger-on-soft: var(--wds-danger); --wds-tip-on-soft: var(--wds-tip); --wds-neutral-on-soft: var(--wds-neutral); --wds-shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.40); --wds-shadow: 0 1px 3px rgba(0, 0, 0, 0.45); --wds-shadow-lg: 0 4px 14px rgba(0, 0, 0, 0.50); --wds-focus-ring: 0 0 0 3px rgba(90, 155, 224, 0.40); /* Design-primitive dark overrides (only the tokens with LITERAL values; the rest reference --wds-* that already flip above). */ --wds-shadow-card: 0 1px 2px rgba(0, 0, 0, 0.40), 0 4px 14px rgba(0, 0, 0, 0.45); --wds-surface-frost: rgba(20, 27, 39, 0.72); --wds-code-bg: #0f1620; --wds-code-fg: #e6edf3; --wds-code-toolbar-bg:rgba(255, 255, 255, 0.05); --wds-code-gutter: rgba(230, 237, 243, 0.28); --wds-code-line-hl: rgba(90, 155, 224, 0.18); } /* System-preference fallback: go dark only when the user hasn't explicitly chosen light (data-theme="light"). Mirrors design-tokens.css line ~308 so blocks track the docs page. SCOPED to docs pages (body.webtron-docs-* markers) because the docs design-tokens.css auto-dark is docs-only — applying it site-wide would dark the blocks on regular pages whose chrome has NO auto-dark, re-creating the very mismatch this fix removes. On non-docs pages, blocks still go dark via the explicit FAB toggle (html/body.dark-mode, data-theme="dark") handled by the selector rule above. */ @media (prefers-color-scheme: dark) { html:not([data-theme="light"]) body.webtron-docs-single, html:not([data-theme="light"]) body.webtron-docs-archive, html:not([data-theme="light"]) body.webtron-docs-taxonomy { --wds-accent: #5a9be0; --wds-accent-strong: #8bb9ec; --wds-accent-soft: rgba(90, 155, 224, 0.14); --wds-gold: #f1c84b; --wds-ink: #e5e9f0; --wds-text: #e2e8f0; --wds-text-muted: #94a3b8; --wds-text-faint: #64748b; --wds-surface: #1a2230; --wds-surface-2: #141b27; --wds-surface-3: #0f1620; --wds-border: #2b3648; --wds-border-strong: #3a4862; --wds-info: #5a9be0; --wds-info-soft: rgba(90, 155, 224, 0.14); --wds-success: #4ade80; --wds-success-soft: rgba(74, 222, 128, 0.13); --wds-warning: #fbbf24; --wds-warning-soft: rgba(251, 191, 36, 0.13); --wds-danger: #f87171; --wds-danger-soft: rgba(248, 113, 113, 0.13); --wds-tip: #a78bfa; --wds-tip-soft: rgba(167, 139, 250, 0.14); --wds-neutral: #94a3b8; --wds-neutral-soft: rgba(148, 163, 184, 0.12); --wds-info-on-soft: #6aa5e3; --wds-accent-on-soft: #6aa5e3; --wds-success-on-soft: var(--wds-success); --wds-warning-on-soft: var(--wds-warning); --wds-danger-on-soft: var(--wds-danger); --wds-tip-on-soft: var(--wds-tip); --wds-neutral-on-soft: var(--wds-neutral); --wds-shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.40); --wds-shadow: 0 1px 3px rgba(0, 0, 0, 0.45); --wds-shadow-lg: 0 4px 14px rgba(0, 0, 0, 0.50); --wds-focus-ring: 0 0 0 3px rgba(90, 155, 224, 0.40); --wds-shadow-card: 0 1px 2px rgba(0, 0, 0, 0.40), 0 4px 14px rgba(0, 0, 0, 0.45); --wds-surface-frost: rgba(20, 27, 39, 0.72); --wds-code-bg: #0f1620; --wds-code-fg: #e6edf3; --wds-code-toolbar-bg:rgba(255, 255, 255, 0.05); --wds-code-gutter: rgba(230, 237, 243, 0.28); --wds-code-line-hl: rgba(90, 155, 224, 0.18); } }