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