From 8d799e8e64dd06393b0f68c3a44f5ef8db6c0d1b Mon Sep 17 00:00:00 2001
From: Davide Scaini <davide.scaini@alumni.cern>
Date: Thu, 14 May 2026 16:17:16 +0200
Subject: [PATCH] Explore: active type pill solid color bg with auto
 black/white text contrast

---
 site/src/components/Explore.svelte | 11 +++++++++--
 1 file changed, 9 insertions(+), 2 deletions(-)

diff --git a/site/src/components/Explore.svelte b/site/src/components/Explore.svelte
index bcddbc2..6741b87 100644
--- a/site/src/components/Explore.svelte
+++ b/site/src/components/Explore.svelte
@@ -54,6 +54,13 @@
   const HEAT_TYPES = Object.keys(TYPE_COLORS);
 
   function typeColor(t: string): string { return TYPE_COLORS[t] ?? TYPE_COLORS.other; }
+  function typeTextOn(t: string): string {
+    const hex = typeColor(t).replace('#', '');
+    const r = parseInt(hex.slice(0,2), 16);
+    const g = parseInt(hex.slice(2,4), 16);
+    const b = parseInt(hex.slice(4,6), 16);
+    return (0.299*r + 0.587*g + 0.114*b) > 128 ? '#000000' : '#ffffff';
+  }
 
   const MONTHS = ['Jan','Feb','Mar','Apr','May','Jun','Jul','Aug','Sep','Oct','Nov','Dec'];
 
@@ -286,7 +293,7 @@
       <div class="pills">
         {#each allTypes as t}
           <button class="pill type-pill" class:active={selectedTypes.has(t)} onclick={() => toggleType(t)}
-            style:--type-color={typeColor(t)}>
+            style:--type-color={typeColor(t)} style:--pill-text-on={typeTextOn(t)}>
             <span class="type-dot"></span>{t}
           </button>
         {/each}
@@ -432,7 +439,7 @@
   .pill.small { padding: 0.15rem 0.45rem; font-size: 0.67rem; }
 
   .type-pill        { border-color: color-mix(in srgb, var(--type-color) 45%, transparent); color: color-mix(in srgb, var(--type-color) 65%, var(--text-5)); background: rgba(128,128,128,0.70); }
-  .type-pill.active { background: color-mix(in srgb, var(--type-color) 18%, transparent); border-color: var(--type-color); color: var(--type-color); }
+  .type-pill.active { background: var(--type-color); border-color: var(--type-color); color: var(--pill-text-on); }
   .type-pill:hover  { border-color: var(--type-color); color: var(--type-color); }
   .type-dot { width: 7px; height: 7px; border-radius: 50%; background: var(--type-color); flex-shrink: 0; }