@tamagui/web 1.5.8 → 1.5.10

package/dist/esm/helpers/getThemeCSSRules.js

@@ -23,63 +23,80 @@ function getThemeCSSRules({
     vars += `--${simpleHash(themeKey, 40)}:${value};`;
   }
   const isDarkOrLightBase = themeName === "dark" || themeName === "light";
-  const selectors = names.map((name) => {
-    return `${CNP}${name}`;
-  });
+  const selectorsSet = new Set(
+    names.map((name) => {
+      return `${CNP}${name}`;
+    })
+  );
   if (hasDarkLight) {
     for (const subName of names) {
-      const isDark = isDarkOrLightBase || subName.startsWith("dark_");
-      const max = config.maxDarkLightNesting ?? 3;
+      const isDark = themeName === "dark" || subName.startsWith("dark_");
+      const maxDepth = config.maxDarkLightNesting ?? 3;
       if (!(isDark || subName.startsWith("light_"))) {
-        selectors.push(`:root:root ${CNP}${subName}`);
+        selectorsSet.add(`:root:root ${CNP}${subName}`);
         continue;
       }
       const childSelector = `${CNP}${subName.replace(isDark ? "dark_" : "light_", "")}`;
-      const order = isDark ? ["dark", "light"] : ["light", "dark"];
-      if (isDarkOrLightBase) {
-        order.reverse();
-      }
-      const [stronger, weaker] = order;
-      const numSelectors = Math.round(max * 1.5);
-      for (let pi = 0; pi < numSelectors; pi++) {
-        const isOdd = pi % 2 === 1;
-        if (isOdd && pi < 3)
-          continue;
-        const parents = new Array(pi + 1).fill(void 0).map((_, psi) => {
-          return `${CNP}${psi % 2 === 0 ? stronger : weaker}`;
-        });
-        let parentSelectors = parents.length > 1 ? parents.slice(1) : parents;
-        if (isOdd) {
-          const [_first, second, ...rest] = parentSelectors;
-          parentSelectors = [second, ...rest, second];
+      const [altLightDark, altSubTheme] = [
+        isDark ? ["dark", "light"] : ["light", "dark"],
+        isDark ? ["dark", "sub_theme"] : ["light", "sub_theme"]
+      ];
+      for (const order of [altLightDark, altSubTheme]) {
+        if (isDarkOrLightBase) {
+          order.reverse();
+        }
+        const [stronger, weaker] = order;
+        const numSelectors = Math.round(maxDepth * 1.5);
+        for (let depth = 0; depth < numSelectors; depth++) {
+          const isOdd = depth % 2 === 1;
+          if (isOdd && depth < 3) {
+            continue;
+          }
+          const parents = new Array(depth + 1).fill(0).map((_, psi) => {
+            return `${CNP}${psi % 2 === 0 ? stronger : weaker}`;
+          });
+          let parentSelectors = parents.length > 1 ? parents.slice(1) : parents;
+          if (isOdd) {
+            const [_first, second, ...rest] = parentSelectors;
+            parentSelectors = [second, ...rest, second];
+          }
+          const lastParentSelector = parentSelectors[parentSelectors.length - 1];
+          const nextChildSelector = childSelector === lastParentSelector ? "" : childSelector;
+          selectorsSet.add(`${parentSelectors.join(" ")} ${nextChildSelector}`.trim());
         }
-        const lastParentSelector = parentSelectors[parentSelectors.length - 1];
-        selectors.push(
-          `${parentSelectors.join(" ")} ${childSelector === lastParentSelector ? "" : childSelector}`
-        );
       }
     }
   }
+  const selectors = [...selectorsSet];
   const selectorsString = selectors.map((x) => {
-    const isBaseTheme = x === ".t_dark" || x === ".t_light" || x.startsWith(".t_dark ") || x.startsWith(".t_light ");
-    const rootSep = isBaseTheme && config.themeClassNameOnRoot ? "" : " ";
+    const rootSep = isBaseTheme(x) && config.themeClassNameOnRoot ? "" : " ";
     return `:root${rootSep}${x}`;
-  });
-  const css = `${selectorsString.join(", ")} {${vars}}`;
+  }).join(", ");
+  const css = `${selectorsString} {${vars}}`;
   cssRuleSets.push(css);
-  if (config.shouldAddPrefersColorThemes && isDarkOrLightBase) {
+  if (config.shouldAddPrefersColorThemes) {
+    const bgString = variableToString(theme.background);
+    const fgString = variableToString(theme.color);
+    const bodyRules = `body{background:${bgString};color:${fgString};}`;
     const isDark = themeName.startsWith("dark");
-    cssRuleSets.push(
-      `@media(prefers-color-scheme: ${isDark ? "dark" : "light"}) {
-body { background:${variableToString(theme.background)}; color: ${variableToString(
-        theme.color
-      )} }
-:root {${vars} } 
-}`
-    );
+    const baseName = isDark ? "dark" : "light";
+    const lessSpecificSelectors = selectors.map((x) => {
+      if (x == darkSelector || x === lightSelector)
+        return `:root`;
+      return x.replace(/^\.t_(dark|light) /, "").trim();
+    }).filter(Boolean).join(", ");
+    const themeRules = `${lessSpecificSelectors} {${vars}}`;
+    const prefersMediaSelectors = `@media(prefers-color-scheme:${baseName}){
+  ${bodyRules}
+  ${themeRules}
+}`;
+    cssRuleSets.push(prefersMediaSelectors);
   }
   return cssRuleSets;
 }
+const darkSelector = ".t_dark";
+const lightSelector = ".t_light";
+const isBaseTheme = (x) => x === darkSelector || x === lightSelector || x.startsWith(".t_dark ") || x.startsWith(".t_light ");
 export {
   getThemeCSSRules
 };

package/dist/esm/helpers/getThemeCSSRules.js.map

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../../src/helpers/getThemeCSSRules.ts"],
-  "sourcesContent": ["import { simpleHash } from '@tamagui/helpers'\n\nimport { THEME_CLASSNAME_PREFIX } from '../constants/constants.js'\nimport { Variable, variableToString } from '../createVariable.js'\nimport type { CreateTamaguiProps, ThemeParsed } from '../types.js'\nimport { tokensValueToVariable } from './registerCSSVariable.js'\n\nexport function getThemeCSSRules({\n  config,\n  themeName,\n  theme,\n  names,\n}: {\n  config: CreateTamaguiProps\n  themeName: string\n  theme: ThemeParsed\n  names: string[]\n}) {\n  const cssRuleSets: string[] = []\n\n  // special case for SSR\n  const hasDarkLight = 'light' in config.themes && 'dark' in config.themes\n  const CNP = `.${THEME_CLASSNAME_PREFIX}`\n  let vars = ''\n\n  // themeToVariableToValueMap.set(theme, {})\n  // const varToValMap = themeToVariableToValueMap.get(theme)\n  for (const themeKey in theme) {\n    const variable = theme[themeKey] as Variable\n    let value: any = null\n    // if (varToValMap) {\n    //   varToValMap[variable.variable] = variable.val\n    // }\n    if (!tokensValueToVariable.has(variable.val)) {\n      value = variable.val\n    } else {\n      value = tokensValueToVariable.get(variable.val)!.variable\n    }\n    // Hash themeKey in case it has invalid chars too\n    vars += `--${simpleHash(themeKey, 40)}:${value};`\n  }\n\n  const isDarkOrLightBase = themeName === 'dark' || themeName === 'light'\n  const selectors = names.map((name) => {\n    return `${CNP}${name}`\n  })\n\n  // since we dont specify dark/light in classnames we have to do an awkward specificity war\n  // use config.maxDarkLightNesting to determine how deep you can nest until it breaks\n  if (hasDarkLight) {\n    for (const subName of names) {\n      const isDark = isDarkOrLightBase || subName.startsWith('dark_')\n      const max = config.maxDarkLightNesting ?? 3\n\n      if (!(isDark || subName.startsWith('light_'))) {\n        // neither light nor dark subtheme, just generate one selector with :root:root which\n        // will override all :root light/dark selectors generated below\n        selectors.push(`:root:root ${CNP}${subName}`)\n        continue\n      }\n\n      const childSelector = `${CNP}${subName.replace(isDark ? 'dark_' : 'light_', '')}`\n      const order = isDark ? ['dark', 'light'] : ['light', 'dark']\n      if (isDarkOrLightBase) {\n        order.reverse()\n      }\n      const [stronger, weaker] = order\n      const numSelectors = Math.round(max * 1.5)\n\n      for (let pi = 0; pi < numSelectors; pi++) {\n        const isOdd = pi % 2 === 1\n        if (isOdd && pi < 3) continue\n        const parents = new Array(pi + 1).fill(undefined).map((_, psi) => {\n          return `${CNP}${psi % 2 === 0 ? stronger : weaker}`\n        })\n        let parentSelectors = parents.length > 1 ? parents.slice(1) : parents\n        if (isOdd) {\n          const [_first, second, ...rest] = parentSelectors\n          parentSelectors = [second, ...rest, second]\n        }\n        // avoid .t_light .t_light at the end (make sure child is unique from last parent)\n        const lastParentSelector = parentSelectors[parentSelectors.length - 1]\n        selectors.push(\n          `${parentSelectors.join(' ')} ${\n            childSelector === lastParentSelector ? '' : childSelector\n          }`\n        )\n      }\n    }\n  }\n\n  const selectorsString = selectors.map((x) => {\n    // only do our :root attach if it's not light/dark - not support sub themes on root saves a lot of effort/size\n    // this isBaseTheme logic could probably be done more efficiently above\n    const isBaseTheme =\n      x === '.t_dark' ||\n      x === '.t_light' ||\n      x.startsWith('.t_dark ') ||\n      x.startsWith('.t_light ')\n    const rootSep = isBaseTheme && config.themeClassNameOnRoot ? '' : ' '\n    return `:root${rootSep}${x}`\n  })\n  const css = `${selectorsString.join(', ')} {${vars}}`\n  cssRuleSets.push(css)\n\n  if (config.shouldAddPrefersColorThemes && isDarkOrLightBase) {\n    // add media prefers for dark/light base\n    const isDark = themeName.startsWith('dark')\n    cssRuleSets.push(\n      `@media(prefers-color-scheme: ${isDark ? 'dark' : 'light'}) {\nbody { background:${variableToString(theme.background)}; color: ${variableToString(\n        theme.color\n      )} }\n:root {${vars} } \n}`\n    )\n  }\n\n  return cssRuleSets\n}\n"],
-  "mappings": "AAAA,SAAS,kBAAkB;AAE3B,SAAS,8BAA8B;AACvC,SAAmB,wBAAwB;AAE3C,SAAS,6BAA6B;AAE/B,SAAS,iBAAiB;AAAA,EAC/B;AAAA,EACA;AAAA,EACA;AAAA,EACA;AACF,GAKG;AACD,QAAM,cAAwB,CAAC;AAG/B,QAAM,eAAe,WAAW,OAAO,UAAU,UAAU,OAAO;AAClE,QAAM,MAAM,IAAI;AAChB,MAAI,OAAO;AAIX,aAAW,YAAY,OAAO;AAC5B,UAAM,WAAW,MAAM,QAAQ;AAC/B,QAAI,QAAa;AAIjB,QAAI,CAAC,sBAAsB,IAAI,SAAS,GAAG,GAAG;AAC5C,cAAQ,SAAS;AAAA,IACnB,OAAO;AACL,cAAQ,sBAAsB,IAAI,SAAS,GAAG,EAAG;AAAA,IACnD;AAEA,YAAQ,KAAK,WAAW,UAAU,EAAE,KAAK;AAAA,EAC3C;AAEA,QAAM,oBAAoB,cAAc,UAAU,cAAc;AAChE,QAAM,YAAY,MAAM,IAAI,CAAC,SAAS;AACpC,WAAO,GAAG,MAAM;AAAA,EAClB,CAAC;AAID,MAAI,cAAc;AAChB,eAAW,WAAW,OAAO;AAC3B,YAAM,SAAS,qBAAqB,QAAQ,WAAW,OAAO;AAC9D,YAAM,MAAM,OAAO,uBAAuB;AAE1C,UAAI,EAAE,UAAU,QAAQ,WAAW,QAAQ,IAAI;AAG7C,kBAAU,KAAK,cAAc,MAAM,SAAS;AAC5C;AAAA,MACF;AAEA,YAAM,gBAAgB,GAAG,MAAM,QAAQ,QAAQ,SAAS,UAAU,UAAU,EAAE;AAC9E,YAAM,QAAQ,SAAS,CAAC,QAAQ,OAAO,IAAI,CAAC,SAAS,MAAM;AAC3D,UAAI,mBAAmB;AACrB,cAAM,QAAQ;AAAA,MAChB;AACA,YAAM,CAAC,UAAU,MAAM,IAAI;AAC3B,YAAM,eAAe,KAAK,MAAM,MAAM,GAAG;AAEzC,eAAS,KAAK,GAAG,KAAK,cAAc,MAAM;AACxC,cAAM,QAAQ,KAAK,MAAM;AACzB,YAAI,SAAS,KAAK;AAAG;AACrB,cAAM,UAAU,IAAI,MAAM,KAAK,CAAC,EAAE,KAAK,MAAS,EAAE,IAAI,CAAC,GAAG,QAAQ;AAChE,iBAAO,GAAG,MAAM,MAAM,MAAM,IAAI,WAAW;AAAA,QAC7C,CAAC;AACD,YAAI,kBAAkB,QAAQ,SAAS,IAAI,QAAQ,MAAM,CAAC,IAAI;AAC9D,YAAI,OAAO;AACT,gBAAM,CAAC,QAAQ,QAAQ,GAAG,IAAI,IAAI;AAClC,4BAAkB,CAAC,QAAQ,GAAG,MAAM,MAAM;AAAA,QAC5C;AAEA,cAAM,qBAAqB,gBAAgB,gBAAgB,SAAS,CAAC;AACrE,kBAAU;AAAA,UACR,GAAG,gBAAgB,KAAK,GAAG,KACzB,kBAAkB,qBAAqB,KAAK;AAAA,QAEhD;AAAA,MACF;AAAA,IACF;AAAA,EACF;AAEA,QAAM,kBAAkB,UAAU,IAAI,CAAC,MAAM;AAG3C,UAAM,cACJ,MAAM,aACN,MAAM,cACN,EAAE,WAAW,UAAU,KACvB,EAAE,WAAW,WAAW;AAC1B,UAAM,UAAU,eAAe,OAAO,uBAAuB,KAAK;AAClE,WAAO,QAAQ,UAAU;AAAA,EAC3B,CAAC;AACD,QAAM,MAAM,GAAG,gBAAgB,KAAK,IAAI,MAAM;AAC9C,cAAY,KAAK,GAAG;AAEpB,MAAI,OAAO,+BAA+B,mBAAmB;AAE3D,UAAM,SAAS,UAAU,WAAW,MAAM;AAC1C,gBAAY;AAAA,MACV,gCAAgC,SAAS,SAAS;AAAA,oBACpC,iBAAiB,MAAM,UAAU,aAAa;AAAA,QAC1D,MAAM;AAAA,MACR;AAAA,SACG;AAAA;AAAA,IAEL;AAAA,EACF;AAEA,SAAO;AACT;",
+  "sourcesContent": ["import { simpleHash } from '@tamagui/helpers'\n\nimport { THEME_CLASSNAME_PREFIX } from '../constants/constants.js'\nimport { Variable, variableToString } from '../createVariable.js'\nimport type { CreateTamaguiProps, ThemeParsed } from '../types.js'\nimport { tokensValueToVariable } from './registerCSSVariable.js'\n\nexport function getThemeCSSRules({\n  config,\n  themeName,\n  theme,\n  names,\n}: {\n  config: CreateTamaguiProps\n  themeName: string\n  theme: ThemeParsed\n  names: string[]\n}) {\n  const cssRuleSets: string[] = []\n\n  // special case for SSR\n  const hasDarkLight = 'light' in config.themes && 'dark' in config.themes\n  const CNP = `.${THEME_CLASSNAME_PREFIX}`\n  let vars = ''\n\n  // themeToVariableToValueMap.set(theme, {})\n  // const varToValMap = themeToVariableToValueMap.get(theme)\n  for (const themeKey in theme) {\n    const variable = theme[themeKey] as Variable\n    let value: any = null\n    // if (varToValMap) {\n    //   varToValMap[variable.variable] = variable.val\n    // }\n    if (!tokensValueToVariable.has(variable.val)) {\n      value = variable.val\n    } else {\n      value = tokensValueToVariable.get(variable.val)!.variable\n    }\n    // Hash themeKey in case it has invalid chars too\n    vars += `--${simpleHash(themeKey, 40)}:${value};`\n  }\n\n  const isDarkOrLightBase = themeName === 'dark' || themeName === 'light'\n  const selectorsSet = new Set(\n    names.map((name) => {\n      return `${CNP}${name}`\n    })\n  )\n\n  // since we dont specify dark/light in classnames we have to do an awkward specificity war\n  // use config.maxDarkLightNesting to determine how deep you can nest until it breaks\n  if (hasDarkLight) {\n    for (const subName of names) {\n      const isDark = themeName === 'dark' || subName.startsWith('dark_')\n      const maxDepth = config.maxDarkLightNesting ?? 3\n\n      if (!(isDark || subName.startsWith('light_'))) {\n        // neither light nor dark subtheme, just generate one selector with :root:root which\n        // will override all :root light/dark selectors generated below\n        selectorsSet.add(`:root:root ${CNP}${subName}`)\n        continue\n      }\n\n      const childSelector = `${CNP}${subName.replace(isDark ? 'dark_' : 'light_', '')}`\n\n      const [altLightDark, altSubTheme] = [\n        isDark ? ['dark', 'light'] : ['light', 'dark'],\n        isDark ? ['dark', 'sub_theme'] : ['light', 'sub_theme'],\n      ]\n\n      for (const order of [altLightDark, altSubTheme]) {\n        if (isDarkOrLightBase) {\n          order.reverse()\n        }\n        const [stronger, weaker] = order\n        const numSelectors = Math.round(maxDepth * 1.5)\n\n        for (let depth = 0; depth < numSelectors; depth++) {\n          const isOdd = depth % 2 === 1\n\n          // wtf is this continue:\n          if (isOdd && depth < 3) {\n            continue\n          }\n\n          const parents = new Array(depth + 1).fill(0).map((_, psi) => {\n            return `${CNP}${psi % 2 === 0 ? stronger : weaker}`\n          })\n\n          let parentSelectors = parents.length > 1 ? parents.slice(1) : parents\n\n          if (isOdd) {\n            const [_first, second, ...rest] = parentSelectors\n            parentSelectors = [second, ...rest, second]\n          }\n\n          const lastParentSelector = parentSelectors[parentSelectors.length - 1]\n          const nextChildSelector =\n            childSelector === lastParentSelector ? '' : childSelector\n\n          // for light/dark/light:\n          selectorsSet.add(`${parentSelectors.join(' ')} ${nextChildSelector}`.trim())\n        }\n      }\n    }\n  }\n\n  const selectors = [...selectorsSet]\n\n  // only do our :root attach if it's not light/dark - not support sub themes on root saves a lot of effort/size\n  // this isBaseTheme logic could probably be done more efficiently above\n  const selectorsString = selectors\n    .map((x) => {\n      const rootSep = isBaseTheme(x) && config.themeClassNameOnRoot ? '' : ' '\n      return `:root${rootSep}${x}`\n    })\n    .join(', ')\n\n  const css = `${selectorsString} {${vars}}`\n  cssRuleSets.push(css)\n\n  if (config.shouldAddPrefersColorThemes) {\n    const bgString = variableToString(theme.background)\n    const fgString = variableToString(theme.color)\n    const bodyRules = `body{background:${bgString};color:${fgString};}`\n    const isDark = themeName.startsWith('dark')\n    const baseName = isDark ? 'dark' : 'light'\n    const lessSpecificSelectors = selectors\n      .map((x) => {\n        if (x == darkSelector || x === lightSelector) return `:root`\n        return x.replace(/^\\.t_(dark|light) /, '').trim()\n      })\n      .filter(Boolean)\n      .join(', ')\n    const themeRules = `${lessSpecificSelectors} {${vars}}`\n    const prefersMediaSelectors = `@media(prefers-color-scheme:${baseName}){\n  ${bodyRules}\n  ${themeRules}\n}`\n    cssRuleSets.push(prefersMediaSelectors)\n  }\n\n  return cssRuleSets\n}\n\nconst darkSelector = '.t_dark'\nconst lightSelector = '.t_light'\nconst isBaseTheme = (x: string) =>\n  x === darkSelector ||\n  x === lightSelector ||\n  x.startsWith('.t_dark ') ||\n  x.startsWith('.t_light ')\n"],
+  "mappings": "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",
   "names": []
 }

