From 93e7b81061b4d1a8e2767dbeb9d94fe2639bc98e Mon Sep 17 00:00:00 2001
From: juanatsap <juanatsap@gmail.com>
Date: Wed, 19 Nov 2025 15:49:55 +0000
Subject: [PATCH] fix: Change dark theme icon border to #5e5e5e medium gray

- Changed from transparent to #5e5e5e (rgb(94,94,94))
- Visible but subtle medium gray border in dark theme
- Updated test to verify new border color
- Note: CSS filter on LIV Golf only affects image pixels, not border
---
 static/css/01-foundation/_themes.css     |  4 ++--
 tests/mjs/23-dark-theme-borders.test.mjs | 24 +++++++++---------------
 2 files changed, 11 insertions(+), 17 deletions(-)

diff --git a/static/css/01-foundation/_themes.css b/static/css/01-foundation/_themes.css
index 15b7b72..1f99e6b 100644
--- a/static/css/01-foundation/_themes.css
+++ b/static/css/01-foundation/_themes.css
@@ -86,7 +86,7 @@
   /* Borders & Dividers */
   --border-color: #404040;
   --border-light: #333333;
-  --icon-border: transparent; /* Invisible border for icons in dark theme */
+  --icon-border: #5e5e5e; /* Medium gray border for icons in dark theme */
   --item-separator: rgba(255, 255, 255, 0.05); /* Very subtle separator in dark theme */
 
   /* Shadows */
@@ -137,7 +137,7 @@
     /* Borders & Dividers */
     --border-color: #404040;
     --border-light: #333333;
-    --icon-border: transparent; /* Invisible border for icons in dark theme */
+    --icon-border: #5e5e5e; /* Medium gray border for icons in dark theme */
     --item-separator: rgba(255, 255, 255, 0.05); /* Very subtle separator in dark theme */
 
     /* Shadows */
diff --git a/tests/mjs/23-dark-theme-borders.test.mjs b/tests/mjs/23-dark-theme-borders.test.mjs
index f72b5d4..0842231 100755
--- a/tests/mjs/23-dark-theme-borders.test.mjs
+++ b/tests/mjs/23-dark-theme-borders.test.mjs
@@ -76,23 +76,17 @@ async function testDarkThemeBorders() {
 
     console.log(`   Border color: ${darkBorders.borderColor}`);
 
-    // Check if transparent or rgba with 0 alpha
-    const isTransparent = darkBorders.borderColor.includes('rgba(0, 0, 0, 0)') ||
-                          darkBorders.borderColor === 'transparent';
+    // Check for expected #5e5e5e = rgb(94, 94, 94)
+    const isExpectedGray = darkBorders.borderColor.includes('rgb(94, 94, 94)') ||
+                           darkBorders.borderColor.includes('#5e5e5e');
 
-    if (isTransparent) {
-      console.log('   ✅ Borders completely transparent (invisible) in dark theme');
+    if (isExpectedGray) {
+      console.log('   ✅ Borders are medium gray (#5e5e5e) in dark theme');
     } else {
-      // Check if it's a very dark color
-      const darkRgb = darkBorders.borderColor.match(/\d+/g);
-      if (darkRgb && darkRgb.every(v => parseInt(v) < 50)) {
-        console.log('   ✅ Borders very dark in dark theme');
-      } else {
-        console.log('   ❌ Borders still too visible in dark theme!');
-        console.log(`   Expected: transparent or very dark, Got: ${darkBorders.borderColor}`);
-        await browser.close();
-        process.exit(1);
-      }
+      console.log('   ❌ Border color unexpected!');
+      console.log(`   Expected: rgb(94, 94, 94) or #5e5e5e, Got: ${darkBorders.borderColor}`);
+      await browser.close();
+      process.exit(1);
     }
 
     // Test 3: LIV Golf logo inversion