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

Make the hero/spotlight surface tint more transparent

Browse Source 
--mf-hero-bg/--mf-spotlight-bg's overlay tint was at 16% alpha, which
after the pastel lightness/chroma boost read as a fairly solid block
of color rather than a soft wash. Halve it to 8% so more of the plain
page background shows through underneath.

Keep the secondary button's color-mix ratio (in layout.css) in sync at
8% too, since it's built to replicate exactly what the surface behind
it looks like.
This commit is contained in:
Admin
2026-09-22 18:06:11 +02:00
parent 8d178884d4
commit b168df6ca6
2 changed files with 3 additions and 3 deletions
Download Patch File Download Diff File Expand all files Collapse all files
web-player/src/lib/theme/tokens.ts
+2 -2
View File
@@ -57,13 +57,13 @@ export function buildThemeTokens(hue: number, mode: 'dark' | 'light' = 'dark'):
: `radial-gradient(52% 38% at 14% 0%, ${tc(0.26, 30, h)}, transparent 54%), radial-gradient(46% 34% at 78% 0%, ${tc(0.2, 40, h)}, transparent 56%)`, : `radial-gradient(52% 38% at 14% 0%, ${tc(0.26, 30, h)}, transparent 54%), radial-gradient(46% 34% at 78% 0%, ${tc(0.2, 40, h)}, transparent 56%)`,
'--mf-hero-tint': light ? tcLight(1, 55, h) : tc(1, 42, h), '--mf-hero-tint': light ? tcLight(1, 55, h) : tc(1, 42, h),
'--mf-hero-bg': light '--mf-hero-bg': light
? `linear-gradient(${tcLight(0.16, 55, h)}, ${tcLight(0.16, 55, h)})` ? `linear-gradient(${tcLight(0.08, 55, h)}, ${tcLight(0.08, 55, h)})`
: `linear-gradient(105deg, ${tc(0.34, 42, h)} 0%, ${tc(0.11, 70, h)} 37%, ${tc(0.03, 88, h)} 65%, rgba(6,6,9,0) 92%)`, : `linear-gradient(105deg, ${tc(0.34, 42, h)} 0%, ${tc(0.11, 70, h)} 37%, ${tc(0.03, 88, h)} 65%, rgba(6,6,9,0) 92%)`,
'--mf-modal-glow': light '--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, ${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%)`, : `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 '--mf-spotlight-bg': light
? `linear-gradient(${tcLight(0.16, 55, h)}, ${tcLight(0.16, 55, h)})` ? `linear-gradient(${tcLight(0.08, 55, h)}, ${tcLight(0.08, 55, h)})`
: `linear-gradient(100deg, ${tc(0.28, 46, h)} 0%, ${tc(0.1, 74, h)} 40%, ${tc(0.03, 88, h)} 69%, rgba(6,6,9,0) 96%)`, : `linear-gradient(100deg, ${tc(0.28, 46, h)} 0%, ${tc(0.1, 74, h)} 40%, ${tc(0.03, 88, h)} 69%, rgba(6,6,9,0) 96%)`,
'--mf-logo-grad': light '--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.74 0.18 ${H}), oklch(0.58 0.16 ${H2}) 92%)`
web-player/src/routes/layout.css
+1 -1
View File
@@ -33,7 +33,7 @@
--color-btn: color-mix( --color-btn: color-mix(
in srgb, in srgb,
var(--mf-elevated) 45%, var(--mf-elevated) 45%,
color-mix(in srgb, var(--mf-hero-tint) 16%, var(--mf-bg)) color-mix(in srgb, var(--mf-hero-tint) 8%, var(--mf-bg))
); );
--color-btn-hover: var(--mf-btn-bg-hover); --color-btn-hover: var(--mf-btn-bg-hover);