@marianmeres/stuic 3.0.2 → 3.0.4

package/dist/components/DismissibleMessage/DismissibleMessage.svelte

@@ -80,7 +80,7 @@
 			<div class="dismiss">
 				<Button
 					x
-					class="text-inherit!"
+					class="text-inherit"
 					variant="ghost"
 					roundedFull
 					size="sm"

package/dist/components/HoverExpandableWidth/HoverExpandableWidth.svelte

@@ -52,10 +52,14 @@
 	let isShrinking = $state(false);
 	let isExpanding = $state(false);
 	let inTransition = $derived(isExpanding || isShrinking);
-	let _timer: any;
+	let _timer: ReturnType<typeof setTimeout> | null = null;
 	let box = $state<DOMRect>();
 	let duration = $derived(prefersReduced.current ? 0 : _duration);
 
+	$effect(() => {
+		return () => clear();
+	});
+
 	function clear() {
 		clearTimeout(_timer);
 		_timer = null;
@@ -71,6 +75,7 @@
 
 	function expand() {
 		if (!enabled) return;
+		if (!el) return;
 		if (isExpanding || isShrinking || isExpanded) return;
 
 		// asap
@@ -80,9 +85,9 @@
 		box = el.getBoundingClientRect();
 		const pos = {
 			top: box.top,
-			bottom: innerHeight.current! - box.bottom,
+			bottom: (innerHeight.current ?? 0) - box.bottom,
 			left: box.left,
-			right: innerWidth.current! - box.right,
+			right: (innerWidth.current ?? 0) - box.right,
 		};
 
 		// <offset-x>, <offset-y>, <blur-radius>, <spread-radius>
@@ -102,22 +107,28 @@
 		// kind of ugly - need to set props in multiple steps...
 		(async () => {
 			await waitForNextRepaint();
+			if (!el) return;
 			el.style.position = `fixed`;
 
 			await waitForNextRepaint();
+			if (!el) return;
 			el.style.width = `${box!.width}px`;
 
 			await waitForNextRepaint();
+			if (!el) return;
 			el.style.transitionProperty = "all";
 			el.style.width = `${targetWidth}px`;
 
 			await waitForTransitionEnd(el);
+			if (!el) return;
 			isExpanding = false;
 		})();
 	}
 
 	function shrink() {
 		if (!enabled) return;
+		if (!el) return;
+		if (!box) return;
 		if (isExpanding || isShrinking || !isExpanded) return;
 
 		// asap
@@ -129,6 +140,7 @@
 
 		(async () => {
 			await waitForTransitionEnd(el);
+			if (!el) return;
 			isShrinking = false;
 
 			// now reset all back to defaults

package/dist/components/Nav/Nav.svelte

@@ -38,8 +38,8 @@
 		items?: NavItem[];
 		/** Group icon (optional) */
 		icon?: THC;
-		/** Whether the group starts collapsed */
-		defaultCollapsed?: boolean;
+		/** Whether the group starts expanded (default: false, groups are collapsed by default) */
+		defaultExpanded?: boolean;
 		/** Navigation URL for groups without items */
 		href?: string;
 		/** Click handler for groups without items */
@@ -218,44 +218,76 @@
 		localStorageValue(getItemStorageKey(itemId), expanded).set(expanded);
 	}
 
-	// Track expanded state for each group
-	let groupExpandedStates = $state<boolean[]>([]);
-
-	// Initialize expanded states based on groups
-	$effect(() => {
-		const currentGroups = groups;
-		untrack(() => {
-			// Only initialize if length changed or states array is empty
-			if (groupExpandedStates.length !== currentGroups.length) {
-				groupExpandedStates = currentGroups.map((g) => {
-					// If group has an id, try to load from localStorage
-					if (g.id) {
-						const stored = loadGroupState(g.id);
-						if (stored !== undefined) return stored;
-					}
-					// Fall back to defaultCollapsed
-					return !g.defaultCollapsed;
-				});
+	// Check if an item matches active state (used during initialization)
+	function checkItemActive(item: NavItem): boolean {
+		if (isActive) return isActive(item);
+		if (activeId) return item.id === activeId;
+		return false;
+	}
+
+	// Check if any item in a list (or their descendants) is active
+	function hasActiveDescendant(items: NavItem[]): boolean {
+		for (const item of items) {
+			if (checkItemActive(item)) return true;
+			if (item.children && hasActiveDescendant(item.children)) return true;
+		}
+		return false;
+	}
+
+	// Check if a group has any active child at any depth
+	function groupHasActiveChild(group: NavGroup): boolean {
+		if (!group.items) return false;
+		return hasActiveDescendant(group.items);
+	}
+
+	// Compute initial group expanded states synchronously
+	function computeGroupStates(): boolean[] {
+		return groups.map((g) => {
+			// First priority: localStorage (if persistence enabled)
+			if (persistState && g.id) {
+				const stored = loadGroupState(g.id);
+				if (stored != null) return stored;  // Check for both null and undefined
+			}
+			// Second priority: auto-expand if group has an active child
+			if (groupHasActiveChild(g)) {
+				return true;
 			}
+			// Third priority: use defaultExpanded prop
+			if (g.defaultExpanded !== undefined) {
+				return g.defaultExpanded;
+			}
+			// Default: collapsed
+			return false;
 		});
+	}
+
+	// Initialize state synchronously from props (not via effect)
+	let groupExpandedStates = $state<boolean[]>(computeGroupStates());
+
+	// Re-sync if groups array length changes
+	$effect.pre(() => {
+		if (groupExpandedStates.length !== groups.length) {
+			groupExpandedStates = computeGroupStates();
+		}
 	});
 
 	// Check if group is expanded
 	function isGroupExpanded(index: number): boolean {
-		return groupExpandedStates[index] ?? true;
+		return groupExpandedStates[index] ?? false;
 	}
 
 	// Toggle group expand/collapse
 	function toggleGroup(index: number) {
-		groupExpandedStates[index] = !groupExpandedStates[index];
+		const newState = !groupExpandedStates[index];
+		groupExpandedStates[index] = newState;
 
 		// Persist state if group has an id
 		const group = groups[index];
 		if (group?.id) {
-			saveGroupState(group.id, groupExpandedStates[index]);
+			saveGroupState(group.id, newState);
 		}
 
-		onGroupToggle?.(index, groupExpandedStates[index]);
+		onGroupToggle?.(index, newState);
 	}
 
 	// Check if a group has items (and thus should be expandable)
@@ -268,10 +300,6 @@
 		return (item.children?.length ?? 0) > 0;
 	}
 
-	// Track expanded state for individual items with children
-	let itemExpandedStates = $state<Set<string>>(new Set());
-	let itemStatesInitialized = false;
-
 	// Collect all items with children recursively
 	function collectItemsWithChildren(items: NavItem[]): NavItem[] {
 		const result: NavItem[] = [];
@@ -284,32 +312,33 @@
 		return result;
 	}
 
-	// Initialize item expanded states from localStorage
-	$effect(() => {
-		const currentGroups = groups;
-		untrack(() => {
-			if (itemStatesInitialized) return;
-			itemStatesInitialized = true;
-
-			if (!persistState) return;
-
-			const expandedItems = new Set<string>();
-			for (const group of currentGroups) {
-				if (group.items) {
-					const itemsWithChildren = collectItemsWithChildren(group.items);
-					for (const item of itemsWithChildren) {
+	// Compute initial item expanded states synchronously
+	function computeItemStates(): Set<string> {
+		const expandedItems = new Set<string>();
+		for (const group of groups) {
+			if (group.items) {
+				const itemsWithChildren = collectItemsWithChildren(group.items);
+				for (const item of itemsWithChildren) {
+					// First priority: localStorage (if persistence enabled)
+					if (persistState) {
 						const stored = loadItemState(item.id);
-						if (stored === true) {
-							expandedItems.add(item.id);
+						if (stored != null) {
+							if (stored) expandedItems.add(item.id);
+							continue; // localStorage takes precedence
 						}
 					}
+					// Second priority: auto-expand if item has an active descendant
+					if (item.children && hasActiveDescendant(item.children)) {
+						expandedItems.add(item.id);
+					}
 				}
 			}
-			if (expandedItems.size > 0) {
-				itemExpandedStates = expandedItems;
-			}
-		});
-	});
+		}
+		return expandedItems;
+	}
+
+	// Track expanded state for individual items with children (initialized synchronously)
+	let itemExpandedStates = $state<Set<string>>(computeItemStates());
 
 	// Check if an item is expanded
 	function isItemExpanded(itemId: string): boolean {

package/dist/components/Nav/Nav.svelte.d.ts

@@ -35,8 +35,8 @@ export interface NavGroup {
     items?: NavItem[];
     /** Group icon (optional) */
     icon?: THC;
-    /** Whether the group starts collapsed */
-    defaultCollapsed?: boolean;
+    /** Whether the group starts expanded (default: false, groups are collapsed by default) */
+    defaultExpanded?: boolean;
     /** Navigation URL for groups without items */
     href?: string;
     /** Click handler for groups without items */

package/dist/components/ThemePreview/index.css

@@ -25,10 +25,10 @@
 	--stuic-theme-preview-transition:      150ms;
 
 	/* Section-specific tokens that consume theme colors */
-	--stuic-theme-preview-header-bg:       var(--stuic-color-surface);
-	--stuic-theme-preview-header-text:     var(--stuic-color-surface-foreground);
-	--stuic-theme-preview-sidebar-bg:      var(--stuic-color-muted);
-	--stuic-theme-preview-sidebar-text:    var(--stuic-color-muted-foreground);
+	--stuic-theme-preview-header-bg:       var(--stuic-color-surface-2);
+	--stuic-theme-preview-header-text:     var(--stuic-color-surface-2-foreground);
+	--stuic-theme-preview-sidebar-bg:      var(--stuic-color-surface-1);
+	--stuic-theme-preview-sidebar-text:    var(--stuic-color-surface-1-foreground);
 	--stuic-theme-preview-sidebar-width:   200px;
 	--stuic-theme-preview-main-bg:         var(--stuic-color-background);
 	--stuic-theme-preview-main-text:       var(--stuic-color-foreground);
@@ -80,7 +80,6 @@
 .stuic-theme-preview-header .header-subtitle {
 	font-size: 0.875rem;
 	margin: 0;
-	color: var(--stuic-color-muted-foreground);
 }
 
 /* ============================================================================

package/dist/index.css

@@ -1,7 +1,7 @@
 @source "./";
 
 /*  */
-@import "./themes/neutral.css";
+@import "./themes/css/neutral.css";
 
 /*****************************************************************************************
 

package/dist/themes/css/emerald-amber-forest.css

@@ -0,0 +1,253 @@
+/* prettier-ignore */
+:root {
+	--stuic-color-primary:                        var(--color-emerald-700, #737373);
+
+	--stuic-color-primary-hover:                  var(--color-emerald-800, #737373);
+	--stuic-color-primary-active:                 var(--color-emerald-900, #737373);
+	--stuic-color-primary-foreground:             var(--color-white, #ffffff);
+	--stuic-color-primary-foreground-hover:       var(--color-white, #ffffff);
+	--stuic-color-primary-foreground-active:      var(--color-white, #ffffff);
+
+	--stuic-color-accent:                         var(--color-amber-600, #737373);
+
+	--stuic-color-accent-hover:                   var(--color-amber-700, #737373);
+	--stuic-color-accent-active:                  var(--color-amber-800, #737373);
+	--stuic-color-accent-foreground:              var(--color-white, #ffffff);
+	--stuic-color-accent-foreground-hover:        var(--color-white, #ffffff);
+	--stuic-color-accent-foreground-active:       var(--color-white, #ffffff);
+
+	--stuic-color-destructive:                    var(--color-red-600, #737373);
+
+	--stuic-color-destructive-hover:              var(--color-red-700, #737373);
+	--stuic-color-destructive-active:             var(--color-red-800, #737373);
+	--stuic-color-destructive-foreground:         var(--color-white, #ffffff);
+	--stuic-color-destructive-foreground-hover:   var(--color-white, #ffffff);
+	--stuic-color-destructive-foreground-active:  var(--color-white, #ffffff);
+
+	--stuic-color-warning:                        var(--color-amber-500, #737373);
+
+	--stuic-color-warning-hover:                  var(--color-amber-600, #737373);
+	--stuic-color-warning-active:                 var(--color-amber-700, #737373);
+	--stuic-color-warning-foreground:             var(--color-white, #ffffff);
+	--stuic-color-warning-foreground-hover:       var(--color-white, #ffffff);
+	--stuic-color-warning-foreground-active:      var(--color-white, #ffffff);
+
+	--stuic-color-success:                        var(--color-emerald-600, #737373);
+
+	--stuic-color-success-hover:                  var(--color-emerald-700, #737373);
+	--stuic-color-success-active:                 var(--color-emerald-800, #737373);
+	--stuic-color-success-foreground:             var(--color-white, #ffffff);
+	--stuic-color-success-foreground-hover:       var(--color-white, #ffffff);
+	--stuic-color-success-foreground-active:      var(--color-white, #ffffff);
+
+	--stuic-color-info:                           var(--color-teal-600, #737373);
+
+	--stuic-color-info-hover:                     var(--color-teal-700, #737373);
+	--stuic-color-info-active:                    var(--color-teal-800, #737373);
+	--stuic-color-info-foreground:                var(--color-white, #ffffff);
+	--stuic-color-info-foreground-hover:          var(--color-white, #ffffff);
+	--stuic-color-info-foreground-active:         var(--color-white, #ffffff);
+
+	--stuic-color-surface-primary:                color-mix(in srgb, var(--stuic-color-primary) 15%, var(--stuic-color-background));
+	--stuic-color-surface-primary-foreground:     color-mix(in srgb, var(--stuic-color-primary), black 10%);
+	--stuic-color-surface-primary-border:         color-mix(in srgb, var(--stuic-color-primary) 30%, var(--stuic-color-background));
+	--stuic-color-surface-accent:                 color-mix(in srgb, var(--stuic-color-accent) 15%, var(--stuic-color-background));
+	--stuic-color-surface-accent-foreground:      color-mix(in srgb, var(--stuic-color-accent), black 10%);
+	--stuic-color-surface-accent-border:          color-mix(in srgb, var(--stuic-color-accent) 30%, var(--stuic-color-background));
+	--stuic-color-surface-destructive:            color-mix(in srgb, var(--stuic-color-destructive) 15%, var(--stuic-color-background));
+	--stuic-color-surface-destructive-foreground: color-mix(in srgb, var(--stuic-color-destructive), black 10%);
+	--stuic-color-surface-destructive-border:     color-mix(in srgb, var(--stuic-color-destructive) 30%, var(--stuic-color-background));
+	--stuic-color-surface-warning:                color-mix(in srgb, var(--stuic-color-warning) 15%, var(--stuic-color-background));
+	--stuic-color-surface-warning-foreground:     color-mix(in srgb, var(--stuic-color-warning), black 10%);
+	--stuic-color-surface-warning-border:         color-mix(in srgb, var(--stuic-color-warning) 30%, var(--stuic-color-background));
+	--stuic-color-surface-success:                color-mix(in srgb, var(--stuic-color-success) 15%, var(--stuic-color-background));
+	--stuic-color-surface-success-foreground:     color-mix(in srgb, var(--stuic-color-success), black 10%);
+	--stuic-color-surface-success-border:         color-mix(in srgb, var(--stuic-color-success) 30%, var(--stuic-color-background));
+	--stuic-color-surface-info:                   color-mix(in srgb, var(--stuic-color-info) 15%, var(--stuic-color-background));
+	--stuic-color-surface-info-foreground:        color-mix(in srgb, var(--stuic-color-info), black 10%);
+	--stuic-color-surface-info-border:            color-mix(in srgb, var(--stuic-color-info) 30%, var(--stuic-color-background));
+	--stuic-color-surface-hover:                  var(--color-stone-200, #737373);
+	--stuic-color-surface-active:                 var(--color-stone-300, #737373);
+	--stuic-color-surface-foreground:             var(--color-stone-900, #737373);
+	--stuic-color-surface-foreground-hover:       var(--color-stone-900, #737373);
+	--stuic-color-surface-foreground-active:      var(--color-stone-900, #737373);
+
+	--stuic-color-background:                     var(--color-amber-50, #737373);
+
+	--stuic-color-background-hover:               var(--color-amber-50, #737373);
+	--stuic-color-background-active:              var(--color-amber-50, #737373);
+	--stuic-color-background-foreground:          var(--color-stone-900, #737373);
+	--stuic-color-background-foreground-hover:    var(--color-stone-900, #737373);
+	--stuic-color-background-foreground-active:   var(--color-stone-900, #737373);
+
+	--stuic-color-surface:                        var(--color-stone-100, #737373);
+
+	--stuic-color-surface-1:                      var(--color-stone-200, #737373);
+	--stuic-color-surface-1-hover:                var(--color-stone-300, #737373);
+	--stuic-color-surface-1-active:               var(--color-stone-400, #737373);
+	--stuic-color-surface-1-foreground:           var(--color-stone-900, #737373);
+	--stuic-color-surface-1-foreground-hover:     var(--color-stone-900, #737373);
+	--stuic-color-surface-1-foreground-active:    var(--color-stone-900, #737373);
+
+	--stuic-color-surface-2:                      var(--color-stone-300, #737373);
+	--stuic-color-surface-2-hover:                var(--color-stone-400, #737373);
+	--stuic-color-surface-2-active:               var(--color-stone-500, #737373);
+	--stuic-color-surface-2-foreground:           var(--color-stone-900, #737373);
+	--stuic-color-surface-2-foreground-hover:     var(--color-stone-900, #737373);
+	--stuic-color-surface-2-foreground-active:    var(--color-stone-900, #737373);
+
+	--stuic-color-muted:                          var(--color-stone-200, #737373);
+
+	--stuic-color-muted-hover:                    var(--color-stone-300, #737373);
+	--stuic-color-muted-active:                   var(--color-stone-400, #737373);
+	--stuic-color-muted-foreground:               var(--color-stone-500, #737373);
+	--stuic-color-muted-foreground-hover:         var(--color-stone-500, #737373);
+	--stuic-color-muted-foreground-active:        var(--color-stone-500, #737373);
+
+	--stuic-color-foreground:                     var(--color-stone-900, #737373);
+
+	--stuic-color-foreground-hover:               var(--color-stone-900, #737373);
+	--stuic-color-foreground-active:              var(--color-stone-900, #737373);
+
+	--stuic-color-border:                         var(--color-stone-300, #737373);
+
+	--stuic-color-border-hover:                   var(--color-stone-400, #737373);
+	--stuic-color-border-active:                  var(--color-stone-500, #737373);
+
+	--stuic-color-input:                          var(--color-amber-50, #737373);
+
+	--stuic-color-input-hover:                    var(--color-stone-100, #737373);
+	--stuic-color-input-active:                   var(--color-amber-50, #737373);
+
+	--stuic-color-ring:                           color-mix(in srgb, var(--color-emerald-700) 20%, transparent);
+
+	--stuic-color-ring-hover:                     color-mix(in srgb, var(--color-emerald-700) 20%, transparent);
+	--stuic-color-ring-active:                    color-mix(in srgb, var(--color-emerald-700) 20%, transparent);
+}
+
+/* prettier-ignore */
+:root.dark {
+	--stuic-color-primary:                        var(--color-emerald-500, #737373);
+
+	--stuic-color-primary-hover:                  var(--color-emerald-400, #737373);
+	--stuic-color-primary-active:                 var(--color-emerald-300, #737373);
+	--stuic-color-primary-foreground:             var(--color-white, #ffffff);
+	--stuic-color-primary-foreground-hover:       var(--color-white, #ffffff);
+	--stuic-color-primary-foreground-active:      var(--color-white, #ffffff);
+
+	--stuic-color-accent:                         var(--color-amber-500, #737373);
+
+	--stuic-color-accent-hover:                   var(--color-amber-400, #737373);
+	--stuic-color-accent-active:                  var(--color-amber-300, #737373);
+	--stuic-color-accent-foreground:              var(--color-black, #000000);
+	--stuic-color-accent-foreground-hover:        var(--color-black, #000000);
+	--stuic-color-accent-foreground-active:       var(--color-black, #000000);
+
+	--stuic-color-destructive:                    var(--color-red-500, #737373);
+
+	--stuic-color-destructive-hover:              var(--color-red-400, #737373);
+	--stuic-color-destructive-active:             var(--color-red-300, #737373);
+	--stuic-color-destructive-foreground:         var(--color-white, #ffffff);
+	--stuic-color-destructive-foreground-hover:   var(--color-white, #ffffff);
+	--stuic-color-destructive-foreground-active:  var(--color-white, #ffffff);
+
+	--stuic-color-warning:                        var(--color-amber-400, #737373);
+
+	--stuic-color-warning-hover:                  var(--color-amber-300, #737373);
+	--stuic-color-warning-active:                 var(--color-amber-200, #737373);
+	--stuic-color-warning-foreground:             var(--color-black, #000000);
+	--stuic-color-warning-foreground-hover:       var(--color-black, #000000);
+	--stuic-color-warning-foreground-active:      var(--color-black, #000000);
+
+	--stuic-color-success:                        var(--color-emerald-500, #737373);
+
+	--stuic-color-success-hover:                  var(--color-emerald-400, #737373);
+	--stuic-color-success-active:                 var(--color-emerald-300, #737373);
+	--stuic-color-success-foreground:             var(--color-white, #ffffff);
+	--stuic-color-success-foreground-hover:       var(--color-white, #ffffff);
+	--stuic-color-success-foreground-active:      var(--color-white, #ffffff);
+
+	--stuic-color-info:                           var(--color-teal-400, #737373);
+
+	--stuic-color-info-hover:                     var(--color-teal-300, #737373);
+	--stuic-color-info-active:                    var(--color-teal-200, #737373);
+	--stuic-color-info-foreground:                var(--color-white, #ffffff);
+	--stuic-color-info-foreground-hover:          var(--color-white, #ffffff);
+	--stuic-color-info-foreground-active:         var(--color-white, #ffffff);
+
+	--stuic-color-surface-primary:                color-mix(in srgb, var(--stuic-color-primary) 15%, var(--stuic-color-background));
+	--stuic-color-surface-primary-foreground:     color-mix(in srgb, var(--stuic-color-primary), white 10%);
+	--stuic-color-surface-primary-border:         color-mix(in srgb, var(--stuic-color-primary) 30%, var(--stuic-color-background));
+	--stuic-color-surface-accent:                 color-mix(in srgb, var(--stuic-color-accent) 15%, var(--stuic-color-background));
+	--stuic-color-surface-accent-foreground:      color-mix(in srgb, var(--stuic-color-accent), white 10%);
+	--stuic-color-surface-accent-border:          color-mix(in srgb, var(--stuic-color-accent) 30%, var(--stuic-color-background));
+	--stuic-color-surface-destructive:            color-mix(in srgb, var(--stuic-color-destructive) 15%, var(--stuic-color-background));
+	--stuic-color-surface-destructive-foreground: color-mix(in srgb, var(--stuic-color-destructive), white 10%);
+	--stuic-color-surface-destructive-border:     color-mix(in srgb, var(--stuic-color-destructive) 30%, var(--stuic-color-background));
+	--stuic-color-surface-warning:                color-mix(in srgb, var(--stuic-color-warning) 15%, var(--stuic-color-background));
+	--stuic-color-surface-warning-foreground:     color-mix(in srgb, var(--stuic-color-warning), white 10%);
+	--stuic-color-surface-warning-border:         color-mix(in srgb, var(--stuic-color-warning) 30%, var(--stuic-color-background));
+	--stuic-color-surface-success:                color-mix(in srgb, var(--stuic-color-success) 15%, var(--stuic-color-background));
+	--stuic-color-surface-success-foreground:     color-mix(in srgb, var(--stuic-color-success), white 10%);
+	--stuic-color-surface-success-border:         color-mix(in srgb, var(--stuic-color-success) 30%, var(--stuic-color-background));
+	--stuic-color-surface-info:                   color-mix(in srgb, var(--stuic-color-info) 15%, var(--stuic-color-background));
+	--stuic-color-surface-info-foreground:        color-mix(in srgb, var(--stuic-color-info), white 10%);
+	--stuic-color-surface-info-border:            color-mix(in srgb, var(--stuic-color-info) 30%, var(--stuic-color-background));
+	--stuic-color-surface-hover:                  var(--color-stone-700, #737373);
+	--stuic-color-surface-active:                 var(--color-stone-600, #737373);
+	--stuic-color-surface-foreground:             var(--color-stone-100, #737373);
+	--stuic-color-surface-foreground-hover:       var(--color-stone-100, #737373);
+	--stuic-color-surface-foreground-active:      var(--color-stone-100, #737373);
+
+	--stuic-color-background:                     var(--color-stone-900, #737373);
+
+	--stuic-color-background-hover:               var(--color-stone-900, #737373);
+	--stuic-color-background-active:              var(--color-stone-900, #737373);
+	--stuic-color-background-foreground:          var(--color-stone-50, #737373);
+	--stuic-color-background-foreground-hover:    var(--color-stone-50, #737373);
+	--stuic-color-background-foreground-active:   var(--color-stone-50, #737373);
+
+	--stuic-color-surface:                        var(--color-stone-800, #737373);
+
+	--stuic-color-surface-1:                      var(--color-stone-700, #737373);
+	--stuic-color-surface-1-hover:                var(--color-stone-600, #737373);
+	--stuic-color-surface-1-active:               var(--color-stone-500, #737373);
+	--stuic-color-surface-1-foreground:           var(--color-stone-100, #737373);
+	--stuic-color-surface-1-foreground-hover:     var(--color-stone-100, #737373);
+	--stuic-color-surface-1-foreground-active:    var(--color-stone-100, #737373);
+
+	--stuic-color-surface-2:                      var(--color-stone-600, #737373);
+	--stuic-color-surface-2-hover:                var(--color-stone-500, #737373);
+	--stuic-color-surface-2-active:               var(--color-stone-400, #737373);
+	--stuic-color-surface-2-foreground:           var(--color-stone-100, #737373);
+	--stuic-color-surface-2-foreground-hover:     var(--color-stone-100, #737373);
+	--stuic-color-surface-2-foreground-active:    var(--color-stone-100, #737373);
+
+	--stuic-color-muted:                          var(--color-stone-700, #737373);
+
+	--stuic-color-muted-hover:                    var(--color-stone-600, #737373);
+	--stuic-color-muted-active:                   var(--color-stone-500, #737373);
+	--stuic-color-muted-foreground:               var(--color-stone-400, #737373);
+	--stuic-color-muted-foreground-hover:         var(--color-stone-400, #737373);
+	--stuic-color-muted-foreground-active:        var(--color-stone-400, #737373);
+
+	--stuic-color-foreground:                     var(--color-stone-50, #737373);
+
+	--stuic-color-foreground-hover:               var(--color-stone-50, #737373);
+	--stuic-color-foreground-active:              var(--color-stone-50, #737373);
+
+	--stuic-color-border:                         var(--color-stone-600, #737373);
+
+	--stuic-color-border-hover:                   var(--color-stone-500, #737373);
+	--stuic-color-border-active:                  var(--color-stone-400, #737373);
+
+	--stuic-color-input:                          var(--color-stone-800, #737373);
+
+	--stuic-color-input-hover:                    var(--color-stone-700, #737373);
+	--stuic-color-input-active:                   var(--color-stone-800, #737373);
+
+	--stuic-color-ring:                           color-mix(in srgb, var(--color-emerald-500) 25%, transparent);
+
+	--stuic-color-ring-hover:                     color-mix(in srgb, var(--color-emerald-500) 25%, transparent);
+	--stuic-color-ring-active:                    color-mix(in srgb, var(--color-emerald-500) 25%, transparent);
+}