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

Changes on the colors

Browse Source
This commit is contained in:
Admin
2026-09-22 22:23:06 +02:00
parent c60704080b
commit d7199b4d1d
3 changed files with 9 additions and 9 deletions
Download Patch File Download Diff File Expand all files Collapse all files
web-player/src/lib/theme/tokens.ts
+6 -6
View File
@@ -26,10 +26,10 @@ export function buildThemeTokens(hue: number, mode: 'dark' | 'light' = 'dark'):
const H2 = r(h2, 1); const H2 = r(h2, 1);
const light = mode === 'light'; const light = mode === 'light';
const accentL = light ? 0.52 : 0.74; const accentL = light ? 0.8 : 0.8;
const accentC = light ? 0.16 : 0.09; const accentC = light ? 0.4 : 0.2;
const titleL = light ? 0.4 : 0.87; const titleL = light ? 0.5 : 0.8;
const titleC = light ? 0.13 : 0.05; const titleC = light ? 0.1 : 0.05;
const mutedL = light ? 0.48 : 0.79; const mutedL = light ? 0.48 : 0.79;
const mutedC = light ? 0.06 : 0.035; const mutedC = light ? 0.06 : 0.035;
@@ -52,13 +52,13 @@ export function buildThemeTokens(hue: number, mode: 'dark' | 'light' = 'dark'):
: `radial-gradient(95% 85% at 20% 0%, ${tc(0.12, 30, h)}, transparent 88%), radial-gradient(90% 80% at 80% 0%, ${tc(0.09, 40, h)}, transparent 88%)`, : `radial-gradient(95% 85% at 20% 0%, ${tc(0.12, 30, h)}, transparent 88%), radial-gradient(90% 80% at 80% 0%, ${tc(0.09, 40, h)}, transparent 88%)`,
'--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.08, 55, h)}, ${tcLight(0.08, 55, h)})` ? `linear-gradient(${tcLight(0.1, 55, h)}, ${tcLight(0.1, 55, h)})`
: `linear-gradient(${tc(0.1, 38, h)}, ${tc(0.1, 38, h)})`, : `linear-gradient(${tc(0.1, 38, h)}, ${tc(0.1, 38, h)})`,
'--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.08, 55, h)}, ${tcLight(0.08, 55, h)})` ? `linear-gradient(${tcLight(0.1, 55, h)}, ${tcLight(0.1, 55, h)})`
: `linear-gradient(${tc(0.1, 38, h)}, ${tc(0.1, 38, h)})`, : `linear-gradient(${tc(0.1, 38, h)}, ${tc(0.1, 38, h)})`,
'--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/+page.svelte
+2 -2
View File
@@ -256,12 +256,12 @@
subtitleHref={track.ownerUserId} subtitleHref={track.ownerUserId}
> >
{#snippet leading()} {#snippet leading()}
<span class="w-5 shrink-0 text-center text-xs text-muted tabular-nums" <span class="w-5 shrink-0 text-center text-xs text-fg-2 tabular-nums"
>{i + 1}</span >{i + 1}</span
> >
{/snippet} {/snippet}
{#snippet trailing()} {#snippet trailing()}
<span class="shrink-0 text-xs text-muted tabular-nums">{fmtTime(seconds)}</span> <span class="shrink-0 text-xs text-fg-2 tabular-nums">{fmtTime(seconds)}</span>
{/snippet} {/snippet}
</ListRow> </ListRow>
{:else} {:else}
web-player/src/routes/layout.css
+1 -1
View File
@@ -122,7 +122,7 @@
} }
@utility btn-transition { @utility btn-transition {
transition-property: color, border-color, outline-color, opacity, box-shadow, filter; transition-property: color, background-color, border-color, outline-color, opacity, box-shadow, filter;
transition-timing-function: var(--default-transition-timing-function); transition-timing-function: var(--default-transition-timing-function);
transition-duration: var(--default-transition-duration); transition-duration: var(--default-transition-duration);
} }