@thesage/ui 0.0.12 → 0.0.13

package/dist/providers.js

@@ -1893,6 +1893,49 @@ function mergeCustomColorTokens(baseTokens2, customPalette) {
     ...customPalette.derivedTokens
   };
 }
+function validateThemeTokens(theme, mode) {
+  if (typeof process !== "undefined" && process.env?.NODE_ENV === "production") return;
+  const root = document.documentElement;
+  const style = getComputedStyle(root);
+  const requiredTokens = [
+    "--color-background",
+    "--color-foreground",
+    "--color-primary",
+    "--color-primary-foreground",
+    "--color-border",
+    "--color-ring",
+    "--font-heading",
+    "--font-body",
+    "--font-mono"
+  ];
+  const missingTokens = [];
+  const invalidTokens = [];
+  requiredTokens.forEach((token) => {
+    const value = style.getPropertyValue(token).trim();
+    if (!value) {
+      missingTokens.push(token);
+    } else if (token.startsWith("--color-") && !value.match(/^(#|rgb|hsl|var\()/)) {
+      invalidTokens.push(`${token} = "${value}"`);
+    } else if (token.startsWith("--font-") && value === "") {
+      invalidTokens.push(`${token} = empty`);
+    }
+  });
+  if (missingTokens.length > 0) {
+    console.warn(
+      `[ThemeProvider] Missing CSS variables for theme "${theme}" (${mode} mode):`,
+      missingTokens
+    );
+  }
+  if (invalidTokens.length > 0) {
+    console.warn(
+      `[ThemeProvider] Invalid CSS variable values for theme "${theme}" (${mode} mode):`,
+      invalidTokens
+    );
+  }
+  if (missingTokens.length === 0 && invalidTokens.length === 0) {
+    console.log(`[ThemeProvider] \u2713 Theme validation passed for "${theme}" (${mode} mode)`);
+  }
+}
 function ThemeProvider({ children }) {
   const { theme, mode } = useThemeStore();
   const customPalette = useCustomizer((state) => state.customColors?.[theme]?.[mode]);
@@ -1926,6 +1969,7 @@ function ThemeProvider({ children }) {
     } else {
       root.classList.remove("dark");
     }
+    validateThemeTokens(theme, mode);
     const timeout = setTimeout(() => {
       root.classList.remove("theme-transitioning");
       setIsTransitioning(false);