Simplify design

web-player/src/lib/components/ui/primitives/BackLink.svelte

@@ -24,7 +24,7 @@
 <a
 	href={target.url}
 	{onclick}
-	class="inline-flex items-center text-fg-3 transition-colors hover:text-accent-soft"
+	class="inline-flex items-center text-fg-2 transition-colors hover:text-accent-soft"
 >
 	<span class="grid size-8 place-items-center">
 		<ArrowLeft class="size-icon-sm" />

web-player/src/lib/components/ui/primitives/Button.svelte

@@ -29,20 +29,20 @@
 	}: 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'
+		sm: 'rounded-control px-4 py-2 text-xs',
+		md: 'rounded-btn-sm px-4.5 py-2.5 text-control-sm',
+		lg: 'rounded-btn px-6 py-3.5 text-sm'
 	};
 
 	const variants = {
-		primary: 'bg-cta-strong text-ink hover:brightness-95',
+		primary: 'bg-cta-strong text-ink hover:bg-cta-strong-hover',
 		secondary: 'bg-btn text-fg hover:bg-btn-hover',
-		accent: 'bg-accent-tint text-accent-soft hover:bg-accent-btn-hover',
+		accent: 'surface-active text-accent-soft hover:surface-active-hover',
 		danger: 'bg-danger text-on-art hover:brightness-110'
 	};
 
 	const classes = $derived(
-		`inline-flex items-center justify-center gap-2 rounded-control btn-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}`
+		`inline-flex items-center justify-center gap-2 font-medium btn-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/primitives/Chip.svelte

@@ -15,9 +15,7 @@
 		href
 			? 'rounded-full border border-line-strong px-3.5 py-2 text-xs text-fg-2 transition-colors hover:bg-hover hover:text-fg'
 			: `flex items-center gap-2 rounded-full px-3.5 py-2 text-xs font-medium transition ${
-					selected
-						? 'bg-cta-strong text-ink'
-						: 'bg-surface-2 text-fg-2 hover:bg-surface-hover hover:text-fg'
+					selected ? 'bg-cta-strong text-ink' : 'bg-btn text-fg-2 hover:bg-btn-hover hover:text-fg'
 				}`
 	);
 </script>
@@ -25,7 +23,7 @@
 {#snippet content()}
 	{@render children()}
 	{#if count !== undefined}
-		<span class="tabular-nums {selected ? 'opacity-55' : 'text-muted'}">{count}</span>
+		<span class="tabular-nums {selected ? 'opacity-55' : 'text-fg-2'}">{count}</span>
 	{/if}
 {/snippet}
 

web-player/src/lib/components/ui/primitives/Field.svelte

@@ -20,7 +20,7 @@
 	{/if}
 	{@render children()}
 	{#if hint}
-		<div class="mt-2 flex items-center justify-between gap-3 text-xs text-muted">
+		<div class="mt-2 flex items-center justify-between gap-3 text-xs text-fg-2">
 			{@render hint()}
 		</div>
 	{/if}

web-player/src/lib/components/ui/primitives/IconButton.svelte

@@ -41,7 +41,7 @@
 	};
 
 	const TEXT: Record<'muted' | 'subtle' | 'plain', string> = {
-		muted: 'text-muted hover:text-fg',
+		muted: 'text-fg-2 hover:text-fg',
 		subtle: 'text-fg-2 hover:text-fg',
 		plain: 'text-fg-2 hover:text-fg'
 	};

web-player/src/lib/components/ui/primitives/InfiniteScroll.svelte

@@ -34,6 +34,6 @@
 
 <div bind:this={sentinel} class="flex min-h-12 items-center justify-center py-8">
 	{#if loading}
-		<LoaderCircle class="size-5 animate-spin text-muted" />
+		<LoaderCircle class="size-5 animate-spin text-fg-2" />
 	{/if}
 </div>

web-player/src/lib/components/ui/primitives/Input.svelte

@@ -36,7 +36,7 @@
 
 <div class="relative w-full">
 	{#if Icon}
-		<span class="pointer-events-none absolute inset-y-0 left-4 grid place-items-center text-muted">
+		<span class="pointer-events-none absolute inset-y-0 left-4 grid place-items-center text-fg-2">
 			<Icon class="size-icon-lg" />
 		</span>
 	{/if}

web-player/src/lib/components/ui/primitives/SegmentedControl.svelte

@@ -16,7 +16,7 @@
 
 <div class="relative flex shrink-0 rounded-full bg-surface-2 p-1">
 	<div
-		class="absolute inset-y-1 left-1 rounded-full bg-fg transition-transform duration-300 ease-out"
+		class="absolute inset-y-1 left-1 rounded-full bg-fg transition-transform duration-200 ease-snappy"
 		style="width:calc((100% - 0.5rem) / {options.length}); transform:translateX(calc({index} * 100%))"
 	></div>
 	{#each options as option (option.value)}
@@ -26,7 +26,7 @@
 			class="relative z-(--z-raised) flex-1 px-4 py-1.5 text-center text-xs font-medium transition-colors {value ===
 			option.value
 				? 'text-ink'
-				: 'text-muted hover:text-fg-2'}"
+				: 'text-fg-2 hover:text-fg-2'}"
 		>
 			{option.label}
 		</button>