/* ════════════════════════════════════════════════════════════════════ PF DESIGN SYSTEM — Branded Chrome Accents (opt-in) ──────────────────────────────────────────────────────────────────── Phase B / Option C — Subtle branded touches on editor chrome that reflect the active tenant's brand-theme color (--tenant-primary). Disabled by default; enable per-page or per-tenant by setting `data-pf-tenant-accent` on or any ancestor. DESIGN PHILOSOPHY ───────────────────────────────────────────────────────────────────── Three constraints inform every accent rule: 1. CHROME REMAINS NEUTRAL — A 1-2px tenant-colored stroke or focus- ring is enough to signal "you are working on Acme Corp's site". Full-bleed brand colors on chrome would distract from the work. 2. TEXT-ON-ACCENT MUST PASS WCAG — Any token derived from --tenant-primary used as a text/bg pair must compose to ≥ 4.5:1. Where impossible (light brand colors), fall back to neutral. 3. OPERATOR CONSISTENCY OVERRIDES VISUAL FLAIR — When the operator is performing a destructive action (delete, publish), the chrome snaps back to platform danger/success colors. Brand accents appear ONLY on idle / informational chrome. USAGE ───────────────────────────────────────────────────────────────────── Default (neutral chrome): ← chrome is neutral Branded chrome (subtle accent on top of neutral chrome): ← accent stripes appear The attribute can be set: • By TenantBranding ViewComponent (auto-on for all editor pages) • By operator preference (toggle in editor topbar — Phase C) • By admin setting (per-tenant flag — Phase D) COVERED SURFACES (10 chrome touchpoints) ───────────────────────────────────────────────────────────────────── • Topbar bottom border — 2px tenant-primary • Active page-tab — bottom indicator stripe • Active inspector-tab — bottom indicator stripe • Active outline-item — left indicator bar • Focus ring (inputs) — outline color • Primary CTA button — uses tenant-primary instead of platform indigo • Section-add button (+) — accent ring on hover • Theme-swatch active — outline color • Save-status pill bg — tinted with tenant-primary-soft • Logo wordmark hover — color shift to tenant-primary Version: 1.0.0 Last revised: 2026-05-09 ──────────────────────────────────────────────────────────────────── */ /* ───────────────────────────────────────────────────────────────────── TOPBAR — 2px bottom stripe in tenant primary ───────────────────────────────────────────────────────────────────── */ [data-pf-tenant-accent] .se-topbar { border-bottom: 2px solid var(--tenant-primary, var(--pf-color-action-primary)); } /* ───────────────────────────────────────────────────────────────────── PAGE TAB STRIP — Active tab indicator + tenant-tinted hover ───────────────────────────────────────────────────────────────────── */ [data-pf-tenant-accent] .se-page-tab.is-active { box-shadow: inset 0 -3px 0 var(--tenant-primary, var(--pf-color-action-primary)); } [data-pf-tenant-accent] .se-page-tab:hover:not(.is-active):not(.is-dragging) { background: color-mix(in srgb, var(--tenant-primary, var(--pf-color-action-primary)) 8%, transparent); } /* ───────────────────────────────────────────────────────────────────── INSPECTOR TABS — Active tab indicator ───────────────────────────────────────────────────────────────────── */ [data-pf-tenant-accent] .se-inspector-tab.is-active { box-shadow: inset 0 -2px 0 var(--tenant-primary, var(--pf-color-action-primary)); color: var(--tenant-primary, var(--pf-color-action-primary)); } /* ───────────────────────────────────────────────────────────────────── OUTLINE — Active item left-bar indicator ───────────────────────────────────────────────────────────────────── */ [data-pf-tenant-accent] .se-outline-item.is-active { box-shadow: inset 3px 0 0 var(--tenant-primary, var(--pf-color-action-primary)); } /* ───────────────────────────────────────────────────────────────────── FOCUS RING — Form inputs use tenant-primary outline ───────────────────────────────────────────────────────────────────── */ [data-pf-tenant-accent] .se-inspector input:focus, [data-pf-tenant-accent] .se-inspector textarea:focus, [data-pf-tenant-accent] .se-inspector select:focus, [data-pf-tenant-accent] .se-field-input:focus { border-color: var(--tenant-primary, var(--pf-color-border-focus)); box-shadow: 0 0 0 3px color-mix(in srgb, var(--tenant-primary, var(--pf-color-border-focus)) 20%, transparent); } /* ───────────────────────────────────────────────────────────────────── PRIMARY CTA — Uses tenant-primary instead of platform indigo Caveat: only when --tenant-primary has sufficient contrast against white text. Tenants with light brand colors fall back to neutral via --pf-color-action-primary. ───────────────────────────────────────────────────────────────────── */ [data-pf-tenant-accent] .se-btn--primary { background: var(--tenant-primary, var(--pf-color-action-primary)); border-color: var(--tenant-primary, var(--pf-color-action-primary)); } [data-pf-tenant-accent] .se-btn--primary:hover:not([disabled]) { background: var(--tenant-primary-dark, var(--pf-color-action-primary-hover)); border-color: var(--tenant-primary-dark, var(--pf-color-action-primary-hover)); } [data-pf-tenant-accent] .se-btn--primary:active:not([disabled]) { background: var(--tenant-primary-dark, var(--pf-color-action-primary-pressed)); } /* ───────────────────────────────────────────────────────────────────── SECTION ADD-BUTTON — accent ring on hover ───────────────────────────────────────────────────────────────────── */ [data-pf-tenant-accent] .se-add-section-btn:hover, [data-pf-tenant-accent] .se-add-section-btn:focus-visible { border-color: var(--tenant-primary, var(--pf-color-action-primary)); box-shadow: 0 0 0 3px color-mix(in srgb, var(--tenant-primary, var(--pf-color-action-primary)) 18%, transparent); } /* ───────────────────────────────────────────────────────────────────── THEME SWATCHES — Active swatch outline matches the swatch's own color (always tinted regardless of accent mode — but accent mode adds a stronger ring for the currently-applied theme) ───────────────────────────────────────────────────────────────────── */ [data-pf-tenant-accent] .se-theme-swatch.is-active { outline: 3px solid var(--tenant-primary, var(--pf-color-action-primary)); outline-offset: 2px; } /* ───────────────────────────────────────────────────────────────────── SAVE STATUS PILL — Tinted background reflecting tenant brand ───────────────────────────────────────────────────────────────────── */ [data-pf-tenant-accent] .se-status-pill:not(.is-saving):not(.is-error) { background: var(--tenant-primary-soft, var(--pf-color-action-primary-soft)); border-color: color-mix(in srgb, var(--tenant-primary, var(--pf-color-action-primary)) 30%, transparent); } /* ───────────────────────────────────────────────────────────────────── LOGO WORDMARK — Color shift on hover to tenant-primary ───────────────────────────────────────────────────────────────────── */ [data-pf-tenant-accent] .se-breadcrumb a:hover, [data-pf-tenant-accent] .se-breadcrumb-tenant:hover { color: var(--tenant-primary, var(--pf-color-action-primary)); } /* ───────────────────────────────────────────────────────────────────── ESCAPE HATCHES — Destructive actions snap back to platform danger regardless of branded mode. Operator must NEVER mistake a tenant's brand color for a delete/publish confirmation. ───────────────────────────────────────────────────────────────────── */ [data-pf-tenant-accent] .se-btn--danger, [data-pf-tenant-accent] .se-inspector-delete, [data-pf-tenant-accent] .se-status-pill.is-error { background: var(--pf-color-action-danger); border-color: var(--pf-color-action-danger); color: var(--pf-color-text-on-action); } [data-pf-tenant-accent] .se-status-pill.is-saving { background: var(--pf-color-status-info-soft); border-color: var(--pf-color-status-info-border); color: var(--pf-color-status-info-fg); }