@dryui/ui 0.2.1 → 0.3.0

package/dist/themes/dark.css

@@ -122,11 +122,32 @@
 	--dry-color-icon-info: var(--dry-color-stroke-info-strong);
 	--dry-color-on-info: #ffffff;
 
+	/* ─── Accent tone (warm counterpoint to brand) ───────────────── */
+	--dry-color-accent: hsl(25, 85%, 68%);
+	--dry-color-text-accent: hsl(25, 85%, 68%);
+	--dry-color-fill-accent: hsl(25, 85%, 68%);
+	--dry-color-fill-accent-hover: hsl(25, 85%, 60%);
+	--dry-color-fill-accent-active: hsl(25, 85%, 55%);
+	--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-stroke-accent-weak: hsla(25, 85%, 68%, 0.2);
+	--dry-color-icon-accent: hsla(25, 85%, 68%, 0.8);
+	--dry-color-on-accent: hsl(233, 18%, 9%);
+
+	/* ─── Extended surface depth ──────────────────────────────────── */
+	--dry-color-bg-elevated: hsl(234, 9%, 22%);
+	--dry-color-bg-floating: hsl(234, 8%, 26%);
+
 	/* ─── Semantic shadows ────────────────────────────────────────── */
 	--dry-shadow-raised: 0 1px 3px hsla(230, 30%, 5%, 0.4), 0 1px 2px hsla(230, 30%, 5%, 0.3);
 	--dry-shadow-overlay: 0 8px 24px hsla(230, 30%, 5%, 0.5), 0 2px 8px hsla(230, 30%, 5%, 0.4);
 	--dry-shadow-sunken: inset 0 1px 4px hsla(230, 30%, 5%, 0.3);
 
+	/* ─── Tinted shadows ──────────────────────────────────────────── */
+	--dry-shadow-brand: 0 4px 14px hsla(230, 100%, 82%, 0.15), 0 2px 6px hsla(230, 100%, 82%, 0.1);
+	--dry-shadow-accent: 0 4px 14px hsla(25, 85%, 68%, 0.15), 0 2px 6px hsla(25, 85%, 68%, 0.1);
+
 	/* ─── Overlay backdrops ───────────────────────────────────────── */
 	--dry-color-overlay-backdrop: hsla(0, 0%, 0%, 0.6);
 	--dry-color-overlay-backdrop-strong: hsla(0, 0%, 0%, 0.75);
@@ -138,6 +159,51 @@
 	/* ─── Glass surface ───────────────────────────────────────────── */
 	--dry-glass-tint: var(--dry-color-bg-raised);
 	--dry-glass-opacity: 64%;
