@marianmeres/stuic 3.0.1 → 3.0.3

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

@@ -72,6 +72,19 @@ export interface NavigableExpandable {
     expandableItem: DropdownMenuExpandableItem;
 }
 export type NavigableItem = DropdownMenuActionItem | NavigableExpandable;
+/** Search configuration options */
+export interface DropdownMenuSearchConfig {
+    /** Placeholder text for search input */
+    placeholder?: string;
+    /** Search strategy */
+    strategy?: "prefix" | "exact" | "fuzzy";
+    /** Custom function to extract searchable text from an item */
+    getContent?: (item: DropdownMenuActionItem | DropdownMenuExpandableItem) => string;
+    /** Auto-focus search input when menu opens */
+    autoFocus?: boolean;
+    /** Message shown when no results found */
+    noResultsMessage?: string;
+}
 export interface Props extends Omit<HTMLButtonAttributes, "children"> {
     /** Menu items to display */
     items: DropdownMenuItem[];
@@ -91,6 +104,8 @@ export interface Props extends Omit<HTMLButtonAttributes, "children"> {
     closeOnEscape?: boolean;
     /** Force fallback positioning mode (for testing) */
     forceFallback?: boolean;
+    /** Enable search/filter functionality (true for defaults, or config object) */
+    search?: boolean | DropdownMenuSearchConfig;
     /** Classes for the wrapper element */
     class?: string;
     /** Classes for the trigger button */
@@ -117,6 +132,10 @@ export interface Props extends Omit<HTMLButtonAttributes, "children"> {
     classExpandableContent?: string;
     /** Classes for backdrop (fallback mode only) */
     classBackdrop?: string;
+    /** Classes for search input container */
+    classSearchContainer?: string;
+    /** Classes for search input */
+    classSearchInput?: string;
     /** Show backdrop in fallback mode (default: true) */
     showBackdrop?: boolean;
     /** Custom trigger snippet - receives isOpen state, toggle function, and ARIA props for full control */

package/dist/components/DropdownMenu/index.css

@@ -64,6 +64,11 @@
 
 	/* Expandable section indent */
 	--stuic-dropdown-menu-expandable-indent: calc(var(--spacing) * 4);
+
+	/* Search */
+	--stuic-dropdown-menu-search-bg: var(--stuic-color-surface);
+	--stuic-dropdown-menu-search-border: var(--stuic-color-border);
+	--stuic-dropdown-menu-search-text: var(--stuic-color-muted-foreground);
 }
 
 @layer components {
@@ -266,4 +271,63 @@
 				--pop-right;
 		}
 	}
+
+	/* =============================================================================
+	   SEARCH INPUT
+	   ============================================================================= */
+
+	.stuic-dropdown-menu-search {
+		position: sticky;
+		top: 0;
+		z-index: 10;
+		display: flex;
+		align-items: center;
+		gap: calc(var(--spacing) * 1);
+		padding: calc(var(--spacing) * 1.5) calc(var(--spacing) * 2);
+		background: var(--stuic-dropdown-menu-search-bg);
+		border-bottom: 1px solid var(--stuic-dropdown-menu-search-border);
+		margin: calc(var(--stuic-dropdown-menu-padding) * -1);
+		margin-bottom: var(--stuic-dropdown-menu-padding);
+	}
+
+	.stuic-dropdown-menu-search-icon {
+		color: var(--stuic-dropdown-menu-search-text);
+		flex-shrink: 0;
+		display: flex;
+	}
+
+	.stuic-dropdown-menu-search-input {
+		flex: 1;
+		min-width: 0;
+		background: transparent;
+		border: none;
+		outline: none;
+		color: var(--stuic-dropdown-menu-text);
+		font-size: inherit;
+	}
+
+	.stuic-dropdown-menu-search-input::placeholder {
+		color: var(--stuic-dropdown-menu-search-text);
+	}
+
+	.stuic-dropdown-menu-search-clear {
+		background: transparent;
+		border: none;
+		color: var(--stuic-dropdown-menu-search-text);
+		cursor: pointer;
+		padding: calc(var(--spacing) * 0.5);
+		display: flex;
+		border-radius: var(--stuic-dropdown-menu-radius);
+		transition: color var(--stuic-dropdown-menu-transition);
+	}
+
+	.stuic-dropdown-menu-search-clear:hover {
+		color: var(--stuic-dropdown-menu-text);
+	}
+
+	.stuic-dropdown-menu-no-results {
+		padding: calc(var(--spacing) * 4);
+		text-align: center;
+		color: var(--stuic-dropdown-menu-search-text);
+	}
 }

