@marianmeres/stuic 3.0.0 → 3.0.1

package/dist/themes/violet-lime.css

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

package/dist/themes/violet-lime.js

@@ -9,7 +9,7 @@ const light = {
             },
             accent: {
                 DEFAULT: "var(--color-lime-500)",
-                foreground: "var(--color-black)",
+                foreground: "var(--color-white)",
                 hover: "var(--color-lime-600)",
                 active: "var(--color-lime-700)",
             },
@@ -21,13 +21,13 @@ const light = {
             },
             warning: {
                 DEFAULT: "var(--color-lime-500)",
-                foreground: "var(--color-black)",
+                foreground: "var(--color-white)",
                 hover: "var(--color-lime-600)",
                 active: "var(--color-lime-700)",
             },
             success: {
                 DEFAULT: "var(--color-lime-600)",
-                foreground: "var(--color-black)",
+                foreground: "var(--color-white)",
                 hover: "var(--color-lime-700)",
                 active: "var(--color-lime-800)",
             },
@@ -50,6 +50,18 @@ const light = {
                     hover: "var(--color-neutral-100)",
                     active: "var(--color-neutral-200)",
                 },
+                "surface-1": {
+                    DEFAULT: "var(--color-neutral-100)",
+                    foreground: "var(--color-neutral-900)",
+                    hover: "var(--color-neutral-200)",
+                    active: "var(--color-neutral-300)",
+                },
+                "surface-2": {
+                    DEFAULT: "var(--color-neutral-200)",
+                    foreground: "var(--color-neutral-900)",
+                    hover: "var(--color-neutral-300)",
+                    active: "var(--color-neutral-400)",
+                },
                 muted: {
                     DEFAULT: "var(--color-neutral-100)",
                     foreground: "var(--color-neutral-500)",
@@ -125,6 +137,18 @@ const dark = {
                     hover: "var(--color-neutral-700)",
                     active: "var(--color-neutral-600)",
                 },
+                "surface-1": {
+                    DEFAULT: "var(--color-neutral-700)",
+                    foreground: "var(--color-neutral-100)",
+                    hover: "var(--color-neutral-600)",
+                    active: "var(--color-neutral-500)",
+                },
+                "surface-2": {
+                    DEFAULT: "var(--color-neutral-600)",
+                    foreground: "var(--color-neutral-100)",
+                    hover: "var(--color-neutral-500)",
+                    active: "var(--color-neutral-400)",
+                },
                 muted: {
                     DEFAULT: "var(--color-neutral-700)",
                     foreground: "var(--color-neutral-400)",

package/dist/utils/design-tokens.js

@@ -57,6 +57,31 @@ export function generateCssTokens(schema, prefix = "stuic-") {
 // ============================================================================
 // CSS Output Helpers
 // ============================================================================
+// Generic fallback for any Tailwind color variable
+// This is a safety net for Vite HMR timing - rarely visible in practice
+const GENERIC_COLOR_FALLBACK = "#737373"; // neutral-500 (mid-gray)
+/**
+ * Add generic fallback to var(--color-X) references
+ * Input:  "var(--color-neutral-800)"
+ * Output: "var(--color-neutral-800, #737373)"
+ *
+ * Works for ANY Tailwind color (neutral, blue, red, etc.)
+ */
+function addColorFallback(value) {
+    // Match var(--color-X) pattern (but not if it already has a fallback)
+    const match = value.match(/^var\(--color-([^,)]+)\)$/);
+    if (match) {
+        const colorName = match[1];
+        // Special cases for obvious colors
+        if (colorName === "white")
+            return `var(--color-white, #ffffff)`;
+        if (colorName === "black")
+            return `var(--color-black, #000000)`;
+        // Generic fallback for all other colors
+        return `var(--color-${colorName}, ${GENERIC_COLOR_FALLBACK})`;
+    }
+    return value;
+}
 /** Convert tokens object to CSS :root declaration */
 export function toCssString(tokens, selector = ":root") {
     // Find max key length for padding
@@ -64,7 +89,8 @@ export function toCssString(tokens, selector = ":root") {
     // Helper to extract base color name from token key
     const getBaseColor = (key) => {
         // e.g., "stuic-color-primary-foreground-hover" → "primary"
-        const match = key.match(/^stuic-color-([^-]+)/);
+        // e.g., "stuic-color-surface-1-foreground" → "surface-1"
+        const match = key.match(/^stuic-color-([a-z]+-?\d*)/);
         return match ? match[1] : key;
     };
     // Group tokens by base color name (preserving order)
@@ -79,7 +105,8 @@ export function toCssString(tokens, selector = ":root") {
     // Format a token with padding (include colon in key)
     const formatVar = ([key, value]) => {
         const cssKey = `--${key}:`;
-        return `\t${cssKey.padEnd(maxLen + 1)} ${value};`;
+        const valueWithFallback = addColorFallback(value);
+        return `\t${cssKey.padEnd(maxLen + 1)} ${valueWithFallback};`;
     };
     // Build output with empty lines between each color group
     const parts = [];

package/dist/utils/storage-abstraction.js

@@ -131,7 +131,7 @@ export class StorageAbstraction {
 }
 function storage_value(type, key, initial) {
     const s = new StorageAbstraction(type);
-    if (!s.has(key))
+    if (!s.has(key) && initial !== undefined)
         s.set(key, initial);
     return {
         get() {

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@marianmeres/stuic",
-  "version": "3.0.0",
+  "version": "3.0.1",
   "files": [
     "dist",
     "!dist/**/*.test.*",
@@ -26,31 +26,31 @@
     "@marianmeres/icons-fns": "^5.0.0",
     "@marianmeres/random-human-readable": "^1.6.1",
     "@sveltejs/adapter-auto": "^4.0.0",
-    "@sveltejs/kit": "^2.49.5",
+    "@sveltejs/kit": "^2.50.1",
     "@sveltejs/package": "^2.5.7",
-    "@sveltejs/vite-plugin-svelte": "^5.1.1",
+    "@sveltejs/vite-plugin-svelte": "^6.2.4",
     "@tailwindcss/cli": "^4.1.18",
     "@tailwindcss/forms": "^0.5.11",
     "@tailwindcss/typography": "^0.5.19",
     "@tailwindcss/vite": "^4.1.18",
-    "@types/node": "^25.0.9",
+    "@types/node": "^25.0.10",
     "dotenv": "^16.6.1",
     "eslint": "^9.39.2",
     "globals": "^16.5.0",
-    "prettier": "^3.8.0",
+    "prettier": "^3.8.1",
     "prettier-plugin-svelte": "^3.4.1",
-    "publint": "^0.3.16",
-    "svelte": "^5.46.4",
+    "publint": "^0.3.17",
+    "svelte": "^5.48.0",
     "svelte-check": "^4.3.5",
     "tailwindcss": "^4.1.18",
     "tsx": "^4.21.0",
     "typescript": "^5.9.3",
-    "typescript-eslint": "^8.53.0",
-    "vite": "^6.4.1",
+    "typescript-eslint": "^8.53.1",
+    "vite": "^7.3.1",
     "vitest": "^3.2.4"
   },
   "dependencies": {
-    "@marianmeres/clog": "^3.15.0",
+    "@marianmeres/clog": "^3.15.1",
     "@marianmeres/item-collection": "^1.3.5",
     "@marianmeres/parse-boolean": "^2.0.5",
     "@marianmeres/ticker": "^1.16.5",
@@ -74,23 +74,6 @@
     "rp": "pnpm run build && ./release.sh patch",
     "rpm": "pnpm run build && ./release.sh minor",
     "build:theme": "tsx scripts/generate-theme.ts",
-    "build:theme:rainbow": "pnpm run build:theme --infile=src/lib/themes/rainbow.ts --outfile=src/lib/themes/rainbow.css",
-    "build:theme:neutral": "pnpm run build:theme --infile=src/lib/themes/neutral.ts --outfile=src/lib/themes/neutral.css",
-    "build:theme:gray": "pnpm run build:theme --infile=src/lib/themes/gray.ts --outfile=src/lib/themes/gray.css",
-    "build:theme:indigo-amber": "pnpm run build:theme --infile=src/lib/themes/indigo-amber.ts --outfile=src/lib/themes/indigo-amber.css",
-    "build:theme:teal-rose": "pnpm run build:theme --infile=src/lib/themes/teal-rose.ts --outfile=src/lib/themes/teal-rose.css",
-    "build:theme:violet-lime": "pnpm run build:theme --infile=src/lib/themes/violet-lime.ts --outfile=src/lib/themes/violet-lime.css",
-    "build:theme:blue-orange": "pnpm run build:theme --infile=src/lib/themes/blue-orange.ts --outfile=src/lib/themes/blue-orange.css",
-    "build:theme:emerald-pink": "pnpm run build:theme --infile=src/lib/themes/emerald-pink.ts --outfile=src/lib/themes/emerald-pink.css",
-    "build:theme:sky-amber": "pnpm run build:theme --infile=src/lib/themes/sky-amber.ts --outfile=src/lib/themes/sky-amber.css",
-    "build:theme:fuchsia-emerald": "pnpm run build:theme --infile=src/lib/themes/fuchsia-emerald.ts --outfile=src/lib/themes/fuchsia-emerald.css",
-    "build:theme:slate-cyan": "pnpm run build:theme --infile=src/lib/themes/slate-cyan.ts --outfile=src/lib/themes/slate-cyan.css",
-    "build:theme:purple-yellow": "pnpm run build:theme --infile=src/lib/themes/purple-yellow.ts --outfile=src/lib/themes/purple-yellow.css",
-    "build:theme:cyan-red": "pnpm run build:theme --infile=src/lib/themes/cyan-red.ts --outfile=src/lib/themes/cyan-red.css",
-    "build:theme:rose-teal": "pnpm run build:theme --infile=src/lib/themes/rose-teal.ts --outfile=src/lib/themes/rose-teal.css",
-    "build:theme:red-cyan": "pnpm run build:theme --infile=src/lib/themes/red-cyan.ts --outfile=src/lib/themes/red-cyan.css",
-    "build:theme:cyan-slate": "pnpm run build:theme --infile=src/lib/themes/cyan-slate.ts --outfile=src/lib/themes/cyan-slate.css",
-    "build:theme:pink-emerald": "pnpm run build:theme --infile=src/lib/themes/pink-emerald.ts --outfile=src/lib/themes/pink-emerald.css",
-    "build:theme:red-blue": "pnpm run build:theme --infile=src/lib/themes/red-blue.ts --outfile=src/lib/themes/red-blue.css"
+    "build:theme:all": "pnpm run build:theme --indir=src/lib/themes --outdir=src/lib/themes"
   }
 }