@dryui/ui 3.0.0 → 4.0.0

package/dist/accordion/accordion-root.svelte

@@ -54,7 +54,7 @@
 <style>
 	[data-accordion] {
 		display: grid;
-		border: 1px solid var(--dry-color-stroke-weak);
+		border: 1px solid var(--dry-accordion-border, var(--dry-color-stroke-weak));
 		border-radius: var(--dry-radius-lg);
 		overflow: hidden;
 	}

package/dist/adjust/adjust.svelte

@@ -45,23 +45,27 @@
 		return parts.length ? parts.join(' ') : undefined;
 	});
 
-	function applyStyles(node: HTMLElement) {
-		$effect(() => {
-			node.style.cssText = style || '';
-			node.style.setProperty('--_filter', filterString ?? 'none');
-			node.style.setProperty('--_blend', blendMode ?? 'normal');
-		});
-	}
+	let el = $state<HTMLDivElement>();
+
+	$effect(() => {
+		if (!el) return;
+		el.style.cssText = style || '';
+		el.style.setProperty('--_filter', filterString ?? 'none');
+		el.style.setProperty('--_blend', blendMode ?? 'normal');
+	});
 </script>
 
-<div {@attach applyStyles} data-adjust class={className} {...rest}>
+<div bind:this={el} data-adjust class={className} {...rest}>
 	{@render children()}
 </div>
 
 <style>
 	[data-adjust] {
+		block-size: var(--dry-adjust-block-size, auto);
 		border-radius: inherit;
 		filter: var(--_filter, none);
+		min-block-size: var(--dry-adjust-min-block-size, 0);
 		mix-blend-mode: var(--_blend, normal);
+		overflow: var(--dry-adjust-overflow, visible);
 	}
 </style>

package/dist/alpha-slider/alpha-slider-input.svelte

@@ -29,23 +29,24 @@
 		onchange?.(value);
 	}
 
-	function setTrackBg(node: HTMLDivElement) {
-		$effect(() => {
-			node.style.setProperty('--_track-bg', `linear-gradient(to right, transparent, ${color})`);
-		});
-	}
-
-	function setSwatchBg(node: HTMLDivElement) {
-		$effect(() => {
-			node.style.setProperty('--_swatch-bg', swatchColor);
-		});
-	}
+	let trackEl = $state<HTMLDivElement>();
+	let swatchEl = $state<HTMLDivElement>();
+
+	$effect(() => {
+		if (!trackEl) return;
+		trackEl.style.setProperty('--_track-bg', `linear-gradient(to right, transparent, ${color})`);
+	});
+
+	$effect(() => {
+		if (!swatchEl) return;
+		swatchEl.style.setProperty('--_swatch-bg', swatchColor);
+	});
 </script>
 
 <div data-alpha-slider class={className} {...rest}>
 	<div data-alpha-slider-track-wrapper>
 		<div data-alpha-slider-checkerboard></div>
-		<div {@attach setTrackBg} data-alpha-slider-color-track></div>
+		<div bind:this={trackEl} data-alpha-slider-color-track></div>
 		<input
 			type="range"
 			data-alpha-slider-input
@@ -63,7 +64,7 @@
 	<div data-alpha-slider-meta>
 		<div data-alpha-slider-swatch-wrapper>
 			<div data-alpha-slider-checkerboard></div>
-			<div {@attach setSwatchBg} data-alpha-slider-swatch></div>
+			<div bind:this={swatchEl} data-alpha-slider-swatch></div>
 		</div>
 		<span data-alpha-slider-value-label>{value}%</span>
 	</div>

package/dist/app-frame/app-frame.svelte