+	--dry-glass-saturation: 120%;
+	--dry-glass-border: hsla(0, 0%, 100%, 0.06);
+	--dry-glass-border-strong: hsla(0, 0%, 100%, 0.12);
+
+	/* ─── Glow extensions ─────────────────────────────────────────── */
+	--dry-glow-ring: 0 0 0 1px var(--dry-color-fill-brand), 0 0 12px 2px hsla(230, 100%, 82%, 0.2);
+	--dry-glow-ring-accent:
+		0 0 0 1px var(--dry-color-fill-accent), 0 0 12px 2px hsla(25, 85%, 68%, 0.2);
+	--dry-glow-ambient: hsla(230, 100%, 82%, 0.04);
+	--dry-glow-ambient-accent: hsla(25, 85%, 68%, 0.04);
+
+	/* ─── Gradient palette ────────────────────────────────────────── */
+	--dry-gradient-warm: linear-gradient(
+		135deg,
+		hsl(25, 85%, 68%) 0%,
+		hsl(350, 65%, 62%) 50%,
+		hsl(280, 55%, 58%) 100%
+	);
+	--dry-gradient-cool: linear-gradient(
+		135deg,
+		hsl(210, 75%, 65%) 0%,
+		hsl(250, 65%, 60%) 50%,
+		hsl(280, 45%, 55%) 100%
+	);
+	--dry-gradient-sunset: linear-gradient(
+		135deg,
+		hsl(40, 90%, 65%) 0%,
+		hsl(15, 85%, 62%) 40%,
+		hsl(340, 70%, 58%) 100%
+	);
+	--dry-gradient-ocean: linear-gradient(
+		135deg,
+		hsl(195, 75%, 55%) 0%,
+		hsl(220, 80%, 60%) 50%,
+		hsl(250, 65%, 62%) 100%
+	);
+	--dry-gradient-surface: linear-gradient(
+		180deg,
+		var(--dry-color-bg-base) 0%,
+		var(--dry-color-bg-raised) 100%
+	);
+
+	/* ─── Grain / noise texture ───────────────────────────────────── */
+	--dry-grain-opacity: 0.06;
+	--dry-grain-blend: soft-light;
 }
 
 .theme-auto {
@@ -266,11 +332,33 @@
 			--dry-color-icon-info: var(--dry-color-stroke-info-strong);
 			--dry-color-on-info: #ffffff;
 
+			/* ─── Accent tone (warm counterpoint to brand) ───────────────── */
+			--dry-color-accent: hsl(25, 85%, 68%);
+			--dry-color-text-accent: hsl(25, 85%, 68%);
+			--dry-color-fill-accent: hsl(25, 85%, 68%);
+			--dry-color-fill-accent-hover: hsl(25, 85%, 60%);
+			--dry-color-fill-accent-active: hsl(25, 85%, 55%);
+			--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-stroke-accent-weak: hsla(25, 85%, 68%, 0.2);
+			--dry-color-icon-accent: hsla(25, 85%, 68%, 0.8);
+			--dry-color-on-accent: hsl(233, 18%, 9%);
+
+			/* ─── Extended surface depth ──────────────────────────────────── */
+			--dry-color-bg-elevated: hsl(234, 9%, 22%);
+			--dry-color-bg-floating: hsl(234, 8%, 26%);
+
 			/* ─── Semantic shadows ────────────────────────────────────────── */
 			--dry-shadow-raised: 0 1px 3px hsla(230, 30%, 5%, 0.4), 0 1px 2px hsla(230, 30%, 5%, 0.3);
 			--dry-shadow-overlay: 0 8px 24px hsla(230, 30%, 5%, 0.5), 0 2px 8px hsla(230, 30%, 5%, 0.4);
 			--dry-shadow-sunken: inset 0 1px 4px hsla(230, 30%, 5%, 0.3);
 
+			/* ─── Tinted shadows ──────────────────────────────────────────── */
+			--dry-shadow-brand:
+				0 4px 14px hsla(230, 100%, 82%, 0.15), 0 2px 6px hsla(230, 100%, 82%, 0.1);
+			--dry-shadow-accent: 0 4px 14px hsla(25, 85%, 68%, 0.15), 0 2px 6px hsla(25, 85%, 68%, 0.1);
+
 			/* ─── Overlay backdrops ───────────────────────────────────────── */
 			--dry-color-overlay-backdrop: hsla(0, 0%, 0%, 0.6);
 			--dry-color-overlay-backdrop-strong: hsla(0, 0%, 0%, 0.75);
@@ -282,6 +370,52 @@
 			/* ─── Glass surface ───────────────────────────────────────────── */
 			--dry-glass-tint: var(--dry-color-bg-raised);
 			--dry-glass-opacity: 64%;
+			--dry-glass-saturation: 120%;
+			--dry-glass-border: hsla(0, 0%, 100%, 0.06);
+			--dry-glass-border-strong: hsla(0, 0%, 100%, 0.12);
+
+			/* ─── Glow extensions ─────────────────────────────────────────── */
+			--dry-glow-ring:
+				0 0 0 1px var(--dry-color-fill-brand), 0 0 12px 2px hsla(230, 100%, 82%, 0.2);
+			--dry-glow-ring-accent:
+				0 0 0 1px var(--dry-color-fill-accent), 0 0 12px 2px hsla(25, 85%, 68%, 0.2);
+			--dry-glow-ambient: hsla(230, 100%, 82%, 0.04);
+			--dry-glow-ambient-accent: hsla(25, 85%, 68%, 0.04);
+
+			/* ─── Gradient palette ────────────────────────────────────────── */
+			--dry-gradient-warm: linear-gradient(
+				135deg,
+				hsl(25, 85%, 68%) 0%,
+				hsl(350, 65%, 62%) 50%,
+				hsl(280, 55%, 58%) 100%
+			);
+			--dry-gradient-cool: linear-gradient(
+				135deg,
+				hsl(210, 75%, 65%) 0%,
+				hsl(250, 65%, 60%) 50%,
+				hsl(280, 45%, 55%) 100%
+			);
+			--dry-gradient-sunset: linear-gradient(
+				135deg,
+				hsl(40, 90%, 65%) 0%,
+				hsl(15, 85%, 62%) 40%,
+				hsl(340, 70%, 58%) 100%
+			);
+			--dry-gradient-ocean: linear-gradient(
+				135deg,
+				hsl(195, 75%, 55%) 0%,
+				hsl(220, 80%, 60%) 50%,
+				hsl(250, 65%, 62%) 100%
+			);
+			--dry-gradient-surface: linear-gradient(
+				180deg,
+				var(--dry-color-bg-base) 0%,
+				var(--dry-color-bg-raised) 100%
+			);
+
+			/* ─── Grain / noise texture ───────────────────────────────────── */
+			--dry-grain-opacity: 0.06;
+			--dry-grain-blend: soft-light;
 		}
 	}
 }

