/** * @file * Surface atom (Phase 6.4) — `css/atoms/surface.css` * * EN: Reusable card-shape primitive. Owns ONLY the visual shape of a * card-like surface: background colour, border-radius, base box- * shadow, overflow clipping, box-sizing. NO position, NO transform, * NO transition, NO layout-margins on the base — consumers own * placement in their layout context. Interaction (hover-lift) is * a separate atom (`.dck-hover-lift`); compose them by stacking * classes on the same element. * * DE: Wiederverwendbares Karten-Form-Primitiv. Definiert AUSSCHLIESSLICH * die visuelle Form einer kartenartigen Fläche: Hintergrundfarbe, * Border-Radius, Basis-Box-Shadow, Overflow-Clipping, Box-Sizing. * KEIN position, KEIN transform, KEIN transition, KEINE Layout- * Margins auf der Basis — Konsumenten besitzen die Platzierung * im Layout-Kontext. Interaktion (Hover-Lift) ist ein separates * Atom (`.dck-hover-lift`); Komposition durch Stapeln von Klassen * auf demselben Element. * * Audit findings driving extraction (see scripts/reports/phase-6.4-…): * - `.basic-card` basic-card.css:39-46 (radius 8px, shadow-soft) * - `.side-image-card` side-image-card.css:48-53 (radius 12px, shadow-soft) * - `.side-image-card-bordered` side-image-card.css:69-91 (no shadow, gradient border) * - `.masonry-item` masonry-grid.css:42-51 (radius 8px, shadow-soft) * - `.card-accordion` card-accordion.css:50-55 (radius 6px, hardcoded base) * - `.case-dossier` case-study-dossier.css:55-80 (radius 12px, hero shadow) * - `.topics-grid-card-inner` topics-grid.css:104-108 (radius 4px, no shadow, lifts on hover from Phase 6.4) * * Modifiers (compose with `.dck-surface` on the consumer element): * --rounded-sm — `--surf-radius: 6px` (card-accordion) * --rounded-lg — `--surf-radius: 12px` (side-image-card, case-dossier) * --shadow-hero — `--surf-shadow: var(--card-shadow-hero-base)` (case-dossier — hero-size shadow profile) * --no-shadow — `--surf-shadow: none` (side-image-card-bordered — gradient border replaces shadow) * * No `--rounded-md` modifier: 8px (the most common radius) IS the * atom default. Consumers needing a non-standard radius (e.g. * `.topics-grid-card-inner` at 4px) override `--surf-radius` directly * on their own selector — atom-internal vars are the override surface. * * Position-agnostic contract (mirrors Phase 6.2 round-icon-button + * Phase 6.3 overlay rules): * The atom's BASE selector (`.dck-surface`) declares NO positioning * of itself in its consumer's layout context — no `position`, * `top`, `right`, `bottom`, `left`, `inset`, `z-index`, layout- * margin. Consumers own that placement. `position: relative` on * the card itself is the consumer's responsibility (most card * consumers already declare it; the few that don't, do not need * it for `.dck-surface` to render correctly because surface has * no positioned children). * * Visual properties OWNED by the atom on its base: background, * border-radius, box-shadow, overflow, box-sizing. These are the * shape primitives; consumers may override them via `--surf-*` * custom property overrides on their own selector (specificity- * safe since custom properties cascade). * * Library wiring: declared as its own `surface` library in * `upmarkit_theme.libraries.yml` under `css.component:` (NOT * `css.theme:` — Phase 6.2 regression precedent). Added as a * dependency of every card consumer library that composes it: * basic_card, side_image_card, masonry_grid, card_accordion, * case_study_dossier, topics_grid. * * Token-only: every consumed value reads through `var(--…)`: * - background: `var(--color-surface-base)` (Schema §3) * - box-shadow: `var(--card-shadow-base)` (Schema §13) * - alternative shadows: `--card-shadow-hero-base` (Schema §13) * The atom does NOT hardcode any colour/shadow value. Border- * radius is a layout primitive (px literal); the 4 supported * radii are encoded as modifier classes, not tokens. * * Class binding sites (humans writing classes into Twig templates): *
*
*
*
*
*
*
← inherits radius 4px from topics-grid.css override of --surf-radius */ .dck-surface { /* Atom-internal visual primitives — modifiers mutate these vars, consumers may override them on their own selector for fine-grained cases (e.g. topics-grid-card-inner overrides --surf-radius to 4px). */ --surf-bg: var(--color-surface-base); --surf-radius: 8px; --surf-shadow: var(--card-shadow-base); background: var(--surf-bg); border-radius: var(--surf-radius); box-shadow: var(--surf-shadow); overflow: hidden; box-sizing: border-box; } /* ============================================================================ MODIFIERS — mutate atom-internal vars only. No direct property overrides. ============================================================================ */ .dck-surface--rounded-sm { --surf-radius: 6px; } .dck-surface--rounded-lg { --surf-radius: 12px; } .dck-surface--shadow-hero { --surf-shadow: var(--card-shadow-hero-base); } .dck-surface--no-shadow { --surf-shadow: none; } /* ============================================================================ LEGACY CLASS ALIASES — placeholder section. No legacy aliases needed for Phase 6.4. The consumer-side classes (`.basic-card`, `.side-image-card`, `.masonry-item`, `.card-accordion`, `.case-dossier`, `.topics-grid-card-inner`) are KEPT on the DOM alongside the atom classes (legacy-class-aliases-on policy from the Phase 6.4 audit). Their existing background/border-radius declarations in component CSS files continue to apply at equal specificity and override the atom's `--surf-*` defaults where needed. This is the intended migration path: consumers compose the atom but retain their own class identity for DB-stored content authoring. When/if those legacy classes are themselves deprecated in a later phase (post-content-migration), this block becomes the alias surface for them. Until then it intentionally stays empty. ============================================================================ */