@@ -32,12 +32,14 @@
 
 <style>
 	[data-app-frame] {
+		block-size: var(--dry-app-frame-block-size, auto);
 		display: grid;
 		grid-template-rows: auto minmax(0, 1fr);
+		min-block-size: var(--dry-app-frame-min-block-size, 0);
 		border: 1px solid var(--dry-app-frame-border, var(--dry-color-stroke-weak));
 		border-radius: var(--dry-app-frame-radius, var(--dry-radius-xl));
 		background: var(--dry-app-frame-bg, var(--dry-color-bg-base));
-		overflow: clip;
+		overflow: var(--dry-app-frame-overflow, clip);
 		transition:
 			background-color var(--dry-app-frame-transition, 0s) ease,
 			border-color var(--dry-app-frame-transition, 0s) ease;
@@ -126,6 +128,7 @@
 		display: grid;
 		padding: var(--dry-app-frame-content-padding, 0);
 		min-block-size: 0;
+		overflow: var(--dry-app-frame-content-overflow, visible);
 	}
 
 	@media (prefers-reduced-motion: reduce) {

package/dist/aspect-ratio/aspect-ratio.svelte

@@ -9,14 +9,15 @@
 
 	let { ratio = 16 / 9, class: className, children, ...rest }: Props = $props();
 
-	function applyRatio(node: HTMLElement) {
-		$effect(() => {
-			node.style.setProperty('--_ratio', String(ratio));
-		});
-	}
+	let el = $state<HTMLDivElement>();
+
+	$effect(() => {
+		if (!el) return;
+		el.style.setProperty('--_ratio', String(ratio));
+	});
 </script>
 
-<div {@attach applyRatio} class={className} {...rest}>
+<div bind:this={el} class={className} {...rest}>
 	{@render children()}
 </div>
 

package/dist/aurora/aurora.svelte

@@ -1,5 +1,4 @@
 <script lang="ts">
-	import { onMount } from 'svelte';
 	import type { Snippet } from 'svelte';
 	import type { HTMLAttributes } from 'svelte/elements';
 	import type { BlendMode } from '@dryui/primitives/aurora';
@@ -10,7 +9,7 @@
 		observeReducedMotionPreference,
 		registerPropertyOnce,
 		supportsPropertyRegistration
-	} from '@dryui/primitives/internal/motion';
+	} from '@dryui/primitives';
 
 	interface Props extends HTMLAttributes<HTMLDivElement> {
 		palette?: 'sunrise' | 'ocean' | 'forest' | 'cosmic' | readonly [string, string, string];
@@ -65,7 +64,7 @@
 	const paletteName = $derived(typeof palette === 'string' ? palette : 'custom');
 	const customPalette = $derived(Array.isArray(palette) ? palette : null);
 
-	onMount(() => {
+	$effect(() => {
 		supportsAnimation = supportsPropertyRegistration();
 		registerPropertyOnce({
 			name: '--dry-aurora-angle',
@@ -108,47 +107,36 @@
 		};
 	});
 
-	function applyRootStyles(node: HTMLElement) {
-		$effect(() => {
-			node.style.cssText = style || '';
-			if (customPalette?.[0]) node.style.setProperty('--dry-aurora-color-1', customPalette[0]);
-			else node.style.removeProperty('--dry-aurora-color-1');
-			if (customPalette?.[1]) node.style.setProperty('--dry-aurora-color-2', customPalette[1]);
-			else node.style.removeProperty('--dry-aurora-color-2');
-			if (customPalette?.[2]) node.style.setProperty('--dry-aurora-color-3', customPalette[2]);
-			else node.style.removeProperty('--dry-aurora-color-3');
-			node.style.setProperty('--dry-aurora-duration', speedDuration);
-			node.style.setProperty(
-				'--dry-aurora-intensity',
-				String(Math.max(0, Math.min(100, intensity)))
-			);
-			node.style.setProperty('--dry-aurora-waviness', String(Math.max(0, Math.min(100, waviness))));
-		});
-	}
-
-	function captureRoot(node: HTMLElement) {
-		rootNode = node;
-		return () => {
-			if (rootNode === node) {
-				rootNode = null;
-			}
-		};
-	}
+	let backdropEl = $state<HTMLDivElement>();
+
+	$effect(() => {
+		if (!rootNode) return;
+		const node = rootNode;
+		node.style.cssText = style || '';
+		if (customPalette?.[0]) node.style.setProperty('--_aurora-color-1', customPalette[0]);
+		else node.style.removeProperty('--_aurora-color-1');
+		if (customPalette?.[1]) node.style.setProperty('--_aurora-color-2', customPalette[1]);
+		else node.style.removeProperty('--_aurora-color-2');
+		if (customPalette?.[2]) node.style.setProperty('--_aurora-color-3', customPalette[2]);
+		else node.style.removeProperty('--_aurora-color-3');
+		node.style.setProperty('--dry-aurora-duration', speedDuration);
+		node.style.setProperty('--dry-aurora-intensity', String(Math.max(0, Math.min(100, intensity))));
+		node.style.setProperty('--dry-aurora-waviness', String(Math.max(0, Math.min(100, waviness))));
+	});
 
-	function applyBackdropStyles(node: HTMLElement) {
-		$effect(() => {
-			if (blendMode) node.style.setProperty('--_aurora-backdrop-blend', blendMode);
-			else node.style.removeProperty('--_aurora-backdrop-blend');
-			if (layerOpacity != null)
-				node.style.setProperty('--_aurora-backdrop-opacity', String(layerOpacity));
-			else node.style.removeProperty('--_aurora-backdrop-opacity');
-		});
-	}
+	$effect(() => {
+		if (!backdropEl) return;
+		const node = backdropEl;
+		if (blendMode) node.style.setProperty('--_aurora-backdrop-blend', blendMode);
+		else node.style.removeProperty('--_aurora-backdrop-blend');
+		if (layerOpacity != null)
+			node.style.setProperty('--_aurora-backdrop-opacity', String(layerOpacity));
+		else node.style.removeProperty('--_aurora-backdrop-opacity');
+	});
 </script>
 
 <div
-	{@attach captureRoot}
-	{@attach applyRootStyles}
+	bind:this={rootNode}
 	data-aurora
 	class={className}
 	data-palette={paletteName}
@@ -157,7 +145,7 @@
 	data-color-space={colorSpace}
 	{...rest}
 >
-	<div {@attach applyBackdropStyles} data-aurora-backdrop aria-hidden="true">
+	<div bind:this={backdropEl} data-aurora-backdrop aria-hidden="true">
 		<span data-aurora-layer data-layer="one"></span>
 		<span data-aurora-layer data-layer="two"></span>
 		<span data-aurora-layer data-layer="three"></span>
@@ -182,9 +170,6 @@
 			color-mix(in srgb, var(--dry-color-bg-base) 84%, var(--dry-color-bg-overlay)),
 			color-mix(in srgb, var(--dry-color-bg-overlay) 92%, transparent)
 		);
-		--dry-aurora-color-1: rgba(120, 119, 255, 0.58);
-		--dry-aurora-color-2: rgba(56, 189, 248, 0.48);
-		--dry-aurora-color-3: rgba(244, 114, 182, 0.42);
 
 		position: relative;
 		overflow: hidden;
@@ -194,33 +179,27 @@
 	}
 
 	[data-aurora][data-palette='sunrise'] {
-		--dry-aurora-color-1: rgba(251, 146, 60, 0.58);
-		--dry-aurora-color-2: rgba(250, 204, 21, 0.45);
-		--dry-aurora-color-3: rgba(244, 114, 182, 0.42);
+		--_aurora-color-1: rgba(251, 146, 60, 0.58);
+		--_aurora-color-2: rgba(250, 204, 21, 0.45);
+		--_aurora-color-3: rgba(244, 114, 182, 0.42);
 	}
 
 	[data-aurora][data-palette='ocean'] {
-		--dry-aurora-color-1: rgba(34, 197, 94, 0.42);
-		--dry-aurora-color-2: rgba(14, 165, 233, 0.55);
-		--dry-aurora-color-3: rgba(59, 130, 246, 0.48);
+		--_aurora-color-1: rgba(34, 197, 94, 0.42);
+		--_aurora-color-2: rgba(14, 165, 233, 0.55);
+		--_aurora-color-3: rgba(59, 130, 246, 0.48);
 	}
 
 	[data-aurora][data-palette='forest'] {
-		--dry-aurora-color-1: rgba(34, 197, 94, 0.48);
-		--dry-aurora-color-2: rgba(132, 204, 22, 0.42);
-		--dry-aurora-color-3: rgba(16, 185, 129, 0.44);
+		--_aurora-color-1: rgba(34, 197, 94, 0.48);
+		--_aurora-color-2: rgba(132, 204, 22, 0.42);
+		--_aurora-color-3: rgba(16, 185, 129, 0.44);
 	}
 
 	[data-aurora][data-palette='cosmic'] {
-		--dry-aurora-color-1: rgba(167, 139, 250, 0.6);
-		--dry-aurora-color-2: rgba(56, 189, 248, 0.5);
-		--dry-aurora-color-3: rgba(236, 72, 153, 0.42);
-	}
-
-	[data-aurora][data-palette='custom'] {
-		--dry-aurora-color-1: rgba(56, 189, 248, 0.5);
-		--dry-aurora-color-2: rgba(99, 102, 241, 0.48);
-		--dry-aurora-color-3: rgba(20, 184, 166, 0.42);
+		--_aurora-color-1: rgba(167, 139, 250, 0.6);
+		--_aurora-color-2: rgba(56, 189, 248, 0.5);
+		--_aurora-color-3: rgba(236, 72, 153, 0.42);
 	}
 
 	[data-aurora-backdrop] {
@@ -245,22 +224,46 @@
 
 	[data-aurora-layer][data-layer='one'] {
 		background:
-			radial-gradient(ellipse 70% 28% at 20% 35%, var(--dry-aurora-color-1) 0, transparent 62%),
-			radial-gradient(ellipse 50% 40% at 45% 55%, var(--dry-aurora-color-1) 0, transparent 58%);
+			radial-gradient(
+				ellipse 70% 28% at 20% 35%,
+				var(--dry-aurora-color-1, var(--_aurora-color-1, rgba(167, 139, 250, 0.6))) 0,
+				transparent 62%
+			),
+			radial-gradient(
+				ellipse 50% 40% at 45% 55%,
+				var(--dry-aurora-color-1, var(--_aurora-color-1, rgba(167, 139, 250, 0.6))) 0,
+				transparent 58%
+			);
 		filter: blur(calc(40px * (0.5 + var(--dry-aurora-waviness, 50) / 100)));
 	}
 
 	[data-aurora-layer][data-layer='two'] {
 		background:
-			radial-gradient(ellipse 65% 32% at 72% 28%, var(--dry-aurora-color-2) 0, transparent 60%),
-			radial-gradient(ellipse 55% 36% at 38% 68%, var(--dry-aurora-color-2) 0, transparent 56%);
+			radial-gradient(
+				ellipse 65% 32% at 72% 28%,
+				var(--dry-aurora-color-2, var(--_aurora-color-2, rgba(56, 189, 248, 0.5))) 0,
+				transparent 60%
+			),
+			radial-gradient(
+				ellipse 55% 36% at 38% 68%,
+				var(--dry-aurora-color-2, var(--_aurora-color-2, rgba(56, 189, 248, 0.5))) 0,
+				transparent 56%
+			);
 		filter: blur(calc(64px * (0.5 + var(--dry-aurora-waviness, 50) / 100)));
 	}
 
 	[data-aurora-layer][data-layer='three'] {
 		background:
-			radial-gradient(ellipse 60% 30% at 58% 78%, var(--dry-aurora-color-3) 0, transparent 64%),
-			radial-gradient(ellipse 48% 38% at 25% 42%, var(--dry-aurora-color-3) 0, transparent 54%);
+			radial-gradient(
+				ellipse 60% 30% at 58% 78%,
+				var(--dry-aurora-color-3, var(--_aurora-color-3, rgba(236, 72, 153, 0.42))) 0,
+				transparent 64%
+			),
+			radial-gradient(
+				ellipse 48% 38% at 25% 42%,
+				var(--dry-aurora-color-3, var(--_aurora-color-3, rgba(236, 72, 153, 0.42))) 0,
+				transparent 54%
+			);
 		filter: blur(calc(52px * (0.5 + var(--dry-aurora-waviness, 50) / 100)));
 	}
 
@@ -295,7 +298,7 @@
 		pointer-events: none;
 		background: radial-gradient(
 			ellipse 80% 50% at 50% 50%,
-			var(--dry-aurora-color-1) 0,
+			var(--dry-aurora-color-1, var(--_aurora-color-1, rgba(167, 139, 250, 0.6))) 0,
 			transparent 70%
 		);
 		mix-blend-mode: soft-light;
@@ -317,12 +320,22 @@
 		background:
 			radial-gradient(
 				ellipse 70% 28% at 20% 35%,
-				color-mix(in oklch, var(--dry-aurora-color-1) 100%, transparent) 0,
+				color-mix(
+						in oklch,
+						var(--dry-aurora-color-1, var(--_aurora-color-1, rgba(167, 139, 250, 0.6))) 100%,
+						transparent
+					)
+					0,
 				transparent 62%
 			),
 			radial-gradient(
 				ellipse 50% 40% at 45% 55%,
-				color-mix(in oklch, var(--dry-aurora-color-1) 100%, transparent) 0,
+				color-mix(
+						in oklch,
+						var(--dry-aurora-color-1, var(--_aurora-color-1, rgba(167, 139, 250, 0.6))) 100%,
+						transparent
+					)
+					0,
 				transparent 58%
 			);
 	}
@@ -331,12 +344,22 @@
 		background:
 			radial-gradient(
 				ellipse 65% 32% at 72% 28%,
-				color-mix(in oklch, var(--dry-aurora-color-2) 100%, transparent) 0,
+				color-mix(
+						in oklch,
+						var(--dry-aurora-color-2, var(--_aurora-color-2, rgba(56, 189, 248, 0.5))) 100%,
+						transparent
+					)
+					0,
 				transparent 60%
 			),
 			radial-gradient(
 				ellipse 55% 36% at 38% 68%,
-				color-mix(in oklch, var(--dry-aurora-color-2) 100%, transparent) 0,
+				color-mix(
+						in oklch,
+						var(--dry-aurora-color-2, var(--_aurora-color-2, rgba(56, 189, 248, 0.5))) 100%,
+						transparent
+					)
+					0,
 				transparent 56%
 			);
 	}
@@ -345,12 +368,22 @@
 		background:
 			radial-gradient(
 				ellipse 60% 30% at 58% 78%,
-				color-mix(in oklch, var(--dry-aurora-color-3) 100%, transparent) 0,
+				color-mix(
+						in oklch,
+						var(--dry-aurora-color-3, var(--_aurora-color-3, rgba(236, 72, 153, 0.42))) 100%,
+						transparent
+					)
+					0,
 				transparent 64%
 			),
 			radial-gradient(
 				ellipse 48% 38% at 25% 42%,
-				color-mix(in oklch, var(--dry-aurora-color-3) 100%, transparent) 0,
+				color-mix(
+						in oklch,
+						var(--dry-aurora-color-3, var(--_aurora-color-3, rgba(236, 72, 153, 0.42))) 100%,
+						transparent
+					)
+					0,
 				transparent 54%
 			);
 	}