package/dist/themes/default.css

@@ -17,7 +17,10 @@ body {
 	min-height: 100dvh;
 }
 
-code, pre, kbd, samp {
+code,
+pre,
+kbd,
+samp {
 	font-family: var(--dry-font-mono);
 }
 
@@ -145,11 +148,32 @@ code, pre, kbd, samp {
 	--dry-color-icon-info: var(--dry-color-stroke-info-strong);
 	--dry-color-on-info: #ffffff;
 
+	/* ─── Accent tone (warm counterpoint to brand) ───────────────── */
+	--dry-color-accent: hsl(25, 90%, 58%);
+	--dry-color-text-accent: hsl(25, 80%, 38%);
+	--dry-color-fill-accent: hsl(25, 90%, 58%);
+	--dry-color-fill-accent-hover: hsl(25, 90%, 50%);
+	--dry-color-fill-accent-active: hsl(25, 90%, 44%);
+	--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-stroke-accent-weak: hsla(25, 90%, 58%, 0.2);
+	--dry-color-icon-accent: hsla(25, 90%, 58%, 0.8);
+	--dry-color-on-accent: #ffffff;
+
+	/* ─── Extended surface depth ──────────────────────────────────── */
+	--dry-color-bg-elevated: #eceef2;
+	--dry-color-bg-floating: #ffffff;
+
 	/* ─── Semantic shadows ────────────────────────────────────────── */
 	--dry-shadow-raised: 0 1px 3px hsla(230, 20%, 20%, 0.08), 0 1px 2px hsla(230, 20%, 20%, 0.06);
 	--dry-shadow-overlay: 0 8px 24px hsla(230, 20%, 20%, 0.12), 0 2px 8px hsla(230, 20%, 20%, 0.08);
 	--dry-shadow-sunken: inset 0 1px 4px rgba(0, 0, 0, 0.08);
 
+	/* ─── Tinted shadows ──────────────────────────────────────────── */
+	--dry-shadow-brand: 0 4px 14px hsla(230, 64%, 57%, 0.2), 0 2px 6px hsla(230, 64%, 57%, 0.12);
+	--dry-shadow-accent: 0 4px 14px hsla(25, 90%, 58%, 0.2), 0 2px 6px hsla(25, 90%, 58%, 0.12);
+
 	/* ─── Overlay backdrops ───────────────────────────────────────── */
 	--dry-color-overlay-backdrop: hsla(0, 0%, 0%, 0.4);
 	--dry-color-overlay-backdrop-strong: hsla(0, 0%, 0%, 0.6);
@@ -186,6 +210,7 @@ code, pre, kbd, samp {
 	--dry-space-256: 16rem;
 
 	/* ─── Radius ──────────────────────────────────────────────────── */
+	--dry-radius-none: 0;
 	--dry-radius-sm: 4px;
 	--dry-radius-md: 8px;
 	--dry-radius-lg: 8px;
@@ -200,6 +225,14 @@ code, pre, kbd, samp {
 	--dry-font-mono:
 		ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, 'Liberation Mono', 'Courier New',
 		monospace;
+	--dry-font-display: var(--dry-font-sans);
+
+	/* ─── Font weights ────────────────────────────────────────────── */
+	--dry-font-weight-light: 300;
+	--dry-font-weight-normal: 400;
+	--dry-font-weight-medium: 500;
+	--dry-font-weight-semibold: 600;
+	--dry-font-weight-bold: 700;
 
 	/* Practical UI-style named scale tokens */
 	--dry-type-display-size: 3.5rem;
@@ -301,15 +334,61 @@ code, pre, kbd, samp {
 	--dry-glass-blur: 12px;
 	--dry-glass-tint: var(--dry-color-bg-raised);
 	--dry-glass-opacity: 72%;
+	--dry-glass-saturation: 180%;
+	--dry-glass-border: hsla(0, 0%, 100%, 0.08);
+	--dry-glass-border-strong: hsla(0, 0%, 100%, 0.15);
 
 	/* ─── Glow ────────────────────────────────────────────────────── */
 	--dry-glow-color: var(--dry-color-fill-brand);
 	--dry-glow-blur: 24px;
 	--dry-glow-spread: 48px;
+	--dry-glow-ring: 0 0 0 1px var(--dry-color-fill-brand), 0 0 12px 2px hsla(230, 64%, 57%, 0.25);
+	--dry-glow-ring-accent:
+		0 0 0 1px var(--dry-color-fill-accent), 0 0 12px 2px hsla(25, 90%, 58%, 0.25);
+	--dry-glow-ambient: hsla(230, 64%, 57%, 0.06);
+	--dry-glow-ambient-accent: hsla(25, 90%, 58%, 0.06);
+
+	/* ─── Gradient palette ────────────────────────────────────────── */
+	--dry-gradient-warm: linear-gradient(
+		135deg,
+		hsl(25, 90%, 65%) 0%,
+		hsl(350, 70%, 60%) 50%,
+		hsl(280, 60%, 55%) 100%
+	);
+	--dry-gradient-cool: linear-gradient(
+		135deg,
+		hsl(210, 80%, 60%) 0%,
+		hsl(250, 70%, 55%) 50%,
+		hsl(280, 50%, 50%) 100%
+	);
+	--dry-gradient-sunset: linear-gradient(
+		135deg,
+		hsl(40, 95%, 60%) 0%,
+		hsl(15, 90%, 58%) 40%,
+		hsl(340, 75%, 55%) 100%
+	);
+	--dry-gradient-ocean: linear-gradient(
+		135deg,
+		hsl(195, 80%, 50%) 0%,
+		hsl(220, 85%, 55%) 50%,
+		hsl(250, 70%, 60%) 100%
+	);
+	--dry-gradient-surface: linear-gradient(
+		180deg,
+		var(--dry-color-bg-base) 0%,
+		var(--dry-color-bg-raised) 100%
+	);
+
+	/* ─── Grain / noise texture ───────────────────────────────────── */
+	--dry-grain-opacity: 0.04;
+	--dry-grain-size: 0.65;
+	--dry-grain-blend: overlay;
 
 	/* ─── Typography extras ───────────────────────────────────────── */
 	--dry-tracking-tight: -0.025em;
 	--dry-tracking-normal: 0;
+	--dry-tracking-wide: 0.05em;
+	--dry-tracking-wider: 0.1em;
 
 	/* ─── Utility shadows (fixed dark ink for depth across themes) ── */
 	--dry-shadow-sm: 0 1px 2px 0 color-mix(in srgb, #020617 12%, transparent);

package/dist/themes/midnight.css

@@ -0,0 +1,142 @@
+/*
+ * Midnight — Dark Glass
+ *
+ * Inspired by: the "New thread" glassmorphic menus, Cyrizon Saturn rings,
+ * frosted dark surfaces with inset glow borders, soft rose accents,
+ * ambient light bleeding through translucent layers.
+ *
+ * Deep dark base, frosted glass cards, rose accent, layered depth.
+ * Dark-only theme.
+ * Use with: <html class="theme-midnight"> or <html data-theme="midnight">
+ */
+
+[data-theme='midnight'],
+.theme-midnight {
+	/* ─── Brand — soft lavender ───────────────────────────────────── */
+	--dry-color-brand: hsl(250, 70%, 75%);
+	--dry-color-text-brand: hsl(250, 70%, 75%);
+	--dry-color-fill-brand: hsl(250, 70%, 75%);
+	--dry-color-fill-brand-hover: hsl(250, 70%, 67%);
+	--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);
+	--dry-color-stroke-brand-strong: hsla(250, 70%, 75%, 0.75);
+	--dry-color-stroke-brand-weak: hsla(250, 70%, 75%, 0.18);
+	--dry-color-on-brand: hsl(250, 30%, 8%);
+	--dry-color-focus-ring: hsla(250, 70%, 75%, 0.35);
+
+	/* ─── Accent — soft rose (the avatar ring glow) ───────────────── */
+	--dry-color-accent: hsl(350, 60%, 70%);
+	--dry-color-text-accent: hsl(350, 60%, 70%);
+	--dry-color-fill-accent: hsl(350, 60%, 70%);
+	--dry-color-fill-accent-hover: hsl(350, 60%, 62%);
+	--dry-color-fill-accent-active: hsl(350, 60%, 56%);
+	--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-stroke-accent-weak: hsla(350, 60%, 70%, 0.18);
+	--dry-color-icon-accent: hsla(350, 60%, 70%, 0.75);
+	--dry-color-on-accent: hsl(350, 20%, 8%);
+
+	/* ─── Backgrounds — deep layered dark ─────────────────────────── */
+	--dry-color-bg-base: hsl(240, 20%, 6%);
+	--dry-color-bg-raised: hsl(240, 15%, 10%);
+	--dry-color-bg-overlay: hsl(240, 12%, 14%);
+	--dry-color-bg-elevated: hsl(240, 10%, 18%);
+	--dry-color-bg-floating: hsl(240, 8%, 22%);
+	--dry-color-bg-sunken: hsl(240, 22%, 4%);
+	--dry-color-bg-brand: var(--dry-color-fill-brand);
+	--dry-color-bg-inverse: hsl(240, 10%, 95%);
+
+	/* ─── Neutrals — cool silver white ────────────────────────────── */
+	--dry-color-text-strong: hsla(240, 20%, 98%, 1);
+	--dry-color-text-weak: hsla(240, 15%, 90%, 0.7);
+	--dry-color-icon: hsla(240, 15%, 88%, 0.78);
+	--dry-color-stroke-strong: hsla(240, 15%, 85%, 0.5);
+	--dry-color-stroke-weak: hsla(240, 15%, 80%, 0.1);
+	--dry-color-fill: hsla(240, 15%, 85%, 0.05);
+	--dry-color-fill-hover: hsla(240, 15%, 85%, 0.08);
+	--dry-color-fill-active: hsla(240, 15%, 85%, 0.13);
+
+	/* ─── Shadows — deep midnight ─────────────────────────────────── */
+	--dry-shadow-raised: 0 1px 4px hsla(240, 40%, 3%, 0.5), 0 1px 2px hsla(240, 40%, 3%, 0.4);
+	--dry-shadow-overlay: 0 8px 32px hsla(240, 40%, 3%, 0.6), 0 2px 8px hsla(240, 40%, 3%, 0.45);
+	--dry-shadow-sunken: inset 0 1px 4px hsla(240, 40%, 3%, 0.4);
+	--dry-shadow-brand: 0 4px 20px hsla(250, 70%, 75%, 0.12), 0 2px 8px hsla(250, 70%, 75%, 0.08);
+	--dry-shadow-accent: 0 4px 20px hsla(350, 60%, 70%, 0.12), 0 2px 8px hsla(350, 60%, 70%, 0.08);
+
+	/* ─── Glass — the hero feature of this theme ──────────────────── */
+	--dry-glass-blur: 16px;
+	--dry-glass-tint: hsla(240, 15%, 10%, 0.65);
+	--dry-glass-opacity: 58%;
+	--dry-glass-saturation: 150%;
+	--dry-glass-border: hsla(240, 20%, 90%, 0.06);
+	--dry-glass-border-strong: hsla(240, 20%, 90%, 0.12);
+
+	/* ─── Glow — ethereal halos ───────────────────────────────────── */
+	--dry-glow-color: var(--dry-color-fill-brand);
+	--dry-glow-blur: 32px;
+	--dry-glow-spread: 64px;
+	--dry-glow-ring: 0 0 0 1px hsla(250, 70%, 75%, 0.2), 0 0 20px 4px hsla(250, 70%, 75%, 0.1);
+	--dry-glow-ring-accent: 0 0 0 1px hsla(350, 60%, 70%, 0.2), 0 0 20px 4px hsla(350, 60%, 70%, 0.1);
+	--dry-glow-ambient: hsla(250, 70%, 75%, 0.03);
+	--dry-glow-ambient-accent: hsla(350, 60%, 70%, 0.03);
+
+	/* ─── Gradient palette — cool ethereal ────────────────────────── */
+	--dry-gradient-warm: linear-gradient(
+		135deg,
+		hsl(350, 55%, 65%) 0%,
+		hsl(280, 50%, 60%) 50%,
+		hsl(250, 60%, 65%) 100%
+	);
+	--dry-gradient-cool: linear-gradient(
+		135deg,
+		hsl(220, 70%, 65%) 0%,
+		hsl(260, 60%, 60%) 50%,
+		hsl(290, 40%, 58%) 100%
+	);
+	--dry-gradient-sunset: linear-gradient(
+		135deg,
+		hsl(350, 65%, 68%) 0%,
+		hsl(310, 50%, 58%) 40%,
+		hsl(260, 55%, 55%) 100%
+	);
+	--dry-gradient-ocean: linear-gradient(
+		135deg,
+		hsl(210, 65%, 60%) 0%,
+		hsl(240, 60%, 58%) 50%,
+		hsl(270, 50%, 55%) 100%
+	);
+	--dry-gradient-surface: linear-gradient(180deg, hsl(240, 20%, 6%) 0%, hsl(240, 15%, 10%) 100%);
+
+	/* ─── Grain — subtle texture ──────────────────────────────────── */
+	--dry-grain-opacity: 0.05;
+	--dry-grain-blend: soft-light;
+
+	/* ─── Motion — slightly slower, dreamier ──────────────────────── */
+	--dry-duration-normal: 260ms;
+	--dry-duration-slow: 420ms;
+	--dry-ease-spring: var(--dry-ease-spring-soft);
+
+	/* ─── Beam blend ──────────────────────────────────────────────── */
+	--dry-beam-default-blend: screen;
+
+	/* ─── Overlay backdrops ───────────────────────────────────────── */
+	--dry-color-overlay-backdrop: hsla(240, 30%, 3%, 0.65);
+	--dry-color-overlay-backdrop-strong: hsla(240, 30%, 3%, 0.8);
+
+	/* ─── Radius — generous, pill-like ────────────────────────────── */
+	--dry-radius-lg: 12px;
+	--dry-radius-xl: 16px;
+	--dry-radius-2xl: 24px;
+
+	/* ─── Toggle — midnight themed ────────────────────────────────── */
+	--dry-toggle-track-bg: hsla(240, 15%, 85%, 0.06);
+	--dry-toggle-track-stroke: hsla(240, 15%, 85%, 0.5);
+	--dry-toggle-selected-bg: hsl(350, 60%, 70%);
+	--dry-toggle-selected-stroke: hsl(350, 60%, 70%);
+	--dry-toggle-thumb-bg: hsl(240, 20%, 8%);
+	--dry-toggle-hover-bg: hsla(240, 15%, 85%, 0.08);
+	--dry-toggle-press-bg: hsla(240, 15%, 85%, 0.12);
+	--dry-toggle-focus-ring: hsl(350, 60%, 70%);
+}

package/dist/themes/terminal.css

@@ -0,0 +1,175 @@
+/*
+ * Terminal — Monospace Precision
+ *
+ * Inspired by: System Diagnostics panels, HUD radar interfaces,
+ * Bridgetown Research dark data viz, ARCLIN design system.
+ *
+ * Pure black, bright white, green accent, monospace everything,
+ * sharp corners, data-dense layouts. Dark-only theme.
+ * Use with: <html class="theme-terminal"> or <html data-theme="terminal">
+ */
+
+[data-theme='terminal'],
+.theme-terminal {
+	/* ─── Brand — terminal green ──────────────────────────────────── */
+	--dry-color-brand: hsl(145, 80%, 50%);
+	--dry-color-text-brand: hsl(145, 80%, 50%);
+	--dry-color-fill-brand: hsl(145, 80%, 50%);
+	--dry-color-fill-brand-hover: hsl(145, 80%, 42%);
+	--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);
+	--dry-color-stroke-brand-strong: hsla(145, 80%, 50%, 0.8);
+	--dry-color-stroke-brand-weak: hsla(145, 80%, 50%, 0.15);
+	--dry-color-on-brand: hsl(145, 30%, 5%);
+	--dry-color-focus-ring: hsla(145, 80%, 50%, 0.4);
+
+	/* ─── Accent — amber warning tone ─────────────────────────────── */
+	--dry-color-accent: hsl(45, 90%, 55%);
+	--dry-color-text-accent: hsl(45, 90%, 55%);
+	--dry-color-fill-accent: hsl(45, 90%, 55%);
+	--dry-color-fill-accent-hover: hsl(45, 90%, 47%);
+	--dry-color-fill-accent-active: hsl(45, 90%, 41%);
+	--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-stroke-accent-weak: hsla(45, 90%, 55%, 0.15);
+	--dry-color-icon-accent: 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%);
+	--dry-color-bg-raised: hsl(0, 0%, 6%);
+	--dry-color-bg-overlay: hsl(0, 0%, 10%);
+	--dry-color-bg-elevated: hsl(0, 0%, 14%);
+	--dry-color-bg-floating: hsl(0, 0%, 18%);
+	--dry-color-bg-sunken: hsl(0, 0%, 0%);
+	--dry-color-bg-brand: var(--dry-color-fill-brand);
+	--dry-color-bg-inverse: hsl(0, 0%, 95%);
+
+	/* ─── Neutrals — pure achromatic ──────────────────────────────── */
+	--dry-color-text-strong: hsla(0, 0%, 100%, 0.95);
+	--dry-color-text-weak: hsla(0, 0%, 100%, 0.55);
+	--dry-color-icon: hsla(0, 0%, 100%, 0.7);
+	--dry-color-stroke-strong: hsla(0, 0%, 100%, 0.4);
+	--dry-color-stroke-weak: hsla(0, 0%, 100%, 0.1);
+	--dry-color-fill: hsla(0, 0%, 100%, 0.04);
+	--dry-color-fill-hover: hsla(0, 0%, 100%, 0.07);
+	--dry-color-fill-active: hsla(0, 0%, 100%, 0.12);
+
+	/* ─── Shadows — barely there, screens glow instead ────────────── */
+	--dry-shadow-raised: 0 1px 2px hsla(0, 0%, 0%, 0.6);
+	--dry-shadow-overlay: 0 4px 16px hsla(0, 0%, 0%, 0.7);
+	--dry-shadow-sunken: inset 0 1px 3px hsla(0, 0%, 0%, 0.5);
+	--dry-shadow-brand: 0 0 12px hsla(145, 80%, 50%, 0.15), 0 0 4px hsla(145, 80%, 50%, 0.1);
+	--dry-shadow-accent: 0 0 12px hsla(45, 90%, 55%, 0.15), 0 0 4px hsla(45, 90%, 55%, 0.1);
+
+	/* ─── Glass — minimal, tinted dark ────────────────────────────── */
+	--dry-glass-blur: 8px;
+	--dry-glass-tint: hsla(0, 0%, 4%, 0.85);
+	--dry-glass-opacity: 88%;
+	--dry-glass-saturation: 100%;
+	--dry-glass-border: hsla(0, 0%, 100%, 0.08);
+	--dry-glass-border-strong: hsla(0, 0%, 100%, 0.15);
+
+	/* ─── Glow — scanline / CRT feel ──────────────────────────────── */
+	--dry-glow-color: var(--dry-color-fill-brand);
+	--dry-glow-blur: 16px;
+	--dry-glow-spread: 32px;
+	--dry-glow-ring: 0 0 0 1px hsla(145, 80%, 50%, 0.3), 0 0 8px 1px hsla(145, 80%, 50%, 0.15);
+	--dry-glow-ring-accent: 0 0 0 1px hsla(45, 90%, 55%, 0.3), 0 0 8px 1px hsla(45, 90%, 55%, 0.15);
+	--dry-glow-ambient: hsla(145, 80%, 50%, 0.02);
+	--dry-glow-ambient-accent: hsla(45, 90%, 55%, 0.02);
+
+	/* ─── Gradient palette — data viz inspired ────────────────────── */
+	--dry-gradient-warm: linear-gradient(
+		135deg,
+		hsl(45, 90%, 55%) 0%,
+		hsl(25, 80%, 50%) 50%,
+		hsl(0, 70%, 45%) 100%
+	);
+	--dry-gradient-cool: linear-gradient(
+		135deg,
+		hsl(145, 70%, 45%) 0%,
+		hsl(180, 60%, 40%) 50%,
+		hsl(210, 55%, 45%) 100%
+	);
+	--dry-gradient-sunset: linear-gradient(
+		135deg,
+		hsl(45, 90%, 55%) 0%,
+		hsl(15, 85%, 50%) 40%,
+		hsl(350, 75%, 45%) 100%
+	);
+	--dry-gradient-ocean: linear-gradient(
+		135deg,
+		hsl(180, 70%, 40%) 0%,
+		hsl(200, 65%, 45%) 50%,
+		hsl(230, 55%, 50%) 100%
+	);
+	--dry-gradient-surface: linear-gradient(180deg, hsl(0, 0%, 2%) 0%, hsl(0, 0%, 6%) 100%);
+
+	/* ─── Grain — CRT noise ───────────────────────────────────────── */
+	--dry-grain-opacity: 0.08;
+	--dry-grain-size: 0.8;
+	--dry-grain-blend: overlay;
+
+	/* ─── Typography — monospace everything ────────────────────────── */
+	--dry-font-sans:
+		ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, 'Liberation Mono', 'Courier New',
+		monospace;
+	--dry-font-display:
+		ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, 'Liberation Mono', 'Courier New',
+		monospace;
+
+	/* ─── Font weights — lighter for that CRT look ────────────────── */
+	--dry-font-weight-normal: 400;
+	--dry-font-weight-medium: 400;
+	--dry-font-weight-semibold: 500;
+	--dry-font-weight-bold: 600;
+
+	/* ─── Letter spacing — wider for monospace readability ─────────── */
+	--dry-tracking-tight: 0;
+	--dry-tracking-normal: 0.02em;
+
+	/* ─── Motion — snappy, precise ────────────────────────────────── */
+	--dry-duration-fast: 80ms;
+	--dry-duration-normal: 160ms;
+	--dry-duration-slow: 280ms;
+	--dry-ease-spring: var(--dry-ease-spring-snappy);
+
+	/* ─── Beam blend ──────────────────────────────────────────────── */
+	--dry-beam-default-blend: screen;
+
+	/* ─── Overlay backdrops ───────────────────────────────────────── */
+	--dry-color-overlay-backdrop: hsla(0, 0%, 0%, 0.7);
+	--dry-color-overlay-backdrop-strong: hsla(0, 0%, 0%, 0.85);
+
+	/* ─── Radius — sharp, no rounded corners ──────────────────────── */
+	--dry-radius-none: 0;
+	--dry-radius-sm: 2px;
+	--dry-radius-md: 2px;
+	--dry-radius-lg: 4px;
+	--dry-radius-xl: 4px;
+	--dry-radius-2xl: 6px;
+	--dry-radius-full: 9999px;
+
+	/* ─── Toggle — terminal themed ────────────────────────────────── */
+	--dry-toggle-track-bg: hsla(0, 0%, 100%, 0.04);
+	--dry-toggle-track-stroke: hsla(0, 0%, 100%, 0.4);
+	--dry-toggle-selected-bg: hsl(145, 80%, 50%);
+	--dry-toggle-selected-stroke: hsl(145, 80%, 50%);
+	--dry-toggle-thumb-bg: hsl(0, 0%, 2%);
+	--dry-toggle-hover-bg: hsla(0, 0%, 100%, 0.06);
+	--dry-toggle-press-bg: hsla(0, 0%, 100%, 0.1);
+	--dry-toggle-focus-ring: hsl(145, 80%, 50%);
+
+	/* ─── Status overrides — more vivid for data-dense UIs ────────── */
+	--dry-color-text-error: hsl(0, 80%, 65%);
+	--dry-color-fill-error: hsl(0, 80%, 55%);
+	--dry-color-text-warning: hsl(45, 90%, 60%);
+	--dry-color-fill-warning: hsl(45, 90%, 55%);
+	--dry-color-text-success: hsl(145, 80%, 55%);
+	--dry-color-fill-success: hsl(145, 80%, 50%);
+	--dry-color-text-info: hsl(200, 80%, 65%);
+	--dry-color-fill-info: hsl(200, 80%, 55%);
+}

package/dist/themes/use-theme-override.svelte.d.ts

@@ -1,17 +1 @@
-/** A map of CSS custom property names to values. */
-export type ThemeTokenMap = Record<string, string>;
-/**
- * Reactively apply CSS custom property overrides to document.documentElement.
- *
- * Tokens are set as inline styles on :root, which means they override the
- * static theme CSS and cascade to all elements — including `<dialog>` elements
- * in the browser's top layer.
- *
- * Automatically cleans up (removes all set properties) when the calling
- * component is destroyed.
- *
- * @param getTokens - A function returning the current token map.
- *                    Called reactively; when the return value changes,
- *                    stale properties are removed and new ones applied.
- */
-export declare function useThemeOverride(getTokens: () => ThemeTokenMap): void;
+export { useThemeOverride, type ThemeTokenMap } from '@dryui/primitives/use-theme-override';

package/dist/time-input/index.d.ts

@@ -1,9 +1,9 @@
 export interface TimeInputProps {
-	value?: string;
-	disabled?: boolean;
-	step?: number;
-	size?: 'sm' | 'md' | 'lg';
-	name?: string;
-	class?: string;
+    value?: string;
+    disabled?: boolean;
+    step?: number;
+    size?: 'sm' | 'md' | 'lg';
+    name?: string;
+    class?: string;
 }
 export { default as TimeInput } from './time-input.svelte';

package/dist/time-input/time-input.svelte

@@ -70,9 +70,7 @@
 	const minutes = $derived.by(() => {
 		const stepMinutes = step && step >= 60 ? Math.floor(step / 60) : 1;
 		const count = Math.floor(60 / stepMinutes);
-		return Array.from({ length: count }, (_, i) =>
-			String(i * stepMinutes).padStart(2, '0')
-		);
+		return Array.from({ length: count }, (_, i) => String(i * stepMinutes).padStart(2, '0'));
 	});
 </script>