@selvajs/ui 6.6.0-beta.15 → 6.6.0-beta.17

package/dist/components/preview/inputs/ColorInput.svelte

@@ -1,23 +1,365 @@
 <script lang="ts">
+	import { untrack } from 'svelte';
+	import { Check, Pipette } from '@lucide/svelte';
+	import * as Popover from '../../primitives/popover';
+	import { Input } from '../../primitives/input';
+	import { getLocaleContext } from '../../../i18n/localeContext.svelte';
+	import { formatMessage } from '../../../i18n/messages';
+	import { debounce } from '../../../utils/debounce';
+	import {
+		contrastRatio,
+		hexToHsv,
+		hsvToHex,
+		normalizeHex,
+		type Hsv
+	} from '../../../utils/color-space';
+
 	interface Props {
 		inputId: string;
 		value?: string;
 		onChange: (value: string) => void;
+		disabled?: boolean;
+	}
+
+	let { inputId, value = '#000000', onChange, disabled = false }: Props = $props();
+
+	const PRESETS = [
+		'#000000',
+		'#ffffff',
+		'#9ca3af',
+		'#ef4444',
+		'#f97316',
+		'#eab308',
+		'#22c55e',
+		'#14b8a6',
+		'#3b82f6',
+		'#8b5cf6',
+		'#ec4899',
+		'#78350f'
+	];
+
+	interface EyeDropperApi {
+		open(): Promise<{ sRGBHex: string }>;
+	}
+	const eyeDropperCtor = (globalThis as { EyeDropper?: new () => EyeDropperApi }).EyeDropper;
+
+	const locale = getLocaleContext();
+	const t = $derived(locale.messages);
+
+	const parse = (hex: string): Hsv => hexToHsv(normalizeHex(hex) ?? '#000000')!;
+
+	let hsv = $state<Hsv>(untrack(() => parse(value)));
+	let draft = $state('');
+	let hexError = $state(false);
+	let areaEl = $state<HTMLElement | null>(null);
+
+	const currentHex = $derived(hsvToHex(hsv));
+	const hueColor = $derived(hsvToHex({ h: hsv.h, s: 1, v: 1 }));
+
+	// An external value only replaces the picker's state when it names a different color.
+	// Rebuilding from the hex alone would reset the hue whenever s or v hits 0.
+	$effect(() => {
+		const next = normalizeHex(value) ?? '#000000';
+		if (next !== untrack(() => currentHex)) hsv = parse(next);
+	});
+
+	$effect(() => {
+		draft = currentHex;
+		hexError = false;
+	});
+
+	// Dragging only updates local state; the host sees one change per gesture, since each
+	// change can trigger a solve.
+	function commit() {
+		commitDebounced.cancel();
+		if (currentHex !== normalizeHex(value)) onChange(currentHex);
+	}
+	const commitDebounced = debounce(commit, 150);
+
+	const clamp01 = (n: number) => Math.min(1, Math.max(0, n));
+
+	function setFromPointer(e: PointerEvent) {
+		if (!areaEl) return;
+		const rect = areaEl.getBoundingClientRect();
+		hsv = {
+			h: hsv.h,
+			s: clamp01((e.clientX - rect.left) / rect.width),
+			v: clamp01(1 - (e.clientY - rect.top) / rect.height)
+		};
+	}
+
+	function onAreaPointerDown(e: PointerEvent) {
+		if (disabled || e.button !== 0) return;
+		e.preventDefault();
+		areaEl?.focus();
+		areaEl?.setPointerCapture(e.pointerId);
+		setFromPointer(e);
+	}
+
+	function onAreaPointerMove(e: PointerEvent) {
+		if (areaEl?.hasPointerCapture(e.pointerId)) setFromPointer(e);
+	}
+
+	function onAreaPointerUp(e: PointerEvent) {
+		if (!areaEl?.hasPointerCapture(e.pointerId)) return;
+		areaEl.releasePointerCapture(e.pointerId);
+		commit();
+	}
+
+	function onAreaKeydown(e: KeyboardEvent) {
+		const step = e.shiftKey ? 0.1 : 0.01;
+		let { s, v } = hsv;
+		switch (e.key) {
+			case 'ArrowLeft':
+				s -= step;
+				break;
+			case 'ArrowRight':
+				s += step;
+				break;
+			case 'ArrowUp':
+				v += step;
+				break;
+			case 'ArrowDown':
+				v -= step;
+				break;
+			case 'PageUp':
+				v += 0.1;
+				break;
+			case 'PageDown':
+				v -= 0.1;
+				break;
+			default:
+				return;
+		}
+		e.preventDefault();
+		hsv = { h: hsv.h, s: clamp01(s), v: clamp01(v) };
+		commitDebounced();
 	}
 
