From 987b33dbb42111a5c5230470202427bc2fc07687 Mon Sep 17 00:00:00 2001
From: Blomios <blomios@gmail.com>
Date: Sat, 12 Sep 2026 16:22:13 +0200
Subject: [PATCH] =?UTF-8?q?fix(frontend):=20renforce=20la=20couleur=20proj?=
 =?UTF-8?q?et=20dans=20les=20onglets=20non=20s=C3=A9lectionn=C3=A9s=20?=
 =?UTF-8?q?=E2=80=94=20teinte=20inactive=205%=20(+25%=20vs=204%),=20hover?=
 =?UTF-8?q?=20th=C3=A9matis=C3=A9,=20actif=20pr=C3=A9serv=C3=A9=20?=
 =?UTF-8?q?=E2=80=94=20#339=20(QA=20verte)?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 frontend/src/shared/ui/Tabs.tsx    | 38 +++++++++++++++++++++---------
 frontend/src/shared/ui/ui.test.tsx | 29 +++++++++++++++++++++++
 2 files changed, 56 insertions(+), 11 deletions(-)

diff --git a/frontend/src/shared/ui/Tabs.tsx b/frontend/src/shared/ui/Tabs.tsx
index 902971b0..3615d202 100644
--- a/frontend/src/shared/ui/Tabs.tsx
+++ b/frontend/src/shared/ui/Tabs.tsx
@@ -7,9 +7,15 @@
 
 import { cn } from "../lib/cn";
 import { IconButton } from "./IconButton";
-import type { ReactNode } from "react";
+import type { CSSProperties, ReactNode } from "react";
 import { useI18n } from "@/i18n";
 
+interface ThemedTabStyle extends CSSProperties {
+  "--tab-theme-active-bg": string;
+  "--tab-theme-inactive-bg": string;
+  "--tab-theme-hover-bg": string;
+}
+
 export interface TabItem {
   /** Stable id, returned by `onSelect`/`onClose`. */
   id: string;
@@ -44,22 +50,32 @@ export function Tabs({ items, value, onSelect, onClose, className }: TabsProps)
     >
       {items.map((tab) => {
         const active = tab.id === value;
+        const themedStyle: ThemedTabStyle | undefined = tab.themeColor
+          ? {
+              "--tab-theme-active-bg": `color-mix(in srgb, var(--color-raised) 90%, ${tab.themeColor})`,
+              // 5% project colour is 25% stronger than the previous 4% tint.
+              "--tab-theme-inactive-bg": `color-mix(in srgb, var(--color-raised) 95%, ${tab.themeColor})`,
+              "--tab-theme-hover-bg": `color-mix(in srgb, var(--color-raised) 93%, ${tab.themeColor})`,
+              ...(active ? { borderColor: tab.themeAccent ?? tab.themeColor } : {}),
+            }
+          : undefined;
         return (
           <div
             key={tab.id}
-            style={
-              tab.themeColor
-                ? {
-                    backgroundColor: `color-mix(in srgb, var(--color-raised) ${active ? 90 : 96}%, ${tab.themeColor})`,
-                    ...(active ? { borderColor: tab.themeAccent ?? tab.themeColor } : {}),
-                  }
-                : undefined
-            }
+            style={themedStyle}
             className={cn(
               "group flex items-center gap-1 rounded-md border px-1 transition-colors",
               active
-                ? "border-border-strong bg-raised"
-                : "border-transparent hover:bg-raised",
+                ? cn(
+                    "border-border-strong",
+                    tab.themeColor ? "bg-[var(--tab-theme-active-bg)]" : "bg-raised",
+                  )
+                : cn(
+                    "border-transparent",
+                    tab.themeColor
+                      ? "bg-[var(--tab-theme-inactive-bg)] hover:bg-[var(--tab-theme-hover-bg)]"
+                      : "hover:bg-raised",
+                  ),
             )}
           >
             <button
diff --git a/frontend/src/shared/ui/ui.test.tsx b/frontend/src/shared/ui/ui.test.tsx
index 3f799d78..923cb159 100644
--- a/frontend/src/shared/ui/ui.test.tsx
+++ b/frontend/src/shared/ui/ui.test.tsx
@@ -115,6 +115,35 @@ describe("Tabs", () => {
     fireEvent.click(screen.getByRole("button", { name: "fermer beta" }));
     expect(onClose).toHaveBeenCalledWith("b");
   });
+
+  it("keeps themed inactive, hover and active backgrounds visually ordered (#339)", () => {
+    render(
+      <Tabs
+        items={[
+          { id: "a", label: "alpha", themeColor: "#AA3366", themeAccent: "#CC5588" },
+          { id: "b", label: "beta", themeColor: "#22AA66", themeAccent: "#44CC88" },
+        ]}
+        value="a"
+        onSelect={() => {}}
+      />,
+    );
+
+    const active = screen.getByRole("tab", { name: "alpha" }).parentElement!;
+    const inactive = screen.getByRole("tab", { name: "beta" }).parentElement!;
+
+    expect(active.style.getPropertyValue("--tab-theme-active-bg"))
+      .toBe("color-mix(in srgb, var(--color-raised) 90%, #AA3366)");
+    expect(active.className).toContain("bg-[var(--tab-theme-active-bg)]");
+    expect(active.style.borderColor).toBe("rgb(204, 85, 136)");
+
+    expect(inactive.style.getPropertyValue("--tab-theme-inactive-bg"))
+      .toBe("color-mix(in srgb, var(--color-raised) 95%, #22AA66)");
+    expect(inactive.style.getPropertyValue("--tab-theme-hover-bg"))
+      .toBe("color-mix(in srgb, var(--color-raised) 93%, #22AA66)");
+    expect(inactive.className).toContain("bg-[var(--tab-theme-inactive-bg)]");
+    expect(inactive.className).toContain("hover:bg-[var(--tab-theme-hover-bg)]");
+    expect(inactive.style.borderColor).toBe("");
+  });
 });
 
 describe("SmallDropdown", () => {