@charset "utf-8"; /* ==== css/pf/compat.legacy.css ==== */ /* ════════════════════════════════════════════════════════════════════ 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); /* DL-12 — phantom surface tokens: authored against a vocabulary that never existed, so `var(--platforma-surface, #fff)` degraded to the light literal in every theme (white-on-white card regression, DL-02). Aliased here so their consumers (tenant-issued, tables, cms-editor, tenant-admin-settings, tenant-control-center) follow theme unedited. */ --platforma-surface: var(--pf-color-surface-raised); --platforma-surface-elevated: var(--pf-color-surface-warm-deep); --platforma-card-bg: var(--pf-color-surface-raised); --platforma-bg-subtle: var(--pf-color-surface-sunken); /* PHANTOM-TEXT-1 (SA-14a, 2026-09-27) — the same defect class as DL-12, for a text and a line token. MEASURED in the browser: --platforma-muted and --platforma-hair resolve to the empty string on every admin page, yet var(--platforma-muted) is written 246 times (56 files) WITHOUT a fallback. An unresolvable var() in `color` is invalid-at-computed-value-time, so every "muted" caption, meta line and unit silently INHERITED its parent's colour — the Plans "DKK/mo" unit inherited the red figure beside it (2.85:1 in dark). --platforma-hair did worse: `border-bottom: 1px solid var(--platforma-hair-2, var(--platforma-hair))` drops the whole declaration, so the operator dashboard's row dividers and bar/meter tracks were never drawn. muted → the text-secondary role, the one --platforma-ink-muted already uses: AA on every surface in both themes (9.39:1 even on the help panel's pale tint, where tertiary measures 4.32:1), and the smallest visual step from the inherited colour these 246 sites render today. The ~20 call sites that carried an explicit gray-600 / #6b7280 fallback move from tertiary to secondary — one step darker, never lighter. --platforma-hair-2 stays undeclared on purpose: every use falls back to -hair, and inventing a second hairline would be a design decision. */ --platforma-muted: var(--pf-color-text-secondary); --platforma-hair: var(--pf-color-border-subtle); --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 — deep scandinavian NAVY (#2E5C8A): the Parchment/Ink accent for CTAs and chrome actions. CONSIST-3b (2026-09-09) BUGFIX: this family was wrongly bound to var(--pf-color-action-primary) — the RED brand primary — a copy-paste from the brand block above. Because compat.legacy loads AFTER platforma-tokens.css (which correctly sets --platforma-accent: #2E5C8A), the red clobbered the navy at :root, and since --platforma-chrome-action is var(--platforma-accent) the ENTIRE navy chrome-action system (LP-11) resolved RED app-wide (links, chips, tabs, accent surfaces, non-themed primary buttons, the CMS editor). Grounded to the navy hex directly, matching tokens.css; dark mode is handled by platforma-theme.css. Brand stays red (the block above, correctly bound to action-primary). */ --platforma-accent: #2E5C8A; --platforma-accent-soft: #E8EEF5; --platforma-accent-border: #C7D6E5; --platforma-accent-ink: #1B3D5E; /* 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); /* AUDIT-ALERT-1 (2026-09-16) — these two pointed at red-400 / sky-400, MID-TONE fills, while every consumer treats them as pale surfaces and pairs them with a dark --pf-color-status-*-fg. MEASURED in light theme, where nothing else has ever remapped them: .platforma-alert--danger red-800 on red-400 3.00:1 FAILS AA .platforma-alert--info sky-800 on sky-400 3.53:1 FAILS AA On the error messages themselves, in the theme most operators use. The call sites are unanimous about what they expected: every author who wrote a fallback wrote a PALE one — #FEE2E2 (platforma-buttons.css:315), #FFF5F8 / #F8F5FF (platforma-status.css:21,23), #EEE7FF (platforma-tenant-issued.css:101,299). Not one site wants a mid-tone. The alias was simply wrong, and the -light/-soft split it implied never existed in practice. Aliased to the -soft tokens rather than back to the old pastels, because those pastels were light-only literals: this makes the pair theme-aware in BOTH directions and restores the ~7:1 the -fg foregrounds were designed against. --platforma-warning-light is deliberately absent from this family and keeps its own pale value, which is why warnings never broke. */ --platforma-danger-light: var(--pf-color-status-danger-soft); --platforma-danger-soft: var(--pf-color-status-danger-soft); --platforma-info: var(--pf-color-status-info); --platforma-info-light: var(--pf-color-status-info-soft); --platforma-info-soft: var(--pf-color-status-info-soft); /* ── THEME-FALLBACK-1 (2026-09-17) — tokens the app REFERENCES and nothing DECLARED ── Found by closing an evasion path in ThemeReachableSurfacesAreTokenisedThemeSweep1Tests: the pin used to skip any value containing var(), on the reasoning that a token follows the theme. But `background: var(--platforma-success-50, #ecfdf5)` where the token is declared NOWHERE falls through to its literal on every single render — a light-only value that never flips, wearing the appearance of a token. 23 such declarations across 11 files were rendering their fallback. The repair is to declare the names rather than rewrite the call sites: every one now points at a pf semantic role that already flips, so the fallback stops being reachable and the call sites need no edit at all. No !important and no dark block here, both on purpose. These names are declared nowhere else, so there is nothing to out-specify, and they inherit their theme behaviour through the pf token they alias. AUDIT-THEME-1's lesson was that an !important in this file beat platforma-theme.css's un-important dark declaration and silently flipped 38 backgrounds; nothing here can repeat that. */ --platforma-amber-50: var(--pf-color-status-warning-soft); --platforma-amber-200: var(--pf-color-status-warning-border); --platforma-amber-700: var(--pf-color-status-warning-fg); --platforma-warning-bg: var(--pf-color-status-warning-soft); --platforma-warning-border: var(--pf-color-status-warning-border); --platforma-warning-text: var(--pf-color-status-warning-fg); --platforma-blue-50: var(--pf-color-status-info-soft); --platforma-blue-200: var(--pf-color-status-info-border); --platforma-blue-700: var(--pf-color-status-info-fg); --platforma-danger-50: var(--pf-color-status-danger-soft); --platforma-danger-200: var(--pf-color-status-danger-border); --platforma-danger-700: var(--pf-color-status-danger-fg); --platforma-success-50: var(--pf-color-status-success-soft); --platforma-success-200: var(--pf-color-status-success-border); --platforma-success-700: var(--pf-color-status-success-fg); --platforma-surface-hover: var(--pf-color-surface-hover); --platforma-surface-subtle: var(--pf-color-surface-sunken); --platforma-bg-muted: var(--pf-color-surface-sunken); --platforma-text: var(--pf-color-text-primary); --platforma-text-muted: var(--pf-color-text-secondary); --platforma-border-strong: var(--pf-color-border-strong); --platforma-parchment-400: var(--pf-color-border-strong); /* Brand, NOT themed — the block header above is explicit that brand colours are runtime tenant-themed via TenantBranding and must not be folded into the surface/text set. */ --platforma-brand-primary: var(--platforma-primary); --platforma-primary-tint: color-mix(in srgb, var(--platforma-primary) 12%, var(--pf-color-surface-raised)); /* 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-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; /* AUDIT-THEME-1 (2026-09-16) — the -soft family above was aliased and the -light family was not, and neither was any of the --tenant-* surface layer. MEASURED in the browser: 17 tokens whose NAME promises a surface resolve to the same pale value in both themes, and 150 declarations paint a background with one of them. That is what made a hovered lead row unreadable at 1.05:1 — pale pink under text that had flipped to near-white. Fixed HERE rather than at the 150 call sites. One line per token corrects every existing use, every inline style this sweep could not see, and every future one. It is also bounded: this block only applies in dark theme, so light theme is byte-identical. WITHDRAWN AFTER REVIEW: this block originally also re-aliased --platforma-primary-light, -success-light and -warning-light. platforma-theme.css:112-116 and its system mirror at :132-136 ALREADY own all five -light tokens in dark, at html[data-pf-theme="dark"] = (0,1,1) and WITHOUT !important. Importance is compared before specificity, so the version here won and theirs became dead code — silently flipping 38 backgrounds from a brand-red tint to navy, including Views/Shared/_HelpPanel.cshtml on every admin page, and invalidating the 13.85:1 help-panel figure REL-17 published. One owner per token, and that owner is platforma-theme.css, whose own comment says so. --tenant-* is the operator brand and must NOT be inverted — a brand colour stays itself. So the tint is mixed INTO the dark surface instead: still recognisably the tenant, still dark enough to carry light text. */ --tenant-surface: var(--pf-color-surface-raised) !important; --tenant-bg: var(--pf-color-surface-base) !important; --tenant-success-soft: var(--pf-color-status-success-soft) !important; --tenant-warning-soft: var(--pf-color-status-warning-soft) !important; --tenant-danger-soft: var(--pf-color-status-danger-soft) !important; --tenant-primary-soft: color-mix(in srgb, var(--tenant-primary, var(--pf-color-action-primary)) 12%, var(--pf-color-surface-raised)) !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; /* AUDIT-THEME-1 (2026-09-16) — the -soft family above was aliased and the -light family was not, and neither was any of the --tenant-* surface layer. MEASURED in the browser: 17 tokens whose NAME promises a surface resolve to the same pale value in both themes, and 150 declarations paint a background with one of them. That is what made a hovered lead row unreadable at 1.05:1 — pale pink under text that had flipped to near-white. Fixed HERE rather than at the 150 call sites. One line per token corrects every existing use, every inline style this sweep could not see, and every future one. It is also bounded: this block only applies in dark theme, so light theme is byte-identical. WITHDRAWN AFTER REVIEW: this block originally also re-aliased --platforma-primary-light, -success-light and -warning-light. platforma-theme.css:112-116 and its system mirror at :132-136 ALREADY own all five -light tokens in dark, at html[data-pf-theme="dark"] = (0,1,1) and WITHOUT !important. Importance is compared before specificity, so the version here won and theirs became dead code — silently flipping 38 backgrounds from a brand-red tint to navy, including Views/Shared/_HelpPanel.cshtml on every admin page, and invalidating the 13.85:1 help-panel figure REL-17 published. One owner per token, and that owner is platforma-theme.css, whose own comment says so. --tenant-* is the operator brand and must NOT be inverted — a brand colour stays itself. So the tint is mixed INTO the dark surface instead: still recognisably the tenant, still dark enough to carry light text. */ --tenant-surface: var(--pf-color-surface-raised) !important; --tenant-bg: var(--pf-color-surface-base) !important; --tenant-success-soft: var(--pf-color-status-success-soft) !important; --tenant-warning-soft: var(--pf-color-status-warning-soft) !important; --tenant-danger-soft: var(--pf-color-status-danger-soft) !important; --tenant-primary-soft: color-mix(in srgb, var(--tenant-primary, var(--pf-color-action-primary)) 12%, var(--pf-color-surface-raised)) !important; } } /* ==== css/pf/tokens.components.css ==== */ /* ════════════════════════════════════════════════════════════════════ PF DESIGN SYSTEM — Component Tokens (Tier 3) ──────────────────────────────────────────────────────────────────── Component-specific aliases on top of semantic tokens. Each component in Phase B (.pf-button, .pf-input, .pf-card, etc.) uses its own namespaced tokens that REFERENCE the semantic tier — providing a stable component API even as semantic tokens evolve. ARCHITECTURAL ROLE Tier 1 — Primitive (raw values: --pf-color-slate-100) Tier 2 — Semantic (intent: --pf-color-surface-base) Tier 3 — Component (this file: --pf-button-bg-primary) WHY A SEPARATE TIER? • Components can vary independently of base palette refinements (e.g. button radius can change without touching --pf-radius-md) • Themes can override component tokens for component-level skinning without affecting other components (--pf-button-bg in dark mode can differ from --pf-input-bg) • External design tools (Figma, Style Dictionary) export this tier as the public component API • Distribution (Phase C) — third-party consumers customize via component tokens, never primitive NAMING --pf-{component}-{property}-{variant}-{state} SCOPE — Phase B core components: • button — primary actions, secondary, danger, ghost, link • input — text/number/select/textarea • card — content containers, raised surfaces • drawer — slide-in panels (a11y, health, seo, etc.) • modal — centered overlays (add-section, templates picker) • popover — anchored floating panels (schedule, share) • toast — transient notifications Version: 1.0.0 Last revised: 2026-05-09 ──────────────────────────────────────────────────────────────────── */ html[lang], html:root, :root { /* ═════════════════════════════════════════════════════════════ BUTTON — primary, secondary, ghost, danger, link variants ═════════════════════════════════════════════════════════════ */ /* Primary */ --pf-button-bg-primary: var(--pf-color-action-primary); --pf-button-bg-primary-hover: var(--pf-color-action-primary-hover); --pf-button-bg-primary-pressed: var(--pf-color-action-primary-pressed); --pf-button-bg-primary-disabled: var(--pf-color-surface-disabled); --pf-button-fg-primary: var(--pf-color-text-on-action); --pf-button-border-primary: var(--pf-color-action-primary); /* Secondary (emphasis: medium) */ --pf-button-bg-secondary: var(--pf-color-surface-raised); --pf-button-bg-secondary-hover: var(--pf-color-surface-hover); --pf-button-bg-secondary-pressed: var(--pf-color-surface-sunken); --pf-button-fg-secondary: var(--pf-color-text-primary); --pf-button-border-secondary: var(--pf-color-border-strong); /* Ghost (emphasis: low — text-only with hover bg) */ --pf-button-bg-ghost: transparent; --pf-button-bg-ghost-hover: var(--pf-color-surface-hover); --pf-button-fg-ghost: var(--pf-color-text-secondary); --pf-button-fg-ghost-hover: var(--pf-color-text-primary); /* Danger (destructive — escape hatch from branded mode) */ --pf-button-bg-danger: var(--pf-color-action-danger); --pf-button-bg-danger-hover: var(--pf-color-action-danger-hover); --pf-button-fg-danger: var(--pf-color-text-on-action); --pf-button-bg-danger-soft: var(--pf-color-action-danger-soft); /* Link (anchor styled as button) */ --pf-button-fg-link: var(--pf-color-action-primary); --pf-button-fg-link-hover: var(--pf-color-action-primary-hover); /* Common */ --pf-button-radius: var(--pf-radius-md); --pf-button-padding-y: var(--pf-space-2); --pf-button-padding-x: var(--pf-space-4); --pf-button-font-size: var(--pf-text-size-sm); --pf-button-font-weight: var(--pf-text-weight-semibold); --pf-button-shadow-focus: var(--pf-focus-ring); /* Sizes */ --pf-button-padding-y-sm: var(--pf-space-1); --pf-button-padding-x-sm: var(--pf-space-3); --pf-button-font-size-sm: var(--pf-text-size-xs); --pf-button-padding-y-lg: var(--pf-space-3); --pf-button-padding-x-lg: var(--pf-space-5); --pf-button-font-size-lg: var(--pf-text-size-base); /* ═════════════════════════════════════════════════════════════ INPUT — text, number, email, search, select, textarea ═════════════════════════════════════════════════════════════ */ --pf-input-bg: var(--pf-color-surface-sunken); --pf-input-bg-disabled: var(--pf-color-surface-disabled); --pf-input-fg: var(--pf-color-text-primary); --pf-input-fg-placeholder: var(--pf-color-text-tertiary); --pf-input-fg-disabled: var(--pf-color-text-disabled); /* PL-3 (2026-09-08): the DS-1 control-border role — border-strong in light (unchanged), one step lighter in dark so the boundary meets WCAG 1.4.11 on the sunken fill. */ --pf-input-border: var(--pf-color-border-control, var(--pf-color-border-strong)); --pf-input-border-hover: var(--pf-color-border-focus); --pf-input-border-focus: var(--pf-color-border-focus); --pf-input-border-error: var(--pf-color-status-danger); --pf-input-radius: var(--pf-radius-sm); --pf-input-padding-y: var(--pf-space-2); --pf-input-padding-x: var(--pf-space-3); --pf-input-font-size: var(--pf-text-size-base); --pf-input-shadow-focus: var(--pf-focus-ring); /* ═════════════════════════════════════════════════════════════ CARD — content containers, panels, raised surfaces ═════════════════════════════════════════════════════════════ */ --pf-card-bg: var(--pf-color-surface-raised); --pf-card-bg-hover: var(--pf-color-surface-hover); --pf-card-fg: var(--pf-color-text-primary); --pf-card-border: var(--pf-color-border-subtle); --pf-card-radius: var(--pf-radius-lg); --pf-card-padding: var(--pf-space-5); --pf-card-gap: var(--pf-space-3); --pf-card-shadow: var(--pf-color-shadow-sm); --pf-card-shadow-hover: var(--pf-color-shadow-md); /* Card sub-elements */ --pf-card-title-color: var(--pf-color-text-primary); --pf-card-title-size: var(--pf-text-size-lg); --pf-card-title-weight: var(--pf-text-weight-semibold); --pf-card-body-color: var(--pf-color-text-secondary); --pf-card-body-size: var(--pf-text-size-sm); --pf-card-meta-color: var(--pf-color-text-tertiary); --pf-card-meta-size: var(--pf-text-size-xs); /* ═════════════════════════════════════════════════════════════ DRAWER — slide-in panels (right-edge typically) ═════════════════════════════════════════════════════════════ */ --pf-drawer-bg: var(--pf-color-surface-overlay); --pf-drawer-fg: var(--pf-color-text-primary); --pf-drawer-border: var(--pf-color-border-subtle); --pf-drawer-shadow: var(--pf-color-shadow-xl); --pf-drawer-backdrop: rgb(0 0 0 / 0.50); --pf-drawer-padding: var(--pf-space-6); /* A drawer is role="dialog" aria-modal="true" — a modal by ARIA semantics — so its overlay must sit at the MODAL layer, above all sticky page chrome. The legacy app chrome (.platforma-header) hardcodes z-index:900, which is ABOVE the --pf-z-overlay (500) drawer-backdrop layer; at 500 the header painted over the drawer header and intercepted clicks on the drawer close button. Mapping to --pf-z-modal (1000) fixes every drawer app-wide (admin, portal, CMS editor) in one place. */ --pf-drawer-z-index: var(--pf-z-modal); /* ═════════════════════════════════════════════════════════════ MODAL — centered floating dialog ═════════════════════════════════════════════════════════════ */ --pf-modal-bg: var(--pf-color-surface-overlay); --pf-modal-fg: var(--pf-color-text-primary); --pf-modal-border: var(--pf-color-border-subtle); --pf-modal-radius: var(--pf-radius-xl); --pf-modal-shadow: var(--pf-color-shadow-2xl); --pf-modal-backdrop: rgb(0 0 0 / 0.60); --pf-modal-padding: var(--pf-space-6); --pf-modal-z-index: var(--pf-z-modal); --pf-modal-max-width: 640px; /* ═════════════════════════════════════════════════════════════ POPOVER — anchored floating panel (smaller than modal) ═════════════════════════════════════════════════════════════ */ --pf-popover-bg: var(--pf-color-surface-overlay); --pf-popover-fg: var(--pf-color-text-primary); --pf-popover-border: var(--pf-color-border-strong); --pf-popover-radius: var(--pf-radius-md); --pf-popover-shadow: var(--pf-color-shadow-lg); --pf-popover-padding: var(--pf-space-4); --pf-popover-z-index: var(--pf-z-popover); --pf-popover-arrow-size: 8px; /* ═════════════════════════════════════════════════════════════ TOAST — transient notification ═════════════════════════════════════════════════════════════ */ --pf-toast-bg: var(--pf-color-surface-overlay); --pf-toast-fg: var(--pf-color-text-primary); --pf-toast-border: var(--pf-color-border-strong); --pf-toast-radius: var(--pf-radius-md); --pf-toast-shadow: var(--pf-color-shadow-lg); --pf-toast-padding-y: var(--pf-space-3); --pf-toast-padding-x: var(--pf-space-4); --pf-toast-z-index: var(--pf-z-toast); --pf-toast-max-width: 420px; --pf-toast-min-height: 56px; /* Toast variants — share semantic status colors */ --pf-toast-bg-success: var(--pf-color-status-success-soft); --pf-toast-fg-success: var(--pf-color-status-success-fg); --pf-toast-border-success: var(--pf-color-status-success-border); --pf-toast-bg-warning: var(--pf-color-status-warning-soft); --pf-toast-fg-warning: var(--pf-color-status-warning-fg); --pf-toast-border-warning: var(--pf-color-status-warning-border); --pf-toast-bg-danger: var(--pf-color-status-danger-soft); --pf-toast-fg-danger: var(--pf-color-status-danger-fg); --pf-toast-border-danger: var(--pf-color-status-danger-border); --pf-toast-bg-info: var(--pf-color-status-info-soft); --pf-toast-fg-info: var(--pf-color-status-info-fg); --pf-toast-border-info: var(--pf-color-status-info-border); /* ═════════════════════════════════════════════════════════════ CP-1 (2026-09-08, admin design system Phase 3) — the canonical .pf-btn family. ADDITIVE: every Phase B --pf-button-* token above keeps its value; .pf-btn shares them and adds the mono / outline roles, density-aware heights (DS-1 --pf-control-height), the ≥44px pointer target for icon-only buttons and the single hairline shadow (demo1's "one shadow" discipline). ═════════════════════════════════════════════════════════════ */ --pf-button-bg-mono: var(--pf-color-mono); --pf-button-bg-mono-hover: var(--pf-color-mono-hover); --pf-button-fg-mono: var(--pf-color-mono-foreground); --pf-button-fg-outline: var(--pf-color-text-primary); --pf-button-border-outline: var(--pf-color-border-strong); --pf-button-bg-outline-hover: var(--pf-color-surface-hover); --pf-button-height: var(--pf-control-height); --pf-button-height-sm: calc(var(--pf-control-height) - var(--pf-space-2)); --pf-button-height-lg: calc(var(--pf-control-height) + var(--pf-space-2)); --pf-button-hit-target: 2.75rem; /* 44px — WCAG 2.5.5 target size */ --pf-button-glyph-size: 1.125rem; /* 18px */ --pf-button-glyph-size-sm: 1rem; /* 16px */ --pf-button-glyph-size-lg: 1.25rem; /* 20px */ --pf-button-shadow: var(--pf-shadow-xs); /* ═════════════════════════════════════════════════════════════ CP-2 — sectioned card rhythm (header / content / footer / table). Section padding rides the DS-1 density band (--pf-card-pad). ═════════════════════════════════════════════════════════════ */ --pf-card-header-min-height: var(--pf-space-14); /* 56px — demo1's 3.5rem header rhythm */ --pf-card-section-pad: var(--pf-card-pad); /* ═════════════════════════════════════════════════════════════ CP-4 — BADGE (status chip). Soft fill + status foreground by default (measured AA/AAA in components/badge.css); the solid status fills are deliberately NOT used for text (white on emerald-600 is 3.77:1 — fails AA). ═════════════════════════════════════════════════════════════ */ --pf-badge-radius: var(--pf-radius-full); --pf-badge-font-size: var(--pf-text-size-xs); --pf-badge-font-size-sm: var(--pf-text-2xs); --pf-badge-font-size-lg: var(--pf-text-2sm); --pf-badge-font-weight: var(--pf-text-weight-semibold); --pf-badge-height: 1.375rem; /* 22px */ --pf-badge-height-sm: 1.125rem; /* 18px */ --pf-badge-height-lg: 1.625rem; /* 26px */ --pf-badge-padding-x: var(--pf-space-2); --pf-badge-padding-x-sm: var(--pf-space-1-5); --pf-badge-padding-x-lg: var(--pf-space-2-5); --pf-badge-bg-neutral: var(--pf-color-surface-sunken); --pf-badge-fg-neutral: var(--pf-color-text-secondary); --pf-badge-border-neutral: var(--pf-color-border-strong); --pf-badge-accent-neutral: var(--pf-color-text-tertiary); /* ═════════════════════════════════════════════════════════════ CP-4 — AVATAR (initials fallback, sizes, status dot, stack) ═════════════════════════════════════════════════════════════ */ --pf-avatar-size-xs: 1.5rem; /* 24px */ --pf-avatar-size-sm: 2rem; /* 32px */ --pf-avatar-size-md: 2.5rem; /* 40px */ --pf-avatar-size-lg: 3rem; /* 48px */ --pf-avatar-size-xl: 4rem; /* 64px */ --pf-avatar-bg: var(--pf-color-surface-sunken); --pf-avatar-fg: var(--pf-color-text-secondary); --pf-avatar-ring: var(--pf-color-surface-raised); --pf-avatar-radius: var(--pf-radius-full); --pf-avatar-font-weight: var(--pf-text-weight-semibold); /* ═════════════════════════════════════════════════════════════ CP-3 — STAT TILE (label + mono number + delta chip + sparkline) ═════════════════════════════════════════════════════════════ */ --pf-stat-bg: var(--pf-card-bg); --pf-stat-border: var(--pf-card-border); --pf-stat-radius: var(--pf-card-radius); --pf-stat-shadow: var(--pf-card-shadow); --pf-stat-padding: var(--pf-card-pad); --pf-stat-label-color: var(--pf-color-text-secondary); --pf-stat-value-color: var(--pf-color-mono); --pf-stat-value-size: var(--pf-text-size-3xl); --pf-stat-meta-color: var(--pf-color-text-tertiary); --pf-stat-spark-height: 2.5rem; /* 40px — DV-1 draws into this box */ --pf-stat-spark-color: var(--pf-color-action-primary); /* ═════════════════════════════════════════════════════════════ CP-5 — EMPTY STATE ═════════════════════════════════════════════════════════════ */ --pf-empty-border: var(--pf-color-border-strong); --pf-empty-radius: var(--pf-card-radius); --pf-empty-padding-y: var(--pf-space-10); --pf-empty-padding-x: var(--pf-space-6); --pf-empty-icon-size: 3.5rem; /* 56px tile */ --pf-empty-icon-bg: var(--pf-color-surface-sunken); --pf-empty-icon-fg: var(--pf-color-text-tertiary); --pf-empty-icon-radius: var(--pf-radius-xl); --pf-empty-title-color: var(--pf-color-text-primary); --pf-empty-hint-color: var(--pf-color-text-secondary); /* ═════════════════════════════════════════════════════════════ PL-2 — ICON (pf/components/icon.css; the Icon ViewComponent) Sizes match the width/height attributes the component emits. ═════════════════════════════════════════════════════════════ */ --pf-icon-size-xs: 0.875rem; /* 14px */ --pf-icon-size-sm: 1rem; /* 16px */ --pf-icon-size-md: 1.25rem; /* 20px — nav rhythm (default) */ --pf-icon-size-lg: 1.5rem; /* 24px */ --pf-icon-size-xl: 2rem; /* 32px */ --pf-icon-stroke-width: 1.75; /* the house stroke — Lucide ships 2 */ /* ═════════════════════════════════════════════════════════════ CP-5 — SKELETON (loading placeholders; shimmer is motion-gated) ═════════════════════════════════════════════════════════════ */ --pf-skeleton-bg: var(--pf-color-surface-sunken); --pf-skeleton-shine: var(--pf-color-border-subtle); --pf-skeleton-radius: var(--pf-radius-sm); --pf-skeleton-line-height: 0.75rem; /* 12px */ --pf-skeleton-duration: 1400ms; /* ═════════════════════════════════════════════════════════════ JS-2 — TOOLTIP (the shared bubble platforma-ui.js positions) ═════════════════════════════════════════════════════════════ */ --pf-tooltip-bg: var(--pf-color-text-primary); --pf-tooltip-fg: var(--pf-color-text-inverse); --pf-tooltip-radius: var(--pf-radius-md); --pf-tooltip-shadow: var(--pf-shadow-md); --pf-tooltip-padding-y: var(--pf-space-1); --pf-tooltip-padding-x: var(--pf-space-2); --pf-tooltip-max-width: 16rem; --pf-tooltip-z-index: var(--pf-z-popover); /* ═════════════════════════════════════════════════════════════ JS-3 — TABLE FINISH (toolbar · footer · sort · sticky · select) ═════════════════════════════════════════════════════════════ */ --pf-table-border: var(--pf-color-border-subtle); --pf-table-head-bg: var(--pf-color-surface-sunken); --pf-table-head-shadow: var(--pf-shadow-none); --pf-table-footer-fg: var(--pf-color-text-secondary); --pf-table-pad-x: var(--pf-space-4); --pf-table-search-width: 20rem; --pf-table-select-width: 2.5rem; /* 40px */ --pf-table-sticky-top: 0px; /* the behaviour sets the chrome offset */ --pf-table-sort-idle: var(--pf-color-border-strong); --pf-table-sort-active: var(--pf-color-action-primary); /* ═════════════════════════════════════════════════════════════ DV-1 / DV-2 — CHARTS (inline-SVG micro-charts read these through chart.css; the lazy rich wrapper resolves them via getComputedStyle) ═════════════════════════════════════════════════════════════ */ --pf-chart-color: var(--pf-color-action-primary); --pf-chart-track: var(--pf-color-border-subtle); --pf-chart-grid: var(--pf-color-border-subtle); --pf-chart-axis-fg: var(--pf-color-text-tertiary); --pf-chart-legend-fg: var(--pf-color-text-secondary); --pf-chart-cursor: var(--pf-color-text-tertiary); --pf-chart-select: color-mix(in oklab, var(--pf-color-action-primary) 12%, transparent); --pf-chart-center-fg: var(--pf-color-mono); --pf-chart-center-size: 9px; /* SVG user units of the 40-unit ring */ --pf-chart-stroke: 2; /* screen px — strokes are non-scaling */ --pf-chart-marker-size: 6; /* screen px — the last-point dot */ --pf-chart-area-opacity: 0.14; --pf-chart-bar-opacity: 0.55; /* non-accent bars; the last bar is 1 */ --pf-chart-min-height: 2.5rem; /* 40px — same box as the stat sparkline */ --pf-chart-donut-max: 8rem; /* 128px */ --pf-chart-rich-min-height: 12rem; /* 192px — reserved while uPlot loads */ --pf-chart-duration: var(--pf-motion-duration-slower); --pf-chart-series-1: var(--pf-color-action-primary); --pf-chart-series-2: var(--pf-color-status-info); --pf-chart-series-3: var(--pf-color-status-success); --pf-chart-series-4: var(--pf-color-status-warning); --pf-chart-series-5: var(--pf-color-status-danger); --pf-chart-series-6: var(--pf-color-mono); } /* CP-1 — compact density: the icon-button pointer target collapses to the control height (32px) so neighbouring icon buttons in a dense toolbar never overlap. html[...] keeps the specificity of the html[lang] block above (0,1,1) and wins by source order. Comfortable/spacious keep 44px. */ html[data-pf-density="compact"] { --pf-button-hit-target: var(--pf-control-height); } /* ==== css/pf/components/a11y.css ==== */ /* ════════════════════════════════════════════════════════════════════ PF DESIGN SYSTEM — Accessibility utilities ──────────────────────────────────────────────────────────────────── CP-1..CP-5 (2026-09-08, admin design system Phase 3). Loaded FIRST in the component layer (see _PfDesignSystemCompat.cshtml) because every core component leans on .pf-sr-only for its accessible text: • .pf-btn — the "Loading…" label while aria-busy • .pf-stat — the ▲/▼ delta direction ("Up" / "Down" / "No change") • .pf-avatar — the full name behind the initials, the "+N more" • .pf-skeleton — the "Loading…" status text .pf-sr-only — visually hidden, still exposed to assistive technology (the WebAIM pattern: 1px box, clipped, off-flow). Never use `display: none` or `visibility: hidden` for this — both remove the node from the accessibility tree. Version: 1.0.0 Created: 2026-09-08 ──────────────────────────────────────────────────────────────────── */ .pf-sr-only { position: absolute !important; inline-size: 1px; block-size: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0, 0, 0, 0); clip-path: inset(50%); white-space: nowrap; border: 0; } /* ==== css/pf/components/button.css ==== */ /* ════════════════════════════════════════════════════════════════════ PF DESIGN SYSTEM — Button Component ──────────────────────────────────────────────────────────────────── BEM-named, fully token-driven, theme-agnostic, WCAG AA compliant. USAGE ACCESSIBILITY • Focus-visible only (no focus on mouse-click) per WCAG 2.4.7 • Focus ring: --pf-focus-ring (high-contrast indigo on surface) • Disabled state: opacity 0.5 + cursor not-allowed + aria-disabled • Min touch target: 44px height (WCAG 2.5.5 — auto via padding + line-height) • Color contrast: Phase B arch-test pins ≥ 4.5:1 for text-on-bg THEMING All visual properties consume --pf-button-* component tokens which in turn reference --pf-color-* semantic tokens. Override per theme by re-declaring component tokens in themes.dark.css (NOT here). Version: 1.0.0 Last revised: 2026-05-09 ──────────────────────────────────────────────────────────────────── */ /* ─── Block: .pf-button (default = primary variant) ───────────── */ .pf-button { /* Layout — flex container so icon + label align cleanly */ display: inline-flex; align-items: center; justify-content: center; gap: var(--pf-space-2); /* Typography */ font-family: inherit; font-size: var(--pf-button-font-size); font-weight: var(--pf-button-font-weight); line-height: 1.25; text-decoration: none; white-space: nowrap; /* Box */ padding: var(--pf-button-padding-y) var(--pf-button-padding-x); border-radius: var(--pf-button-radius); border: 1px solid var(--pf-button-border-primary); cursor: pointer; user-select: none; /* Default = primary variant */ background: var(--pf-button-bg-primary); color: var(--pf-button-fg-primary); /* Smooth interactive transitions */ transition: background var(--pf-motion-duration-fast) var(--pf-motion-ease-out), border-color var(--pf-motion-duration-fast) var(--pf-motion-ease-out), box-shadow var(--pf-motion-duration-fast) var(--pf-motion-ease-out), transform var(--pf-motion-duration-fast) var(--pf-motion-ease-out); } /* ─── States ──────────────────────────────────────────────────── */ .pf-button:hover:not(:disabled):not(.pf-button--disabled) { background: var(--pf-button-bg-primary-hover); border-color: var(--pf-button-bg-primary-hover); } .pf-button:active:not(:disabled):not(.pf-button--disabled) { background: var(--pf-button-bg-primary-pressed); border-color: var(--pf-button-bg-primary-pressed); transform: translateY(1px); } .pf-button:focus-visible { outline: none; box-shadow: var(--pf-button-shadow-focus); } .pf-button:disabled, .pf-button.pf-button--disabled, .pf-button[aria-disabled="true"] { background: var(--pf-button-bg-primary-disabled); border-color: var(--pf-button-bg-primary-disabled); color: var(--pf-color-text-disabled); cursor: not-allowed; opacity: 0.6; } /* ─── Modifier: --secondary (medium emphasis) ────────────────── */ .pf-button--secondary { background: var(--pf-button-bg-secondary); color: var(--pf-button-fg-secondary); border-color: var(--pf-button-border-secondary); } .pf-button--secondary:hover:not(:disabled):not(.pf-button--disabled) { background: var(--pf-button-bg-secondary-hover); border-color: var(--pf-button-border-secondary); } .pf-button--secondary:active:not(:disabled):not(.pf-button--disabled) { background: var(--pf-button-bg-secondary-pressed); } /* ─── Modifier: --ghost (low emphasis — text-only with hover bg) ─── */ .pf-button--ghost { background: var(--pf-button-bg-ghost); color: var(--pf-button-fg-ghost); border-color: transparent; } .pf-button--ghost:hover:not(:disabled):not(.pf-button--disabled) { background: var(--pf-button-bg-ghost-hover); color: var(--pf-button-fg-ghost-hover); border-color: transparent; } /* ─── Modifier: --danger (destructive action) ─────────────────── */ .pf-button--danger { background: var(--pf-button-bg-danger); color: var(--pf-button-fg-danger); border-color: var(--pf-button-bg-danger); } .pf-button--danger:hover:not(:disabled):not(.pf-button--disabled) { background: var(--pf-button-bg-danger-hover); border-color: var(--pf-button-bg-danger-hover); } /* Subtle danger — for "Delete with confirmation"-style micro-actions */ .pf-button--danger.pf-button--ghost { background: transparent; color: var(--pf-color-status-danger); border-color: transparent; } .pf-button--danger.pf-button--ghost:hover:not(:disabled) { background: var(--pf-button-bg-danger-soft); color: var(--pf-color-status-danger-fg); } /* ─── Modifier: --link (anchor styled minimally as text-link) ───── */ .pf-button--link { background: transparent; color: var(--pf-button-fg-link); border-color: transparent; padding: 0; text-decoration: underline; text-underline-offset: 2px; } .pf-button--link:hover:not(:disabled):not(.pf-button--disabled) { background: transparent; color: var(--pf-button-fg-link-hover); } /* ─── Sizes ──────────────────────────────────────────────────── */ .pf-button--sm { padding: var(--pf-button-padding-y-sm) var(--pf-button-padding-x-sm); font-size: var(--pf-button-font-size-sm); } .pf-button--lg { padding: var(--pf-button-padding-y-lg) var(--pf-button-padding-x-lg); font-size: var(--pf-button-font-size-lg); } /* ─── Width modifiers ────────────────────────────────────────── */ .pf-button--block { width: 100%; } /* ─── Element: __icon (SVG inside button) ────────────────────── */ .pf-button__icon { flex-shrink: 0; width: 1em; height: 1em; fill: currentColor; } /* ─── Element: __label (wraps text content for advanced layouts) ── */ .pf-button__label { /* No styling — exists for accessibility-friendly icon+label structures and to allow visually-hidden labels via .pf-visually-hidden helper. */ } /* ─── Loading state (shows spinner, disables interaction) ───── */ .pf-button--loading { color: transparent !important; pointer-events: none; position: relative; } .pf-button--loading::after { content: ""; position: absolute; width: 1em; height: 1em; border: 2px solid currentColor; border-top-color: transparent; border-radius: 50%; color: var(--pf-button-fg-primary); animation: pf-button-spin 0.6s linear infinite; } @keyframes pf-button-spin { to { transform: rotate(360deg); } } @media (prefers-reduced-motion: reduce) { .pf-button--loading::after { animation: none; border-style: dotted; } } /* ════════════════════════════════════════════════════════════════════ CP-1 (2026-09-08) — CANONICAL .pf-btn FAMILY (admin design system, Phase 3) ──────────────────────────────────────────────────────────────────── docs/design/ADMIN-DESIGN-SYSTEM-PLAN-2026-09-08.md §B3 / §B8 Phase 3. The Phase B `.pf-button` BEM block above is UNTOUCHED (pages consume it); `.pf-btn` is the canonical single-dash family the plan names. Both share the Tier-3 --pf-button-* tokens, so a theme or edition re-skins both at once. Clean-room: our own tokens and code only. USAGE Razor: Add DENSITY — the height rides --pf-control-height (DS-1 band): 40px comfortable, 32px compact, 44px spacious. Icon-only buttons extend their POINTER target to --pf-button-hit-target (44px) through a transparent ::before, so the visual box stays on the control grid while the touch target meets WCAG 2.5.5 (compact collapses it — tokens.components.css). STATES — hover/active derived with color-mix() where no hand-picked token exists (outline / ghost / mono / danger pressed); the navy chrome-action hovers of the primary stay hand-picked (tokens.semantic.css LP-12 remap). LOADING — aria-busy="true" (or .pf-btn-loading): label turns transparent but STAYS in the accessibility tree, pointer events off, a ring spinner is drawn by ::after. The button is never `disabled` while busy, so keyboard focus is not dropped mid-submit. Spin only under prefers-reduced-motion: no-preference — otherwise a static broken ring reads as "busy". A11Y — :focus-visible = --pf-focus-ring (box-shadow) PLUS a 2px transparent outline that Windows High Contrast renders in system colours; the forced-colors block below completes the fallback (borders, spinner, disabled). MEASURED WCAG CONTRAST (sRGB, 2026-09-08 — text on fill): • primary admin navy #2E5C8A ← white 6.97:1 (AA/AAA-large) unscoped brand red #d4213d ← white 5.14:1 (AA) • mono light: white on slate-900 #0f172a 17.9:1 (AAA) dark: slate-900 on slate-100 #f1f5f9 16.3:1 (AAA) • danger white on red-600 #dc2626 4.83:1 (AA) • outline slate-900 on white 17.9:1 (AAA) dark: slate-50 #f8fafc on slate-800 #1e293b 13.98:1 (AAA) • ghost slate-700 #334155 on white 10.36:1 (AAA); hover → slate-900 ──────────────────────────────────────────────────────────────────── */ .pf-btn { --pf-btn-fg: var(--pf-button-fg-primary); --pf-btn-bg: var(--pf-button-bg-primary); --pf-btn-bg-hover: var(--pf-button-bg-primary-hover); --pf-btn-bg-active: var(--pf-button-bg-primary-pressed); --pf-btn-border: var(--pf-button-border-primary); --pf-btn-border-hover: var(--pf-button-bg-primary-hover); --pf-btn-border-active: var(--pf-button-bg-primary-pressed); --pf-btn-shadow: var(--pf-button-shadow); --pf-btn-height: var(--pf-button-height); --pf-btn-px: var(--pf-button-padding-x); --pf-btn-font-size: var(--pf-button-font-size); --pf-btn-glyph: var(--pf-button-glyph-size); position: relative; display: inline-flex; align-items: center; justify-content: center; gap: var(--pf-space-2); box-sizing: border-box; min-block-size: var(--pf-btn-height); margin: 0; padding-block: 0; padding-inline: var(--pf-btn-px); font-family: inherit; font-size: var(--pf-btn-font-size); font-weight: var(--pf-button-font-weight); line-height: var(--pf-text-leading-tight); text-decoration: none; white-space: nowrap; vertical-align: middle; color: var(--pf-btn-fg); background: var(--pf-btn-bg); border: 1px solid var(--pf-btn-border); border-radius: var(--pf-button-radius); box-shadow: var(--pf-btn-shadow); cursor: pointer; user-select: none; -webkit-appearance: none; appearance: none; } /* ─── States ─────────────────────────────────────────────────── */ .pf-btn:hover:not(:disabled):not([aria-disabled="true"]) { color: var(--pf-btn-fg-hover, var(--pf-btn-fg)); background: var(--pf-btn-bg-hover); border-color: var(--pf-btn-border-hover); } .pf-btn:active:not(:disabled):not([aria-disabled="true"]) { background: var(--pf-btn-bg-active); border-color: var(--pf-btn-border-active); box-shadow: none; } .pf-btn:focus-visible { outline: 2px solid transparent; outline-offset: 2px; box-shadow: var(--pf-focus-ring); } .pf-btn:disabled, .pf-btn[aria-disabled="true"]:not([aria-busy="true"]) { opacity: 0.55; cursor: not-allowed; box-shadow: none; } /* ─── Variants ───────────────────────────────────────────────── */ /* Explicit alias of the default so markup can be self-describing. */ .pf-btn-primary { --pf-btn-bg: var(--pf-button-bg-primary); } .pf-btn-outline { --pf-btn-fg: var(--pf-button-fg-outline); --pf-btn-bg: transparent; --pf-btn-bg-hover: var(--pf-button-bg-outline-hover); --pf-btn-bg-active: color-mix(in oklab, var(--pf-button-bg-outline-hover) 88%, black); --pf-btn-border: var(--pf-button-border-outline); --pf-btn-border-hover: var(--pf-button-border-outline); --pf-btn-border-active: var(--pf-button-border-outline); --pf-btn-shadow: none; } .pf-btn-ghost { --pf-btn-fg: var(--pf-button-fg-ghost); --pf-btn-fg-hover: var(--pf-button-fg-ghost-hover); --pf-btn-bg: transparent; --pf-btn-bg-hover: var(--pf-button-bg-ghost-hover); --pf-btn-bg-active: color-mix(in oklab, var(--pf-button-bg-ghost-hover) 88%, black); --pf-btn-border: transparent; --pf-btn-border-hover: transparent; --pf-btn-border-active: transparent; --pf-btn-shadow: none; } .pf-btn-mono { --pf-btn-fg: var(--pf-button-fg-mono); --pf-btn-bg: var(--pf-button-bg-mono); --pf-btn-bg-hover: var(--pf-button-bg-mono-hover); --pf-btn-bg-active: color-mix(in oklab, var(--pf-button-bg-mono) 80%, black); --pf-btn-border: var(--pf-button-bg-mono); --pf-btn-border-hover: var(--pf-button-bg-mono-hover); --pf-btn-border-active: color-mix(in oklab, var(--pf-button-bg-mono) 80%, black); } .pf-btn-danger { --pf-btn-fg: var(--pf-button-fg-danger); --pf-btn-bg: var(--pf-button-bg-danger); --pf-btn-bg-hover: var(--pf-button-bg-danger-hover); --pf-btn-bg-active: color-mix(in oklab, var(--pf-button-bg-danger-hover) 88%, black); --pf-btn-border: var(--pf-button-bg-danger); --pf-btn-border-hover: var(--pf-button-bg-danger-hover); --pf-btn-border-active: color-mix(in oklab, var(--pf-button-bg-danger-hover) 88%, black); } /* ─── Sizes (density-relative) ───────────────────────────────── */ .pf-btn-sm { --pf-btn-height: var(--pf-button-height-sm); --pf-btn-px: var(--pf-button-padding-x-sm); --pf-btn-font-size: var(--pf-button-font-size-sm); --pf-btn-glyph: var(--pf-button-glyph-size-sm); gap: var(--pf-space-1-5); } .pf-btn-lg { --pf-btn-height: var(--pf-button-height-lg); --pf-btn-px: var(--pf-button-padding-x-lg); --pf-btn-font-size: var(--pf-button-font-size-lg); --pf-btn-glyph: var(--pf-button-glyph-size-lg); gap: var(--pf-space-2-5); } .pf-btn-block { display: flex; inline-size: 100%; } /* ─── Icon-only ──────────────────────────────────────────────── */ .pf-btn-icon { --pf-btn-px: 0; inline-size: var(--pf-btn-height); block-size: var(--pf-btn-height); padding: 0; flex-shrink: 0; } /* Pointer-target extension: symmetric around the visual box. comfortable 40px → inset -2px (44px target); spacious 44px → 0; compact → 0 (hit target = control height, see tokens.components.css). */ .pf-btn-icon::before { content: ""; position: absolute; inset: calc((var(--pf-btn-height) - max(var(--pf-btn-height), var(--pf-button-hit-target))) / 2); } /* ─── Glyph (inline SVG from UiIcons / ) ──── */ .pf-btn-glyph { flex-shrink: 0; inline-size: var(--pf-btn-glyph); block-size: var(--pf-btn-glyph); } /* ─── Loading ────────────────────────────────────────────────── */ .pf-btn[aria-busy="true"], .pf-btn.pf-btn-loading { color: transparent; pointer-events: none; cursor: progress; } .pf-btn[aria-busy="true"] .pf-btn-glyph, .pf-btn.pf-btn-loading .pf-btn-glyph { visibility: hidden; } /* Static broken ring — motion is added ONLY under no-preference below. */ .pf-btn[aria-busy="true"]::after, .pf-btn.pf-btn-loading::after { content: ""; position: absolute; inset-block-start: 50%; inset-inline-start: 50%; inline-size: var(--pf-btn-glyph); block-size: var(--pf-btn-glyph); margin-block-start: calc(var(--pf-btn-glyph) / -2); margin-inline-start: calc(var(--pf-btn-glyph) / -2); border: 2px solid var(--pf-btn-fg); border-inline-end-color: transparent; border-radius: 50%; } /* ─── Motion (opt-in only) ───────────────────────────────────── */ @media (prefers-reduced-motion: no-preference) { .pf-btn { transition: background-color var(--pf-motion-duration-fast) var(--pf-motion-ease-out), border-color var(--pf-motion-duration-fast) var(--pf-motion-ease-out), color var(--pf-motion-duration-fast) var(--pf-motion-ease-out), box-shadow var(--pf-motion-duration-fast) var(--pf-motion-ease-out); } .pf-btn[aria-busy="true"]::after, .pf-btn.pf-btn-loading::after { animation: pf-btn-spin 0.7s linear infinite; } @keyframes pf-btn-spin { to { transform: rotate(360deg); } } } /* ─── Windows High Contrast / forced colours ─────────────────── */ @media (forced-colors: active) { .pf-btn { border-color: ButtonText; forced-color-adjust: auto; } .pf-btn:focus-visible { outline-color: Highlight; } .pf-btn:disabled, .pf-btn[aria-disabled="true"]:not([aria-busy="true"]) { color: GrayText; border-color: GrayText; opacity: 1; } .pf-btn[aria-busy="true"]::after, .pf-btn.pf-btn-loading::after { border-color: ButtonText; border-inline-end-color: transparent; } } /* ==== css/pf/components/badge.css ==== */ /* ════════════════════════════════════════════════════════════════════ PF DESIGN SYSTEM — Badge Component (CP-4, 2026-09-08) ──────────────────────────────────────────────────────────────────── Status chip for tables, headers and cards. Full status matrix (success / warning / danger / info / mono / neutral), outline and dot variants, three sizes. docs/design/ADMIN-DESIGN-SYSTEM-PLAN §B3. USAGE Neutral Active Pending Overdue v2 Razor: @await Component.InvokeAsync("Badge", new PfBadgeModel { Text = "Active", Tone = "success", Dot = true }) DESIGN • SOFT fill + status FOREGROUND text by default — the solid status fills are reserved for the dot marker and never carry text (white on emerald-600 is only 3.77:1). • `-outline` = transparent fill, status border, same foreground. • `-mono` = the DS-1 near-ink fill (survives both themes). • Colour is never the only signal: the label text carries the meaning; the dot marker is aria-hidden. MEASURED WCAG CONTRAST (sRGB, 2026-09-08 — foreground on soft fill): LIGHT success emerald-800 #065f46 on emerald-50 #ecfdf5 7.30:1 (AAA) warning amber-800 #92400e on amber-50 #fffbeb 6.84:1 (AAA) danger red-800 #991b1b on red-50 #fef2f2 7.60:1 (AAA) info sky-800 #075985 on sky-50 #f0f9ff 7.09:1 (AAA) neutral slate-700 #334155 on slate-100 #f1f5f9 9.45:1 (AAA) mono white on slate-900 #0f172a 17.9:1 (AAA) outline (on surface-raised white): success 7.69 · warning 7.09 · danger 8.31 · info 7.56 (all AAA) DARK success emerald-300 #6ee7b7 on emerald-950 #022c22 9.94:1 (AAA) warning amber-300 #fcd34d on amber-950 #451a03 10.39:1 (AAA) danger red-300 #fca5a5 on red-950 #450a0a 8.51:1 (AAA) info sky-300 #7dd3fc on sky-950 #082f49 8.33:1 (AAA) mono slate-900 on slate-100 16.3:1 (AAA) Version: 1.0.0 Created: 2026-09-08 ──────────────────────────────────────────────────────────────────── */ .pf-badge { --pf-badge-bg: var(--pf-badge-bg-neutral); --pf-badge-fg: var(--pf-badge-fg-neutral); --pf-badge-border: var(--pf-badge-border-neutral); --pf-badge-accent: var(--pf-badge-accent-neutral); --pf-badge-h: var(--pf-badge-height); --pf-badge-px: var(--pf-badge-padding-x); --pf-badge-fs: var(--pf-badge-font-size); display: inline-flex; align-items: center; gap: var(--pf-space-1); box-sizing: border-box; min-block-size: var(--pf-badge-h); padding-block: 0; padding-inline: var(--pf-badge-px); font-size: var(--pf-badge-fs); font-weight: var(--pf-badge-font-weight); line-height: 1; white-space: nowrap; vertical-align: middle; color: var(--pf-badge-fg); background: var(--pf-badge-bg); border: 1px solid transparent; border-radius: var(--pf-badge-radius); } /* ─── Status matrix ──────────────────────────────────────────── */ .pf-badge-neutral { --pf-badge-bg: var(--pf-badge-bg-neutral); --pf-badge-fg: var(--pf-badge-fg-neutral); --pf-badge-border: var(--pf-badge-border-neutral); --pf-badge-accent: var(--pf-badge-accent-neutral); } .pf-badge-success { --pf-badge-bg: var(--pf-color-status-success-soft); --pf-badge-fg: var(--pf-color-status-success-fg); --pf-badge-border: var(--pf-color-status-success-border); --pf-badge-accent: var(--pf-color-status-success); } .pf-badge-warning { --pf-badge-bg: var(--pf-color-status-warning-soft); --pf-badge-fg: var(--pf-color-status-warning-fg); --pf-badge-border: var(--pf-color-status-warning-border); --pf-badge-accent: var(--pf-color-status-warning); } .pf-badge-danger { --pf-badge-bg: var(--pf-color-status-danger-soft); --pf-badge-fg: var(--pf-color-status-danger-fg); --pf-badge-border: var(--pf-color-status-danger-border); --pf-badge-accent: var(--pf-color-status-danger); } .pf-badge-info { --pf-badge-bg: var(--pf-color-status-info-soft); --pf-badge-fg: var(--pf-color-status-info-fg); --pf-badge-border: var(--pf-color-status-info-border); --pf-badge-accent: var(--pf-color-status-info); } .pf-badge-mono { --pf-badge-bg: var(--pf-color-mono); --pf-badge-fg: var(--pf-color-mono-foreground); --pf-badge-border: var(--pf-color-mono); --pf-badge-accent: var(--pf-color-mono-foreground); } /* ─── Outline ────────────────────────────────────────────────── */ .pf-badge-outline { background: transparent; border-color: var(--pf-badge-border); } /* Outlined mono reads as ink-on-surface, not paper-on-nothing. */ .pf-badge-mono.pf-badge-outline { --pf-badge-fg: var(--pf-color-mono); --pf-badge-accent: var(--pf-color-mono); } /* ─── Dot marker (decorative — the label carries the meaning) ─── */ .pf-badge-marker { inline-size: 0.375rem; block-size: 0.375rem; border-radius: 50%; background: var(--pf-badge-accent); flex-shrink: 0; } .pf-badge > svg { inline-size: 0.875rem; block-size: 0.875rem; flex-shrink: 0; } /* ─── Sizes ──────────────────────────────────────────────────── */ .pf-badge-sm { --pf-badge-h: var(--pf-badge-height-sm); --pf-badge-px: var(--pf-badge-padding-x-sm); --pf-badge-fs: var(--pf-badge-font-size-sm); } .pf-badge-sm .pf-badge-marker { inline-size: 0.3125rem; block-size: 0.3125rem; } .pf-badge-lg { --pf-badge-h: var(--pf-badge-height-lg); --pf-badge-px: var(--pf-badge-padding-x-lg); --pf-badge-fs: var(--pf-badge-font-size-lg); } /* ─── Windows High Contrast / forced colours ─────────────────── */ @media (forced-colors: active) { .pf-badge { border-color: CanvasText; } .pf-badge-marker { background: CanvasText; } } /* ==== css/pf/components/avatar.css ==== */ /* ════════════════════════════════════════════════════════════════════ PF DESIGN SYSTEM — Avatar Component (CP-4, 2026-09-08) ──────────────────────────────────────────────────────────────────── Person / tenant marker with initials fallback, five sizes, an optional status dot and a `-stack` group with a "+N" overflow bubble. docs/design/ADMIN-DESIGN-SYSTEM-PLAN §B3. USAGE

… ×N Razor: @await Component.InvokeAsync("Avatar", new PfAvatarModel { Name = "Anna Berg", Size = "sm" }) @await Component.InvokeAsync("AvatarStack", new PfAvatarStackModel { Avatars = […], Max = 4 }) DESIGN • Initials are aria-hidden; the full name travels as .pf-sr-only text (or the ) so the avatar is announced by name. • The status dot is separated from the image by a 2px ring in the surface colour (a border, not a shadow) so it stays legible on any photo. It is decorative unless the VC is given a StatusLabel. • Stack overlap is proportional to the size (30%), the ring keeps neighbours apart, and a hovered/focused avatar rises above. MEASURED WCAG CONTRAST (sRGB, 2026-09-08 — initials on fill): neutral light slate-700 #334155 on slate-100 #f1f5f9 9.45:1 (AAA) dark slate-300 #cbd5e1 on slate-950 #020617 13.59:1 (AAA) primary white on admin navy #2E5C8A 6.97:1 (AA) · on brand red #d4213d 5.14:1 (AA) mono light white on slate-900 17.9:1 · dark slate-900 on slate-100 16.3:1 (AAA) Version: 1.0.0 Created: 2026-09-08 ──────────────────────────────────────────────────────────────────── */ .pf-avatar { --pf-avatar-size: var(--pf-avatar-size-md); --pf-avatar-fill: var(--pf-avatar-bg); --pf-avatar-ink: var(--pf-avatar-fg); --pf-avatar-status-color: var(--pf-color-text-disabled); position: relative; display: inline-flex; align-items: center; justify-content: center; box-sizing: border-box; inline-size: var(--pf-avatar-size); block-size: var(--pf-avatar-size); flex-shrink: 0; vertical-align: middle; font-size: calc(var(--pf-avatar-size) * 0.4); font-weight: var(--pf-avatar-font-weight); line-height: 1; letter-spacing: var(--pf-text-tracking-wide); text-transform: uppercase; user-select: none; color: var(--pf-avatar-ink); background: var(--pf-avatar-fill); border-radius: var(--pf-avatar-radius); } .pf-avatar-img { display: block; inline-size: 100%; block-size: 100%; border-radius: inherit; object-fit: cover; } .pf-avatar-glyph { display: inline-flex; } .pf-avatar-glyph > svg { inline-size: 55%; block-size: 55%; } /* ─── Sizes ──────────────────────────────────────────────────── */ .pf-avatar-xs { --pf-avatar-size: var(--pf-avatar-size-xs); } .pf-avatar-sm { --pf-avatar-size: var(--pf-avatar-size-sm); } .pf-avatar-md { --pf-avatar-size: var(--pf-avatar-size-md); } .pf-avatar-lg { --pf-avatar-size: var(--pf-avatar-size-lg); } .pf-avatar-xl { --pf-avatar-size: var(--pf-avatar-size-xl); } /* ─── Tones ──────────────────────────────────────────────────── */ .pf-avatar-primary { --pf-avatar-fill: var(--pf-color-action-primary); --pf-avatar-ink: var(--pf-color-text-on-action); } .pf-avatar-mono { --pf-avatar-fill: var(--pf-color-mono); --pf-avatar-ink: var(--pf-color-mono-foreground); } .pf-avatar-square { border-radius: var(--pf-radius-md); } /* ─── Status dot ─────────────────────────────────────────────── */ .pf-avatar-status { position: absolute; inset-block-end: 0; inset-inline-end: 0; box-sizing: border-box; inline-size: calc(var(--pf-avatar-size) * 0.3); block-size: calc(var(--pf-avatar-size) * 0.3); border: 2px solid var(--pf-avatar-ring); border-radius: 50%; background: var(--pf-avatar-status-color); } .pf-avatar-status-success { --pf-avatar-status-color: var(--pf-color-status-success); } .pf-avatar-status-warning { --pf-avatar-status-color: var(--pf-color-status-warning); } .pf-avatar-status-danger { --pf-avatar-status-color: var(--pf-color-status-danger); } .pf-avatar-status-info { --pf-avatar-status-color: var(--pf-color-status-info); } .pf-avatar-status-neutral { --pf-avatar-status-color: var(--pf-color-text-disabled); } /* ─── Stack ──────────────────────────────────────────────────── */ .pf-avatar-stack { display: inline-flex; align-items: center; vertical-align: middle; } .pf-avatar-stack > .pf-avatar { border: 2px solid var(--pf-avatar-ring); margin-inline-start: calc(var(--pf-avatar-size) * -0.3); } .pf-avatar-stack > .pf-avatar:first-child { margin-inline-start: 0; } .pf-avatar-stack > .pf-avatar:hover, .pf-avatar-stack > .pf-avatar:focus-visible { z-index: 1; } .pf-avatar-stack-more { --pf-avatar-fill: var(--pf-avatar-bg); --pf-avatar-ink: var(--pf-avatar-fg); font-size: calc(var(--pf-avatar-size) * 0.34); text-transform: none; letter-spacing: 0; } /* Focusable avatars (links) get the shared ring. */ .pf-avatar:focus-visible { outline: 2px solid transparent; outline-offset: 2px; box-shadow: var(--pf-focus-ring); } /* ─── Windows High Contrast / forced colours ─────────────────── */ @media (forced-colors: active) { .pf-avatar { border: 1px solid CanvasText; } .pf-avatar-status { background: CanvasText; border-color: Canvas; } } /* ==== css/pf/components/card.css ==== */ /* ════════════════════════════════════════════════════════════════════ PF DESIGN SYSTEM — Card Component ──────────────────────────────────────────────────────────────────── Container component for grouped content. Provides consistent surface treatment, padding, and elevation across all card-like UI patterns. USAGE

Card content goes here.

High shadow

Border-only, no shadow

No border, no shadow

Hover-state for clickable cards

Success-tinted

Warning-tinted

Danger-tinted

Info-tinted

ACCESSIBILITY • Use semantic HTML elements (article, section) — class is presentation-only • Interactive cards must use or

…

← or: