@tamagui/create-theme 1.31.4 → 1.32.0

package/dist/cjs/index.js

@@ -3,10 +3,6 @@ var __defProp = Object.defineProperty;
 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: true });
-};
 var __copyProps = (to, from, except, desc) => {
   if (from && typeof from === "object" || typeof from === "function") {
     for (let key of __getOwnPropNames(from))
@@ -15,134 +11,19 @@ var __copyProps = (to, from, except, desc) => {
   }
   return to;
 };
+var __reExport = (target, mod, secondTarget) => (__copyProps(target, mod, "default"), secondTarget && __copyProps(secondTarget, mod, "default"));
 var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: true }), mod);
 var src_exports = {};
-__export(src_exports, {
-  addChildren: () => addChildren,
-  applyMask: () => applyMask,
-  createShiftMask: () => createShiftMask,
-  createStrengthenMask: () => createStrengthenMask,
-  createTheme: () => createTheme,
-  createWeakenMask: () => createWeakenMask,
-  skipMask: () => skipMask
-});
 module.exports = __toCommonJS(src_exports);
-const THEME_INFO = /* @__PURE__ */ new WeakMap();
-function createTheme(palette, definition, options) {
-  const theme = {
-    ...Object.fromEntries(
-      Object.entries(definition).map(([key, offset]) => {
-        return [key, getValue(palette, offset)];
-      })
-    ),
-    ...options == null ? void 0 : options.nonInheritedValues
-  };
-  THEME_INFO.set(theme, { palette, definition, cache: /* @__PURE__ */ new Map() });
-  return theme;
-}
-const getValue = (palette, value) => {
-  if (typeof value === "string")
-    return value;
-  const max = palette.length - 1;
-  const isPositive = value === 0 ? !isMinusZero(value) : value >= 0;
-  const next = isPositive ? value : max + value;
-  const index = Math.min(Math.max(0, next), max);
-  return palette[index];
-};
-function addChildren(themes, getChildren) {
-  const out = { ...themes };
-  for (const key in themes) {
-    const subThemes = getChildren(key, themes[key]);
-    for (const sKey in subThemes) {
-      out[`${key}_${sKey}`] = subThemes[sKey];
-    }
-  }
-  return out;
-}
-const skipMask = (template, { skip }) => {
-  if (!skip)
-    return template;
-  return Object.fromEntries(
-    Object.entries(template).filter(([k]) => !(k in skip))
-  );
-};
-const createShiftMask = ({ inverse } = {}) => {
-  return (template, opts) => {
-    const { override, max: maxIn, palette, min = 0, strength = 1 } = opts;
-    const values = Object.entries(template);
-    const max = maxIn ?? (palette ? Object.values(palette).length - 1 : Infinity);
-    const out = {};
-    for (const [key, value] of values) {
-      if (typeof value === "string")
-        continue;
-      if (typeof (override == null ? void 0 : override[key]) === "number") {
-        const overrideShift = override[key];
-        out[key] = value + overrideShift;
-        continue;
-      }
-      const isPositive = value === 0 ? !isMinusZero(value) : value >= 0;
-      const direction = isPositive ? 1 : -1;
-      const invert = inverse ? -1 : 1;
-      const next = value + strength * direction * invert;
-      const clamped = isPositive ? Math.max(min, Math.min(max, next)) : Math.min(-min, Math.max(-max, next));
-      out[key] = clamped;
-    }
-    return skipMask(out, opts);
-  };
-};
-const createWeakenMask = () => createShiftMask();
-const createStrengthenMask = () => createShiftMask({ inverse: true });
-function isMinusZero(value) {
-  return 1 / value === -Infinity;
-}
-function applyMask(theme, mask, options = {}) {
-  const info = THEME_INFO.get(theme);
-  if (!info) {
-    throw new Error(
-      process.env.NODE_ENV !== "production" ? `No info found for theme, you must pass the theme created by createThemeFromPalette directly to extendTheme` : `\u274C Err2`
-    );
-  }
-  const template = mask(info.definition, {
-    palette: info.palette,
-    ...options
-  });
-  const next = createTheme(info.palette, template);
-  return next;
-}
-if (process.env.NODE_ENV === "development") {
-  const palette = ["0", "1", "2", "3", "-3", "-2", "-1", "-0"];
-  const template = { bg: 1, fg: -1 };
-  const stongerMask = createStrengthenMask();
-  const weakerMask = createWeakenMask();
-  const theme = createTheme(palette, template);
-  if (theme.bg !== "1")
-    throw `\u274C`;
-  if (theme.fg !== "-1")
-    throw `\u274C`;
-  const str = applyMask(theme, stongerMask);
-  if (str.bg !== "0")
-    throw `\u274C`;
-  if (str.fg !== "-0")
-    throw `\u274C`;
-  const weak = applyMask(theme, weakerMask);
-  if (weak.bg !== "2")
-    throw `\u274C`;
-  if (weak.fg !== "-2")
-    throw `\u274C`;
-  const weak2 = applyMask(theme, weakerMask, { strength: 2 });
-  if (weak2.bg !== "3")
-    throw `\u274C`;
-  if (weak2.fg !== "-3")
-    throw `\u274C`;
-}
+__reExport(src_exports, require("./createTheme"), module.exports);
+__reExport(src_exports, require("./masks"), module.exports);
+__reExport(src_exports, require("./types"), module.exports);
+__reExport(src_exports, require("./ThemeBuilder"), module.exports);
 // Annotate the CommonJS export names for ESM import in node:
 0 && (module.exports = {
-  addChildren,
-  applyMask,
-  createShiftMask,
-  createStrengthenMask,
-  createTheme,
-  createWeakenMask,
-  skipMask
+  ...require("./createTheme"),
+  ...require("./masks"),
+  ...require("./types"),
+  ...require("./ThemeBuilder")
 });
 //# sourceMappingURL=index.js.map

