@tamagui/theme-builder 2.0.0-rc.4 → 2.0.0-rc.40

package/dist/cjs/createThemes.cjs

@@ -3,20 +3,22 @@ var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
 var __getOwnPropNames = Object.getOwnPropertyNames;
 var __hasOwnProp = Object.prototype.hasOwnProperty;
 var __export = (target, all) => {
-    for (var name in all) __defProp(target, name, {
-      get: all[name],
-      enumerable: !0
-    });
-  },
-  __copyProps = (to, from, except, desc) => {
-    if (from && typeof from == "object" || typeof from == "function") for (let key of __getOwnPropNames(from)) !__hasOwnProp.call(to, key) && key !== except && __defProp(to, key, {
+  for (var name in all) __defProp(target, name, {
+    get: all[name],
+    enumerable: true
+  });
+};
+var __copyProps = (to, from, except, desc) => {
+  if (from && typeof from === "object" || typeof from === "function") {
+    for (let key of __getOwnPropNames(from)) if (!__hasOwnProp.call(to, key) && key !== except) __defProp(to, key, {
       get: () => from[key],
       enumerable: !(desc = __getOwnPropDesc(from, key)) || desc.enumerable
     });
-    return to;
-  };
+  }
+  return to;
+};
 var __toCommonJS = mod => __copyProps(__defProp({}, "__esModule", {
-  value: !0
+  value: true
 }), mod);
 var createThemes_exports = {};
 __export(createThemes_exports, {
@@ -29,56 +31,58 @@ __export(createThemes_exports, {
   getLastBuilder: () => getLastBuilder
 });
 module.exports = __toCommonJS(createThemes_exports);
-var import_color2k = require("color2k"),
-  import_defaultComponentThemes = require("./defaultComponentThemes.cjs"),
-  import_defaultTemplates = require("./defaultTemplates.cjs"),
-  import_getThemeSuitePalettes = require("./getThemeSuitePalettes.cjs"),
-  import_ThemeBuilder = require("./ThemeBuilder.cjs");
+var import_color2k = require("color2k");
+var import_defaultComponentThemes = require("./defaultComponentThemes.cjs");
+var import_defaultTemplates = require("./defaultTemplates.cjs");
+var import_getThemeSuitePalettes = require("./getThemeSuitePalettes.cjs");
+var import_ThemeBuilder = require("./ThemeBuilder.cjs");
 function createThemes(props) {
   const {
-      accent,
-      childrenThemes,
-      grandChildrenThemes,
-      templates = import_defaultTemplates.defaultTemplates,
-      componentThemes,
-      getTheme
-    } = props,
-    builder = createSimpleThemeBuilder({
-      extra: props.base.extra,
-      accentExtra: accent?.extra,
-      componentThemes,
-      palettes: createPalettes(getThemesPalettes(props)),
-      templates,
-      accentTheme: !!accent,
-      childrenThemes: normalizeSubThemes(childrenThemes),
-      grandChildrenThemes: grandChildrenThemes ? normalizeSubThemes(grandChildrenThemes) : void 0,
-      getTheme
-    });
-  return lastBuilder = builder.themeBuilder, builder.themes;
+    accent,
+    childrenThemes,
+    grandChildrenThemes,
+    templates = import_defaultTemplates.defaultTemplates,
+    componentThemes,
+    getTheme
+  } = props;
+  const builder = createSimpleThemeBuilder({
+    extra: props.base.extra,
+    accentExtra: accent?.extra,
+    componentThemes,
+    palettes: createPalettes(getThemesPalettes(props)),
+    templates,
+    accentTheme: !!accent,
+    childrenThemes: normalizeSubThemes(childrenThemes),
+    grandChildrenThemes: grandChildrenThemes ? normalizeSubThemes(grandChildrenThemes) : void 0,
+    getTheme
+  });
+  lastBuilder = builder.themeBuilder;
+  return builder.themes;
 }
 let lastBuilder = null;
 const getLastBuilder = () => lastBuilder;
 function createV4Themes(props) {
   const {
-      accent,
-      childrenThemes,
-      grandChildrenThemes,
-      templates = import_defaultTemplates.defaultTemplates,
-      componentThemes,
-      getTheme
-    } = props,
-    builder = createV4ThemeBuilder({
-      extra: props.base.extra,
-      accentExtra: accent?.extra,
-      componentThemes,
-      palettes: createPalettes(getThemesPalettes(props)),
-      templates,
-      accentTheme: !!accent,
-      childrenThemes: normalizeSubThemes(childrenThemes),
-      grandChildrenThemes: grandChildrenThemes ? normalizeSubThemes(grandChildrenThemes) : void 0,
-      getTheme
-    });
-  return lastBuilder = builder.themeBuilder, builder.themes;
+    accent,
+    childrenThemes,
+    grandChildrenThemes,
+    templates = import_defaultTemplates.defaultTemplates,
+    componentThemes,
+    getTheme
+  } = props;
+  const builder = createV4ThemeBuilder({
+    extra: props.base.extra,
+    accentExtra: accent?.extra,
+    componentThemes,
+    palettes: createPalettes(getThemesPalettes(props)),
+    templates,
+    accentTheme: !!accent,
+    childrenThemes: normalizeSubThemes(childrenThemes),
+    grandChildrenThemes: grandChildrenThemes ? normalizeSubThemes(grandChildrenThemes) : void 0,
+    getTheme
+  });
+  lastBuilder = builder.themeBuilder;
+  return builder.themes;
 }
 function normalizeSubThemes(defs) {
   return Object.fromEntries(Object.entries(defs || {}).map(([name, value]) => {
@@ -156,25 +160,40 @@ function createSimpleThemeBuilder(props) {
       }
     }
   });
-  return palettes.light_accent && (themeBuilder = themeBuilder.addChildThemes({
-    accent: [{
-      parent: "light",
-      template: "base",
-      palette: "light_accent",
-      nonInheritedValues: accentExtra?.light
-    }, {
-      parent: "dark",
-      template: "base",
-      palette: "dark_accent",
-      nonInheritedValues: accentExtra?.dark
-    }]
-  })), childrenThemes && (themeBuilder = themeBuilder.addChildThemes(childrenThemes, {
-    avoidNestingWithin: ["accent"]
-  })), grandChildrenThemes && (themeBuilder = themeBuilder.addChildThemes(grandChildrenThemes, {
-    avoidNestingWithin: ["accent"]
-  })), componentThemes && (themeBuilder = themeBuilder.addComponentThemes(getComponentThemes(componentThemes), {
-    avoidNestingWithin: Object.keys(grandChildrenThemes || {})
-  })), getTheme && (themeBuilder = themeBuilder.getTheme(getTheme)), {
+  if (palettes.light_accent) {
+    themeBuilder = themeBuilder.addChildThemes({
+      accent: [{
+        parent: "light",
+        template: "base",
+        palette: "light_accent",
+        nonInheritedValues: accentExtra?.light
+      }, {
+        parent: "dark",
+        template: "base",
+        palette: "dark_accent",
+        nonInheritedValues: accentExtra?.dark
+      }]
+    });
+  }
+  if (childrenThemes) {
+    themeBuilder = themeBuilder.addChildThemes(childrenThemes, {
+      avoidNestingWithin: ["accent"]
+    });
+  }
+  if (grandChildrenThemes) {
+    themeBuilder = themeBuilder.addChildThemes(grandChildrenThemes, {
+      avoidNestingWithin: ["accent"]
+    });
+  }
+  if (componentThemes) {
+    themeBuilder = themeBuilder.addComponentThemes(getComponentThemes(componentThemes), {
+      avoidNestingWithin: Object.keys(grandChildrenThemes || {})
+    });
+  }
+  if (getTheme) {
+    themeBuilder = themeBuilder.getTheme(getTheme);
+  }
+  return {
     themeBuilder,
     themes: themeBuilder.build()
   };
@@ -186,13 +205,14 @@ function getSchemePalette(colors) {
   };
 }
 function getAnchors(palette) {
+  const maxIndex = 11;
   const numItems = palette.light.length;
-  return palette.light.map((lcolor, index) => {
-    const dcolor = palette.dark[index],
-      [lhue, lsat, llum, lalpha] = (0, import_color2k.parseToHsla)(lcolor),
-      [dhue, dsat, dlum, dalpha] = (0, import_color2k.parseToHsla)(dcolor);
+  const anchors = palette.light.map((lcolor, index) => {
+    const dcolor = palette.dark[index];
+    const [lhue, lsat, llum, lalpha] = (0, import_color2k.parseToHsla)(lcolor);
+    const [dhue, dsat, dlum, dalpha] = (0, import_color2k.parseToHsla)(dcolor);
     return {
-      index: spreadIndex(11, numItems, index),
+      index: spreadIndex(maxIndex, numItems, index),
       hue: {
         light: lhue,
         dark: dhue
@@ -211,6 +231,7 @@ function getAnchors(palette) {
       }
     };
   });
+  return anchors;
 }
 function spreadIndex(maxIndex, numItems, index) {
   return Math.round(index / (numItems - 1) * maxIndex);
@@ -219,14 +240,19 @@ function coerceSimplePaletteToSchemePalette(def) {
   return Array.isArray(def) ? getSchemePalette(def) : def;
 }
 function getThemesPalettes(props) {
-  const base = coerceSimplePaletteToSchemePalette(props.base.palette),
-    accent = props.accent ? coerceSimplePaletteToSchemePalette(props.accent.palette) : null,
-    baseAnchors = getAnchors(base);
-  function getSubThemesPalettes(defs, isGrandChildren = !1) {
-    return Object.fromEntries(Object.entries(defs).map(([key, value]) => isGrandChildren && key === "accent" && !value.palette ? null : [key, {
-      name: key,
-      anchors: value.palette ? getAnchors(coerceSimplePaletteToSchemePalette(value.palette)) : baseAnchors
-    }]).filter(Boolean));
+  const base = coerceSimplePaletteToSchemePalette(props.base.palette);
+  const accent = props.accent ? coerceSimplePaletteToSchemePalette(props.accent.palette) : null;
+  const baseAnchors = getAnchors(base);
+  function getSubThemesPalettes(defs, isGrandChildren = false) {
+    return Object.fromEntries(Object.entries(defs).map(([key, value]) => {
+      if (isGrandChildren && key === "accent" && !value.palette) {
+        return null;
+      }
+      return [key, {
+        name: key,
+        anchors: value.palette ? getAnchors(coerceSimplePaletteToSchemePalette(value.palette)) : baseAnchors
+      }];
+    }).filter(Boolean));
   }
   return {
     base: {
@@ -239,28 +265,37 @@ function getThemesPalettes(props) {
         anchors: getAnchors(accent)
       }
     }),
-    ...(props.childrenThemes && getSubThemesPalettes(props.childrenThemes, !1)),
-    ...(props.grandChildrenThemes && getSubThemesPalettes(props.grandChildrenThemes, !0))
+    ...(props.childrenThemes && getSubThemesPalettes(props.childrenThemes, false)),
+    ...(props.grandChildrenThemes && getSubThemesPalettes(props.grandChildrenThemes, true))
   };
 }
-const getComponentThemes = components => Object.fromEntries(Object.entries(components).map(([componentName, {
-  template
-}]) => [componentName, {
-  parent: "",
-  template: template || "base"
-}]));
+const getComponentThemes = components => {
+  return Object.fromEntries(Object.entries(components).map(([componentName, {
+    template
+  }]) => {
+    return [componentName, {
+      parent: "",
+      template: template || "base"
+    }];
+  }));
+};
 function createPalettes(palettes) {
-  const accentPalettes = palettes.accent ? (0, import_getThemeSuitePalettes.getThemeSuitePalettes)(palettes.accent) : null,
-    basePalettes = (0, import_getThemeSuitePalettes.getThemeSuitePalettes)(palettes.base);
-  return Object.fromEntries(Object.entries(palettes).flatMap(([name, palette]) => {
-    const palettes2 = (0, import_getThemeSuitePalettes.getThemeSuitePalettes)(palette),
-      oppositePalettes = name.startsWith("accent") ? basePalettes : accentPalettes || basePalettes;
-    if (!oppositePalettes) return [];
-    const oppositeLight = oppositePalettes.light,
-      oppositeDark = oppositePalettes.dark,
-      bgOffset = 7;
-    return [[name === "base" ? "light" : `light_${name}`, [oppositeLight[bgOffset], ...palettes2.light, oppositeLight[oppositeLight.length - bgOffset - 1]]], [name === "base" ? "dark" : `dark_${name}`, [oppositeDark[oppositeDark.length - bgOffset - 1], ...palettes2.dark, oppositeDark[bgOffset]]]];
+  const accentPalettes = palettes.accent ? (0, import_getThemeSuitePalettes.getThemeSuitePalettes)(palettes.accent) : null;
+  const basePalettes = (0, import_getThemeSuitePalettes.getThemeSuitePalettes)(palettes.base);
+  const next = Object.fromEntries(Object.entries(palettes).flatMap(([name, palette]) => {
+    const palettes2 = (0, import_getThemeSuitePalettes.getThemeSuitePalettes)(palette);
+    const isAccent = name.startsWith("accent");
+    const oppositePalettes = isAccent ? basePalettes : accentPalettes || basePalettes;
+    if (!oppositePalettes) {
+      return [];
+    }
+    const oppositeLight = oppositePalettes.light;
+    const oppositeDark = oppositePalettes.dark;
+    const bgOffset = 7;
+    const out = [[name === "base" ? "light" : `light_${name}`, [oppositeLight[bgOffset], ...palettes2.light, oppositeLight[oppositeLight.length - bgOffset - 1]]], [name === "base" ? "dark" : `dark_${name}`, [oppositeDark[oppositeDark.length - bgOffset - 1], ...palettes2.dark, oppositeDark[bgOffset]]]];
+    return out;
   }));
+  return next;
 }
 function createV4ThemeBuilder(props) {
   const {
@@ -318,27 +353,42 @@ function createV4ThemeBuilder(props) {
       }
     }
   });
-  return childrenThemes && (themeBuilder = themeBuilder.addChildThemes(childrenThemes, {
-    avoidNestingWithin: ["accent"]
-  })), grandChildrenThemes && (themeBuilder = themeBuilder.addChildThemes(grandChildrenThemes, {
-    avoidNestingWithin: ["accent"]
-  })), palettes.light_accent && (themeBuilder = themeBuilder.addChildThemes({
-    accent: [{
-      parent: "light",
-      template: "base",
-      palette: "light_accent",
-      nonInheritedValues: accentExtra?.light
+  if (childrenThemes) {
+    themeBuilder = themeBuilder.addChildThemes(childrenThemes, {
+      avoidNestingWithin: ["accent"]
+    });
+  }
+  if (grandChildrenThemes) {
+    themeBuilder = themeBuilder.addChildThemes(grandChildrenThemes, {
+      avoidNestingWithin: ["accent"]
+    });
+  }
+  if (palettes.light_accent) {
+    themeBuilder = themeBuilder.addChildThemes({
+      accent: [{
+        parent: "light",
+        template: "base",
+        palette: "light_accent",
+        nonInheritedValues: accentExtra?.light
+      }, {
+        parent: "dark",
+        template: "base",
+        palette: "dark_accent",
+        nonInheritedValues: accentExtra?.dark
+      }]
     }, {
-      parent: "dark",
-      template: "base",
-      palette: "dark_accent",
-      nonInheritedValues: accentExtra?.dark
-    }]
-  }, {
-    avoidNestingWithin: Object.keys(childrenThemes || {})
-  })), componentThemes && (themeBuilder = themeBuilder.addComponentThemes(getComponentThemes(componentThemes), {
-    avoidNestingWithin: Object.keys(grandChildrenThemes || {})
-  })), getTheme && (themeBuilder = themeBuilder.getTheme(getTheme)), {
+      avoidNestingWithin: Object.keys(childrenThemes || {})
+    });
+  }
+  if (componentThemes) {
+    themeBuilder = themeBuilder.addComponentThemes(getComponentThemes(componentThemes), {
+      avoidNestingWithin: Object.keys(grandChildrenThemes || {})
+    });
+  }
+  if (getTheme) {
+    themeBuilder = themeBuilder.getTheme(getTheme);
+  }
+  return {
     themeBuilder,
     themes: themeBuilder.build()
   };