/* ════════════════════════════════════════════════════════════════════ 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); --pf-input-border: 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); --pf-drawer-z-index: var(--pf-z-overlay); /* ═════════════════════════════════════════════════════════════ 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); }