/** * Design tokens for the nui/prod UI. Loaded FIRST in Nui_Base::$cssList so every * later stylesheet (jqueryui.theme.css, base.css, form.css, popup.css, * tablesorter.cba.css) and view-level CSS can consume these variables. * * Theme selection: template_nui.php emits data-theme="auto|light|dark" on * (user override via the alt_theme developer option; 'auto' follows the OS). * Custom properties inherit, so values set on body[data-theme=...] override the * :root defaults for everything on the page. * * IMPORTANT: the dark palette appears TWICE below (explicit dark + auto/OS-dark). * There is no CSS build step, so the two blocks must be kept in sync by hand. * * Palette rationale: matures the legacy identity rather than replacing it -- * --brand descends from the old header sky-blue #74bad8, --accent from the * vertical-tab-rail green #acdd4a. Report-total row tokens (--rpt-total-*) * replace the lightcyan/lightblue/#80FF80/yellow literals used by CbaReport. */ :root { color-scheme: light; /* type */ --font-ui: system-ui, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; --font-mono: ui-monospace, "Cascadia Mono", Consolas, Menlo, monospace; /* surfaces (page -> panel -> inset chrome) */ --surface-0: #f4f6f8; --surface-1: #ffffff; --surface-2: #e9edf1; /* text */ --text-1: #1d2830; --text-2: #5a6a75; /* lines */ --border-1: #d3dbe1; --border-2: #b7c2cb; /* brand + accent */ --brand: #3d87ab; --brand-strong: #2b6a8a; --brand-soft: #d8eaf3; --accent: #78ad3f; /* icon category hues (see CbaIcons + .nuiIconCat-* in base.css); decoupled from the chrome tokens so icon weight/saturation can be tuned independently */ --icon-blue: #2472a4; --icon-teal: #177f72; --icon-violet: #6a51ad; --icon-amber: #a86f12; --icon-green: #2f8f57; --icon-red: #bb3535; --icon-orange: #c25f14; --icon-slate: #4d6272; --duo-op: 0.34; /* duotone fill layer: heavier in light for weight */ /* app header bar (soft brand tint in light, quiet surface in dark) */ --header-bg: #d8eaf3; --header-fg: #21506b; --header-logo: url("../../images/cba_trak_logo.png"); /* status */ --danger: #c94f4f; --danger-soft: #f6dede; --warn: #d9932f; --warn-soft: #f8e9d2; --ok: #4f9e6b; --ok-soft: #dcefe3; /* CbaReport total-row tiers (1 = minor subtotal ... 4 = grand total) */ --rpt-total-1: #e2f2f5; --rpt-total-2: #d3e7f2; --rpt-total-3: #dcedd2; --rpt-total-4: #f5ecc8; /* shape + elevation */ --radius: 4px; --radius-sm: 3px; --shadow: 0 1px 3px rgba(29, 40, 48, 0.18); --shadow-pop: 0 4px 16px rgba(29, 40, 48, 0.25); /* focus ring */ --focus: #3d87ab; } /* DARK PALETTE -- keep in sync with the auto/OS-dark copy below */ body[data-theme="dark"] { color-scheme: dark; --surface-0: #14181c; --surface-1: #1c2329; --surface-2: #242d35; --text-1: #dde5ea; --text-2: #93a1ac; --border-1: #313c45; --border-2: #45525d; --brand: #6db3d1; --brand-strong: #8ec8e2; --brand-soft: #24404f; --accent: #93c356; --icon-blue: #6aa5c4; --icon-teal: #4fab9a; --icon-violet: #a290ce; --icon-amber: #c9a25a; --icon-green: #79b287; --icon-red: #d47878; --icon-orange: #d29455; --icon-slate: #8b98a3; --duo-op: 0.22; /* lighter fill in dark: kills the neon glow */ --header-bg: #1c2329; --header-fg: #dde5ea; --header-logo: url("../../images/cba_trak_logo_dark.png"); --danger: #e07b7b; --danger-soft: #46282a; --warn: #e2a95c; --warn-soft: #46381f; --ok: #6fbf8f; --ok-soft: #24402e; --rpt-total-1: #1d3a40; --rpt-total-2: #24404f; --rpt-total-3: #2b4028; --rpt-total-4: #4a4322; --shadow: 0 1px 3px rgba(0, 0, 0, 0.5); --shadow-pop: 0 4px 16px rgba(0, 0, 0, 0.6); --focus: #8ec8e2; } /* AUTO: follow the OS -- identical to the explicit dark block above */ @media (prefers-color-scheme: dark) { body[data-theme="auto"] { color-scheme: dark; --surface-0: #14181c; --surface-1: #1c2329; --surface-2: #242d35; --text-1: #dde5ea; --text-2: #93a1ac; --border-1: #313c45; --border-2: #45525d; --brand: #6db3d1; --brand-strong: #8ec8e2; --brand-soft: #24404f; --accent: #93c356; --icon-blue: #6aa5c4; --icon-teal: #4fab9a; --icon-violet: #a290ce; --icon-amber: #c9a25a; --icon-green: #79b287; --icon-red: #d47878; --icon-orange: #d29455; --icon-slate: #8b98a3; --duo-op: 0.22; /* lighter fill in dark: kills the neon glow */ --header-bg: #1c2329; --header-fg: #dde5ea; --header-logo: url("../../images/cba_trak_logo_dark.png"); --danger: #e07b7b; --danger-soft: #46282a; --warn: #e2a95c; --warn-soft: #46381f; --ok: #6fbf8f; --ok-soft: #24402e; --rpt-total-1: #1d3a40; --rpt-total-2: #24404f; --rpt-total-3: #2b4028; --rpt-total-4: #4a4322; --shadow: 0 1px 3px rgba(0, 0, 0, 0.5); --shadow-pop: 0 4px 16px rgba(0, 0, 0, 0.6); --focus: #8ec8e2; } }