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

fix(shopfloor): theme-compliant Manager Desk + kind-chip tokens

Browse Source 
The Manager Desk SCSS still had hardcoded chip colors (wet/bake/
mask/rack/inspect) and var(--bs-body-color) usage that CLAUDE.md
explicitly forbids. In dark mode these rendered as low-contrast
text on translucent backgrounds.

Fixes:
- Added 6 kind-chip tokens to _fp_shopfloor_tokens.scss
  ($fp-kind-wet/bake/mask/rack/inspect/other) with explicit hex
  values for both light and dark bundles via the existing
  $o-webclient-color-scheme branch.
- manager_dashboard.scss: kind chips reference the new tokens via
  color-mix() for translucent backgrounds. var(--bs-body-color)
  on the expanded card body replaced with $fp-card-soft.
- Annotated the .btn-primary white-text rule as intentional (the
  $fp-accent surface beneath it is the same brand purple in both
  bundles, so white is correct in both themes).

plant_overview.scss had no kind-chip block — already token-compliant.
manager_dashboard.xml had no inline styles or theme-leaky utility
classes — text-muted/text-success resolve through Bootstrap which
flips with the bundle.

Both light (3deab56) and dark (28de524) asset bundles compile
cleanly with distinct hashes.

Co-Authored-By: Claude Opus 4.7 (1M context) <noreply@anthropic.com>
This commit is contained in:
gsinghpal
2026-04-25 10:30:09 -04:00
parent 009a0b5e10
commit 596efa0ed3
2 changed files with 48 additions and 9 deletions
Download Patch File Download Diff File Expand all files Collapse all files

31
fusion_plating/fusion_plating_shopfloor/static/src/scss/_fp_shopfloor_tokens.scss
View File

@@ -86,6 +86,37 @@ $fp-ink-faint : var(--fp-ink-faint, $_fp-ink-faint-hex);
// Action colour — Odoo's primary. Same in both bundles (brand purple).
$fp-accent : var(--o-action, #714B67);
// ---------- Kind chip colours (domain semantic) ------------------------------
// Used by Manager Desk + any place we surface WO kind (wet / bake / mask /
// rack / inspect / other). Light theme: solid hue text on translucent
// background of the same hue. Dark theme: lightened hue so the text stays
// legible against $fp-card / $fp-card-soft surfaces. Background translucency
// is generated at the call site via color-mix() so the hue stays linked.
$_fp-kind-wet-hex : #0d6efd; // blue
$_fp-kind-bake-hex : #dc3545; // red
$_fp-kind-mask-hex : #b18307; // amber (darker than warning yellow)
$_fp-kind-rack-hex : #495057; // grey
$_fp-kind-inspect-hex : #198754; // green
$_fp-kind-other-hex : #6c757d; // muted grey
@if $o-webclient-color-scheme == dark {
// Lighten chip text for legibility on dark backgrounds
$_fp-kind-wet-hex : #6ea8fe !global;
$_fp-kind-bake-hex : #ea868f !global;
$_fp-kind-mask-hex : #ffd866 !global;
$_fp-kind-rack-hex : #adb5bd !global;
$_fp-kind-inspect-hex : #75b798 !global;
$_fp-kind-other-hex : #adb5bd !global;
}
$fp-kind-wet : var(--fp-kind-wet, $_fp-kind-wet-hex);
$fp-kind-bake : var(--fp-kind-bake, $_fp-kind-bake-hex);
$fp-kind-mask : var(--fp-kind-mask, $_fp-kind-mask-hex);
$fp-kind-rack : var(--fp-kind-rack, $_fp-kind-rack-hex);
$fp-kind-inspect : var(--fp-kind-inspect, $_fp-kind-inspect-hex);
$fp-kind-other : var(--fp-kind-other, $_fp-kind-other-hex);
// ---------- Elevation — explicit rgba shadows --------------------------------
// Explicit rgba values (not color-mix) so they render identically across
// browsers and themes. In dark mode the shadows still work against the

26
fusion_plating/fusion_plating_shopfloor/static/src/scss/manager_dashboard.scss
View File

@@ -157,14 +157,17 @@
&:active { transform: scale(0.97); }
}
// Primary — filled with the accent, white text. Force specificity
// high enough to beat Bootstrap's .btn-primary which loads later.
// Primary — filled with the accent (brand purple), white text. White
// is correct in BOTH light and dark bundles because $fp-accent is
// the same hue in both — it doesn't flip with theme. Force
// specificity high enough to beat Bootstrap's .btn-primary which
// loads later.
.btn.btn-primary,
.btn.btn-primary:focus,
.btn.btn-primary:active {
background-color: $fp-accent !important;
border-color: $fp-accent !important;
color: #ffffff !important;
color: #ffffff !important; // intentional: filled accent button
@include fp-hover-only {
&:hover {
@@ -430,7 +433,9 @@
.o_fp_mgr_card_body {
padding: $fp-space-3 $fp-space-4 $fp-space-4;
display: flex; flex-direction: column; gap: $fp-space-2;
background-color: color-mix(in srgb, var(--bs-body-color) 3%, transparent);
// Subtle inset against the card surface — uses the soft surface
// token so it tints correctly in both light and dark bundles.
background-color: $fp-card-soft;
}
@@ -582,11 +587,14 @@
letter-spacing: normal;
font-weight: $fp-weight-bold;
}
&.o_fp_chip_kind_wet { background-color: rgba(13, 110, 253, .15); color: #0d6efd; }
&.o_fp_chip_kind_bake { background-color: rgba(220, 53, 69, .15); color: #dc3545; }
&.o_fp_chip_kind_mask { background-color: rgba(255, 193, 7, .20); color: #997404; }
&.o_fp_chip_kind_rack { background-color: rgba(108, 117, 125, .15); color: #495057; }
&.o_fp_chip_kind_inspect { background-color: rgba(25, 135, 84, .15); color: #198754; }
// Kind chip hues live in _fp_shopfloor_tokens.scss with both light
// and dark variants. Background translucency is computed off the
// hue so dark mode lifts the text without losing the colour code.
&.o_fp_chip_kind_wet { background-color: color-mix(in srgb, #{$fp-kind-wet} 15%, transparent); color: $fp-kind-wet; }
&.o_fp_chip_kind_bake { background-color: color-mix(in srgb, #{$fp-kind-bake} 15%, transparent); color: $fp-kind-bake; }
&.o_fp_chip_kind_mask { background-color: color-mix(in srgb, #{$fp-kind-mask} 20%, transparent); color: $fp-kind-mask; }
&.o_fp_chip_kind_rack { background-color: color-mix(in srgb, #{$fp-kind-rack} 15%, transparent); color: $fp-kind-rack; }
&.o_fp_chip_kind_inspect { background-color: color-mix(in srgb, #{$fp-kind-inspect} 15%, transparent); color: $fp-kind-inspect; }
&.o_fp_chip_kind_other { background-color: $fp-card-soft; color: $fp-ink-mute; }
}