/* * SCM UI Kit - Oqtane theme bridge for website-display modules * * WHY THIS FILE EXISTS * -------------------- * Every website-display module's stylesheet reads its brand colors through `--scm-*` * tokens with a hardcoded fallback, e.g. BookNow's: * * --bn-accent: var(--scm-accent, #2563eb); * * and each module's Settings screen offers an "Auto (Use Site Theme)" mode whose * documented contract is "values come from the site theme". Nothing implemented the * producing half of that contract: in Auto mode `GetThemeOverrideStyle()` returns an * empty string, and NO stylesheet in this repository or in Oqtane.Theme.VenueChief ever * declared `--scm-accent`. Every module therefore painted its own fallback regardless of * what the operator configured. * * It went unnoticed because BookNow's fallback (#2563eb) is byte-identical to the * VenueChief theme's DEFAULT accent, so Auto looked correct until a customer branded * their site. Live find 2026-08-20 on venuechief.com/lok: the site accent resolved to * #d2232a on the module's own root element while the module rendered #2563eb. * * WHY `.scm-mod` AND NOT `:root` * ------------------------------ * Custom properties are substituted at computed-value time on the element that DECLARES * them. A `:root` bridge would freeze the site-level values and miss both the theme's * page-scoped `.main { --accent-color }` override and its dark-section overrides. * Declared on the module root -- a class every website-display module already carries, * enforced by WebsiteDisplayModuleConventionTests -- each module re-resolves against * whatever is in scope at its own position in the tree. * * Scoping to `.scm-mod` also keeps this file off admin surfaces entirely: AdminShell owns * its own `--simx-*` token layer via SCMUIKit.variables.css, and nothing here can reach it. * * CUSTOM MODE STILL WINS * ---------------------- * A module in "custom" theme mode writes `--scm-*` into an inline `style` attribute on * this same element. Inline declarations beat a class selector, so per-instance * customization keeps working exactly as before. * * SOURCE VARIABLES * ---------------- * `--accent-color` and friends are the VenueChief theme's vocabulary. `--bs-primary` is * the Bootstrap-standard fallback, so a customer running any third-party Oqtane theme * still gets a themed module rather than our blue. The final literal is the value that * shipped before this file existed, so a theme that sets neither changes nothing. */ .scm-mod { /* ---- Brand and surface primitives ---------------------------------- */ --scm-accent: var(--accent-color, var(--bs-primary, #2563eb)); --scm-accent-contrast: var(--contrast-color, #ffffff); --scm-surface: var(--background-color, #ffffff); --scm-surface-contrast: var(--default-color, #0f172a); /* Typography follows the theme by inheritance, so there is nothing to map; this token exists only for surfaces that need to name the family. */ --scm-font-sans: var(--default-font, inherit); /* ---- Semantic status ------------------------------------------------ */ /* Deliberately NOT derived from the brand: green has to stay green whatever accent the operator picks, or a red-branded venue gets a red "paid" badge. They are declared here rather than left to each module's own literal so they have a producer like everything else -- MyAccount and Shop read them, and a token with readers and no writer is the whole bug this file exists to close. Each keeps an override hook for a venue that needs to move one. */ --scm-success: var(--scm-success-color, #16a34a); --scm-warning: var(--scm-warning-color, #d97706); --scm-error: var(--scm-error-color, #dc2626); --scm-info: var(--scm-info-color, #2563eb); /* ---- simx compatibility -------------------------------------------- */ /* SCMUIKit.storefront.css, cart.css, components.css and the Shop's inline styles all read `--simx-*`, but the sheet that DEFINES those tokens (SCMUIKit.variables.css) reaches the browser only through the SCMUIKit.css entry point, which AdminShell and PublicDisplays declare and WebsiteDisplayResources does not. On public pages every one of them fell back to a literal. Loading the admin token layer here would fix the "undefined" half and keep the wrong half -- the storefront would render the ADMIN palette's blue instead of the customer's brand. These map to the site theme instead. Only the tokens those five publicly-loaded partials actually read are bridged; the other ~290 stay an admin concern. */ --simx-accent: var(--scm-accent); --simx-text-on-accent: var(--scm-accent-contrast); --simx-text-link-hover: var(--bs-link-hover-color, var(--scm-accent)); --simx-bg-surface: var(--scm-surface); --simx-text-primary: var(--scm-surface-contrast); /* KartingSeriesRegistration reads these two shortened names, which never existed even in the admin token layer. Aliased so they resolve. */ --simx-text: var(--scm-surface-contrast); --simx-border: var(--scm-border); --simx-border-default: var(--scm-border); /* Semantic status colors are deliberately NOT derived from the brand: green must stay green whatever the operator's accent is. These carry the admin palette's values with an override hook. */ --simx-success-bg: var(--scm-success-bg, #e8f6ed); --simx-success-border: var(--scm-success-border, #a6ddb9); --simx-success-text: var(--scm-success-text, #0f5132); --simx-danger-text: var(--scm-danger-text, #842029); /* Shape and motion. Wiring radius to the theme means the operator's corner-style choice in Theme Settings finally reaches module chrome. */ --simx-radius-sm: var(--border-radius, 0.25rem); --simx-radius-md: var(--border-radius, 0.375rem); --simx-duration-fast: 0.12s; --simx-shadow-md: 0 2px 8px rgba(15, 23, 32, 0.10); /* Neutral wash defaults. Upgraded to theme-derived values in the @supports block below where color-mix() is available. */ --simx-bg-hover: rgba(15, 23, 32, 0.04); --simx-bg-sunken: rgba(15, 23, 32, 0.04); --simx-border-subtle: rgba(15, 23, 32, 0.08); } /* * Derived tiers. * * Guarded rather than declared unconditionally: if color-mix() is unsupported the * declaration is invalid at computed-value time, and an invalid custom property does NOT * fall through to the `var(--x, fallback)` fallback -- it makes the whole consuming * declaration unset. Leaving these undeclared on such browsers lets each module's own * fallback fire, which is precisely the behavior that shipped before this file. * * `--scm-border` lives here for the same reason. Deriving it from the text color rather * than pinning a light-grey literal is what lets a dark site theme produce a readable * hairline instead of a bright line across a dark panel. * * This mirrors the guard BookNow's Module.css already uses for its own derivations. */ @supports (color: color-mix(in srgb, red 50%, blue 50%)) { .scm-mod { --scm-border: color-mix(in srgb, var(--scm-surface-contrast) 14%, transparent); /* Interaction tiers. Every module had been hardcoding these as #1e40af / #1e3a8a — the darker shades of the ORIGINAL blue — so a red-branded venue got a blue button the moment a cursor touched it. Only BookNow derived them; the other fifteen did not, which is why the accent looked fixed in places and stubborn in others. */ --scm-accent-hover: color-mix(in srgb, var(--scm-accent) 85%, black); --scm-accent-active: color-mix(in srgb, var(--scm-accent) 75%, black); --scm-accent-light: color-mix(in srgb, var(--scm-accent) 12%, var(--scm-surface)); --scm-accent-border: color-mix(in srgb, var(--scm-accent) 45%, var(--scm-surface)); --scm-accent-glow: color-mix(in srgb, var(--scm-accent) 22%, transparent); --scm-surface-elevated: color-mix(in srgb, var(--scm-surface) 96%, var(--scm-surface-contrast)); --scm-surface-muted: color-mix(in srgb, var(--scm-surface) 94%, var(--scm-surface-contrast)); --scm-surface-hover: color-mix(in srgb, var(--scm-surface) 92%, var(--scm-surface-contrast)); --scm-border-light: color-mix(in srgb, var(--scm-surface-contrast) 8%, transparent); --scm-border-hover: color-mix(in srgb, var(--scm-border) 70%, var(--scm-accent)); --scm-text-body: color-mix(in srgb, var(--scm-surface-contrast) 85%, transparent); --scm-text-secondary: color-mix(in srgb, var(--scm-surface-contrast) 72%, transparent); --scm-text-muted: color-mix(in srgb, var(--scm-surface-contrast) 60%, transparent); --scm-text-tertiary: color-mix(in srgb, var(--scm-surface-contrast) 48%, transparent); --scm-text-dim: color-mix(in srgb, var(--scm-surface-contrast) 40%, transparent); /* The soft tiers wash each status into the module's own surface, so they stay readable on a dark custom background instead of staying pale. */ --scm-success-soft: color-mix(in srgb, var(--scm-success) 12%, var(--scm-surface)); --scm-warning-soft: color-mix(in srgb, var(--scm-warning) 12%, var(--scm-surface)); --scm-error-soft: color-mix(in srgb, var(--scm-error) 12%, var(--scm-surface)); --scm-info-soft: color-mix(in srgb, var(--scm-info) 12%, var(--scm-surface)); --simx-text-secondary: var(--scm-text-secondary); --simx-text-tertiary: var(--scm-text-tertiary); --simx-bg-hover: var(--scm-surface-hover); --simx-bg-sunken: var(--scm-surface-muted); --simx-border-subtle: var(--scm-border-light); } }