package/dist/cjs/index.js.map

@@ -1,6 +1,6 @@
 {
   "version": 3,
   "sources": ["../../src/index.tsx"],
-  "mappings": "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",
+  "mappings": ";;;;;;;;;;;;;;;AAAA;AAAA;AAAA,wBAAc,0BAAd;AACA,wBAAc,oBADd;AAEA,wBAAc,oBAFd;AAGA,wBAAc,2BAHd;",
   "names": []
 }

package/dist/esm/index.js

@@ -1,118 +1,5 @@
-const THEME_INFO = /* @__PURE__ */ new WeakMap();
-function createTheme(palette, definition, options) {
-  const theme = {
-    ...Object.fromEntries(
-      Object.entries(definition).map(([key, offset]) => {
-        return [key, getValue(palette, offset)];
-      })
-    ),
-    ...options == null ? void 0 : options.nonInheritedValues
-  };
-  THEME_INFO.set(theme, { palette, definition, cache: /* @__PURE__ */ new Map() });
-  return theme;
-}
-const getValue = (palette, value) => {
-  if (typeof value === "string")
-    return value;
-  const max = palette.length - 1;
-  const isPositive = value === 0 ? !isMinusZero(value) : value >= 0;
-  const next = isPositive ? value : max + value;
-  const index = Math.min(Math.max(0, next), max);
-  return palette[index];
-};
-function addChildren(themes, getChildren) {
-  const out = { ...themes };
-  for (const key in themes) {
-    const subThemes = getChildren(key, themes[key]);
-    for (const sKey in subThemes) {
-      out[`${key}_${sKey}`] = subThemes[sKey];
-    }
-  }
-  return out;
-}
-const skipMask = (template, { skip }) => {
-  if (!skip)
-    return template;
-  return Object.fromEntries(
-    Object.entries(template).filter(([k]) => !(k in skip))
-  );
-};
-const createShiftMask = ({ inverse } = {}) => {
-  return (template, opts) => {
-    const { override, max: maxIn, palette, min = 0, strength = 1 } = opts;
-    const values = Object.entries(template);
-    const max = maxIn ?? (palette ? Object.values(palette).length - 1 : Infinity);
-    const out = {};
-    for (const [key, value] of values) {
-      if (typeof value === "string")
-        continue;
-      if (typeof (override == null ? void 0 : override[key]) === "number") {
-        const overrideShift = override[key];
-        out[key] = value + overrideShift;
-        continue;
-      }
-      const isPositive = value === 0 ? !isMinusZero(value) : value >= 0;
-      const direction = isPositive ? 1 : -1;
-      const invert = inverse ? -1 : 1;
-      const next = value + strength * direction * invert;
-      const clamped = isPositive ? Math.max(min, Math.min(max, next)) : Math.min(-min, Math.max(-max, next));
-      out[key] = clamped;
-    }
-    return skipMask(out, opts);
-  };
-};
-const createWeakenMask = () => createShiftMask();
-const createStrengthenMask = () => createShiftMask({ inverse: true });
-function isMinusZero(value) {
-  return 1 / value === -Infinity;
-}
-function applyMask(theme, mask, options = {}) {
-  const info = THEME_INFO.get(theme);
-  if (!info) {
-    throw new Error(
-      process.env.NODE_ENV !== "production" ? `No info found for theme, you must pass the theme created by createThemeFromPalette directly to extendTheme` : `\u274C Err2`
-    );
-  }
-  const template = mask(info.definition, {
-    palette: info.palette,
-    ...options
-  });
-  const next = createTheme(info.palette, template);
-  return next;
-}
-if (process.env.NODE_ENV === "development") {
-  const palette = ["0", "1", "2", "3", "-3", "-2", "-1", "-0"];
-  const template = { bg: 1, fg: -1 };
-  const stongerMask = createStrengthenMask();
-  const weakerMask = createWeakenMask();
-  const theme = createTheme(palette, template);
-  if (theme.bg !== "1")
-    throw `\u274C`;
-  if (theme.fg !== "-1")
-    throw `\u274C`;
-  const str = applyMask(theme, stongerMask);
-  if (str.bg !== "0")
-    throw `\u274C`;
-  if (str.fg !== "-0")
-    throw `\u274C`;
-  const weak = applyMask(theme, weakerMask);
-  if (weak.bg !== "2")
-    throw `\u274C`;
-  if (weak.fg !== "-2")
-    throw `\u274C`;
-  const weak2 = applyMask(theme, weakerMask, { strength: 2 });
-  if (weak2.bg !== "3")
-    throw `\u274C`;
-  if (weak2.fg !== "-3")
-    throw `\u274C`;
-}
-export {
-  addChildren,
-  applyMask,
-  createShiftMask,
-  createStrengthenMask,
-  createTheme,
-  createWeakenMask,
-  skipMask
-};
+export * from "./createTheme";
+export * from "./masks";
+export * from "./types";
+export * from "./ThemeBuilder";
 //# sourceMappingURL=index.js.map

