From bccfa425242575b776d30fbd388e88ab81e9831c Mon Sep 17 00:00:00 2001
From: Bruno Charest <bruno.charest@gmail.com>
Date: Mon, 20 Apr 2026 20:10:09 -0400
Subject: [PATCH] =?UTF-8?q?feat:=20unifier=20couleur=20tiles=20avec=20head?=
 =?UTF-8?q?er=20banner=20en=20utilisant=20--header-bg=20au=20lieu=20de=20t?=
 =?UTF-8?q?ints=20primary=20progressifs,=20appliquer=20--tile-text=20(--he?=
 =?UTF-8?q?ader-text/--on-primary)=20sur=20tous=20=C3=A9l=C3=A9ments=20til?=
 =?UTF-8?q?es=20(title/url/description/meta/actions/tags)=20pour=20contras?=
 =?UTF-8?q?te=20optimal=20contre=20background=20plein=20primary,=20simplif?=
 =?UTF-8?q?ier=20tokens=20--tile-*=20(bg/hover/border/shadow=20identiques?=
 =?UTF-8?q?=20light/dark=20modes),=20remplacer=20color-mix()=20complexes?=
 =?UTF-8?q?=20par=20--header-bg=20direct=20+=20darken=2020%/40%=20hover/bo?=
 =?UTF-8?q?rder,=20et=20styler=20tag=20pills=20avec=20rgba(0,0,0,0.25)=20b?=
 =?UTF-8?q?ackground?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 shaarli-pro/css/style.css | 69 +++++++++++++++++++++++----------------
 1 file changed, 41 insertions(+), 28 deletions(-)

diff --git a/shaarli-pro/css/style.css b/shaarli-pro/css/style.css
index abe83a8..1c27d4f 100644
--- a/shaarli-pro/css/style.css
+++ b/shaarli-pro/css/style.css
@@ -4602,35 +4602,19 @@ table {
    tiles using --surface-variant and reinforce borders so
    each theme provides visible tile contrast.
    ========================================================= */
-:root {
-    --tile-bg: var(--bg-card);
-    --tile-bg-hover: var(--bg-card-hover);
-    --tile-border: var(--border);
-    --tile-shadow: var(--shadow-sm);
-    --tile-shadow-hover: var(--shadow-md);
-}
-
-[data-theme="dark"] {
-    /* Strong primary-color tint so each theme (DEFAULT, GITHUB,
-       NAVY_ELEGANCE, DRACULA, ...) is clearly distinguishable on tiles
-       and page backgrounds. Dark themes share near-identical navy/charcoal
-       neutrals, so the only way to make them visually distinct is to
-       infuse a noticeable amount of --primary into surfaces. */
-    --tile-bg: color-mix(in srgb, var(--surface-variant, var(--bg-card)) 72%, var(--primary) 28%);
-    --tile-bg-hover: color-mix(in srgb, var(--surface-variant, var(--bg-card)) 55%, var(--primary) 45%);
-    --tile-border: color-mix(in srgb, var(--outline-variant, var(--border)) 40%, var(--primary) 60%);
-    --tile-shadow: 0 1px 2px rgba(0, 0, 0, 0.45), 0 0 0 1px color-mix(in srgb, var(--primary) 18%, transparent);
-    --tile-shadow-hover: 0 10px 24px -4px color-mix(in srgb, var(--primary) 35%, rgba(0, 0, 0, 0.55));
-    --tile-accent: var(--primary);
-}
-
+/* Tiles use the SAME color as the main header (BOOKMARKS banner).
+   --header-bg is defined per theme and equals --primary for most themes,
+   so tiles now fully adopt the theme's signature color. */
+:root,
+[data-theme="dark"],
 [data-theme="light"] {
-    --tile-bg: color-mix(in srgb, var(--bg-card) 86%, var(--primary) 14%);
-    --tile-bg-hover: color-mix(in srgb, var(--bg-card) 72%, var(--primary) 28%);
-    --tile-border: color-mix(in srgb, var(--border) 45%, var(--primary) 55%);
-    --tile-shadow: var(--shadow-sm);
-    --tile-shadow-hover: var(--shadow-md);
-    --tile-accent: var(--primary);
+    --tile-bg: var(--header-bg, var(--primary));
+    --tile-bg-hover: color-mix(in srgb, var(--header-bg, var(--primary)) 80%, #000 20%);
+    --tile-border: color-mix(in srgb, var(--header-bg, var(--primary)) 60%, #000 40%);
+    --tile-text: var(--header-text, var(--on-primary, #fff));
+    --tile-shadow: 0 1px 2px rgba(0, 0, 0, 0.35);
+    --tile-shadow-hover: 0 10px 24px -4px color-mix(in srgb, var(--header-bg, var(--primary)) 55%, rgba(0, 0, 0, 0.5));
+    --tile-accent: var(--header-bg, var(--primary));
 }
 
 /* Theme-tinted page background for Notes / Tâches / Archive views
@@ -4646,10 +4630,39 @@ body.view-archive {
     background: var(--tile-bg);
     border-color: var(--tile-border);
     box-shadow: var(--tile-shadow);
+    color: var(--tile-text);
     /* primary-colored left accent stripe — immediately readable per theme */
     border-left: 3px solid var(--tile-accent);
 }
 
+/* Ensure all text inside tiles uses the header-text color for contrast
+   against the now fully-primary tile background */
+.link-outer,
+.link-outer .link-title,
+.link-outer .link-title a,
+.link-outer .link-url,
+.link-outer .link-url a,
+.link-outer .link-description,
+.link-outer .link-meta,
+.link-outer .link-meta a,
+.link-outer .link-actions,
+.link-outer .link-actions a,
+.link-outer .link-actions button,
+.view-list .link-outer,
+.view-list .link-outer a,
+.view-list .link-outer button {
+    color: var(--tile-text);
+}
+
+/* Tag pills inside tiles — keep them readable against the colored bg */
+.link-outer .link-tag,
+.link-outer .tag,
+.view-list .link-outer .link-tag {
+    background: rgba(0, 0, 0, 0.25);
+    color: var(--tile-text);
+    border-color: rgba(0, 0, 0, 0.35);
+}
+
 .link-outer:hover {
     border-color: var(--primary);
     box-shadow: var(--tile-shadow-hover);