From 596efa0ed37026267a3814127c20c7563a880835 Mon Sep 17 00:00:00 2001 From: gsinghpal Date: Sat, 25 Apr 2026 10:30:09 -0400 Subject: [PATCH] fix(shopfloor): theme-compliant Manager Desk + kind-chip tokens MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit 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) --- .../static/src/scss/_fp_shopfloor_tokens.scss | 31 +++++++++++++++++++ .../static/src/scss/manager_dashboard.scss | 26 ++++++++++------ 2 files changed, 48 insertions(+), 9 deletions(-) diff --git a/fusion_plating/fusion_plating_shopfloor/static/src/scss/_fp_shopfloor_tokens.scss b/fusion_plating/fusion_plating_shopfloor/static/src/scss/_fp_shopfloor_tokens.scss index ad408037..695ca247 100644 --- a/fusion_plating/fusion_plating_shopfloor/static/src/scss/_fp_shopfloor_tokens.scss +++ b/fusion_plating/fusion_plating_shopfloor/static/src/scss/_fp_shopfloor_tokens.scss @@ -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 diff --git a/fusion_plating/fusion_plating_shopfloor/static/src/scss/manager_dashboard.scss b/fusion_plating/fusion_plating_shopfloor/static/src/scss/manager_dashboard.scss index 96d44a0b..3a818681 100644 --- a/fusion_plating/fusion_plating_shopfloor/static/src/scss/manager_dashboard.scss +++ b/fusion_plating/fusion_plating_shopfloor/static/src/scss/manager_dashboard.scss @@ -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; } }