From a8eacc94bc0ad92ef0889ffdbf1cd0bb5d0a3b1f Mon Sep 17 00:00:00 2001 From: gsinghpal Date: Sun, 12 Apr 2026 13:27:53 -0400 Subject: [PATCH] fusion_plating_shopfloor: replace hardcoded colors with CSS vars for dark mode (v19.0.1.0.1) Plant overview and process tree SCSS files had 90+ hardcoded hex colors that broke dark mode. Replaced all with Bootstrap/Odoo CSS custom properties (--bs-body-bg, --bs-body-color, --bs-border-color, etc.) matching the pattern already used in fusion_plating_shopfloor.scss. Co-Authored-By: Claude Opus 4.6 (1M context) --- .../static/src/scss/plant_overview.scss | 108 ++++++++++-------- .../static/src/scss/process_tree.scss | 86 ++++++++------ 2 files changed, 110 insertions(+), 84 deletions(-) diff --git a/fusion-plating/fusion_plating_shopfloor/static/src/scss/plant_overview.scss b/fusion-plating/fusion_plating_shopfloor/static/src/scss/plant_overview.scss index 3e0947b2..df5fee58 100644 --- a/fusion-plating/fusion_plating_shopfloor/static/src/scss/plant_overview.scss +++ b/fusion-plating/fusion_plating_shopfloor/static/src/scss/plant_overview.scss @@ -2,6 +2,18 @@ // Fusion Plating — Plant Overview Dashboard // Copyright 2026 Nexa Systems Inc. // License OPL-1 (Odoo Proprietary License v1.0) +// +// THEME AWARENESS +// --------------- +// All colours come from CSS custom properties (Bootstrap / Odoo tokens) so +// the dashboard renders correctly in BOTH light and dark mode. +// +// background: var(--bs-body-bg) +// surface: var(--o-view-background-color) +// foreground: var(--bs-body-color) +// muted text: var(--bs-secondary-color) +// border: var(--bs-border-color) +// primary: var(--o-action) // ============================================================================= .o_fp_plant_overview { @@ -9,7 +21,7 @@ flex-direction: column; height: 100%; min-height: 0; - background: #f8f9fa; + background: var(--o-view-background-color, var(--bs-body-bg)); padding: 0; } @@ -22,9 +34,9 @@ flex-wrap: wrap; gap: 12px; padding: 16px 20px; - background: #ffffff; - border-bottom: 1px solid #dee2e6; - box-shadow: 0 1px 3px rgba(0, 0, 0, 0.06); + background: var(--bs-body-bg); + border-bottom: 1px solid var(--bs-border-color); + box-shadow: 0 1px 3px color-mix(in srgb, var(--bs-body-color) 6%, transparent); .o_fp_po_header_left { display: flex; @@ -35,7 +47,7 @@ margin: 0; font-size: 1.3rem; font-weight: 700; - color: #212529; + color: var(--bs-body-color); } .o_fp_po_refresh_ts { @@ -59,22 +71,24 @@ .o_fp_po_search_icon { position: absolute; left: 10px; - color: #6c757d; + color: var(--bs-secondary-color); pointer-events: none; } .o_fp_po_search_input { padding: 6px 32px 6px 32px; - border: 1px solid #ced4da; + border: 1px solid var(--bs-border-color); border-radius: 6px; font-size: 0.875rem; width: 260px; outline: none; transition: border-color 0.15s; + background-color: var(--bs-body-bg); + color: var(--bs-body-color); &:focus { - border-color: #86b7fe; - box-shadow: 0 0 0 0.2rem rgba(13, 110, 253, 0.15); + border-color: var(--o-action); + box-shadow: 0 0 0 0.2rem color-mix(in srgb, var(--o-action) 15%, transparent); } } @@ -83,12 +97,12 @@ right: 6px; background: none; border: none; - color: #6c757d; + color: var(--bs-secondary-color); cursor: pointer; padding: 2px 6px; &:hover { - color: #212529; + color: var(--bs-body-color); } } } @@ -123,9 +137,9 @@ max-width: 320px; display: flex; flex-direction: column; - background: #ffffff; + background: var(--bs-body-bg); border-radius: 10px; - box-shadow: 0 1px 4px rgba(0, 0, 0, 0.08); + box-shadow: 0 1px 4px color-mix(in srgb, var(--bs-body-color) 8%, transparent); max-height: calc(100vh - 140px); } @@ -134,21 +148,21 @@ align-items: center; justify-content: space-between; padding: 12px 14px; - border-bottom: 2px solid #e9ecef; - background: #f8f9fa; + border-bottom: 2px solid var(--bs-border-color); + background: var(--bs-tertiary-bg); border-radius: 10px 10px 0 0; .o_fp_po_col_name { font-weight: 700; font-size: 0.9rem; - color: #343a40; + color: var(--bs-body-color); text-transform: uppercase; letter-spacing: 0.3px; } .o_fp_po_col_count { - background: #6c757d; - color: #fff; + background: var(--bs-secondary-bg); + color: var(--bs-body-color); font-size: 0.75rem; min-width: 24px; text-align: center; @@ -164,8 +178,8 @@ // ---- Card ------------------------------------------------------------------- .o_fp_po_card { - background: #ffffff; - border: 1px solid #e9ecef; + background: var(--bs-body-bg); + border: 1px solid var(--bs-border-color); border-radius: 8px; padding: 10px 12px; margin-bottom: 8px; @@ -173,7 +187,7 @@ transition: box-shadow 0.15s, transform 0.1s; &:hover { - box-shadow: 0 2px 8px rgba(0, 0, 0, 0.12); + box-shadow: 0 2px 8px color-mix(in srgb, var(--bs-body-color) 12%, transparent); transform: translateY(-1px); } @@ -183,17 +197,17 @@ // State variants &.o_fp_card_progress { - border-left: 4px solid #fd7e14; + border-left: 4px solid var(--bs-warning); } &.o_fp_card_ready { - border-left: 4px solid #0d6efd; + border-left: 4px solid var(--bs-primary); } &.o_fp_card_done { - border-left: 4px solid #198754; + border-left: 4px solid var(--bs-success); opacity: 0.75; } &.o_fp_card_pending { - border-left: 4px solid #ffc107; + border-left: 4px solid var(--bs-warning); } } @@ -218,12 +232,12 @@ width: 32px; height: 32px; border-radius: 4px; - background: #e9ecef; + background: var(--bs-tertiary-bg); display: flex; align-items: center; justify-content: center; flex-shrink: 0; - color: #adb5bd; + color: var(--bs-secondary-color); font-size: 14px; } @@ -231,7 +245,7 @@ flex: 1; min-width: 0; font-size: 0.9rem; - color: #212529; + color: var(--bs-body-color); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; @@ -241,8 +255,8 @@ width: 24px; height: 24px; border-radius: 50%; - background: #17a2b8; - color: white; + background: var(--bs-info); + color: #fff; font-size: 0.7rem; font-weight: bold; display: flex; @@ -254,13 +268,13 @@ // ---- Priority card borders --------------------------------------------------- .o_fp_po_card_hot { - border-left: 4px solid #dc3545 !important; - background: #fff5f5; + border-left: 4px solid var(--bs-danger) !important; + background: color-mix(in srgb, var(--bs-danger) 8%, var(--bs-body-bg)); } .o_fp_po_card_urgent { - border-left: 4px solid #fd7e14 !important; - background: #fff8f0; + border-left: 4px solid var(--bs-warning) !important; + background: color-mix(in srgb, var(--bs-warning) 8%, var(--bs-body-bg)); } // ---- Product name and step display ------------------------------------------- @@ -276,12 +290,12 @@ .o_fp_po_card_customer { font-size: 0.9rem; margin-bottom: 2px; - color: #212529; + color: var(--bs-body-color); } .o_fp_po_card_refs { font-size: 0.8rem; - color: #6c757d; + color: var(--bs-secondary-color); margin-bottom: 6px; } @@ -293,7 +307,7 @@ .o_fp_po_parts_bar { height: 6px; - background: #e9ecef; + background: var(--bs-tertiary-bg); border-radius: 3px; overflow: hidden; margin-bottom: 2px; @@ -301,14 +315,14 @@ .o_fp_po_parts_fill { height: 100%; - background: #fd7e14; + background: var(--bs-warning); border-radius: 3px; transition: width 0.3s ease; } .o_fp_po_parts_label { font-size: 0.75rem; - color: #495057; + color: var(--bs-secondary-color); } .o_fp_po_card_last { @@ -343,28 +357,28 @@ line-height: 1.4; &.o_fp_tag_hot { - background: #dc3545; + background: var(--bs-danger); color: #fff; } &.o_fp_tag_priority { - background: #198754; + background: var(--bs-success); color: #fff; } &.o_fp_tag_attention { - background: #ffc107; - color: #212529; + background: var(--bs-warning); + color: var(--bs-body-color); } &.o_fp_tag_default { - background: #e9ecef; - color: #495057; + background: var(--bs-tertiary-bg); + color: var(--bs-secondary-color); } } .o_fp_po_card_date { font-size: 0.75rem; font-weight: 600; - color: #495057; - background: #e9ecef; + color: var(--bs-secondary-color); + background: var(--bs-tertiary-bg); padding: 1px 6px; border-radius: 4px; white-space: nowrap; diff --git a/fusion-plating/fusion_plating_shopfloor/static/src/scss/process_tree.scss b/fusion-plating/fusion_plating_shopfloor/static/src/scss/process_tree.scss index eb88291c..a890b4a5 100644 --- a/fusion-plating/fusion_plating_shopfloor/static/src/scss/process_tree.scss +++ b/fusion-plating/fusion_plating_shopfloor/static/src/scss/process_tree.scss @@ -2,6 +2,18 @@ // Fusion Plating — Process Tree View // Copyright 2026 Nexa Systems Inc. // License OPL-1 (Odoo Proprietary License v1.0) +// +// THEME AWARENESS +// --------------- +// All colours come from CSS custom properties (Bootstrap / Odoo tokens) so +// the tree view renders correctly in BOTH light and dark mode. +// +// background: var(--bs-body-bg) +// surface: var(--o-view-background-color) +// foreground: var(--bs-body-color) +// muted text: var(--bs-secondary-color) +// border: var(--bs-border-color) +// primary: var(--o-action) // ============================================================================= .o_fp_process_tree { @@ -9,7 +21,7 @@ flex-direction: column; height: 100%; min-height: 0; - background: #f8f9fa; + background: var(--o-view-background-color, var(--bs-body-bg)); padding: 0; } @@ -22,9 +34,9 @@ flex-wrap: wrap; gap: 12px; padding: 16px 24px; - background: #ffffff; - border-bottom: 1px solid #dee2e6; - box-shadow: 0 1px 3px rgba(0, 0, 0, 0.06); + background: var(--bs-body-bg); + border-bottom: 1px solid var(--bs-border-color); + box-shadow: 0 1px 3px color-mix(in srgb, var(--bs-body-color) 6%, transparent); .o_fp_pt_header_left { display: flex; @@ -34,7 +46,7 @@ .o_fp_pt_title { font-size: 1.2rem; font-weight: 700; - color: #212529; + color: var(--bs-body-color); } .o_fp_pt_subtitle { @@ -65,15 +77,15 @@ .o_fp_pt_connector { width: 3px; height: 20px; - background: #adb5bd; + background: var(--bs-border-color); margin-left: 28px; } // ---- Node box --------------------------------------------------------------- .o_fp_pt_node { - background: #2b3035; - color: #f8f9fa; + background: var(--bs-secondary-bg); + color: var(--bs-body-color); border-radius: 10px; padding: 14px 18px; max-width: 440px; @@ -82,26 +94,26 @@ position: relative; &:hover { - box-shadow: 0 3px 12px rgba(0, 0, 0, 0.25); + box-shadow: 0 3px 12px color-mix(in srgb, var(--bs-body-color) 15%, transparent); transform: translateX(2px); } // State colour accents (left border) &.o_fp_tree_state_done { - border-left: 5px solid #198754; + border-left: 5px solid var(--bs-success); } &.o_fp_tree_state_progress { - border-left: 5px solid #fd7e14; + border-left: 5px solid var(--bs-warning); } &.o_fp_tree_state_ready { - border-left: 5px solid #0d6efd; + border-left: 5px solid var(--bs-primary); } &.o_fp_tree_state_cancel { - border-left: 5px solid #6c757d; + border-left: 5px solid var(--bs-secondary); opacity: 0.6; } &.o_fp_tree_state_pending { - border-left: 5px solid #adb5bd; + border-left: 5px solid var(--bs-border-color); } } @@ -116,7 +128,7 @@ } .o_fp_pt_node_seq { - color: #adb5bd; + color: var(--bs-secondary-color); font-weight: 400; margin-right: 4px; } @@ -124,19 +136,19 @@ .o_fp_pt_toggle_btn { background: none; border: none; - color: #adb5bd; + color: var(--bs-secondary-color); cursor: pointer; padding: 2px 6px; font-size: 0.85rem; &:hover { - color: #fff; + color: var(--bs-body-color); } } .o_fp_pt_node_wc { font-size: 0.8rem; - color: #adb5bd !important; + color: var(--bs-secondary-color) !important; margin-top: 2px; } @@ -150,24 +162,24 @@ } .o_fp_tree_state_done { - background: #198754 !important; + background: var(--bs-success) !important; color: #fff !important; } .o_fp_tree_state_progress { - background: #fd7e14 !important; + background: var(--bs-warning) !important; color: #fff !important; } .o_fp_tree_state_ready { - background: #0d6efd !important; + background: var(--bs-primary) !important; color: #fff !important; } .o_fp_tree_state_cancel { - background: #6c757d !important; + background: var(--bs-secondary) !important; color: #fff !important; } .o_fp_tree_state_pending { - background: #495057 !important; - color: #dee2e6 !important; + background: var(--bs-tertiary-bg) !important; + color: var(--bs-secondary-color) !important; } } @@ -175,7 +187,7 @@ .o_fp_pt_bar { height: 8px; - background: #495057; + background: var(--bs-tertiary-bg); border-radius: 4px; overflow: hidden; @@ -190,26 +202,26 @@ } &.o_fp_tree_progress_active .o_fp_pt_bar_fill { - background: #fd7e14; + background: var(--bs-warning); } &.o_fp_tree_progress_done .o_fp_pt_bar_fill { - background: #198754; + background: var(--bs-success); } &.o_fp_tree_progress_empty .o_fp_pt_bar_fill { - background: #6c757d; + background: var(--bs-secondary); } } .o_fp_pt_bar_label { font-size: 0.75rem; - color: #adb5bd; + color: var(--bs-secondary-color); margin-top: 2px; display: inline-block; } .o_fp_pt_node_duration { font-size: 0.75rem; - color: #adb5bd !important; + color: var(--bs-secondary-color) !important; } // ---- Children (sub-state nodes) --------------------------------------------- @@ -222,29 +234,29 @@ .o_fp_pt_child_connector { width: 3px; height: 12px; - background: #6c757d; + background: var(--bs-border-color); margin-left: 20px; } .o_fp_pt_child_node { - background: #3a4046; - color: #dee2e6; + background: var(--bs-tertiary-bg); + color: var(--bs-body-color); border-radius: 8px; padding: 10px 14px; max-width: 360px; margin-bottom: 0; &.o_fp_tree_state_progress { - border-left: 4px solid #fd7e14; + border-left: 4px solid var(--bs-warning); } &.o_fp_tree_state_ready { - border-left: 4px solid #0d6efd; + border-left: 4px solid var(--bs-primary); } &.o_fp_tree_state_done { - border-left: 4px solid #198754; + border-left: 4px solid var(--bs-success); } &.o_fp_tree_state_pending { - border-left: 4px solid #6c757d; + border-left: 4px solid var(--bs-secondary); } }