diff --git a/fusion_plating/CLAUDE.md b/fusion_plating/CLAUDE.md index 0cb2f397..2d12b2c9 100644 --- a/fusion_plating/CLAUDE.md +++ b/fusion_plating/CLAUDE.md @@ -1861,6 +1861,12 @@ A 50-part job can have parts at several stages at once (10 Masking, 20 Plating, Operators reported invisible (dark-on-dark) text in the workspace + "Cannot Finish Step" dialog under Odoo dark mode. Root causes + the rules: -1. **`var(--text-secondary, #333)` is a MADE-UP variable — it does not exist in Odoo, so it ALWAYS falls back to the hardcoded dark hex → invisible on dark backgrounds.** It was used 33× across `job_workspace.scss` + 5 component stylesheets. The real, dark-aware secondary-text variable is **`var(--bs-secondary-color)`** (CLAUDE.md rule 9 lists it). Never use `--text-secondary` / `--text-primary` / `--card-bg` etc. — those aren't Odoo vars. **BUT `--bs-secondary-color` is muted/low-opacity** — for PRIMARY or instruction text on a dark surface it reads as "still dark/dim" (operators reported the "N required input(s)…" line as still-dark even after the swap). Use **`var(--bs-body-color)`** for important/instruction text; reserve `--bs-secondary-color` for genuinely-secondary text (hints, meta, step numbers). +1. **Odoo's compiled backend CSS does NOT define the Bootstrap colour custom-properties — `var(--bs-body-color)`, `var(--bs-secondary-color)`, `var(--bs-tertiary-bg)`, `var(--bs-body-bg)` are REFERENCED but never DEFINED (verified 2026-06-02: 0 definitions for `--bs-body-color`/`--bs-secondary-color` in the live `web.assets_backend` text).** So **any `color: var(--bs-body-color, #hex)` resolves to the `#hex` fallback in BOTH light and dark mode** — a dark hex → invisible on a dark surface. (`var(--text-secondary, …)` is even worse — that var name is entirely made-up.) Odoo themes the backend via **runtime `[data-bs-theme="dark"]`** (Bootstrap 5.3) + SCSS literals, NOT via those CSS vars, and NOT via `prefers-color-scheme`. Do NOT colour custom text with `var(--bs-*)`. **Correct, verified options:** + - **Inherit** — omit `color:` entirely so the element takes the dialog/page theme colour. Proven: the finish-block dialog's title + `.o_fp_finish_block_list` items have no colour and ARE readable in both modes; the `.o_fp_finish_block_msg` line was the ONLY broken one because it set `color: var(--bs-body-color,…)`. Removing that one line fixed it. This is the simplest fix for dialog/modal text. + - **Translucent `rgba()` for tinted boxes** — e.g. `background: rgba(245,158,11,0.16)` (warning) / `rgba(128,128,128,0.12)` (neutral). Works over whatever the live theme background is. (`color-mix(…, var(--bs-body-bg))` does NOT work — `--bs-body-bg` is undefined, so the whole `color-mix` is invalid and dropped.) + - **Explicit `[data-bs-theme="dark"] .my-class { color: … }`** override with literal hex when you genuinely need a different value per theme. + - **Compile-time `$o-webclient-color-scheme == dark`** literals only work if the **dark bundle is actually served**; on entech the active mechanism is runtime `[data-bs-theme]`, so prefer inherit / rgba / `[data-bs-theme=dark]` selectors over the two-bundle approach for backend dialogs. + + NOTE: ~33 muted-text usages across `job_workspace.scss` + 5 component stylesheets still use `var(--bs-secondary-color, #hex)` (undefined → dark hex). They're muted/secondary so less glaring, but technically wrong in dark mode — sweep them to one of the patterns above when touched. 2. **Odoo's bootstrap does NOT define the Bootstrap 5.3 `--bs-{color}-bg-subtle` / `--bs-{color}-text-emphasis` family.** Verified by grepping `web/static/lib/bootstrap/scss/_root.scss`: `--bs-tertiary-bg` and `--bs-secondary-color` exist; `--bs-warning-bg-subtle`, `--bs-danger-bg-subtle`, `--bs-warning-text-emphasis` are MISSING. So `var(--bs-warning-bg-subtle, #fef3c7)` just yields the bright hex fallback — useless for dark mode. **For tinted status banners (warning/danger/info), use `color-mix` over the live theme bg instead:** `background-color: color-mix(in srgb, #f59e0b 14%, var(--bs-body-bg)); color: var(--bs-body-color);` — pale in light mode, dark-tinted in dark mode, readable in both, graceful-degrades to no-bg on ancient browsers. (`color-mix` works in `background-color` per the rule-8 note; keep it out of shorthands.) Solid accent elements (selected pills, priority dots) with `color: white` are fine as-is in both modes. 3. **Confirmed-present, dark-aware Odoo vars to reach for:** `--bs-body-color` (primary text), `--bs-secondary-color` (muted text), `--bs-body-bg` / `--bs-tertiary-bg` (surfaces), `--bs-border-color`. The deliberate color-coded plant-card status chips (`_plant_card.scss` `.kind-*` / `.tag-*`) are light-bg + dark-text (readable in both modes, just bright on a dark card) — intentionally left as a color-coded set. diff --git a/fusion_plating/fusion_plating_shopfloor/static/src/scss/job_workspace.scss b/fusion_plating/fusion_plating_shopfloor/static/src/scss/job_workspace.scss index 1d550dbd..5479c2cf 100644 --- a/fusion_plating/fusion_plating_shopfloor/static/src/scss/job_workspace.scss +++ b/fusion_plating/fusion_plating_shopfloor/static/src/scss/job_workspace.scss @@ -806,24 +806,24 @@ $_ws-text-hex: #1d1d1f; gap: 1rem; } +// NOTE: Odoo's backend CSS does NOT define --bs-body-color / +// --bs-secondary-color / --bs-*-bg as custom properties (verified: 0 +// definitions in the compiled bundle — they're SCSS literals + two +// bundles + [data-bs-theme]). So var(--bs-body-color, #hex) ALWAYS +// resolves to the dark #hex fallback, in light AND dark mode. The fix +// for dialog text is to INHERIT the modal's theme-correct colour (the +// dialog title and the "Count the Parts" list items do exactly this and +// are readable in both modes). Tinted boxes use translucent rgba() so +// they work over whatever the live theme background is. .o_fp_finish_block_step { font-size: 1.1rem; - color: var(--bs-body-color); - // Amber wash over the live theme bg — pale in light mode, dark-amber - // in dark mode (the -bg-subtle/-text-emphasis BS vars aren't defined - // in Odoo's bootstrap, so color-mix is the dark-aware path). - background-color: color-mix(in srgb, #f59e0b 14%, var(--bs-body-bg)); + background-color: rgba(245, 158, 11, 0.16); padding: 0.7rem 1rem; border-radius: 6px; border-left: 4px solid #f59e0b; } .o_fp_finish_block_msg { - // Primary instruction line ("N required input(s)…") — use the FULL - // body text colour, not --bs-secondary-color. Secondary is muted/ - // low-opacity and read as "still dark" on the dark dialog. body-color - // is high-contrast in both light and dark. - color: var(--bs-body-color, #1d1d1f); font-weight: 500; } @@ -839,9 +839,9 @@ $_ws-text-hex: #1d1d1f; } .o_fp_finish_block_action_note { - color: var(--bs-secondary-color, #555); + // Inherit text colour; translucent neutral box works in both themes. font-style: italic; padding: 0.6rem 0.8rem; - background: var(--bs-tertiary-bg, #f3f4f6); + background: rgba(128, 128, 128, 0.12); border-radius: 4px; }