@dryui/ui 4.0.0 → 4.0.2

package/dist/stepper/stepper.meta.d.ts

@@ -1,4 +1,4 @@
-/** DryUI agent metadata. Consumed by @dryui/mcp/load-component-meta. */
+/** DryUI agent metadata. Used by docs generation and skill manifests. */
 declare const _default: {
     name: string;
     description: string;

package/dist/stepper/stepper.meta.js

@@ -1,4 +1,4 @@
-/** DryUI agent metadata. Consumed by @dryui/mcp/load-component-meta. */
+/** DryUI agent metadata. Used by docs generation and skill manifests. */
 export default {
     name: 'Stepper',
     description: 'Step-by-step progress indicator',

package/dist/svg/svg.meta.d.ts

@@ -1,4 +1,4 @@
-/** DryUI agent metadata. Consumed by @dryui/mcp/load-component-meta. */
+/** DryUI agent metadata. Used by docs generation and skill manifests. */
 declare const _default: {
     name: string;
     description: string;

package/dist/svg/svg.meta.js

@@ -1,4 +1,4 @@
-/** DryUI agent metadata. Consumed by @dryui/mcp/load-component-meta. */
+/** DryUI agent metadata. Used by docs generation and skill manifests. */
 export default {
     name: 'Svg',
     description: 'Accessible SVG wrapper with viewBox and aria-label defaults',

package/dist/table/table.meta.d.ts

@@ -1,4 +1,4 @@
-/** DryUI agent metadata. Consumed by @dryui/mcp/load-component-meta. */
+/** DryUI agent metadata. Used by docs generation and skill manifests. */
 declare const _default: {
     name: string;
     description: string;

package/dist/table/table.meta.js

@@ -1,4 +1,4 @@
-/** DryUI agent metadata. Consumed by @dryui/mcp/load-component-meta. */
+/** DryUI agent metadata. Used by docs generation and skill manifests. */
 export default {
     name: 'Table',
     description: 'Data table with header, body, footer sections',

package/dist/table-of-contents/table-of-contents.meta.d.ts

@@ -1,4 +1,4 @@
-/** DryUI agent metadata. Consumed by @dryui/mcp/load-component-meta. */
+/** DryUI agent metadata. Used by docs generation and skill manifests. */
 declare const _default: {
     name: string;
     description: string;

package/dist/table-of-contents/table-of-contents.meta.js

@@ -1,4 +1,4 @@
-/** DryUI agent metadata. Consumed by @dryui/mcp/load-component-meta. */
+/** DryUI agent metadata. Used by docs generation and skill manifests. */
 export default {
     name: 'TableOfContents',
     description: 'Auto-generated table of contents from headings',

package/dist/tabs/tabs.meta.d.ts

@@ -1,4 +1,4 @@
-/** DryUI agent metadata. Consumed by @dryui/mcp/load-component-meta. */
+/** DryUI agent metadata. Used by docs generation and skill manifests. */
 declare const _default: {
     name: string;
     description: string;

package/dist/tabs/tabs.meta.js

@@ -1,4 +1,4 @@
-/** DryUI agent metadata. Consumed by @dryui/mcp/load-component-meta. */
+/** DryUI agent metadata. Used by docs generation and skill manifests. */
 export default {
     name: 'Tabs',
     description: 'Tabbed content navigation',

package/dist/tag/tag-button.svelte

@@ -146,12 +146,8 @@
 	}
 
 	[data-variant='solid'][data-color='orange'] {
-		--_tag-bg-default: color-mix(
-			in srgb,
-			var(--dry-color-fill-warning) 70%,
-			var(--dry-color-fill-error)
-		);
-		--_tag-color-default: var(--dry-color-on-warning);
+		--_tag-bg-default: var(--dry-color-fill-orange);
+		--_tag-color-default: var(--dry-color-on-orange);
 	}
 
 	/* ── Variant: outline ─────────────────────────────────────────────────────── */

package/dist/tag/tag.meta.d.ts

@@ -1,4 +1,4 @@
-/** DryUI agent metadata. Consumed by @dryui/mcp/load-component-meta. */
+/** DryUI agent metadata. Used by docs generation and skill manifests. */
 declare const _default: {
     name: string;
     description: string;

package/dist/tag/tag.meta.js

@@ -1,4 +1,4 @@
-/** DryUI agent metadata. Consumed by @dryui/mcp/load-component-meta. */
+/** DryUI agent metadata. Used by docs generation and skill manifests. */
 export default {
     name: 'Tag',
     description: 'Small labeled tag element with color and variant support',

package/dist/tags-input/tags-input-tag.svelte

@@ -41,7 +41,7 @@
 		margin-inline-end: var(--dry-tags-input-gap, var(--dry-space-1_5));
 		margin-block: calc(var(--dry-tags-input-gap, var(--dry-space-1_5)) / 2);
 		background: color-mix(in srgb, var(--dry-color-fill-brand) 15%, transparent);
-		color: var(--dry-color-fill-brand);
+		color: var(--dry-color-text-brand);
 		border-radius: var(--dry-tags-input-tag-radius, var(--dry-radius-md));
 		overflow: hidden;
 		font-size: var(

package/dist/tags-input/tags-input.meta.d.ts

@@ -1,4 +1,4 @@
-/** DryUI agent metadata. Consumed by @dryui/mcp/load-component-meta. */
+/** DryUI agent metadata. Used by docs generation and skill manifests. */
 declare const _default: {
     name: string;
     description: string;

package/dist/tags-input/tags-input.meta.js

@@ -1,4 +1,4 @@
-/** DryUI agent metadata. Consumed by @dryui/mcp/load-component-meta. */
+/** DryUI agent metadata. Used by docs generation and skill manifests. */
 export default {
     name: 'TagsInput',
     description: 'Input for managing a list of tags',

package/dist/text/text.meta.d.ts

@@ -1,4 +1,4 @@
-/** DryUI agent metadata. Consumed by @dryui/mcp/load-component-meta. */
+/** DryUI agent metadata. Used by docs generation and skill manifests. */
 declare const _default: {
     name: string;
     description: string;

package/dist/text/text.meta.js

@@ -1,4 +1,4 @@
-/** DryUI agent metadata. Consumed by @dryui/mcp/load-component-meta. */
+/** DryUI agent metadata. Used by docs generation and skill manifests. */
 export default {
     name: 'Text',
     description: 'Standalone body copy export for starter-kit typography',

package/dist/textarea/textarea.meta.d.ts

@@ -1,4 +1,4 @@
-/** DryUI agent metadata. Consumed by @dryui/mcp/load-component-meta. */
+/** DryUI agent metadata. Used by docs generation and skill manifests. */
 declare const _default: {
     name: string;
     description: string;

package/dist/textarea/textarea.meta.js

@@ -1,4 +1,4 @@
-/** DryUI agent metadata. Consumed by @dryui/mcp/load-component-meta. */
+/** DryUI agent metadata. Used by docs generation and skill manifests. */
 export default {
     name: 'Textarea',
     description: 'Multi-line text input',

package/dist/theme-toggle/theme-toggle.meta.d.ts

@@ -1,4 +1,4 @@
-/** DryUI agent metadata. Consumed by @dryui/mcp/load-component-meta. */
+/** DryUI agent metadata. Used by docs generation and skill manifests. */
 declare const _default: {
     name: string;
     description: string;

package/dist/theme-toggle/theme-toggle.meta.js

@@ -1,4 +1,4 @@
-/** DryUI agent metadata. Consumed by @dryui/mcp/load-component-meta. */
+/** DryUI agent metadata. Used by docs generation and skill manifests. */
 export default {
     name: 'ThemeToggle',
     description: 'Persisted light/dark theme switcher with system-preference fallback',

package/dist/themes/aurora.css

@@ -10,6 +10,8 @@
 
 [data-theme='aurora'],
 .theme-aurora {
+	color-scheme: light;
+
 	/* ─── Public aliases (aurora) ─────────────────────────────────── */
 	--dry-color-primary: hsl(15, 85%, 55%);
 	--dry-color-primary-hover: hsl(15, 85%, 47%);
@@ -24,11 +26,12 @@
 
 	/* ─── Brand — warm coral instead of cold blue ─────────────────── */
 	--dry-color-text-brand: hsl(15, 80%, 42%);
+	--dry-color-fill-brand: var(--dry-color-primary);
 	--dry-color-fill-brand-active: hsl(15, 85%, 41%);
 	--dry-color-fill-brand-weak: hsla(15, 85%, 55%, 0.07);
 	--dry-color-stroke-brand: hsla(15, 85%, 55%, 0.5);
 	--dry-color-stroke-brand-strong: hsla(15, 85%, 55%, 0.8);
-	--dry-color-on-brand: #ffffff;
+	--dry-color-on-brand: hsl(15, 30%, 10%);
 	--dry-color-focus-ring: hsla(15, 85%, 55%, 0.4);
 
 	/* ─── Accent — golden amber ───────────────────────────────────── */
@@ -36,17 +39,20 @@
 	--dry-color-fill-accent-weak: hsla(38, 92%, 55%, 0.08);
 	--dry-color-stroke-accent: hsla(38, 92%, 55%, 0.5);
 	--dry-color-stroke-accent-strong: hsla(38, 92%, 55%, 0.8);
+	--dry-color-on-accent: hsl(38, 30%, 10%);
 
 	/* ─── Status: Error (warm-shifted hue 8) ──────────────────────── */
 	--dry-color-text-error: hsl(8, 70%, 38%);
-	--dry-color-fill-error-hover: hsl(8, 75%, 44%);
+	--dry-color-fill-error: var(--dry-color-danger);
+	--dry-color-fill-error-hover: hsl(8, 75%, 55%);
 	--dry-color-fill-error-weak: hsla(8, 75%, 52%, 0.1);
 	--dry-color-stroke-error: hsl(8, 50%, 70%);
 	--dry-color-stroke-error-strong: hsla(8, 75%, 52%, 0.8);
-	--dry-color-on-error: #ffffff;
+	--dry-color-on-error: hsl(8, 30%, 5%);
 
 	/* ─── Status: Warning ─────────────────────────────────────────── */
 	--dry-color-text-warning: hsl(40, 80%, 32%);
+	--dry-color-fill-warning: var(--dry-color-warning);
 	--dry-color-fill-warning-weak: hsla(40, 85%, 52%, 0.1);
 	--dry-color-stroke-warning: hsl(40, 60%, 65%);
 	--dry-color-stroke-warning-strong: hsla(40, 85%, 52%, 0.8);
@@ -54,10 +60,11 @@
 
 	/* ─── Status: Success ─────────────────────────────────────────── */
 	--dry-color-text-success: hsl(140, 60%, 30%);
+	--dry-color-fill-success: var(--dry-color-success);
 	--dry-color-fill-success-weak: hsla(140, 60%, 45%, 0.1);
 	--dry-color-stroke-success: hsl(140, 50%, 65%);
 	--dry-color-stroke-success-strong: hsla(140, 60%, 45%, 0.8);
-	--dry-color-on-success: #ffffff;
+	--dry-color-on-success: hsl(140, 30%, 8%);
 
 	/* ─── Status: Info ────────────────────────────────────────────── */
 	--dry-color-text-info: hsl(205, 70%, 35%);
@@ -65,13 +72,22 @@
 	--dry-color-fill-info-weak: hsla(205, 70%, 50%, 0.1);
 	--dry-color-stroke-info: hsl(205, 50%, 70%);
 	--dry-color-stroke-info-strong: hsla(205, 70%, 50%, 0.8);
+	--dry-color-on-info: hsl(205, 30%, 10%);
 
 	/* ─── Purple semantic palette (badge / tag purple variants) ───── */
 	--dry-color-text-purple: hsl(290, 55%, 38%);
 	--dry-color-fill-purple: hsl(290, 65%, 55%);
 	--dry-color-fill-purple-weak: hsla(290, 65%, 55%, 0.1);
 	--dry-color-stroke-purple: hsla(290, 65%, 55%, 0.5);
-	--dry-color-on-purple: #ffffff;
+	--dry-color-on-purple: hsl(290, 30%, 5%);
+
+	/* ─── Orange semantic palette (badge / tag orange variants) ───── */
+	--dry-color-fill-orange: color-mix(
+		in srgb,
+		var(--dry-color-fill-warning) 70%,
+		var(--dry-color-fill-error)
+	);
+	--dry-color-on-orange: hsl(24, 30%, 10%);
 
 	/* ─── Overlay backdrops — warm-tinted ─────────────────────────── */
 	--dry-color-overlay-backdrop: hsla(20, 30%, 15%, 0.4);
@@ -119,6 +135,8 @@
 /* ─── Aurora Dark variant ────────────────────────────────────────── */
 [data-theme='aurora-dark'],
 .theme-aurora-dark {
+	color-scheme: dark;
+
 	/* ─── Public aliases (aurora-dark) ────────────────────────────── */
 	--dry-color-primary: hsl(15, 90%, 70%);
 	--dry-color-primary-hover: hsl(15, 90%, 62%);
@@ -132,6 +150,7 @@
 	--dry-color-border-hover: hsla(30, 15%, 80%, 0.5);
 
 	/* ─── Brand — coral, lighter for dark bg ──────────────────────── */
+	--dry-color-fill-brand: var(--dry-color-primary);
 	--dry-color-fill-brand-active: hsl(15, 90%, 56%);
 	--dry-color-fill-brand-weak: hsla(15, 90%, 70%, 0.08);
 	--dry-color-stroke-brand: hsla(15, 90%, 70%, 0.5);
@@ -144,10 +163,12 @@
 	--dry-color-fill-accent-weak: hsla(38, 88%, 68%, 0.1);
 	--dry-color-stroke-accent: hsla(38, 88%, 68%, 0.5);
 	--dry-color-stroke-accent-strong: hsla(38, 88%, 68%, 0.8);
+	--dry-color-on-accent: hsl(38, 30%, 8%);
 
 	/* ─── Status: Error (warm-shifted hue 8) ──────────────────────── */
 	--dry-color-text-error: hsl(8, 75%, 72%);
-	--dry-color-fill-error-hover: hsl(8, 75%, 52%);
+	--dry-color-fill-error: var(--dry-color-danger);
+	--dry-color-fill-error-hover: hsl(8, 75%, 62%);
 	--dry-color-fill-error-weak: hsla(8, 75%, 60%, 0.15);
 	--dry-color-stroke-error: hsl(8, 55%, 55%);
 	--dry-color-stroke-error-strong: hsla(8, 75%, 60%, 0.8);
@@ -155,6 +176,7 @@
 
 	/* ─── Status: Warning ─────────────────────────────────────────── */
 	--dry-color-text-warning: hsl(40, 85%, 68%);
+	--dry-color-fill-warning: var(--dry-color-warning);
 	--dry-color-fill-warning-weak: hsla(40, 80%, 56%, 0.15);
 	--dry-color-stroke-warning: hsl(40, 60%, 55%);
 	--dry-color-stroke-warning-strong: hsla(40, 80%, 56%, 0.8);
@@ -162,6 +184,7 @@
 
 	/* ─── Status: Success ─────────────────────────────────────────── */
 	--dry-color-text-success: hsl(140, 55%, 65%);
+	--dry-color-fill-success: var(--dry-color-success);
 	--dry-color-fill-success-weak: hsla(140, 55%, 50%, 0.15);
 	--dry-color-stroke-success: hsl(140, 45%, 55%);
 	--dry-color-stroke-success-strong: hsla(140, 55%, 50%, 0.8);
@@ -173,6 +196,7 @@
 	--dry-color-fill-info-weak: hsla(205, 65%, 56%, 0.15);
 	--dry-color-stroke-info: hsl(205, 45%, 55%);
 	--dry-color-stroke-info-strong: hsla(205, 65%, 56%, 0.8);
+	--dry-color-on-info: hsl(205, 30%, 8%);
 
 	/* ─── Purple semantic palette (badge / tag purple variants) ───── */
 	--dry-color-text-purple: hsl(290, 75%, 78%);
@@ -181,6 +205,14 @@
 	--dry-color-stroke-purple: hsla(290, 70%, 70%, 0.5);
 	--dry-color-on-purple: hsl(290, 30%, 8%);
 
+	/* ─── Orange semantic palette (badge / tag orange variants) ───── */
+	--dry-color-fill-orange: color-mix(
+		in srgb,
+		var(--dry-color-fill-warning) 70%,
+		var(--dry-color-fill-error)
+	);
+	--dry-color-on-orange: hsl(24, 30%, 8%);
+
 	/* ─── Backgrounds — warm dark ─────────────────────────────────── */
 	--dry-color-bg-base: hsl(20, 18%, 8%);
 	--dry-color-bg-raised: hsl(20, 14%, 12%);
@@ -241,3 +273,19 @@
 	--dry-radius-xl: 14px;
 	--dry-radius-2xl: 20px;
 }
+
+@supports (color: contrast-color(white)) {
+	[data-theme='aurora'],
+	.theme-aurora,
+	[data-theme='aurora-dark'],
+	.theme-aurora-dark {
+		--dry-color-on-brand: contrast-color(var(--dry-color-fill-brand));
+		--dry-color-on-error: contrast-color(var(--dry-color-fill-error));
+		--dry-color-on-warning: contrast-color(var(--dry-color-fill-warning));
+		--dry-color-on-success: contrast-color(var(--dry-color-fill-success));
+		--dry-color-on-info: contrast-color(var(--dry-color-fill-info));
+		--dry-color-on-accent: contrast-color(var(--dry-color-fill-accent));
+		--dry-color-on-purple: contrast-color(var(--dry-color-fill-purple));
+		--dry-color-on-orange: contrast-color(var(--dry-color-fill-orange));
+	}
+}

package/dist/themes/dark.css

@@ -1,4 +1,6 @@
 [data-theme='dark'] {
+	color-scheme: dark;
+
 	/* ─── Public aliases (dark) ────────────────────────────────────── */
 	--dry-color-primary: hsl(230, 100%, 82%);
 	--dry-color-primary-hover: hsl(230, 100%, 75%);
@@ -18,6 +20,7 @@
 	--dry-color-fill-active: hsla(0, 0%, 100%, 0.14);
 
 	/* ─── Brand dark overrides ────────────────────────────────────── */
+	--dry-color-fill-brand: var(--dry-color-primary);
 	--dry-color-fill-brand-active: hsl(230, 100%, 70%);
 	--dry-color-fill-brand-weak: hsla(230, 100%, 82%, 0.06);
 	--dry-color-stroke-brand: hsla(230, 100%, 82%, 0.5);
@@ -66,14 +69,16 @@
 
 	/* ─── Status: Error ───────────────────────────────────────────── */
 	--dry-color-text-error: hsl(0, 60%, 70%);
-	--dry-color-fill-error-hover: hsl(0, 65%, 48%);
+	--dry-color-fill-error: var(--dry-color-danger);
+	--dry-color-fill-error-hover: hsl(0, 65%, 58%);
 	--dry-color-fill-error-weak: hsla(0, 60%, 60%, 0.15);
 	--dry-color-stroke-error: hsl(0, 45%, 55%);
 	--dry-color-stroke-error-strong: hsla(0, 65%, 55%, 0.8);
-	--dry-color-on-error: #ffffff;
+	--dry-color-on-error: hsl(0, 30%, 4%);
 
 	/* ─── Status: Warning ─────────────────────────────────────────── */
 	--dry-color-text-warning: hsl(40, 80%, 65%);
+	--dry-color-fill-warning: var(--dry-color-warning);
 	--dry-color-fill-warning-weak: hsla(40, 75%, 60%, 0.15);
 	--dry-color-stroke-warning: hsl(40, 55%, 55%);
 	--dry-color-stroke-warning-strong: hsla(40, 75%, 52%, 0.8);
@@ -81,10 +86,11 @@
 
 	/* ─── Status: Success ─────────────────────────────────────────── */
 	--dry-color-text-success: hsl(145, 55%, 65%);
+	--dry-color-fill-success: var(--dry-color-success);
 	--dry-color-fill-success-weak: hsla(145, 55%, 60%, 0.15);
 	--dry-color-stroke-success: hsl(145, 45%, 55%);
 	--dry-color-stroke-success-strong: hsla(145, 55%, 48%, 0.8);
-	--dry-color-on-success: #ffffff;
+	--dry-color-on-success: hsl(145, 30%, 8%);
 
 	/* ─── Status: Info ────────────────────────────────────────────── */
 	--dry-color-text-info: hsl(210, 65%, 70%);
@@ -92,12 +98,14 @@
 	--dry-color-fill-info-weak: hsla(210, 60%, 65%, 0.15);
 	--dry-color-stroke-info: hsl(210, 45%, 55%);
 	--dry-color-stroke-info-strong: hsla(210, 65%, 55%, 0.8);
+	--dry-color-on-info: hsl(210, 30%, 8%);
 
 	/* ─── Accent tone (warm counterpoint to brand) ───────────────── */
 	--dry-color-fill-accent: hsl(25, 85%, 68%);
 	--dry-color-fill-accent-weak: hsla(25, 85%, 68%, 0.1);
 	--dry-color-stroke-accent: hsla(25, 85%, 68%, 0.5);
 	--dry-color-stroke-accent-strong: hsla(25, 85%, 68%, 0.8);
+	--dry-color-on-accent: hsl(25, 30%, 8%);
 
 	/* ─── Purple semantic palette (badge / tag purple variants) ───── */
 	--dry-color-text-purple: hsl(280, 75%, 78%);
@@ -106,6 +114,14 @@
 	--dry-color-stroke-purple: hsla(280, 75%, 70%, 0.5);
 	--dry-color-on-purple: hsl(233, 18%, 9%);
 
+	/* ─── Orange semantic palette (badge / tag orange variants) ───── */
+	--dry-color-fill-orange: color-mix(
+		in srgb,
+		var(--dry-color-fill-warning) 70%,
+		var(--dry-color-fill-error)
+	);
+	--dry-color-on-orange: hsl(25, 30%, 8%);
+
 	/* ─── Extended surface depth ──────────────────────────────────── */
 	--dry-color-bg-floating: hsl(234, 8%, 26%);
 
@@ -164,6 +180,8 @@
 .theme-auto:not([data-theme='light']) {
 	@media (prefers-color-scheme: dark) {
 		& {
+			color-scheme: dark;
+
 			/* ─── Public aliases (auto dark) ────────────────────────────── */
 			--dry-color-primary: hsl(230, 100%, 82%);
 			--dry-color-primary-hover: hsl(230, 100%, 75%);
@@ -183,6 +201,7 @@
 			--dry-color-fill-active: hsla(0, 0%, 100%, 0.14);
 
 			/* ─── Brand dark overrides ────────────────────────────────────── */
+			--dry-color-fill-brand: var(--dry-color-primary);
 			--dry-color-fill-brand-active: hsl(230, 100%, 70%);
 			--dry-color-fill-brand-weak: hsla(230, 100%, 82%, 0.06);
 			--dry-color-stroke-brand: hsla(230, 100%, 82%, 0.5);
@@ -227,14 +246,16 @@
 
 			/* ─── Status: Error ───────────────────────────────────────────── */
 			--dry-color-text-error: hsl(0, 60%, 70%);
-			--dry-color-fill-error-hover: hsl(0, 65%, 48%);
+			--dry-color-fill-error: var(--dry-color-danger);
+			--dry-color-fill-error-hover: hsl(0, 65%, 58%);
 			--dry-color-fill-error-weak: hsla(0, 60%, 60%, 0.15);
 			--dry-color-stroke-error: hsl(0, 45%, 55%);
 			--dry-color-stroke-error-strong: hsla(0, 65%, 55%, 0.8);
-			--dry-color-on-error: #ffffff;
+			--dry-color-on-error: hsl(0, 30%, 4%);
 
 			/* ─── Status: Warning ─────────────────────────────────────────── */
 			--dry-color-text-warning: hsl(40, 80%, 65%);
+			--dry-color-fill-warning: var(--dry-color-warning);
 			--dry-color-fill-warning-weak: hsla(40, 75%, 60%, 0.15);
 			--dry-color-stroke-warning: hsl(40, 55%, 55%);
 			--dry-color-stroke-warning-strong: hsla(40, 75%, 52%, 0.8);
@@ -242,10 +263,11 @@
 
 			/* ─── Status: Success ─────────────────────────────────────────── */
 			--dry-color-text-success: hsl(145, 55%, 65%);
+			--dry-color-fill-success: var(--dry-color-success);
 			--dry-color-fill-success-weak: hsla(145, 55%, 60%, 0.15);
 			--dry-color-stroke-success: hsl(145, 45%, 55%);
 			--dry-color-stroke-success-strong: hsla(145, 55%, 48%, 0.8);
-			--dry-color-on-success: #ffffff;
+			--dry-color-on-success: hsl(145, 30%, 8%);
 
 			/* ─── Status: Info ────────────────────────────────────────────── */
 			--dry-color-text-info: hsl(210, 65%, 70%);
@@ -253,12 +275,14 @@
 			--dry-color-fill-info-weak: hsla(210, 60%, 65%, 0.15);
 			--dry-color-stroke-info: hsl(210, 45%, 55%);
 			--dry-color-stroke-info-strong: hsla(210, 65%, 55%, 0.8);
+			--dry-color-on-info: hsl(210, 30%, 8%);
 
 			/* ─── Accent tone (warm counterpoint to brand) ───────────────── */
 			--dry-color-fill-accent: hsl(25, 85%, 68%);
 			--dry-color-fill-accent-weak: hsla(25, 85%, 68%, 0.1);
 			--dry-color-stroke-accent: hsla(25, 85%, 68%, 0.5);
 			--dry-color-stroke-accent-strong: hsla(25, 85%, 68%, 0.8);
+			--dry-color-on-accent: hsl(25, 30%, 8%);
 
 			/* ─── Purple semantic palette (badge / tag purple variants) ───── */
 			--dry-color-text-purple: hsl(280, 75%, 78%);
@@ -267,6 +291,14 @@
 			--dry-color-stroke-purple: hsla(280, 75%, 70%, 0.5);
 			--dry-color-on-purple: hsl(233, 18%, 9%);
 
+			/* ─── Orange semantic palette (badge / tag orange variants) ───── */
+			--dry-color-fill-orange: color-mix(
+				in srgb,
+				var(--dry-color-fill-warning) 70%,
+				var(--dry-color-fill-error)
+			);
+			--dry-color-on-orange: hsl(25, 30%, 8%);
+
 			/* ─── Extended surface depth ──────────────────────────────────── */
 			--dry-color-bg-floating: hsl(234, 8%, 26%);
 
@@ -315,3 +347,31 @@
 		}
 	}
 }
+
+@supports (color: contrast-color(white)) {
+	[data-theme='dark'] {
+		--dry-color-on-brand: contrast-color(var(--dry-color-fill-brand));
+		--dry-color-on-error: contrast-color(var(--dry-color-fill-error));
+		--dry-color-on-warning: contrast-color(var(--dry-color-fill-warning));
+		--dry-color-on-success: contrast-color(var(--dry-color-fill-success));
+		--dry-color-on-info: contrast-color(var(--dry-color-fill-info));
+		--dry-color-on-accent: contrast-color(var(--dry-color-fill-accent));
+		--dry-color-on-purple: contrast-color(var(--dry-color-fill-purple));
+		--dry-color-on-orange: contrast-color(var(--dry-color-fill-orange));
+	}
+
+	.theme-auto:not([data-theme='light']) {
+		@media (prefers-color-scheme: dark) {
+			& {
+				--dry-color-on-brand: contrast-color(var(--dry-color-fill-brand));
+				--dry-color-on-error: contrast-color(var(--dry-color-fill-error));
+				--dry-color-on-warning: contrast-color(var(--dry-color-fill-warning));
+				--dry-color-on-success: contrast-color(var(--dry-color-fill-success));
+				--dry-color-on-info: contrast-color(var(--dry-color-fill-info));
+				--dry-color-on-accent: contrast-color(var(--dry-color-fill-accent));
+				--dry-color-on-purple: contrast-color(var(--dry-color-fill-purple));
+				--dry-color-on-orange: contrast-color(var(--dry-color-fill-orange));
+			}
+		}
+	}
+}

package/dist/themes/default.css

@@ -7,6 +7,8 @@
 }
 
 :root {
+	color-scheme: light;
+
 	/* ─── Public aliases (Tier 2, documented) ──────────────────────────
 	   Override at `:root` to retheme. Tier 3 tokens below derive via
 	   `var(--alias)` so overrides cascade. See skills/dryui-build/SKILL.md. */
@@ -124,7 +126,7 @@
 	--dry-color-fill-success-weak: hsla(145, 60%, 45%, 0.1);
 	--dry-color-stroke-success: hsl(145, 50%, 65%);
 	--dry-color-stroke-success-strong: hsla(145, 60%, 45%, 0.8);
-	--dry-color-on-success: #ffffff;
+	--dry-color-on-success: hsl(145, 60%, 12%);
 
 	/* ─── Status: Info (hue 210) ──────────────────────────────────── */
 	--dry-color-text-info: hsl(210, 70%, 35%);
@@ -132,12 +134,14 @@
 	--dry-color-fill-info-weak: hsla(210, 70%, 50%, 0.1);
 	--dry-color-stroke-info: hsl(210, 50%, 70%);
 	--dry-color-stroke-info-strong: hsla(210, 70%, 50%, 0.8);
+	--dry-color-on-info: hsl(210, 70%, 7%);
 
 	/* ─── Accent tone (warm counterpoint to brand) ───────────────── */
 	--dry-color-fill-accent: hsl(25, 90%, 58%);
 	--dry-color-fill-accent-weak: hsla(25, 90%, 58%, 0.08);
 	--dry-color-stroke-accent: hsla(25, 90%, 58%, 0.5);
 	--dry-color-stroke-accent-strong: hsla(25, 90%, 58%, 0.8);
+	--dry-color-on-accent: hsl(25, 90%, 12%);
 
 	/* ─── Purple semantic palette (badge / tag purple variants) ───── */
 	--dry-color-text-purple: hsl(280, 60%, 38%);
@@ -146,6 +150,14 @@
 	--dry-color-stroke-purple: hsla(280, 65%, 55%, 0.5);
 	--dry-color-on-purple: #ffffff;
 
+	/* ─── Orange semantic palette (badge / tag orange variants) ───── */
+	--dry-color-fill-orange: color-mix(
+		in srgb,
+		var(--dry-color-fill-warning) 70%,
+		var(--dry-color-fill-error)
+	);
+	--dry-color-on-orange: hsl(25, 80%, 12%);
+
 	/* ─── Extended surface depth ──────────────────────────────────── */
 	--dry-color-bg-floating: #ffffff;
 
@@ -448,6 +460,19 @@
 	--dry-scrollbar-width: 8px;
 }
 
+@supports (color: contrast-color(white)) {
+	:root {
+		--dry-color-on-brand: contrast-color(var(--dry-color-fill-brand));
+		--dry-color-on-error: contrast-color(var(--dry-color-fill-error));
+		--dry-color-on-warning: contrast-color(var(--dry-color-fill-warning));
+		--dry-color-on-success: contrast-color(var(--dry-color-fill-success));
+		--dry-color-on-info: contrast-color(var(--dry-color-fill-info));
+		--dry-color-on-accent: contrast-color(var(--dry-color-fill-accent));
+		--dry-color-on-purple: contrast-color(var(--dry-color-fill-purple));
+		--dry-color-on-orange: contrast-color(var(--dry-color-fill-orange));
+	}
+}
+
 :where([data-dry-type-mode='desktop']) {
 	--dry-type-display-size: 3.5rem;
 	--dry-type-display-leading: 4rem;