@tamagui/core 1.0.0-alpha.6 → 1.0.0-alpha.7

package/dist/views/Theme.js

@@ -11,11 +11,13 @@ const Theme = /* @__PURE__ */ __name((props) => {
   const themes = useContext(ThemeContext);
   const [parentName, setParentName] = useState(parent.name || "light");
   if (!themes) {
-    console.warn("no themes???", props);
+    console.warn("Error, no themes in context", props);
     return props.children;
   }
   const name = props.name;
-  const activeName = !name ? null : name in themes ? name : `${name}-${parentName}`;
+  const nextNameParent = `${name}-${parentName}`;
+  const nextNameParentParent = `${name}-${parent.parentName}`;
+  const activeName = !name ? null : name in themes ? name : nextNameParent in themes ? nextNameParent : nextNameParentParent in themes ? nextNameParentParent : null;
   const theme = activeName ? themes[activeName] : null;
   const themeManager = useConstant(() => {
     if (!theme) {
@@ -23,7 +25,7 @@ const Theme = /* @__PURE__ */ __name((props) => {
     }
     const manager = new ThemeManager();
     if (name) {
-      manager.setActiveTheme(name, themes[name]);
+      manager.setActiveTheme({ name, theme: themes[name], parentName });
     }
     return manager;
   });
@@ -31,14 +33,14 @@ const Theme = /* @__PURE__ */ __name((props) => {
     if (!themeManager) {
       return;
     }
-    themeManager.setActiveTheme(activeName, theme);
+    themeManager.setActiveTheme({ name: activeName, theme, parentName });
     return parent.onChangeTheme((next) => {
       if (next) {
-        themeManager.setActiveTheme(next, themes[next]);
+        themeManager.setActiveTheme({ name: next, theme: themes[next], parentName });
         setParentName(next);
       }
     });
-  }, [themes, activeName]);
+  }, [themes, activeName, parentName]);
   if (!name || !theme) {
     return props.children;
   }

package/dist/views/Theme.js.map

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../src/views/Theme.tsx"],
-  "sourcesContent": ["import React, { useContext, useState } from 'react'\n\nimport { isWeb, useIsomorphicLayoutEffect } from '../constants/platform'\nimport { getThemeParentClassName } from '../createTamagui'\nimport { useConstant } from '../hooks/useConstant'\nimport { ThemeName, Themes } from '../types'\nimport { ThemeContext } from './ThemeContext'\nimport { ThemeManager, ThemeManagerContext } from './ThemeManagerContext'\n\nexport type ThemeProps = {\n  disableThemeClass?: boolean\n  name: ThemeName | null\n  children?: any\n}\n\nexport const Theme = (props: ThemeProps) => {\n  const parent = useContext(ThemeManagerContext)\n  const themes = useContext(ThemeContext)\n  const [parentName, setParentName] = useState(parent.name || 'light')\n  if (!themes) {\n    console.warn('no themes???', props)\n    return props.children\n  }\n  const name = props.name as string\n  const activeName = !name ? null : name in themes ? name : `${name}-${parentName}`\n  const theme = activeName ? themes[activeName] : null\n  const themeManager = useConstant<ThemeManager | null>(() => {\n    if (!theme) {\n      return null\n    }\n    const manager = new ThemeManager()\n    if (name) {\n      manager.setActiveTheme(name, themes[name])\n    }\n    return manager\n  })\n\n  useIsomorphicLayoutEffect(() => {\n    if (!themeManager) {\n      return\n    }\n    themeManager.setActiveTheme(activeName, theme)\n    return parent.onChangeTheme((next) => {\n      if (next) {\n        themeManager.setActiveTheme(next, themes[next])\n        setParentName(next)\n      }\n    })\n  }, [themes, activeName])\n\n  if (!name || !theme) {\n    return props.children\n  }\n\n  const contents = themeManager ? (\n    <ThemeManagerContext.Provider value={themeManager}>\n      {props.children}\n    </ThemeManagerContext.Provider>\n  ) : (\n    props.children\n  )\n\n  if (isWeb) {\n    if (props.disableThemeClass) {\n      return contents\n    }\n    const color = themes[name]?.['color']?.['variable']\n    return (\n      <div\n        className={getThemeParentClassName(name)}\n        // in order to provide currentColor, set color by default\n        style={{ display: 'contents', color }}\n      >\n        {contents}\n      </div>\n    )\n  }\n\n  return contents\n}\n"],
-  "mappings": ";;AAAA;AAEA;AACA;AACA;AAEA;AACA;AAQO,MAAM,QAAQ,wBAAC,UAAsB;AAC1C,QAAM,SAAS,WAAW;AAC1B,QAAM,SAAS,WAAW;AAC1B,QAAM,CAAC,YAAY,iBAAiB,SAAS,OAAO,QAAQ;AAC5D,MAAI,CAAC,QAAQ;AACX,YAAQ,KAAK,gBAAgB;AAC7B,WAAO,MAAM;AAAA;AAEf,QAAM,OAAO,MAAM;AACnB,QAAM,aAAa,CAAC,OAAO,OAAO,QAAQ,SAAS,OAAO,GAAG,QAAQ;AACrE,QAAM,QAAQ,aAAa,OAAO,cAAc;AAChD,QAAM,eAAe,YAAiC,MAAM;AAC1D,QAAI,CAAC,OAAO;AACV,aAAO;AAAA;AAET,UAAM,UAAU,IAAI;AACpB,QAAI,MAAM;AACR,cAAQ,eAAe,MAAM,OAAO;AAAA;AAEtC,WAAO;AAAA;AAGT,4BAA0B,MAAM;AAC9B,QAAI,CAAC,cAAc;AACjB;AAAA;AAEF,iBAAa,eAAe,YAAY;AACxC,WAAO,OAAO,cAAc,CAAC,SAAS;AACpC,UAAI,MAAM;AACR,qBAAa,eAAe,MAAM,OAAO;AACzC,sBAAc;AAAA;AAAA;AAAA,KAGjB,CAAC,QAAQ;AAEZ,MAAI,CAAC,QAAQ,CAAC,OAAO;AACnB,WAAO,MAAM;AAAA;AAGf,QAAM,WAAW,eACf,oCAAC,oBAAoB,UAArB;AAAA,IAA8B,OAAO;AAAA,KAClC,MAAM,YAGT,MAAM;AAGR,MAAI,OAAO;AACT,QAAI,MAAM,mBAAmB;AAC3B,aAAO;AAAA;AAET,UAAM,QAAQ,OAAO,QAAQ,WAAW;AACxC,WACE,oCAAC,OAAD;AAAA,MACE,WAAW,wBAAwB;AAAA,MAEnC,OAAO,EAAE,SAAS,YAAY;AAAA,OAE7B;AAAA;AAKP,SAAO;AAAA,GA/DY;",
+  "sourcesContent": ["import React, { useContext, useState } from 'react'\n\nimport { isWeb, useIsomorphicLayoutEffect } from '../constants/platform'\nimport { getThemeParentClassName } from '../createTamagui'\nimport { useConstant } from '../hooks/useConstant'\nimport { ThemeName } from '../types'\nimport { ThemeContext } from './ThemeContext'\nimport { ThemeManager, ThemeManagerContext } from './ThemeManagerContext'\n\nexport type ThemeProps = {\n  disableThemeClass?: boolean\n  name: ThemeName | null\n  children?: any\n}\n\nexport const Theme = (props: ThemeProps) => {\n  const parent = useContext(ThemeManagerContext)\n  const themes = useContext(ThemeContext)\n  const [parentName, setParentName] = useState(parent.name || 'light')\n  if (!themes) {\n    console.warn('Error, no themes in context', props)\n    return props.children\n  }\n  const name = props.name as string\n  const nextNameParent = `${name}-${parentName}`\n  const nextNameParentParent = `${name}-${parent.parentName}`\n  const activeName = !name\n    ? null\n    : name in themes\n    ? name\n    : nextNameParent in themes\n    ? nextNameParent\n    : nextNameParentParent in themes\n    ? nextNameParentParent\n    : null\n  const theme = activeName ? themes[activeName] : null\n  const themeManager = useConstant<ThemeManager | null>(() => {\n    if (!theme) {\n      return null\n    }\n    const manager = new ThemeManager()\n    if (name) {\n      manager.setActiveTheme({ name, theme: themes[name], parentName })\n    }\n    return manager\n  })\n\n  useIsomorphicLayoutEffect(() => {\n    if (!themeManager) {\n      return\n    }\n    themeManager.setActiveTheme({ name: activeName, theme, parentName })\n    return parent.onChangeTheme((next) => {\n      if (next) {\n        themeManager.setActiveTheme({ name: next, theme: themes[next], parentName })\n        setParentName(next)\n      }\n    })\n  }, [themes, activeName, parentName])\n\n  if (!name || !theme) {\n    return props.children\n  }\n\n  const contents = themeManager ? (\n    <ThemeManagerContext.Provider value={themeManager}>\n      {props.children}\n    </ThemeManagerContext.Provider>\n  ) : (\n    props.children\n  )\n\n  if (isWeb) {\n    if (props.disableThemeClass) {\n      return contents\n    }\n    const color = themes[name]?.['color']?.['variable']\n    return (\n      <div\n        className={getThemeParentClassName(name)}\n        // in order to provide currentColor, set color by default\n        style={{ display: 'contents', color }}\n      >\n        {contents}\n      </div>\n    )\n  }\n\n  return contents\n}\n"],
+  "mappings": ";;AAAA;AAEA;AACA;AACA;AAEA;AACA;AAQO,MAAM,QAAQ,wBAAC,UAAsB;AAC1C,QAAM,SAAS,WAAW;AAC1B,QAAM,SAAS,WAAW;AAC1B,QAAM,CAAC,YAAY,iBAAiB,SAAS,OAAO,QAAQ;AAC5D,MAAI,CAAC,QAAQ;AACX,YAAQ,KAAK,+BAA+B;AAC5C,WAAO,MAAM;AAAA;AAEf,QAAM,OAAO,MAAM;AACnB,QAAM,iBAAiB,GAAG,QAAQ;AAClC,QAAM,uBAAuB,GAAG,QAAQ,OAAO;AAC/C,QAAM,aAAa,CAAC,OAChB,OACA,QAAQ,SACR,OACA,kBAAkB,SAClB,iBACA,wBAAwB,SACxB,uBACA;AACJ,QAAM,QAAQ,aAAa,OAAO,cAAc;AAChD,QAAM,eAAe,YAAiC,MAAM;AAC1D,QAAI,CAAC,OAAO;AACV,aAAO;AAAA;AAET,UAAM,UAAU,IAAI;AACpB,QAAI,MAAM;AACR,cAAQ,eAAe,EAAE,MAAM,OAAO,OAAO,OAAO;AAAA;AAEtD,WAAO;AAAA;AAGT,4BAA0B,MAAM;AAC9B,QAAI,CAAC,cAAc;AACjB;AAAA;AAEF,iBAAa,eAAe,EAAE,MAAM,YAAY,OAAO;AACvD,WAAO,OAAO,cAAc,CAAC,SAAS;AACpC,UAAI,MAAM;AACR,qBAAa,eAAe,EAAE,MAAM,MAAM,OAAO,OAAO,OAAO;AAC/D,sBAAc;AAAA;AAAA;AAAA,KAGjB,CAAC,QAAQ,YAAY;AAExB,MAAI,CAAC,QAAQ,CAAC,OAAO;AACnB,WAAO,MAAM;AAAA;AAGf,QAAM,WAAW,eACf,oCAAC,oBAAoB,UAArB;AAAA,IAA8B,OAAO;AAAA,KAClC,MAAM,YAGT,MAAM;AAGR,MAAI,OAAO;AACT,QAAI,MAAM,mBAAmB;AAC3B,aAAO;AAAA;AAET,UAAM,QAAQ,OAAO,QAAQ,WAAW;AACxC,WACE,oCAAC,OAAD;AAAA,MACE,WAAW,wBAAwB;AAAA,MAEnC,OAAO,EAAE,SAAS,YAAY;AAAA,OAE7B;AAAA;AAKP,SAAO;AAAA,GAzEY;",
   "names": []
 }

package/dist/views/ThemeManagerContext.js

@@ -4,16 +4,22 @@ import { createContext } from "react";
 class ThemeManager {
   constructor() {
     this.name = "light";
+    this.parentName = null;
     this.keys = new Map();
     this.listeners = new Map();
     this.callbacks = new Set();
     this.theme = null;
   }
-  setActiveTheme(name, theme) {
+  setActiveTheme({
+    name,
+    theme,
+    parentName
+  }) {
     if (name === this.name)
       return;
     this.name = name;
     this.theme = theme;
+    this.parentName = parentName || null;
     this.update();
   }
   track(uuid, keys) {

package/dist/views/ThemeManagerContext.js.map

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../src/views/ThemeManagerContext.tsx"],
-  "sourcesContent": ["import { createContext } from 'react'\n\nexport class ThemeManager {\n  name: string | null = 'light'\n  keys = new Map<any, Set<string>>()\n  listeners = new Map<any, Function>()\n  callbacks = new Set<Function>()\n  theme = null\n\n  setActiveTheme(name: string | null, theme?: any) {\n    if (name === this.name) return\n    this.name = name\n    this.theme = theme\n    this.update()\n  }\n\n  track(uuid: any, keys: Set<string>) {\n    if (!this.name) return\n    this.keys.set(uuid, keys)\n  }\n\n  update() {\n    if (!this.name) {\n      this.keys.clear()\n    }\n    for (const [uuid, keys] of this.keys.entries()) {\n      if (keys.size) {\n        this.listeners.get(uuid)?.()\n      }\n    }\n    this.callbacks.forEach((cb) => cb(this.name))\n  }\n\n  onChangeTheme(cb: (name: string | null) => void) {\n    this.callbacks.add(cb)\n    return () => {\n      this.callbacks.delete(cb)\n    }\n  }\n\n  onUpdate(uuid: any, cb: Function) {\n    this.listeners.set(uuid, cb)\n    return () => {\n      this.listeners.delete(uuid)\n      this.keys.delete(uuid)\n    }\n  }\n}\n\nexport const ThemeManagerContext = createContext<ThemeManager>(new ThemeManager())\n"],
-  "mappings": ";;AAAA;AAEO,mBAAmB;AAAA,EAAnB,cAFP;AAGE,gBAAsB;AACtB,gBAAO,IAAI;AACX,qBAAY,IAAI;AAChB,qBAAY,IAAI;AAChB,iBAAQ;AAAA;AAAA,EAER,eAAe,MAAqB,OAAa;AAC/C,QAAI,SAAS,KAAK;AAAM;AACxB,SAAK,OAAO;AACZ,SAAK,QAAQ;AACb,SAAK;AAAA;AAAA,EAGP,MAAM,MAAW,MAAmB;AAClC,QAAI,CAAC,KAAK;AAAM;AAChB,SAAK,KAAK,IAAI,MAAM;AAAA;AAAA,EAGtB,SAAS;AACP,QAAI,CAAC,KAAK,MAAM;AACd,WAAK,KAAK;AAAA;AAEZ,eAAW,CAAC,MAAM,SAAS,KAAK,KAAK,WAAW;AAC9C,UAAI,KAAK,MAAM;AACb,aAAK,UAAU,IAAI;AAAA;AAAA;AAGvB,SAAK,UAAU,QAAQ,CAAC,OAAO,GAAG,KAAK;AAAA;AAAA,EAGzC,cAAc,IAAmC;AAC/C,SAAK,UAAU,IAAI;AACnB,WAAO,MAAM;AACX,WAAK,UAAU,OAAO;AAAA;AAAA;AAAA,EAI1B,SAAS,MAAW,IAAc;AAChC,SAAK,UAAU,IAAI,MAAM;AACzB,WAAO,MAAM;AACX,WAAK,UAAU,OAAO;AACtB,WAAK,KAAK,OAAO;AAAA;AAAA;AAAA;AA1ChB;AA+CA,MAAM,sBAAsB,cAA4B,IAAI;",
+  "sourcesContent": ["import { createContext } from 'react'\n\nexport class ThemeManager {\n  name: string | null = 'light'\n  parentName: string | null = null\n  keys = new Map<any, Set<string>>()\n  listeners = new Map<any, Function>()\n  callbacks = new Set<Function>()\n  theme = null\n\n  setActiveTheme({\n    name,\n    theme,\n    parentName,\n  }: {\n    parentName?: string | null\n    name: string | null\n    theme?: any\n  }) {\n    if (name === this.name) return\n    this.name = name\n    this.theme = theme\n    this.parentName = parentName || null\n    this.update()\n  }\n\n  track(uuid: any, keys: Set<string>) {\n    if (!this.name) return\n    this.keys.set(uuid, keys)\n  }\n\n  update() {\n    if (!this.name) {\n      this.keys.clear()\n    }\n    for (const [uuid, keys] of this.keys.entries()) {\n      if (keys.size) {\n        this.listeners.get(uuid)?.()\n      }\n    }\n    this.callbacks.forEach((cb) => cb(this.name))\n  }\n\n  onChangeTheme(cb: (name: string | null) => void) {\n    this.callbacks.add(cb)\n    return () => {\n      this.callbacks.delete(cb)\n    }\n  }\n\n  onUpdate(uuid: any, cb: Function) {\n    this.listeners.set(uuid, cb)\n    return () => {\n      this.listeners.delete(uuid)\n      this.keys.delete(uuid)\n    }\n  }\n}\n\nexport const ThemeManagerContext = createContext<ThemeManager>(new ThemeManager())\n"],
+  "mappings": ";;AAAA;AAEO,mBAAmB;AAAA,EAAnB,cAFP;AAGE,gBAAsB;AACtB,sBAA4B;AAC5B,gBAAO,IAAI;AACX,qBAAY,IAAI;AAChB,qBAAY,IAAI;AAChB,iBAAQ;AAAA;AAAA,EAER,eAAe;AAAA,IACb;AAAA,IACA;AAAA,IACA;AAAA,KAKC;AACD,QAAI,SAAS,KAAK;AAAM;AACxB,SAAK,OAAO;AACZ,SAAK,QAAQ;AACb,SAAK,aAAa,cAAc;AAChC,SAAK;AAAA;AAAA,EAGP,MAAM,MAAW,MAAmB;AAClC,QAAI,CAAC,KAAK;AAAM;AAChB,SAAK,KAAK,IAAI,MAAM;AAAA;AAAA,EAGtB,SAAS;AACP,QAAI,CAAC,KAAK,MAAM;AACd,WAAK,KAAK;AAAA;AAEZ,eAAW,CAAC,MAAM,SAAS,KAAK,KAAK,WAAW;AAC9C,UAAI,KAAK,MAAM;AACb,aAAK,UAAU,IAAI;AAAA;AAAA;AAGvB,SAAK,UAAU,QAAQ,CAAC,OAAO,GAAG,KAAK;AAAA;AAAA,EAGzC,cAAc,IAAmC;AAC/C,SAAK,UAAU,IAAI;AACnB,WAAO,MAAM;AACX,WAAK,UAAU,OAAO;AAAA;AAAA;AAAA,EAI1B,SAAS,MAAW,IAAc;AAChC,SAAK,UAAU,IAAI,MAAM;AACzB,WAAO,MAAM;AACX,WAAK,UAAU,OAAO;AACtB,WAAK,KAAK,OAAO;AAAA;AAAA;AAAA;AApDhB;AAyDA,MAAM,sBAAsB,cAA4B,IAAI;",
   "names": []
 }

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@tamagui/core",
-  "version": "1.0.0-alpha.6",
+  "version": "1.0.0-alpha.7",
   "source": "src/index.ts",
   "main": "dist/index.cjs",
   "module": "dist/index.js",
@@ -26,6 +26,7 @@
   },
   "devDependencies": {
     "@tamagui/build": "^1.0.0-alpha.2",
+    "@tamagui/ow": "^0.28.1",
     "@types/react": "^17.0.35",
     "esbuild": "^0.11.20",
     "typescript": "^4.4.4"
@@ -36,5 +37,5 @@
   "engines": {
     "node": ">=16"
   },
-  "gitHead": "18a942d7a08109c8f5b8692a2adb20c69d56a7e1"
+  "gitHead": "13694a98d31535846699004532630788177537e9"
 }

package/src/createFont.ts

@@ -1,6 +1,11 @@
+import { validateFont } from './helpers/validate'
 import { GenericFont } from './types'
 
 export const createFont = <A extends GenericFont>(font: A): A => {
+  if (process.env.NODE_ENV === 'development') {
+    validateFont(font)
+  }
+
   // fills in any missing values based on size keys being standard
   const sizeKeys = Object.keys(font.size)
 

package/src/createTamagui.ts

@@ -2,6 +2,7 @@ import { getStyleRules } from '@tamagui/helpers'
 
 import { Variable, createVariable, isVariable } from './createVariable'
 import { createTamaguiProvider } from './helpers/createTamaguiProvider'
+import { validateConfig } from './helpers/validate'
 import { configureMedia } from './hooks/useMedia'
 import {
   CreateTamaguiConfig,
@@ -46,6 +47,12 @@ export function createTamagui<Conf extends CreateTamaguiProps>(
 ): Conf extends CreateTamaguiConfig<infer A, infer B, infer C, infer D>
   ? TamaguiInternalConfig<A, B, C, D>
   : unknown {
+  if (process.env.NODE_ENV === 'development') {
+    // config is re-run by the @tamagui/static, dont double validate
+    if (!config['parsed']) {
+      validateConfig(config)
+    }
+  }
   // test env loads a few times as it runs diff tests
   if (conf) {
     console.warn('Called createTamagui twice! Should never do so')
@@ -157,6 +164,7 @@ export function createTamagui<Conf extends CreateTamaguiProps>(
     themeConfig,
     themeParsed,
     tokensParsed,
+    parsed: true,
     getCSS() {
       return `${themeConfig.css}\n${[...getStyleRules()].join('\n')}`
     },

package/src/createTokens.ts

@@ -1,9 +1,14 @@
 import { Variable, createVariable } from './createVariable'
+import { validateTokens } from './helpers/validate'
 import { CreateTokens } from './types'
 
-// tokens.color.dark.red ===>{ var: `color-dark-red`, val: '' }
+// tokens.color.dark.red ===> { var: `color-dark-red`, val: '' }
 
 export function createTokens<T extends CreateTokens>(tokens: T): MakeTokens<T> {
+  if (process.env.NODE_ENV === 'development') {
+    validateTokens(tokens)
+  }
+
   return setupTokens(tokens) as any
 }
 

package/src/helpers/validate.ts

@@ -0,0 +1,59 @@
+// published a patched version that works on native
+import ow from '@tamagui/ow'
+
+export const validateConfig = (conf: any) => {
+  if (!conf) {
+    console.warn('no conf?')
+    return
+  }
+  try {
+    ow(conf, validConfig)
+  } catch (err: any) {
+    console.log('Given config:\n', JSON.stringify(conf, null, 2))
+    throw err
+  }
+}
+
+const validConfig = ow.object.exactShape({
+  defaultTheme: ow.optional.string,
+  disableRootThemeClass: ow.optional.boolean,
+  shorthands: ow.optional.object.valuesOfType(ow.string),
+  themes: ow.object.valuesOfType(ow.object),
+  tokens: ow.object.valuesOfType(ow.object),
+  media: ow.object.valuesOfType(ow.object),
+})
+
+const validFont = ow.object.exactShape({
+  family: ow.string,
+  size: ow.object.nonEmpty.valuesOfType(ow.number),
+  lineHeight: ow.object.nonEmpty.valuesOfType(ow.number),
+  weight: ow.object.nonEmpty.valuesOfType(ow.string),
+  letterSpacing: ow.object.nonEmpty.valuesOfType(ow.number),
+})
+
+const validTokens = ow.object.exactShape({
+  font: ow.object.valuesOfType(validFont),
+  size: ow.object.nonEmpty.valuesOfType(ow.number),
+  space: ow.object.nonEmpty.valuesOfType(ow.number),
+  zIndex: ow.object.nonEmpty.valuesOfType(ow.number),
+  radius: ow.object.nonEmpty.valuesOfType(ow.number),
+  color: ow.object.nonEmpty.valuesOfType(ow.string),
+})
+
+export const validateTokens = (tokens: any) => {
+  try {
+    ow(tokens, validTokens)
+  } catch (err: any) {
+    console.log('Given tokens:\n', JSON.stringify(tokens, null, 2))
+    throw err
+  }
+}
+
+export const validateFont = (font: any) => {
+  try {
+    ow(font, validFont)
+  } catch (err: any) {
+    console.log('Given font:\n', JSON.stringify(font, null, 2))
+    throw err
+  }
+}

package/src/types.tsx

@@ -110,6 +110,7 @@ export type TamaguiInternalConfig<
   tokensParsed: CreateTokens<Variable>
   themeConfig: any
   getCSS: () => string
+  parsed: boolean
 }
 
 // prevents const intersections from being clobbered into string, keeping the consts

package/src/views/Theme.tsx

@@ -3,7 +3,7 @@ import React, { useContext, useState } from 'react'
 import { isWeb, useIsomorphicLayoutEffect } from '../constants/platform'
 import { getThemeParentClassName } from '../createTamagui'
 import { useConstant } from '../hooks/useConstant'
-import { ThemeName, Themes } from '../types'
+import { ThemeName } from '../types'
 import { ThemeContext } from './ThemeContext'
 import { ThemeManager, ThemeManagerContext } from './ThemeManagerContext'
 
@@ -18,11 +18,21 @@ export const Theme = (props: ThemeProps) => {
   const themes = useContext(ThemeContext)
   const [parentName, setParentName] = useState(parent.name || 'light')
   if (!themes) {
-    console.warn('no themes???', props)
+    console.warn('Error, no themes in context', props)
     return props.children
   }
   const name = props.name as string
-  const activeName = !name ? null : name in themes ? name : `${name}-${parentName}`
+  const nextNameParent = `${name}-${parentName}`
+  const nextNameParentParent = `${name}-${parent.parentName}`
+  const activeName = !name
+    ? null
+    : name in themes
+    ? name
+    : nextNameParent in themes
+    ? nextNameParent
+    : nextNameParentParent in themes
+    ? nextNameParentParent
+    : null
   const theme = activeName ? themes[activeName] : null
   const themeManager = useConstant<ThemeManager | null>(() => {
     if (!theme) {
@@ -30,7 +40,7 @@ export const Theme = (props: ThemeProps) => {
     }
     const manager = new ThemeManager()
     if (name) {
-      manager.setActiveTheme(name, themes[name])
+      manager.setActiveTheme({ name, theme: themes[name], parentName })
     }
     return manager
   })
@@ -39,14 +49,14 @@ export const Theme = (props: ThemeProps) => {
     if (!themeManager) {
       return
     }
-    themeManager.setActiveTheme(activeName, theme)
+    themeManager.setActiveTheme({ name: activeName, theme, parentName })
     return parent.onChangeTheme((next) => {
       if (next) {
-        themeManager.setActiveTheme(next, themes[next])
+        themeManager.setActiveTheme({ name: next, theme: themes[next], parentName })
         setParentName(next)
       }
     })
-  }, [themes, activeName])
+  }, [themes, activeName, parentName])
 
   if (!name || !theme) {
     return props.children

package/src/views/ThemeManagerContext.tsx

@@ -2,15 +2,25 @@ import { createContext } from 'react'
 
 export class ThemeManager {
   name: string | null = 'light'
+  parentName: string | null = null
   keys = new Map<any, Set<string>>()
   listeners = new Map<any, Function>()
   callbacks = new Set<Function>()
   theme = null
 
-  setActiveTheme(name: string | null, theme?: any) {
+  setActiveTheme({
+    name,
+    theme,
+    parentName,
+  }: {
+    parentName?: string | null
+    name: string | null
+    theme?: any
+  }) {
     if (name === this.name) return
     this.name = name
     this.theme = theme
+    this.parentName = parentName || null
     this.update()
   }
 

package/types.d.ts

@@ -97,6 +97,7 @@ export declare type TamaguiInternalConfig<A extends GenericTokens = GenericToken
 	tokensParsed: CreateTokens<Variable>;
 	themeConfig: any;
 	getCSS: () => string;
+	parsed: boolean;
 };
 export declare type UnionableString = string & {};
 export declare type UnionableNumber = number & {};