@tamagui/core - npm Package Compare versions

Comparing version 1.0.0-alpha.28 to 1.0.0-alpha.29

dist/cjs/createComponent.js

@@ -73,4 +73,4 @@ var __create = Object.create;
 var import_usePressable = __toModule(require("./hooks/usePressable"));
+var import_useTheme = __toModule(require("./hooks/useTheme"));
 var import_TextAncestorContext = __toModule(require("./views/TextAncestorContext"));
-var import_ThemeManagerContext = __toModule(require("./views/ThemeManagerContext"));
 const mouseUps = new Set();
@@ -83,2 +83,20 @@ if (typeof document !== "undefined") {
 }
+const defaultComponentState = {
+  hover: false,
+  press: false,
+  pressIn: false
+};
+function createShallowUpdate(setter) {
+  return (next) => {
+    setter((prev) => {
+      for (const key in next) {
+        if (prev[key] !== next[key]) {
+          return __spreadValues(__spreadValues({}, prev), next);
+        }
+      }
+      return prev;
+    });
+  };
+}
+__name(createShallowUpdate, "createShallowUpdate");
 function createComponent(configIn) {
@@ -102,17 +120,5 @@ let staticConfig;
     const features = (0, import_useFeatures.useFeatures)(props, { forceUpdate });
-    const manager = (0, import_react.useContext)(import_ThemeManagerContext.ThemeManagerContext);
-    const [state, set_] = (0, import_react.useState)(() => ({
-      hover: false,
-      press: false,
-      pressIn: false,
-      theme: manager.name
-    }));
-    const set = /* @__PURE__ */ __name((next) => set_((prev) => {
-      for (const key in next) {
-        if (prev[key] !== next[key]) {
-          return __spreadValues(__spreadValues({}, prev), next);
-        }
-      }
-      return prev;
-    }), "set");
+    const theme = (0, import_useTheme.useTheme)();
+    const [state, set_] = (0, import_react.useState)(defaultComponentState);
+    const set = createShallowUpdate(set_);
     if (process.env.NODE_ENV === "development" && !isText && import_platform.isWeb) {
@@ -127,3 +133,2 @@ import_react.Children.toArray(props.children).forEach((item) => {
     const hostRef = (0, import_react.useRef)(null);
-    const theme = manager.theme || initialTheme;
     const {
@@ -234,3 +239,2 @@ viewProps: viewPropsIn,
     }
-    const isTracking = (0, import_react.useRef)(false);
     const internal = (0, import_react.useRef)();
@@ -244,14 +248,7 @@ if (!internal.current) {
       internal.current.isMounted = true;
-      const dispose = manager == null ? void 0 : manager.onChangeTheme((name) => {
-        if (isTracking.current) {
-          set({ theme: name });
-        }
-      });
       return () => {
-        dispose();
         mouseUps.delete(unPress);
-        isTracking.current = false;
         internal.current.isMounted = false;
       };
-    }, [manager]);
+    }, []);
     const element = import_platform.isWeb ? !Component || typeof Component === "string" ? tag || Component : Component : Component;
@@ -258,0 +255,0 @@ const ReactView = !import_platform.isWeb ? import_react_native.View : element || (hasTextAncestor ? "span" : "div");

dist/cjs/createTamagui.js

@@ -52,5 +52,5 @@ var __create = Object.create;
 var import_helpers = __toModule(require("@tamagui/helpers"));
+var import_platform = __toModule(require("./constants/platform"));
 var import_createVariable = __toModule(require("./createVariable"));
 var import_createTamaguiProvider = __toModule(require("./helpers/createTamaguiProvider"));
-var import_validate = __toModule(require("./helpers/validate"));
 var import_useMedia = __toModule(require("./hooks/useMedia"));
@@ -72,6 +72,4 @@ let conf;
 function createTamagui(config) {
-  if (process.env.NODE_ENV === "development") {
-    if (!config["parsed"]) {
-      (0, import_validate.validateConfig)(config);
-    }
+  if (config["parsed"]) {
+    return config;
   }
@@ -86,58 +84,58 @@ if (conf) {
   const themeConfig = (() => {
+    var _a;
     let cssRules = [];
-    let tokenRule = `:root {`;
     const varsByValue = new Map();
-    const addVar = /* @__PURE__ */ __name((v) => {
-      varsByValue[v.val] = v;
-      const rule = `--${v.name}:${typeof v.val === "number" ? `${v.val}px` : v.val};`;
-      tokenRule += rule;
-    }, "addVar");
-    for (const key in config.tokens) {
-      for (const skey in config.tokens[key]) {
-        const val = config.tokens[key][skey];
-        if (key === "font") {
-          for (const fkey in val) {
-            if (fkey === "family") {
-              addVar(val[fkey]);
-            } else {
-              for (const fskey in val[fkey]) {
-                addVar(val[fkey][fskey]);
+    if (import_platform.isWeb) {
+      let tokenRule = `:root {`;
+      const addVar = /* @__PURE__ */ __name((v) => {
+        varsByValue[v.val] = v;
+        const rule = `--${v.name}:${typeof v.val === "number" ? `${v.val}px` : v.val};`;
+        tokenRule += rule;
+      }, "addVar");
+      for (const key in config.tokens) {
+        for (const skey in config.tokens[key]) {
+          const val = config.tokens[key][skey];
+          if (key === "font") {
+            for (const fkey in val) {
+              if (fkey === "family") {
+                addVar(val[fkey]);
+              } else {
+                for (const fskey in val[fkey]) {
+                  addVar(val[fkey][fskey]);
+                }
               }
             }
+          } else {
+            addVar(val);
           }
-        } else {
-          addVar(val);
         }
       }
+      cssRules.push(`${tokenRule}
+}`);
     }
-    cssRules.push(`${tokenRule}
-}`);
     for (const themeName in config.themes) {
-      config.themes[themeName] = __spreadValues({}, config.themes[themeName]);
-      const theme = config.themes[themeName];
+      const theme = __spreadValues({}, config.themes[themeName]);
+      config.themes[themeName] = theme;
       let vars = "";
       for (const themeKey in theme) {
-        const val = theme[themeKey];
-        const getVariableCSS = /* @__PURE__ */ __name((inv) => {
-          const v = varsByValue[inv] ?? inv;
-          return (0, import_createVariable.isVariable)(v) ? `--${themeKey}:var(--${v.name});` : `--${themeKey}:${v};`;
-        }, "getVariableCSS");
-        vars += getVariableCSS(val);
-        if (!(0, import_createVariable.isVariable)(val)) {
-          theme[themeKey] = (0, import_createVariable.createVariable)({
-            name: themeKey,
-            val
-          });
+        if (import_platform.isWeb) {
+          const val = theme[themeKey];
+          const varName = val instanceof import_createVariable.Variable ? val.name : (_a = varsByValue[val]) == null ? void 0 : _a.name;
+          vars += `--${themeKey}:${varName ? `var(--${varName});` : `${val}`};`;
         }
+        ensureThemeVariable(theme, themeKey);
       }
-      const [themeClassName, parentName] = themeName.includes("-") ? themeName.split("-") : [themeName, ""];
-      const oppositeName = parentName === "dark" ? "light" : "dark";
-      const cssParentSel = parentName ? `.${PREFIX}${parentName}` : "";
-      const cssChildSel = `.${PREFIX}${themeClassName}`;
-      const cssSel = `${cssParentSel} ${cssChildSel}`;
-      const cssRule = `${cssSel}, .${PREFIX}${oppositeName} ${cssSel} {
+      if (import_platform.isWeb) {
+        const [themeClassName, parentName] = themeName.includes("-") ? themeName.split("-") : [themeName, ""];
+        const oppositeName = parentName === "dark" ? "light" : "dark";
+        const cssParentSel = parentName ? `.${PREFIX}${parentName}` : "";
+        const cssChildSel = `.${PREFIX}${themeClassName}`;
+        const cssSel = `${cssParentSel} ${cssChildSel}`;
+        const cssRule = `${cssSel}, .${PREFIX}${oppositeName} ${cssSel} {
 ${vars}
 }`;
-      cssRules.push(cssRule);
+        cssRules.push(cssRule);
+      }
     }
+    varsByValue.clear();
     Object.freeze(cssRules);
@@ -211,2 +209,19 @@ return {
 }, "parseTokens");
+function ensureThemeVariable(theme, key) {
+  const val = theme[key];
+  if (!(val instanceof import_createVariable.Variable)) {
+    theme[key] = (0, import_createVariable.createVariable)({
+      name: key,
+      val
+    });
+  } else {
+    if (val.name !== key) {
+      theme[key] = (0, import_createVariable.createVariable)({
+        name: key,
+        val: val.val
+      });
+    }
+  }
+}
+__name(ensureThemeVariable, "ensureThemeVariable");
 //# sourceMappingURL=createTamagui.js.map

dist/cjs/createTheme.js

@@ -1,7 +0,2 @@
-var __create = Object.create;
 var __defProp = Object.defineProperty;
-var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
-var __getOwnPropNames = Object.getOwnPropertyNames;
-var __getProtoOf = Object.getPrototypeOf;
-var __hasOwnProp = Object.prototype.hasOwnProperty;
 var __markAsModule = (target) => __defProp(target, "__esModule", { value: true });
@@ -14,32 +9,6 @@ var __name = (target, value) => __defProp(target, "name", { value, configurable: true });
 };
-var __reExport = (target, module2, desc) => {
-  if (module2 && typeof module2 === "object" || typeof module2 === "function") {
-    for (let key of __getOwnPropNames(module2))
-      if (!__hasOwnProp.call(target, key) && key !== "default")
-        __defProp(target, key, { get: () => module2[key], enumerable: !(desc = __getOwnPropDesc(module2, key)) || desc.enumerable });
-  }
-  return target;
-};
-var __toModule = (module2) => {
-  return __reExport(__markAsModule(__defProp(module2 != null ? __create(__getProtoOf(module2)) : {}, "default", module2 && module2.__esModule && "default" in module2 ? { get: () => module2.default, enumerable: true } : { value: module2, enumerable: true })), module2);
-};
 __export(exports, {
   createTheme: () => createTheme
 });
-var import_createVariable = __toModule(require("./createVariable"));
-const createTheme = /* @__PURE__ */ __name((theme) => {
-  const res = {};
-  for (const key in theme) {
-    const val = theme[key];
-    if (!(val instanceof import_createVariable.Variable)) {
-      res[key] = (0, import_createVariable.createVariable)({
-        name: key,
-        val
-      });
-    } else {
-      res[key] = val;
-    }
-  }
-  return res;
-}, "createTheme");
+const createTheme = /* @__PURE__ */ __name((theme) => theme, "createTheme");
 //# sourceMappingURL=createTheme.js.map

dist/cjs/hooks/useTheme.js

@@ -100,5 +100,11 @@ var __create = Object.create;
           if (typeof val === "undefined") {
-            console.warn(`No theme value "${String(key)}" in: ${Object.keys(activeTheme)}`);
+            console.warn(`No theme value "${String(key)}" in`, activeTheme, themes);
             return null;
           }
+          if (!(val instanceof import_createVariable.Variable)) {
+            console.warn("Non variable!", val);
+          }
+          if (val.name !== key) {
+            console.warn("Non-matching name for variable to key", key, val.name);
+          }
         }
@@ -108,3 +114,3 @@ if (state.current.isRendering) {
         }
-        return new import_createVariable.Variable({ val: val.val, name: key });
+        return val;
       }
@@ -111,0 +117,0 @@ });

dist/esm/createComponent.js

@@ -26,4 +26,4 @@ var __defProp = Object.defineProperty;
 import { usePressable } from "./hooks/usePressable";
+import { useTheme } from "./hooks/useTheme";
 import { TextAncestorContext } from "./views/TextAncestorContext";
-import { ThemeManagerContext } from "./views/ThemeManagerContext";
 const mouseUps = new Set();
@@ -36,2 +36,20 @@ if (typeof document !== "undefined") {
 }
+const defaultComponentState = {
+  hover: false,
+  press: false,
+  pressIn: false
+};
+function createShallowUpdate(setter) {
+  return (next) => {
+    setter((prev) => {
+      for (const key in next) {
+        if (prev[key] !== next[key]) {
+          return { ...prev, ...next };
+        }
+      }
+      return prev;
+    });
+  };
+}
+__name(createShallowUpdate, "createShallowUpdate");
 function createComponent(configIn) {
@@ -54,17 +72,5 @@ let staticConfig;
     const features = useFeatures(props, { forceUpdate });
-    const manager = useContext(ThemeManagerContext);
-    const [state, set_] = useState(() => ({
-      hover: false,
-      press: false,
-      pressIn: false,
-      theme: manager.name
-    }));
-    const set = /* @__PURE__ */ __name((next) => set_((prev) => {
-      for (const key in next) {
-        if (prev[key] !== next[key]) {
-          return { ...prev, ...next };
-        }
-      }
-      return prev;
-    }), "set");
+    const theme = useTheme();
+    const [state, set_] = useState(defaultComponentState);
+    const set = createShallowUpdate(set_);
     if (process.env.NODE_ENV === "development" && !isText && isWeb) {
@@ -79,3 +85,2 @@ Children.toArray(props.children).forEach((item) => {
     const hostRef = useRef(null);
-    const theme = manager.theme || initialTheme;
     const {
@@ -151,3 +156,2 @@ viewProps: viewPropsIn,
     }
-    const isTracking = useRef(false);
     const internal = useRef();
@@ -161,14 +165,7 @@ if (!internal.current) {
       internal.current.isMounted = true;
-      const dispose = manager?.onChangeTheme((name) => {
-        if (isTracking.current) {
-          set({ theme: name });
-        }
-      });
       return () => {
-        dispose();
         mouseUps.delete(unPress);
-        isTracking.current = false;
         internal.current.isMounted = false;
       };
-    }, [manager]);
+    }, []);
     const element = isWeb ? !Component || typeof Component === "string" ? tag || Component : Component : Component;
@@ -175,0 +172,0 @@ const ReactView = !isWeb ? View : element || (hasTextAncestor ? "span" : "div");

dist/esm/createTamagui.js

 var __defProp = Object.defineProperty;
 var __name = (target, value) => __defProp(target, "name", { value, configurable: true });
 import { getStyleRules } from "@tamagui/helpers";
-import { Variable, createVariable, isVariable } from "./createVariable";
+import { isWeb } from "./constants/platform";
+import { Variable, createVariable } from "./createVariable";
 import { createTamaguiProvider } from "./helpers/createTamaguiProvider";
-import { validateConfig } from "./helpers/validate";
 import { configureMedia } from "./hooks/useMedia";
@@ -23,6 +23,4 @@ let conf;
 function createTamagui(config) {
-  if (process.env.NODE_ENV === "development") {
-    if (!config["parsed"]) {
-      validateConfig(config);
-    }
+  if (config["parsed"]) {
+    return config;
   }
@@ -38,57 +36,56 @@ if (conf) {
     let cssRules = [];
-    let tokenRule = `:root {`;
     const varsByValue = new Map();
-    const addVar = /* @__PURE__ */ __name((v) => {
-      varsByValue[v.val] = v;
-      const rule = `--${v.name}:${typeof v.val === "number" ? `${v.val}px` : v.val};`;
-      tokenRule += rule;
-    }, "addVar");
-    for (const key in config.tokens) {
-      for (const skey in config.tokens[key]) {
-        const val = config.tokens[key][skey];
-        if (key === "font") {
-          for (const fkey in val) {
-            if (fkey === "family") {
-              addVar(val[fkey]);
-            } else {
-              for (const fskey in val[fkey]) {
-                addVar(val[fkey][fskey]);
+    if (isWeb) {
+      let tokenRule = `:root {`;
+      const addVar = /* @__PURE__ */ __name((v) => {
+        varsByValue[v.val] = v;
+        const rule = `--${v.name}:${typeof v.val === "number" ? `${v.val}px` : v.val};`;
+        tokenRule += rule;
+      }, "addVar");
+      for (const key in config.tokens) {
+        for (const skey in config.tokens[key]) {
+          const val = config.tokens[key][skey];
+          if (key === "font") {
+            for (const fkey in val) {
+              if (fkey === "family") {
+                addVar(val[fkey]);
+              } else {
+                for (const fskey in val[fkey]) {
+                  addVar(val[fkey][fskey]);
+                }
               }
             }
+          } else {
+            addVar(val);
           }
-        } else {
-          addVar(val);
         }
       }
+      cssRules.push(`${tokenRule}
+}`);
     }
-    cssRules.push(`${tokenRule}
-}`);
     for (const themeName in config.themes) {
-      config.themes[themeName] = { ...config.themes[themeName] };
-      const theme = config.themes[themeName];
+      const theme = { ...config.themes[themeName] };
+      config.themes[themeName] = theme;
       let vars = "";
       for (const themeKey in theme) {
-        const val = theme[themeKey];
-        const getVariableCSS = /* @__PURE__ */ __name((inv) => {
-          const v = varsByValue[inv] ?? inv;
-          return isVariable(v) ? `--${themeKey}:var(--${v.name});` : `--${themeKey}:${v};`;
-        }, "getVariableCSS");
-        vars += getVariableCSS(val);
-        if (!isVariable(val)) {
-          theme[themeKey] = createVariable({
-            name: themeKey,
-            val
-          });
+        if (isWeb) {
+          const val = theme[themeKey];
+          const varName = val instanceof Variable ? val.name : varsByValue[val]?.name;
+          vars += `--${themeKey}:${varName ? `var(--${varName});` : `${val}`};`;
         }
+        ensureThemeVariable(theme, themeKey);
       }
-      const [themeClassName, parentName] = themeName.includes("-") ? themeName.split("-") : [themeName, ""];
-      const oppositeName = parentName === "dark" ? "light" : "dark";
-      const cssParentSel = parentName ? `.${PREFIX}${parentName}` : "";
-      const cssChildSel = `.${PREFIX}${themeClassName}`;
-      const cssSel = `${cssParentSel} ${cssChildSel}`;
-      const cssRule = `${cssSel}, .${PREFIX}${oppositeName} ${cssSel} {
+      if (isWeb) {
+        const [themeClassName, parentName] = themeName.includes("-") ? themeName.split("-") : [themeName, ""];
+        const oppositeName = parentName === "dark" ? "light" : "dark";
+        const cssParentSel = parentName ? `.${PREFIX}${parentName}` : "";
+        const cssChildSel = `.${PREFIX}${themeClassName}`;
+        const cssSel = `${cssParentSel} ${cssChildSel}`;
+        const cssRule = `${cssSel}, .${PREFIX}${oppositeName} ${cssSel} {
 ${vars}
 }`;
-      cssRules.push(cssRule);
+        cssRules.push(cssRule);
+      }
     }
+    varsByValue.clear();
     Object.freeze(cssRules);
@@ -163,2 +160,19 @@ return {
 }, "parseTokens");
+function ensureThemeVariable(theme, key) {
+  const val = theme[key];
+  if (!(val instanceof Variable)) {
+    theme[key] = createVariable({
+      name: key,
+      val
+    });
+  } else {
+    if (val.name !== key) {
+      theme[key] = createVariable({
+        name: key,
+        val: val.val
+      });
+    }
+  }
+}
+__name(ensureThemeVariable, "ensureThemeVariable");
 export {
@@ -165,0 +179,0 @@ createTamagui,

dist/esm/createTheme.js

 var __defProp = Object.defineProperty;
 var __name = (target, value) => __defProp(target, "name", { value, configurable: true });
-import { Variable, createVariable } from "./createVariable";
-const createTheme = /* @__PURE__ */ __name((theme) => {
-  const res = {};
-  for (const key in theme) {
-    const val = theme[key];
-    if (!(val instanceof Variable)) {
-      res[key] = createVariable({
-        name: key,
-        val
-      });
-    } else {
-      res[key] = val;
-    }
-  }
-  return res;
-}, "createTheme");
+const createTheme = /* @__PURE__ */ __name((theme) => theme, "createTheme");
 export {
@@ -20,0 +5,0 @@ createTheme

dist/esm/hooks/useTheme.js

@@ -73,5 +73,11 @@ var __defProp = Object.defineProperty;
           if (typeof val === "undefined") {
-            console.warn(`No theme value "${String(key)}" in: ${Object.keys(activeTheme)}`);
+            console.warn(`No theme value "${String(key)}" in`, activeTheme, themes);
             return null;
           }
+          if (!(val instanceof Variable)) {
+            console.warn("Non variable!", val);
+          }
+          if (val.name !== key) {
+            console.warn("Non-matching name for variable to key", key, val.name);
+          }
         }
@@ -81,3 +87,3 @@ if (state.current.isRendering) {
         }
-        return new Variable({ val: val.val, name: key });
+        return val;
       }
@@ -84,0 +90,0 @@ });

dist/jsx/createComponent.js

@@ -26,4 +26,4 @@ var __defProp = Object.defineProperty;
 import { usePressable } from "./hooks/usePressable";
+import { useTheme } from "./hooks/useTheme";
 import { TextAncestorContext } from "./views/TextAncestorContext";
-import { ThemeManagerContext } from "./views/ThemeManagerContext";
 const mouseUps = new Set();
@@ -36,2 +36,20 @@ if (typeof document !== "undefined") {
 }
+const defaultComponentState = {
+  hover: false,
+  press: false,
+  pressIn: false
+};
+function createShallowUpdate(setter) {
+  return (next) => {
+    setter((prev) => {
+      for (const key in next) {
+        if (prev[key] !== next[key]) {
+          return { ...prev, ...next };
+        }
+      }
+      return prev;
+    });
+  };
+}
+__name(createShallowUpdate, "createShallowUpdate");
 function createComponent(configIn) {
@@ -54,17 +72,5 @@ let staticConfig;
     const features = useFeatures(props, { forceUpdate });
-    const manager = useContext(ThemeManagerContext);
-    const [state, set_] = useState(() => ({
-      hover: false,
-      press: false,
-      pressIn: false,
-      theme: manager.name
-    }));
-    const set = /* @__PURE__ */ __name((next) => set_((prev) => {
-      for (const key in next) {
-        if (prev[key] !== next[key]) {
-          return { ...prev, ...next };
-        }
-      }
-      return prev;
-    }), "set");
+    const theme = useTheme();
+    const [state, set_] = useState(defaultComponentState);
+    const set = createShallowUpdate(set_);
     if (process.env.NODE_ENV === "development" && !isText && isWeb) {
@@ -79,3 +85,2 @@ Children.toArray(props.children).forEach((item) => {
     const hostRef = useRef(null);
-    const theme = manager.theme || initialTheme;
     const {
@@ -151,3 +156,2 @@ viewProps: viewPropsIn,
     }
-    const isTracking = useRef(false);
     const internal = useRef();
@@ -161,14 +165,7 @@ if (!internal.current) {
       internal.current.isMounted = true;
-      const dispose = manager?.onChangeTheme((name) => {
-        if (isTracking.current) {
-          set({ theme: name });
-        }
-      });
       return () => {
-        dispose();
         mouseUps.delete(unPress);
-        isTracking.current = false;
         internal.current.isMounted = false;
       };
-    }, [manager]);
+    }, []);
     const element = isWeb ? !Component || typeof Component === "string" ? tag || Component : Component : Component;
@@ -175,0 +172,0 @@ const ReactView = !isWeb ? View : element || (hasTextAncestor ? "span" : "div");

dist/jsx/createTamagui.js

 var __defProp = Object.defineProperty;
 var __name = (target, value) => __defProp(target, "name", { value, configurable: true });
 import { getStyleRules } from "@tamagui/helpers";
-import { Variable, createVariable, isVariable } from "./createVariable";
+import { isWeb } from "./constants/platform";
+import { Variable, createVariable } from "./createVariable";
 import { createTamaguiProvider } from "./helpers/createTamaguiProvider";
-import { validateConfig } from "./helpers/validate";
 import { configureMedia } from "./hooks/useMedia";
@@ -23,6 +23,4 @@ let conf;
 function createTamagui(config) {
-  if (process.env.NODE_ENV === "development") {
-    if (!config["parsed"]) {
-      validateConfig(config);
-    }
+  if (config["parsed"]) {
+    return config;
   }
@@ -38,57 +36,56 @@ if (conf) {
     let cssRules = [];
-    let tokenRule = `:root {`;
     const varsByValue = new Map();
-    const addVar = /* @__PURE__ */ __name((v) => {
-      varsByValue[v.val] = v;
-      const rule = `--${v.name}:${typeof v.val === "number" ? `${v.val}px` : v.val};`;
-      tokenRule += rule;
-    }, "addVar");
-    for (const key in config.tokens) {
-      for (const skey in config.tokens[key]) {
-        const val = config.tokens[key][skey];
-        if (key === "font") {
-          for (const fkey in val) {
-            if (fkey === "family") {
-              addVar(val[fkey]);
-            } else {
-              for (const fskey in val[fkey]) {
-                addVar(val[fkey][fskey]);
+    if (isWeb) {
+      let tokenRule = `:root {`;
+      const addVar = /* @__PURE__ */ __name((v) => {
+        varsByValue[v.val] = v;
+        const rule = `--${v.name}:${typeof v.val === "number" ? `${v.val}px` : v.val};`;
+        tokenRule += rule;
+      }, "addVar");
+      for (const key in config.tokens) {
+        for (const skey in config.tokens[key]) {
+          const val = config.tokens[key][skey];
+          if (key === "font") {
+            for (const fkey in val) {
+              if (fkey === "family") {
+                addVar(val[fkey]);
+              } else {
+                for (const fskey in val[fkey]) {
+                  addVar(val[fkey][fskey]);
+                }
               }
             }
+          } else {
+            addVar(val);
           }
-        } else {
-          addVar(val);
         }
       }
+      cssRules.push(`${tokenRule}
+}`);
     }
-    cssRules.push(`${tokenRule}
-}`);
     for (const themeName in config.themes) {
-      config.themes[themeName] = { ...config.themes[themeName] };
-      const theme = config.themes[themeName];
+      const theme = { ...config.themes[themeName] };
+      config.themes[themeName] = theme;
       let vars = "";
       for (const themeKey in theme) {
-        const val = theme[themeKey];
-        const getVariableCSS = /* @__PURE__ */ __name((inv) => {
-          const v = varsByValue[inv] ?? inv;
-          return isVariable(v) ? `--${themeKey}:var(--${v.name});` : `--${themeKey}:${v};`;
-        }, "getVariableCSS");
-        vars += getVariableCSS(val);
-        if (!isVariable(val)) {
-          theme[themeKey] = createVariable({
-            name: themeKey,
-            val
-          });
+        if (isWeb) {
+          const val = theme[themeKey];
+          const varName = val instanceof Variable ? val.name : varsByValue[val]?.name;
+          vars += `--${themeKey}:${varName ? `var(--${varName});` : `${val}`};`;
         }
+        ensureThemeVariable(theme, themeKey);
       }
-      const [themeClassName, parentName] = themeName.includes("-") ? themeName.split("-") : [themeName, ""];
-      const oppositeName = parentName === "dark" ? "light" : "dark";
-      const cssParentSel = parentName ? `.${PREFIX}${parentName}` : "";
-      const cssChildSel = `.${PREFIX}${themeClassName}`;
-      const cssSel = `${cssParentSel} ${cssChildSel}`;
-      const cssRule = `${cssSel}, .${PREFIX}${oppositeName} ${cssSel} {
+      if (isWeb) {
+        const [themeClassName, parentName] = themeName.includes("-") ? themeName.split("-") : [themeName, ""];
+        const oppositeName = parentName === "dark" ? "light" : "dark";
+        const cssParentSel = parentName ? `.${PREFIX}${parentName}` : "";
+        const cssChildSel = `.${PREFIX}${themeClassName}`;
+        const cssSel = `${cssParentSel} ${cssChildSel}`;
+        const cssRule = `${cssSel}, .${PREFIX}${oppositeName} ${cssSel} {
 ${vars}
 }`;
-      cssRules.push(cssRule);
+        cssRules.push(cssRule);
+      }
     }
+    varsByValue.clear();
     Object.freeze(cssRules);
@@ -163,2 +160,19 @@ return {
 }, "parseTokens");
+function ensureThemeVariable(theme, key) {
+  const val = theme[key];
+  if (!(val instanceof Variable)) {
+    theme[key] = createVariable({
+      name: key,
+      val
+    });
+  } else {
+    if (val.name !== key) {
+      theme[key] = createVariable({
+        name: key,
+        val: val.val
+      });
+    }
+  }
+}
+__name(ensureThemeVariable, "ensureThemeVariable");
 export {
@@ -165,0 +179,0 @@ createTamagui,

dist/jsx/createTheme.js

 var __defProp = Object.defineProperty;
 var __name = (target, value) => __defProp(target, "name", { value, configurable: true });
-import { Variable, createVariable } from "./createVariable";
-const createTheme = /* @__PURE__ */ __name((theme) => {
-  const res = {};
-  for (const key in theme) {
-    const val = theme[key];
-    if (!(val instanceof Variable)) {
-      res[key] = createVariable({
-        name: key,
-        val
-      });
-    } else {
-      res[key] = val;
-    }
-  }
-  return res;
-}, "createTheme");
+const createTheme = /* @__PURE__ */ __name((theme) => theme, "createTheme");
 export {
   createTheme
 };

dist/jsx/hooks/useTheme.js

@@ -73,5 +73,11 @@ var __defProp = Object.defineProperty;
           if (typeof val === "undefined") {
-            console.warn(`No theme value "${String(key)}" in: ${Object.keys(activeTheme)}`);
+            console.warn(`No theme value "${String(key)}" in`, activeTheme, themes);
             return null;
           }
+          if (!(val instanceof Variable)) {
+            console.warn("Non variable!", val);
+          }
+          if (val.name !== key) {
+            console.warn("Non-matching name for variable to key", key, val.name);
+          }
         }
@@ -81,3 +87,3 @@ if (state.current.isRendering) {
         }
-        return new Variable({ val: val.val, name: key });
+        return val;
       }
@@ -84,0 +90,0 @@ });

package.json

 {
   "name": "@tamagui/core",
-  "version": "1.0.0-alpha.28",
+  "version": "1.0.0-alpha.29",
   "source": "src/index.ts",
@@ -17,3 +17,3 @@ "main": "dist/cjs",
   "dependencies": {
-    "@tamagui/helpers": "^1.0.0-alpha.26",
+    "@tamagui/helpers": "^1.0.0-alpha.29",
     "@tamagui/ow": "^0.28.1",
@@ -41,3 +41,3 @@ "@tamagui/use-debounce": "^1.0.0-alpha.26",
   },
-  "gitHead": "304fb085ec9a927d043b9444fe1c8724d9924db0"
+  "gitHead": "ef2e601f5d8524d1f8722208341cb16d866285f9"
 }

types/createTheme.d.ts

 import { Variable } from './createVariable';
-export declare const createTheme: <Theme extends {
+declare type GenericTheme = {
     [key: string]: string | Variable;
-}>(theme: Theme) => { [key in keyof Theme]: string | Variable; };
+};
+export declare const createTheme: <Theme extends GenericTheme>(theme: Theme) => Theme;
+export {};
 //# sourceMappingURL=createTheme.d.ts.map

New alerts

License Policy Violation

License

This package is not allowed per your license policy. Review the package's license to ensure compliance.

Found 1 instance in 1 package

Fixed alerts

License Policy Violation

License

This package is not allowed per your license policy. Review the package's license to ensure compliance.

Found 1 instance in 1 package

Improved metrics

Number of low supply chain risk alerts

43

decreased by-6.52%

Worsened metrics

Total package byte prevSize

634404

decreased by-0.21%

Lines of code

9057

decreased by-0.08%

Dependency changes

• Updated@tamagui/helpers@^1.0.0-alpha.29