package/dist/esm/helpers/getThemeCSSRules.mjs

@@ -23,63 +23,80 @@ function getThemeCSSRules({
     vars += `--${simpleHash(themeKey, 40)}:${value};`;
   }
   const isDarkOrLightBase = themeName === "dark" || themeName === "light";
-  const selectors = names.map((name) => {
-    return `${CNP}${name}`;
-  });
+  const selectorsSet = new Set(
+    names.map((name) => {
+      return `${CNP}${name}`;
+    })
+  );
   if (hasDarkLight) {
     for (const subName of names) {
-      const isDark = isDarkOrLightBase || subName.startsWith("dark_");
-      const max = config.maxDarkLightNesting ?? 3;
+      const isDark = themeName === "dark" || subName.startsWith("dark_");
+      const maxDepth = config.maxDarkLightNesting ?? 3;
       if (!(isDark || subName.startsWith("light_"))) {
-        selectors.push(`:root:root ${CNP}${subName}`);
+        selectorsSet.add(`:root:root ${CNP}${subName}`);
         continue;
       }
       const childSelector = `${CNP}${subName.replace(isDark ? "dark_" : "light_", "")}`;
-      const order = isDark ? ["dark", "light"] : ["light", "dark"];
-      if (isDarkOrLightBase) {
-        order.reverse();
-      }
-      const [stronger, weaker] = order;
-      const numSelectors = Math.round(max * 1.5);
-      for (let pi = 0; pi < numSelectors; pi++) {
-        const isOdd = pi % 2 === 1;
-        if (isOdd && pi < 3)
-          continue;
-        const parents = new Array(pi + 1).fill(void 0).map((_, psi) => {
-          return `${CNP}${psi % 2 === 0 ? stronger : weaker}`;
-        });
-        let parentSelectors = parents.length > 1 ? parents.slice(1) : parents;
-        if (isOdd) {
-          const [_first, second, ...rest] = parentSelectors;
-          parentSelectors = [second, ...rest, second];
+      const [altLightDark, altSubTheme] = [
+        isDark ? ["dark", "light"] : ["light", "dark"],
+        isDark ? ["dark", "sub_theme"] : ["light", "sub_theme"]
+      ];
+      for (const order of [altLightDark, altSubTheme]) {
+        if (isDarkOrLightBase) {
+          order.reverse();
+        }
+        const [stronger, weaker] = order;
+        const numSelectors = Math.round(maxDepth * 1.5);
+        for (let depth = 0; depth < numSelectors; depth++) {
+          const isOdd = depth % 2 === 1;
+          if (isOdd && depth < 3) {
+            continue;
+          }
+          const parents = new Array(depth + 1).fill(0).map((_, psi) => {
+            return `${CNP}${psi % 2 === 0 ? stronger : weaker}`;
+          });
+          let parentSelectors = parents.length > 1 ? parents.slice(1) : parents;
+          if (isOdd) {
+            const [_first, second, ...rest] = parentSelectors;
+            parentSelectors = [second, ...rest, second];
+          }
+          const lastParentSelector = parentSelectors[parentSelectors.length - 1];
+          const nextChildSelector = childSelector === lastParentSelector ? "" : childSelector;
+          selectorsSet.add(`${parentSelectors.join(" ")} ${nextChildSelector}`.trim());
         }
-        const lastParentSelector = parentSelectors[parentSelectors.length - 1];
-        selectors.push(
-          `${parentSelectors.join(" ")} ${childSelector === lastParentSelector ? "" : childSelector}`
-        );
       }
     }
   }
+  const selectors = [...selectorsSet];
   const selectorsString = selectors.map((x) => {
-    const isBaseTheme = x === ".t_dark" || x === ".t_light" || x.startsWith(".t_dark ") || x.startsWith(".t_light ");
-    const rootSep = isBaseTheme && config.themeClassNameOnRoot ? "" : " ";
+    const rootSep = isBaseTheme(x) && config.themeClassNameOnRoot ? "" : " ";
     return `:root${rootSep}${x}`;
-  });
-  const css = `${selectorsString.join(", ")} {${vars}}`;
+  }).join(", ");
+  const css = `${selectorsString} {${vars}}`;
   cssRuleSets.push(css);
-  if (config.shouldAddPrefersColorThemes && isDarkOrLightBase) {
+  if (config.shouldAddPrefersColorThemes) {
+    const bgString = variableToString(theme.background);
+    const fgString = variableToString(theme.color);
+    const bodyRules = `body{background:${bgString};color:${fgString};}`;
     const isDark = themeName.startsWith("dark");
-    cssRuleSets.push(
-      `@media(prefers-color-scheme: ${isDark ? "dark" : "light"}) {
-body { background:${variableToString(theme.background)}; color: ${variableToString(
-        theme.color
-      )} }
-:root {${vars} } 
-}`
-    );
+    const baseName = isDark ? "dark" : "light";
+    const lessSpecificSelectors = selectors.map((x) => {
+      if (x == darkSelector || x === lightSelector)
+        return `:root`;
+      return x.replace(/^\.t_(dark|light) /, "").trim();
+    }).filter(Boolean).join(", ");
+    const themeRules = `${lessSpecificSelectors} {${vars}}`;
+    const prefersMediaSelectors = `@media(prefers-color-scheme:${baseName}){
+  ${bodyRules}
+  ${themeRules}
+}`;
+    cssRuleSets.push(prefersMediaSelectors);
   }
   return cssRuleSets;
 }
+const darkSelector = ".t_dark";
+const lightSelector = ".t_light";
+const isBaseTheme = (x) => x === darkSelector || x === lightSelector || x.startsWith(".t_dark ") || x.startsWith(".t_light ");
 export {
   getThemeCSSRules
 };

package/dist/esm/helpers/getThemeCSSRules.mjs.map

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../../src/helpers/getThemeCSSRules.ts"],
-  "sourcesContent": ["import { simpleHash } from '@tamagui/helpers'\n\nimport { THEME_CLASSNAME_PREFIX } from '../constants/constants.js'\nimport { Variable, variableToString } from '../createVariable.js'\nimport type { CreateTamaguiProps, ThemeParsed } from '../types.js'\nimport { tokensValueToVariable } from './registerCSSVariable.js'\n\nexport function getThemeCSSRules({\n  config,\n  themeName,\n  theme,\n  names,\n}: {\n  config: CreateTamaguiProps\n  themeName: string\n  theme: ThemeParsed\n  names: string[]\n}) {\n  const cssRuleSets: string[] = []\n\n  // special case for SSR\n  const hasDarkLight = 'light' in config.themes && 'dark' in config.themes\n  const CNP = `.${THEME_CLASSNAME_PREFIX}`\n  let vars = ''\n\n  // themeToVariableToValueMap.set(theme, {})\n  // const varToValMap = themeToVariableToValueMap.get(theme)\n  for (const themeKey in theme) {\n    const variable = theme[themeKey] as Variable\n    let value: any = null\n    // if (varToValMap) {\n    //   varToValMap[variable.variable] = variable.val\n    // }\n    if (!tokensValueToVariable.has(variable.val)) {\n      value = variable.val\n    } else {\n      value = tokensValueToVariable.get(variable.val)!.variable\n    }\n    // Hash themeKey in case it has invalid chars too\n    vars += `--${simpleHash(themeKey, 40)}:${value};`\n  }\n\n  const isDarkOrLightBase = themeName === 'dark' || themeName === 'light'\n  const selectors = names.map((name) => {\n    return `${CNP}${name}`\n  })\n\n  // since we dont specify dark/light in classnames we have to do an awkward specificity war\n  // use config.maxDarkLightNesting to determine how deep you can nest until it breaks\n  if (hasDarkLight) {\n    for (const subName of names) {\n      const isDark = isDarkOrLightBase || subName.startsWith('dark_')\n      const max = config.maxDarkLightNesting ?? 3\n\n      if (!(isDark || subName.startsWith('light_'))) {\n        // neither light nor dark subtheme, just generate one selector with :root:root which\n        // will override all :root light/dark selectors generated below\n        selectors.push(`:root:root ${CNP}${subName}`)\n        continue\n      }\n\n      const childSelector = `${CNP}${subName.replace(isDark ? 'dark_' : 'light_', '')}`\n      const order = isDark ? ['dark', 'light'] : ['light', 'dark']\n      if (isDarkOrLightBase) {\n        order.reverse()\n      }\n      const [stronger, weaker] = order\n      const numSelectors = Math.round(max * 1.5)\n\n      for (let pi = 0; pi < numSelectors; pi++) {\n        const isOdd = pi % 2 === 1\n        if (isOdd && pi < 3) continue\n        const parents = new Array(pi + 1).fill(undefined).map((_, psi) => {\n          return `${CNP}${psi % 2 === 0 ? stronger : weaker}`\n        })\n        let parentSelectors = parents.length > 1 ? parents.slice(1) : parents\n        if (isOdd) {\n          const [_first, second, ...rest] = parentSelectors\n          parentSelectors = [second, ...rest, second]\n        }\n        // avoid .t_light .t_light at the end (make sure child is unique from last parent)\n        const lastParentSelector = parentSelectors[parentSelectors.length - 1]\n        selectors.push(\n          `${parentSelectors.join(' ')} ${\n            childSelector === lastParentSelector ? '' : childSelector\n          }`\n        )\n      }\n    }\n  }\n\n  const selectorsString = selectors.map((x) => {\n    // only do our :root attach if it's not light/dark - not support sub themes on root saves a lot of effort/size\n    // this isBaseTheme logic could probably be done more efficiently above\n    const isBaseTheme =\n      x === '.t_dark' ||\n      x === '.t_light' ||\n      x.startsWith('.t_dark ') ||\n      x.startsWith('.t_light ')\n    const rootSep = isBaseTheme && config.themeClassNameOnRoot ? '' : ' '\n    return `:root${rootSep}${x}`\n  })\n  const css = `${selectorsString.join(', ')} {${vars}}`\n  cssRuleSets.push(css)\n\n  if (config.shouldAddPrefersColorThemes && isDarkOrLightBase) {\n    // add media prefers for dark/light base\n    const isDark = themeName.startsWith('dark')\n    cssRuleSets.push(\n      `@media(prefers-color-scheme: ${isDark ? 'dark' : 'light'}) {\nbody { background:${variableToString(theme.background)}; color: ${variableToString(\n        theme.color\n      )} }\n:root {${vars} } \n}`\n    )\n  }\n\n  return cssRuleSets\n}\n"],
-  "mappings": "AAAA,SAAS,kBAAkB;AAE3B,SAAS,8BAA8B;AACvC,SAAmB,wBAAwB;AAE3C,SAAS,6BAA6B;AAE/B,SAAS,iBAAiB;AAAA,EAC/B;AAAA,EACA;AAAA,EACA;AAAA,EACA;AACF,GAKG;AACD,QAAM,cAAwB,CAAC;AAG/B,QAAM,eAAe,WAAW,OAAO,UAAU,UAAU,OAAO;AAClE,QAAM,MAAM,IAAI;AAChB,MAAI,OAAO;AAIX,aAAW,YAAY,OAAO;AAC5B,UAAM,WAAW,MAAM,QAAQ;AAC/B,QAAI,QAAa;AAIjB,QAAI,CAAC,sBAAsB,IAAI,SAAS,GAAG,GAAG;AAC5C,cAAQ,SAAS;AAAA,IACnB,OAAO;AACL,cAAQ,sBAAsB,IAAI,SAAS,GAAG,EAAG;AAAA,IACnD;AAEA,YAAQ,KAAK,WAAW,UAAU,EAAE,KAAK;AAAA,EAC3C;AAEA,QAAM,oBAAoB,cAAc,UAAU,cAAc;AAChE,QAAM,YAAY,MAAM,IAAI,CAAC,SAAS;AACpC,WAAO,GAAG,MAAM;AAAA,EAClB,CAAC;AAID,MAAI,cAAc;AAChB,eAAW,WAAW,OAAO;AAC3B,YAAM,SAAS,qBAAqB,QAAQ,WAAW,OAAO;AAC9D,YAAM,MAAM,OAAO,uBAAuB;AAE1C,UAAI,EAAE,UAAU,QAAQ,WAAW,QAAQ,IAAI;AAG7C,kBAAU,KAAK,cAAc,MAAM,SAAS;AAC5C;AAAA,MACF;AAEA,YAAM,gBAAgB,GAAG,MAAM,QAAQ,QAAQ,SAAS,UAAU,UAAU,EAAE;AAC9E,YAAM,QAAQ,SAAS,CAAC,QAAQ,OAAO,IAAI,CAAC,SAAS,MAAM;AAC3D,UAAI,mBAAmB;AACrB,cAAM,QAAQ;AAAA,MAChB;AACA,YAAM,CAAC,UAAU,MAAM,IAAI;AAC3B,YAAM,eAAe,KAAK,MAAM,MAAM,GAAG;AAEzC,eAAS,KAAK,GAAG,KAAK,cAAc,MAAM;AACxC,cAAM,QAAQ,KAAK,MAAM;AACzB,YAAI,SAAS,KAAK;AAAG;AACrB,cAAM,UAAU,IAAI,MAAM,KAAK,CAAC,EAAE,KAAK,MAAS,EAAE,IAAI,CAAC,GAAG,QAAQ;AAChE,iBAAO,GAAG,MAAM,MAAM,MAAM,IAAI,WAAW;AAAA,QAC7C,CAAC;AACD,YAAI,kBAAkB,QAAQ,SAAS,IAAI,QAAQ,MAAM,CAAC,IAAI;AAC9D,YAAI,OAAO;AACT,gBAAM,CAAC,QAAQ,QAAQ,GAAG,IAAI,IAAI;AAClC,4BAAkB,CAAC,QAAQ,GAAG,MAAM,MAAM;AAAA,QAC5C;AAEA,cAAM,qBAAqB,gBAAgB,gBAAgB,SAAS,CAAC;AACrE,kBAAU;AAAA,UACR,GAAG,gBAAgB,KAAK,GAAG,KACzB,kBAAkB,qBAAqB,KAAK;AAAA,QAEhD;AAAA,MACF;AAAA,IACF;AAAA,EACF;AAEA,QAAM,kBAAkB,UAAU,IAAI,CAAC,MAAM;AAG3C,UAAM,cACJ,MAAM,aACN,MAAM,cACN,EAAE,WAAW,UAAU,KACvB,EAAE,WAAW,WAAW;AAC1B,UAAM,UAAU,eAAe,OAAO,uBAAuB,KAAK;AAClE,WAAO,QAAQ,UAAU;AAAA,EAC3B,CAAC;AACD,QAAM,MAAM,GAAG,gBAAgB,KAAK,IAAI,MAAM;AAC9C,cAAY,KAAK,GAAG;AAEpB,MAAI,OAAO,+BAA+B,mBAAmB;AAE3D,UAAM,SAAS,UAAU,WAAW,MAAM;AAC1C,gBAAY;AAAA,MACV,gCAAgC,SAAS,SAAS;AAAA,oBACpC,iBAAiB,MAAM,UAAU,aAAa;AAAA,QAC1D,MAAM;AAAA,MACR;AAAA,SACG;AAAA;AAAA,IAEL;AAAA,EACF;AAEA,SAAO;AACT;",
+  "sourcesContent": ["import { simpleHash } from '@tamagui/helpers'\n\nimport { THEME_CLASSNAME_PREFIX } from '../constants/constants.js'\nimport { Variable, variableToString } from '../createVariable.js'\nimport type { CreateTamaguiProps, ThemeParsed } from '../types.js'\nimport { tokensValueToVariable } from './registerCSSVariable.js'\n\nexport function getThemeCSSRules({\n  config,\n  themeName,\n  theme,\n  names,\n}: {\n  config: CreateTamaguiProps\n  themeName: string\n  theme: ThemeParsed\n  names: string[]\n}) {\n  const cssRuleSets: string[] = []\n\n  // special case for SSR\n  const hasDarkLight = 'light' in config.themes && 'dark' in config.themes\n  const CNP = `.${THEME_CLASSNAME_PREFIX}`\n  let vars = ''\n\n  // themeToVariableToValueMap.set(theme, {})\n  // const varToValMap = themeToVariableToValueMap.get(theme)\n  for (const themeKey in theme) {\n    const variable = theme[themeKey] as Variable\n    let value: any = null\n    // if (varToValMap) {\n    //   varToValMap[variable.variable] = variable.val\n    // }\n    if (!tokensValueToVariable.has(variable.val)) {\n      value = variable.val\n    } else {\n      value = tokensValueToVariable.get(variable.val)!.variable\n    }\n    // Hash themeKey in case it has invalid chars too\n    vars += `--${simpleHash(themeKey, 40)}:${value};`\n  }\n\n  const isDarkOrLightBase = themeName === 'dark' || themeName === 'light'\n  const selectorsSet = new Set(\n    names.map((name) => {\n      return `${CNP}${name}`\n    })\n  )\n\n  // since we dont specify dark/light in classnames we have to do an awkward specificity war\n  // use config.maxDarkLightNesting to determine how deep you can nest until it breaks\n  if (hasDarkLight) {\n    for (const subName of names) {\n      const isDark = themeName === 'dark' || subName.startsWith('dark_')\n      const maxDepth = config.maxDarkLightNesting ?? 3\n\n      if (!(isDark || subName.startsWith('light_'))) {\n        // neither light nor dark subtheme, just generate one selector with :root:root which\n        // will override all :root light/dark selectors generated below\n        selectorsSet.add(`:root:root ${CNP}${subName}`)\n        continue\n      }\n\n      const childSelector = `${CNP}${subName.replace(isDark ? 'dark_' : 'light_', '')}`\n\n      const [altLightDark, altSubTheme] = [\n        isDark ? ['dark', 'light'] : ['light', 'dark'],\n        isDark ? ['dark', 'sub_theme'] : ['light', 'sub_theme'],\n      ]\n\n      for (const order of [altLightDark, altSubTheme]) {\n        if (isDarkOrLightBase) {\n          order.reverse()\n        }\n        const [stronger, weaker] = order\n        const numSelectors = Math.round(maxDepth * 1.5)\n\n        for (let depth = 0; depth < numSelectors; depth++) {\n          const isOdd = depth % 2 === 1\n\n          // wtf is this continue:\n          if (isOdd && depth < 3) {\n            continue\n          }\n\n          const parents = new Array(depth + 1).fill(0).map((_, psi) => {\n            return `${CNP}${psi % 2 === 0 ? stronger : weaker}`\n          })\n\n          let parentSelectors = parents.length > 1 ? parents.slice(1) : parents\n\n          if (isOdd) {\n            const [_first, second, ...rest] = parentSelectors\n            parentSelectors = [second, ...rest, second]\n          }\n\n          const lastParentSelector = parentSelectors[parentSelectors.length - 1]\n          const nextChildSelector =\n            childSelector === lastParentSelector ? '' : childSelector\n\n          // for light/dark/light:\n          selectorsSet.add(`${parentSelectors.join(' ')} ${nextChildSelector}`.trim())\n        }\n      }\n    }\n  }\n\n  const selectors = [...selectorsSet]\n\n  // only do our :root attach if it's not light/dark - not support sub themes on root saves a lot of effort/size\n  // this isBaseTheme logic could probably be done more efficiently above\n  const selectorsString = selectors\n    .map((x) => {\n      const rootSep = isBaseTheme(x) && config.themeClassNameOnRoot ? '' : ' '\n      return `:root${rootSep}${x}`\n    })\n    .join(', ')\n\n  const css = `${selectorsString} {${vars}}`\n  cssRuleSets.push(css)\n\n  if (config.shouldAddPrefersColorThemes) {\n    const bgString = variableToString(theme.background)\n    const fgString = variableToString(theme.color)\n    const bodyRules = `body{background:${bgString};color:${fgString};}`\n    const isDark = themeName.startsWith('dark')\n    const baseName = isDark ? 'dark' : 'light'\n    const lessSpecificSelectors = selectors\n      .map((x) => {\n        if (x == darkSelector || x === lightSelector) return `:root`\n        return x.replace(/^\\.t_(dark|light) /, '').trim()\n      })\n      .filter(Boolean)\n      .join(', ')\n    const themeRules = `${lessSpecificSelectors} {${vars}}`\n    const prefersMediaSelectors = `@media(prefers-color-scheme:${baseName}){\n  ${bodyRules}\n  ${themeRules}\n}`\n    cssRuleSets.push(prefersMediaSelectors)\n  }\n\n  return cssRuleSets\n}\n\nconst darkSelector = '.t_dark'\nconst lightSelector = '.t_light'\nconst isBaseTheme = (x: string) =>\n  x === darkSelector ||\n  x === lightSelector ||\n  x.startsWith('.t_dark ') ||\n  x.startsWith('.t_light ')\n"],
+  "mappings": "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",
   "names": []
 }