-	let { inputId, value = '#000000', onChange }: Props = $props();
+	function onHueInput(e: Event) {
+		hsv = { ...hsv, h: Number((e.currentTarget as HTMLInputElement).value) };
+	}
+
+	function applyHex(hex: string) {
+		hsv = parse(hex);
+		commit();
+	}
+
+	function commitDraft() {
+		const hex = normalizeHex(draft);
+		if (!hex) {
+			hexError = true;
+			return;
+		}
+		hexError = false;
+		applyHex(hex);
+		draft = hex;
+	}
+
+	function onHexKeydown(e: KeyboardEvent) {
+		if (e.key === 'Enter') {
+			e.preventDefault();
+			commitDraft();
+		}
+	}
+
+	function onHexBlur() {
+		if (normalizeHex(draft)) commitDraft();
+		else {
+			draft = currentHex;
+			hexError = false;
+		}
+	}
+
+	async function pickFromScreen() {
+		if (!eyeDropperCtor) return;
+		try {
+			const { sRGBHex } = await new eyeDropperCtor().open();
+			applyHex(sRGBHex);
+		} catch {
+			// The user dismissed the eyedropper.
+		}
+	}
+
+	const checkOn = (hex: string) =>
+		(contrastRatio(hex, '#000000') ?? 0) > (contrastRatio(hex, '#ffffff') ?? 0)
+			? 'text-black'
+			: 'text-white';
 </script>
 
