Merge pull request #29 from andrewginns/merbench-ui-tweaks

feat: Light/dark mode text colouring for legibility

Author: andrewginns

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 {

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);
       }
 
       * {

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>

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>