package/dist/esm/index.js.map

@@ -1,6 +1,6 @@
 {
   "version": 3,
   "sources": ["../../src/index.tsx"],
-  "mappings": "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",
+  "mappings": "AAAA,cAAc;AACd,cAAc;AACd,cAAc;AACd,cAAc;",
   "names": []
 }

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@tamagui/create-theme",
-  "version": "1.31.4",
+  "version": "1.32.0",
   "types": "./types/index.d.ts",
   "main": "dist/cjs",
   "module": "dist/esm",
@@ -27,10 +27,10 @@
     }
   },
   "dependencies": {
-    "@tamagui/web": "1.31.4"
+    "@tamagui/web": "1.32.0"
   },
   "devDependencies": {
-    "@tamagui/build": "1.31.4"
+    "@tamagui/build": "1.32.0"
   },
   "publishConfig": {
     "access": "public"

package/src/ThemeBuilder.tsx

@@ -0,0 +1,352 @@
+import { Narrow } from '@tamagui/web'
+
+import { createTheme } from './createTheme'
+import { objectEntries, objectFromEntries, objectKeys } from './helpers'
+import { applyMask, createMask } from './masks'
+import { CreateMask, CreateThemeOptions, MaskOptions } from './types'
+
+export type Palette = string[]
+
+type GenericTheme = {
+  [key: string]: string
+}
+
+export type Template = {
+  [key: string]: number
+}
+
+type ThemeUsingMask<Masks = string> = MaskOptions & {
+  mask: Masks
+}
+
+type ThemeUsingTemplate = CreateThemeOptions & {
+  palette: string
+  template: string
+}
+
+type ThemePreDefined = {
+  theme: GenericTheme
+}
+
+export type Theme<Masks = string> =
+  | ThemePreDefined
+  | ThemeUsingTemplate
+  | ThemeUsingMask<Masks>
+
+type ThemeWithParent<Masks = string> = Theme<Masks> & {
+  parent: string
+}
+
+type PaletteDefinitions = {
+  [key: string]: Palette
+}
+
+type ThemeDefinition<Masks extends string = string> =
+  | Theme<Masks>
+  | ThemeWithParent<Masks>[]
+
+type UnionableString = string & {}
+
+type ThemeDefinitions<Masks extends string = string> = {
+  [key: string]: ThemeDefinition<Masks | UnionableString>
+}
+
+type TemplateDefinitions = {
+  [key: string]: Template
+}
+
+type MaskDefinitions = {
+  [key: string]: CreateMask | CreateMask['mask']
+}
+
+type ThemeBuilderState = {
+  palettes?: PaletteDefinitions
+  templates?: TemplateDefinitions
+  themes?: ThemeDefinitions
+  masks?: MaskDefinitions
+}
+
+type ObjectStringKeys<A extends Object | undefined> = A extends Object
+  ? Exclude<keyof A, symbol | number>
+  : never
+
+type GetGeneratedThemeFromTemplate<Template> = {
+  [key in keyof Template]: string
+}
+
+type GetParentTheme<P, Themes extends ThemeDefinitions | undefined> = P extends string
+  ? P extends keyof Themes
+    ? Themes[P]
+    : GetParentName<P> extends keyof Themes
+    ? Themes[GetParentName<P>]
+    : GetParentName<GetParentName<P>> extends keyof Themes
+    ? Themes[GetParentName<GetParentName<P>>]
+    : GetParentName<GetParentName<GetParentName<P>>> extends keyof Themes
+    ? Themes[GetParentName<GetParentName<GetParentName<P>>>]
+    : never
+  : never
+
+type GetGeneratedTheme<TD extends any, S extends ThemeBuilderState> = TD extends {
+  theme: infer T
+}
+  ? T
+  : TD extends { parent: infer P }
+  ? // ? GetGeneratedThemeFromTemplate<GetParentTheme<P, S['templates']>>
+    GetGeneratedTheme<GetParentTheme<P, S['themes']>, S>
+  : TD extends { template: infer T }
+  ? T extends keyof S['templates']
+    ? GetGeneratedThemeFromTemplate<S['templates'][T]>
+    : TD
+  : TD
+
+type GetGeneratedThemes<S extends ThemeBuilderState> = {
+  [Key in keyof S['themes']]: GetGeneratedTheme<S['themes'][Key], S>
+}
+
+type GetParentName<N extends string> =
+  N extends `${infer A}_${infer B}_${infer C}_${infer D}_${string}`
+    ? `${A}_${B}_${C}_${D}`
+    : N extends `${infer A}_${infer B}_${infer C}_${string}`
+    ? `${A}_${B}_${C}`
+    : N extends `${infer A}_${infer B}_${string}`
+    ? `${A}_${B}`
+    : N extends `${infer A}_${string}`
+    ? `${A}`
+    : never
+
+class ThemeBuilder<State extends ThemeBuilderState> {
+  constructor(public state: State) {}
+
+  addPalettes<const P extends PaletteDefinitions>(palettes: P) {
+    return new ThemeBuilder({
+      ...this.state,
+      palettes: {
+        // as {} prevents generic string key merge messing up types
+        ...(this.state.palettes as {}),
+        ...palettes,
+      },
+    } as const)
+  }
+
+  addTemplates<const T extends TemplateDefinitions>(templates: T) {
+    return new ThemeBuilder({
+      ...this.state,
+      templates: {
+        // as {} prevents generic string key merge messing up types
+        ...(this.state.templates as {}),
+        ...templates,
+      },
+    })
+  }
+
+  addMasks<const T extends MaskDefinitions>(masks: T) {
+    return new ThemeBuilder({
+      ...this.state,
+      masks: {
+        // as {} prevents generic string key merge messing up types
+        ...(this.state.masks as {}),
+        ...(objectFromEntries(
+          objectEntries(masks).map(([key, val]) => [key, createMask(val)])
+        ) as T),
+      },
+    })
+  }
+
+  addThemes<const T extends ThemeDefinitions<ObjectStringKeys<State['masks']>>>(
+    themes: T
+  ) {
+    return new ThemeBuilder({
+      ...this.state,
+      themes: {
+        // as {} prevents generic string key merge messing up types
+        ...(this.state.themes as {}),
+        ...themes,
+      },
+    })
+  }
+
+  addChildThemes<
+    CTD extends Narrow<ThemeDefinitions<ObjectStringKeys<State['masks']>>>,
+    const AvoidNestingWithin extends string[] = []
+  >(
+    childThemeDefinition: CTD,
+    options?: {
+      avoidNestingWithin?: AvoidNestingWithin
+    }
+  ) {
+    const currentThemes = this.state.themes as State['themes']
+    if (!currentThemes) {
+      throw new Error(
+        `No themes defined yet, use addThemes first to set your base themes`
+      )
+    }
+
+    // AvoidNestingWithin[number] exclude isn't working here...
+    type CurrentNames = Exclude<keyof typeof currentThemes, symbol | number>
+    type ChildNames = Exclude<keyof CTD, symbol | number>
+
+    const currentThemeNames = objectKeys(currentThemes) as CurrentNames[]
+    const incomingThemeNames = objectKeys(childThemeDefinition) as ChildNames[]
+
+    const namesWithDefinitions = currentThemeNames.flatMap((prefix) => {
+      if (options?.avoidNestingWithin) {
+        if (
+          options.avoidNestingWithin.some(
+            (avoidName) => prefix.startsWith(avoidName) || prefix.endsWith(avoidName)
+          )
+        ) {
+          return []
+        }
+      }
+
+      return incomingThemeNames.map((subName) => {
+        const fullName = `${prefix}_${subName}`
+        const definition = childThemeDefinition[subName]
+        return [fullName, definition] as const
+      })
+    })
+
+    const childThemes = objectFromEntries(namesWithDefinitions) as {
+      [key in `${CurrentNames}_${ChildNames}`]: CTD & {
+        parent: GetParentName<key>
+      }
+    }
+
+    return new ThemeBuilder({
+      ...this.state,
+      themes: {
+        // as {} prevents generic string key merge messing up types
+        ...(this.state.themes as {}),
+        ...childThemes,
+      },
+    })
+  }
+
+  build(): GetGeneratedThemes<State> {
+    if (!this.state.themes) {
+      return {} as any
+    }
+
+    const out = {}
+    const maskedThemes: {
+      parentName: string
+      themeName: string
+      mask: ThemeUsingMask
+    }[] = []
+
+    for (const themeName in this.state.themes) {
+      const nameParts = themeName.split('_')
+      const parentName = nameParts.slice(0, nameParts.length - 1).join('_')
+
+      const definitions = this.state.themes[themeName]
+      const themeDefinition = Array.isArray(definitions)
+        ? (() => {
+            const found = definitions.find((d) => parentName.startsWith(d.parent!))
+            if (!found) {
+              throw new Error(`No parent for ${themeName}: ${parentName}`)
+            }
+            return found
+          })()
+        : definitions
+
+      if ('theme' in themeDefinition) {
+        out[themeName] = themeDefinition.theme
+      } else if ('mask' in themeDefinition) {
+        maskedThemes.push({ parentName, themeName, mask: themeDefinition })
+      } else {
+        const {
+          palette: paletteName,
+          template: templateName,
+          ...options
+        } = themeDefinition
+
+        if (!this.state.palettes) {
+          throw new Error(
+            `No palettes defined for theme with palette expected: ${themeName}`
+          )
+        }
+
+        let palette = this.state.palettes[paletteName]
+
+        if (!palette) {
+          const fullPaletteName = `${parentName}_${paletteName}`
+          palette = this.state.palettes[fullPaletteName]
+          // try using the prefix
+        }
+
+        if (!palette) {
+          throw new Error(`No palette for theme ${themeName}: ${paletteName}`)
+        }
+
+        const template = this.state.templates?.[templateName]
+        if (!template) {
+          throw new Error(`No template for theme ${themeName}: ${templateName}`)
+        }
+
+        out[themeName] = createTheme(palette, template, options)
+      }
+    }
+
+    for (const { mask, themeName, parentName } of maskedThemes) {
+      const parent = out[parentName]
+
+      if (!parent) {
+        throw new Error(
+          `No parent theme found with name ${parentName} for theme ${themeName} to use as a mask target`
+        )
+      }
+
+      const { mask: maskName, ...options } = mask
+      const maskFunction = this.state.masks?.[maskName]
+
+      if (!maskFunction) {
+        throw new Error(`No mask ${maskFunction}`)
+      }
+
+      out[themeName] = applyMask(parent, maskFunction as any, options)
+    }
+
+    return out as any
+  }
+}
+
+export function createThemeBuilder() {
+  return new ThemeBuilder({})
+}
+
+// // test types
+// let x = createThemeBuilder()
+//   .addMasks({
+//     test: {
+//       name: 'mask',
+//       mask: (() => {}) as any,
+//     },
+//   })
+//   .addThemes({
+//     light: {
+//       template: '',
+//       palette: '',
+//     },
+//     dark: {
+//       mask: 'test',
+//     },
+//   })
+//   .addChildThemes({
+//     List: [
+//       {
+//         parent: '',
+//         mask: 'test',
+//       },
+//     ],
+//   })
+
+// x
+
+// x.state.themes
+// x.state.masks
+
+// let y = x.addChildThemes({
+//   blue: {
+//     mask: 'ok',
+//   },
+// })