From e390e5b8eccfa0b5e6a188fe4632cf1bac7591bd Mon Sep 17 00:00:00 2001
From: Andrew Ginns <ginns.aw@gmail.com>
Date: Sun, 6 Jul 2025 15:02:41 +0000
Subject: [PATCH] feat: Light/dark mode text colouring for legibility

---
 src/components/merbench/LeaderboardTable.astro |  4 ++--
 src/layouts/BaseLayout.astro                   |  8 ++++++++
 src/lib/merbench.ts                            | 15 ++++++++++-----
 src/scripts/merbench-sorting.ts                | 15 ++++++++++-----
 4 files changed, 30 insertions(+), 12 deletions(-)

diff --git a/src/components/merbench/LeaderboardTable.astro b/src/components/merbench/LeaderboardTable.astro
index 155498f..99ef6b9 100644
--- a/src/components/merbench/LeaderboardTable.astro
+++ b/src/components/merbench/LeaderboardTable.astro
@@ -307,8 +307,8 @@ const costRange = maxCost - minCost;
     transform: translate(-50%, -50%);
     font-size: 0.75rem;
     font-weight: 600;
-    color: white;
-    text-shadow: 0 1px 2px rgba(0, 0, 0, 0.3);
+    color: var(--progress-text-color);
+    text-shadow: var(--progress-text-shadow);
   }
 
   .cost {
diff --git a/src/layouts/BaseLayout.astro b/src/layouts/BaseLayout.astro
index 3414df7..3f14e64 100644
--- a/src/layouts/BaseLayout.astro
+++ b/src/layouts/BaseLayout.astro
@@ -251,6 +251,10 @@ const tagPairs = topTags.map((tag) => ({
         --shadow-light: rgba(0, 0, 0, 0.08);
         --shadow-medium: rgba(0, 0, 0, 0.12);
         --shadow-strong: rgba(0, 0, 0, 0.16);
+
+        /* Progress bar text styling - light mode */
+        --progress-text-color: #000000;
+        --progress-text-shadow: 0 1px 2px rgba(255, 255, 255, 0.8);
         --sidebar-width: 240px;
         --content-max-width: 800px;
         --spacing-unit: 1rem;
@@ -300,6 +304,10 @@ const tagPairs = topTags.map((tag) => ({
         --shadow-light: rgba(1, 4, 9, 0.3);
         --shadow-medium: rgba(1, 4, 9, 0.4);
         --shadow-strong: rgba(1, 4, 9, 0.5);
+
+        /* Progress bar text styling - dark mode */
+        --progress-text-color: #ffffff;
+        --progress-text-shadow: 0 1px 2px rgba(0, 0, 0, 0.8);
       }
 
       * {
diff --git a/src/lib/merbench.ts b/src/lib/merbench.ts
index 983ccd7..0ebb679 100644
--- a/src/lib/merbench.ts
+++ b/src/lib/merbench.ts
@@ -371,22 +371,27 @@ export const updateLeaderboard = (filteredData: FilteredData): void => {
       const currentCost = entry.Avg_Cost || calculateCost(entry.Avg_Tokens);
       const costWidth = costRange > 0 ? (currentCost / maxCost) * 100 : 0;
 
+      const successRateClass =
+        entry.Success_Rate >= 30
+          ? 'progress-fill--high'
+          : entry.Success_Rate >= 15
+            ? 'progress-fill--medium'
+            : 'progress-fill--low';
+
       return `
     <tr>
       <td class="rank">${index + 1}</td>
       <td class="model-name">${entry.Model}</td>
       <td class="success-rate">
         <div class="progress-bar">
-          <div class="progress-fill" style="width: ${entry.Success_Rate}%; background-color: ${
-            entry.Success_Rate >= 30 ? '#27ae60' : entry.Success_Rate >= 15 ? '#f39c12' : '#e74c3c'
-          }"></div>
-          <span class="progress-text">${entry.Success_Rate.toFixed(1)}%</span>
+          <div class="progress-fill ${successRateClass}" style="width: ${entry.Success_Rate}%;"></div>
+          <span class="progress-text" style="color: var(--progress-text-color); text-shadow: var(--progress-text-shadow);">${entry.Success_Rate.toFixed(1)}%</span>
         </div>
       </td>
       <td class="cost">
         <div class="progress-bar">
           <div class="progress-fill progress-fill--cost" style="width: ${costWidth}%; background-color: #9ca3af;"></div>
-          <span class="progress-text">$${currentCost.toFixed(4)}</span>
+          <span class="progress-text" style="color: var(--progress-text-color); text-shadow: var(--progress-text-shadow);">$${currentCost.toFixed(4)}</span>
         </div>
       </td>
       <td class="duration">${entry.Avg_Duration.toFixed(2)}s</td>
diff --git a/src/scripts/merbench-sorting.ts b/src/scripts/merbench-sorting.ts
index a1297c1..37f68ea 100644
--- a/src/scripts/merbench-sorting.ts
+++ b/src/scripts/merbench-sorting.ts
@@ -98,22 +98,27 @@ const renderLeaderboard = (data: LeaderboardEntry[]): void => {
       const currentCost = entry.Avg_Cost || calculateCost(entry.Avg_Tokens);
       const costWidth = costRange > 0 ? (currentCost / maxCost) * 100 : 0;
 
+      const successRateClass =
+        entry.Success_Rate >= 30
+          ? 'progress-fill--high'
+          : entry.Success_Rate >= 15
+            ? 'progress-fill--medium'
+            : 'progress-fill--low';
+
       return `
     <tr>
       <td class="rank">${index + 1}</td>
       <td class="model-name">${entry.Model}</td>
       <td class="success-rate">
         <div class="progress-bar">
-          <div class="progress-fill" style="width: ${entry.Success_Rate}%; background-color: ${
-            entry.Success_Rate >= 30 ? '#27ae60' : entry.Success_Rate >= 15 ? '#f39c12' : '#e74c3c'
-          }"></div>
-          <span class="progress-text">${entry.Success_Rate.toFixed(1)}%</span>
+          <div class="progress-fill ${successRateClass}" style="width: ${entry.Success_Rate}%;"></div>
+          <span class="progress-text" style="color: var(--progress-text-color); text-shadow: var(--progress-text-shadow);">${entry.Success_Rate.toFixed(1)}%</span>
         </div>
       </td>
       <td class="cost">
         <div class="progress-bar">
           <div class="progress-fill progress-fill--cost" style="width: ${costWidth}%; background-color: #9ca3af;"></div>
-          <span class="progress-text">$${currentCost.toFixed(4)}</span>
+          <span class="progress-text" style="color: var(--progress-text-color); text-shadow: var(--progress-text-shadow);">$${currentCost.toFixed(4)}</span>
         </div>
       </td>
       <td class="duration">${entry.Avg_Duration.toFixed(2)}s</td>