Admin
1b6d7ecb42
Add scripts/check-tokens.mjs (npm run lint:tokens, wired into lint) as
a guardrail: fails if src/**/*.svelte reintroduces arbitrary values
outside the B.4 allowlist, factory rounded-*, h-N w-N pairs (should
be size-N), quarter-step fractional spacing, or literal hex/rgba()
colors.
Cleans up the repo until the script reports 0 violations: ~40 h-N w-N
pairs -> size-N (mostly icons, via a one-off script), ~26 quarter-step
fractional spacings rounded to the nearest integer (delta <=1px, e.g.
py-2.75->py-3, gap-1.75->gap-2), stray factory radii (rounded-sm/lg,
bare rounded) migrated to the matching tokens, and two
tracking-[-0.02em] that matched the existing tracking-display token
exactly but had never been migrated. Removes the
stroke-thin/regular/bold recipes (added earlier, zero consumers) —
decision made, not blocking: strokeWidth={n} (13 values, across
almost every component) isn't migrated to CSS because there's no way
to verify without Docker that lucide-svelte honors stroke-width by
class instead of the prop, and a regression there would be silent
across the whole app; the script documents this gap explicitly
instead of pretending full coverage.
Orphan detector: 0 components with no importers. Removes
docs/design-system-refactor-plan.md (earlier plan, superseded by
frontend-refactor-plan.md). web-player/CLAUDE.md gains a "Styles"
section with the B.4 allowlist and the base components to reuse.
Recalculates the baseline table (A.4) and logs it: 61->47 components,
44->11 arbitrary values (the remaining 11 on the allowlist), 13->8
distinct radii, 0 lint:tokens violations.
Verified with npm run check (0 errors), npm run lint:tokens (0
violations) and npm run build. Smoke-tested /login with no console
errors attributable to this change.
66 lines
1.7 KiB
Svelte
66 lines
1.7 KiB
Svelte
<script lang="ts">
|
|
import type { Snippet } from 'svelte';
|
|
import LoaderCircle from '@lucide/svelte/icons/loader-circle';
|
|
|
|
interface Props {
|
|
variant?: 'primary' | 'secondary' | 'glass' | 'accent' | 'strong' | '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 subtle = 'bg-btn text-fg-2 hover:bg-btn-hover hover:text-fg';
|
|
const glass = 'font-normal bg-btn-glass text-fg-2 hover:bg-btn-glass-hover hover:text-fg';
|
|
|
|
const variants = {
|
|
primary: subtle,
|
|
secondary: subtle,
|
|
glass,
|
|
accent: 'bg-accent-btn text-accent-soft hover:bg-accent-btn-hover',
|
|
strong: 'bg-cta-strong text-ink hover:brightness-95',
|
|
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}
|