Admin
11789e78fe
Add, additively (no component migration yet), the tokens from section B.1 of the refactor plan: radii (tag/thumb), cover and icon sizes, container widths, typographic tracking/leading, button colors (--color-btn*), typography @utility recipes (text-display-*, text-eyebrow, text-body, text-count), icon stroke (stroke-thin/regular/bold), surfaces/grids (glass-bar, grid-cards*, theme-transition), and the .animate-enter stagger via --i. Add layout variables (--mf-player-side-w, --mf-menu-w, --mf-submenu-w, --mf-range-*) and semantic z-index in theme.css. Clean up unused color utilities (--color-accent-dim/glow/hair/line/muted, --color-on-accent) and remove --mf-sidebar-bg (no importers) from theme.css and tokens.ts. Scrollbar moves to tokens with a light-mode variant. Verified with npm run build (Tailwind compiles the @utility recipes with responsive variants inside @apply).
67 lines
1.8 KiB
Svelte
67 lines
1.8 KiB
Svelte
<script lang="ts">
|
|
import type { Snippet } from 'svelte';
|
|
import LoaderCircle from '@lucide/svelte/icons/loader-circle';
|
|
|
|
interface Props {
|
|
variant?: 'primary' | 'secondary' | 'secondaryOnGlow' | '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 subtleButton =
|
|
'bg-[var(--mf-btn-bg)] text-fg-2 hover:bg-[var(--mf-btn-bg-hover)] hover:text-fg';
|
|
const subtleButtonOnGlow =
|
|
'bg-[var(--mf-btn-secondary-bg)] text-fg-2 hover:bg-[var(--mf-btn-secondary-bg-hover)] hover:text-fg';
|
|
|
|
const variants = {
|
|
primary: subtleButton,
|
|
secondary: subtleButton,
|
|
secondaryOnGlow: subtleButtonOnGlow,
|
|
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-xl 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="h-4 w-4 animate-spin" />
|
|
{/if}
|
|
{@render children()}
|
|
</button>
|
|
{/if}
|