@marianmeres/stuic 3.5.2 → 3.6.0

package/dist/components/Button/index.css

@@ -148,14 +148,14 @@
 	   Each intent sets the color palette via internal CSS vars.
 	   ============================================================================ */
 
-	/* Default (no intent): neutral gray (no blue undertone) */
+	/* Default (no intent): uses role tokens for theme-aware neutral styling */
 	.stuic-button:not([data-intent]) {
-		--_color: var(--color-neutral-200);
-		--_color-hover: var(--color-neutral-300);
-		--_color-active: var(--color-neutral-400);
-		--_fg: var(--color-neutral-800);
-		--_fg-hover: var(--color-neutral-800);
-		--_fg-active: var(--color-neutral-800);
+		--_color: var(--stuic-color-muted);
+		--_color-hover: var(--stuic-color-muted-hover);
+		--_color-active: var(--stuic-color-muted-active);
+		--_fg: var(--stuic-color-foreground);
+		--_fg-hover: var(--stuic-color-foreground-hover);
+		--_fg-active: var(--stuic-color-foreground-active);
 	}
 
 	.stuic-button[data-intent="primary"] {
@@ -294,103 +294,43 @@
 	/* Default solid: add visible border */
 	.stuic-button:not([data-intent])[data-variant="solid"],
 	.stuic-button:not([data-intent]):not([data-variant]) {
-		--_border: var(--color-neutral-400);
-		--_border-hover: var(--color-neutral-500);
-		--_border-active: var(--color-neutral-500);
+		--_border: var(--stuic-color-border-hover);
+		--_border-hover: var(--stuic-color-border-active);
+		--_border-active: var(--stuic-color-border-active);
 	}
 
 	.stuic-button:not([data-intent])[data-variant="outline"] {
-		--_text: var(--color-neutral-800);
-		--_text-hover: var(--color-neutral-900);
-		--_text-active: var(--color-neutral-900);
-		--_border: var(--color-neutral-400);
-		--_border-hover: var(--color-neutral-400);
-		--_border-active: var(--color-neutral-500);
-		--_bg-hover: var(--color-neutral-100);
-		--_bg-active: var(--color-neutral-200);
+		--_text: var(--stuic-color-foreground);
+		--_text-hover: var(--stuic-color-foreground-hover);
+		--_text-active: var(--stuic-color-foreground-active);
+		--_border: var(--stuic-color-border-hover);
+		--_border-hover: var(--stuic-color-border-hover);
+		--_border-active: var(--stuic-color-border-active);
+		--_bg-hover: var(--stuic-color-muted-hover);
+		--_bg-active: var(--stuic-color-muted-active);
 	}
 
 	.stuic-button:not([data-intent])[data-variant="ghost"] {
-		--_text: var(--color-neutral-800);
-		--_text-hover: var(--color-neutral-900);
-		--_text-active: var(--color-neutral-900);
-		--_bg-hover: var(--color-neutral-100);
-		--_bg-active: var(--color-neutral-200);
+		--_text: var(--stuic-color-foreground);
+		--_text-hover: var(--stuic-color-foreground-hover);
+		--_text-active: var(--stuic-color-foreground-active);
+		--_bg-hover: var(--stuic-color-muted-hover);
+		--_bg-active: var(--stuic-color-muted-active);
 	}
 
 	.stuic-button:not([data-intent])[data-variant="soft"] {
-		--_text: var(--color-neutral-800);
-		--_text-hover: var(--color-neutral-900);
-		--_text-active: var(--color-neutral-900);
-		--_bg: var(--color-neutral-100);
-		--_bg-hover: var(--color-neutral-200);
-		--_bg-active: var(--color-neutral-300);
+		--_text: var(--stuic-color-foreground);
+		--_text-hover: var(--stuic-color-foreground-hover);
+		--_text-active: var(--stuic-color-foreground-active);
+		--_bg: var(--stuic-color-muted);
+		--_bg-hover: var(--stuic-color-muted-hover);
+		--_bg-active: var(--stuic-color-muted-active);
 	}
 
 	.stuic-button:not([data-intent])[data-variant="link"] {
-		--_text: var(--color-neutral-700);
-		--_text-hover: var(--color-neutral-900);
-		--_text-active: var(--color-neutral-900);
-	}
-
-	/* ============================================================================
-	   DEFAULT INTENT DARK MODE OVERRIDES
-	   ============================================================================ */
-
-	/* Default (no intent) in dark mode: lighter neutral colors */
-	.dark .stuic-button:not([data-intent]) {
-		--_color: var(--color-neutral-700);
-		--_color-hover: var(--color-neutral-600);
-		--_color-active: var(--color-neutral-500);
-		--_fg: var(--color-neutral-100);
-		--_fg-hover: var(--color-neutral-100);
-		--_fg-active: var(--color-neutral-100);
-	}
-
-	/* Default solid in dark mode */
-	.dark .stuic-button:not([data-intent])[data-variant="solid"],
-	.dark .stuic-button:not([data-intent]):not([data-variant]) {
-		--_border: var(--color-neutral-500);
-		--_border-hover: var(--color-neutral-400);
-		--_border-active: var(--color-neutral-400);
-	}
-
-	/* Default outline in dark mode */
-	.dark .stuic-button:not([data-intent])[data-variant="outline"] {
-		--_text: var(--color-neutral-200);
-		--_text-hover: var(--color-neutral-100);
-		--_text-active: var(--color-neutral-100);
-		--_border: var(--color-neutral-500);
-		--_border-hover: var(--color-neutral-400);
-		--_border-active: var(--color-neutral-400);
-		--_bg-hover: var(--color-neutral-800);
-		--_bg-active: var(--color-neutral-700);
-	}
-
-	/* Default ghost in dark mode */
-	.dark .stuic-button:not([data-intent])[data-variant="ghost"] {
-		--_text: var(--color-neutral-200);
-		--_text-hover: var(--color-neutral-100);
-		--_text-active: var(--color-neutral-100);
-		--_bg-hover: var(--color-neutral-800);
-		--_bg-active: var(--color-neutral-700);
-	}
-
-	/* Default soft in dark mode */
-	.dark .stuic-button:not([data-intent])[data-variant="soft"] {
-		--_text: var(--color-neutral-200);
-		--_text-hover: var(--color-neutral-100);
-		--_text-active: var(--color-neutral-100);
-		--_bg: var(--color-neutral-800);
-		--_bg-hover: var(--color-neutral-700);
-		--_bg-active: var(--color-neutral-600);
-	}
-
-	/* Default link in dark mode */
-	.dark .stuic-button:not([data-intent])[data-variant="link"] {
-		--_text: var(--color-neutral-300);
-		--_text-hover: var(--color-neutral-100);
-		--_text-active: var(--color-neutral-100);
+		--_text: var(--stuic-color-muted-foreground);
+		--_text-hover: var(--stuic-color-foreground-hover);
+		--_text-active: var(--stuic-color-foreground-active);
 	}
 
 	/* ============================================================================

package/dist/components/Input/FieldAssets.svelte

@@ -408,7 +408,7 @@
 	class={twMerge("w-full stuic-field-assets mb-8", classWrap)}
 	use:highlightDragover={() => ({
 		enabled: typeof processAssets === "function",
-		classes: ["outline-dashed outline-2 outline-neutral-300"],
+		classes: ["outline-dashed outline-2 outline-[var(--stuic-color-border)]"],
 	})}
 	use:fileDropzone={() => ({
 		enabled: typeof processAssets === "function",

package/dist/components/Input/FieldKeyValues.svelte

@@ -274,16 +274,16 @@
 	const BTN_CLS = [
 		"p-1 rounded",
 		"opacity-50 hover:opacity-100",
-		"hover:bg-neutral-200 dark:hover:bg-neutral-600",
-		"focus-visible:outline-neutral-400",
+		"hover:bg-[var(--stuic-color-muted)]",
+		"focus-visible:outline-[var(--stuic-color-border-hover)]",
 		"disabled:opacity-25 disabled:cursor-not-allowed disabled:hover:bg-transparent",
 	].join(" ");
 
 	const INPUT_CLS = [
-		"rounded bg-neutral-50 dark:bg-neutral-800",
+		"rounded bg-[var(--stuic-color-input)]",
 		"focus:outline-none focus:ring-0",
-		"border border-neutral-300 dark:border-neutral-600",
-		"focus:border-neutral-400 focus:dark:border-neutral-500",
+		"border border-[var(--stuic-color-border)]",
+		"focus:border-[var(--stuic-color-border-hover)]",
 		"focus-visible:outline-none focus-visible:ring-0",
 		// "py-1.5 px-2.5",
 	].join(" ");
@@ -322,7 +322,7 @@
 					<div
 						class={twMerge(
 							"flex gap-2 items-start py-2",
-							idx > 0 && "border-t border-neutral-200 dark:border-neutral-600",
+							idx > 0 && "border-t border-[var(--stuic-color-border)]",
 							classEntry
 						)}
 					>
@@ -384,7 +384,7 @@
 		<div
 			class={twMerge(
 				"p-2",
-				entries.length > 0 && "border-t border-neutral-200 dark:border-neutral-600"
+				entries.length > 0 && "border-t border-[var(--stuic-color-border)]"
 			)}
 		>
 			<button
@@ -392,8 +392,8 @@
 				onclick={addEntry}
 				class={twMerge(
 					"flex items-center gap-1 text-sm opacity-75 hover:opacity-100",
-					"bg-neutral-200 dark:bg-neutral-600",
-					"p-1.5 pr-2 rounded hover:bg-neutral-300 dark:hover:bg-neutral-500"
+					"bg-[var(--stuic-color-muted)]",
+					"p-1.5 pr-2 rounded hover:bg-[var(--stuic-color-muted-hover)]"
 				)}
 				{disabled}
 			>

package/dist/components/Input/Fieldset.svelte

@@ -20,7 +20,7 @@
 <fieldset
 	class={twMerge(
 		"stuic-fieldset",
-		"border border-neutral-300 p-4 pt-3 rounded-md my-8",
+		"border border-[var(--stuic-color-border)] p-4 pt-3 rounded-md my-8",
 		classProp
 	)}
 >

package/dist/components/Notifications/index.css

@@ -31,8 +31,8 @@
 	--stuic-notification-badge-padding-x: calc(var(--spacing) * 2);
 	--stuic-notification-badge-padding-y: calc(var(--spacing) * 1);
 	--stuic-notification-badge-radius: 9999px;
-	--stuic-notification-badge-bg: var(--color-neutral-950);
-	--stuic-notification-badge-text: var(--color-neutral-50);
+	--stuic-notification-badge-bg: var(--stuic-color-foreground);
+	--stuic-notification-badge-text: var(--stuic-color-background);
 
 	/* Progress bar */
 	/* --stuic-notification-progress-opacity: 0.1; */

package/dist/components/ThemePreview/ThemePreview.svelte

@@ -185,25 +185,16 @@
 					<h2 class="section-label">Role Colors</h2>
 				{/if}
 
-				<div class="role-colors-grid">
-					<div class="color-swatch background">
-						<span class="swatch-label">background</span>
-						<span class="foreground-text">foreground text</span>
-					</div>
-
-					<div class="color-swatch surface">
-						<span class="swatch-label">surface</span>
-						<span class="surface-foreground-text">surface-foreground</span>
-					</div>
-
-					<div class="color-swatch surface-1">
-						<span class="swatch-label">surface-1</span>
-						<span class="surface-1-foreground-text">surface-1-foreground</span>
-					</div>
-
-					<div class="color-swatch muted-bg">
-						<span class="swatch-label">muted</span>
-						<span class="muted-foreground-text">muted-foreground</span>
+				<div class="role-color-nested background">
+					<span class="role-color-label foreground-text">background / foreground</span>
+					<div class="role-color-nested muted-bg">
+						<span class="role-color-label muted-foreground-text">muted / muted-foreground</span>
+						<div class="role-color-nested surface">
+							<span class="role-color-label surface-foreground-text">surface / surface-foreground</span>
+							<div class="role-color-nested surface-1">
+								<span class="role-color-label surface-1-foreground-text">surface-1 / surface-1-foreground</span>
+							</div>
+						</div>
 					</div>
 				</div>
 			</section>

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-1);
-	--stuic-theme-preview-header-text:     var(--stuic-color-surface-1-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-header-bg:       var(--stuic-color-surface);
+	--stuic-theme-preview-header-text:     var(--stuic-color-surface-foreground);
+	--stuic-theme-preview-sidebar-bg:      var(--stuic-color-surface);
+	--stuic-theme-preview-sidebar-text:    var(--stuic-color-surface-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);
@@ -103,7 +103,6 @@
 	background: var(--stuic-theme-preview-sidebar-bg);
 	color: var(--stuic-theme-preview-sidebar-text);
 	padding: 1rem;
-	border-right: 1px solid var(--stuic-color-border);
 	display: flex;
 	flex-direction: column;
 	justify-content: space-between;
@@ -213,41 +212,33 @@
    Demonstrates: background/surface/muted with their paired foregrounds
    ============================================================================ */
 
-.stuic-theme-preview .role-colors-grid {
-	display: grid;
-	grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
-	gap: 1rem;
-}
-
-.stuic-theme-preview .color-swatch {
+.stuic-theme-preview .role-color-nested {
 	padding: 1rem;
 	border-radius: var(--stuic-theme-preview-radius);
-	/* border: 1px solid var(--stuic-color-border); */
-	display: flex;
-	flex-direction: column;
-	gap: 0.5rem;
 }
 
-.stuic-theme-preview .color-swatch .swatch-label {
+.stuic-theme-preview .role-color-label {
+	display: block;
 	font-size: 0.75rem;
 	font-weight: 600;
-	opacity: 0.7;
+	margin-bottom: 0.75rem;
 }
 
-/* Each swatch uses its role color as background */
-.stuic-theme-preview .color-swatch.background {
+/* Each nested level uses its role color as background */
+.stuic-theme-preview .role-color-nested.background {
 	background: var(--stuic-color-background);
+	border: 1px solid var(--stuic-color-border);
 }
 
-.stuic-theme-preview .color-swatch.surface {
+.stuic-theme-preview .role-color-nested.surface {
 	background: var(--stuic-color-surface);
 }
 
-.stuic-theme-preview .color-swatch.surface-1 {
+.stuic-theme-preview .role-color-nested.surface-1 {
 	background: var(--stuic-color-surface-1);
 }
 
-.stuic-theme-preview .color-swatch.muted-bg {
+.stuic-theme-preview .role-color-nested.muted-bg {
 	background: var(--stuic-color-muted);
 }
 

package/dist/icons/index.d.ts

@@ -31,6 +31,7 @@ export { iconLucideChevronLeft as iconChevronLeft } from "@marianmeres/icons-fns
 export { iconLucideChevronRight as iconChevronRight } from "@marianmeres/icons-fns/lucide/iconLucideChevronRight.js";
 export { iconLucideChevronUp as iconChevronUp } from "@marianmeres/icons-fns/lucide/iconLucideChevronUp.js";
 export { iconLucideCircle as iconCircle } from "@marianmeres/icons-fns/lucide/iconLucideCircle.js";
+export { iconLucideCircleCheckBig as iconCircleCheckBig } from "@marianmeres/icons-fns/lucide/iconLucideCircleCheckBig.js";
 export { iconLucideDot as iconDot } from "@marianmeres/icons-fns/lucide/iconLucideDot.js";
 export { iconLucideEllipsisVertical as iconEllipsisVertical } from "@marianmeres/icons-fns/lucide/iconLucideEllipsisVertical.js";
 export { iconLucideLanguages as iconLanguages } from "@marianmeres/icons-fns/lucide/iconLucideLanguages.js";

package/dist/icons/index.js

@@ -35,6 +35,7 @@ export { iconLucideChevronLeft as iconChevronLeft } from "@marianmeres/icons-fns
 export { iconLucideChevronRight as iconChevronRight } from "@marianmeres/icons-fns/lucide/iconLucideChevronRight.js";
 export { iconLucideChevronUp as iconChevronUp } from "@marianmeres/icons-fns/lucide/iconLucideChevronUp.js";
 export { iconLucideCircle as iconCircle } from "@marianmeres/icons-fns/lucide/iconLucideCircle.js";
+export { iconLucideCircleCheckBig as iconCircleCheckBig } from "@marianmeres/icons-fns/lucide/iconLucideCircleCheckBig.js";
 export { iconLucideDot as iconDot } from "@marianmeres/icons-fns/lucide/iconLucideDot.js";
 export { iconLucideEllipsisVertical as iconEllipsisVertical } from "@marianmeres/icons-fns/lucide/iconLucideEllipsisVertical.js";
 export { iconLucideLanguages as iconLanguages } from "@marianmeres/icons-fns/lucide/iconLucideLanguages.js";

package/dist/themes/blue-orange.js

@@ -4,32 +4,22 @@ const light = {
             primary: {
                 DEFAULT: "var(--color-blue-600)",
                 foreground: "var(--color-white)",
-                hover: "var(--color-blue-700)",
-                active: "var(--color-blue-800)",
             },
             accent: {
                 DEFAULT: "var(--color-orange-500)",
                 foreground: "var(--color-white)",
-                hover: "var(--color-orange-600)",
-                active: "var(--color-orange-700)",
             },
             destructive: {
                 DEFAULT: "var(--color-rose-600)",
                 foreground: "var(--color-white)",
-                hover: "var(--color-rose-700)",
-                active: "var(--color-rose-800)",
             },
             warning: {
                 DEFAULT: "var(--color-orange-500)",
                 foreground: "var(--color-white)",
-                hover: "var(--color-orange-600)",
-                active: "var(--color-orange-700)",
             },
             success: {
                 DEFAULT: "var(--color-teal-600)",
                 foreground: "var(--color-white)",
-                hover: "var(--color-teal-700)",
-                active: "var(--color-teal-800)",
             },
         },
         role: {
@@ -38,31 +28,23 @@ const light = {
                     DEFAULT: "var(--color-white)",
                     foreground: "var(--color-stone-900)",
                 },
+                muted: {
+                    DEFAULT: "var(--color-stone-100)",
+                    foreground: "var(--color-stone-500)",
+                },
                 surface: {
                     DEFAULT: "var(--color-stone-200)",
                     foreground: "var(--color-stone-900)",
-                    hover: "var(--color-stone-300)",
-                    active: "var(--color-stone-400)",
                 },
                 "surface-1": {
                     DEFAULT: "var(--color-stone-300)",
                     foreground: "var(--color-stone-900)",
-                    hover: "var(--color-stone-400)",
-                    active: "var(--color-stone-500)",
-                },
-                muted: {
-                    DEFAULT: "var(--color-stone-100)",
-                    foreground: "var(--color-stone-500)",
-                    hover: "var(--color-stone-200)",
-                    active: "var(--color-stone-300)",
                 },
             },
             single: {
                 foreground: "var(--color-stone-900)",
                 border: {
                     DEFAULT: "var(--color-stone-300)",
-                    hover: "var(--color-stone-400)",
-                    active: "var(--color-stone-500)",
                 },
                 input: {
                     DEFAULT: "var(--color-white)",
@@ -79,32 +61,22 @@ const dark = {
             primary: {
                 DEFAULT: "var(--color-blue-500)",
                 foreground: "var(--color-white)",
-                hover: "var(--color-blue-400)",
-                active: "var(--color-blue-300)",
             },
             accent: {
                 DEFAULT: "var(--color-orange-400)",
                 foreground: "var(--color-white)",
-                hover: "var(--color-orange-300)",
-                active: "var(--color-orange-200)",
             },
             destructive: {
                 DEFAULT: "var(--color-rose-500)",
                 foreground: "var(--color-white)",
-                hover: "var(--color-rose-400)",
-                active: "var(--color-rose-300)",
             },
             warning: {
                 DEFAULT: "var(--color-orange-400)",
                 foreground: "var(--color-white)",
-                hover: "var(--color-orange-300)",
-                active: "var(--color-orange-200)",
             },
             success: {
                 DEFAULT: "var(--color-teal-500)",
                 foreground: "var(--color-white)",
-                hover: "var(--color-teal-400)",
-                active: "var(--color-teal-300)",
             },
         },
         role: {
@@ -113,31 +85,23 @@ const dark = {
                     DEFAULT: "var(--color-stone-900)",
                     foreground: "var(--color-stone-50)",
                 },
-                surface: {
+                muted: {
                     DEFAULT: "var(--color-stone-800)",
-                    foreground: "var(--color-stone-100)",
-                    hover: "var(--color-stone-700)",
-                    active: "var(--color-stone-600)",
+                    foreground: "var(--color-stone-400)",
                 },
-                "surface-1": {
+                surface: {
                     DEFAULT: "var(--color-stone-700)",
-                    foreground: "var(--color-stone-100)",
-                    hover: "var(--color-stone-600)",
-                    active: "var(--color-stone-500)",
+                    foreground: "var(--color-stone-300)",
                 },
-                muted: {
-                    DEFAULT: "var(--color-stone-700)",
-                    foreground: "var(--color-stone-400)",
-                    hover: "var(--color-stone-600)",
-                    active: "var(--color-stone-500)",
+                "surface-1": {
+                    DEFAULT: "var(--color-stone-600)",
+                    foreground: "var(--color-stone-200)",
                 },
             },
             single: {
                 foreground: "var(--color-stone-50)",
                 border: {
                     DEFAULT: "var(--color-stone-700)",
-                    hover: "var(--color-stone-600)",
-                    active: "var(--color-stone-500)",
                 },
                 input: {
                     DEFAULT: "var(--color-stone-800)",

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

@@ -69,6 +69,14 @@
 	--stuic-color-background-foreground-hover:    var(--color-stone-900, #737373);
 	--stuic-color-background-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-surface:                        var(--color-stone-200, #737373);
 
 	--stuic-color-surface-1:                      var(--color-stone-300, #737373);
@@ -78,14 +86,6 @@
 	--stuic-color-surface-1-foreground-hover:     var(--color-stone-900, #737373);
 	--stuic-color-surface-1-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);
@@ -164,11 +164,11 @@
 	--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-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-surface-hover:                  var(--color-stone-600, #737373);
+	--stuic-color-surface-active:                 var(--color-stone-500, #737373);
+	--stuic-color-surface-foreground:             var(--color-stone-300, #737373);
+	--stuic-color-surface-foreground-hover:       var(--color-stone-300, #737373);
+	--stuic-color-surface-foreground-active:      var(--color-stone-300, #737373);
 
 	--stuic-color-background:                     var(--color-stone-900, #737373);
 
@@ -178,23 +178,23 @@
 	--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-muted:                          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-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-hover:                    var(--color-stone-700, #737373);
+	--stuic-color-muted-active:                   var(--color-stone-600, #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-surface:                        var(--color-stone-700, #737373);
+
+	--stuic-color-surface-1:                      var(--color-stone-600, #737373);
+	--stuic-color-surface-1-hover:                var(--color-stone-500, #737373);
+	--stuic-color-surface-1-active:               var(--color-stone-400, #737373);
+	--stuic-color-surface-1-foreground:           var(--color-stone-200, #737373);
+	--stuic-color-surface-1-foreground-hover:     var(--color-stone-200, #737373);
+	--stuic-color-surface-1-foreground-active:    var(--color-stone-200, #737373);
+
 	--stuic-color-foreground:                     var(--color-stone-50, #737373);
 
 	--stuic-color-foreground-hover:               var(--color-stone-50, #737373);
@@ -208,7 +208,7 @@
 	--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-input-active:                   var(--color-stone-600, #737373);
 
 	--stuic-color-ring:                           color-mix(in srgb, var(--color-blue-400) 25%, transparent);