/** * Profile Magic — Design Tokens (theme-aware) * * Per the WP Plugin Handbook / Theme Inheritance doctrine: * - Brand colors INHERIT from the active theme's theme.json palette * (--wp--preset--color--*). Fallbacks preserve PMA's indigo identity * on classic themes that don't ship a theme.json. * - Semantic colors (success/warning/danger) are plugin-OWNED and * exposed at zero specificity so themes can re-skin without !important. * - Typography inherits from the host theme — no Google Fonts import, * no font-family literals here. * - Spacing scale reads --wp--preset--spacing-* when available. * * @package Profile_Magic * @since 1.30.0 (theme-aware refactor) */ /* -------------------------------------------------------------------- * Brand layer — theme-aware * * Scoped via :where() so specificity stays at 0 — themes + custom CSS * override trivially without !important. * ------------------------------------------------------------------ */ :where(.pma-app, .pma-auth, .pma-onboarding, .pma-profile, .pma-profile-edit, .pma-admin, .pma-admin-dashboard, .pma-search, .pma-credits, [class*="pma-"]) { /* Primary brand — defaults to PMA indigo identity */ --pma-primary: var(--wp--preset--color--primary, #6366f1); --pma-primary-hover: color-mix(in oklch, var(--pma-primary) 90%, #000); --pma-primary-soft: color-mix(in oklch, var(--pma-primary) 12%, transparent); --pma-primary-ink: var(--wp--preset--color--background, #fff); --pma-secondary: var(--wp--preset--color--secondary, #8b5cf6); --pma-secondary-hover: color-mix(in oklch, var(--pma-secondary) 90%, #000); --pma-gradient: linear-gradient(135deg, var(--pma-primary), var(--pma-secondary)); --pma-gradient-soft: linear-gradient(135deg, color-mix(in oklch, var(--pma-primary) 10%, transparent), color-mix(in oklch, var(--pma-secondary) 10%, transparent)); /* Surfaces — inherit from theme, fall back to neutrals */ --pma-surface: var(--wp--preset--color--background, #ffffff); --pma-surface-muted: var(--wp--preset--color--base-2, color-mix(in oklch, currentColor 4%, transparent)); --pma-surface-sunken: color-mix(in oklch, currentColor 6%, transparent); --pma-surface-hover: color-mix(in oklch, currentColor 5%, transparent); --pma-overlay: color-mix(in oklch, currentColor 60%, transparent); /* Text — inherits the theme's foreground */ --pma-ink: var(--wp--preset--color--foreground, currentColor); --pma-ink-muted: color-mix(in oklch, currentColor 70%, transparent); --pma-ink-subtle: color-mix(in oklch, currentColor 55%, transparent); --pma-ink-faint: color-mix(in oklch, currentColor 35%, transparent); /* Borders — derive from text color so light + dark themes both work */ --pma-border: color-mix(in oklch, currentColor 12%, transparent); --pma-border-soft: color-mix(in oklch, currentColor 8%, transparent); --pma-border-strong: color-mix(in oklch, currentColor 22%, transparent); --pma-border-focus: var(--pma-primary); --pma-ring: color-mix(in oklch, var(--pma-primary) 40%, transparent); /* -------------------------------------------------------------- * Semantic / functional colors — plugin OWNED. * Information design, not brand. Themes can re-skin via this same * :where() block (specificity 0) without !important. * ------------------------------------------------------------ */ --pma-success: #10b981; --pma-success-bg: color-mix(in oklch, var(--pma-success) 14%, transparent); --pma-success-ink: color-mix(in oklch, var(--pma-success) 70%, #000); --pma-info: #3b82f6; --pma-info-bg: color-mix(in oklch, var(--pma-info) 14%, transparent); --pma-info-ink: color-mix(in oklch, var(--pma-info) 70%, #000); --pma-warning: #f59e0b; --pma-warning-bg: color-mix(in oklch, var(--pma-warning) 18%, transparent); --pma-warning-ink: color-mix(in oklch, var(--pma-warning) 70%, #000); --pma-danger: #ef4444; --pma-danger-bg: color-mix(in oklch, var(--pma-danger) 14%, transparent); --pma-danger-ink: color-mix(in oklch, var(--pma-danger) 70%, #000); /* -------------------------------------------------------------- * Typography — INHERIT from theme, never declare a font-family * literal here. font: inherit on inputs/buttons does the rest. * Sizes use the theme's preset scale when available. * ------------------------------------------------------------ */ --pma-font: inherit; --pma-font-mono: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace; --pma-text-xs: var(--wp--preset--font-size--x-small, 0.75rem); --pma-text-sm: var(--wp--preset--font-size--small, 0.875rem); --pma-text-base: var(--wp--preset--font-size--medium, 1rem); --pma-text-lg: var(--wp--preset--font-size--large, 1.125rem); --pma-text-xl: var(--wp--preset--font-size--x-large, 1.5rem); --pma-text-2xl: var(--wp--preset--font-size--xx-large, 2rem); /* Legacy font-size aliases (pre-1.30 selectors use these) */ --pma-font-size-sm: var(--pma-text-sm); --pma-font-size-base: var(--pma-text-base); --pma-font-size-lg: var(--pma-text-lg); --pma-font-size-xl: var(--pma-text-xl); --pma-font-size-2xl: var(--pma-text-2xl); /* -------------------------------------------------------------- * Spacing — read theme's preset scale, fall back to 4/8 rhythm * ------------------------------------------------------------ */ --pma-space-2xs: var(--wp--preset--spacing--10, 0.25rem); /* 4px */ --pma-space-xs: var(--wp--preset--spacing--20, 0.5rem); /* 8px */ --pma-space-sm: var(--wp--preset--spacing--30, 0.75rem); /* 12px */ --pma-space-md: var(--wp--preset--spacing--40, 1rem); /* 16px */ --pma-space-lg: var(--wp--preset--spacing--50, 1.5rem); /* 24px */ --pma-space-xl: var(--wp--preset--spacing--60, 2rem); /* 32px */ --pma-space-2xl: var(--wp--preset--spacing--70, 3rem); /* 48px */ /* -------------------------------------------------------------- * Radius — read theme custom token, fall back to friendly scale * ------------------------------------------------------------ */ --pma-radius-xs: 0.25rem; --pma-radius-sm: var(--wp--custom--button--border-radius, 0.375rem); --pma-radius-md: var(--wp--custom--button--border-radius, 0.5rem); --pma-radius-lg: var(--wp--custom--card--border-radius, 0.75rem); --pma-radius-xl: 1rem; --pma-radius-full: 9999px; /* -------------------------------------------------------------- * Shadows — neutral, theme-portable. color-mix on currentColor * gives dark themes appropriately attenuated shadows for free. * ------------------------------------------------------------ */ --pma-shadow-xs: 0 1px 2px color-mix(in oklch, currentColor 6%, transparent); --pma-shadow-sm: 0 1px 3px color-mix(in oklch, currentColor 8%, transparent); --pma-shadow-md: 0 4px 12px color-mix(in oklch, currentColor 10%, transparent); --pma-shadow-lg: 0 12px 32px color-mix(in oklch, currentColor 12%, transparent); --pma-shadow-ring: 0 0 0 3px var(--pma-ring); /* -------------------------------------------------------------- * Motion * ------------------------------------------------------------ */ --pma-ease: cubic-bezier(0.16, 1, 0.3, 1); --pma-duration: 180ms; --pma-transition: all var(--pma-duration) var(--pma-ease); } /* -------------------------------------------------------------------- * Legacy aliases — keep old token names working so any custom CSS / * institution overrides still resolve. These map old → new. * ------------------------------------------------------------------ */ :where(.pma-app, .pma-auth, .pma-onboarding, .pma-profile, .pma-profile-edit, .pma-admin, .pma-admin-dashboard, .pma-search, .pma-credits, [class*="pma-"]) { --pma-primary-light: var(--pma-primary-soft); --pma-success-light: var(--pma-success-bg); --pma-warning-light: var(--pma-warning-bg); --pma-danger-light: var(--pma-danger-bg); --pma-text: var(--pma-ink); --pma-text-secondary: var(--pma-ink-muted); --pma-text-light: var(--pma-ink-subtle); --pma-bg: var(--pma-surface); --pma-bg-secondary: var(--pma-surface-muted); } /* -------------------------------------------------------------------- * Reduced motion — respect user preference * ------------------------------------------------------------------ */ @media (prefers-reduced-motion: reduce) { :where([class*="pma-"]) { --pma-duration: 0ms; --pma-transition: none; } }