feat(csr): diagnose missing rendered theme tokens

packages/csr/src/reactive-runtime.ts

@@ -221,6 +221,36 @@ export const REACTIVE_RUNTIME = String.raw`
       { binding: statement, functionName: match[1] },
     );
   }
+
+  function warnMissingThemeTokens() {
+    var referenced = Object.create(null);
+    function collect(rules) {
+      Array.prototype.forEach.call(rules || [], function (rule) {
+        var cssText = rule.cssText || "";
+        var match;
+        var pattern = /var\(\s*(--wire-[A-Za-z0-9_-]+)/g;
+        while ((match = pattern.exec(cssText))) referenced[match[1]] = true;
+        try {
+          if (rule.cssRules) collect(rule.cssRules);
+        } catch (_) {
+          // Cross-origin and disabled stylesheets can deny CSSOM access.
+        }
+      });
+    }
+    Array.prototype.forEach.call(document.styleSheets || [], function (sheet) {
+      try { collect(sheet.cssRules); } catch (_) {}
+    });
+    var rendered = window.getComputedStyle(document.documentElement);
+    Object.keys(referenced).forEach(function (token) {
+      if (rendered.getPropertyValue(token).trim()) return;
+      warnOnce(
+        "WRN-DEV-THEME-TOKEN-MISSING",
+        "Theme token '" + token + "' is referenced by rendered CSS but is not defined.",
+        document.documentElement,
+        { token: token },
+      );
+    });
+  }
   /*__WRNEXUS_DEV_END__*/
 
   function scheduleUpdateHook(element, callback) {
@@ -3438,6 +3468,9 @@ export const REACTIVE_RUNTIME = String.raw`
     hydratePreferenceControllers(host);
     hydrateSelectControllers(host);
     hydratePinInputControllers(host);
+    /*__WRNEXUS_DEV_START__*/
+    warnMissingThemeTokens();
+    /*__WRNEXUS_DEV_END__*/
   }
 
   var navbarOutsideClickBound = false;