@@ -360,12 +393,22 @@
 		background:
 			radial-gradient(
 				ellipse 70% 28% at 20% 35%,
-				color-mix(in oklab, var(--dry-aurora-color-1) 100%, transparent) 0,
+				color-mix(
+						in oklab,
+						var(--dry-aurora-color-1, var(--_aurora-color-1, rgba(167, 139, 250, 0.6))) 100%,
+						transparent
+					)
+					0,
 				transparent 62%
 			),
 			radial-gradient(
 				ellipse 50% 40% at 45% 55%,
-				color-mix(in oklab, var(--dry-aurora-color-1) 100%, transparent) 0,
+				color-mix(
+						in oklab,
+						var(--dry-aurora-color-1, var(--_aurora-color-1, rgba(167, 139, 250, 0.6))) 100%,
+						transparent
+					)
+					0,
 				transparent 58%
 			);
 	}
@@ -374,12 +417,22 @@
 		background:
 			radial-gradient(
 				ellipse 65% 32% at 72% 28%,
-				color-mix(in oklab, var(--dry-aurora-color-2) 100%, transparent) 0,
+				color-mix(
+						in oklab,
+						var(--dry-aurora-color-2, var(--_aurora-color-2, rgba(56, 189, 248, 0.5))) 100%,
+						transparent
+					)
+					0,
 				transparent 60%
 			),
 			radial-gradient(
 				ellipse 55% 36% at 38% 68%,
-				color-mix(in oklab, var(--dry-aurora-color-2) 100%, transparent) 0,
+				color-mix(
+						in oklab,
+						var(--dry-aurora-color-2, var(--_aurora-color-2, rgba(56, 189, 248, 0.5))) 100%,
+						transparent
+					)
+					0,
 				transparent 56%
 			);
 	}
