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

Polish typography, button states, and login screen

Browse Source 
Applies the display typeface (already used for small section labels)
consistently to every major heading — page titles, hero titles on
album/playlist/mix pages, the home hero, the sidebar/mobile wordmark, and
empty-state titles — instead of only the smaller ones, fixing an
inconsistent visual hierarchy. Also fixes a couple of real bugs found along
the way: Input had a focus border color with no border width to show it,
Button/IconButton had no focus-visible ring at all, and SectionHeading's
letter-spacing only applied when it had an actions slot.

Button's secondary/subtle variants drop their harsh border and flat grey
hover for a softer accent-tinted wash. The accent (and the per-track
extracted accent) is desaturated for a calmer, more pastel feel without
touching lightness, so on-accent text contrast is unaffected.

The login screen gets the same treatment plus a subtle ambient glow (reusing
the home page's existing accent-gradient technique) and a fluid,
viewport-scaled headline instead of a few fixed breakpoints, so it fills the
available space on wide screens instead of staying pinned to one size.
This commit is contained in:
Admin
2026-09-10 09:56:16 +02:00
parent 92a06a3c15
commit ca04a81e81
18 changed files with 42 additions and 30 deletions
Download Patch File Download Diff File Expand all files Collapse all files
web-player/src/lib/components/ui/Button.svelte
+3 -3
View File
@@ -36,13 +36,13 @@
const variants = {
primary: 'bg-accent-soft text-on-accent active:scale-[0.97]',
secondary: 'border border-line text-fg hover:bg-hover',
subtle: 'bg-surface-2 text-fg hover:bg-surface-hover',
secondary: 'bg-surface-2 text-fg hover:bg-accent/12',
subtle: 'bg-white/10 text-fg hover:bg-accent/18',
danger: 'bg-danger text-on-accent hover:brightness-110'
};
const classes = $derived(
`inline-flex items-center justify-center gap-2 rounded-control transition disabled:opacity-40 ${sizes[size]} ${variants[variant]} ${klass}`
`inline-flex items-center justify-center gap-2 rounded-control font-medium transition focus-visible:ring-2 focus-visible:ring-accent focus-visible:ring-offset-2 focus-visible:ring-offset-bg focus-visible:outline-none disabled:opacity-40 ${sizes[size]} ${variants[variant]} ${klass}`
);
</script>
web-player/src/lib/components/ui/EmptyState.svelte
+1 -1
View File
@@ -20,7 +20,7 @@
</span>
{/if}
{#if title}
<h3 class="mt-5 text-2xl font-semibold tracking-tight text-fg">{title}</h3>
<h3 class="mt-5 font-display text-2xl font-semibold tracking-tight text-fg">{title}</h3>
{/if}
{#if description}
<p class="mt-2 text-fg-2">{description}</p>
web-player/src/lib/components/ui/IconButton.svelte
+1 -1
View File
@@ -29,7 +29,7 @@
{onclick}
aria-label={label}
title={label}
class="grid place-items-center rounded-control text-muted transition hover:bg-hover hover:text-fg {sizes[
class="grid place-items-center rounded-control text-muted transition hover:bg-hover hover:text-fg focus-visible:bg-hover focus-visible:text-fg focus-visible:ring-2 focus-visible:ring-accent focus-visible:outline-none {sizes[
size
]} {revealOnHover
? 'sm:opacity-0 sm:group-hover:opacity-100 sm:focus-visible:opacity-100'
web-player/src/lib/components/ui/Input.svelte
+1 -1
View File
@@ -52,7 +52,7 @@
{autocomplete}
{oninput}
bind:value
class="w-full rounded-control bg-surface py-3 text-base text-fg transition placeholder:text-muted focus:border-accent/50 focus:outline-none {Icon
class="w-full rounded-control border border-line bg-surface py-3 text-base text-fg transition placeholder:text-muted focus:border-accent/60 focus:outline-none {Icon
? 'pr-4 pl-11'
: 'px-4'} {klass}"
/>
web-player/src/lib/components/ui/PageHeader.svelte
+1 -1
View File
@@ -13,7 +13,7 @@
<div class="flex flex-col gap-4 sm:flex-row sm:items-end sm:justify-between {klass}">
<div class="min-w-0">
<h1 class="text-2xl font-semibold tracking-tight text-fg sm:text-4xl">{title}</h1>
<h1 class="font-display text-2xl font-semibold tracking-tight text-fg sm:text-4xl">{title}</h1>
{#if subtitle}
<p class="mt-2 text-sm text-fg-2 sm:text-base">{subtitle}</p>
{/if}
web-player/src/lib/components/ui/SectionHeading.svelte
+3 -3
View File
@@ -11,14 +11,14 @@
</script>
{#if actions}
<div class="mb-3 flex items-baseline justify-between gap-4 sm:mb-4 {klass} tracking-widest">
<h2 class="font-display font-medium text-fg sm:text-xl">
<div class="mb-3 flex items-baseline justify-between gap-4 sm:mb-4 {klass}">
<h2 class="font-display font-medium tracking-tight text-fg sm:text-xl">
{title}
</h2>
{@render actions()}
</div>
{:else}
<h2 class="mb-3 font-display font-medium text-fg sm:mb-4 sm:text-xl {klass}">
<h2 class="mb-3 font-display font-medium tracking-tight text-fg sm:mb-4 sm:text-xl {klass}">
{title}
</h2>
{/if}