-<div class="gap-2 flex items-center">
-	<input
-		id={inputId}
-		type="color"
-		value={value || '#000000'}
-		class="h-9 w-12 rounded p-1 cursor-pointer border border-input bg-background dark:bg-input/30"
-		onchange={(e) => {
-			const newValue = (e.currentTarget as HTMLInputElement).value;
-			onChange(newValue);
-		}}
-	/>
-	<span class="font-mono text-sm text-muted-foreground">{value || '#000000'}</span>
-</div>
+<Popover.Root>
+	<Popover.Trigger>
+		{#snippet child({ props })}
+			<button
+				{...props}
+				type="button"
+				id={inputId}
+				{disabled}
+				aria-label={formatMessage(t.colorPick, { color: currentHex })}
+				class="h-9 gap-2.5 px-2.5 shadow-xs max-w-48 flex w-full cursor-pointer items-center rounded-md border border-input bg-background text-left outline-none focus-visible:border-ring focus-visible:ring-3 focus-visible:ring-ring disabled:cursor-not-allowed disabled:opacity-50"
+			>
+				<span
+					class="size-5 shrink-0 rounded-md bg-(--swatch) ring-1 ring-border ring-inset"
+					style:--swatch={currentHex}
+				></span>
+				<span class="font-mono text-sm text-muted-foreground">{currentHex}</span>
+			</button>
+		{/snippet}
+	</Popover.Trigger>
+
+	<Popover.Content align="start">
+		<div
+			bind:this={areaEl}
+			role="slider"
+			tabindex={disabled ? -1 : 0}
+			aria-label={t.colorArea}
+			aria-valuemin={0}
+			aria-valuemax={100}
+			aria-valuenow={Math.round(hsv.v * 100)}
+			aria-valuetext={formatMessage(t.colorAreaValue, {
+				s: Math.round(hsv.s * 100),
+				v: Math.round(hsv.v * 100)
+			})}
+			aria-disabled={disabled}
+			class="color-area h-36 relative w-full cursor-crosshair touch-none rounded-md outline-none focus-visible:ring-3 focus-visible:ring-ring"
+			style:--hue={hueColor}
+			onpointerdown={onAreaPointerDown}
+			onpointermove={onAreaPointerMove}
+			onpointerup={onAreaPointerUp}
+			onpointercancel={onAreaPointerUp}
+			onkeydown={onAreaKeydown}
+		>
+			<span
+				class="color-thumb size-4 border-white pointer-events-none absolute -translate-x-1/2 -translate-y-1/2 rounded-full border-2 bg-(--swatch)"
+				style:--x="{hsv.s * 100}%"
+				style:--y="{(1 - hsv.v) * 100}%"
+				style:--swatch={currentHex}
+			></span>
+		</div>
+
+		<input
+			type="range"
+			class="color-hue"
+			min="0"
+			max="360"
+			step="1"
+			aria-label={t.colorHue}
+			value={Math.round(hsv.h)}
+			{disabled}
+			oninput={onHueInput}
+			onchange={commit}
+		/>
+
+		<div class="gap-2 flex items-start">
+			<div class="min-w-0 flex-1">
+				<Input
+					type="text"
+					aria-label={t.colorHex}
+					aria-invalid={hexError}
+					aria-describedby={hexError ? `${inputId}-hex-error` : undefined}
+					autocomplete="off"
+					spellcheck={false}
+					maxlength={7}
+					{disabled}
+					bind:value={draft}
+					onkeydown={onHexKeydown}
+					onblur={onHexBlur}
+				/>
+			</div>
+			{#if eyeDropperCtor}
+				<button
+					type="button"
+					{disabled}
+					aria-label={t.colorEyedropper}
+					title={t.colorEyedropper}
+					class="size-9 flex shrink-0 cursor-pointer items-center justify-center rounded-md border border-input bg-background outline-none hover:bg-hover focus-visible:border-ring focus-visible:ring-3 focus-visible:ring-ring disabled:cursor-not-allowed disabled:opacity-50"
+					onclick={pickFromScreen}
+				>
+					<Pipette class="size-4" aria-hidden="true" />
+				</button>
+			{/if}
+		</div>
+		{#if hexError}
+			<p id="{inputId}-hex-error" role="alert" class="text-xs text-destructive">
+				{t.colorHexInvalid}
+			</p>
+		{/if}
+
+		<div role="group" aria-label={t.colorPresets} class="gap-1.5 grid grid-cols-6">
+			{#each PRESETS as preset (preset)}
+				{@const selected = preset === currentHex}
+				<button
+					type="button"
+					{disabled}
+					aria-label={preset}
+					aria-pressed={selected}
+					class="h-6 flex cursor-pointer items-center justify-center rounded-md bg-(--swatch) ring-1 ring-border outline-none ring-inset focus-visible:ring-3 focus-visible:ring-ring disabled:cursor-not-allowed"
+					style:--swatch={preset}
+					onclick={() => applyHex(preset)}
+				>
+					{#if selected}
+						<Check class="size-3.5 {checkOn(preset)}" aria-hidden="true" />
+					{/if}
+				</button>
+			{/each}
+		</div>
+	</Popover.Content>
+</Popover.Root>
+
+<style>
+	.color-area {
+		background-color: var(--hue);
+		background-image:
+			linear-gradient(to top, #000, transparent), linear-gradient(to right, #fff, transparent);
+	}
+	.color-thumb {
+		left: var(--x);
+		top: var(--y);
+		box-shadow: 0 0 0 1px rgb(0 0 0 / 0.4);
+	}
+	.color-hue {
+		appearance: none;
+		-webkit-appearance: none;
+		height: 0.75rem;
+		width: 100%;
+		margin: 0;
+		border-radius: 9999px;
+		cursor: pointer;
+		outline: none;
+		background: linear-gradient(
+			to right,
+			#f00 0%,
+			#ff0 16.67%,
+			#0f0 33.33%,
+			#0ff 50%,
+			#00f 66.67%,
+			#f0f 83.33%,
+			#f00 100%
+		);
+	}
+	.color-hue::-webkit-slider-thumb {
+		-webkit-appearance: none;
+		height: 1rem;
+		width: 1rem;
+		border-radius: 9999px;
+		border: 2px solid #fff;
+		background: transparent;
+		box-shadow: 0 0 0 1px rgb(0 0 0 / 0.4);
+	}
+	.color-hue::-moz-range-thumb {
+		height: 1rem;
+		width: 1rem;
+		box-sizing: border-box;
+		border-radius: 9999px;
+		border: 2px solid #fff;
+		background: transparent;
+		box-shadow: 0 0 0 1px rgb(0 0 0 / 0.4);
+	}
+	.color-hue:focus-visible {
+		box-shadow: 0 0 0 3px var(--ring);
+	}
+	.color-hue:disabled {
+		cursor: not-allowed;
+		opacity: 0.5;
+	}
+</style>

package/dist/components/preview/inputs/ColorInput.svelte.d.ts

@@ -2,6 +2,7 @@ interface Props {
     inputId: string;
     value?: string;
     onChange: (value: string) => void;
+    disabled?: boolean;
 }
 declare const ColorInput: import("svelte").Component<Props, {}, "">;
 type ColorInput = ReturnType<typeof ColorInput>;

package/dist/components/preview/inputs/FileInput.svelte

@@ -282,10 +282,10 @@
 					type="button"
 					onclick={() => (activeMode = mode)}
 					aria-pressed={activeMode === mode}
-					class={`px-3 py-1 font-medium flex-1 rounded-sm transition-colors ${
+					class={`px-3 py-1 font-medium flex-1 rounded-sm border transition-colors ${
 						activeMode === mode
-							? 'shadow-xs bg-background text-foreground'
-							: 'text-muted-foreground hover:text-foreground'
+							? 'shadow-xs border-border-strong bg-raised text-foreground'
+							: 'border-transparent text-muted-foreground hover:text-foreground'
 					}`}
 				>
 					{mode === 'upload' ? t.fileModeUpload : t.fileModeUrl}

package/dist/components/preview/inputs/SegmentedInput.svelte

@@ -23,7 +23,8 @@
 
 <ToggleGroup.Root
 	type="single"
-	variant="accent"
+	variant="segmented"
+	spacing={1}
 	size={hasIcons ? 'stacked' : 'default'}
 	class="w-full"
 	aria-labelledby={labelId}

package/dist/components/preview/inputs/TileInput.svelte

@@ -53,7 +53,7 @@
 			onkeydown={(e) => onKeydown(e, index)}
 			class="gap-1.5 p-1.5 min-w-0 flex flex-col rounded-lg border text-left transition-colors outline-none focus-visible:ring-2 focus-visible:ring-ring disabled:cursor-not-allowed disabled:opacity-50 {selected
 				? 'border-primary bg-primary/5 ring-1 ring-primary'
-				: 'border-input hover:bg-accent/40'}"
+				: 'border-input hover:bg-hover'}"
 		>
 			<span
 				class="flex aspect-square w-full items-center justify-center overflow-hidden rounded-md bg-muted text-muted-foreground"

package/dist/components/primitives/CalculateButton.svelte

@@ -38,7 +38,7 @@
 	});
 </script>
 
-<div class="bottom-0 mt-3 pb-3 pt-2 backdrop-blur-sm px-2 sticky border-t border-border/50">
+<div class="bottom-0 mt-3 pb-3 pt-2 backdrop-blur-sm px-2 sticky border-t border-border">
 	<span class="sr-only" role="status" aria-live="polite">{announcement}</span>
 	<div class="gap-2 flex">
 		<Button
@@ -55,7 +55,7 @@
 				<Loader class="h-4 w-4 animate-spin" />
 				{t.solvingEllipsis}
 				<kbd
-					class="px-1 font-sans rounded border border-current/30 text-2xs opacity-70"
+					class="px-1 font-sans rounded-sm border border-current/30 text-2xs opacity-70"
 					title={t.solveMessagesEscHint}
 				>
 					Esc

package/dist/components/primitives/Callout.svelte

@@ -8,7 +8,7 @@
 		variants: {
 			tone: {
 				info: 'border-info/40 bg-info/10',
-				tip: 'border-border bg-muted/40',
+				tip: 'border-border bg-muted',
 				success: 'border-success/40 bg-success/10',
 				warning: 'border-warning/40 bg-warning/10',
 				danger: 'border-destructive/40 bg-destructive/10'
@@ -38,7 +38,7 @@
 		title?: string;
 		/** Replaces the tone's default icon. `null` drops the icon entirely. */
 		icon?: Component | null;
-		children: Snippet;
+		children?: Snippet;
 	}
 
 	let { tone = 'info', title, icon, class: className, children, ...restProps }: Props = $props();
@@ -55,12 +55,14 @@
 	{#if Icon}
 		<Icon class={cn('mt-0.5 h-4 w-4 shrink-0', accent)} />
 	{/if}
-	<div class="min-w-0 space-y-1">
+	<div class="min-w-0 space-y-1 wrap-anywhere">
 		{#if title}
 			<p class={cn('leading-tight font-medium', accent)}>{title}</p>
 		{/if}
-		<div class="leading-relaxed text-muted-foreground [&_a]:underline [&_strong]:text-foreground">
-			{@render children()}
-		</div>
+		{#if children}
+			<div class="leading-relaxed text-muted-foreground [&_a]:underline [&_strong]:text-foreground">
+				{@render children()}
+			</div>
+		{/if}
 	</div>
 </div>

package/dist/components/primitives/Callout.svelte.d.ts

@@ -3,7 +3,7 @@ import type { Component } from 'svelte';
 export declare const calloutVariants: import("tailwind-variants").TVReturnType<{
     tone: {
         info: "border-info/40 bg-info/10";
-        tip: "border-border bg-muted/40";
+        tip: "border-border bg-muted";
         success: "border-success/40 bg-success/10";
         warning: "border-warning/40 bg-warning/10";
         danger: "border-destructive/40 bg-destructive/10";
@@ -11,7 +11,7 @@ export declare const calloutVariants: import("tailwind-variants").TVReturnType<{
 }, undefined, "flex items-start gap-2.5 rounded-lg border px-3.5 py-3 text-sm", {
     tone: {
         info: "border-info/40 bg-info/10";
-        tip: "border-border bg-muted/40";
+        tip: "border-border bg-muted";
         success: "border-success/40 bg-success/10";
         warning: "border-warning/40 bg-warning/10";
         danger: "border-destructive/40 bg-destructive/10";
@@ -19,7 +19,7 @@ export declare const calloutVariants: import("tailwind-variants").TVReturnType<{
 }, undefined, import("tailwind-variants").TVReturnTypeLike<{
     tone: {
         info: "border-info/40 bg-info/10";
-        tip: "border-border bg-muted/40";
+        tip: "border-border bg-muted";
         success: "border-success/40 bg-success/10";
         warning: "border-warning/40 bg-warning/10";
         danger: "border-destructive/40 bg-destructive/10";
@@ -33,7 +33,7 @@ interface Props extends HTMLAttributes<HTMLDivElement> {
     title?: string;
     /** Replaces the tone's default icon. `null` drops the icon entirely. */
     icon?: Component | null;
-    children: Snippet;
+    children?: Snippet;
 }
 declare const Callout: Component<Props, {}, "">;
 type Callout = ReturnType<typeof Callout>;

package/dist/components/primitives/DataTable.svelte

@@ -41,7 +41,7 @@
 	style:--table-cols-sm={mobileTemplate}
 >
 	<div
-		class="data-table-row gap-4 px-4 py-2 text-xs font-medium tracking-wide sm:grid-cols-(--table-cols) grid grid-cols-(--table-cols-sm) bg-muted/40 text-muted-foreground uppercase {hiddenCols}"
+		class="data-table-row gap-4 px-4 py-2 text-xs font-medium tracking-wide sm:grid-cols-(--table-cols) grid grid-cols-(--table-cols-sm) bg-muted text-muted-foreground uppercase {hiddenCols}"
 	>
 		{#each columns as col (col.label)}
 			<span class={col.align === 'right' ? 'text-right' : ''}>{col.label}</span>

package/dist/components/primitives/ImageUploadField.svelte

@@ -60,7 +60,7 @@
 				accept="image/*"
 				{disabled}
 				onchange={onFileSelected}
-				class="h-10 px-3 py-2 text-sm file:text-sm file:font-medium flex flex-1 rounded-md border border-input bg-background file:border-0 file:bg-transparent focus-visible:ring-2 focus-visible:ring-ring focus-visible:outline-none disabled:opacity-50"
+				class="h-10 px-3 py-2 text-sm file:text-sm file:font-medium flex flex-1 rounded-md border border-input bg-field file:border-0 file:bg-transparent focus-visible:ring-2 focus-visible:ring-ring focus-visible:outline-none disabled:opacity-50"
 			/>
 			<Button
 				size="sm"

package/dist/components/primitives/alert-dialog/alert-dialog-content.svelte

@@ -19,7 +19,7 @@
 		bind:ref
 		data-slot="alert-dialog-content"
 		class={cn(
-			'data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 gap-4 p-6 shadow-lg sm:max-w-lg fixed start-1/2 top-1/2 z-50 grid max-h-dialog w-screen-inset -translate-x-1/2 -translate-y-1/2 overflow-y-auto rounded-lg border bg-background duration-200',
+			'data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 gap-4 p-6 sm:max-w-lg fixed start-1/2 top-1/2 z-50 grid max-h-dialog w-screen-inset -translate-x-1/2 -translate-y-1/2 overflow-y-auto rounded-xl border bg-raised shadow-popover duration-200',
 			className
 		)}
 		{...restProps}

package/dist/components/primitives/badge/badge.svelte

@@ -7,10 +7,10 @@
 			variant: {
 				default: 'bg-primary text-primary-foreground [a&]:hover:bg-primary/90 border-transparent',
 				secondary:
-					'bg-secondary text-secondary-foreground [a&]:hover:bg-secondary/90 border-transparent',
+					'bg-secondary text-secondary-foreground [a&]:hover:bg-selected border-transparent',
 				destructive:
 					'bg-destructive [a&]:hover:bg-destructive/90 dark:bg-destructive/70 border-transparent text-destructive-foreground',
-				outline: 'text-foreground [a&]:hover:bg-accent [a&]:hover:text-accent-foreground'
+				outline: 'text-foreground [a&]:hover:bg-hover [a&]:hover:text-foreground'
 			}
 		},
 		defaultVariants: {

package/dist/components/primitives/badge/badge.svelte.d.ts

@@ -2,23 +2,23 @@ import { type VariantProps } from 'tailwind-variants';
 export declare const badgeVariants: import("tailwind-variants").TVReturnType<{
     variant: {
         default: "bg-primary text-primary-foreground [a&]:hover:bg-primary/90 border-transparent";
-        secondary: "bg-secondary text-secondary-foreground [a&]:hover:bg-secondary/90 border-transparent";
+        secondary: "bg-secondary text-secondary-foreground [a&]:hover:bg-selected border-transparent";
         destructive: "bg-destructive [a&]:hover:bg-destructive/90 dark:bg-destructive/70 border-transparent text-destructive-foreground";
-        outline: "text-foreground [a&]:hover:bg-accent [a&]:hover:text-accent-foreground";
+        outline: "text-foreground [a&]:hover:bg-hover [a&]:hover:text-foreground";
     };
 }, undefined, "focus-visible:border-ring focus-visible:ring-ring aria-invalid:ring-destructive/20 dark:aria-invalid:ring-destructive/40 aria-invalid:border-destructive inline-flex w-fit shrink-0 items-center justify-center gap-1 overflow-hidden rounded-full border px-2 py-0.5 text-xs font-medium whitespace-nowrap transition focus-visible:ring-3 [&>svg]:pointer-events-none [&>svg]:size-3", {
     variant: {
         default: "bg-primary text-primary-foreground [a&]:hover:bg-primary/90 border-transparent";
-        secondary: "bg-secondary text-secondary-foreground [a&]:hover:bg-secondary/90 border-transparent";
+        secondary: "bg-secondary text-secondary-foreground [a&]:hover:bg-selected border-transparent";
         destructive: "bg-destructive [a&]:hover:bg-destructive/90 dark:bg-destructive/70 border-transparent text-destructive-foreground";
-        outline: "text-foreground [a&]:hover:bg-accent [a&]:hover:text-accent-foreground";
+        outline: "text-foreground [a&]:hover:bg-hover [a&]:hover:text-foreground";
     };
 }, undefined, import("tailwind-variants").TVReturnTypeLike<{
     variant: {
         default: "bg-primary text-primary-foreground [a&]:hover:bg-primary/90 border-transparent";
-        secondary: "bg-secondary text-secondary-foreground [a&]:hover:bg-secondary/90 border-transparent";
+        secondary: "bg-secondary text-secondary-foreground [a&]:hover:bg-selected border-transparent";
         destructive: "bg-destructive [a&]:hover:bg-destructive/90 dark:bg-destructive/70 border-transparent text-destructive-foreground";
-        outline: "text-foreground [a&]:hover:bg-accent [a&]:hover:text-accent-foreground";
+        outline: "text-foreground [a&]:hover:bg-hover [a&]:hover:text-foreground";
     };
 }, undefined>>;
 export type BadgeVariant = VariantProps<typeof badgeVariants>['variant'];

package/dist/components/primitives/button/button.svelte

@@ -8,17 +8,16 @@
 		variants: {
 			variant: {
 				default: 'bg-primary text-primary-foreground shadow-xs hover:bg-primary/90',
-				destructive:
-					'bg-destructive shadow-xs hover:bg-destructive/90 dark:bg-destructive/60 text-destructive-foreground',
+				destructive: 'bg-destructive shadow-xs hover:bg-destructive/90 text-destructive-foreground',
 				outline:
-					'bg-background shadow-xs hover:bg-accent hover:text-accent-foreground dark:bg-input/30 dark:border-input dark:hover:bg-input/50 border',
+					'border border-border-strong bg-transparent shadow-xs hover:bg-hover hover:text-foreground',
 				// Outline with an opaque dark fill: the translucent one washes out over the light 3D canvas.
 				overlay:
-					'bg-background shadow-xs hover:bg-accent hover:text-accent-foreground dark:border-input border',
-				secondary: 'bg-secondary text-secondary-foreground shadow-xs hover:bg-secondary/80',
-				ghost: 'hover:bg-accent hover:text-accent-foreground dark:hover:bg-accent/50',
+					'border border-border-strong bg-raised shadow-raised hover:bg-muted hover:text-foreground',
+				secondary: 'bg-secondary text-secondary-foreground shadow-xs hover:bg-selected',
+				ghost: 'hover:bg-hover hover:text-foreground',
 				dashed:
-					'border border-dashed border-input bg-background text-muted-foreground hover:bg-muted hover:text-foreground',
+					'border border-dashed border-border-strong bg-transparent text-muted-foreground hover:border-input hover:bg-hover hover:text-foreground',
 				link: 'text-primary underline-offset-4 hover:underline'
 			},
 			size: {