AdminandClaude Sonnet 5
626283ba50
Sampling whatever's behind the button via backdrop-filter meant two secondary buttons could render differently depending on what happened to be nearby (e.g. dark album art bleeding into the blur), so "Explorar musica" and "Aleatorio" ended up visibly different colors despite being the same variant. Replace it with a fixed, hue-tied translucent tint (bg-accent-tint, the same token family accent already uses) so every secondary button computes to the identical color, ties into the same dynamic accent hue as the rest of the app, and reads as a softer sibling of the accent button instead of an unrelated gray. Hover now steps up to bg-accent-btn (same hue family, stronger) instead of a flat, hue-agnostic gray. Removed the now-unused --mf-btn-bg-hover/ --color-btn-hover tokens. Co-Authored-By: Claude Sonnet 5 <noreply@anthropic.com>
61 lines
1.6 KiB
Svelte
61 lines
1.6 KiB
Svelte
<script lang="ts">
|
|
import type { Snippet } from 'svelte';
|
|
import LoaderCircle from '@lucide/svelte/icons/loader-circle';
|
|
|
|
interface Props {
|
|
variant?: 'primary' | 'secondary' | 'accent' | 'danger';
|
|
size?: 'sm' | 'md' | 'lg';
|
|
type?: 'button' | 'submit';
|
|
href?: string;
|
|
reload?: boolean;
|
|
disabled?: boolean;
|
|
loading?: boolean;
|
|
onclick?: (event: MouseEvent) => void;
|
|
class?: string;
|
|
children: Snippet;
|
|
}
|
|
|
|
let {
|
|
variant = 'primary',
|
|
size = 'md',
|
|
type = 'button',
|
|
href,
|
|
reload = false,
|
|
disabled = false,
|
|
loading = false,
|
|
onclick,
|
|
class: klass = '',
|
|
children
|
|
}: Props = $props();
|
|
|
|
const sizes = {
|
|
sm: 'px-4 py-2.5 text-xs',
|
|
md: 'px-5 py-3 text-sm',
|
|
lg: 'px-6 py-3.5 text-sm'
|
|
};
|
|
|
|
const variants = {
|
|
primary: 'bg-cta-strong text-ink hover:brightness-95',
|
|
secondary: 'bg-accent-tint text-fg-2 hover:bg-accent-btn hover:text-fg',
|
|
accent: 'bg-accent-btn text-accent-soft hover:bg-accent-btn-hover',
|
|
danger: 'bg-danger text-on-art hover:brightness-110'
|
|
};
|
|
|
|
const classes = $derived(
|
|
`inline-flex items-center justify-center gap-2 rounded-control 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>
|
|
|
|
{#if href}
|
|
<a {href} data-sveltekit-reload={reload ? '' : undefined} class={classes}>
|
|
{@render children()}
|
|
</a>
|
|
{:else}
|
|
<button {type} disabled={disabled || loading} {onclick} class={classes}>
|
|
{#if loading}
|
|
<LoaderCircle class="size-4 animate-spin" />
|
|
{/if}
|
|
{@render children()}
|
|
</button>
|
|
{/if}
|