/*
Theme variable mapping for the Operator UI.
Maps DaisyUI semantic tokens to operator aliases (`--op-*`) so the
operator UI follows the active DaisyUI theme. Our canonical themes are:
- `corporate` (light) — app default
- `business` (dark) — canonical dark theme
Usage
- Include this stylesheet *after* the compiled DaisyUI stylesheet
(`/static/daisy.css`) and after any view‑scoped polish like
`operator.css` so theme mappings can override fallbacks when present.
Example load order in templates:
Notes for implementers
- Use the theme names `corporate` and `business` when setting
`document.documentElement.dataset.theme` or when rendering ``.
- The small JS snippet below shows a minimal persistence pattern; it is
illustrative and belongs in a small client script in the real app.
*/
/* Minimal client snippet (illustrative only — place in a .js file if used):
(function(){
const key = 'app:theme';
function applyTheme(name){
if(name) {
document.documentElement.setAttribute('data-theme', name);
localStorage.setItem(key, name);
} else {
document.documentElement.removeAttribute('data-theme');
localStorage.removeItem(key);
}
}
// Init from storage or OS preference (choose 'business' for dark handling)
let theme = localStorage.getItem(key);
if(!theme && window.matchMedia && window.matchMedia('(prefers-color-scheme: dark)').matches){
theme = 'business';
}
if(theme) applyTheme(theme);
// Example: listen for inputs with class .theme-controller and apply value
document.addEventListener('change', (ev) => {
const el = ev.target && ev.target.closest && ev.target.closest('.theme-controller');
if(!el) return;
const val = el.value || el.getAttribute('value');
applyTheme(val === 'auto' ? null : val);
}, true);
})();
*/
/* Base fallbacks — used when DaisyUI variables are missing. */
:root {
--op-accent-1: var(--accent, #7c3aed);
--op-accent-2: var(--primary, #06b6d4);
--op-success-1: var(--success, #10b981);
--op-surface: var(--base-100, #ffffff);
--op-text: var(--base-content, #0f172a);
--op-bg-1: var(--base-200, #f8fafc);
--op-bg-2: var(--base-100, #ffffff);
}
/* Accessibility / readability overrides
These styles are intentionally loaded after DaisyUI so they may
adjust the effective utility font-sizes used across the app without
altering the upstream design system. The goal is to improve legibility
(especially in the sidebar) while keeping proportions intact.
*/
html, body {
/* Keep a sensible base font size for rem calculations. */
font-size: 16px;
}
/* Bump commonly used small text utilities to be more readable. */
.text-xs {
font-size: 0.875rem; /* ~14px */
}
.text-sm {
font-size: 1rem; /* ~16px */
}
/* Ensure menu links are readable in the sidebar. */
.menu a {
font-size: 1rem;
}
.menu .menu-title {
font-size: 1.0625rem; /* slightly larger than menu items */
}
/* Make small helper text inside cards and utility areas a bit larger. */
.card .text-sm, .card .text-xs {
font-size: 0.95rem;
}
/* Make HTMLDialog backdrop match the app background so modals feel
visually consistent with the rest of the UI (cards and page background).
This affects modern browsers supporting ::backdrop and also provides a
fallback for environments where