/* * SIMERP — SIM brand theme for the ERPNext (Frappe v16) desk and login. * * Loaded via the site's own config, NOT via nginx: * - desk : site_config.json "app_include_css": ["/files/sim-theme.css"] * (frappe/www/desk.py reads frappe.conf.get("app_include_css")) * - login : Website Settings > head_html * Deploy the file itself with: * docker cp sim-deploy/erpnext-sim-theme.css \ * erpnext-backend:/home/frappe/frappe-bench/sites/erp.absolute-insight.ai/public/files/sim-theme.css * * ── Why this remaps --gray-* and not just --surface-* ────────────────────── * Frappe v16 carries TWO parallel colour systems and the desk uses both: * 1. a legacy --gray-50..900 ramp, aliased into semantics * (--bg-color, --card-bg, --control-bg, --text-color, --border-color …) * 2. a newer --surface-* / --ink-* / --outline-* set used by newer components * The page background is `background-color: var(--bg-color)`, and in dark mode * `--bg-color: var(--surface-base)`, which is `--gray-950` = #171717. Both are * set below. (Up to at least v16.29 the page colour was --gray-900; a later v16 * added --gray-950 below it and took the page with it, which turned the whole * desk stock with nothing failing, so a release can move this.) * * Only variables are overridden — no layout or component-class rules — so this * should survive ERPNext upgrades. If a future version renames a variable that * part falls back to stock colours rather than breaking the page. * * Palette is SIM's own dark navy ramp, copied verbatim from src/tailwind.css * (html.dark) so the two products match exactly. Both Frappe's gray ramp and * SIM's navy ramp run lightest at 50 -> darkest at 900/950, so the mapping is * positional. */ :root { --sim-navy-950: #0d1422; --sim-navy-900: #161f30; --sim-navy-850: #1e2a3d; --sim-navy-800: #253247; --sim-navy-700: #314159; --sim-navy-600: #3d506f; --sim-navy-500: #4d648a; --sim-navy-400: #627ca6; --sim-navy-300: #7f9ac2; --sim-navy-200: #9fb6de; --sim-navy-100: #bfd1f5; --sim-navy-50: #d7e4ff; --sim-accent-500: #3b6fe5; --sim-accent-600: #2557d6; --sim-accent-700: #1e46b4; } /* `:root[data-theme='dark']`, not a bare `[data-theme='dark']`. Both match , but the bare form scores (0,1,0) — exactly the same as the `:root` blocks in website.bundle.css and login.bundle.css where Frappe defines its own palette. A tie is decided by source order, and the two load orders differ: the desk gets this file LAST via app_include_css and was themed correctly, while website pages get it FIRST via head_html, so Frappe's `:root` won and /login rendered stock charcoal. Adding :root makes it (0,2,0) and beats `:root` on both surfaces regardless of order. The light block below already had this specificity, which is why only dark was affected. */ :root[data-theme='dark'] { /* ── 0. --neutral: the third system, and the one that paints the header ── `.navbar { background: var(--navbar-bg) }` and `--navbar-bg: var(--neutral)`, which in dark is `--neutral-black` = #000000. It is derived from neither ramp below, so remapping those left the header pure black on a navy page. Remapping --neutral itself also catches the other surfaces built on it (form sidebar document-links, toggle knobs) instead of just the navbar. navy-950 is perceptually near-black, so the `color: var(--neutral)` uses — dark text on light buttons — keep their contrast. */ --neutral: var(--sim-navy-950); /* ── 1. Legacy ramp — this is what actually paints the desk ────────────── Remapping the whole ramp here carries every downstream alias with it (--bg-color, --card-bg, --control-bg, --text-color, --text-muted, --border-color, --btn-default-bg, --modal-bg …) without naming them. */ --gray-50: var(--sim-navy-50); --gray-100: var(--sim-navy-100); --gray-200: var(--sim-navy-200); --gray-300: var(--sim-navy-300); --gray-400: var(--sim-navy-400); --gray-500: var(--sim-navy-500); --gray-600: var(--sim-navy-600); --gray-700: var(--sim-navy-700); --gray-800: var(--sim-navy-800); --gray-900: var(--sim-navy-900); --gray-950: var(--sim-navy-950); --gray-450: var(--sim-navy-500); /* Stock dark is flat: page, cards and modals are all --gray-950. SIM lifts surfaces off the page, so re-separate them after the ramp remap. */ --fg-color: var(--sim-navy-900); --card-bg: var(--sim-navy-900); --modal-bg: var(--sim-navy-850); --popover-bg: var(--sim-navy-850); /* ── 2. Newer ramp, used by the components that have been migrated ─────── --surface-base is the token that paints the page, named outright so the page stays navy if a release moves it to another ramp step. Steps 5-10 are mid greys up to near-white and come through the ramp above. */ --surface-base: var(--sim-navy-950); --surface-gray-1: var(--sim-navy-900); --surface-gray-2: var(--sim-navy-850); --surface-gray-3: var(--sim-navy-800); --surface-gray-4: var(--sim-navy-700); /* Text. ink-gray-9 is the strongest foreground. */ --ink-gray-1: var(--sim-navy-900); --ink-gray-2: var(--sim-navy-800); --ink-gray-3: var(--sim-navy-600); --ink-gray-4: var(--sim-navy-500); --ink-gray-5: var(--sim-navy-400); --ink-gray-6: var(--sim-navy-300); --ink-gray-7: var(--sim-navy-200); --ink-gray-8: var(--sim-navy-100); --ink-gray-9: var(--sim-navy-50); /* Borders */ --outline-gray-1: var(--sim-navy-850); --outline-gray-2: var(--sim-navy-800); --outline-gray-3: var(--sim-navy-700); --outline-gray-4: var(--sim-navy-500); /* Blue accents -> SIM's corporate accent, so primary actions match. --btn-primary is deliberately left alone: Frappe's dark primary button is a light fill with dark text, and recolouring it breaks that pairing. */ --surface-blue-1: #12203a; --surface-blue-2: var(--sim-accent-700); --surface-blue-3: var(--sim-accent-500); --outline-blue-1: var(--sim-accent-700); } /* ── Light theme ──────────────────────────────────────────────────────────── Only the accent is aligned. SIM's light mode is a near-white surface and ERPNext's already matches closely enough; recolouring the light neutrals too would fight the desk's own contrast tuning for no real gain. */ :root:not([data-theme='dark']) { --primary: var(--sim-accent-600); --primary-color: var(--sim-accent-600); --surface-blue-3: var(--sim-accent-500); } /* ── Header width ─────────────────────────────────────────────────────────── The one deliberate exception to the variables-only rule above, because no variable controls it. The navbar's inner wrapper is a Bootstrap .container, capped at 1290px from the 1200px breakpoint up, so on a wide monitor the logo and avatar stop well short of the edges while the navbar's own background still spans the page. Frappe's built-in "Toggle Full Width" (avatar menu) does NOT fix this: it sets body.full-width, which only relaxes --page-max-width on form and workspace CONTENT. The navbar container is untouched by it. Scoped to `.navbar` so page content keeps its measure — widening every .container would stretch form layouts too. Use the avatar-menu toggle if you want the content full-bleed as well. */ .navbar .container { max-width: 100%; } /* ── Login page ───────────────────────────────────────────────────────────── No hand-styling here. login.bundle.css ships the same complete dark palette as the desk, so head_html flips on /login and the rules above recolour it — a coherent dark login instead of a guessed one. The only tweak is lifting the card off the page: stock dark paints both body and .page-card with --bg-color, which reads as one flat slab. */ :root[data-theme='dark'] .page-card { background-color: var(--sim-navy-900); border: 1px solid var(--sim-navy-800); } /* Deliberately NOT restyling .btn-login. It looks unfilled next to the near-white .btn-login-option buttons, but measured on the card it is an outlined primary: white border at 16.5:1 and label at 18.4:1 against --sim-navy-900. Legible and delineated, so the flat look is a hierarchy preference, not a contrast bug. Changing it would also need to out-specify login.bundle's `.for-login .page-card .page-card-actions .btn-login` (0,4,0) — a selector arms race for a preference. If the filled look is wanted, do it deliberately. */