From e3140817a35fce778ebe0bb7753b745a31c68f91 Mon Sep 17 00:00:00 2001 From: GitHub Copilot Date: Thu, 27 Aug 2026 19:19:03 +0200 Subject: [PATCH] [FIX] website_sale_aplicoop: restore the tag colours and filter states MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit Tags rendered grey everywhere and the selected/dimmed filter states were invisible: Odoo 18 paints every .badge from --background-color / --color / --bg-solid and marks all three declarations !important (website/static/src/scss/website.scss, "// Badges"), so the plain background-color / color / border declarations here never landed, however specific the selector. Set those three custom properties instead. Same origin as the notification fix: before 5de7573 realtime_search.js wrote the colours as inline styles with setProperty(..., "important"), which outranks a stylesheet !important. Moving them into a class dropped that priority, and the core rule took over. Note this does not cover the --badge-padding-*/--badge-font-* values in .badge-km, which Bootstrap's own .badge rule still wins on source order — the badges keep Bootstrap's default metrics, as they do today. Co-Authored-By: Claude Sonnet 5 --- .../src/css/components/product-card.css | 12 +++++--- .../static/src/css/components/tag-filter.css | 28 ++++++++++++------- 2 files changed, 26 insertions(+), 14 deletions(-) diff --git a/website_sale_aplicoop/static/src/css/components/product-card.css b/website_sale_aplicoop/static/src/css/components/product-card.css index 6c648aa..5ec9e51 100644 --- a/website_sale_aplicoop/static/src/css/components/product-card.css +++ b/website_sale_aplicoop/static/src/css/components/product-card.css @@ -193,16 +193,20 @@ } /* The per-tag colour is a record value, so it arrives as the --ac-tag-color - custom property set inline on the element (see eskaera_shop_products). */ + custom property set inline on the element (see eskaera_shop_products). + --background-color / --color / --bg-solid, not background-color / color / + border: Odoo 18 paints every .badge from those three and marks them + !important, so a direct declaration here never lands. See the header of + components/tag-filter.css for the full story. */ .badge-km { --badge-padding-x: var(--ac-space-2xs); --badge-padding-y: var(--ac-space-3xs); --badge-font-size: var(--ac-text-2xs); --badge-font-weight: var(--ac-weight-semibold); - --badge-color: var(--ac-text-on-fill); --badge-border-radius: var(--ac-radius-sm); - border: 1px solid var(--ac-tag-color, var(--ac-color-primary-strong)); - background-color: var(--ac-tag-color, var(--ac-color-primary-strong)); + --background-color: var(--ac-tag-color, var(--ac-color-primary-strong)); + --bg-solid: var(--ac-tag-color, var(--ac-color-primary-strong)); + --color: var(--ac-text-on-fill); white-space: nowrap; } diff --git a/website_sale_aplicoop/static/src/css/components/tag-filter.css b/website_sale_aplicoop/static/src/css/components/tag-filter.css index 839200b..4441314 100644 --- a/website_sale_aplicoop/static/src/css/components/tag-filter.css +++ b/website_sale_aplicoop/static/src/css/components/tag-filter.css @@ -16,6 +16,14 @@ * these classes and aria-pressed; the appearance lives here. * * The per-tag colour arrives as --ac-tag-color, set inline from the record. + * + * Colour is set through --background-color / --color / --bg-solid, NOT through + * background-color / color / border. Odoo 18 paints every .badge from those + * three custom properties and marks all three declarations !important + * (website/static/src/scss/website.scss, "// Badges"), so a plain + * background-color here loses no matter how specific the selector is — which + * is what left every tag grey and made the selected/dimmed states invisible. + * The !important the old JS wrote inline was what used to win that fight. */ .tag-filter-badges { @@ -28,17 +36,17 @@ } .tag-filter-badge { + --background-color: var(--ac-tag-color, var(--ac-color-secondary)); + --bg-solid: var(--ac-tag-color, var(--ac-color-secondary)); + --color: var(--ac-text-on-fill); display: inline-flex; align-items: center; /* 24px is the AA floor (WCAG 2.2 §2.5.8); coarse pointers get 44 below. */ min-height: 1.5rem; padding: var(--ac-space-sm) var(--ac-space-xs); - border: 1px solid var(--ac-tag-color, var(--ac-color-secondary)); border-radius: var(--ac-radius-sm); - background-color: var(--ac-tag-color, var(--ac-color-secondary)); font-size: var(--ac-text-sm); font-weight: var(--ac-weight-medium); - color: var(--ac-text-on-fill); white-space: nowrap; cursor: pointer; user-select: none; @@ -51,22 +59,22 @@ unprefixed, so that lookup always landed on its hardcoded fallback. */ .tag-filter-badge.tag-use-theme-color, .badge-km.tag-use-theme-color { - border-color: var(--ac-color-secondary); - background-color: var(--ac-color-secondary); - color: var(--ac-text-on-fill); + --background-color: var(--ac-color-secondary); + --bg-solid: var(--ac-color-secondary); + --color: var(--ac-text-on-fill); } /* Active filter: the strong primary, which also carries white text at 7.04:1. */ .tag-filter-badge.is-selected { - border-color: var(--ac-color-primary-strong); - background-color: var(--ac-color-primary-strong); + --background-color: var(--ac-color-primary-strong); + --bg-solid: var(--ac-color-primary-strong); box-shadow: var(--ac-shadow-sm); } /* Not part of the current filter while others are. */ .tag-filter-badge.is-dimmed { - border-color: var(--ac-color-secondary); - background-color: var(--ac-color-secondary); + --background-color: var(--ac-color-secondary); + --bg-solid: var(--ac-color-secondary); } .tag-filter-badge .tag-count {