/** * @file * Paragraphs Bundles foundation overrides. * * Reads the per-paragraph CSS custom properties set by the dynamic * file (`pb-{slug}-{id}.css`) and applies them as inheritable * text / background / border colours. Layout helpers from v1 are * preserved verbatim further down this file. * * --- v2 design notes (research-verified, 2026-05-05) ------------- * * Background + border are set on bundle-specific targets (not always * `.pb-ui-inner`). See per-bundle CSS and dynamic CSS scopes. * * Text colour is set ONCE on `.pb-ui-inner` and propagated by * inheritance. Elements that browsers (UA stylesheet) or host themes * commonly recolour (`h1-h6`, `mark`, `code`, `blockquote`, ...) are * force-inherited via `:where(...)`. `:where()` contributes zero * specificity (CSS Selectors L4 section3.4) so a sub-theme can still * override per element with a plain `.my-class` selector. * - https://developer.mozilla.org/en-US/docs/Web/CSS/:where * * Links keep their OWN scoped variable `--pb-lk` (with `-h` hover * variant). Forcing links to inherit body text colour erodes link * affordance - an a11y / usability regression even when not a strict * WCAG 1.4.1 failure (WAI Technique F73 + G183). * - https://www.w3.org/TR/WCAG20-TECHS/F73.html * * Form controls (`button, input, select, textarea`) are deliberately * untouched. UA-supplied styling preserves OS focus, disabled state, * and forced-colors mode integration. * * Nested paragraphs work without a `:not()` guard: each nested * `.pb-ui-inner` re-declares its own `--pb-*` properties for its * subtree. CSS Custom Properties L1 section2. * - https://www.w3.org/TR/css-variables-1/#defining-variables * * `--pb-*` defaults come from the theme bridge (`css/bridge/pb-theme-bridge-*.css`) * loaded before this file. Editor dynamic CSS overrides via id scope. * Hover tokens (`--pb-*-h`) are never bridged - only set when the editor * fills hover display fields (inline or dynamic CSS on the inner shell). * This file consumes `var(--pb-*)` only - no inline `--r-*` fallbacks. * * Cascade-layer placement: this file is intentionally UN-LAYERED, like * all PB CSS. Editor-set colours must override host-theme defaults * (paragraphs_bundles is a builder UI; the editor's choice wins), and a * module can't assume anything about the host theme's layers. Per CSS * Cascade L5, un-layered rules beat all layered rules, so staying * un-layered (PB declares no `pb.*` ladder) is what makes "settings * override theme" actually true. * * Filename: paragraphs-bundles-custom.css * Website: https://www.flashwebcenter.com * Developer: Alaa Haddad https://www.alaahaddad.com */ /* =================================================================== * Hover tokens - editor-only (v1 contract). Unset until the editor or * dynamic CSS sets them on `.pb-ui-inner` (same element as v1 inline). * ================================================================= */ .paragraphs-bundles { --pb-bg-h: initial; --pb-tx-h: initial; --pb-br-h: initial; --pb-lk-h: initial; } /* =================================================================== * Inner wrapper - border + text colour from theme bridge or editor. * Background is NOT set here: each bundle targets its own DOM node * (hero inner, card title, overlay, etc.) via dynamic CSS + bundle * static CSS. `--pb-bg` / `--pb-bg-h` exist only when the editor * sets background fields - never from the theme bridge. * ================================================================= */ /* The text colour itself is set on `.paragraphs-bundles > .pb-ui-inner` in * "Layout primitives" below - one block per selector in this file. */ .paragraphs-bundles > .pb-ui-inner:hover { color: var(--pb-tx-h, var(--pb-tx)); border-color: var(--pb-br-h, var(--pb-br)); } /* * Fields INHERIT the text colour; they never paint it. Painting each field * separately (as this rule once did) meant hovering a paragraph recoloured * only the field under the pointer, never the paragraph's text as a whole. * Enforced by tests/src/Unit/PbCssColourInheritanceContractTest.php. */ .paragraphs-bundles .field { color: inherit; border-color: var(--pb-br); } .paragraphs-bundles .field:hover { border-color: var(--pb-br-h, var(--pb-br)); } /* Nested PB paragraphs reset background to transparent so the outer * paragraph's background shows through. v1 contract; preserved. */ .pb-ui-inner .pb-ui-inner { --pb-bg: transparent; } /* =================================================================== * Force inheritance for elements UA / host themes commonly recolour. * `:where(...)` keeps specificity at 0,1,0 - sub-themes override per * element with any selector of equal-or-greater specificity. * * Deliberately NOT included: * - : has its own scoped variable below. * -