NotS1mp/Musify
0
0
Fork 0
Code Issues 23 Pull Requests Actions Packages Projects Releases Wiki Activity

Darken hero/spotlight cards further and adapt accent buttons to match

Browse Source 
Per feedback, --mf-hero-bg/--mf-spotlight-bg in dark mode were still
too bright: drop their tc() base lightness from 42 to 38 and alpha
from 0.2 to 0.1, so the cards read as a subtle wash close to the page
background instead of a distinct bright block.

That made bg-accent-tint (Button's accent variant, ListRow/TrackList's
active-row highlight) look comparatively too light against the now
much darker cards, since accentL was still 0.74. Drop dark's accentL
to 0.55 so every accent-derived surface (rings, accent-tint, accent-btn
hover) darkens to match. Text (titleL, still 0.87) is untouched since
it needs to stay legible regardless of how dark the surface under it
gets.

Cleaned up the now-unused ACCENT_LIGHTNESS import/L constant.
This commit is contained in:
Admin
2026-09-22 20:27:17 +02:00
parent 2138a4a890
commit 8a748f2b3a
1 changed files with 3 additions and 7 deletions
Download Patch File Download Diff File Expand all files Collapse all files
web-player/src/lib/theme/tokens.ts
+3 -7
View File
@@ -1,7 +1,3 @@
import { ACCENT_LIGHTNESS } from './color';
const L = ACCENT_LIGHTNESS / 100;
function r(value: number, digits = 4): string {
return value.toFixed(digits);
}
@@ -30,7 +26,7 @@ export function buildThemeTokens(hue: number, mode: 'dark' | 'light' = 'dark'):
const H2 = r(h2, 1);
const light = mode === 'light';
const accentL = light ? 0.52 : L;
const accentL = light ? 0.52 : 0.55;
const accentC = light ? 0.16 : 0.09;
const titleL = light ? 0.4 : 0.87;
const titleC = light ? 0.13 : 0.05;
@@ -57,13 +53,13 @@ export function buildThemeTokens(hue: number, mode: 'dark' | 'light' = 'dark'):
'--mf-hero-tint': light ? tcLight(1, 55, h) : tc(1, 42, h),
'--mf-hero-bg': light
? `linear-gradient(${tcLight(0.08, 55, h)}, ${tcLight(0.08, 55, h)})`
: `linear-gradient(${tc(0.2, 42, h)}, ${tc(0.2, 42, h)})`,
: `linear-gradient(${tc(0.1, 38, h)}, ${tc(0.1, 38, h)})`,
'--mf-modal-glow': light
? `linear-gradient(135deg, ${tcLight(0.34, 42, h)} 0%, ${tcLight(0.2, 55, h)} 30%, ${tcLight(0.1, 70, h)} 55%, ${tcLight(0.04, 85, h)} 80%, ${tcLight(0.02, 88, h)} 100%)`
: `linear-gradient(135deg, ${tc(0.34, 42, h)} 0%, ${tc(0.11, 70, h)} 28%, ${tc(0.03, 88, h)} 50%, rgba(6,6,9,0) 70%)`,
'--mf-spotlight-bg': light
? `linear-gradient(${tcLight(0.08, 55, h)}, ${tcLight(0.08, 55, h)})`
: `linear-gradient(${tc(0.2, 42, h)}, ${tc(0.2, 42, h)})`,
: `linear-gradient(${tc(0.1, 38, h)}, ${tc(0.1, 38, h)})`,
'--mf-logo-grad': light
? `linear-gradient(140deg, oklch(0.74 0.18 ${H}), oklch(0.58 0.16 ${H2}) 92%)`
: `linear-gradient(140deg, oklch(0.78 0.15 ${H}), oklch(0.62 0.13 ${H2}) 92%)`,