@@ -388,12 +441,22 @@
 		background:
 			radial-gradient(
 				ellipse 60% 30% at 58% 78%,
-				color-mix(in oklab, var(--dry-aurora-color-3) 100%, transparent) 0,
+				color-mix(
+						in oklab,
+						var(--dry-aurora-color-3, var(--_aurora-color-3, rgba(236, 72, 153, 0.42))) 100%,
+						transparent
+					)
+					0,
 				transparent 64%
 			),
 			radial-gradient(
 				ellipse 48% 38% at 25% 42%,
-				color-mix(in oklab, var(--dry-aurora-color-3) 100%, transparent) 0,
+				color-mix(
+						in oklab,
+						var(--dry-aurora-color-3, var(--_aurora-color-3, rgba(236, 72, 153, 0.42))) 100%,
+						transparent
+					)
+					0,
 				transparent 54%
 			);
 	}

package/dist/avatar/avatar.svelte

@@ -56,17 +56,9 @@
 </script>
 
 {#if hasOverlay}
-	<div data-avatar-wrapper>
-		<span
-			role="img"
-			aria-label={alt}
-			data-avatar
-			{...variantAttrs({ size, shape })}
-			class={className}
-			{...rest}
-		>
+	<div data-avatar-wrapper data-shape={shape} class={className} {...rest}>
+		<span role="img" aria-label={alt} data-avatar {...variantAttrs({ size, shape })}>
 			{#if showImage}
-				<!-- dryui-allow raw-img: Avatar owns the intrinsic image primitive and fallback/error lifecycle. -->
 				<img {src} {alt} onerror={handleError} />
 			{:else if children}
 				{@render children()}
@@ -91,7 +83,6 @@
 		{...rest}
 	>
 		{#if showImage}
-			<!-- dryui-allow raw-img: Avatar owns the intrinsic image primitive and fallback/error lifecycle. -->
 			<img {src} {alt} onerror={handleError} />
 		{:else if children}
 			{@render children()}
@@ -112,6 +103,7 @@
 		--dry-avatar-radius: var(--dry-radius-full);
 		--dry-avatar-font-size: var(--dry-type-small-size, var(--dry-text-sm-size));
 
+		position: relative;
 		display: inline-grid;
 		place-items: center;
 		aspect-ratio: 1;
@@ -130,6 +122,10 @@
 	}
 
 	[data-avatar] img {
+		position: absolute;
+		inset: 0;
+		block-size: 100%;
+		aspect-ratio: 1;
 		object-fit: cover;
 		border-radius: inherit;
 	}
@@ -168,17 +164,28 @@
 
 	/* ── Status indicator ─────────────────────────────────────────────────────── */
 
+	/* For circular avatars the corner is empty space; offset the dot inward
+	   by ~6% so its centre lands on the rim near the 4-5 o'clock position. */
 	[data-avatar-status] {
 		position: absolute;
-		bottom: 0;
-		right: 0;
+		bottom: var(--dry-avatar-status-offset, 6%);
+		right: var(--dry-avatar-status-offset, 6%);
 		aspect-ratio: 1;
-		height: var(--dry-avatar-status-size, 0.625rem);
+		height: var(--dry-avatar-status-size, 28%);
+		max-height: 14px;
+		min-height: 8px;
 		border-radius: 50%;
-		border: 2px solid var(--dry-color-bg-raised, #ffffff);
+		border: 2px solid var(--dry-color-bg-base);
+		box-shadow: 0 0 0 1px color-mix(in srgb, var(--dry-color-stroke-weak) 60%, transparent);
 		z-index: 1;
 	}
 
+	[data-avatar-wrapper][data-shape='square'] [data-avatar-status] {
+		bottom: 0;
+		right: 0;
+		transform: translate(25%, 25%);
+	}
+
 	[data-avatar-status][data-status='online'] {
 		background-color: var(--dry-avatar-status-color, var(--dry-color-fill-success));
 	}

package/dist/badge/badge.svelte

@@ -147,8 +147,8 @@
 	}
 
 	[data-variant='solid'][data-color='purple'] {
-		--_badge-bg-default: color-mix(in srgb, var(--dry-color-fill-brand) 80%, hsl(280, 65%, 55%));
-		--_badge-color-default: var(--dry-color-on-brand);
+		--_badge-bg-default: var(--dry-color-fill-purple);
+		--_badge-color-default: var(--dry-color-on-purple);
 	}
 
 	[data-variant='solid'][data-color='orange'] {
@@ -192,12 +192,8 @@
 	}
 
 	[data-variant='outline'][data-color='purple'] {
-		--_badge-color-default: color-mix(in srgb, var(--dry-color-fill-brand) 80%, hsl(280, 65%, 55%));
-		--_badge-border-default: color-mix(
-			in srgb,
-			var(--dry-color-stroke-brand) 60%,
-			hsl(280, 50%, 70%)
-		);
+		--_badge-color-default: var(--dry-color-text-purple);
+		--_badge-border-default: var(--dry-color-stroke-purple);
 	}
 
 	[data-variant='outline'][data-color='orange'] {
@@ -232,7 +228,7 @@
 	[data-variant='soft'][data-color='red'] {
 		--_badge-bg-default: var(--dry-color-fill-error-weak);
 		--_badge-color-default: var(--dry-color-text-error);
-		--_badge-border-default: var(--dry-color-stroke-error-weak);
+		--_badge-border-default: var(--dry-color-stroke-error);
 	}
 
 	[data-variant='soft'][data-color='green'] {
@@ -246,12 +242,8 @@
 	}
 
 	[data-variant='soft'][data-color='purple'] {
-		--_badge-bg-default: color-mix(
-			in srgb,
-			var(--dry-color-fill-brand-weak) 70%,
-			hsl(280, 65%, 55%, 0.1)
-		);
-		--_badge-color-default: color-mix(in srgb, var(--dry-color-text-brand) 70%, hsl(280, 65%, 40%));
+		--_badge-bg-default: var(--dry-color-fill-purple-weak);
+		--_badge-color-default: var(--dry-color-text-purple);
 	}
 
 	[data-variant='soft'][data-color='orange'] {
@@ -295,7 +287,7 @@
 		background-color: var(--dry-color-fill-yellow);
 	}
 	[data-dot][data-color='purple'] {
-		background-color: color-mix(in srgb, var(--dry-color-fill-brand) 70%, hsl(280, 65%, 55%));
+		background-color: var(--dry-color-fill-purple);
 	}
 	[data-dot][data-color='orange'] {
 		background-color: color-mix(