, so body-level chrome selectors (#wpcontent) and * component selectors (.pwp-app .pwp-btn) both resolve. * - Every component rule is scoped `.pwp-app .pwp-*`. * - State classes (.active, .is-loading, .is-success, .is-error) and * WP-native names (.button, .notice) stay unprefixed by design. */ /* ───────────────────────────────────────────────────── 1. Web fonts (self-hosted WOFF2 subsets — latin + latin-ext) Files live in each plugin's fonts/ dir, sibling to this css/ dir. ───────────────────────────────────────────────────── */ @font-face { font-family: "Plus Jakarta Sans"; font-style: normal; font-weight: 300; font-display: swap; src: url("../fonts/PlusJakartaSans-300-latin.woff2") format("woff2"), url("../fonts/PlusJakartaSans-300-latin-ext.woff2") format("woff2"); } @font-face { font-family: "Plus Jakarta Sans"; font-style: normal; font-weight: 400; font-display: swap; src: url("../fonts/PlusJakartaSans-400-latin.woff2") format("woff2"), url("../fonts/PlusJakartaSans-400-latin-ext.woff2") format("woff2"); } @font-face { font-family: "Plus Jakarta Sans"; font-style: normal; font-weight: 500; font-display: swap; src: url("../fonts/PlusJakartaSans-500-latin.woff2") format("woff2"), url("../fonts/PlusJakartaSans-500-latin-ext.woff2") format("woff2"); } @font-face { font-family: "Plus Jakarta Sans"; font-style: normal; font-weight: 600; font-display: swap; src: url("../fonts/PlusJakartaSans-600-latin.woff2") format("woff2"), url("../fonts/PlusJakartaSans-600-latin-ext.woff2") format("woff2"); } @font-face { font-family: "Plus Jakarta Sans"; font-style: normal; font-weight: 700; font-display: swap; src: url("../fonts/PlusJakartaSans-700-latin.woff2") format("woff2"), url("../fonts/PlusJakartaSans-700-latin-ext.woff2") format("woff2"); } @font-face { font-family: "JetBrains Mono"; font-style: normal; font-weight: 400; font-display: swap; src: url("../fonts/JetBrainsMono-400-latin.woff2") format("woff2"), url("../fonts/JetBrainsMono-400-latin-ext.woff2") format("woff2"); } @font-face { font-family: "JetBrains Mono"; font-style: normal; font-weight: 500; font-display: swap; src: url("../fonts/JetBrainsMono-500-latin.woff2") format("woff2"), url("../fonts/JetBrainsMono-500-latin-ext.woff2") format("woff2"); } @font-face { font-family: "JetBrains Mono"; font-style: normal; font-weight: 600; font-display: swap; src: url("../fonts/JetBrainsMono-600-latin.woff2") format("woff2"), url("../fonts/JetBrainsMono-600-latin-ext.woff2") format("woff2"); } @font-face { font-family: "Instrument Serif"; font-style: normal; font-weight: 400; font-display: swap; src: url("../fonts/InstrumentSerif-400-latin.woff2") format("woff2"), url("../fonts/InstrumentSerif-400-latin-ext.woff2") format("woff2"); } @font-face { font-family: "Instrument Serif"; font-style: italic; font-weight: 400; font-display: swap; src: url("../fonts/InstrumentSerif-400i-latin.woff2") format("woff2"), url("../fonts/InstrumentSerif-400i-latin-ext.woff2") format("woff2"); } /* ───────────────────────────────────────────────────── 2. Design tokens — dark (default) Declared on .pwp-app so the [data-theme="light"] block can re-point the same names and win by specificity. Never declared on :root (would leak into WP). ───────────────────────────────────────────────────── */ .pwp-app { /* Surfaces & ink */ --pwp-paper: #0d1411; --pwp-canvas: var(--pwp-paper); --pwp-surface: #141c18; --pwp-surface-2: #1a2520; --pwp-surface-3: #202e27; --pwp-line: #24312b; --pwp-line-2: #2e3d36; --pwp-ink: #e8f0ea; --pwp-ink-2: #c4d0c8; --pwp-muted: #8a9b90; --pwp-muted-2: #6a7d72; --pwp-cream: #f2f7f3; --pwp-cream-2: #dbe5dd; /* Brand — moss green */ --pwp-moss: #4ade80; --pwp-moss-2: #22c55e; --pwp-moss-glow: #86efac; --pwp-moss-deep: #166534; --pwp-moss-bg: rgba(74, 222, 128, 0.08); --pwp-moss-border: rgba(74, 222, 128, 0.25); /* Accent */ --pwp-citron: #d9f99d; --pwp-citron-bg: rgba(217, 249, 157, 0.1); --pwp-amber: #fbbf24; --pwp-rust: #f97316; --pwp-rust-bg: rgba(249, 115, 22, 0.12); --pwp-danger: #f87171; --pwp-danger-2: #fca5a5; /* RGB triplets — base hue for inline rgba() tints so they flip with theme */ --pwp-moss-rgb: 74, 222, 128; --pwp-rust-rgb: 249, 115, 22; --pwp-danger-rgb: 248, 113, 113; --pwp-citron-rgb: 217, 249, 157; --pwp-paper-rgb: 13, 20, 17; /* Semantic — warning = amber (needs attention / may fail); citron is a separate "scheduled / planned" accent exposed via --pwp-citron. */ --pwp-success: var(--pwp-moss); --pwp-success-bg: rgba(var(--pwp-moss-rgb), 0.1); --pwp-success-border: rgba(var(--pwp-moss-rgb), 0.25); --pwp-warning: var(--pwp-amber); --pwp-warning-bg: rgba(251, 191, 36, 0.1); --pwp-warning-border: rgba(251, 191, 36, 0.25); --pwp-error: var(--pwp-rust); --pwp-error-bg: rgba(var(--pwp-rust-rgb), 0.1); --pwp-error-border: rgba(var(--pwp-rust-rgb), 0.25); --pwp-info: var(--pwp-ink-2); --pwp-info-bg: rgba(196, 208, 200, 0.08); --pwp-info-border: var(--pwp-line); /* Type */ --pwp-font-sans: "Plus Jakarta Sans", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif; --pwp-font-serif: "Instrument Serif", serif; --pwp-font-mono: "JetBrains Mono", Menlo, Consolas, monospace; --pwp-text-xs: 12px; --pwp-text-sm: 13px; --pwp-text-base: 14px; --pwp-text-body: 15px; --pwp-text-lg: 18px; --pwp-text-xl: 20px; --pwp-text-2xl: 24px; --pwp-text-3xl: 30px; --pwp-tracking-tight: -0.02em; --pwp-tracking-cta: -0.01em; --pwp-tracking-upper: 0.1em; /* Spacing */ --pwp-space-1: 4px; --pwp-space-2: 8px; --pwp-space-3: 12px; --pwp-space-4: 16px; --pwp-space-5: 20px; --pwp-space-6: 24px; --pwp-space-7: 28px; --pwp-space-8: 32px; --pwp-space-10: 40px; /* Radius */ --pwp-radius-sm: 6px; --pwp-radius-md: 8px; --pwp-radius: 8px; --pwp-radius-lg: 10px; --pwp-radius-card: 14px; --pwp-radius-xl: 16px; --pwp-radius-2xl: 20px; --pwp-radius-3xl: 28px; --pwp-radius-pill: 999px; --pwp-radius-full: 999px; /* Overlay */ --pwp-overlay: rgba(0, 0, 0, 0.5); /* Shadows */ --pwp-shadow-sm: 0 2px 4px rgba(0, 0, 0, 0.4); --pwp-shadow-md: 0 6px 18px -6px rgba(0, 0, 0, 0.6), inset 0 0 0 1px rgba(var(--pwp-moss-rgb), 0.08); --pwp-shadow-lg: 0 2px 4px rgba(0, 0, 0, 0.4), 0 20px 40px -12px rgba(0, 0, 0, 0.6), inset 0 0 0 1px rgba(var(--pwp-moss-rgb), 0.12), 0 0 40px -10px rgba(var(--pwp-moss-rgb), 0.25); --pwp-shadow-btn: 0 8px 30px -8px rgba(var(--pwp-moss-rgb), 0.45); --pwp-shadow-btn-primary: 0 8px 30px -8px rgba(var(--pwp-moss-rgb), 0.45); --pwp-shadow-btn-hover: 0 12px 36px -8px rgba(134, 239, 172, 0.55); /* Motion */ --pwp-ease: cubic-bezier(0.2, 0.8, 0.2, 1); --pwp-transition: all 0.2s var(--pwp-ease); } /* ───────────────────────────────────────────────────── 3. Design tokens — light (opt-in via data-theme="light") Re-points primitives only; every semantic/alias token resolves through them. Also keys off body.pwp-theme-light (set by each plugin's admin_body_class()) so content rendered before the data-theme'd app wrapper opens - e.g. an admin_notices notice - still resolves the right tokens on . ───────────────────────────────────────────────────── */ .pwp-app[data-theme="light"], body.pwp-app.pwp-theme-light { /* Surfaces & ink */ --pwp-paper: #fff; --pwp-canvas: #f0f0f1; --pwp-surface: #fff; --pwp-surface-2: #f5f7f6; --pwp-surface-3: #dce5dd; --pwp-line: #e6eae8; --pwp-line-2: #8a988f; --pwp-ink: #0b0f0d; --pwp-ink-2: #2c3531; --pwp-muted: #565e58; --pwp-muted-2: #606760; /* --pwp-cream / --pwp-cream-2 intentionally not flipped (fills on dark CTA bands) */ /* Brand — moss */ --pwp-moss: #15803d; --pwp-moss-2: #166534; --pwp-moss-glow: #166534; --pwp-moss-deep: #bbf7d0; --pwp-moss-bg: rgba(21, 128, 61, 0.08); --pwp-moss-border: rgba(21, 128, 61, 0.22); /* Accent — deepened for AA on white */ --pwp-citron: #4d7c0f; --pwp-citron-bg: rgba(217, 249, 157, 0.1); --pwp-amber: #b45309; --pwp-rust: #c2410c; --pwp-rust-bg: rgba(194, 65, 12, 0.1); --pwp-danger: #dc2626; --pwp-danger-2: #b91c1c; /* RGB triplets */ --pwp-moss-rgb: 21, 128, 61; --pwp-rust-rgb: 194, 65, 12; --pwp-danger-rgb: 220, 38, 38; --pwp-citron-rgb: 217, 249, 157; --pwp-paper-rgb: 255, 255, 255; /* Semantic tints holding rgba primitives (must re-point) */ --pwp-warning-bg: rgba(180, 83, 9, 0.1); --pwp-warning-border: rgba(180, 83, 9, 0.25); --pwp-error-bg: rgba(194, 65, 12, 0.1); --pwp-error-border: rgba(194, 65, 12, 0.25); --pwp-info-bg: rgba(44, 53, 49, 0.06); /* Shadows — soft neutral drops; moss glows toned down */ --pwp-shadow-sm: 0 1px 2px rgba(16, 40, 28, 0.06); --pwp-shadow-md: 0 1px 4px rgba(16, 40, 28, 0.08), 0 6px 20px -8px rgba(16, 40, 28, 0.12); --pwp-shadow-lg: 0 2px 4px rgba(16, 40, 28, 0.05), 0 22px 48px -20px rgba(16, 40, 28, 0.2); --pwp-shadow-btn: 0 6px 18px -8px rgba(var(--pwp-moss-rgb), 0.42); --pwp-shadow-btn-primary: 0 6px 18px -8px rgba(var(--pwp-moss-rgb), 0.42); --pwp-shadow-btn-hover: 0 10px 26px -8px rgba(var(--pwp-moss-rgb), 0.5); } /* ───────────────────────────────────────────────────── 4. Light "auto" mode — follows OS when no explicit data-theme is set. Mirrors the light block; guarded so an explicit data-theme="dark" (wrapper) or .pwp-theme-dark (body, set via admin_body_class()) wins. ───────────────────────────────────────────────────── */ @media (prefers-color-scheme: light) { .pwp-app:not([data-theme="dark"]):not(.pwp-theme-dark) { --pwp-paper: #fff; --pwp-canvas: #f0f0f1; --pwp-surface: #fff; --pwp-surface-2: #f5f7f6; --pwp-surface-3: #dce5dd; --pwp-line: #e6eae8; --pwp-line-2: #8a988f; --pwp-ink: #0b0f0d; --pwp-ink-2: #2c3531; --pwp-muted: #565e58; --pwp-muted-2: #606760; --pwp-moss: #15803d; --pwp-moss-2: #166534; --pwp-moss-glow: #166534; --pwp-moss-deep: #bbf7d0; --pwp-moss-bg: rgba(21, 128, 61, 0.08); --pwp-moss-border: rgba(21, 128, 61, 0.22); --pwp-citron: #4d7c0f; --pwp-amber: #b45309; --pwp-rust: #c2410c; --pwp-rust-bg: rgba(194, 65, 12, 0.1); --pwp-danger: #dc2626; --pwp-danger-2: #b91c1c; --pwp-moss-rgb: 21, 128, 61; --pwp-rust-rgb: 194, 65, 12; --pwp-danger-rgb: 220, 38, 38; --pwp-paper-rgb: 255, 255, 255; --pwp-warning-bg: rgba(180, 83, 9, 0.1); --pwp-warning-border: rgba(180, 83, 9, 0.25); --pwp-error-bg: rgba(194, 65, 12, 0.1); --pwp-error-border: rgba(194, 65, 12, 0.25); --pwp-info-bg: rgba(44, 53, 49, 0.06); --pwp-shadow-sm: 0 1px 2px rgba(16, 40, 28, 0.06); --pwp-shadow-md: 0 1px 4px rgba(16, 40, 28, 0.08), 0 6px 20px -8px rgba(16, 40, 28, 0.12); --pwp-shadow-lg: 0 2px 4px rgba(16, 40, 28, 0.05), 0 22px 48px -20px rgba(16, 40, 28, 0.2); --pwp-shadow-btn: 0 6px 18px -8px rgba(var(--pwp-moss-rgb), 0.42); --pwp-shadow-btn-primary: 0 6px 18px -8px rgba(var(--pwp-moss-rgb), 0.42); --pwp-shadow-btn-hover: 0 10px 26px -8px rgba(var(--pwp-moss-rgb), 0.5); } } /* ───────────────────────────────────────────────────── 5. Page shell — dim the WP admin chrome around the app. Body-level rules require .pwp-app on (added via admin_body_class). The .pwp-theme-light body hook now also re-points the --pwp-* tokens themselves (see section 3), so this background is redundant with --pwp-canvas but kept as an explicit fallback for the outer wp-admin chrome. ───────────────────────────────────────────────────── */ body.pwp-app, body.pwp-app #wpcontent, body.pwp-app #wpbody-content { background: var(--pwp-canvas); } body.pwp-app #wpcontent { padding-left: 0; } body.pwp-app.pwp-theme-light, body.pwp-app.pwp-theme-light #wpcontent, body.pwp-app.pwp-theme-light #wpbody-content { background: #f0f0f1; } .pwp-app, .pwp-app * { box-sizing: border-box; } /* Firefox draws its own dotted focus ring inside