package/dist/components/DropdownMenu/index.d.ts

@@ -1 +1 @@
-export { default as DropdownMenu, type Props as DropdownMenuProps, type DropdownMenuItem, type DropdownMenuActionItem, type DropdownMenuDividerItem, type DropdownMenuHeaderItem, type DropdownMenuCustomItem, type DropdownMenuExpandableItem, type DropdownMenuFlatItem, type DropdownMenuPosition, type NavigableItem, type NavigableExpandable, DROPDOWN_MENU_BASE_CLASSES, DROPDOWN_MENU_TRIGGER_CLASSES, DROPDOWN_MENU_DROPDOWN_CLASSES, DROPDOWN_MENU_DIVIDER_CLASSES, DROPDOWN_MENU_HEADER_CLASSES, } from "./DropdownMenu.svelte";
+export { default as DropdownMenu, type Props as DropdownMenuProps, type DropdownMenuItem, type DropdownMenuActionItem, type DropdownMenuDividerItem, type DropdownMenuHeaderItem, type DropdownMenuCustomItem, type DropdownMenuExpandableItem, type DropdownMenuFlatItem, type DropdownMenuPosition, type DropdownMenuSearchConfig, type NavigableItem, type NavigableExpandable, DROPDOWN_MENU_BASE_CLASSES, DROPDOWN_MENU_TRIGGER_CLASSES, DROPDOWN_MENU_DROPDOWN_CLASSES, DROPDOWN_MENU_DIVIDER_CLASSES, DROPDOWN_MENU_HEADER_CLASSES, } from "./DropdownMenu.svelte";

package/dist/components/HoverExpandableWidth/HoverExpandableWidth.svelte

@@ -9,6 +9,7 @@
 		targetWidth?: number;
 		delayIn?: number;
 		delayOut?: number;
