AdminandClaude Sonnet 5
3feef07cbf
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. Co-Authored-By: Claude Sonnet 5 <noreply@anthropic.com>
40 lines
900 B
Svelte
40 lines
900 B
Svelte
<script lang="ts">
|
|
import type { Snippet } from 'svelte';
|
|
|
|
interface Props {
|
|
label: string;
|
|
type?: 'button' | 'submit';
|
|
size?: 'sm' | 'md';
|
|
revealOnHover?: boolean;
|
|
onclick?: (event: MouseEvent) => void;
|
|
class?: string;
|
|
children: Snippet;
|
|
}
|
|
|
|
let {
|
|
label,
|
|
type = 'button',
|
|
size = 'md',
|
|
revealOnHover = false,
|
|
onclick,
|
|
class: klass = '',
|
|
children
|
|
}: Props = $props();
|
|
|
|
const sizes = { sm: 'h-7 w-7', md: 'h-8 w-8' };
|
|
</script>
|
|
|
|
<button
|
|
{type}
|
|
{onclick}
|
|
aria-label={label}
|
|
title={label}
|
|
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'
|
|
: ''} {klass}"
|
|
>
|
|
{@render children()}
|
|
</button>
|