admin/Odoo-Modules
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

fix(configurator): Process Composer dark-mode palette (Sub 3 follow-up)

Browse Source 
Process Composer was rendering a white card background on dark-mode
tenants because the SCSS relied on var(--bs-body-bg, #ffffff) — the
Bootstrap CSS variable doesn't flip reliably in Odoo 19's backend,
and the hardcoded fallback kicked in.

Rewrote with the shopfloor token pattern from CLAUDE.md: branch on
$o-webclient-color-scheme == dark at compile time, expose via CSS
custom properties (--fp-composer-card / -border / -panel / -text /
-muted), drop every --bs-* fallback for layout colours.

Cleared the ir_attachment asset cache on entech so both the backend
and web_dark bundles recompile cleanly.

fusion_plating_configurator → 19.0.12.1.0

Co-Authored-By: Claude Opus 4.7 (1M context) <noreply@anthropic.com>
This commit is contained in:
gsinghpal
2026-04-23 07:35:11 -04:00
parent 2bfabfe135
commit d0eefe6392
2 changed files with 49 additions and 8 deletions
Download Patch File Download Diff File Expand all files Collapse all files

2
fusion_plating/fusion_plating_configurator/__manifest__.py
View File

@@ -5,7 +5,7 @@
{
'name': 'Fusion Plating — Configurator',
'version': '19.0.12.0.0',
'version': '19.0.12.1.0',
'category': 'Manufacturing/Plating',
'summary': 'Quotation configurator with part catalog, coating configs, and formula-based pricing engine.',
'description': """

55
fusion_plating/fusion_plating_configurator/static/src/scss/fp_part_process_composer.scss
View File

@@ -3,16 +3,52 @@
// Part of the Fusion Plating product family.
//
// Sub 3 — Process Composer styles.
//
// Theme handling: Odoo 19 compiles this SCSS into BOTH web.assets_backend
// (bright) and web.assets_web_dark (dark). We branch at compile time on
// $o-webclient-color-scheme so the dark bundle gets distinct colours.
// Bootstrap CSS variables (--bs-body-bg etc.) don't flip reliably in
// Odoo 19's backend — hardcoded hex via CSS custom properties is the
// pattern documented in CLAUDE.md (shopfloor tokens).
$o-webclient-color-scheme: bright !default;
// ---- Token defaults (bright mode) ----
$_fp-composer-page-hex: #f3f4f6;
$_fp-composer-card-hex: #ffffff;
$_fp-composer-border-hex: #d8dadd;
$_fp-composer-panel-hex: #f5f5f5;
$_fp-composer-text-hex: #1f2328;
$_fp-composer-muted-hex: #6a737d;
@if $o-webclient-color-scheme == dark {
$_fp-composer-page-hex: #1a1d21 !global;
$_fp-composer-card-hex: #22262d !global;
$_fp-composer-border-hex: #3a3f47 !global;
$_fp-composer-panel-hex: #2a2f36 !global;
$_fp-composer-text-hex: #e6e6e6 !global;
$_fp-composer-muted-hex: #9aa0a6 !global;
}
// Expose as CSS custom properties so admins can override per-company
// without recompiling. Token names intentionally unique to this module
// to avoid collisions with shopfloor / plant-overview tokens.
$fp-composer-card: var(--fp-composer-card, $_fp-composer-card-hex);
$fp-composer-border: var(--fp-composer-border, $_fp-composer-border-hex);
$fp-composer-panel: var(--fp-composer-panel, $_fp-composer-panel-hex);
$fp-composer-text: var(--fp-composer-text, $_fp-composer-text-hex);
$fp-composer-muted: var(--fp-composer-muted, $_fp-composer-muted-hex);
.o_fp_part_composer {
padding: 16px;
max-width: 900px;
margin: 0 auto;
color: $fp-composer-text;
&_state {
padding: 32px;
text-align: center;
color: var(--bs-secondary-color, #666);
color: $fp-composer-muted;
.fa {
margin-right: 8px;
@@ -29,13 +65,14 @@
gap: 16px;
margin-bottom: 24px;
padding-bottom: 16px;
border-bottom: 1px solid var(--bs-border-color, #e0e0e0);
border-bottom: 1px solid $fp-composer-border;
}
&_title {
h2 {
margin: 0;
font-size: 20px;
color: $fp-composer-text;
}
}
@@ -45,12 +82,14 @@
gap: 12px;
margin-bottom: 24px;
padding: 16px;
background: var(--bs-tertiary-bg, #f5f5f5);
background: $fp-composer-panel;
border: 1px solid $fp-composer-border;
border-radius: 8px;
label {
margin: 0;
font-weight: 600;
color: $fp-composer-text;
}
select {
@@ -62,23 +101,25 @@
&_tree {
min-height: 300px;
padding: 24px;
background: var(--bs-body-bg, #ffffff);
background: $fp-composer-card;
color: $fp-composer-text;
border-radius: 8px;
border: 1px solid var(--bs-border-color, #d8dadd);
border: 1px solid $fp-composer-border;
}
&_hint,
&_empty {
text-align: center;
padding: 48px 16px;
color: $fp-composer-muted;
.fa {
color: var(--bs-secondary-color, #999);
color: $fp-composer-muted;
margin-bottom: 16px;
}
p {
color: var(--bs-secondary-color, #666);
color: $fp-composer-muted;
}
}
}