@marianmeres/stuic 3.0.0 → 3.0.2

package/dist/themes/violet-lime.css

@@ -1,163 +1,253 @@
 /* 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-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);
+	--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-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-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-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-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-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);
+	--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-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-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-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-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.d.ts

@@ -35,7 +35,7 @@ export type TokenSchema = {
     };
 };
 export type GeneratedTokens = Record<string, string>;
-export declare function generateCssTokens(schema: TokenSchema, prefix?: string): GeneratedTokens;
+export declare function generateCssTokens(schema: TokenSchema, prefix?: string, mode?: "light" | "dark"): GeneratedTokens;
 /** Convert tokens object to CSS :root declaration */
 export declare function toCssString(tokens: GeneratedTokens, selector?: string): string;
 /** Create dark mode override tokens */

package/dist/utils/design-tokens.js

@@ -38,12 +38,26 @@ function generateSingleColorTokens(tokens, key, color, prefix = "stuic-") {
 // ============================================================================
 // Generator
 // ============================================================================
-export function generateCssTokens(schema, prefix = "stuic-") {
+export function generateCssTokens(schema, prefix = "stuic-", mode = "light") {
     const tokens = {};
     // Intent colors
     for (const [key, pair] of Object.entries(schema.colors.intent)) {
         generatePairedColorTokens(tokens, key, pair, prefix);
     }
+    // Surface-intent tokens (auto-derived from intent colors)
+    // These provide subtle tinted backgrounds for callouts, alerts, highlighted content, etc.
+    const contrastMix = mode === "light" ? "black" : "white";
+    for (const key of Object.keys(schema.colors.intent)) {
+        // Background: 15% tint
+        tokens[`${prefix}color-surface-${key}`] =
+            `color-mix(in srgb, var(--${prefix}color-${key}) 15%, var(--stuic-color-background))`;
+        // Foreground: darken in light mode, lighten in dark mode for contrast
+        tokens[`${prefix}color-surface-${key}-foreground`] =
+            `color-mix(in srgb, var(--${prefix}color-${key}), ${contrastMix} 10%)`;
+        // Border: 30% tint
+        tokens[`${prefix}color-surface-${key}-border`] =
+            `color-mix(in srgb, var(--${prefix}color-${key}) 30%, var(--stuic-color-background))`;
+    }
     // Role colors (paired)
     for (const [key, pair] of Object.entries(schema.colors.role.paired)) {
         generatePairedColorTokens(tokens, key, pair, prefix);
@@ -57,6 +71,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 +103,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 +119,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() {