/* ════════════════════════════════════════════════════════════════════ PF DESIGN SYSTEM — Legacy Compatibility Shim ──────────────────────────────────────────────────────────────────── Maps legacy token systems (--platforma-*, --se-*, --chub-*, --tenant-*) to their PF semantic equivalents. This file is the migration bridge: it allows existing component CSS to gain theme-awareness WITHOUT being refactored. How it works: 1. tokens.semantic.css declares --pf-color-surface-base etc. 2. themes.dark.css overrides the SEMANTIC tokens when dark. 3. compat.legacy.css aliases --platforma-white → --pf-color-surface-raised. 4. Existing CSS using `var(--platforma-white)` now follows theme. IMPORTANT — Maintenance rules: ✗ NEVER add NEW component CSS that references legacy tokens. Always use --pf-color-* directly in new code. ✓ This file is FROZEN — only add aliases when discovering an uncovered legacy token still in use. ✓ Migration goal: delete this file when zero --platforma-*, --se-*, --chub-*, --tenant-* references remain in component CSS. Mapping rationale: • Legacy tokens often described APPEARANCE (parchment-50, ink-900). PF tokens describe INTENT (surface-base, text-primary). • The mapping captures original semantic meaning. Where ambiguity exists (e.g. parchment-50 used as both "page bg" and "card bg"), we map to the most common usage and add a comment for follow-up. Categories: A. --platforma-* core tokens (admin chrome, marketing) B. --se-* editor tokens (CMS editor chrome — DARK.1-6) C. --chub-* public site (community-hub template) D. --tenant-* brand override (per-tenant theming — kept as-is, handled by TenantBranding component) Version: 1.0.0 Last revised: 2026-05-09 ──────────────────────────────────────────────────────────────────── */ /* SPECIFICITY BOOST (defense-in-depth — wins regardless of load-order): html[lang] = element + attribute = 0,1,1 — always has lang html:root = element + pseudo = 0,1,1 — always matches :root :root = pseudo only = 0,1,0 — fallback (lowest priority) Both 0,1,1 selectors beat platforma-tokens.css's plain `:root` (0,1,0) even if load-order is somehow wrong. Comma-separated so the highest- specificity match wins for the actual root element. THIS IS LOAD-ORDER INDEPENDENT — even with aggressive browser caching or hot-reload race conditions, this declaration will out-rank the hardcoded values in platforma-tokens.css because of higher specificity. */ html[lang], html:root, :root { /* ═════════════════════════════════════════════════════════════ A. PLATFORMA — Core tokens (admin chrome + marketing) ═════════════════════════════════════════════════════════════ */ /* Surface anchors */ --platforma-white: var(--pf-color-surface-raised); --platforma-gray-50: var(--pf-color-surface-base); --platforma-gray-100: var(--pf-color-surface-sunken); --platforma-gray-200: var(--pf-color-border-subtle); --platforma-gray-300: var(--pf-color-border-strong); --platforma-gray-400: var(--pf-color-text-disabled); --platforma-gray-500: var(--pf-color-text-tertiary); --platforma-gray-600: var(--pf-color-text-tertiary); --platforma-gray-700: var(--pf-color-text-secondary); --platforma-gray-800: var(--pf-color-text-primary); --platforma-gray-900: var(--pf-color-text-primary); /* Parchment family (cream-tinted neutrals — admin classic look) Mapped to PF semantic tokens so dark theme switches automatically. */ --platforma-parchment-50: var(--pf-color-surface-base); --platforma-parchment-100: var(--pf-color-surface-sunken); --platforma-parchment-200: var(--pf-color-border-subtle); --platforma-parchment-300: var(--pf-color-border-strong); /* Ink family (text colors — classic typography hierarchy) */ --platforma-ink: var(--pf-color-text-primary); --platforma-ink-900: var(--pf-color-text-primary); --platforma-ink-strong: var(--pf-color-text-primary); --platforma-ink-primary: var(--pf-color-text-primary); --platforma-ink-muted: var(--pf-color-text-secondary); --platforma-ink-subtle: var(--pf-color-text-tertiary); /* Line family (borders, dividers) */ --platforma-line-50: var(--pf-color-border-subtle); --platforma-line-100: var(--pf-color-border-subtle); --platforma-line-200: var(--pf-color-border-strong); --platforma-border: var(--pf-color-border-strong); /* Brand (Platforma red — distinct admin/marketing identity) Brand color is INTENTIONALLY not theme-switched — Platforma red remains red in dark mode. Only foreground variants adjust. */ --platforma-brand: var(--pf-color-action-primary); --platforma-brand-pressed: var(--pf-color-action-primary-pressed); --platforma-brand-soft: var(--pf-color-action-primary-soft); --platforma-brand-dark: var(--pf-color-action-primary-pressed); --platforma-brand-on-dark: var(--pf-color-text-on-action); --platforma-brand-glow: rgb(99 102 241 / 0.22); /* Accent (Platforma blue/indigo for secondary CTAs) */ --platforma-accent: var(--pf-color-action-primary); --platforma-accent-soft: var(--pf-color-action-primary-soft); --platforma-accent-border: var(--pf-color-action-primary-soft-hover); --platforma-accent-ink: var(--pf-color-action-primary-pressed); /* Status family */ --platforma-success: var(--pf-color-status-success); --platforma-success-soft: var(--pf-color-status-success-soft); --platforma-warning: var(--pf-color-status-warning); --platforma-warning-soft: var(--pf-color-status-warning-soft); --platforma-danger: var(--pf-color-status-danger); --platforma-danger-light: var(--pf-color-red-400); --platforma-danger-soft: var(--pf-color-status-danger-soft); --platforma-info: var(--pf-color-status-info); --platforma-info-light: var(--pf-color-sky-400); --platforma-info-soft: var(--pf-color-status-info-soft); /* Typography */ --platforma-font-sans: var(--pf-font-family-sans); --platforma-font-serif: var(--pf-font-family-serif); --platforma-font-mono: var(--pf-font-family-mono); --platforma-font-family: var(--pf-font-family-sans); /* Spacing aliases (legacy s-N convention → PF space scale) Note: legacy s-2 was 8px = pf-space-2, s-3 = 12px = pf-space-3, etc. */ --platforma-s-2: var(--pf-space-2); --platforma-s-3: var(--pf-space-3); --platforma-s-4: var(--pf-space-4); --platforma-s-5: var(--pf-space-5); --platforma-s-6: var(--pf-space-6); --platforma-s-7: var(--pf-space-7); --platforma-s-8: var(--pf-space-8); --platforma-space-2: var(--pf-space-2); --platforma-space-3: var(--pf-space-3); --platforma-space-4: var(--pf-space-4); --platforma-space-5: var(--pf-space-5); --platforma-space-6: var(--pf-space-6); /* Radius */ --platforma-radius-xs: var(--pf-radius-xs); --platforma-radius-input: var(--pf-radius-sm); --platforma-radius-card: var(--pf-radius-lg); --platforma-radius-panel: var(--pf-radius-xl); --platforma-radius-pill: var(--pf-radius-full); /* Shadows */ --platforma-shadow: var(--pf-color-shadow-sm); --platforma-shadow-soft: var(--pf-color-shadow-sm); --platforma-shadow-card: var(--pf-color-shadow-md); /* Motion */ --platforma-duration-fast: var(--pf-motion-duration-fast); --platforma-duration-quick: var(--pf-motion-duration-fast); --platforma-duration-smooth: var(--pf-motion-duration-base); --platforma-duration: var(--pf-motion-duration-base); --platforma-ease-out: var(--pf-motion-ease-out); --platforma-ease-premium: var(--pf-motion-ease-emphasized); --platforma-ease-celebration: var(--pf-motion-ease-out); /* Focus ring */ --platforma-focus-ring: var(--pf-focus-ring); /* ═════════════════════════════════════════════════════════════ B. SE — CMS Editor tokens (added in DARK.1-6 Slice) Now redundant — the parent --platforma-* tokens already follow theme via this compat layer. Kept for transitional safety; slated for removal in Phase B once all editor CSS is refactored. ═════════════════════════════════════════════════════════════ */ --se-surface: var(--pf-color-surface-raised); --se-surface-hover: var(--pf-color-surface-hover); --se-surface-soft: var(--pf-color-surface-base); --se-surface-elevated: var(--pf-color-surface-overlay); --se-text: var(--pf-color-text-primary); --se-text-muted: var(--pf-color-text-secondary); --se-text-subtle: var(--pf-color-text-tertiary); --se-border: var(--pf-color-border-strong); --se-border-soft: var(--pf-color-border-subtle); --se-border-strong: var(--pf-color-border-strong); --se-input-bg: var(--pf-color-surface-sunken); --se-input-border: var(--pf-color-border-strong); --se-input-border-focus: var(--pf-color-border-focus); --se-accent: var(--pf-color-action-primary); --se-accent-soft: var(--pf-color-action-primary-soft); --se-shadow: var(--pf-color-shadow-md); --se-shadow-elevated: var(--pf-color-shadow-xl); /* ═════════════════════════════════════════════════════════════ C. CHUB — Community-Hub public site template Public site keeps tenant brand identity (--tenant-*); these legacy aliases route through PF semantic tokens that respect the editor's dark mode for preview, while public visits still see the tenant's chosen brand theme. ═════════════════════════════════════════════════════════════ */ /* Surface family */ --chub-bg: var(--pf-color-surface-base); --chub-bg-soft: var(--pf-color-surface-sunken); --chub-surface: var(--pf-color-surface-raised); --chub-surface-alt: var(--pf-color-surface-sunken); --chub-surface-hover: var(--pf-color-surface-hover); --chub-surface-soft: var(--pf-color-surface-sunken); /* Text family */ --chub-text: var(--pf-color-text-primary); --chub-text-muted: var(--pf-color-text-secondary); --chub-text-soft: var(--pf-color-text-tertiary); --chub-text-strong: var(--pf-color-text-primary); /* Border family */ --chub-border: var(--pf-color-border-subtle); --chub-border-light: var(--pf-color-border-subtle); --chub-border-mid: var(--pf-color-border-strong); /* Spacing */ --chub-space-2: var(--pf-space-2); --chub-space-3: var(--pf-space-3); --chub-space-4: var(--pf-space-4); --chub-space-5: var(--pf-space-5); --chub-space-6: var(--pf-space-6); --chub-section-gap: var(--pf-space-12); --chub-container: 1200px; /* Radius */ --chub-radius: var(--pf-radius-lg); --chub-radius-lg: var(--pf-radius-xl); /* Shadow */ --chub-shadow: var(--pf-color-shadow-sm); --chub-shadow-md: var(--pf-color-shadow-md); /* Note on accent/primary in chub: --chub-primary, --chub-primary-dark, --chub-accent etc. are NOT aliased here — they are intentionally driven by --tenant-* tokens (overridden in _WebsiteLayout.cshtml inline-style based on the active BrandTheme). See SEC.16.5 for the bridge. */ /* ═════════════════════════════════════════════════════════════ D. TENANT — Brand override hooks (NOT aliased) --tenant-primary, --tenant-secondary etc. are deliberately NOT mapped here. They are populated at runtime by the TenantBranding ViewComponent based on the tenant's active BrandTheme. This compat shim lives ABOVE that injection so the tenant tokens take precedence as designed. ═════════════════════════════════════════════════════════════ */ } /* ═════════════════════════════════════════════════════════════════════ NUCLEAR FALLBACK — !important on critical theme-switching tokens ───────────────────────────────────────────────────────────────────── When site-editor.css base styles use var(--platforma-parchment-50) directly in component rules (e.g. .se-page-rail, .se-inspector-tabs, .se-inspector-footer, .se-outline-footer, .se-field-image), the resolution chain MUST end at our PF semantic tokens — not the hardcoded #FBFAF6 declared in platforma-tokens.css. Specificity boost (html[lang]) above already wins (0,1,1 > 0,1,0), but adding !important to these specific surface/text/border tokens provides defense-in-depth against: • Future stylesheets that might re-declare with higher specificity • Inline-style :root injections from third-party scripts • Browser-extensions that override CSS variables • Edge-cases in `@layer` cascade ordering IMPORTANT scope is INTENTIONALLY NARROW: ✓ Only surface, text, border tokens that need theme-switching ✗ NOT applied to brand colors (--platforma-brand etc. — those are runtime tenant-themed via TenantBranding component) ✗ NOT applied to spacing/radius/shadow (no theme-conflict) This is a documented compat-shim use of !important — it is the correct tool when overriding legacy hardcoded values during migration. To remove !important, refactor site-editor.css base rules to use --pf-color-* directly (Phase B work). ═════════════════════════════════════════════════════════════════════ */ html[lang], html:root, :root { /* Surface (CRITICAL for theme-switching) */ --platforma-white: var(--pf-color-surface-raised) !important; --platforma-parchment-50: var(--pf-color-surface-base) !important; --platforma-parchment-100: var(--pf-color-surface-sunken) !important; --platforma-parchment-200: var(--pf-color-border-subtle) !important; --platforma-parchment-300: var(--pf-color-border-strong) !important; /* Gray scale (CRITICAL for theme-switching) */ --platforma-gray-50: var(--pf-color-surface-base) !important; --platforma-gray-100: var(--pf-color-surface-sunken) !important; --platforma-gray-200: var(--pf-color-border-subtle) !important; --platforma-gray-300: var(--pf-color-border-strong) !important; --platforma-gray-700: var(--pf-color-text-secondary) !important; --platforma-gray-800: var(--pf-color-text-primary) !important; --platforma-gray-900: var(--pf-color-text-primary) !important; /* Ink text hierarchy (CRITICAL for theme-switching) */ --platforma-ink: var(--pf-color-text-primary) !important; --platforma-ink-900: var(--pf-color-text-primary) !important; --platforma-ink-strong: var(--pf-color-text-primary) !important; --platforma-ink-primary: var(--pf-color-text-primary) !important; --platforma-ink-muted: var(--pf-color-text-secondary) !important; --platforma-ink-subtle: var(--pf-color-text-tertiary) !important; /* Line/border family (CRITICAL for theme-switching) */ --platforma-line-50: var(--pf-color-border-subtle) !important; --platforma-line-100: var(--pf-color-border-subtle) !important; --platforma-line-200: var(--pf-color-border-strong) !important; --platforma-border: var(--pf-color-border-strong) !important; } /* ═════════════════════════════════════════════════════════════════════ HF 2026-05-11 — Re-declare *-soft aliases at theme-switch scopes ───────────────────────────────────────────────────────────────────── CSS Custom Properties resolve var() lookups at DEFINITION SCOPE, not USAGE SCOPE. The :root block above declares e.g. --platforma-accent-soft: var(--pf-color-action-primary-soft); which gets baked in at :root (light-mode value of indigo-50). When themes.dark.css later overrides --pf-color-action-primary-soft on [data-pf-theme="dark"], [data-cms-editor-theme="dark"] (body/html), the :root-scope alias DOES NOT re-compute — it stays indigo-50. Bug it caused: .se-field-fit-toggle-option.is-active in editor dark mode rendered indigo-50 (light) background with inherited slate-50 (light) text = invisible "Fyld rammen" label. Fix: re-declare every accent/status/soft alias on the same theme- switch selectors that themes.dark.css uses. Now each alias resolves AT the theme scope, capturing the dark-mode value of the underlying --pf-color-* token. Surfaces that previously broke under this bug: - se-field-fit-toggle-option (focal-point picker) - platforma-base.css active-tab tint - platforma-buttons.css ghost-button hover - platforma-domain-cockpit.css status-pill backgrounds - login.css focus-glow + status callouts ───────────────────────────────────────────────────────────────────── */ [data-pf-theme="dark"], [data-cms-editor-theme="dark"] { --platforma-brand-soft: var(--pf-color-action-primary-soft) !important; --platforma-accent-soft: var(--pf-color-action-primary-soft) !important; --platforma-accent-border: var(--pf-color-action-primary-soft-hover) !important; --platforma-success-soft: var(--pf-color-status-success-soft) !important; --platforma-warning-soft: var(--pf-color-status-warning-soft) !important; --platforma-danger-soft: var(--pf-color-status-danger-soft) !important; --platforma-info-soft: var(--pf-color-status-info-soft) !important; --se-accent-soft: var(--pf-color-action-primary-soft) !important; } /* Also fire under auto-dark mode (prefers-color-scheme: dark) unless the user has explicitly opted into light via attribute — mirrors the same exclusion pattern themes.dark.css uses for its @media block. */ @media (prefers-color-scheme: dark) { :root:not([data-pf-theme="light"]):not([data-cms-editor-theme="light"]) { --platforma-brand-soft: var(--pf-color-action-primary-soft) !important; --platforma-accent-soft: var(--pf-color-action-primary-soft) !important; --platforma-accent-border: var(--pf-color-action-primary-soft-hover) !important; --platforma-success-soft: var(--pf-color-status-success-soft) !important; --platforma-warning-soft: var(--pf-color-status-warning-soft) !important; --platforma-danger-soft: var(--pf-color-status-danger-soft) !important; --platforma-info-soft: var(--pf-color-status-info-soft) !important; --se-accent-soft: var(--pf-color-action-primary-soft) !important; } }