From e3140817a35fce778ebe0bb7753b745a31c68f91 Mon Sep 17 00:00:00 2001 From: GitHub Copilot Date: Thu, 27 Aug 2026 19:19:03 +0200 Subject: [PATCH 1/2] [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 { From 512dd9f00d2cfef5f63b3cadb411ba6fbcd245a2 Mon Sep 17 00:00:00 2001 From: GitHub Copilot Date: Thu, 27 Aug 2026 19:21:42 +0200 Subject: [PATCH 2/2] [FIX] website_sale_aplicoop: restore the compact metrics on product tags MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit .badge-km seeds --badge-padding-*, --badge-font-* and --badge-border-radius, but so does Bootstrap's own .badge rule, and this file is @imported — which the spec hoists above the rest of the bundle, so at equal specificity Bootstrap always came later and won. The tags rendered at Bootstrap's default metrics instead of the compact ones written here. Qualify the selector as .badge.badge-km (0,2,0). Measured on the card: 7.8/4.2px padding, 12px, 4px radius -> 4/2px, 11px, --ac-radius-sm, the values the rule asks for. The colour half needs no qualifier and keeps its own selector reach: Odoo only reads --background-color/--color/--bg-solid, it never sets them. Co-Authored-By: Claude Sonnet 5 --- .../static/src/css/components/product-card.css | 8 +++++++- 1 file changed, 7 insertions(+), 1 deletion(-) 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 5ec9e51..ae06318 100644 --- a/website_sale_aplicoop/static/src/css/components/product-card.css +++ b/website_sale_aplicoop/static/src/css/components/product-card.css @@ -198,7 +198,13 @@ 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 { +/* The `.badge` qualifier is load-bearing for the --badge-* half: Bootstrap's + own .badge rule seeds those same custom properties, and this file is + @imported, so at equal specificity Bootstrap comes later and wins — the + compact metrics below never applied. .badge.badge-km (0,2,0) settles it. + The --background-color/--color/--bg-solid half needs no qualifier: Odoo + only reads those, it never sets them. */ +.badge.badge-km { --badge-padding-x: var(--ac-space-2xs); --badge-padding-y: var(--ac-space-3xs); --badge-font-size: var(--ac-text-2xs);