fix(quick-look): dark-mode-aware instructions panel

The Operator Instructions panel had a hardcoded inline style
(background: #f8f9fa) which became a white-on-dark unreadable blob
in dark mode. Replaced with a CSS class backed by an SCSS file that
branches at compile-time via $o-webclient-color-scheme — registered
in both web.assets_backend (light) and web.assets_web_dark (dark)
bundles per the CLAUDE.md pattern.

Tokens: panel bg #f8f9fa light / #22262d dark; border #d8dadd /
#3a3f47; text #212529 / #e8eaed.

Co-Authored-By: Claude Opus 4.7 (1M context) <noreply@anthropic.com>
This commit is contained in:
gsinghpal
2026-04-29 23:40:55 -04:00
parent 555dd5421f
commit f7fcd03bfc
5 changed files with 79 additions and 4 deletions

View File

@@ -0,0 +1,41 @@
// Step Details Quick-Look modal — dark-mode aware tokens.
// Pattern documented in fusion-plating/CLAUDE.md: branch hex values
// at SCSS compile-time via $o-webclient-color-scheme. Don't rely on
// var(--bs-body-bg) — Odoo 19 doesn't flip it consistently across
// addons.
$o-webclient-color-scheme: bright !default;
$_fp_ql_panel_hex: #f8f9fa;
$_fp_ql_border_hex: #d8dadd;
$_fp_ql_text_hex: #212529;
@if $o-webclient-color-scheme == dark {
$_fp_ql_panel_hex: #22262d !global;
$_fp_ql_border_hex: #3a3f47 !global;
$_fp_ql_text_hex: #e8eaed !global;
}
$fp-ql-panel: var(--fp-card-bg, #{$_fp_ql_panel_hex});
$fp-ql-border: var(--fp-border-color, #{$_fp_ql_border_hex});
$fp-ql-text: var(--fp-text, #{$_fp_ql_text_hex});
// Container around the rich-text instructions inside the quick-look
// modal. Bordered + scrollable + readable in both light and dark modes.
.o_fp_quick_look_instructions {
max-height: 40vh;
overflow: auto;
padding: 12px 14px;
margin-bottom: 8px;
background: $fp-ql-panel;
color: $fp-ql-text;
border: 1px solid $fp-ql-border;
border-radius: 4px;
// Make sure rich-text inner elements inherit the readable colour.
p, li, span, strong, em, h1, h2, h3, h4, h5, h6 {
color: inherit;
}
ul, ol { margin-bottom: 0; }
p:last-child { margin-bottom: 0; }
}