@tamagui/theme-base 1.0.1-beta.21 → 1.0.1-beta.210

package/dist/cjs/colorUtils.js

@@ -1,8 +1,8 @@
+"use strict";
 var __defProp = Object.defineProperty;
 var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
 var __getOwnPropNames = Object.getOwnPropertyNames;
 var __hasOwnProp = Object.prototype.hasOwnProperty;
-var __name = (target, value) => __defProp(target, "name", { value, configurable: true });
 var __export = (target, all) => {
   for (var name in all)
     __defProp(target, name, { get: all[name], enumerable: true });
@@ -23,7 +23,7 @@ __export(colorUtils_exports, {
 });
 module.exports = __toCommonJS(colorUtils_exports);
 var import_core = require("@tamagui/core");
-const hexToRGBA = /* @__PURE__ */ __name((hex, alpha = 1) => {
+const hexToRGBA = (hex, alpha = 1) => {
   if (!isValidHex(hex)) {
     throw new Error("Invalid HEX");
   }
@@ -31,8 +31,8 @@ const hexToRGBA = /* @__PURE__ */ __name((hex, alpha = 1) => {
   const hexArr = getChunksFromString(hex.slice(1), chunkSize);
   const [r, g, b, a] = (hexArr == null ? void 0 : hexArr.map(convertHexUnitTo256)) ?? [];
   return `rgba(${r}, ${g}, ${b}, ${getAlphaFloat(a, alpha)})`;
-}, "hexToRGBA");
-const setColorAlpha = /* @__PURE__ */ __name((colorIn, alpha = 1) => {
+};
+const setColorAlpha = (colorIn, alpha = 1) => {
   let color = `${(0, import_core.getVariableValue)(colorIn)}`;
   if (color.startsWith("hsl(")) {
     return color.replace("hsl", "hsla").replace(")", `, ${alpha})`);
@@ -44,11 +44,11 @@ const setColorAlpha = /* @__PURE__ */ __name((colorIn, alpha = 1) => {
     return color.replace("rgb", "rgba").replace(")", `, ${alpha})`);
   }
   return color;
-}, "setColorAlpha");
-const isValidHex = /* @__PURE__ */ __name((hex) => /^#([A-Fa-f0-9]{3,4}){1,2}$/.test(hex), "isValidHex");
-const getChunksFromString = /* @__PURE__ */ __name((st, chunkSize = 0) => st.match(new RegExp(`.{${chunkSize}}`, "g")), "getChunksFromString");
-const convertHexUnitTo256 = /* @__PURE__ */ __name((hexStr) => parseInt(hexStr.repeat(2 / hexStr.length), 16), "convertHexUnitTo256");
-const getAlphaFloat = /* @__PURE__ */ __name((a, alpha = 1) => {
+};
+const isValidHex = (hex) => /^#([A-Fa-f0-9]{3,4}){1,2}$/.test(hex);
+const getChunksFromString = (st, chunkSize = 0) => st.match(new RegExp(`.{${chunkSize}}`, "g"));
+const convertHexUnitTo256 = (hexStr) => parseInt(hexStr.repeat(2 / hexStr.length), 16);
+const getAlphaFloat = (a, alpha = 1) => {
   if (a !== void 0) {
     return a / 255;
   }
@@ -56,7 +56,7 @@ const getAlphaFloat = /* @__PURE__ */ __name((a, alpha = 1) => {
     return 1;
   }
   return alpha;
-}, "getAlphaFloat");
+};
 // Annotate the CommonJS export names for ESM import in node:
 0 && (module.exports = {
   hexToRGBA,

package/dist/cjs/colorUtils.js.map

@@ -2,6 +2,6 @@
   "version": 3,
   "sources": ["../../src/colorUtils.tsx"],
   "sourcesContent": ["import { Variable, getVariableValue } from '@tamagui/core'\n\nexport const hexToRGBA = (hex: string, alpha = 1) => {\n  if (!isValidHex(hex)) {\n    throw new Error('Invalid HEX')\n  }\n  const chunkSize = Math.floor((hex.length - 1) / 3)\n  const hexArr = getChunksFromString(hex.slice(1), chunkSize)\n  const [r, g, b, a] = hexArr?.map(convertHexUnitTo256) ?? []\n  return `rgba(${r}, ${g}, ${b}, ${getAlphaFloat(a, alpha)})`\n}\n\nexport const setColorAlpha = (colorIn: string | Variable, alpha = 1) => {\n  let color = `${getVariableValue(colorIn)}`\n  if (color.startsWith('hsl(')) {\n    return color.replace('hsl', 'hsla').replace(')', `, ${alpha})`)\n  }\n  if (color.startsWith('#')) {\n    return hexToRGBA(color, alpha)\n  }\n  if (color.startsWith('rgb(')) {\n    return color.replace('rgb', 'rgba').replace(')', `, ${alpha})`)\n  }\n  return color\n}\n\nconst isValidHex = (hex: string) => /^#([A-Fa-f0-9]{3,4}){1,2}$/.test(hex)\n\nconst getChunksFromString = (st: string, chunkSize = 0) =>\n  st.match(new RegExp(`.{${chunkSize}}`, 'g'))\n\nconst convertHexUnitTo256 = (hexStr: string) => parseInt(hexStr.repeat(2 / hexStr.length), 16)\n\nconst getAlphaFloat = (a: any, alpha = 1) => {\n  if (a !== undefined) {\n    return a / 255\n  }\n  if (typeof alpha != 'number' || alpha < 0 || alpha > 1) {\n    return 1\n  }\n  return alpha\n}\n"],
-  "mappings": ";;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,kBAA2C;AAEpC,MAAM,YAAY,wBAAC,KAAa,QAAQ,MAAM;AACnD,MAAI,CAAC,WAAW,GAAG,GAAG;AACpB,UAAM,IAAI,MAAM,aAAa;AAAA,EAC/B;AACA,QAAM,YAAY,KAAK,MAAO,KAAI,SAAS,KAAK,CAAC;AACjD,QAAM,SAAS,oBAAoB,IAAI,MAAM,CAAC,GAAG,SAAS;AAC1D,QAAM,CAAC,GAAG,GAAG,GAAG,KAAK,kCAAQ,IAAI,yBAAwB,CAAC;AAC1D,SAAO,QAAQ,MAAM,MAAM,MAAM,cAAc,GAAG,KAAK;AACzD,GARyB;AAUlB,MAAM,gBAAgB,wBAAC,SAA4B,QAAQ,MAAM;AACtE,MAAI,QAAQ,GAAG,kCAAiB,OAAO;AACvC,MAAI,MAAM,WAAW,MAAM,GAAG;AAC5B,WAAO,MAAM,QAAQ,OAAO,MAAM,EAAE,QAAQ,KAAK,KAAK,QAAQ;AAAA,EAChE;AACA,MAAI,MAAM,WAAW,GAAG,GAAG;AACzB,WAAO,UAAU,OAAO,KAAK;AAAA,EAC/B;AACA,MAAI,MAAM,WAAW,MAAM,GAAG;AAC5B,WAAO,MAAM,QAAQ,OAAO,MAAM,EAAE,QAAQ,KAAK,KAAK,QAAQ;AAAA,EAChE;AACA,SAAO;AACT,GAZ6B;AAc7B,MAAM,aAAa,wBAAC,QAAgB,6BAA6B,KAAK,GAAG,GAAtD;AAEnB,MAAM,sBAAsB,wBAAC,IAAY,YAAY,MACnD,GAAG,MAAM,IAAI,OAAO,KAAK,cAAc,GAAG,CAAC,GADjB;AAG5B,MAAM,sBAAsB,wBAAC,WAAmB,SAAS,OAAO,OAAO,IAAI,OAAO,MAAM,GAAG,EAAE,GAAjE;AAE5B,MAAM,gBAAgB,wBAAC,GAAQ,QAAQ,MAAM;AAC3C,MAAI,MAAM,QAAW;AACnB,WAAO,IAAI;AAAA,EACb;AACA,MAAI,OAAO,SAAS,YAAY,QAAQ,KAAK,QAAQ,GAAG;AACtD,WAAO;AAAA,EACT;AACA,SAAO;AACT,GARsB;",
+  "mappings": ";;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,kBAA2C;AAEpC,MAAM,YAAY,CAAC,KAAa,QAAQ,MAAM;AACnD,MAAI,CAAC,WAAW,GAAG,GAAG;AACpB,UAAM,IAAI,MAAM,aAAa;AAAA,EAC/B;AACA,QAAM,YAAY,KAAK,OAAO,IAAI,SAAS,KAAK,CAAC;AACjD,QAAM,SAAS,oBAAoB,IAAI,MAAM,CAAC,GAAG,SAAS;AAC1D,QAAM,CAAC,GAAG,GAAG,GAAG,CAAC,KAAI,iCAAQ,IAAI,yBAAwB,CAAC;AAC1D,SAAO,QAAQ,MAAM,MAAM,MAAM,cAAc,GAAG,KAAK;AACzD;AAEO,MAAM,gBAAgB,CAAC,SAA4B,QAAQ,MAAM;AACtE,MAAI,QAAQ,OAAG,8BAAiB,OAAO;AACvC,MAAI,MAAM,WAAW,MAAM,GAAG;AAC5B,WAAO,MAAM,QAAQ,OAAO,MAAM,EAAE,QAAQ,KAAK,KAAK,QAAQ;AAAA,EAChE;AACA,MAAI,MAAM,WAAW,GAAG,GAAG;AACzB,WAAO,UAAU,OAAO,KAAK;AAAA,EAC/B;AACA,MAAI,MAAM,WAAW,MAAM,GAAG;AAC5B,WAAO,MAAM,QAAQ,OAAO,MAAM,EAAE,QAAQ,KAAK,KAAK,QAAQ;AAAA,EAChE;AACA,SAAO;AACT;AAEA,MAAM,aAAa,CAAC,QAAgB,6BAA6B,KAAK,GAAG;AAEzE,MAAM,sBAAsB,CAAC,IAAY,YAAY,MACnD,GAAG,MAAM,IAAI,OAAO,KAAK,cAAc,GAAG,CAAC;AAE7C,MAAM,sBAAsB,CAAC,WAAmB,SAAS,OAAO,OAAO,IAAI,OAAO,MAAM,GAAG,EAAE;AAE7F,MAAM,gBAAgB,CAAC,GAAQ,QAAQ,MAAM;AAC3C,MAAI,MAAM,QAAW;AACnB,WAAO,IAAI;AAAA,EACb;AACA,MAAI,OAAO,SAAS,YAAY,QAAQ,KAAK,QAAQ,GAAG;AACtD,WAAO;AAAA,EACT;AACA,SAAO;AACT;",
   "names": []
 }

package/dist/cjs/index.js

@@ -1,3 +1,4 @@
+"use strict";
 var __defProp = Object.defineProperty;
 var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
 var __getOwnPropNames = Object.getOwnPropertyNames;

package/dist/cjs/index.js.map

@@ -2,6 +2,6 @@
   "version": 3,
   "sources": ["../../src/index.tsx"],
   "sourcesContent": ["export * from './themes'\nexport * from './tokens'\nexport * from '@tamagui/colors'\n"],
-  "mappings": ";;;;;;;;;;;;;;AAAA;AAAA;AAAA,wBAAc,qBAAd;AACA,wBAAc,qBADd;AAEA,wBAAc,4BAFd;",
+  "mappings": ";;;;;;;;;;;;;;;AAAA;AAAA;AAAA,wBAAc,qBAAd;AACA,wBAAc,qBADd;AAEA,wBAAc,4BAFd;",
   "names": []
 }

package/dist/cjs/themes.js

@@ -1,27 +1,8 @@
-var __create = Object.create;
+"use strict";
 var __defProp = Object.defineProperty;
-var __defProps = Object.defineProperties;
 var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
-var __getOwnPropDescs = Object.getOwnPropertyDescriptors;
 var __getOwnPropNames = Object.getOwnPropertyNames;
-var __getOwnPropSymbols = Object.getOwnPropertySymbols;
-var __getProtoOf = Object.getPrototypeOf;
 var __hasOwnProp = Object.prototype.hasOwnProperty;
-var __propIsEnum = Object.prototype.propertyIsEnumerable;
-var __defNormalProp = (obj, key, value) => key in obj ? __defProp(obj, key, { enumerable: true, configurable: true, writable: true, value }) : obj[key] = value;
-var __spreadValues = (a, b) => {
-  for (var prop in b || (b = {}))
-    if (__hasOwnProp.call(b, prop))
-      __defNormalProp(a, prop, b[prop]);
-  if (__getOwnPropSymbols)
-    for (var prop of __getOwnPropSymbols(b)) {
-      if (__propIsEnum.call(b, prop))
-        __defNormalProp(a, prop, b[prop]);
-    }
-  return a;
-};
-var __spreadProps = (a, b) => __defProps(a, __getOwnPropDescs(b));
-var __name = (target, value) => __defProp(target, "name", { value, configurable: true });
 var __export = (target, all) => {
   for (var name in all)
     __defProp(target, name, { get: all[name], enumerable: true });
@@ -34,247 +15,51 @@ var __copyProps = (to, from, except, desc) => {
   }
   return to;
 };
-var __toESM = (mod, isNodeMode, target) => (target = mod != null ? __create(__getProtoOf(mod)) : {}, __copyProps(isNodeMode || !mod || !mod.__esModule ? __defProp(target, "default", { value: mod, enumerable: true }) : target, mod));
 var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: true }), mod);
 var themes_exports = {};
 __export(themes_exports, {
-  colorSchemes: () => colorSchemes,
-  darkGradient: () => darkGradient,
-  lightGradient: () => lightGradient,
   themes: () => themes
 });
 module.exports = __toCommonJS(themes_exports);
-var Colors = __toESM(require("@tamagui/colors"));
-var import_colors = require("@tamagui/colors");
-var import_core = require("@tamagui/core");
-var import_colorUtils = require("./colorUtils");
+var import_create_themes = require("@tamagui/create-themes");
 var import_tokens = require("./tokens");
-const alternates = [1, 2, 3, 4];
-function createThemesFrom(name, getTheme, props) {
-  const { shift = 0 } = props;
-  const theme = getTheme(0 + shift, props);
-  let themeEntries = [[name, theme]];
-  const altThemes = alternates.map((alt) => [
-    `${name}_alt${alt}`,
-    getTheme(alt + shift, props)
-  ]);
-  const altButtonThemes = alternates.map((_, i) => {
-    const [bName, bTheme] = [altThemes[i][0], (altThemes[i + 1] || altThemes[i])[1]];
-    return [`${bName}_Button`, bTheme];
-  });
-  const darkerTheme = getTheme(Math.max(0, shift + (props.isLight ? 1 : -1)), props);
-  const activeTheme = makeActiveTheme(theme);
-  themeEntries = [
-    ...themeEntries,
-    ...altThemes,
-    ...altButtonThemes,
-    [`${name}_Button`, altThemes[0][1]],
-    [`${name}_darker`, darkerTheme],
-    [`${name}_active`, activeTheme]
-  ];
-  const themes2 = Object.fromEntries(themeEntries);
-  return themes2;
-}
-__name(createThemesFrom, "createThemesFrom");
-const createTheme = /* @__PURE__ */ __name((str = 1, {
-  backgrounds,
-  isLight = true,
-  isBase = false,
-  colors = [...backgrounds].reverse(),
-  borderColors = isLight ? colors : backgrounds,
-  backgroundStrong,
-  offsets: offsetsProp
-}) => {
-  const offsets = {
-    borderColor: (offsetsProp == null ? void 0 : offsetsProp.borderColor) ?? (offsetsProp == null ? void 0 : offsetsProp.background) ?? [0, 0, 0, 0],
-    background: (offsetsProp == null ? void 0 : offsetsProp.background) ?? [0, 0, 0, 0],
-    color: (offsetsProp == null ? void 0 : offsetsProp.color) ?? [0, 0, 0, 0]
-  };
-  const darkColors = isLight ? colors : backgrounds;
-  const lighterDir = isLight ? -1 : 1;
-  const darkerDir = -lighterDir;
-  const strongerDir = isLight ? darkerDir : lighterDir;
-  const softerDir = -strongerDir;
-  const get = /* @__PURE__ */ __name((arr, index, name = "background") => {
-    return arr[Math.max(0, Math.min(index + (offsets[name][str] || 0), arr.length - 1))];
-  }, "get");
-  const colorTranslucent = (0, import_colorUtils.setColorAlpha)((0, import_core.getVariableValue)(get(colors, 0 + str, "color")), 0.5);
-  let theme = {
-    background: get(backgrounds, str),
-    backgroundStrong: backgroundStrong || get(backgrounds, str + strongerDir * 2),
-    backgroundSoft: get(backgrounds, str + softerDir * 2),
-    backgroundHover: get(backgrounds, str + lighterDir),
-    backgroundPress: get(backgrounds, str + darkerDir),
-    backgroundFocus: get(backgrounds, str + darkerDir * 2),
-    backgroundTransparent: import_tokens.color.grayA1,
-    color: get(colors, 0 + str, "color"),
-    colorHover: get(colors, 1 + str, "color"),
-    colorPress: get(colors, 2 + str, "color"),
-    colorFocus: get(colors, 3 + str, "color"),
-    colorTranslucent,
-    colorMid: colors[Math.floor(colors.length / 2)],
-    shadowColor: isLight ? import_tokens.color.grayA2 : import_tokens.color.grayA8,
-    shadowColorHover: darkColors[!isLight ? 1 : 8],
-    shadowColorPress: darkColors[!isLight ? 1 : 8],
-    shadowColorFocus: darkColors[!isLight ? 1 : 8],
-    borderColor: null,
-    borderColorHover: null,
-    borderColorPress: null,
-    borderColorFocus: null
-  };
-  if (isBase) {
-    Object.assign(theme, {
-      borderColor: isLight ? get(colors, 8 - str, "borderColor") : get(backgrounds, 2 + str, "borderColor"),
-      borderColorHover: isLight ? get(colors, 6 - str, "borderColor") : get(backgrounds, 3 + str, "borderColor"),
-      borderColorPress: isLight ? get(colors, 5 - str, "borderColor") : get(backgrounds, 1 + str, "borderColor"),
-      borderColorFocus: isLight ? get(colors, 4 - str, "borderColor") : get(backgrounds, 3 + str, "borderColor")
-    });
-  } else {
-    Object.assign(theme, {
-      borderColor: get(borderColors, 1 + strongerDir, "borderColor"),
-      borderColorHover: get(borderColors, 2 + strongerDir, "borderColor"),
-      borderColorPress: get(borderColors, 3 + strongerDir, "borderColor"),
-      borderColorFocus: get(borderColors, 4 + strongerDir, "borderColor")
-    });
-  }
-  return theme;
-}, "createTheme");
-const colorSchemes = [
-  { name: "blue", colors: Colors.blue, darkColors: Colors.blueDark },
-  { name: "gray", colors: Colors.gray, darkColors: Colors.grayDark },
-  { name: "green", colors: Colors.green, darkColors: Colors.greenDark },
-  { name: "indigo", colors: Colors.indigo, darkColors: Colors.indigoDark },
-  { name: "orange", colors: Colors.orange, darkColors: Colors.orangeDark },
-  { name: "pink", colors: Colors.pink, darkColors: Colors.pinkDark },
-  { name: "purple", colors: Colors.purple, darkColors: Colors.purpleDark },
-  { name: "red", colors: Colors.red, darkColors: Colors.redDark },
-  { name: "violet", colors: Colors.violet, darkColors: Colors.violetDark },
-  { name: "yellow", colors: Colors.yellow, darkColors: Colors.yellowDark },
-  { name: "teal", colors: Colors.teal, darkColors: Colors.tealDark },
-  { name: "lime", colors: Colors.lime, darkColors: Colors.limeDark },
-  { name: "brown", colors: Colors.brown, darkColors: Colors.brownDark }
-];
-const lightGradient = [
-  "#fff",
-  "#f4f4f4",
-  import_tokens.color.gray1,
-  import_tokens.color.gray2,
-  import_tokens.color.gray3,
-  import_tokens.color.gray4,
-  import_tokens.color.gray5,
-  import_tokens.color.gray6,
-  import_tokens.color.gray7,
-  import_tokens.color.gray8,
-  import_tokens.color.gray9,
-  import_tokens.color.gray10,
-  import_tokens.color.gray11,
-  import_tokens.color.gray12
-];
-const darkGradient = [
-  "#111111",
-  "#151515",
-  "#191919",
-  "#232323",
-  "#282828",
-  "#323232",
-  "#383838",
-  "#424242",
-  "#494949",
-  "#545454",
-  "#626262",
-  "#777777"
-];
-const lightThemes = createThemesFrom("light", createTheme, {
-  backgrounds: lightGradient,
-  backgroundStrong: "#fcfcfc",
-  borderColors: lightGradient.slice(2),
-  isLight: true
-});
-const darkThemes = createThemesFrom("dark", createTheme, {
-  backgrounds: darkGradient,
-  colors: lightGradient.slice(2),
-  backgroundStrong: "#111",
-  isBase: true,
-  isLight: false,
-  shift: 1,
-  offsets: {
-    color: [0, 4, 5, 5, 5, 5]
-  }
-});
-const baseThemes = __spreadProps(__spreadValues(__spreadProps(__spreadValues({}, lightThemes), {
-  light: __spreadValues(__spreadValues({}, import_colors.allLightColors), lightThemes.light),
-  light_active: makeActiveTheme(lightThemes.light),
-  light_Card: lightThemes.light,
-  light_DrawerFrame: lightThemes.light_alt1,
-  light_Button: lightThemes.light_alt1
-}), darkThemes), {
-  dark: __spreadValues(__spreadValues({}, import_colors.allDarkColors), darkThemes.dark),
-  dark_active: makeActiveTheme(darkThemes.dark),
-  dark_Card: darkThemes.dark_alt1,
-  dark_DrawerFrame: darkThemes.dark_alt2,
-  dark_Button: darkThemes.dark_alt1
-});
-function makeActiveTheme(theme) {
-  const res = __spreadValues({}, theme);
-  res.backgroundHover = res.background;
-  res.colorHover = res.color;
-  res.backgroundPress = res.background;
-  res.colorPress = res.color;
-  return res;
-}
-__name(makeActiveTheme, "makeActiveTheme");
-const colorThemeEntries = colorSchemes.flatMap(({ name, colors, darkColors }) => {
-  const [altLightThemes, altDarkThemes] = [
-    { colors: darkColors, backgrounds: colors },
-    { colors, backgrounds: darkColors }
-  ].map((props, i) => {
-    const isLight = i === 0;
-    const [backgrounds, colors2] = [
-      Object.values(props.backgrounds),
-      Object.values(props.colors).slice(isLight ? 2 : 2)
-    ];
-    const scheme = isLight ? "light" : "dark";
-    const shift = isLight ? 0 : 1;
-    if (!isLight) {
-      const [_, h, sp, lp] = backgrounds[0].match(/hsl\(([0-9\.]+), ([0-9\.]+)\%, ([0-9\.]+)\%\)/);
-      backgrounds.unshift(`hsl(${h}, ${sp}%, ${parseFloat(lp) / 2}%)`);
-    }
-    const themeWithAlts = createThemesFrom(name, createTheme, {
-      colors: colors2,
-      backgrounds,
-      borderColors: backgrounds,
-      isLight,
-      shift,
-      isBase: false,
-      offsets: {
-        background: isLight ? [1, 1, 1, 1, 1, 1] : null,
-        borderColor: isLight ? [2, 2, 2, 3, 2] : null,
-        color: isLight ? [0, 0, -1, -2, -3, -3, -4] : [-1, -1, -1, -1, -1, -1]
-      }
-    });
-    return Object.entries(themeWithAlts).map(([k, v]) => [`${scheme}_${k}`, v]);
-  });
-  const lightButtonTheme = altLightThemes[0];
-  const darkButtonTheme = altDarkThemes[0];
-  return [
-    ...altLightThemes,
-    [`${lightButtonTheme[0]}_Button`, altLightThemes[2][1]],
-    [`${lightButtonTheme[0]}_Card`, altLightThemes[2][1]],
-    [`${lightButtonTheme[0]}_DrawerFrame`, altLightThemes[2][1]],
-    ...altDarkThemes,
-    [`${darkButtonTheme[0]}_Button`, altDarkThemes[2][1]],
-    [`${darkButtonTheme[0]}_Card`, altDarkThemes[2][1]],
-    [`${darkButtonTheme[0]}_DrawerFrame`, altDarkThemes[2][1]]
-  ];
+const themes = (0, import_create_themes.createThemes)({
+  activeColor: "blue",
+  light: [
+    "#fff",
+    "#f4f4f4",
+    "hsl(0, 0%, 99.0%)",
+    "hsl(0, 0%, 97.3%)",
+    "hsl(0, 0%, 95.1%)",
+    "hsl(0, 0%, 93.0%)",
+    "hsl(0, 0%, 90.9%)",
+    "hsl(0, 0%, 88.7%)",
+    "hsl(0, 0%, 85.8%)",
+    "hsl(0, 0%, 78.0%)",
+    "hsl(0, 0%, 56.1%)",
+    "hsl(0, 0%, 52.3%)",
+    "hsl(0, 0%, 43.5%)",
+    "hsl(0, 0%, 9.0%)"
+  ],
+  dark: [
+    "#111111",
+    "#151515",
+    "#191919",
+    "#232323",
+    "#282828",
+    "#323232",
+    "#383838",
+    "#424242",
+    "#494949",
+    "#545454",
+    "#626262",
+    "#777777"
+  ],
+  colorsLight: import_tokens.colorTokens.light,
+  colorsDark: import_tokens.colorTokens.dark
 });
-const colorThemes = Object.fromEntries(colorThemeEntries);
-const allThemes = __spreadValues(__spreadValues({}, baseThemes), colorThemes);
-const themes = allThemes;
 // Annotate the CommonJS export names for ESM import in node:
 0 && (module.exports = {
-  colorSchemes,
-  darkGradient,
-  lightGradient,
   themes
 });
 //# sourceMappingURL=themes.js.map

package/dist/cjs/themes.js.map

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../src/themes.tsx"],
-  "sourcesContent": ["import * as Colors from '@tamagui/colors'\nimport { allDarkColors, allLightColors } from '@tamagui/colors'\nimport { Variable, getVariableValue } from '@tamagui/core'\n\nimport { setColorAlpha } from './colorUtils'\nimport { color } from './tokens'\n\n// spaghetti ahead\n\ntype ThemeCreatorProps = {\n  shift?: number\n  backgrounds: (string | Variable)[]\n  backgroundStrong?: string | Variable\n  borderColors?: (string | Variable)[]\n  colors?: (string | Variable)[]\n  offsets?: {\n    color?: number[] | null\n    background?: number[] | null\n    borderColor?: number[] | null\n  }\n  isLight?: boolean\n  isBase?: boolean\n}\n\n// helpers\n\nconst alternates = [1, 2, 3, 4] as const\ntype AltKeys = 1 | 2 | 3 | 4 // one less for dark_darker\ntype AltName<Name extends string, Keys extends string | number> = `${Name}_alt${Keys}`\ntype ThemeCreator<A = any> = (str: number, props: ThemeCreatorProps) => A\n\nfunction createThemesFrom<Name extends string, GetTheme extends ThemeCreator = ThemeCreator>(\n  name: Name,\n  getTheme: GetTheme,\n  props: ThemeCreatorProps\n): {\n  [key in `${Name}_alt${AltKeys}` | `${Name}` | `${Name}_darker`]: GetTheme extends ThemeCreator<\n    infer Theme\n  >\n    ? Theme\n    : never\n} {\n  const { shift = 0 } = props\n  const theme = getTheme(0 + shift, props)\n  let themeEntries: any[] = [[name, theme]]\n  const altThemes: any[] = alternates.map((alt) => [\n    `${name}_alt${alt}`,\n    getTheme(alt + shift, props),\n  ])\n  const altButtonThemes: any[] = alternates.map((_, i) => {\n    const [bName, bTheme] = [altThemes[i][0], (altThemes[i + 1] || altThemes[i])[1]]\n    return [`${bName}_Button` as any, bTheme]\n  })\n  // add these after alts since we rely on positioning\n  const darkerTheme = getTheme(Math.max(0, shift + (props.isLight ? 1 : -1)), props)\n  const activeTheme = makeActiveTheme(theme)\n  themeEntries = [\n    ...themeEntries,\n    ...altThemes,\n    ...altButtonThemes,\n    [`${name}_Button`, altThemes[0][1]],\n    [`${name}_darker`, darkerTheme],\n    [`${name}_active`, activeTheme],\n  ]\n  const themes = Object.fromEntries(themeEntries)\n  // if (props.isLight) {\n  //   console.log('themes', themes)\n  // }\n  return themes as any\n}\n\nconst createTheme = (\n  str = 1,\n  {\n    backgrounds,\n    isLight = true,\n    isBase = false,\n    colors = [...backgrounds].reverse(),\n    borderColors = isLight ? colors : backgrounds,\n    backgroundStrong,\n    offsets: offsetsProp,\n  }: ThemeCreatorProps\n) => {\n  const offsets = {\n    borderColor: offsetsProp?.borderColor ?? offsetsProp?.background ?? [0, 0, 0, 0],\n    background: offsetsProp?.background ?? [0, 0, 0, 0],\n    color: offsetsProp?.color ?? [0, 0, 0, 0],\n  }\n  const darkColors = isLight ? colors : backgrounds\n  const lighterDir = isLight ? -1 : 1\n  const darkerDir = -lighterDir\n  const strongerDir = isLight ? darkerDir : lighterDir\n  const softerDir = -strongerDir\n  const get = (arr: any[], index: number, name = 'background') => {\n    return arr[Math.max(0, Math.min(index + (offsets[name][str] || 0), arr.length - 1))]\n  }\n\n  const colorTranslucent = setColorAlpha(getVariableValue(get(colors, 0 + str, 'color')), 0.5)\n\n  let theme = {\n    background: get(backgrounds, str),\n    backgroundStrong: backgroundStrong || get(backgrounds, str + strongerDir * 2),\n    backgroundSoft: get(backgrounds, str + softerDir * 2),\n    backgroundHover: get(backgrounds, str + lighterDir),\n    backgroundPress: get(backgrounds, str + darkerDir),\n    backgroundFocus: get(backgrounds, str + darkerDir * 2),\n    backgroundTransparent: color.grayA1,\n    color: get(colors, 0 + str, 'color'),\n    colorHover: get(colors, 1 + str, 'color'),\n    colorPress: get(colors, 2 + str, 'color'),\n    colorFocus: get(colors, 3 + str, 'color'),\n    colorTranslucent,\n    colorMid: colors[Math.floor(colors.length / 2)],\n    shadowColor: isLight ? color.grayA2 : color.grayA8,\n    shadowColorHover: darkColors[!isLight ? 1 : 8],\n    shadowColorPress: darkColors[!isLight ? 1 : 8],\n    shadowColorFocus: darkColors[!isLight ? 1 : 8],\n    borderColor: null as any as string | Variable,\n    borderColorHover: null as any as string | Variable,\n    borderColorPress: null as any as string | Variable,\n    borderColorFocus: null as any as string | Variable,\n  }\n\n  if (isBase) {\n    Object.assign(theme, {\n      borderColor: isLight\n        ? get(colors, 8 - str, 'borderColor')\n        : get(backgrounds, 2 + str, 'borderColor'),\n      borderColorHover: isLight\n        ? get(colors, 6 - str, 'borderColor')\n        : get(backgrounds, 3 + str, 'borderColor'),\n      borderColorPress: isLight\n        ? get(colors, 5 - str, 'borderColor')\n        : get(backgrounds, 1 + str, 'borderColor'),\n      borderColorFocus: isLight\n        ? get(colors, 4 - str, 'borderColor')\n        : get(backgrounds, 3 + str, 'borderColor'),\n    })\n  } else {\n    Object.assign(theme, {\n      borderColor: get(borderColors, 1 + strongerDir, 'borderColor'),\n      borderColorHover: get(borderColors, 2 + strongerDir, 'borderColor'),\n      borderColorPress: get(borderColors, 3 + strongerDir, 'borderColor'),\n      borderColorFocus: get(borderColors, 4 + strongerDir, 'borderColor'),\n    })\n  }\n\n  return theme\n}\n\nexport const colorSchemes = [\n  { name: 'blue', colors: Colors.blue, darkColors: Colors.blueDark },\n  { name: 'gray', colors: Colors.gray, darkColors: Colors.grayDark },\n  { name: 'green', colors: Colors.green, darkColors: Colors.greenDark },\n  { name: 'indigo', colors: Colors.indigo, darkColors: Colors.indigoDark },\n  { name: 'orange', colors: Colors.orange, darkColors: Colors.orangeDark },\n  { name: 'pink', colors: Colors.pink, darkColors: Colors.pinkDark },\n  { name: 'purple', colors: Colors.purple, darkColors: Colors.purpleDark },\n  { name: 'red', colors: Colors.red, darkColors: Colors.redDark },\n  { name: 'violet', colors: Colors.violet, darkColors: Colors.violetDark },\n  { name: 'yellow', colors: Colors.yellow, darkColors: Colors.yellowDark },\n  { name: 'teal', colors: Colors.teal, darkColors: Colors.tealDark },\n  { name: 'lime', colors: Colors.lime, darkColors: Colors.limeDark },\n  { name: 'brown', colors: Colors.brown, darkColors: Colors.brownDark },\n] as const\n\nexport type ColorNames = typeof colorSchemes[number]['name']\n\nexport const lightGradient = [\n  '#fff',\n  '#f4f4f4',\n  color.gray1,\n  color.gray2,\n  color.gray3,\n  color.gray4,\n  color.gray5,\n  color.gray6,\n  color.gray7,\n  color.gray8,\n  color.gray9,\n  color.gray10,\n  color.gray11,\n  color.gray12,\n]\n\nexport const darkGradient = [\n  '#111111',\n  '#151515',\n  '#191919',\n  '#232323',\n  '#282828',\n  '#323232',\n  '#383838',\n  '#424242',\n  '#494949',\n  '#545454',\n  '#626262',\n  '#777777',\n]\n\nconst lightThemes = createThemesFrom('light', createTheme, {\n  backgrounds: lightGradient,\n  // isBase: true,\n  backgroundStrong: '#fcfcfc',\n  borderColors: lightGradient.slice(2),\n  isLight: true,\n})\n\nconst darkThemes = createThemesFrom('dark', createTheme, {\n  backgrounds: darkGradient,\n  colors: lightGradient.slice(2),\n  backgroundStrong: '#111',\n  isBase: true,\n  isLight: false,\n  shift: 1,\n  offsets: {\n    color: [0, 4, 5, 5, 5, 5],\n  },\n})\n\nconst baseThemes = {\n  // light\n  ...lightThemes,\n  light: {\n    ...allLightColors,\n    ...lightThemes.light,\n  },\n  light_active: makeActiveTheme(lightThemes.light),\n  light_Card: lightThemes.light,\n  light_DrawerFrame: lightThemes.light_alt1,\n  light_Button: lightThemes.light_alt1,\n\n  // dark\n  ...darkThemes,\n  dark: {\n    ...allDarkColors,\n    ...darkThemes.dark,\n  },\n  dark_active: makeActiveTheme(darkThemes.dark),\n  dark_Card: darkThemes.dark_alt1,\n  dark_DrawerFrame: darkThemes.dark_alt2,\n  dark_Button: darkThemes.dark_alt1,\n}\n\nfunction makeActiveTheme(theme: any) {\n  const res = { ...theme }\n  res.backgroundHover = res.background\n  res.colorHover = res.color\n  res.backgroundPress = res.background\n  res.colorPress = res.color\n  return res\n}\n\ntype ColorThemeNames =\n  | ColorNames\n  | AltName<`light_${ColorNames}`, AltKeys>\n  | AltName<`dark_${ColorNames}`, AltKeys>\n\nconst colorThemeEntries = colorSchemes.flatMap(({ name, colors, darkColors }) => {\n  const [altLightThemes, altDarkThemes] = [\n    { colors: darkColors, backgrounds: colors },\n    { colors, backgrounds: darkColors },\n  ].map((props, i) => {\n    const isLight = i === 0\n    const [backgrounds, colors] = [\n      Object.values(props.backgrounds),\n      Object.values(props.colors).slice(isLight ? 2 : 2),\n    ] as const\n\n    const scheme = isLight ? 'light' : 'dark'\n    const shift = isLight ? 0 : 1\n\n    if (!isLight) {\n      const [_, h, sp, lp] = backgrounds[0].match(/hsl\\(([0-9\\.]+), ([0-9\\.]+)\\%, ([0-9\\.]+)\\%\\)/)!\n      backgrounds.unshift(`hsl(${h}, ${sp}%, ${parseFloat(lp) / 2}%)`)\n    }\n\n    const themeWithAlts = createThemesFrom(name, createTheme, {\n      colors,\n      backgrounds,\n      borderColors: backgrounds,\n      isLight,\n      shift,\n      isBase: false,\n      offsets: {\n        background: isLight ? [1, 1, 1, 1, 1, 1] : null,\n        borderColor: isLight ? [2, 2, 2, 3, 2] : null,\n        color: isLight ? [0, 0, -1, -2, -3, -3, -4] : [-1, -1, -1, -1, -1, -1],\n      },\n    })\n\n    return Object.entries(themeWithAlts).map(([k, v]) => [`${scheme}_${k}`, v])\n  })\n  const lightButtonTheme = altLightThemes[0]\n  const darkButtonTheme = altDarkThemes[0]\n  return [\n    ...altLightThemes,\n    [`${lightButtonTheme[0]}_Button`, altLightThemes[2][1]],\n    [`${lightButtonTheme[0]}_Card`, altLightThemes[2][1]],\n    [`${lightButtonTheme[0]}_DrawerFrame`, altLightThemes[2][1]],\n    ...altDarkThemes,\n    [`${darkButtonTheme[0]}_Button`, altDarkThemes[2][1]],\n    [`${darkButtonTheme[0]}_Card`, altDarkThemes[2][1]],\n    [`${darkButtonTheme[0]}_DrawerFrame`, altDarkThemes[2][1]],\n  ]\n})\n\ntype MyThemeBase = typeof baseThemes['light_alt1']\n\nconst colorThemes: {\n  [key in ColorThemeNames]: MyThemeBase\n} = Object.fromEntries(colorThemeEntries) as any\n\nconst allThemes = {\n  ...baseThemes,\n  ...colorThemes,\n} as const\n\nexport const themes: {\n  [key in keyof typeof allThemes]: typeof baseThemes['light']\n} = allThemes as any\n\n// TODO\n// export function createThemes(props: {\n//   colors?:\n//     | 'amber'\n//     | 'blue'\n//     | 'bronze'\n//     | 'brown'\n//     | 'crimson'\n//     | 'cyan'\n//     | 'gold'\n//     | 'grass'\n//     | 'gray'\n//     | 'green'\n//     | 'indigo'\n//     | 'lime'\n//     | 'mint'\n//     | 'olive'\n//     | 'orange'\n//     | 'pink'\n//     | 'plum'\n//     | 'purple'\n//     | 'mauve'\n//     | 'red'\n//     | 'sage'\n//     | 'sand'\n//     | 'sky'\n//     | 'slate'\n//     | 'teal'\n//     | 'tomato'\n//     | 'violet'\n//     | 'yellow'\n//   alternates?: number\n// }) {}\n"],
-  "mappings": "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",
+  "sourcesContent": ["import { createThemes } from '@tamagui/create-themes'\n\nimport { colorTokens } from './tokens'\n\nexport const themes = createThemes<keyof typeof colorTokens.light>({\n  activeColor: 'blue',\n  light: [\n    '#fff',\n    '#f4f4f4',\n    'hsl(0, 0%, 99.0%)',\n    'hsl(0, 0%, 97.3%)',\n    'hsl(0, 0%, 95.1%)',\n    'hsl(0, 0%, 93.0%)',\n    'hsl(0, 0%, 90.9%)',\n    'hsl(0, 0%, 88.7%)',\n    'hsl(0, 0%, 85.8%)',\n    'hsl(0, 0%, 78.0%)',\n    'hsl(0, 0%, 56.1%)',\n    'hsl(0, 0%, 52.3%)',\n    'hsl(0, 0%, 43.5%)',\n    'hsl(0, 0%, 9.0%)',\n  ],\n  dark: [\n    '#111111',\n    '#151515',\n    '#191919',\n    '#232323',\n    '#282828',\n    '#323232',\n    '#383838',\n    '#424242',\n    '#494949',\n    '#545454',\n    '#626262',\n    '#777777',\n  ],\n  colorsLight: colorTokens.light,\n  colorsDark: colorTokens.dark,\n})\n"],
+  "mappings": ";;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,2BAA6B;AAE7B,oBAA4B;AAErB,MAAM,aAAS,mCAA6C;AAAA,EACjE,aAAa;AAAA,EACb,OAAO;AAAA,IACL;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,EACF;AAAA,EACA,MAAM;AAAA,IACJ;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,EACF;AAAA,EACA,aAAa,0BAAY;AAAA,EACzB,YAAY,0BAAY;AAC1B,CAAC;",
   "names": []
 }

package/dist/cjs/tokens.js

@@ -1,22 +1,8 @@
+"use strict";
 var __defProp = Object.defineProperty;
 var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
 var __getOwnPropNames = Object.getOwnPropertyNames;
-var __getOwnPropSymbols = Object.getOwnPropertySymbols;
 var __hasOwnProp = Object.prototype.hasOwnProperty;
-var __propIsEnum = Object.prototype.propertyIsEnumerable;
-var __defNormalProp = (obj, key, value) => key in obj ? __defProp(obj, key, { enumerable: true, configurable: true, writable: true, value }) : obj[key] = value;
-var __spreadValues = (a, b) => {
-  for (var prop in b || (b = {}))
-    if (__hasOwnProp.call(b, prop))
-      __defNormalProp(a, prop, b[prop]);
-  if (__getOwnPropSymbols)
-    for (var prop of __getOwnPropSymbols(b)) {
-      if (__propIsEnum.call(b, prop))
-        __defNormalProp(a, prop, b[prop]);
-    }
-  return a;
-};
-var __name = (target, value) => __defProp(target, "name", { value, configurable: true });
 var __export = (target, all) => {
   for (var name in all)
     __defProp(target, name, { get: all[name], enumerable: true });
@@ -33,21 +19,58 @@ var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: tru
 var tokens_exports = {};
 __export(tokens_exports, {
   color: () => color,
-  getSizeAt: () => getSizeAt,
+  colorTokens: () => colorTokens,
+  darkColors: () => darkColors,
+  lightColors: () => lightColors,
   radius: () => radius,
   size: () => size,
-  sizeKeys: () => sizeKeys,
   space: () => space,
+  tokens: () => tokens,
   zIndex: () => zIndex
 });
 module.exports = __toCommonJS(tokens_exports);
 var import_colors = require("@tamagui/colors");
-const sizeKeys = ["true", "0", "0.25", "0.5", "1", "1.5", "2", "2.5", "3", "3.5", "4", "4.5", "5", "5.5", "6", "6.5", "7", "7.5", "8", "9", "10", "11", "12", "13", "14"];
-const getSizeAt = /* @__PURE__ */ __name((index) => index === 0 ? 0 : Math.round(Math.pow(1.6, index)) + Math.floor(3 * index), "getSizeAt");
-const size = Object.fromEntries(sizeKeys.map((key) => {
-  return [key, getSizeAt(key === "true" ? 4 : +key)];
-}));
-const space = __spreadValues(__spreadValues({}, size), Object.fromEntries(Object.entries(size).map(([k, v]) => [`-${k}`, -v])));
+var import_core = require("@tamagui/core");
+const size = {
+  0: 0,
+  0.25: 2,
+  0.5: 4,
+  0.75: 8,
+  1: 20,
+  1.5: 24,
+  2: 28,
+  2.5: 32,
+  3: 36,
+  3.5: 40,
+  4: 44,
+  true: 44,
+  4.5: 48,
+  5: 52,
+  6: 64,
+  7: 74,
+  8: 84,
+  9: 94,
+  10: 104,
+  11: 124,
+  12: 144,
+  13: 164,
+  14: 184,
+  15: 204,
+  16: 224,
+  17: 224,
+  18: 244,
+  19: 264,
+  20: 284
+};
+const spaces = Object.entries(size).map(([k, v]) => [
+  k,
+  Math.max(0, v <= 16 ? Math.round(v * 0.333) : Math.floor(v * 0.7 - 12))
+]);
+const spacesNegative = spaces.map(([k, v]) => [`-${k}`, -v]);
+const space = {
+  ...Object.fromEntries(spaces),
+  ...Object.fromEntries(spacesNegative)
+};
 const zIndex = {
   0: 0,
   1: 100,
@@ -56,7 +79,55 @@ const zIndex = {
   4: 400,
   5: 500
 };
-const color = __spreadValues(__spreadValues({}, import_colors.allLightColors), import_colors.darkColorsPostfixed);
+const colorTokens = {
+  light: {
+    blue: import_colors.blue,
+    gray: import_colors.gray,
+    green: import_colors.green,
+    orange: import_colors.orange,
+    pink: import_colors.pink,
+    purple: import_colors.purple,
+    red: import_colors.red,
+    yellow: import_colors.yellow
+  },
+  dark: {
+    blue: import_colors.blueDark,
+    gray: import_colors.grayDark,
+    green: import_colors.greenDark,
+    orange: import_colors.orangeDark,
+    pink: import_colors.pinkDark,
+    purple: import_colors.purpleDark,
+    red: import_colors.redDark,
+    yellow: import_colors.yellowDark
+  }
+};
+const darkColors = {
+  ...colorTokens.dark.blue,
+  ...colorTokens.dark.gray,
+  ...colorTokens.dark.green,
+  ...colorTokens.dark.orange,
+  ...colorTokens.dark.pink,
+  ...colorTokens.dark.purple,
+  ...colorTokens.dark.red,
+  ...colorTokens.dark.yellow
+};
+const lightColors = {
+  ...colorTokens.light.blue,
+  ...colorTokens.light.gray,
+  ...colorTokens.light.green,
+  ...colorTokens.light.orange,
+  ...colorTokens.light.pink,
+  ...colorTokens.light.purple,
+  ...colorTokens.light.red,
+  ...colorTokens.light.yellow
+};
+const color = {
+  ...postfixObjKeys(lightColors, "Light"),
+  ...postfixObjKeys(darkColors, "Dark")
+};
+function postfixObjKeys(obj, postfix) {
+  return Object.fromEntries(Object.entries(obj).map(([k, v]) => [`${k}${postfix}`, v]));
+}
 const radius = {
   0: 0,
   1: 3,
@@ -64,19 +135,31 @@ const radius = {
   3: 7,
   4: 9,
   5: 10,
-  6: 12,
-  7: 16,
-  8: 20,
-  9: 30
+  6: 16,
+  7: 19,
+  8: 22,
+  9: 26,
+  10: 34,
+  11: 42,
+  12: 50
 };
+const tokens = (0, import_core.createTokens)({
+  color,
+  radius,
+  zIndex,
+  space,
+  size
+});
 // Annotate the CommonJS export names for ESM import in node:
 0 && (module.exports = {
   color,
-  getSizeAt,
+  colorTokens,
+  darkColors,
+  lightColors,
   radius,
   size,
-  sizeKeys,
   space,
+  tokens,
   zIndex
 });
 //# sourceMappingURL=tokens.js.map