/* ============================================================================ Plotify — UI SKIN (ported from the plotify-ui.html reference design system). NON-DESTRUCTIVE. This file is loaded LAST in base.html, so its variables and component refinements win over the legacy per-theme files for *look* only. It introduces the reference's two-axis theming: → brand hue triplet (indigo/violet/forest/teal/ocean/ slate/clay/gold/rose) → neutral scale (light | dark) Both are toggled client-side (localStorage: pf-theme / pf-mode) by the inline script in base.html. The legacy server-side accounts:set_theme select still works and coexists; this skin only activates when a data-theme value matching one of the 9 brand keys below is present (the client script always sets one). BRIDGE: the reference uses its own var names (--brand/--paper/--line/…). We redefine the EXISTING token names (--primary/--content-bg/--border/…) from the reference values so all existing component CSS (.card/.btn/.table/.field/…) instantly adopts the new look with zero markup changes. ============================================================================ */ /* --------------------------------------------------------------------------- 1. Structural + reference-native tokens (theme-independent). Scoped to the 9 brand themes so legacy themes (professional, etc.) are untouched when the client picks them — but the client script only ever sets one of these 9, so in practice this is the live skin. --------------------------------------------------------------------------- */ :root { /* reference fonts (loaded via Google Fonts in base.html) */ --display: "Space Grotesk", system-ui, sans-serif; --body: "Inter", system-ui, sans-serif; --mono: "JetBrains Mono", ui-monospace, monospace; /* reference brand defaults (Indigo) + status hues, in case a brand theme attribute is set before the per-theme block below resolves */ --brand: #4b41d6; --brand-2: #6a61ee; --brand-ink: #332aa8; --on-brand: #fff; --ok: #2f8f5b; --warn: #bd862a; --sold: #bf554c; --hold: #7466c4; --resale: #3f86a8; /* ink sidebar (constant across themes/modes) */ --ink: #13161d; --ink-2: #1a1e27; --ink-line: #262b35; --ink-text: #c7cdd6; --ink-muted: #7d8593; } /* ===== BRAND THEMES — each sets only the brand hue triplet ================ */ [data-theme="indigo"] { --brand:#4b41d6; --brand-2:#6a61ee; --brand-ink:#332aa8; } [data-theme="violet"] { --brand:#7c3aed; --brand-2:#9560f4; --brand-ink:#5b21b6; } [data-theme="forest"] { --brand:#1f7a4d; --brand-2:#2f9a63; --brand-ink:#155f3b; } [data-theme="teal"] { --brand:#0d8b86; --brand-2:#1fa9a3; --brand-ink:#0a6b67; } [data-theme="ocean"] { --brand:#2563c9; --brand-2:#4a82e6; --brand-ink:#1b4a99; } [data-theme="slate"] { --brand:#465569; --brand-2:#647488; --brand-ink:#334155; } [data-theme="clay"] { --brand:#b4533f; --brand-2:#cd6a55; --brand-ink:#8f3f30; } [data-theme="gold"] { --brand:#a3741c; --brand-2:#c2912f; --brand-ink:#7f5a14; } [data-theme="rose"] { --brand:#c03867; --brand-2:#dc5a85; --brand-ink:#992a50; } /* --------------------------------------------------------------------------- 2. NEUTRAL SCALES by mode + BRIDGE to existing token names. We set both the reference-native names (--paper/--surface/--line/--text/…) AND remap the legacy names the existing components read. Apply only when one of the 9 brand themes is active, so legacy themes keep their own neutrals. --------------------------------------------------------------------------- */ :is([data-theme="indigo"],[data-theme="violet"],[data-theme="forest"], [data-theme="teal"],[data-theme="ocean"],[data-theme="slate"], [data-theme="clay"],[data-theme="gold"],[data-theme="rose"]) { /* --- reference-native neutrals (LIGHT default) --- */ --paper:#f4f5f1; --surface:#ffffff; --surface-2:#fafbf8; --line:#e6e8e1; --line-2:#eef0ea; --text:#191e27; --muted:#6c7682; --faint:#9aa2ac; /* --- derived soft tints (re-derive from live --surface) --- */ --brand-soft: color-mix(in srgb, var(--brand) 13%, var(--surface)); --ok-soft: color-mix(in srgb, var(--ok) 15%, var(--surface)); --warn-soft: color-mix(in srgb, var(--warn) 16%, var(--surface)); --sold-soft: color-mix(in srgb, var(--sold) 15%, var(--surface)); --hold-soft: color-mix(in srgb, var(--hold) 15%, var(--surface)); --resale-soft:color-mix(in srgb, var(--resale) 15%, var(--surface)); /* --- structural --- */ --radius:14px; --shadow:0 1px 2px rgba(20,24,31,.04),0 4px 16px rgba(20,24,31,.05); --shadow-lg:0 8px 40px rgba(20,24,31,.12); /* ===== BRIDGE → legacy token names used by existing components ===== NOTE: --primary/--accent/--primary-hover carry `!important` because a tenant ThemeProfile may inject `style="--primary:..;--accent:.."` INLINE on (see theming/models.py get_css_overrides). Inline styles outrank any stylesheet selector, so without !important a tenant brand override would pin --primary and make the 9-theme brand switcher a no-op for every primary-coloured accent in the app. The brand switcher is the live skin, so it must win. Everything else (neutrals, tints) is free to cascade. */ --font: var(--body); --font-mono: var(--mono); --primary: var(--brand) !important; --primary-hover: var(--brand-ink) !important; --on-primary: var(--on-brand); --accent: var(--brand) !important; --ring: var(--brand-soft); --content-bg: var(--paper); /* --surface / --surface-2 already match the reference names */ --surface-alt: var(--surface-2); --border: var(--line); --border-soft: var(--line-2); /* --text / --muted already match; --dim derives in tokens.css from --muted */ /* feedback hues → reference status palette (keeps cross-theme intent) */ --danger: var(--sold); --danger-strong: var(--sold); --success: var(--ok); --success-strong: var(--ok); --warning: var(--warn); --warning-strong: var(--warn); --info: var(--brand); --tint-success: var(--ok-soft); --tint-warning: var(--warn-soft); --tint-danger: var(--sold-soft); --tint-info: var(--brand-soft); /* SACRED status colors remapped to reference hues for visual cohesion. (Reference uses warm/desaturated variants; semantics unchanged.) */ --st-available: var(--ok); --st-sold: var(--sold); --st-reserved: var(--warn); --st-hold: var(--hold); --st-resale: var(--resale); /* Brand-tinted dark sidebar — derives from the live --brand so switching the brand theme visibly recolours the side panel (forest→dark green, rose→dark maroon …). Kept dark for contrast; text stays light. */ --sidebar-bg: color-mix(in srgb, var(--brand) 13%, #0d1015); --sidebar-bg-2: color-mix(in srgb, var(--brand) 22%, #161b22); --sidebar-text: #c6ccd5; --sidebar-text-active: #ffffff; --sidebar-active: color-mix(in srgb, var(--brand) 30%, #191e27); /* legacy radii nudged toward reference roundness */ --r-md: 14px; --r-lg: 16px; color-scheme: light; } /* ===== DARK MODE — only swaps the neutral scale; tints re-derive ========== */ [data-mode="dark"]:is([data-theme="indigo"],[data-theme="violet"], [data-theme="forest"],[data-theme="teal"],[data-theme="ocean"], [data-theme="slate"],[data-theme="clay"],[data-theme="gold"], [data-theme="rose"]) { --paper:#0f1218; --surface:#171b23; --surface-2:#1c212a; --line:#272d38; --line-2:#222831; --text:#e7ebf1; --muted:#8b94a2; --faint:#646d7b; --shadow:0 1px 2px rgba(0,0,0,.3),0 6px 24px rgba(0,0,0,.35); --shadow-lg:0 12px 48px rgba(0,0,0,.5); color-scheme: dark; } /* --------------------------------------------------------------------------- 3. Component refinements — match the reference look on EXISTING classes. Scoped to the brand themes so legacy themes are visually unchanged. --------------------------------------------------------------------------- */ .ui-skin, :is([data-theme="indigo"],[data-theme="violet"],[data-theme="forest"], [data-theme="teal"],[data-theme="ocean"],[data-theme="slate"], [data-theme="clay"],[data-theme="gold"],[data-theme="rose"]) body { font-family: var(--body); } /* round cards + reference shadow */ :is([data-theme="indigo"],[data-theme="violet"],[data-theme="forest"], [data-theme="teal"],[data-theme="ocean"],[data-theme="slate"], [data-theme="clay"],[data-theme="gold"],[data-theme="rose"]) { & .card { border-radius: var(--radius); box-shadow: var(--shadow); } /* headings use the display face */ & h1, & .h1, & .topbar__title, & .card__header h2, & .card__header h3 { font-family: var(--display); letter-spacing: -0.01em; } /* primary button: soft brand shadow + lift on hover (reference .btn) */ & .btn--primary { box-shadow: 0 1px 2px color-mix(in srgb, var(--brand) 30%, transparent); } & .btn--primary:hover:not(:disabled) { background: var(--brand); box-shadow: 0 4px 16px color-mix(in srgb, var(--brand) 35%, transparent); } & .btn--secondary:hover:not(:disabled) { border-color: var(--brand); color: var(--brand); background: var(--surface); } /* sidebar active accent uses the lighter brand-2 (reference .nav.on::before) */ & .nav-item--active::before { background: var(--brand-2); } & .sidebar__avatar, & .sidebar__mark--text { background: linear-gradient(135deg, var(--brand-2), var(--brand)); color: #fff; } /* topbar: translucent paper + blur (reference .top) */ & .topbar { background: color-mix(in srgb, var(--paper) 86%, transparent); backdrop-filter: blur(12px); border-bottom: 1px solid var(--line); } /* pill-style status chips already round; tighten feedback badges to tints */ & .field input:focus, & .field select:focus, & .field textarea:focus, & .field__control:focus { border-color: var(--brand); box-shadow: 0 0 0 3px var(--brand-soft); } } /* brand-theme picker in the topbar (reference .themepick) */ .themepick { display: inline-flex; align-items: center; gap: 8px; background: var(--surface); border: 1px solid var(--border); border-radius: var(--r-sm, 10px); padding: 6px 9px 6px 11px; } .themepick__dot { width: 14px; height: 14px; border-radius: 4px; flex: none; background: var(--brand); box-shadow: 0 0 0 2px var(--brand-soft, transparent); } .themepick select { border: 0; outline: 0; background: none; font: inherit; font-weight: var(--fw-semibold, 600); font-size: 13px; color: var(--text); cursor: pointer; padding-right: 0; background-image: none; } @media (max-width: 900px) { .themepick { display: none; } } @media (prefers-reduced-motion: reduce) { * { transition: none !important; } }