+		zIndex?: number;
 		children: Snippet<
 			[
 				{
@@ -38,6 +39,7 @@
 		targetWidth = 256,
 		delayIn = 500,
 		delayOut = 300,
+		zIndex = 10,
 		class: classProp,
 		children,
 		...rest
@@ -95,7 +97,7 @@
 		el.style.width = "auto";
 		el.style.height = "auto";
 
-		el.style.zIndex = "1";
+		el.style.zIndex = `${zIndex}`;
 
 		// kind of ugly - need to set props in multiple steps...
 		(async () => {

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

@@ -7,6 +7,7 @@ export interface Props {
     targetWidth?: number;
     delayIn?: number;
     delayOut?: number;
+    zIndex?: number;
     children: Snippet<[
         {
             isExpanded: boolean;

package/dist/components/Input/index.css

@@ -217,7 +217,7 @@
 	.stuic-input .input-wrap.invalid:focus-within {
 		border-color: var(--stuic-input-accent-error);
 		box-shadow: 0 0 0 var(--stuic-input-ring-width)
-			color-mix(in srgb, var(--stuic-input-accent-error) 20%, transparent);
+			color-mix(in srgb, var(--stuic-input-accent-error) 20%, var(--stuic-color-background));
 	}
 
 	/* Disabled state */

package/dist/components/Switch/index.css

@@ -68,7 +68,7 @@
 	.stuic-switch:focus {
 		outline: none;
 		box-shadow: 0 0 0 var(--stuic-switch-ring-width)
-			color-mix(in srgb, var(--stuic-switch-ring-color) 30%, transparent);
+			color-mix(in srgb, var(--stuic-switch-ring-color) 30%, var(--stuic-color-background));
 	}
 
 	/* Disabled */

package/dist/components/ThemePreview/ThemePreview.svelte

@@ -203,6 +203,23 @@
 				</div>
 			</section>
 
+			<!-- HIGHLIGHT BOXES -->
+			<section class="preview-section">
+				{#if showLabels}
+					<h2 class="section-label">Highlighted Content</h2>
+				{/if}
+
+				<div class="highlight-box primary">
+					<strong>Primary Highlight</strong>
+					<p>This box uses primary intent colors for important content.</p>
+				</div>
+
+				<div class="highlight-box accent">
+					<strong>Accent Highlight</strong>
+					<p>This box uses accent colors to draw attention.</p>
+				</div>
+			</section>
+
 			<!-- ROLE COLORS -->
 			<section class="preview-section">
 				{#if showLabels}
@@ -289,23 +306,6 @@
 				</div>
 			</section>
 
-			<!-- HIGHLIGHT BOXES -->
-			<section class="preview-section">
-				{#if showLabels}
-					<h2 class="section-label">Highlighted Content</h2>
-				{/if}
-
-				<div class="highlight-box primary">
-					<strong>Primary Highlight</strong>
-					<p>This box uses primary intent colors for important content.</p>
-				</div>
-
-				<div class="highlight-box accent">
-					<strong>Accent Highlight</strong>
-					<p>This box uses accent colors to draw attention.</p>
-				</div>
-			</section>
-
 			<!-- TYPOGRAPHY -->
 			<section class="preview-section">
 				{#if showLabels}

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);
 }
 
 /* ============================================================================
@@ -402,17 +401,17 @@
 	opacity: 0.9;
 }
 
-/* Using soft variant pattern for content boxes */
+/* Using surface-intent tokens for content boxes */
 .stuic-theme-preview .highlight-box.primary {
-	background: color-mix(in srgb, var(--stuic-color-primary) 15%, transparent);
-	color: var(--stuic-color-primary);
-	border: 1px solid color-mix(in srgb, var(--stuic-color-primary) 30%, transparent);
+	background: var(--stuic-color-surface-primary);
+	color: var(--stuic-color-surface-primary-foreground);
+	border: 1px solid var(--stuic-color-surface-primary-border);
 }
 
 .stuic-theme-preview .highlight-box.accent {
-	background: color-mix(in srgb, var(--stuic-color-accent) 15%, transparent);
-	color: var(--stuic-color-accent);
-	border: 1px solid color-mix(in srgb, var(--stuic-color-accent) 30%, transparent);
+	background: var(--stuic-color-surface-accent);
+	color: var(--stuic-color-surface-accent-foreground);
+	border: 1px solid var(--stuic-color-surface-accent-border);
 }
 
 /* ============================================================================

package/dist/icons/index.d.ts

@@ -26,6 +26,7 @@ export { iconLucideTrash2 as iconTrash } from "@marianmeres/icons-fns/lucide/ico
 export { iconLucideZoomIn as iconZoomIn } from "@marianmeres/icons-fns/lucide/iconLucideZoomIn.js";
 export { iconLucideZoomOut as iconZoomOut } from "@marianmeres/icons-fns/lucide/iconLucideZoomOut.js";
 export { iconLucideSearch as iconSearch } from "@marianmeres/icons-fns/lucide/iconLucideSearch.js";
+export { iconLucideX as iconX } from "@marianmeres/icons-fns/lucide/iconLucideX.js";
 export { iconLucideChevronDown as iconChevronDown } from "@marianmeres/icons-fns/lucide/iconLucideChevronDown.js";
 export { iconLucideChevronUp as iconChevronUp } from "@marianmeres/icons-fns/lucide/iconLucideChevronUp.js";
 export { iconLucideChevronRight as iconChevronRight } from "@marianmeres/icons-fns/lucide/iconLucideChevronRight.js";

package/dist/icons/index.js

@@ -30,6 +30,7 @@ export { iconLucideZoomIn as iconZoomIn } from "@marianmeres/icons-fns/lucide/ic
 export { iconLucideZoomOut as iconZoomOut } from "@marianmeres/icons-fns/lucide/iconLucideZoomOut.js";
 // UI Control Icons (Lucide)
 export { iconLucideSearch as iconSearch } from "@marianmeres/icons-fns/lucide/iconLucideSearch.js";
+export { iconLucideX as iconX } from "@marianmeres/icons-fns/lucide/iconLucideX.js";
 export { iconLucideChevronDown as iconChevronDown } from "@marianmeres/icons-fns/lucide/iconLucideChevronDown.js";
 export { iconLucideChevronUp as iconChevronUp } from "@marianmeres/icons-fns/lucide/iconLucideChevronUp.js";
 export { iconLucideChevronRight as iconChevronRight } from "@marianmeres/icons-fns/lucide/iconLucideChevronRight.js";

package/dist/index.css

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

package/dist/themes/css/blue-orange.css

@@ -0,0 +1,253 @@
+/* prettier-ignore */
+:root {
+	--stuic-color-primary:                        var(--color-blue-600, #737373);
+
+	--stuic-color-primary-hover:                  var(--color-blue-700, #737373);
+	--stuic-color-primary-active:                 var(--color-blue-800, #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-orange-500, #737373);
+
+	--stuic-color-accent-hover:                   var(--color-orange-600, #737373);
+	--stuic-color-accent-active:                  var(--color-orange-700, #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-rose-600, #737373);
+
+	--stuic-color-destructive-hover:              var(--color-rose-700, #737373);
+	--stuic-color-destructive-active:             var(--color-rose-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-orange-500, #737373);
+
+	--stuic-color-warning-hover:                  var(--color-orange-600, #737373);
+	--stuic-color-warning-active:                 var(--color-orange-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-teal-600, #737373);
+
+	--stuic-color-success-hover:                  var(--color-teal-700, #737373);
+	--stuic-color-success-active:                 var(--color-teal-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-blue-500, #737373);
+
+	--stuic-color-info-hover:                     var(--color-blue-600, #737373);
+	--stuic-color-info-active:                    var(--color-blue-700, #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-100, #737373);
+	--stuic-color-surface-active:                 var(--color-stone-200, #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-white, #ffffff);
+
+	--stuic-color-background-hover:               var(--color-white, #ffffff);
+	--stuic-color-background-active:              var(--color-white, #ffffff);
+	--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-50, #737373);
+
+	--stuic-color-surface-1:                      var(--color-stone-100, #737373);
+	--stuic-color-surface-1-hover:                var(--color-stone-200, #737373);
+	--stuic-color-surface-1-active:               var(--color-stone-300, #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-200, #737373);
+	--stuic-color-surface-2-hover:                var(--color-stone-300, #737373);
+	--stuic-color-surface-2-active:               var(--color-stone-400, #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-100, #737373);
+
+	--stuic-color-muted-hover:                    var(--color-stone-200, #737373);
+	--stuic-color-muted-active:                   var(--color-stone-300, #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-200, #737373);
+
+	--stuic-color-border-hover:                   var(--color-stone-300, #737373);
+	--stuic-color-border-active:                  var(--color-stone-400, #737373);
+
+	--stuic-color-input:                          var(--color-white, #ffffff);
+
+	--stuic-color-input-hover:                    var(--color-stone-50, #737373);
+	--stuic-color-input-active:                   var(--color-white, #ffffff);
+
+	--stuic-color-ring:                           color-mix(in srgb, var(--color-blue-600) 20%, transparent);
+
+	--stuic-color-ring-hover:                     color-mix(in srgb, var(--color-blue-600) 20%, transparent);
+	--stuic-color-ring-active:                    color-mix(in srgb, var(--color-blue-600) 20%, transparent);
+}
+
+/* prettier-ignore */
+:root.dark {
+	--stuic-color-primary:                        var(--color-blue-500, #737373);
+
+	--stuic-color-primary-hover:                  var(--color-blue-400, #737373);
+	--stuic-color-primary-active:                 var(--color-blue-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-orange-400, #737373);
+
+	--stuic-color-accent-hover:                   var(--color-orange-300, #737373);
+	--stuic-color-accent-active:                  var(--color-orange-200, #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-rose-500, #737373);
+
+	--stuic-color-destructive-hover:              var(--color-rose-400, #737373);
+	--stuic-color-destructive-active:             var(--color-rose-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-orange-400, #737373);
+
+	--stuic-color-warning-hover:                  var(--color-orange-300, #737373);
+	--stuic-color-warning-active:                 var(--color-orange-200, #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-teal-500, #737373);
+
+	--stuic-color-success-hover:                  var(--color-teal-400, #737373);
+	--stuic-color-success-active:                 var(--color-teal-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-blue-400, #737373);
+
+	--stuic-color-info-hover:                     var(--color-blue-300, #737373);
+	--stuic-color-info-active:                    var(--color-blue-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-700, #737373);
+
+	--stuic-color-border-hover:                   var(--color-stone-600, #737373);
+	--stuic-color-border-active:                  var(--color-stone-500, #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-blue-400) 25%, transparent);
+
+	--stuic-color-ring-hover:                     color-mix(in srgb, var(--color-blue-400) 25%, transparent);
+	--stuic-color-ring-active:                    color-mix(in srgb, var(--color-blue-400) 25%, transparent);
+}