@dryui/ui 4.0.0 → 4.0.1

package/src/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/src/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/src/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;

package/src/themes/midnight.css

@@ -12,6 +12,8 @@
 
 [data-theme='midnight'],
 .theme-midnight {
+	color-scheme: dark;
+
 	/* ─── Public aliases (midnight) ───────────────────────────────── */
 	--dry-color-primary: hsl(250, 70%, 75%);
 	--dry-color-primary-hover: hsl(250, 70%, 67%);
@@ -25,6 +27,7 @@
 	--dry-color-border-hover: hsla(240, 15%, 85%, 0.5);
 
 	/* ─── Brand — soft lavender ───────────────────────────────────── */
+	--dry-color-fill-brand: var(--dry-color-primary);
 	--dry-color-fill-brand-active: hsl(250, 70%, 62%);
 	--dry-color-fill-brand-weak: hsla(250, 70%, 75%, 0.08);
 	--dry-color-stroke-brand: hsla(250, 70%, 75%, 0.45);
@@ -37,10 +40,12 @@
 	--dry-color-fill-accent-weak: hsla(350, 60%, 70%, 0.08);
 	--dry-color-stroke-accent: hsla(350, 60%, 70%, 0.45);
 	--dry-color-stroke-accent-strong: hsla(350, 60%, 70%, 0.75);
+	--dry-color-on-accent: hsl(350, 30%, 8%);
 
 	/* ─── Status: Error ───────────────────────────────────────────── */
 	--dry-color-text-error: hsl(355, 70%, 72%);
-	--dry-color-fill-error-hover: hsl(355, 70%, 52%);
+	--dry-color-fill-error: var(--dry-color-danger);
+	--dry-color-fill-error-hover: hsl(355, 70%, 62%);
 	--dry-color-fill-error-weak: hsla(355, 70%, 60%, 0.12);
 	--dry-color-stroke-error: hsl(355, 50%, 55%);
 	--dry-color-stroke-error-strong: hsla(355, 70%, 60%, 0.8);
@@ -48,6 +53,7 @@
 
 	/* ─── Status: Warning ─────────────────────────────────────────── */
 	--dry-color-text-warning: hsl(38, 80%, 68%);
+	--dry-color-fill-warning: var(--dry-color-warning);
 	--dry-color-fill-warning-weak: hsla(38, 75%, 55%, 0.12);
 	--dry-color-stroke-warning: hsl(38, 55%, 55%);
 	--dry-color-stroke-warning-strong: hsla(38, 75%, 55%, 0.8);
@@ -55,6 +61,7 @@
 
 	/* ─── Status: Success ─────────────────────────────────────────── */
 	--dry-color-text-success: hsl(150, 55%, 68%);
+	--dry-color-fill-success: var(--dry-color-success);
 	--dry-color-fill-success-weak: hsla(150, 55%, 50%, 0.12);
 	--dry-color-stroke-success: hsl(150, 45%, 55%);
 	--dry-color-stroke-success-strong: hsla(150, 55%, 50%, 0.8);
@@ -66,6 +73,7 @@
 	--dry-color-fill-info-weak: hsla(215, 65%, 60%, 0.12);
 	--dry-color-stroke-info: hsl(215, 45%, 55%);
 	--dry-color-stroke-info-strong: hsla(215, 65%, 60%, 0.8);
+	--dry-color-on-info: hsl(215, 30%, 8%);
 
 	/* ─── Purple semantic palette (badge / tag purple variants) ───── */
 	--dry-color-text-purple: hsl(285, 70%, 78%);
@@ -74,6 +82,14 @@
 	--dry-color-stroke-purple: hsla(285, 70%, 70%, 0.5);
 	--dry-color-on-purple: hsl(285, 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(30, 30%, 8%);
+
 	/* ─── Backgrounds — deep layered dark ─────────────────────────── */
 	--dry-color-bg-base: hsl(240, 20%, 6%);
 	--dry-color-bg-raised: hsl(240, 15%, 10%);
@@ -145,3 +161,17 @@
 	--dry-toggle-selected-stroke: hsl(350, 60%, 70%);
 	--dry-toggle-thumb-bg: hsl(240, 20%, 8%);
 }
+
+@supports (color: contrast-color(white)) {
+	[data-theme='midnight'],
+	.theme-midnight {
+		--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/src/themes/terminal.css

@@ -11,6 +11,8 @@
 
 [data-theme='terminal'],
 .theme-terminal {
+	color-scheme: dark;
+
 	/* ─── Public aliases (terminal) ───────────────────────────────── */
 	--dry-color-primary: hsl(145, 80%, 50%);
 	--dry-color-primary-hover: hsl(145, 80%, 42%);
@@ -24,6 +26,7 @@
 	--dry-color-border-hover: hsla(0, 0%, 100%, 0.4);
 
 	/* ─── Brand — terminal green ──────────────────────────────────── */
+	--dry-color-fill-brand: var(--dry-color-primary);
 	--dry-color-fill-brand-active: hsl(145, 80%, 36%);
 	--dry-color-fill-brand-weak: hsla(145, 80%, 50%, 0.08);
 	--dry-color-stroke-brand: hsla(145, 80%, 50%, 0.5);
@@ -36,6 +39,7 @@
 	--dry-color-fill-accent-weak: hsla(45, 90%, 55%, 0.08);
 	--dry-color-stroke-accent: hsla(45, 90%, 55%, 0.5);
 	--dry-color-stroke-accent-strong: hsla(45, 90%, 55%, 0.8);
+	--dry-color-on-accent: hsl(45, 30%, 5%);
 
 	/* ─── Backgrounds — pure black, minimal saturation ────────────── */
 	--dry-color-bg-base: hsl(0, 0%, 2%);
@@ -128,19 +132,22 @@
 
 	/* ─── Status overrides — more vivid for data-dense UIs ────────── */
 	--dry-color-text-error: hsl(0, 80%, 65%);
-	--dry-color-fill-error-hover: hsl(0, 80%, 47%);
+	--dry-color-fill-error: var(--dry-color-danger);
+	--dry-color-fill-error-hover: hsl(0, 80%, 58%);
 	--dry-color-fill-error-weak: hsla(0, 80%, 55%, 0.12);
 	--dry-color-stroke-error: hsl(0, 60%, 55%);
 	--dry-color-stroke-error-strong: hsla(0, 80%, 55%, 0.85);
 	--dry-color-on-error: hsl(0, 30%, 5%);
 
 	--dry-color-text-warning: hsl(45, 90%, 60%);
+	--dry-color-fill-warning: var(--dry-color-warning);
 	--dry-color-fill-warning-weak: hsla(45, 90%, 55%, 0.12);
 	--dry-color-stroke-warning: hsl(45, 70%, 55%);
 	--dry-color-stroke-warning-strong: hsla(45, 90%, 55%, 0.85);
 	--dry-color-on-warning: hsl(45, 30%, 5%);
 
 	--dry-color-text-success: hsl(145, 80%, 55%);
+	--dry-color-fill-success: var(--dry-color-success);
 	--dry-color-fill-success-weak: hsla(145, 80%, 50%, 0.12);
 	--dry-color-stroke-success: hsl(145, 60%, 50%);
 	--dry-color-stroke-success-strong: hsla(145, 80%, 50%, 0.85);
@@ -151,6 +158,7 @@
 	--dry-color-fill-info-weak: hsla(200, 80%, 55%, 0.12);
 	--dry-color-stroke-info: hsl(200, 60%, 55%);
 	--dry-color-stroke-info-strong: hsla(200, 80%, 55%, 0.85);
+	--dry-color-on-info: hsl(200, 30%, 5%);
 
 	/* ─── Purple semantic palette (badge / tag purple variants) ───── */
 	--dry-color-text-purple: hsl(285, 80%, 70%);
@@ -158,4 +166,26 @@
 	--dry-color-fill-purple-weak: hsla(285, 75%, 60%, 0.12);
 	--dry-color-stroke-purple: hsla(285, 75%, 60%, 0.5);
 	--dry-color-on-purple: hsl(285, 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(30, 30%, 5%);
+}
+
+@supports (color: contrast-color(white)) {
+	[data-theme='terminal'],
+	.theme-terminal {
+		--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/src/time-input/index.ts

@@ -1,10 +1,14 @@
-export interface TimeInputProps {
+import type { HTMLAttributes } from 'svelte/elements';
+
+export interface TimeInputProps extends Omit<
+	HTMLAttributes<HTMLDivElement>,
+	'role' | 'aria-label'
+> {
 	value?: string;
 	disabled?: boolean;
 	step?: number;
 	size?: 'sm' | 'md' | 'lg';
 	name?: string;
-	class?: string;
 }
 
 export { default as TimeInput } from './time-input.svelte';

package/src/time-input/time-input.meta.ts

@@ -1,7 +1,7 @@
 /** DryUI agent metadata. Consumed by @dryui/mcp/load-component-meta. */
 export default {
 	name: 'TimeInput',
-	description: 'Native time input with form control integration',
+	description: 'Segmented time input with select-based hour and minute controls',
 	category: 'input',
 	tags: ['time', 'input', 'form', 'clock']
 };