package/dist/esm/helpers/themes.js

@@ -25,21 +25,19 @@ function proxyThemeToParents(themeName, theme, themes) {
     cur.push(part);
     return cur.join("_");
   });
-  const len = parents.length;
+  const numParents = parents.length;
   return new Proxy(theme, {
     get(target, key) {
-      if (key === GetThemeUnwrapped) {
+      if (key === GetThemeUnwrapped)
         return theme;
-      }
-      if (!len || Reflect.has(target, key)) {
-        return Reflect.get(target, key);
-      }
-      for (let i = len - 1; i >= 0; i--) {
-        const parent = themes[parents[i]];
-        if (!parent)
-          continue;
-        if (Reflect.has(parent, key)) {
-          return Reflect.get(parent, key);
+      if (numParents && !Reflect.has(target, key)) {
+        for (let i = numParents - 1; i >= 0; i--) {
+          const parent = themes[parents[i]];
+          if (!parent)
+            continue;
+          if (Reflect.has(parent, key)) {
+            return Reflect.get(parent, key);
+          }
         }
       }
       return Reflect.get(target, key);

package/dist/esm/helpers/themes.js.map

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../../src/helpers/themes.ts"],
-  "sourcesContent": ["import { createVariable, isVariable } from '../createVariable.js'\nimport { GetThemeUnwrapped } from '../hooks/getThemeUnwrapped.js'\nimport { CreateTamaguiProps } from '../types.js'\n\n// mutates, freeze after\n// shared by createTamagui so extracted here\nexport function ensureThemeVariable(theme: any, key: string) {\n  const val = theme[key]\n  const themeKey = key\n  if (!isVariable(val)) {\n    theme[key] = createVariable({\n      key: themeKey,\n      name: themeKey,\n      val,\n    })\n  } else {\n    if (val.name !== themeKey) {\n      // rename to theme name\n      theme[key] = createVariable({\n        key: val.name,\n        name: themeKey,\n        val: val.val,\n      })\n    }\n  }\n}\n\nexport function proxyThemeToParents(\n  themeName: string,\n  theme: any,\n  themes: CreateTamaguiProps['themes']\n) {\n  // we could test if this is better as just a straight object spread or fancier proxy\n  const cur: string[] = []\n  // if theme is dark_blue_alt1_Button\n  // this will be the parent names in order: ['dark', 'dark_blue', 'dark_blue_alt1\"]\n  const parents = themeName\n    .split('_')\n    .slice(0, -1)\n    .map((part) => {\n      cur.push(part)\n      return cur.join('_')\n    })\n\n  const len = parents.length\n\n  // proxy fallback values to parent theme values\n  return new Proxy(theme, {\n    get(target, key) {\n      if (key === GetThemeUnwrapped) {\n        return theme\n      }\n      if (!len || Reflect.has(target, key)) {\n        return Reflect.get(target, key)\n      }\n      // check parents\n      for (let i = len - 1; i >= 0; i--) {\n        const parent = themes[parents[i]]\n        if (!parent) continue\n        if (Reflect.has(parent, key)) {\n          return Reflect.get(parent, key)\n        }\n      }\n      return Reflect.get(target, key)\n    },\n  })\n}\n"],
-  "mappings": "AAAA,SAAS,gBAAgB,kBAAkB;AAC3C,SAAS,yBAAyB;AAK3B,SAAS,oBAAoB,OAAY,KAAa;AAC3D,QAAM,MAAM,MAAM,GAAG;AACrB,QAAM,WAAW;AACjB,MAAI,CAAC,WAAW,GAAG,GAAG;AACpB,UAAM,GAAG,IAAI,eAAe;AAAA,MAC1B,KAAK;AAAA,MACL,MAAM;AAAA,MACN;AAAA,IACF,CAAC;AAAA,EACH,OAAO;AACL,QAAI,IAAI,SAAS,UAAU;AAEzB,YAAM,GAAG,IAAI,eAAe;AAAA,QAC1B,KAAK,IAAI;AAAA,QACT,MAAM;AAAA,QACN,KAAK,IAAI;AAAA,MACX,CAAC;AAAA,IACH;AAAA,EACF;AACF;AAEO,SAAS,oBACd,WACA,OACA,QACA;AAEA,QAAM,MAAgB,CAAC;AAGvB,QAAM,UAAU,UACb,MAAM,GAAG,EACT,MAAM,GAAG,EAAE,EACX,IAAI,CAAC,SAAS;AACb,QAAI,KAAK,IAAI;AACb,WAAO,IAAI,KAAK,GAAG;AAAA,EACrB,CAAC;AAEH,QAAM,MAAM,QAAQ;AAGpB,SAAO,IAAI,MAAM,OAAO;AAAA,IACtB,IAAI,QAAQ,KAAK;AACf,UAAI,QAAQ,mBAAmB;AAC7B,eAAO;AAAA,MACT;AACA,UAAI,CAAC,OAAO,QAAQ,IAAI,QAAQ,GAAG,GAAG;AACpC,eAAO,QAAQ,IAAI,QAAQ,GAAG;AAAA,MAChC;AAEA,eAAS,IAAI,MAAM,GAAG,KAAK,GAAG,KAAK;AACjC,cAAM,SAAS,OAAO,QAAQ,CAAC,CAAC;AAChC,YAAI,CAAC;AAAQ;AACb,YAAI,QAAQ,IAAI,QAAQ,GAAG,GAAG;AAC5B,iBAAO,QAAQ,IAAI,QAAQ,GAAG;AAAA,QAChC;AAAA,MACF;AACA,aAAO,QAAQ,IAAI,QAAQ,GAAG;AAAA,IAChC;AAAA,EACF,CAAC;AACH;",
+  "sourcesContent": ["import { createVariable, isVariable } from '../createVariable.js'\nimport { GetThemeUnwrapped } from '../hooks/getThemeUnwrapped.js'\nimport { CreateTamaguiProps } from '../types.js'\n\n// mutates, freeze after\n// shared by createTamagui so extracted here\nexport function ensureThemeVariable(theme: any, key: string) {\n  const val = theme[key]\n  const themeKey = key\n  if (!isVariable(val)) {\n    theme[key] = createVariable({\n      key: themeKey,\n      name: themeKey,\n      val,\n    })\n  } else {\n    if (val.name !== themeKey) {\n      // rename to theme name\n      theme[key] = createVariable({\n        key: val.name,\n        name: themeKey,\n        val: val.val,\n      })\n    }\n  }\n}\n\nexport function proxyThemeToParents(\n  themeName: string,\n  theme: any,\n  themes: CreateTamaguiProps['themes']\n) {\n  // we could test if this is better as just a straight object spread or fancier proxy\n  const cur: string[] = []\n  // if theme is dark_blue_alt1_Button\n  // this will be the parent names in order: ['dark', 'dark_blue', 'dark_blue_alt1\"]\n  const parents = themeName\n    .split('_')\n    .slice(0, -1)\n    .map((part) => {\n      cur.push(part)\n      return cur.join('_')\n    })\n\n  const numParents = parents.length\n\n  // proxy fallback values to parent theme values\n  return new Proxy(theme, {\n    get(target, key) {\n      if (key === GetThemeUnwrapped) return theme\n      if (numParents && !Reflect.has(target, key)) {\n        // check parents\n        for (let i = numParents - 1; i >= 0; i--) {\n          const parent = themes[parents[i]]\n          if (!parent) continue\n          if (Reflect.has(parent, key)) {\n            return Reflect.get(parent, key)\n          }\n        }\n      }\n      return Reflect.get(target, key)\n    },\n  })\n}\n"],
+  "mappings": "AAAA,SAAS,gBAAgB,kBAAkB;AAC3C,SAAS,yBAAyB;AAK3B,SAAS,oBAAoB,OAAY,KAAa;AAC3D,QAAM,MAAM,MAAM,GAAG;AACrB,QAAM,WAAW;AACjB,MAAI,CAAC,WAAW,GAAG,GAAG;AACpB,UAAM,GAAG,IAAI,eAAe;AAAA,MAC1B,KAAK;AAAA,MACL,MAAM;AAAA,MACN;AAAA,IACF,CAAC;AAAA,EACH,OAAO;AACL,QAAI,IAAI,SAAS,UAAU;AAEzB,YAAM,GAAG,IAAI,eAAe;AAAA,QAC1B,KAAK,IAAI;AAAA,QACT,MAAM;AAAA,QACN,KAAK,IAAI;AAAA,MACX,CAAC;AAAA,IACH;AAAA,EACF;AACF;AAEO,SAAS,oBACd,WACA,OACA,QACA;AAEA,QAAM,MAAgB,CAAC;AAGvB,QAAM,UAAU,UACb,MAAM,GAAG,EACT,MAAM,GAAG,EAAE,EACX,IAAI,CAAC,SAAS;AACb,QAAI,KAAK,IAAI;AACb,WAAO,IAAI,KAAK,GAAG;AAAA,EACrB,CAAC;AAEH,QAAM,aAAa,QAAQ;AAG3B,SAAO,IAAI,MAAM,OAAO;AAAA,IACtB,IAAI,QAAQ,KAAK;AACf,UAAI,QAAQ;AAAmB,eAAO;AACtC,UAAI,cAAc,CAAC,QAAQ,IAAI,QAAQ,GAAG,GAAG;AAE3C,iBAAS,IAAI,aAAa,GAAG,KAAK,GAAG,KAAK;AACxC,gBAAM,SAAS,OAAO,QAAQ,CAAC,CAAC;AAChC,cAAI,CAAC;AAAQ;AACb,cAAI,QAAQ,IAAI,QAAQ,GAAG,GAAG;AAC5B,mBAAO,QAAQ,IAAI,QAAQ,GAAG;AAAA,UAChC;AAAA,QACF;AAAA,MACF;AACA,aAAO,QAAQ,IAAI,QAAQ,GAAG;AAAA,IAChC;AAAA,EACF,CAAC;AACH;",
   "names": []
 }

package/dist/esm/helpers/themes.mjs

@@ -25,21 +25,19 @@ function proxyThemeToParents(themeName, theme, themes) {
     cur.push(part);
     return cur.join("_");
   });
-  const len = parents.length;
+  const numParents = parents.length;
   return new Proxy(theme, {
     get(target, key) {
-      if (key === GetThemeUnwrapped) {
+      if (key === GetThemeUnwrapped)
         return theme;
-      }
-      if (!len || Reflect.has(target, key)) {
-        return Reflect.get(target, key);
-      }
-      for (let i = len - 1; i >= 0; i--) {
-        const parent = themes[parents[i]];
-        if (!parent)
-          continue;
-        if (Reflect.has(parent, key)) {
-          return Reflect.get(parent, key);
+      if (numParents && !Reflect.has(target, key)) {
+        for (let i = numParents - 1; i >= 0; i--) {
+          const parent = themes[parents[i]];
+          if (!parent)
+            continue;
+          if (Reflect.has(parent, key)) {
+            return Reflect.get(parent, key);
+          }
         }
       }
       return Reflect.get(target, key);

package/dist/esm/helpers/themes.mjs.map

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../../src/helpers/themes.ts"],
-  "sourcesContent": ["import { createVariable, isVariable } from '../createVariable.js'\nimport { GetThemeUnwrapped } from '../hooks/getThemeUnwrapped.js'\nimport { CreateTamaguiProps } from '../types.js'\n\n// mutates, freeze after\n// shared by createTamagui so extracted here\nexport function ensureThemeVariable(theme: any, key: string) {\n  const val = theme[key]\n  const themeKey = key\n  if (!isVariable(val)) {\n    theme[key] = createVariable({\n      key: themeKey,\n      name: themeKey,\n      val,\n    })\n  } else {\n    if (val.name !== themeKey) {\n      // rename to theme name\n      theme[key] = createVariable({\n        key: val.name,\n        name: themeKey,\n        val: val.val,\n      })\n    }\n  }\n}\n\nexport function proxyThemeToParents(\n  themeName: string,\n  theme: any,\n  themes: CreateTamaguiProps['themes']\n) {\n  // we could test if this is better as just a straight object spread or fancier proxy\n  const cur: string[] = []\n  // if theme is dark_blue_alt1_Button\n  // this will be the parent names in order: ['dark', 'dark_blue', 'dark_blue_alt1\"]\n  const parents = themeName\n    .split('_')\n    .slice(0, -1)\n    .map((part) => {\n      cur.push(part)\n      return cur.join('_')\n    })\n\n  const len = parents.length\n\n  // proxy fallback values to parent theme values\n  return new Proxy(theme, {\n    get(target, key) {\n      if (key === GetThemeUnwrapped) {\n        return theme\n      }\n      if (!len || Reflect.has(target, key)) {\n        return Reflect.get(target, key)\n      }\n      // check parents\n      for (let i = len - 1; i >= 0; i--) {\n        const parent = themes[parents[i]]\n        if (!parent) continue\n        if (Reflect.has(parent, key)) {\n          return Reflect.get(parent, key)\n        }\n      }\n      return Reflect.get(target, key)\n    },\n  })\n}\n"],
-  "mappings": "AAAA,SAAS,gBAAgB,kBAAkB;AAC3C,SAAS,yBAAyB;AAK3B,SAAS,oBAAoB,OAAY,KAAa;AAC3D,QAAM,MAAM,MAAM,GAAG;AACrB,QAAM,WAAW;AACjB,MAAI,CAAC,WAAW,GAAG,GAAG;AACpB,UAAM,GAAG,IAAI,eAAe;AAAA,MAC1B,KAAK;AAAA,MACL,MAAM;AAAA,MACN;AAAA,IACF,CAAC;AAAA,EACH,OAAO;AACL,QAAI,IAAI,SAAS,UAAU;AAEzB,YAAM,GAAG,IAAI,eAAe;AAAA,QAC1B,KAAK,IAAI;AAAA,QACT,MAAM;AAAA,QACN,KAAK,IAAI;AAAA,MACX,CAAC;AAAA,IACH;AAAA,EACF;AACF;AAEO,SAAS,oBACd,WACA,OACA,QACA;AAEA,QAAM,MAAgB,CAAC;AAGvB,QAAM,UAAU,UACb,MAAM,GAAG,EACT,MAAM,GAAG,EAAE,EACX,IAAI,CAAC,SAAS;AACb,QAAI,KAAK,IAAI;AACb,WAAO,IAAI,KAAK,GAAG;AAAA,EACrB,CAAC;AAEH,QAAM,MAAM,QAAQ;AAGpB,SAAO,IAAI,MAAM,OAAO;AAAA,IACtB,IAAI,QAAQ,KAAK;AACf,UAAI,QAAQ,mBAAmB;AAC7B,eAAO;AAAA,MACT;AACA,UAAI,CAAC,OAAO,QAAQ,IAAI,QAAQ,GAAG,GAAG;AACpC,eAAO,QAAQ,IAAI,QAAQ,GAAG;AAAA,MAChC;AAEA,eAAS,IAAI,MAAM,GAAG,KAAK,GAAG,KAAK;AACjC,cAAM,SAAS,OAAO,QAAQ,CAAC,CAAC;AAChC,YAAI,CAAC;AAAQ;AACb,YAAI,QAAQ,IAAI,QAAQ,GAAG,GAAG;AAC5B,iBAAO,QAAQ,IAAI,QAAQ,GAAG;AAAA,QAChC;AAAA,MACF;AACA,aAAO,QAAQ,IAAI,QAAQ,GAAG;AAAA,IAChC;AAAA,EACF,CAAC;AACH;",
+  "sourcesContent": ["import { createVariable, isVariable } from '../createVariable.js'\nimport { GetThemeUnwrapped } from '../hooks/getThemeUnwrapped.js'\nimport { CreateTamaguiProps } from '../types.js'\n\n// mutates, freeze after\n// shared by createTamagui so extracted here\nexport function ensureThemeVariable(theme: any, key: string) {\n  const val = theme[key]\n  const themeKey = key\n  if (!isVariable(val)) {\n    theme[key] = createVariable({\n      key: themeKey,\n      name: themeKey,\n      val,\n    })\n  } else {\n    if (val.name !== themeKey) {\n      // rename to theme name\n      theme[key] = createVariable({\n        key: val.name,\n        name: themeKey,\n        val: val.val,\n      })\n    }\n  }\n}\n\nexport function proxyThemeToParents(\n  themeName: string,\n  theme: any,\n  themes: CreateTamaguiProps['themes']\n) {\n  // we could test if this is better as just a straight object spread or fancier proxy\n  const cur: string[] = []\n  // if theme is dark_blue_alt1_Button\n  // this will be the parent names in order: ['dark', 'dark_blue', 'dark_blue_alt1\"]\n  const parents = themeName\n    .split('_')\n    .slice(0, -1)\n    .map((part) => {\n      cur.push(part)\n      return cur.join('_')\n    })\n\n  const numParents = parents.length\n\n  // proxy fallback values to parent theme values\n  return new Proxy(theme, {\n    get(target, key) {\n      if (key === GetThemeUnwrapped) return theme\n      if (numParents && !Reflect.has(target, key)) {\n        // check parents\n        for (let i = numParents - 1; i >= 0; i--) {\n          const parent = themes[parents[i]]\n          if (!parent) continue\n          if (Reflect.has(parent, key)) {\n            return Reflect.get(parent, key)\n          }\n        }\n      }\n      return Reflect.get(target, key)\n    },\n  })\n}\n"],
+  "mappings": "AAAA,SAAS,gBAAgB,kBAAkB;AAC3C,SAAS,yBAAyB;AAK3B,SAAS,oBAAoB,OAAY,KAAa;AAC3D,QAAM,MAAM,MAAM,GAAG;AACrB,QAAM,WAAW;AACjB,MAAI,CAAC,WAAW,GAAG,GAAG;AACpB,UAAM,GAAG,IAAI,eAAe;AAAA,MAC1B,KAAK;AAAA,MACL,MAAM;AAAA,MACN;AAAA,IACF,CAAC;AAAA,EACH,OAAO;AACL,QAAI,IAAI,SAAS,UAAU;AAEzB,YAAM,GAAG,IAAI,eAAe;AAAA,QAC1B,KAAK,IAAI;AAAA,QACT,MAAM;AAAA,QACN,KAAK,IAAI;AAAA,MACX,CAAC;AAAA,IACH;AAAA,EACF;AACF;AAEO,SAAS,oBACd,WACA,OACA,QACA;AAEA,QAAM,MAAgB,CAAC;AAGvB,QAAM,UAAU,UACb,MAAM,GAAG,EACT,MAAM,GAAG,EAAE,EACX,IAAI,CAAC,SAAS;AACb,QAAI,KAAK,IAAI;AACb,WAAO,IAAI,KAAK,GAAG;AAAA,EACrB,CAAC;AAEH,QAAM,aAAa,QAAQ;AAG3B,SAAO,IAAI,MAAM,OAAO;AAAA,IACtB,IAAI,QAAQ,KAAK;AACf,UAAI,QAAQ;AAAmB,eAAO;AACtC,UAAI,cAAc,CAAC,QAAQ,IAAI,QAAQ,GAAG,GAAG;AAE3C,iBAAS,IAAI,aAAa,GAAG,KAAK,GAAG,KAAK;AACxC,gBAAM,SAAS,OAAO,QAAQ,CAAC,CAAC;AAChC,cAAI,CAAC;AAAQ;AACb,cAAI,QAAQ,IAAI,QAAQ,GAAG,GAAG;AAC5B,mBAAO,QAAQ,IAAI,QAAQ,GAAG;AAAA,UAChC;AAAA,QACF;AAAA,MACF;AACA,aAAO,QAAQ,IAAI,QAAQ,GAAG;AAAA,IAChC;AAAA,EACF,CAAC;AACH;",
   "names": []
 }

package/dist/esm/index.js

@@ -30,6 +30,7 @@ export * from "./helpers/matchMedia.js";
 export * from "./helpers/proxyThemeVariables.js";
 export * from "./helpers/themeable.js";
 export * from "./helpers/withStaticProperties.js";
+export * from "./helpers/normalizeColor.js";
 export * from "./contexts/ButtonNestingContext.js";
 export * from "./hooks/useId.js";
 export * from "./hooks/useIsTouchDevice.js";

package/dist/esm/index.js.map

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../src/index.ts"],
-  "sourcesContent": ["export * from './Tamagui.js'\nexport * from './createComponent.js'\nexport * from './createShorthands.js'\nexport * from './createTheme.js'\nexport * from './createTamagui.js'\nexport * from './createFont.js'\nexport * from './createTokens.js'\nexport * from './createVariable.js'\nexport * from './createVariables.js'\nexport * from './insertFont.js'\nexport * from './addTheme.js'\nexport * from './updateTheme.js'\nexport * from './styled.js'\nexport * from './types.js'\nexport * from './setupReactNative.js'\n\nexport { getConfig, getThemes, getTokens, onConfiguredOnce } from './config.js'\n\nexport * from './constants/constants.js'\n\nexport * from './helpers/useShallowSetState.js'\nexport * from './helpers/getVariantExtras.js'\nexport * from './helpers/getAnimationDriver.js'\nexport * from './helpers/getExpandedShorthands.js'\nexport * from './helpers/getSplitStyles.js'\nexport * from './helpers/getStylesAtomic.js'\nexport * from './helpers/pseudoDescriptors.js'\nexport * from './helpers/mergeProps.js'\nexport * from './helpers/expandStyles.js'\nexport * from './helpers/isTamaguiElement.js'\nexport * from './helpers/isTamaguiComponent.js'\nexport * from './helpers/matchMedia.js'\nexport * from './helpers/proxyThemeVariables.js'\nexport * from './helpers/themeable.js'\nexport * from './helpers/withStaticProperties.js'\n\nexport * from './contexts/ButtonNestingContext.js'\n\nexport * from './hooks/useId.js'\nexport * from './hooks/useIsTouchDevice.js'\n\nexport {\n  configureMedia,\n  getMedia,\n  mediaState,\n  useMedia,\n  useMediaPropsActive,\n  mediaObjectToString,\n  mediaQueryConfig,\n} from './hooks/useMedia.js'\nexport * from './hooks/useTheme.js'\nexport * from './hooks/useThemeName.js'\nexport * from './hooks/useSafeRef.js'\nexport * from './hooks/useStyle.js'\n\nexport * from './views/Slot.js'\nexport * from './views/Stack.js'\nexport * from './views/Text.js'\nexport * from './contexts/TextAncestorContext.js'\nexport * from './views/Theme.js'\nexport * from './views/ThemeProvider.js'\nexport * from './views/FontLanguage.js'\nexport * from './views/TamaguiProvider.js'\n\nexport * from '@tamagui/use-force-update'\nexport * from '@tamagui/use-did-finish-ssr'\nexport * from '@tamagui/use-event'\nexport * from '@tamagui/compose-refs'\nexport * from '@tamagui/helpers'\nexport * from '@tamagui/constants'\n\nexport * from './setupHooks.js'\n"],
-  "mappings": "AAAA,cAAc;AACd,cAAc;AACd,cAAc;AACd,cAAc;AACd,cAAc;AACd,cAAc;AACd,cAAc;AACd,cAAc;AACd,cAAc;AACd,cAAc;AACd,cAAc;AACd,cAAc;AACd,cAAc;AACd,cAAc;AACd,cAAc;AAEd,SAAS,WAAW,WAAW,WAAW,wBAAwB;AAElE,cAAc;AAEd,cAAc;AACd,cAAc;AACd,cAAc;AACd,cAAc;AACd,cAAc;AACd,cAAc;AACd,cAAc;AACd,cAAc;AACd,cAAc;AACd,cAAc;AACd,cAAc;AACd,cAAc;AACd,cAAc;AACd,cAAc;AACd,cAAc;AAEd,cAAc;AAEd,cAAc;AACd,cAAc;AAEd;AAAA,EACE;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,OACK;AACP,cAAc;AACd,cAAc;AACd,cAAc;AACd,cAAc;AAEd,cAAc;AACd,cAAc;AACd,cAAc;AACd,cAAc;AACd,cAAc;AACd,cAAc;AACd,cAAc;AACd,cAAc;AAEd,cAAc;AACd,cAAc;AACd,cAAc;AACd,cAAc;AACd,cAAc;AACd,cAAc;AAEd,cAAc;",
+  "sourcesContent": ["export * from './Tamagui.js'\nexport * from './createComponent.js'\nexport * from './createShorthands.js'\nexport * from './createTheme.js'\nexport * from './createTamagui.js'\nexport * from './createFont.js'\nexport * from './createTokens.js'\nexport * from './createVariable.js'\nexport * from './createVariables.js'\nexport * from './insertFont.js'\nexport * from './addTheme.js'\nexport * from './updateTheme.js'\nexport * from './styled.js'\nexport * from './types.js'\nexport * from './setupReactNative.js'\n\nexport { getConfig, getThemes, getTokens, onConfiguredOnce } from './config.js'\n\nexport * from './constants/constants.js'\n\nexport * from './helpers/useShallowSetState.js'\nexport * from './helpers/getVariantExtras.js'\nexport * from './helpers/getAnimationDriver.js'\nexport * from './helpers/getExpandedShorthands.js'\nexport * from './helpers/getSplitStyles.js'\nexport * from './helpers/getStylesAtomic.js'\nexport * from './helpers/pseudoDescriptors.js'\nexport * from './helpers/mergeProps.js'\nexport * from './helpers/expandStyles.js'\nexport * from './helpers/isTamaguiElement.js'\nexport * from './helpers/isTamaguiComponent.js'\nexport * from './helpers/matchMedia.js'\nexport * from './helpers/proxyThemeVariables.js'\nexport * from './helpers/themeable.js'\nexport * from './helpers/withStaticProperties.js'\nexport * from './helpers/normalizeColor.js'\n\nexport * from './contexts/ButtonNestingContext.js'\n\nexport * from './hooks/useId.js'\nexport * from './hooks/useIsTouchDevice.js'\n\nexport {\n  configureMedia,\n  getMedia,\n  mediaState,\n  useMedia,\n  useMediaPropsActive,\n  mediaObjectToString,\n  mediaQueryConfig,\n} from './hooks/useMedia.js'\nexport * from './hooks/useTheme.js'\nexport * from './hooks/useThemeName.js'\nexport * from './hooks/useSafeRef.js'\nexport * from './hooks/useStyle.js'\n\nexport * from './views/Slot.js'\nexport * from './views/Stack.js'\nexport * from './views/Text.js'\nexport * from './contexts/TextAncestorContext.js'\nexport * from './views/Theme.js'\nexport * from './views/ThemeProvider.js'\nexport * from './views/FontLanguage.js'\nexport * from './views/TamaguiProvider.js'\n\nexport * from '@tamagui/use-force-update'\nexport * from '@tamagui/use-did-finish-ssr'\nexport * from '@tamagui/use-event'\nexport * from '@tamagui/compose-refs'\nexport * from '@tamagui/helpers'\nexport * from '@tamagui/constants'\n\nexport * from './setupHooks.js'\n"],
+  "mappings": "AAAA,cAAc;AACd,cAAc;AACd,cAAc;AACd,cAAc;AACd,cAAc;AACd,cAAc;AACd,cAAc;AACd,cAAc;AACd,cAAc;AACd,cAAc;AACd,cAAc;AACd,cAAc;AACd,cAAc;AACd,cAAc;AACd,cAAc;AAEd,SAAS,WAAW,WAAW,WAAW,wBAAwB;AAElE,cAAc;AAEd,cAAc;AACd,cAAc;AACd,cAAc;AACd,cAAc;AACd,cAAc;AACd,cAAc;AACd,cAAc;AACd,cAAc;AACd,cAAc;AACd,cAAc;AACd,cAAc;AACd,cAAc;AACd,cAAc;AACd,cAAc;AACd,cAAc;AACd,cAAc;AAEd,cAAc;AAEd,cAAc;AACd,cAAc;AAEd;AAAA,EACE;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,OACK;AACP,cAAc;AACd,cAAc;AACd,cAAc;AACd,cAAc;AAEd,cAAc;AACd,cAAc;AACd,cAAc;AACd,cAAc;AACd,cAAc;AACd,cAAc;AACd,cAAc;AACd,cAAc;AAEd,cAAc;AACd,cAAc;AACd,cAAc;AACd,cAAc;AACd,cAAc;AACd,cAAc;AAEd,cAAc;",
   "names": []
 }

package/dist/esm/index.mjs

@@ -30,6 +30,7 @@ export * from "./helpers/matchMedia.js";
 export * from "./helpers/proxyThemeVariables.js";
 export * from "./helpers/themeable.js";
 export * from "./helpers/withStaticProperties.js";
+export * from "./helpers/normalizeColor.js";
 export * from "./contexts/ButtonNestingContext.js";
 export * from "./hooks/useId.js";
 export * from "./hooks/useIsTouchDevice.js";

package/dist/esm/index.mjs.map

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../src/index.ts"],
-  "sourcesContent": ["export * from './Tamagui.js'\nexport * from './createComponent.js'\nexport * from './createShorthands.js'\nexport * from './createTheme.js'\nexport * from './createTamagui.js'\nexport * from './createFont.js'\nexport * from './createTokens.js'\nexport * from './createVariable.js'\nexport * from './createVariables.js'\nexport * from './insertFont.js'\nexport * from './addTheme.js'\nexport * from './updateTheme.js'\nexport * from './styled.js'\nexport * from './types.js'\nexport * from './setupReactNative.js'\n\nexport { getConfig, getThemes, getTokens, onConfiguredOnce } from './config.js'\n\nexport * from './constants/constants.js'\n\nexport * from './helpers/useShallowSetState.js'\nexport * from './helpers/getVariantExtras.js'\nexport * from './helpers/getAnimationDriver.js'\nexport * from './helpers/getExpandedShorthands.js'\nexport * from './helpers/getSplitStyles.js'\nexport * from './helpers/getStylesAtomic.js'\nexport * from './helpers/pseudoDescriptors.js'\nexport * from './helpers/mergeProps.js'\nexport * from './helpers/expandStyles.js'\nexport * from './helpers/isTamaguiElement.js'\nexport * from './helpers/isTamaguiComponent.js'\nexport * from './helpers/matchMedia.js'\nexport * from './helpers/proxyThemeVariables.js'\nexport * from './helpers/themeable.js'\nexport * from './helpers/withStaticProperties.js'\n\nexport * from './contexts/ButtonNestingContext.js'\n\nexport * from './hooks/useId.js'\nexport * from './hooks/useIsTouchDevice.js'\n\nexport {\n  configureMedia,\n  getMedia,\n  mediaState,\n  useMedia,\n  useMediaPropsActive,\n  mediaObjectToString,\n  mediaQueryConfig,\n} from './hooks/useMedia.js'\nexport * from './hooks/useTheme.js'\nexport * from './hooks/useThemeName.js'\nexport * from './hooks/useSafeRef.js'\nexport * from './hooks/useStyle.js'\n\nexport * from './views/Slot.js'\nexport * from './views/Stack.js'\nexport * from './views/Text.js'\nexport * from './contexts/TextAncestorContext.js'\nexport * from './views/Theme.js'\nexport * from './views/ThemeProvider.js'\nexport * from './views/FontLanguage.js'\nexport * from './views/TamaguiProvider.js'\n\nexport * from '@tamagui/use-force-update'\nexport * from '@tamagui/use-did-finish-ssr'\nexport * from '@tamagui/use-event'\nexport * from '@tamagui/compose-refs'\nexport * from '@tamagui/helpers'\nexport * from '@tamagui/constants'\n\nexport * from './setupHooks.js'\n"],
-  "mappings": "AAAA,cAAc;AACd,cAAc;AACd,cAAc;AACd,cAAc;AACd,cAAc;AACd,cAAc;AACd,cAAc;AACd,cAAc;AACd,cAAc;AACd,cAAc;AACd,cAAc;AACd,cAAc;AACd,cAAc;AACd,cAAc;AACd,cAAc;AAEd,SAAS,WAAW,WAAW,WAAW,wBAAwB;AAElE,cAAc;AAEd,cAAc;AACd,cAAc;AACd,cAAc;AACd,cAAc;AACd,cAAc;AACd,cAAc;AACd,cAAc;AACd,cAAc;AACd,cAAc;AACd,cAAc;AACd,cAAc;AACd,cAAc;AACd,cAAc;AACd,cAAc;AACd,cAAc;AAEd,cAAc;AAEd,cAAc;AACd,cAAc;AAEd;AAAA,EACE;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,OACK;AACP,cAAc;AACd,cAAc;AACd,cAAc;AACd,cAAc;AAEd,cAAc;AACd,cAAc;AACd,cAAc;AACd,cAAc;AACd,cAAc;AACd,cAAc;AACd,cAAc;AACd,cAAc;AAEd,cAAc;AACd,cAAc;AACd,cAAc;AACd,cAAc;AACd,cAAc;AACd,cAAc;AAEd,cAAc;",
+  "sourcesContent": ["export * from './Tamagui.js'\nexport * from './createComponent.js'\nexport * from './createShorthands.js'\nexport * from './createTheme.js'\nexport * from './createTamagui.js'\nexport * from './createFont.js'\nexport * from './createTokens.js'\nexport * from './createVariable.js'\nexport * from './createVariables.js'\nexport * from './insertFont.js'\nexport * from './addTheme.js'\nexport * from './updateTheme.js'\nexport * from './styled.js'\nexport * from './types.js'\nexport * from './setupReactNative.js'\n\nexport { getConfig, getThemes, getTokens, onConfiguredOnce } from './config.js'\n\nexport * from './constants/constants.js'\n\nexport * from './helpers/useShallowSetState.js'\nexport * from './helpers/getVariantExtras.js'\nexport * from './helpers/getAnimationDriver.js'\nexport * from './helpers/getExpandedShorthands.js'\nexport * from './helpers/getSplitStyles.js'\nexport * from './helpers/getStylesAtomic.js'\nexport * from './helpers/pseudoDescriptors.js'\nexport * from './helpers/mergeProps.js'\nexport * from './helpers/expandStyles.js'\nexport * from './helpers/isTamaguiElement.js'\nexport * from './helpers/isTamaguiComponent.js'\nexport * from './helpers/matchMedia.js'\nexport * from './helpers/proxyThemeVariables.js'\nexport * from './helpers/themeable.js'\nexport * from './helpers/withStaticProperties.js'\nexport * from './helpers/normalizeColor.js'\n\nexport * from './contexts/ButtonNestingContext.js'\n\nexport * from './hooks/useId.js'\nexport * from './hooks/useIsTouchDevice.js'\n\nexport {\n  configureMedia,\n  getMedia,\n  mediaState,\n  useMedia,\n  useMediaPropsActive,\n  mediaObjectToString,\n  mediaQueryConfig,\n} from './hooks/useMedia.js'\nexport * from './hooks/useTheme.js'\nexport * from './hooks/useThemeName.js'\nexport * from './hooks/useSafeRef.js'\nexport * from './hooks/useStyle.js'\n\nexport * from './views/Slot.js'\nexport * from './views/Stack.js'\nexport * from './views/Text.js'\nexport * from './contexts/TextAncestorContext.js'\nexport * from './views/Theme.js'\nexport * from './views/ThemeProvider.js'\nexport * from './views/FontLanguage.js'\nexport * from './views/TamaguiProvider.js'\n\nexport * from '@tamagui/use-force-update'\nexport * from '@tamagui/use-did-finish-ssr'\nexport * from '@tamagui/use-event'\nexport * from '@tamagui/compose-refs'\nexport * from '@tamagui/helpers'\nexport * from '@tamagui/constants'\n\nexport * from './setupHooks.js'\n"],
+  "mappings": "AAAA,cAAc;AACd,cAAc;AACd,cAAc;AACd,cAAc;AACd,cAAc;AACd,cAAc;AACd,cAAc;AACd,cAAc;AACd,cAAc;AACd,cAAc;AACd,cAAc;AACd,cAAc;AACd,cAAc;AACd,cAAc;AACd,cAAc;AAEd,SAAS,WAAW,WAAW,WAAW,wBAAwB;AAElE,cAAc;AAEd,cAAc;AACd,cAAc;AACd,cAAc;AACd,cAAc;AACd,cAAc;AACd,cAAc;AACd,cAAc;AACd,cAAc;AACd,cAAc;AACd,cAAc;AACd,cAAc;AACd,cAAc;AACd,cAAc;AACd,cAAc;AACd,cAAc;AACd,cAAc;AAEd,cAAc;AAEd,cAAc;AACd,cAAc;AAEd;AAAA,EACE;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,OACK;AACP,cAAc;AACd,cAAc;AACd,cAAc;AACd,cAAc;AAEd,cAAc;AACd,cAAc;AACd,cAAc;AACd,cAAc;AACd,cAAc;AACd,cAAc;AACd,cAAc;AACd,cAAc;AAEd,cAAc;AACd,cAAc;AACd,cAAc;AACd,cAAc;AACd,cAAc;AACd,cAAc;AAEd,cAAc;",
   "names": []
 }

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@tamagui/web",
-  "version": "1.5.8",
+  "version": "1.5.10",
   "source": "src/index.ts",
   "main": "dist/cjs",
   "module": "dist/esm",
@@ -27,20 +27,20 @@
     "reset.css"
   ],
   "dependencies": {
-    "@tamagui/compose-refs": "^1.5.8",
-    "@tamagui/constants": "^1.5.8",
-    "@tamagui/helpers": "^1.5.8",
-    "@tamagui/normalize-css-color": "^1.5.8",
-    "@tamagui/use-did-finish-ssr": "^1.5.8",
-    "@tamagui/use-event": "^1.5.8",
-    "@tamagui/use-force-update": "^1.5.8"
+    "@tamagui/compose-refs": "^1.5.10",
+    "@tamagui/constants": "^1.5.10",
+    "@tamagui/helpers": "^1.5.10",
+    "@tamagui/normalize-css-color": "^1.5.10",
+    "@tamagui/use-did-finish-ssr": "^1.5.10",
+    "@tamagui/use-event": "^1.5.10",
+    "@tamagui/use-force-update": "^1.5.10"
   },
   "peerDependencies": {
     "react": "*",
     "react-dom": "*"
   },
   "devDependencies": {
-    "@tamagui/build": "^1.5.8",
+    "@tamagui/build": "^1.5.10",
     "@testing-library/react": "^13.4.0",
     "csstype": "^3.0.10",
     "react": "^18.2.0",

package/src/helpers/ThemeManager.tsx

@@ -160,14 +160,13 @@ export class ThemeManager {
 }
 
 function getNextThemeClassName(name: string, isInverting = false) {
-  const next = `${THEME_CLASSNAME_PREFIX}${name}`
+  const next = `t_sub_theme ${THEME_CLASSNAME_PREFIX}${name}`
   if (isInverting) {
     return (
       next +
       // ensure you invert to base dark as well as specific dark
       // ... logic should likely be elsewhere
-      (next.includes('dark_') ? ` t_dark` : '') +
-      (next.includes('light_') ? ` t_light` : '')
+      (next.includes('dark_') ? ` t_dark` : next.includes('light_') ? ` t_light` : '')
     )
   }
   return next.replace('light_', '').replace('dark_', '')
@@ -190,7 +189,8 @@ function getState(
     throw new Error('Cannot reset + set new name')
   }
   if (props.reset && !parentManager?.parentManager) {
-    throw new Error('Cannot reset no grandparent exists')
+    console.warn('Cannot reset no grandparent exists')
+    return null
   }
 
   let result: ThemeManagerState | null = null