@tamagui/theme-base 1.3.1 → 1.5.0

package/dist/cjs/themesv2.js

@@ -0,0 +1,223 @@
+"use strict";
+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))
+      if (!__hasOwnProp.call(to, key) && key !== except)
+        __defProp(to, key, { get: () => from[key], enumerable: !(desc = __getOwnPropDesc(from, key)) || desc.enumerable });
+  }
+  return to;
+};
+var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: true }), mod);
+var themesv2_exports = {};
+__export(themesv2_exports, {
+  themes: () => themes
+});
+module.exports = __toCommonJS(themesv2_exports);
+var import_create_theme = require("@tamagui/create-theme");
+var import_tokens = require("./tokens");
+const lightTransparent = "rgba(255,255,255,0)";
+const darkTransparent = "rgba(10,10,10,0)";
+const palettes = {
+  dark: [
+    darkTransparent,
+    "#090909",
+    "#151515",
+    "#191919",
+    "#232323",
+    "#282828",
+    "#323232",
+    "#424242",
+    "#494949",
+    "#545454",
+    "#626262",
+    "#a5a5a5",
+    "#fff",
+    lightTransparent
+  ],
+  light: [
+    lightTransparent,
+    "#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%, 80.0%)",
+    "hsl(0, 0%, 56.1%)",
+    "hsl(0, 0%, 52.3%)",
+    "hsl(0, 0%, 43.5%)",
+    "hsl(0, 0%, 9.0%)",
+    darkTransparent
+  ]
+};
+const colorScale = {
+  color1: 1,
+  color2: 2,
+  color3: 3,
+  color4: 4,
+  color5: 5,
+  color6: 6,
+  color7: 7,
+  color8: 8,
+  color9: 9,
+  color10: 10,
+  color11: 11,
+  color12: 12
+};
+const skip = {
+  ...colorScale,
+  shadowColor: 1,
+  shadowColorHover: 1,
+  shadowColorPress: 2,
+  shadowColorFocus: 2
+};
+const template = {
+  ...skip,
+  // the background, color, etc keys here work like generics - they make it so you
+  // can publish components for others to use without mandating a specific color scale
+  // the @tamagui/button Button component looks for `$background`, so you set the
+  // dark_red_Button theme to have a stronger background than the dark_red theme.
+  background: 2,
+  backgroundHover: 3,
+  backgroundPress: 1,
+  backgroundFocus: 2,
+  backgroundStrong: 1,
+  backgroundTransparent: 0,
+  color: -1,
+  colorHover: -2,
+  colorPress: -1,
+  colorFocus: -2,
+  colorTransparent: -0,
+  borderColor: 3,
+  borderColorHover: 4,
+  borderColorPress: 2,
+  borderColorFocus: 3,
+  placeholderColor: -4
+};
+const lightShadowColor = "rgba(0,0,0,0.15)";
+const lightShadowColorStrong = "rgba(0,0,0,0.2)";
+const darkShadowColor = "rgba(0,0,0,0.5)";
+const darkShadowColorStrong = "rgba(0,0,0,0.7)";
+const lightShadows = {
+  shadowColor: lightShadowColorStrong,
+  shadowColorHover: lightShadowColorStrong,
+  shadowColorPress: lightShadowColor,
+  shadowColorFocus: lightShadowColor
+};
+const darkShadows = {
+  shadowColor: darkShadowColorStrong,
+  shadowColorHover: darkShadowColorStrong,
+  shadowColorPress: darkShadowColor,
+  shadowColorFocus: darkShadowColor
+};
+const lightTemplate = {
+  ...template,
+  ...lightShadows
+};
+const darkTemplate = { ...template, ...darkShadows };
+const light = (0, import_create_theme.createTheme)(palettes.light, lightTemplate, {
+  nonInheritedValues: import_tokens.lightColors
+});
+const dark = (0, import_create_theme.createTheme)(palettes.dark, darkTemplate, { nonInheritedValues: import_tokens.darkColors });
+const baseThemes = {
+  light,
+  dark
+};
+const max = palettes.dark.length - 1;
+const masks = {
+  weaker: (0, import_create_theme.createWeakenMask)({
+    by: 1,
+    min: 1,
+    max
+  }),
+  stronger: (0, import_create_theme.createStrengthenMask)({
+    by: 1,
+    min: 1,
+    max
+  })
+};
+const themes = (0, import_create_theme.addChildren)(baseThemes, (name, themeIn) => {
+  const theme = themeIn;
+  const inverseName = name === "light" ? "dark" : "light";
+  const inverseTheme = baseThemes[inverseName];
+  const transparent = (hsl, opacity = 0) => hsl.replace(`%)`, `%, ${opacity})`).replace(`hsl(`, `hsla(`);
+  const [colorThemes, inverseColorThemes] = [
+    import_tokens.colorTokens[name],
+    import_tokens.colorTokens[inverseName]
+  ].map((colorSet) => {
+    return Object.fromEntries(
+      Object.keys(colorSet).map((color) => {
+        const colorPalette = Object.values(colorSet[color]);
+        const first6 = colorPalette.slice(0, 6);
+        const last5 = colorPalette.slice(colorPalette.length - 5);
+        return [
+          color,
+          (0, import_create_theme.createTheme)(
+            [
+              transparent(colorPalette[0]),
+              ...first6,
+              ...last5,
+              theme.color,
+              transparent(colorPalette[colorPalette.length - 1])
+            ],
+            template
+          )
+        ];
+      })
+    );
+  });
+  return {
+    ...getAltThemes(theme, inverseTheme),
+    ...getComponentThemes(theme, inverseTheme),
+    ...(0, import_create_theme.addChildren)(colorThemes, (colorName, colorTheme) => {
+      const inverse = inverseColorThemes[colorName];
+      console.log("color", colorName);
+      return {
+        ...getAltThemes(colorTheme, inverse),
+        ...getComponentThemes(colorTheme, inverse)
+      };
+    })
+  };
+  function getComponentThemes(theme2, inverse) {
+    const stronger1 = (0, import_create_theme.applyMask)(theme2, masks.stronger, { skip });
+    const stronger2 = (0, import_create_theme.applyMask)(stronger1, masks.stronger, { skip });
+    console.log("stronger2", { theme: theme2, stronger1, stronger2 });
+    const inverse1 = (0, import_create_theme.applyMask)(inverse, masks.weaker, { skip });
+    const inverse2 = (0, import_create_theme.applyMask)(inverse1, masks.weaker, { skip });
+    return {
+      Button: stronger2,
+      DrawerFrame: stronger1,
+      SliderTrack: theme2,
+      SliderTrackActive: stronger2,
+      SliderThumb: inverse1,
+      Progress: stronger1,
+      ProgressIndicator: inverse,
+      Switch: stronger2,
+      SwitchThumb: inverse2,
+      TooltipArrow: stronger1,
+      TooltipContent: stronger2
+    };
+  }
+  function getAltThemes(theme2, inverse) {
+    const alt1 = (0, import_create_theme.applyMask)(theme2, masks.weaker, { skip });
+    const alt2 = (0, import_create_theme.applyMask)(alt1, masks.weaker, { skip });
+    return (0, import_create_theme.addChildren)({ alt1, alt2 }, (name2, theme3) => {
+      return getComponentThemes(theme3, inverse);
+    });
+  }
+});
+globalThis["themes"] = themes;
+// Annotate the CommonJS export names for ESM import in node:
+0 && (module.exports = {
+  themes
+});
+//# sourceMappingURL=themesv2.js.map

package/dist/cjs/themesv2.js.map

@@ -0,0 +1,7 @@
+{
+  "version": 3,
+  "sources": ["../../src/themesv2.tsx"],
+  "sourcesContent": ["import {\n  addChildren,\n  applyMask,\n  createStrengthenMask,\n  createTheme,\n  createWeakenMask,\n} from '@tamagui/create-theme'\n\nimport { colorTokens, darkColors, lightColors } from './tokens'\n\ntype ColorName = keyof typeof colorTokens.dark\n\nconst lightTransparent = 'rgba(255,255,255,0)'\nconst darkTransparent = 'rgba(10,10,10,0)'\n\n// background => foreground\nconst palettes = {\n  dark: [\n    darkTransparent,\n    '#090909',\n    '#151515',\n    '#191919',\n    '#232323',\n    '#282828',\n    '#323232',\n    '#424242',\n    '#494949',\n    '#545454',\n    '#626262',\n    '#a5a5a5',\n    '#fff',\n    lightTransparent,\n  ],\n  light: [\n    lightTransparent,\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%, 80.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    darkTransparent,\n  ],\n}\n\nconst colorScale = {\n  color1: 1,\n  color2: 2,\n  color3: 3,\n  color4: 4,\n  color5: 5,\n  color6: 6,\n  color7: 7,\n  color8: 8,\n  color9: 9,\n  color10: 10,\n  color11: 11,\n  color12: 12,\n}\n\n// we can use subset of our template as a \"skip\" so it doesn't get adjusted with masks\nconst skip = {\n  ...colorScale,\n  shadowColor: 1,\n  shadowColorHover: 1,\n  shadowColorPress: 2,\n  shadowColorFocus: 2,\n}\n\n// templates use the palette and specify index\n// negative goes backwards from end so -1 is the last item\nconst template = {\n  ...skip,\n  // the background, color, etc keys here work like generics - they make it so you\n  // can publish components for others to use without mandating a specific color scale\n  // the @tamagui/button Button component looks for `$background`, so you set the\n  // dark_red_Button theme to have a stronger background than the dark_red theme.\n  background: 2,\n  backgroundHover: 3,\n  backgroundPress: 1,\n  backgroundFocus: 2,\n  backgroundStrong: 1,\n  backgroundTransparent: 0,\n  color: -1,\n  colorHover: -2,\n  colorPress: -1,\n  colorFocus: -2,\n  colorTransparent: -0,\n  borderColor: 3,\n  borderColorHover: 4,\n  borderColorPress: 2,\n  borderColorFocus: 3,\n  placeholderColor: -4,\n}\n\nconst lightShadowColor = 'rgba(0,0,0,0.15)'\nconst lightShadowColorStrong = 'rgba(0,0,0,0.2)'\nconst darkShadowColor = 'rgba(0,0,0,0.5)'\nconst darkShadowColorStrong = 'rgba(0,0,0,0.7)'\n\nconst lightShadows = {\n  shadowColor: lightShadowColorStrong,\n  shadowColorHover: lightShadowColorStrong,\n  shadowColorPress: lightShadowColor,\n  shadowColorFocus: lightShadowColor,\n}\n\nconst darkShadows = {\n  shadowColor: darkShadowColorStrong,\n  shadowColorHover: darkShadowColorStrong,\n  shadowColorPress: darkShadowColor,\n  shadowColorFocus: darkShadowColor,\n}\n\nconst lightTemplate = {\n  ...template,\n  ...lightShadows,\n}\n\nconst darkTemplate = { ...template, ...darkShadows }\n\nconst light = createTheme(palettes.light, lightTemplate, {\n  nonInheritedValues: lightColors,\n})\n\nconst dark = createTheme(palettes.dark, darkTemplate, { nonInheritedValues: darkColors })\n\nconst baseThemes = {\n  light,\n  dark,\n}\n\ntype Theme = typeof light\n\n// avoid transparent ends\nconst max = palettes.dark.length - 1\nconst masks = {\n  weaker: createWeakenMask({\n    by: 1,\n    min: 1,\n    max,\n  }),\n  stronger: createStrengthenMask({\n    by: 1,\n    min: 1,\n    max,\n  }),\n}\n\nexport const themes = addChildren(baseThemes, (name, themeIn) => {\n  const theme = themeIn as Theme\n  const inverseName = name === 'light' ? 'dark' : 'light'\n  const inverseTheme = baseThemes[inverseName]\n  const transparent = (hsl: string, opacity = 0) =>\n    hsl.replace(`%)`, `%, ${opacity})`).replace(`hsl(`, `hsla(`)\n\n  // setup colorThemes and their inverses\n  const [colorThemes, inverseColorThemes] = [\n    colorTokens[name],\n    colorTokens[inverseName],\n  ].map((colorSet) => {\n    return Object.fromEntries(\n      Object.keys(colorSet).map((color) => {\n        const colorPalette = Object.values(colorSet[color as ColorName])\n        // we want a much lighter text color by default so swap them around a bit\n        const first6 = colorPalette.slice(0, 6)\n        const last5 = colorPalette.slice(colorPalette.length - 5)\n        return [\n          color,\n          createTheme(\n            [\n              transparent(colorPalette[0]),\n              ...first6,\n              ...last5,\n              theme.color,\n              transparent(colorPalette[colorPalette.length - 1]),\n            ],\n            template\n          ),\n        ]\n      })\n    ) as Record<ColorName, Theme>\n  })\n\n  return {\n    ...getAltThemes(theme, inverseTheme),\n    ...getComponentThemes(theme, inverseTheme),\n    ...addChildren(colorThemes, (colorName, colorTheme) => {\n      const inverse = inverseColorThemes[colorName]\n      console.log('color', colorName)\n      return {\n        ...getAltThemes(colorTheme as any, inverse as any),\n        ...getComponentThemes(colorTheme as any, inverse as any),\n      }\n    }),\n  }\n\n  function getComponentThemes(theme: Theme, inverse: Theme) {\n    const stronger1 = applyMask(theme, masks.stronger, { skip })\n    const stronger2 = applyMask(stronger1, masks.stronger, { skip })\n    console.log('stronger2', { theme, stronger1, stronger2 })\n    const inverse1 = applyMask(inverse, masks.weaker, { skip })\n    const inverse2 = applyMask(inverse1, masks.weaker, { skip })\n    return {\n      Button: stronger2,\n      DrawerFrame: stronger1,\n      SliderTrack: theme,\n      SliderTrackActive: stronger2,\n      SliderThumb: inverse1,\n      Progress: stronger1,\n      ProgressIndicator: inverse,\n      Switch: stronger2,\n      SwitchThumb: inverse2,\n      TooltipArrow: stronger1,\n      TooltipContent: stronger2,\n    }\n  }\n\n  function getAltThemes(theme: Theme, inverse: Theme) {\n    const alt1 = applyMask(theme, masks.weaker, { skip })\n    const alt2 = applyMask(alt1, masks.weaker, { skip })\n    return addChildren({ alt1, alt2 }, (name, theme) => {\n      return getComponentThemes(theme as any, inverse)\n    })\n  }\n})\n\nglobalThis['themes'] = themes\n"],
+  "mappings": ";;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,0BAMO;AAEP,oBAAqD;AAIrD,MAAM,mBAAmB;AACzB,MAAM,kBAAkB;AAGxB,MAAM,WAAW;AAAA,EACf,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,IACA;AAAA,IACA;AAAA,EACF;AAAA,EACA,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;AACF;AAEA,MAAM,aAAa;AAAA,EACjB,QAAQ;AAAA,EACR,QAAQ;AAAA,EACR,QAAQ;AAAA,EACR,QAAQ;AAAA,EACR,QAAQ;AAAA,EACR,QAAQ;AAAA,EACR,QAAQ;AAAA,EACR,QAAQ;AAAA,EACR,QAAQ;AAAA,EACR,SAAS;AAAA,EACT,SAAS;AAAA,EACT,SAAS;AACX;AAGA,MAAM,OAAO;AAAA,EACX,GAAG;AAAA,EACH,aAAa;AAAA,EACb,kBAAkB;AAAA,EAClB,kBAAkB;AAAA,EAClB,kBAAkB;AACpB;AAIA,MAAM,WAAW;AAAA,EACf,GAAG;AAAA;AAAA;AAAA;AAAA;AAAA,EAKH,YAAY;AAAA,EACZ,iBAAiB;AAAA,EACjB,iBAAiB;AAAA,EACjB,iBAAiB;AAAA,EACjB,kBAAkB;AAAA,EAClB,uBAAuB;AAAA,EACvB,OAAO;AAAA,EACP,YAAY;AAAA,EACZ,YAAY;AAAA,EACZ,YAAY;AAAA,EACZ,kBAAkB;AAAA,EAClB,aAAa;AAAA,EACb,kBAAkB;AAAA,EAClB,kBAAkB;AAAA,EAClB,kBAAkB;AAAA,EAClB,kBAAkB;AACpB;AAEA,MAAM,mBAAmB;AACzB,MAAM,yBAAyB;AAC/B,MAAM,kBAAkB;AACxB,MAAM,wBAAwB;AAE9B,MAAM,eAAe;AAAA,EACnB,aAAa;AAAA,EACb,kBAAkB;AAAA,EAClB,kBAAkB;AAAA,EAClB,kBAAkB;AACpB;AAEA,MAAM,cAAc;AAAA,EAClB,aAAa;AAAA,EACb,kBAAkB;AAAA,EAClB,kBAAkB;AAAA,EAClB,kBAAkB;AACpB;AAEA,MAAM,gBAAgB;AAAA,EACpB,GAAG;AAAA,EACH,GAAG;AACL;AAEA,MAAM,eAAe,EAAE,GAAG,UAAU,GAAG,YAAY;AAEnD,MAAM,YAAQ,iCAAY,SAAS,OAAO,eAAe;AAAA,EACvD,oBAAoB;AACtB,CAAC;AAED,MAAM,WAAO,iCAAY,SAAS,MAAM,cAAc,EAAE,oBAAoB,yBAAW,CAAC;AAExF,MAAM,aAAa;AAAA,EACjB;AAAA,EACA;AACF;AAKA,MAAM,MAAM,SAAS,KAAK,SAAS;AACnC,MAAM,QAAQ;AAAA,EACZ,YAAQ,sCAAiB;AAAA,IACvB,IAAI;AAAA,IACJ,KAAK;AAAA,IACL;AAAA,EACF,CAAC;AAAA,EACD,cAAU,0CAAqB;AAAA,IAC7B,IAAI;AAAA,IACJ,KAAK;AAAA,IACL;AAAA,EACF,CAAC;AACH;AAEO,MAAM,aAAS,iCAAY,YAAY,CAAC,MAAM,YAAY;AAC/D,QAAM,QAAQ;AACd,QAAM,cAAc,SAAS,UAAU,SAAS;AAChD,QAAM,eAAe,WAAW,WAAW;AAC3C,QAAM,cAAc,CAAC,KAAa,UAAU,MAC1C,IAAI,QAAQ,MAAM,MAAM,UAAU,EAAE,QAAQ,QAAQ,OAAO;AAG7D,QAAM,CAAC,aAAa,kBAAkB,IAAI;AAAA,IACxC,0BAAY,IAAI;AAAA,IAChB,0BAAY,WAAW;AAAA,EACzB,EAAE,IAAI,CAAC,aAAa;AAClB,WAAO,OAAO;AAAA,MACZ,OAAO,KAAK,QAAQ,EAAE,IAAI,CAAC,UAAU;AACnC,cAAM,eAAe,OAAO,OAAO,SAAS,KAAkB,CAAC;AAE/D,cAAM,SAAS,aAAa,MAAM,GAAG,CAAC;AACtC,cAAM,QAAQ,aAAa,MAAM,aAAa,SAAS,CAAC;AACxD,eAAO;AAAA,UACL;AAAA,cACA;AAAA,YACE;AAAA,cACE,YAAY,aAAa,CAAC,CAAC;AAAA,cAC3B,GAAG;AAAA,cACH,GAAG;AAAA,cACH,MAAM;AAAA,cACN,YAAY,aAAa,aAAa,SAAS,CAAC,CAAC;AAAA,YACnD;AAAA,YACA;AAAA,UACF;AAAA,QACF;AAAA,MACF,CAAC;AAAA,IACH;AAAA,EACF,CAAC;AAED,SAAO;AAAA,IACL,GAAG,aAAa,OAAO,YAAY;AAAA,IACnC,GAAG,mBAAmB,OAAO,YAAY;AAAA,IACzC,OAAG,iCAAY,aAAa,CAAC,WAAW,eAAe;AACrD,YAAM,UAAU,mBAAmB,SAAS;AAC5C,cAAQ,IAAI,SAAS,SAAS;AAC9B,aAAO;AAAA,QACL,GAAG,aAAa,YAAmB,OAAc;AAAA,QACjD,GAAG,mBAAmB,YAAmB,OAAc;AAAA,MACzD;AAAA,IACF,CAAC;AAAA,EACH;AAEA,WAAS,mBAAmBA,QAAc,SAAgB;AACxD,UAAM,gBAAY,+BAAUA,QAAO,MAAM,UAAU,EAAE,KAAK,CAAC;AAC3D,UAAM,gBAAY,+BAAU,WAAW,MAAM,UAAU,EAAE,KAAK,CAAC;AAC/D,YAAQ,IAAI,aAAa,EAAE,OAAAA,QAAO,WAAW,UAAU,CAAC;AACxD,UAAM,eAAW,+BAAU,SAAS,MAAM,QAAQ,EAAE,KAAK,CAAC;AAC1D,UAAM,eAAW,+BAAU,UAAU,MAAM,QAAQ,EAAE,KAAK,CAAC;AAC3D,WAAO;AAAA,MACL,QAAQ;AAAA,MACR,aAAa;AAAA,MACb,aAAaA;AAAA,MACb,mBAAmB;AAAA,MACnB,aAAa;AAAA,MACb,UAAU;AAAA,MACV,mBAAmB;AAAA,MACnB,QAAQ;AAAA,MACR,aAAa;AAAA,MACb,cAAc;AAAA,MACd,gBAAgB;AAAA,IAClB;AAAA,EACF;AAEA,WAAS,aAAaA,QAAc,SAAgB;AAClD,UAAM,WAAO,+BAAUA,QAAO,MAAM,QAAQ,EAAE,KAAK,CAAC;AACpD,UAAM,WAAO,+BAAU,MAAM,MAAM,QAAQ,EAAE,KAAK,CAAC;AACnD,eAAO,iCAAY,EAAE,MAAM,KAAK,GAAG,CAACC,OAAMD,WAAU;AAClD,aAAO,mBAAmBA,QAAc,OAAO;AAAA,IACjD,CAAC;AAAA,EACH;AACF,CAAC;AAED,WAAW,QAAQ,IAAI;",
+  "names": ["theme", "name"]
+}

package/dist/cjs/tokens.js

@@ -30,7 +30,7 @@ __export(tokens_exports, {
 });
 module.exports = __toCommonJS(tokens_exports);
 var import_colors = require("@tamagui/colors");
-var import_core = require("@tamagui/core");
+var import_web = require("@tamagui/web");
 const size = {
   $0: 0,
   "$0.25": 2,
@@ -158,7 +158,7 @@ const radius = {
   11: 42,
   12: 50
 };
-const tokens = (0, import_core.createTokens)({
+const tokens = (0, import_web.createTokens)({
   color,
   radius,
   zIndex,

package/dist/cjs/tokens.js.map

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../src/tokens.tsx"],
-  "sourcesContent": ["import {\n  blue,\n  blueDark,\n  gray,\n  grayDark,\n  green,\n  greenDark,\n  orange,\n  orangeDark,\n  pink,\n  pinkDark,\n  purple,\n  purpleDark,\n  red,\n  redDark,\n  yellow,\n  yellowDark,\n} from '@tamagui/colors'\nimport { Variable, createTokens, createVariable } from '@tamagui/core'\n\n// should roughly map to button/input etc height at each level\n// fonts should match that height/lineHeight at each stop\n// so these are really non-linear on purpose\n// why?\n//   - at sizes <1, used for fine grained things (borders, smallest paddingY)\n//     - so smallest padY should be roughly 1-4px so it can join with lineHeight\n//   - at sizes >=1, have to consider \"pressability\" (jumps up)\n//   - after that it should go upwards somewhat naturally\n//   - H1 / headings top out at 10 naturally, so after 10 we can go upwards faster\n//  but also one more wrinkle...\n//  space is used in conjunction with size\n//  i'm setting space to generally just a fixed fraction of size (~1/3-2/3 still fine tuning)\nexport const size = {\n  $0: 0,\n  '$0.25': 2,\n  '$0.5': 4,\n  '$0.75': 8,\n  $1: 20,\n  '$1.5': 24,\n  $2: 28,\n  '$2.5': 32,\n  $3: 36,\n  '$3.5': 40,\n  $4: 44,\n  $true: 44,\n  '$4.5': 48,\n  $5: 52,\n  $6: 64,\n  $7: 74,\n  $8: 84,\n  $9: 94,\n  $10: 104,\n  $11: 124,\n  $12: 144,\n  $13: 164,\n  $14: 184,\n  $15: 204,\n  $16: 224,\n  $17: 224,\n  $18: 244,\n  $19: 264,\n  $20: 284,\n}\n\ntype SizeKeysIn = keyof typeof size\ntype Sizes = {\n  [Key in SizeKeysIn extends `$${infer Key}` ? Key : SizeKeysIn]: number\n}\ntype SizeKeys = `${keyof Sizes extends `${infer K}` ? K : never}`\n\nconst spaces = Object.entries(size).map(([k, v]) => {\n  return [k, sizeToSpace(v)]\n})\n\n// a bit odd but keeping backward compat for values >8 while fixing below\nfunction sizeToSpace(v: number) {\n  if (v === 0) return 0\n  if (v === 2) return 0.5\n  if (v === 4) return 1\n  if (v === 8) return 1.5\n  if (v <= 16) return Math.round(v * 0.333)\n  return Math.floor(v * 0.7 - 12)\n}\n\nconst spacesNegative = spaces.map(([k, v]) => [`-${(k as string).slice(1)}`, -v])\n\ntype SizeKeysWithNegatives =\n  | `-${SizeKeys extends `$${infer Key}` ? Key : SizeKeys}`\n  | SizeKeys\n\nexport const space: {\n  [Key in SizeKeysWithNegatives]: Key extends keyof Sizes ? Sizes[Key] : number\n} = {\n  ...Object.fromEntries(spaces),\n  ...Object.fromEntries(spacesNegative),\n} as any\n\nexport const zIndex = {\n  0: 0,\n  1: 100,\n  2: 200,\n  3: 300,\n  4: 400,\n  5: 500,\n}\n\nexport const colorTokens = {\n  light: {\n    blue: blue,\n    gray: gray,\n    green: green,\n    orange: orange,\n    pink: pink,\n    purple: purple,\n    red: red,\n    yellow: yellow,\n  },\n  dark: {\n    blue: blueDark,\n    gray: grayDark,\n    green: greenDark,\n    orange: orangeDark,\n    pink: pinkDark,\n    purple: purpleDark,\n    red: redDark,\n    yellow: yellowDark,\n  },\n}\n\nexport const darkColors = {\n  ...colorTokens.dark.blue,\n  ...colorTokens.dark.gray,\n  ...colorTokens.dark.green,\n  ...colorTokens.dark.orange,\n  ...colorTokens.dark.pink,\n  ...colorTokens.dark.purple,\n  ...colorTokens.dark.red,\n  ...colorTokens.dark.yellow,\n}\n\nexport const lightColors = {\n  ...colorTokens.light.blue,\n  ...colorTokens.light.gray,\n  ...colorTokens.light.green,\n  ...colorTokens.light.orange,\n  ...colorTokens.light.pink,\n  ...colorTokens.light.purple,\n  ...colorTokens.light.red,\n  ...colorTokens.light.yellow,\n}\n\nexport const color = {\n  ...postfixObjKeys(lightColors, 'Light'),\n  ...postfixObjKeys(darkColors, 'Dark'),\n}\n\nfunction postfixObjKeys<\n  A extends { [key: string]: Variable<string> | string },\n  B extends string\n>(\n  obj: A,\n  postfix: B\n): {\n  [Key in `${keyof A extends string ? keyof A : never}${B}`]: Variable<string> | string\n} {\n  return Object.fromEntries(\n    Object.entries(obj).map(([k, v]) => [`${k}${postfix}`, v])\n  ) as any\n}\n\nexport const radius = {\n  0: 0,\n  1: 3,\n  2: 5,\n  3: 7,\n  4: 9,\n  true: 9,\n  5: 10,\n  6: 16,\n  7: 19,\n  8: 22,\n  9: 26,\n  10: 34,\n  11: 42,\n  12: 50,\n}\n\nexport const tokens = createTokens({\n  color,\n  radius,\n  zIndex,\n  space,\n  size,\n})\n"],
-  "mappings": "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",
+  "sourcesContent": ["import {\n  blue,\n  blueDark,\n  gray,\n  grayDark,\n  green,\n  greenDark,\n  orange,\n  orangeDark,\n  pink,\n  pinkDark,\n  purple,\n  purpleDark,\n  red,\n  redDark,\n  yellow,\n  yellowDark,\n} from '@tamagui/colors'\nimport { Variable, createTokens } from '@tamagui/web'\n\n// should roughly map to button/input etc height at each level\n// fonts should match that height/lineHeight at each stop\n// so these are really non-linear on purpose\n// why?\n//   - at sizes <1, used for fine grained things (borders, smallest paddingY)\n//     - so smallest padY should be roughly 1-4px so it can join with lineHeight\n//   - at sizes >=1, have to consider \"pressability\" (jumps up)\n//   - after that it should go upwards somewhat naturally\n//   - H1 / headings top out at 10 naturally, so after 10 we can go upwards faster\n//  but also one more wrinkle...\n//  space is used in conjunction with size\n//  i'm setting space to generally just a fixed fraction of size (~1/3-2/3 still fine tuning)\nexport const size = {\n  $0: 0,\n  '$0.25': 2,\n  '$0.5': 4,\n  '$0.75': 8,\n  $1: 20,\n  '$1.5': 24,\n  $2: 28,\n  '$2.5': 32,\n  $3: 36,\n  '$3.5': 40,\n  $4: 44,\n  $true: 44,\n  '$4.5': 48,\n  $5: 52,\n  $6: 64,\n  $7: 74,\n  $8: 84,\n  $9: 94,\n  $10: 104,\n  $11: 124,\n  $12: 144,\n  $13: 164,\n  $14: 184,\n  $15: 204,\n  $16: 224,\n  $17: 224,\n  $18: 244,\n  $19: 264,\n  $20: 284,\n}\n\ntype SizeKeysIn = keyof typeof size\ntype Sizes = {\n  [Key in SizeKeysIn extends `$${infer Key}` ? Key : SizeKeysIn]: number\n}\ntype SizeKeys = `${keyof Sizes extends `${infer K}` ? K : never}`\n\nconst spaces = Object.entries(size).map(([k, v]) => {\n  return [k, sizeToSpace(v)]\n})\n\n// a bit odd but keeping backward compat for values >8 while fixing below\nfunction sizeToSpace(v: number) {\n  if (v === 0) return 0\n  if (v === 2) return 0.5\n  if (v === 4) return 1\n  if (v === 8) return 1.5\n  if (v <= 16) return Math.round(v * 0.333)\n  return Math.floor(v * 0.7 - 12)\n}\n\nconst spacesNegative = spaces.map(([k, v]) => [`-${(k as string).slice(1)}`, -v])\n\ntype SizeKeysWithNegatives =\n  | `-${SizeKeys extends `$${infer Key}` ? Key : SizeKeys}`\n  | SizeKeys\n\nexport const space: {\n  [Key in SizeKeysWithNegatives]: Key extends keyof Sizes ? Sizes[Key] : number\n} = {\n  ...Object.fromEntries(spaces),\n  ...Object.fromEntries(spacesNegative),\n} as any\n\nexport const zIndex = {\n  0: 0,\n  1: 100,\n  2: 200,\n  3: 300,\n  4: 400,\n  5: 500,\n}\n\nexport const colorTokens = {\n  light: {\n    blue: blue,\n    gray: gray,\n    green: green,\n    orange: orange,\n    pink: pink,\n    purple: purple,\n    red: red,\n    yellow: yellow,\n  },\n  dark: {\n    blue: blueDark,\n    gray: grayDark,\n    green: greenDark,\n    orange: orangeDark,\n    pink: pinkDark,\n    purple: purpleDark,\n    red: redDark,\n    yellow: yellowDark,\n  },\n}\n\nexport const darkColors = {\n  ...colorTokens.dark.blue,\n  ...colorTokens.dark.gray,\n  ...colorTokens.dark.green,\n  ...colorTokens.dark.orange,\n  ...colorTokens.dark.pink,\n  ...colorTokens.dark.purple,\n  ...colorTokens.dark.red,\n  ...colorTokens.dark.yellow,\n}\n\nexport const lightColors = {\n  ...colorTokens.light.blue,\n  ...colorTokens.light.gray,\n  ...colorTokens.light.green,\n  ...colorTokens.light.orange,\n  ...colorTokens.light.pink,\n  ...colorTokens.light.purple,\n  ...colorTokens.light.red,\n  ...colorTokens.light.yellow,\n}\n\nexport const color = {\n  ...postfixObjKeys(lightColors, 'Light'),\n  ...postfixObjKeys(darkColors, 'Dark'),\n}\n\nfunction postfixObjKeys<\n  A extends { [key: string]: Variable<string> | string },\n  B extends string\n>(\n  obj: A,\n  postfix: B\n): {\n  [Key in `${keyof A extends string ? keyof A : never}${B}`]: Variable<string> | string\n} {\n  return Object.fromEntries(\n    Object.entries(obj).map(([k, v]) => [`${k}${postfix}`, v])\n  ) as any\n}\n\nexport const radius = {\n  0: 0,\n  1: 3,\n  2: 5,\n  3: 7,\n  4: 9,\n  true: 9,\n  5: 10,\n  6: 16,\n  7: 19,\n  8: 22,\n  9: 26,\n  10: 34,\n  11: 42,\n  12: 50,\n}\n\nexport const tokens = createTokens({\n  color,\n  radius,\n  zIndex,\n  space,\n  size,\n})\n"],
+  "mappings": "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",
   "names": []
 }

package/dist/cjs/v2.js

@@ -0,0 +1,2 @@
+"use strict";
+//# sourceMappingURL=v2.js.map

package/dist/cjs/v2.js.map

@@ -0,0 +1,7 @@
+{
+  "version": 3,
+  "sources": [],
+  "sourcesContent": [],
+  "mappings": "",
+  "names": []
+}

package/dist/esm/themesv2.js

@@ -0,0 +1,205 @@
+import {
+  addChildren,
+  applyMask,
+  createStrengthenMask,
+  createTheme,
+  createWeakenMask
+} from "@tamagui/create-theme";
+import { colorTokens, darkColors, lightColors } from "./tokens";
+const lightTransparent = "rgba(255,255,255,0)";
+const darkTransparent = "rgba(10,10,10,0)";
+const palettes = {
+  dark: [
+    darkTransparent,
+    "#090909",
+    "#151515",
+    "#191919",
+    "#232323",
+    "#282828",
+    "#323232",
+    "#424242",
+    "#494949",
+    "#545454",
+    "#626262",
+    "#a5a5a5",
+    "#fff",
+    lightTransparent
+  ],
+  light: [
+    lightTransparent,
+    "#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%, 80.0%)",
+    "hsl(0, 0%, 56.1%)",
+    "hsl(0, 0%, 52.3%)",
+    "hsl(0, 0%, 43.5%)",
+    "hsl(0, 0%, 9.0%)",
+    darkTransparent
+  ]
+};
+const colorScale = {
+  color1: 1,
+  color2: 2,
+  color3: 3,
+  color4: 4,
+  color5: 5,
+  color6: 6,
+  color7: 7,
+  color8: 8,
+  color9: 9,
+  color10: 10,
+  color11: 11,
+  color12: 12
+};
+const skip = {
+  ...colorScale,
+  shadowColor: 1,
+  shadowColorHover: 1,
+  shadowColorPress: 2,
+  shadowColorFocus: 2
+};
+const template = {
+  ...skip,
+  // the background, color, etc keys here work like generics - they make it so you
+  // can publish components for others to use without mandating a specific color scale
+  // the @tamagui/button Button component looks for `$background`, so you set the
+  // dark_red_Button theme to have a stronger background than the dark_red theme.
+  background: 2,
+  backgroundHover: 3,
+  backgroundPress: 1,
+  backgroundFocus: 2,
+  backgroundStrong: 1,
+  backgroundTransparent: 0,
+  color: -1,
+  colorHover: -2,
+  colorPress: -1,
+  colorFocus: -2,
+  colorTransparent: -0,
+  borderColor: 3,
+  borderColorHover: 4,
+  borderColorPress: 2,
+  borderColorFocus: 3,
+  placeholderColor: -4
+};
+const lightShadowColor = "rgba(0,0,0,0.15)";
+const lightShadowColorStrong = "rgba(0,0,0,0.2)";
+const darkShadowColor = "rgba(0,0,0,0.5)";
+const darkShadowColorStrong = "rgba(0,0,0,0.7)";
+const lightShadows = {
+  shadowColor: lightShadowColorStrong,
+  shadowColorHover: lightShadowColorStrong,
+  shadowColorPress: lightShadowColor,
+  shadowColorFocus: lightShadowColor
+};
+const darkShadows = {
+  shadowColor: darkShadowColorStrong,
+  shadowColorHover: darkShadowColorStrong,
+  shadowColorPress: darkShadowColor,
+  shadowColorFocus: darkShadowColor
+};
+const lightTemplate = {
+  ...template,
+  ...lightShadows
+};
+const darkTemplate = { ...template, ...darkShadows };
+const light = createTheme(palettes.light, lightTemplate, {
+  nonInheritedValues: lightColors
+});
+const dark = createTheme(palettes.dark, darkTemplate, { nonInheritedValues: darkColors });
+const baseThemes = {
+  light,
+  dark
+};
+const max = palettes.dark.length - 1;
+const masks = {
+  weaker: createWeakenMask({
+    by: 1,
+    min: 1,
+    max
+  }),
+  stronger: createStrengthenMask({
+    by: 1,
+    min: 1,
+    max
+  })
+};
+const themes = addChildren(baseThemes, (name, themeIn) => {
+  const theme = themeIn;
+  const inverseName = name === "light" ? "dark" : "light";
+  const inverseTheme = baseThemes[inverseName];
+  const transparent = (hsl, opacity = 0) => hsl.replace(`%)`, `%, ${opacity})`).replace(`hsl(`, `hsla(`);
+  const [colorThemes, inverseColorThemes] = [
+    colorTokens[name],
+    colorTokens[inverseName]
+  ].map((colorSet) => {
+    return Object.fromEntries(
+      Object.keys(colorSet).map((color) => {
+        const colorPalette = Object.values(colorSet[color]);
+        const first6 = colorPalette.slice(0, 6);
+        const last5 = colorPalette.slice(colorPalette.length - 5);
+        return [
+          color,
+          createTheme(
+            [
+              transparent(colorPalette[0]),
+              ...first6,
+              ...last5,
+              theme.color,
+              transparent(colorPalette[colorPalette.length - 1])
+            ],
+            template
+          )
+        ];
+      })
+    );
+  });
+  return {
+    ...getAltThemes(theme, inverseTheme),
+    ...getComponentThemes(theme, inverseTheme),
+    ...addChildren(colorThemes, (colorName, colorTheme) => {
+      const inverse = inverseColorThemes[colorName];
+      console.log("color", colorName);
+      return {
+        ...getAltThemes(colorTheme, inverse),
+        ...getComponentThemes(colorTheme, inverse)
+      };
+    })
+  };
+  function getComponentThemes(theme2, inverse) {
+    const stronger1 = applyMask(theme2, masks.stronger, { skip });
+    const stronger2 = applyMask(stronger1, masks.stronger, { skip });
+    console.log("stronger2", { theme: theme2, stronger1, stronger2 });
+    const inverse1 = applyMask(inverse, masks.weaker, { skip });
+    const inverse2 = applyMask(inverse1, masks.weaker, { skip });
+    return {
+      Button: stronger2,
+      DrawerFrame: stronger1,
+      SliderTrack: theme2,
+      SliderTrackActive: stronger2,
+      SliderThumb: inverse1,
+      Progress: stronger1,
+      ProgressIndicator: inverse,
+      Switch: stronger2,
+      SwitchThumb: inverse2,
+      TooltipArrow: stronger1,
+      TooltipContent: stronger2
+    };
+  }
+  function getAltThemes(theme2, inverse) {
+    const alt1 = applyMask(theme2, masks.weaker, { skip });
+    const alt2 = applyMask(alt1, masks.weaker, { skip });
+    return addChildren({ alt1, alt2 }, (name2, theme3) => {
+      return getComponentThemes(theme3, inverse);
+    });
+  }
+});
+globalThis["themes"] = themes;
+export {
+  themes
+};
+//# sourceMappingURL=themesv2.js.map

package/dist/esm/themesv2.js.map

@@ -0,0 +1,7 @@
+{
+  "version": 3,
+  "sources": ["../../src/themesv2.tsx"],
+  "sourcesContent": ["import {\n  addChildren,\n  applyMask,\n  createStrengthenMask,\n  createTheme,\n  createWeakenMask,\n} from '@tamagui/create-theme'\n\nimport { colorTokens, darkColors, lightColors } from './tokens'\n\ntype ColorName = keyof typeof colorTokens.dark\n\nconst lightTransparent = 'rgba(255,255,255,0)'\nconst darkTransparent = 'rgba(10,10,10,0)'\n\n// background => foreground\nconst palettes = {\n  dark: [\n    darkTransparent,\n    '#090909',\n    '#151515',\n    '#191919',\n    '#232323',\n    '#282828',\n    '#323232',\n    '#424242',\n    '#494949',\n    '#545454',\n    '#626262',\n    '#a5a5a5',\n    '#fff',\n    lightTransparent,\n  ],\n  light: [\n    lightTransparent,\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%, 80.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    darkTransparent,\n  ],\n}\n\nconst colorScale = {\n  color1: 1,\n  color2: 2,\n  color3: 3,\n  color4: 4,\n  color5: 5,\n  color6: 6,\n  color7: 7,\n  color8: 8,\n  color9: 9,\n  color10: 10,\n  color11: 11,\n  color12: 12,\n}\n\n// we can use subset of our template as a \"skip\" so it doesn't get adjusted with masks\nconst skip = {\n  ...colorScale,\n  shadowColor: 1,\n  shadowColorHover: 1,\n  shadowColorPress: 2,\n  shadowColorFocus: 2,\n}\n\n// templates use the palette and specify index\n// negative goes backwards from end so -1 is the last item\nconst template = {\n  ...skip,\n  // the background, color, etc keys here work like generics - they make it so you\n  // can publish components for others to use without mandating a specific color scale\n  // the @tamagui/button Button component looks for `$background`, so you set the\n  // dark_red_Button theme to have a stronger background than the dark_red theme.\n  background: 2,\n  backgroundHover: 3,\n  backgroundPress: 1,\n  backgroundFocus: 2,\n  backgroundStrong: 1,\n  backgroundTransparent: 0,\n  color: -1,\n  colorHover: -2,\n  colorPress: -1,\n  colorFocus: -2,\n  colorTransparent: -0,\n  borderColor: 3,\n  borderColorHover: 4,\n  borderColorPress: 2,\n  borderColorFocus: 3,\n  placeholderColor: -4,\n}\n\nconst lightShadowColor = 'rgba(0,0,0,0.15)'\nconst lightShadowColorStrong = 'rgba(0,0,0,0.2)'\nconst darkShadowColor = 'rgba(0,0,0,0.5)'\nconst darkShadowColorStrong = 'rgba(0,0,0,0.7)'\n\nconst lightShadows = {\n  shadowColor: lightShadowColorStrong,\n  shadowColorHover: lightShadowColorStrong,\n  shadowColorPress: lightShadowColor,\n  shadowColorFocus: lightShadowColor,\n}\n\nconst darkShadows = {\n  shadowColor: darkShadowColorStrong,\n  shadowColorHover: darkShadowColorStrong,\n  shadowColorPress: darkShadowColor,\n  shadowColorFocus: darkShadowColor,\n}\n\nconst lightTemplate = {\n  ...template,\n  ...lightShadows,\n}\n\nconst darkTemplate = { ...template, ...darkShadows }\n\nconst light = createTheme(palettes.light, lightTemplate, {\n  nonInheritedValues: lightColors,\n})\n\nconst dark = createTheme(palettes.dark, darkTemplate, { nonInheritedValues: darkColors })\n\nconst baseThemes = {\n  light,\n  dark,\n}\n\ntype Theme = typeof light\n\n// avoid transparent ends\nconst max = palettes.dark.length - 1\nconst masks = {\n  weaker: createWeakenMask({\n    by: 1,\n    min: 1,\n    max,\n  }),\n  stronger: createStrengthenMask({\n    by: 1,\n    min: 1,\n    max,\n  }),\n}\n\nexport const themes = addChildren(baseThemes, (name, themeIn) => {\n  const theme = themeIn as Theme\n  const inverseName = name === 'light' ? 'dark' : 'light'\n  const inverseTheme = baseThemes[inverseName]\n  const transparent = (hsl: string, opacity = 0) =>\n    hsl.replace(`%)`, `%, ${opacity})`).replace(`hsl(`, `hsla(`)\n\n  // setup colorThemes and their inverses\n  const [colorThemes, inverseColorThemes] = [\n    colorTokens[name],\n    colorTokens[inverseName],\n  ].map((colorSet) => {\n    return Object.fromEntries(\n      Object.keys(colorSet).map((color) => {\n        const colorPalette = Object.values(colorSet[color as ColorName])\n        // we want a much lighter text color by default so swap them around a bit\n        const first6 = colorPalette.slice(0, 6)\n        const last5 = colorPalette.slice(colorPalette.length - 5)\n        return [\n          color,\n          createTheme(\n            [\n              transparent(colorPalette[0]),\n              ...first6,\n              ...last5,\n              theme.color,\n              transparent(colorPalette[colorPalette.length - 1]),\n            ],\n            template\n          ),\n        ]\n      })\n    ) as Record<ColorName, Theme>\n  })\n\n  return {\n    ...getAltThemes(theme, inverseTheme),\n    ...getComponentThemes(theme, inverseTheme),\n    ...addChildren(colorThemes, (colorName, colorTheme) => {\n      const inverse = inverseColorThemes[colorName]\n      console.log('color', colorName)\n      return {\n        ...getAltThemes(colorTheme as any, inverse as any),\n        ...getComponentThemes(colorTheme as any, inverse as any),\n      }\n    }),\n  }\n\n  function getComponentThemes(theme: Theme, inverse: Theme) {\n    const stronger1 = applyMask(theme, masks.stronger, { skip })\n    const stronger2 = applyMask(stronger1, masks.stronger, { skip })\n    console.log('stronger2', { theme, stronger1, stronger2 })\n    const inverse1 = applyMask(inverse, masks.weaker, { skip })\n    const inverse2 = applyMask(inverse1, masks.weaker, { skip })\n    return {\n      Button: stronger2,\n      DrawerFrame: stronger1,\n      SliderTrack: theme,\n      SliderTrackActive: stronger2,\n      SliderThumb: inverse1,\n      Progress: stronger1,\n      ProgressIndicator: inverse,\n      Switch: stronger2,\n      SwitchThumb: inverse2,\n      TooltipArrow: stronger1,\n      TooltipContent: stronger2,\n    }\n  }\n\n  function getAltThemes(theme: Theme, inverse: Theme) {\n    const alt1 = applyMask(theme, masks.weaker, { skip })\n    const alt2 = applyMask(alt1, masks.weaker, { skip })\n    return addChildren({ alt1, alt2 }, (name, theme) => {\n      return getComponentThemes(theme as any, inverse)\n    })\n  }\n})\n\nglobalThis['themes'] = themes\n"],
+  "mappings": "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",
+  "names": ["theme", "name"]
+}

package/dist/esm/themesv2.mjs

@@ -0,0 +1,205 @@
+import {
+  addChildren,
+  applyMask,
+  createStrengthenMask,
+  createTheme,
+  createWeakenMask
+} from "@tamagui/create-theme";
+import { colorTokens, darkColors, lightColors } from "./tokens";
+const lightTransparent = "rgba(255,255,255,0)";
+const darkTransparent = "rgba(10,10,10,0)";
+const palettes = {
+  dark: [
+    darkTransparent,
+    "#090909",
+    "#151515",
+    "#191919",
+    "#232323",
+    "#282828",
+    "#323232",
+    "#424242",
+    "#494949",
+    "#545454",
+    "#626262",
+    "#a5a5a5",
+    "#fff",
+    lightTransparent
+  ],
+  light: [
+    lightTransparent,
+    "#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%, 80.0%)",
+    "hsl(0, 0%, 56.1%)",
+    "hsl(0, 0%, 52.3%)",
+    "hsl(0, 0%, 43.5%)",
+    "hsl(0, 0%, 9.0%)",
+    darkTransparent
+  ]
+};
+const colorScale = {
+  color1: 1,
+  color2: 2,
+  color3: 3,
+  color4: 4,
+  color5: 5,
+  color6: 6,
+  color7: 7,
+  color8: 8,
+  color9: 9,
+  color10: 10,
+  color11: 11,
+  color12: 12
+};
+const skip = {
+  ...colorScale,
+  shadowColor: 1,
+  shadowColorHover: 1,
+  shadowColorPress: 2,
+  shadowColorFocus: 2
+};
+const template = {
+  ...skip,
+  // the background, color, etc keys here work like generics - they make it so you
+  // can publish components for others to use without mandating a specific color scale
+  // the @tamagui/button Button component looks for `$background`, so you set the
+  // dark_red_Button theme to have a stronger background than the dark_red theme.
+  background: 2,
+  backgroundHover: 3,
+  backgroundPress: 1,
+  backgroundFocus: 2,
+  backgroundStrong: 1,
+  backgroundTransparent: 0,
+  color: -1,
+  colorHover: -2,
+  colorPress: -1,
+  colorFocus: -2,
+  colorTransparent: -0,
+  borderColor: 3,
+  borderColorHover: 4,
+  borderColorPress: 2,
+  borderColorFocus: 3,
+  placeholderColor: -4
+};
+const lightShadowColor = "rgba(0,0,0,0.15)";
+const lightShadowColorStrong = "rgba(0,0,0,0.2)";
+const darkShadowColor = "rgba(0,0,0,0.5)";
+const darkShadowColorStrong = "rgba(0,0,0,0.7)";
+const lightShadows = {
+  shadowColor: lightShadowColorStrong,
+  shadowColorHover: lightShadowColorStrong,
+  shadowColorPress: lightShadowColor,
+  shadowColorFocus: lightShadowColor
+};
+const darkShadows = {
+  shadowColor: darkShadowColorStrong,
+  shadowColorHover: darkShadowColorStrong,
+  shadowColorPress: darkShadowColor,
+  shadowColorFocus: darkShadowColor
+};
+const lightTemplate = {
+  ...template,
+  ...lightShadows
+};
+const darkTemplate = { ...template, ...darkShadows };
+const light = createTheme(palettes.light, lightTemplate, {
+  nonInheritedValues: lightColors
+});
+const dark = createTheme(palettes.dark, darkTemplate, { nonInheritedValues: darkColors });
+const baseThemes = {
+  light,
+  dark
+};
+const max = palettes.dark.length - 1;
+const masks = {
+  weaker: createWeakenMask({
+    by: 1,
+    min: 1,
+    max
+  }),
+  stronger: createStrengthenMask({
+    by: 1,
+    min: 1,
+    max
+  })
+};
+const themes = addChildren(baseThemes, (name, themeIn) => {
+  const theme = themeIn;
+  const inverseName = name === "light" ? "dark" : "light";
+  const inverseTheme = baseThemes[inverseName];
+  const transparent = (hsl, opacity = 0) => hsl.replace(`%)`, `%, ${opacity})`).replace(`hsl(`, `hsla(`);
+  const [colorThemes, inverseColorThemes] = [
+    colorTokens[name],
+    colorTokens[inverseName]
+  ].map((colorSet) => {
+    return Object.fromEntries(
+      Object.keys(colorSet).map((color) => {
+        const colorPalette = Object.values(colorSet[color]);
+        const first6 = colorPalette.slice(0, 6);
+        const last5 = colorPalette.slice(colorPalette.length - 5);
+        return [
+          color,
+          createTheme(
+            [
+              transparent(colorPalette[0]),
+              ...first6,
+              ...last5,
+              theme.color,
+              transparent(colorPalette[colorPalette.length - 1])
+            ],
+            template
+          )
+        ];
+      })
+    );
+  });
+  return {
+    ...getAltThemes(theme, inverseTheme),
+    ...getComponentThemes(theme, inverseTheme),
+    ...addChildren(colorThemes, (colorName, colorTheme) => {
+      const inverse = inverseColorThemes[colorName];
+      console.log("color", colorName);
+      return {
+        ...getAltThemes(colorTheme, inverse),
+        ...getComponentThemes(colorTheme, inverse)
+      };
+    })
+  };
+  function getComponentThemes(theme2, inverse) {
+    const stronger1 = applyMask(theme2, masks.stronger, { skip });
+    const stronger2 = applyMask(stronger1, masks.stronger, { skip });
+    console.log("stronger2", { theme: theme2, stronger1, stronger2 });
+    const inverse1 = applyMask(inverse, masks.weaker, { skip });
+    const inverse2 = applyMask(inverse1, masks.weaker, { skip });
+    return {
+      Button: stronger2,
+      DrawerFrame: stronger1,
+      SliderTrack: theme2,
+      SliderTrackActive: stronger2,
+      SliderThumb: inverse1,
+      Progress: stronger1,
+      ProgressIndicator: inverse,
+      Switch: stronger2,
+      SwitchThumb: inverse2,
+      TooltipArrow: stronger1,
+      TooltipContent: stronger2
+    };
+  }
+  function getAltThemes(theme2, inverse) {
+    const alt1 = applyMask(theme2, masks.weaker, { skip });
+    const alt2 = applyMask(alt1, masks.weaker, { skip });
+    return addChildren({ alt1, alt2 }, (name2, theme3) => {
+      return getComponentThemes(theme3, inverse);
+    });
+  }
+});
+globalThis["themes"] = themes;
+export {
+  themes
+};
+//# sourceMappingURL=themesv2.mjs.map

package/dist/esm/themesv2.mjs.map

@@ -0,0 +1,7 @@
+{
+  "version": 3,
+  "sources": ["../../src/themesv2.tsx"],
+  "sourcesContent": ["import {\n  addChildren,\n  applyMask,\n  createStrengthenMask,\n  createTheme,\n  createWeakenMask,\n} from '@tamagui/create-theme'\n\nimport { colorTokens, darkColors, lightColors } from './tokens'\n\ntype ColorName = keyof typeof colorTokens.dark\n\nconst lightTransparent = 'rgba(255,255,255,0)'\nconst darkTransparent = 'rgba(10,10,10,0)'\n\n// background => foreground\nconst palettes = {\n  dark: [\n    darkTransparent,\n    '#090909',\n    '#151515',\n    '#191919',\n    '#232323',\n    '#282828',\n    '#323232',\n    '#424242',\n    '#494949',\n    '#545454',\n    '#626262',\n    '#a5a5a5',\n    '#fff',\n    lightTransparent,\n  ],\n  light: [\n    lightTransparent,\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%, 80.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    darkTransparent,\n  ],\n}\n\nconst colorScale = {\n  color1: 1,\n  color2: 2,\n  color3: 3,\n  color4: 4,\n  color5: 5,\n  color6: 6,\n  color7: 7,\n  color8: 8,\n  color9: 9,\n  color10: 10,\n  color11: 11,\n  color12: 12,\n}\n\n// we can use subset of our template as a \"skip\" so it doesn't get adjusted with masks\nconst skip = {\n  ...colorScale,\n  shadowColor: 1,\n  shadowColorHover: 1,\n  shadowColorPress: 2,\n  shadowColorFocus: 2,\n}\n\n// templates use the palette and specify index\n// negative goes backwards from end so -1 is the last item\nconst template = {\n  ...skip,\n  // the background, color, etc keys here work like generics - they make it so you\n  // can publish components for others to use without mandating a specific color scale\n  // the @tamagui/button Button component looks for `$background`, so you set the\n  // dark_red_Button theme to have a stronger background than the dark_red theme.\n  background: 2,\n  backgroundHover: 3,\n  backgroundPress: 1,\n  backgroundFocus: 2,\n  backgroundStrong: 1,\n  backgroundTransparent: 0,\n  color: -1,\n  colorHover: -2,\n  colorPress: -1,\n  colorFocus: -2,\n  colorTransparent: -0,\n  borderColor: 3,\n  borderColorHover: 4,\n  borderColorPress: 2,\n  borderColorFocus: 3,\n  placeholderColor: -4,\n}\n\nconst lightShadowColor = 'rgba(0,0,0,0.15)'\nconst lightShadowColorStrong = 'rgba(0,0,0,0.2)'\nconst darkShadowColor = 'rgba(0,0,0,0.5)'\nconst darkShadowColorStrong = 'rgba(0,0,0,0.7)'\n\nconst lightShadows = {\n  shadowColor: lightShadowColorStrong,\n  shadowColorHover: lightShadowColorStrong,\n  shadowColorPress: lightShadowColor,\n  shadowColorFocus: lightShadowColor,\n}\n\nconst darkShadows = {\n  shadowColor: darkShadowColorStrong,\n  shadowColorHover: darkShadowColorStrong,\n  shadowColorPress: darkShadowColor,\n  shadowColorFocus: darkShadowColor,\n}\n\nconst lightTemplate = {\n  ...template,\n  ...lightShadows,\n}\n\nconst darkTemplate = { ...template, ...darkShadows }\n\nconst light = createTheme(palettes.light, lightTemplate, {\n  nonInheritedValues: lightColors,\n})\n\nconst dark = createTheme(palettes.dark, darkTemplate, { nonInheritedValues: darkColors })\n\nconst baseThemes = {\n  light,\n  dark,\n}\n\ntype Theme = typeof light\n\n// avoid transparent ends\nconst max = palettes.dark.length - 1\nconst masks = {\n  weaker: createWeakenMask({\n    by: 1,\n    min: 1,\n    max,\n  }),\n  stronger: createStrengthenMask({\n    by: 1,\n    min: 1,\n    max,\n  }),\n}\n\nexport const themes = addChildren(baseThemes, (name, themeIn) => {\n  const theme = themeIn as Theme\n  const inverseName = name === 'light' ? 'dark' : 'light'\n  const inverseTheme = baseThemes[inverseName]\n  const transparent = (hsl: string, opacity = 0) =>\n    hsl.replace(`%)`, `%, ${opacity})`).replace(`hsl(`, `hsla(`)\n\n  // setup colorThemes and their inverses\n  const [colorThemes, inverseColorThemes] = [\n    colorTokens[name],\n    colorTokens[inverseName],\n  ].map((colorSet) => {\n    return Object.fromEntries(\n      Object.keys(colorSet).map((color) => {\n        const colorPalette = Object.values(colorSet[color as ColorName])\n        // we want a much lighter text color by default so swap them around a bit\n        const first6 = colorPalette.slice(0, 6)\n        const last5 = colorPalette.slice(colorPalette.length - 5)\n        return [\n          color,\n          createTheme(\n            [\n              transparent(colorPalette[0]),\n              ...first6,\n              ...last5,\n              theme.color,\n              transparent(colorPalette[colorPalette.length - 1]),\n            ],\n            template\n          ),\n        ]\n      })\n    ) as Record<ColorName, Theme>\n  })\n\n  return {\n    ...getAltThemes(theme, inverseTheme),\n    ...getComponentThemes(theme, inverseTheme),\n    ...addChildren(colorThemes, (colorName, colorTheme) => {\n      const inverse = inverseColorThemes[colorName]\n      console.log('color', colorName)\n      return {\n        ...getAltThemes(colorTheme as any, inverse as any),\n        ...getComponentThemes(colorTheme as any, inverse as any),\n      }\n    }),\n  }\n\n  function getComponentThemes(theme: Theme, inverse: Theme) {\n    const stronger1 = applyMask(theme, masks.stronger, { skip })\n    const stronger2 = applyMask(stronger1, masks.stronger, { skip })\n    console.log('stronger2', { theme, stronger1, stronger2 })\n    const inverse1 = applyMask(inverse, masks.weaker, { skip })\n    const inverse2 = applyMask(inverse1, masks.weaker, { skip })\n    return {\n      Button: stronger2,\n      DrawerFrame: stronger1,\n      SliderTrack: theme,\n      SliderTrackActive: stronger2,\n      SliderThumb: inverse1,\n      Progress: stronger1,\n      ProgressIndicator: inverse,\n      Switch: stronger2,\n      SwitchThumb: inverse2,\n      TooltipArrow: stronger1,\n      TooltipContent: stronger2,\n    }\n  }\n\n  function getAltThemes(theme: Theme, inverse: Theme) {\n    const alt1 = applyMask(theme, masks.weaker, { skip })\n    const alt2 = applyMask(alt1, masks.weaker, { skip })\n    return addChildren({ alt1, alt2 }, (name, theme) => {\n      return getComponentThemes(theme as any, inverse)\n    })\n  }\n})\n\nglobalThis['themes'] = themes\n"],
+  "mappings": "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",
+  "names": ["theme", "name"]
+}

package/dist/esm/tokens.js

@@ -16,7 +16,7 @@ import {
   yellow,
   yellowDark
 } from "@tamagui/colors";
-import { createTokens } from "@tamagui/core";
+import { createTokens } from "@tamagui/web";
 const size = {
   $0: 0,
   "$0.25": 2,

package/dist/esm/tokens.js.map

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../src/tokens.tsx"],
-  "sourcesContent": ["import {\n  blue,\n  blueDark,\n  gray,\n  grayDark,\n  green,\n  greenDark,\n  orange,\n  orangeDark,\n  pink,\n  pinkDark,\n  purple,\n  purpleDark,\n  red,\n  redDark,\n  yellow,\n  yellowDark,\n} from '@tamagui/colors'\nimport { Variable, createTokens, createVariable } from '@tamagui/core'\n\n// should roughly map to button/input etc height at each level\n// fonts should match that height/lineHeight at each stop\n// so these are really non-linear on purpose\n// why?\n//   - at sizes <1, used for fine grained things (borders, smallest paddingY)\n//     - so smallest padY should be roughly 1-4px so it can join with lineHeight\n//   - at sizes >=1, have to consider \"pressability\" (jumps up)\n//   - after that it should go upwards somewhat naturally\n//   - H1 / headings top out at 10 naturally, so after 10 we can go upwards faster\n//  but also one more wrinkle...\n//  space is used in conjunction with size\n//  i'm setting space to generally just a fixed fraction of size (~1/3-2/3 still fine tuning)\nexport const size = {\n  $0: 0,\n  '$0.25': 2,\n  '$0.5': 4,\n  '$0.75': 8,\n  $1: 20,\n  '$1.5': 24,\n  $2: 28,\n  '$2.5': 32,\n  $3: 36,\n  '$3.5': 40,\n  $4: 44,\n  $true: 44,\n  '$4.5': 48,\n  $5: 52,\n  $6: 64,\n  $7: 74,\n  $8: 84,\n  $9: 94,\n  $10: 104,\n  $11: 124,\n  $12: 144,\n  $13: 164,\n  $14: 184,\n  $15: 204,\n  $16: 224,\n  $17: 224,\n  $18: 244,\n  $19: 264,\n  $20: 284,\n}\n\ntype SizeKeysIn = keyof typeof size\ntype Sizes = {\n  [Key in SizeKeysIn extends `$${infer Key}` ? Key : SizeKeysIn]: number\n}\ntype SizeKeys = `${keyof Sizes extends `${infer K}` ? K : never}`\n\nconst spaces = Object.entries(size).map(([k, v]) => {\n  return [k, sizeToSpace(v)]\n})\n\n// a bit odd but keeping backward compat for values >8 while fixing below\nfunction sizeToSpace(v: number) {\n  if (v === 0) return 0\n  if (v === 2) return 0.5\n  if (v === 4) return 1\n  if (v === 8) return 1.5\n  if (v <= 16) return Math.round(v * 0.333)\n  return Math.floor(v * 0.7 - 12)\n}\n\nconst spacesNegative = spaces.map(([k, v]) => [`-${(k as string).slice(1)}`, -v])\n\ntype SizeKeysWithNegatives =\n  | `-${SizeKeys extends `$${infer Key}` ? Key : SizeKeys}`\n  | SizeKeys\n\nexport const space: {\n  [Key in SizeKeysWithNegatives]: Key extends keyof Sizes ? Sizes[Key] : number\n} = {\n  ...Object.fromEntries(spaces),\n  ...Object.fromEntries(spacesNegative),\n} as any\n\nexport const zIndex = {\n  0: 0,\n  1: 100,\n  2: 200,\n  3: 300,\n  4: 400,\n  5: 500,\n}\n\nexport const colorTokens = {\n  light: {\n    blue: blue,\n    gray: gray,\n    green: green,\n    orange: orange,\n    pink: pink,\n    purple: purple,\n    red: red,\n    yellow: yellow,\n  },\n  dark: {\n    blue: blueDark,\n    gray: grayDark,\n    green: greenDark,\n    orange: orangeDark,\n    pink: pinkDark,\n    purple: purpleDark,\n    red: redDark,\n    yellow: yellowDark,\n  },\n}\n\nexport const darkColors = {\n  ...colorTokens.dark.blue,\n  ...colorTokens.dark.gray,\n  ...colorTokens.dark.green,\n  ...colorTokens.dark.orange,\n  ...colorTokens.dark.pink,\n  ...colorTokens.dark.purple,\n  ...colorTokens.dark.red,\n  ...colorTokens.dark.yellow,\n}\n\nexport const lightColors = {\n  ...colorTokens.light.blue,\n  ...colorTokens.light.gray,\n  ...colorTokens.light.green,\n  ...colorTokens.light.orange,\n  ...colorTokens.light.pink,\n  ...colorTokens.light.purple,\n  ...colorTokens.light.red,\n  ...colorTokens.light.yellow,\n}\n\nexport const color = {\n  ...postfixObjKeys(lightColors, 'Light'),\n  ...postfixObjKeys(darkColors, 'Dark'),\n}\n\nfunction postfixObjKeys<\n  A extends { [key: string]: Variable<string> | string },\n  B extends string\n>(\n  obj: A,\n  postfix: B\n): {\n  [Key in `${keyof A extends string ? keyof A : never}${B}`]: Variable<string> | string\n} {\n  return Object.fromEntries(\n    Object.entries(obj).map(([k, v]) => [`${k}${postfix}`, v])\n  ) as any\n}\n\nexport const radius = {\n  0: 0,\n  1: 3,\n  2: 5,\n  3: 7,\n  4: 9,\n  true: 9,\n  5: 10,\n  6: 16,\n  7: 19,\n  8: 22,\n  9: 26,\n  10: 34,\n  11: 42,\n  12: 50,\n}\n\nexport const tokens = createTokens({\n  color,\n  radius,\n  zIndex,\n  space,\n  size,\n})\n"],
-  "mappings": "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",
+  "sourcesContent": ["import {\n  blue,\n  blueDark,\n  gray,\n  grayDark,\n  green,\n  greenDark,\n  orange,\n  orangeDark,\n  pink,\n  pinkDark,\n  purple,\n  purpleDark,\n  red,\n  redDark,\n  yellow,\n  yellowDark,\n} from '@tamagui/colors'\nimport { Variable, createTokens } from '@tamagui/web'\n\n// should roughly map to button/input etc height at each level\n// fonts should match that height/lineHeight at each stop\n// so these are really non-linear on purpose\n// why?\n//   - at sizes <1, used for fine grained things (borders, smallest paddingY)\n//     - so smallest padY should be roughly 1-4px so it can join with lineHeight\n//   - at sizes >=1, have to consider \"pressability\" (jumps up)\n//   - after that it should go upwards somewhat naturally\n//   - H1 / headings top out at 10 naturally, so after 10 we can go upwards faster\n//  but also one more wrinkle...\n//  space is used in conjunction with size\n//  i'm setting space to generally just a fixed fraction of size (~1/3-2/3 still fine tuning)\nexport const size = {\n  $0: 0,\n  '$0.25': 2,\n  '$0.5': 4,\n  '$0.75': 8,\n  $1: 20,\n  '$1.5': 24,\n  $2: 28,\n  '$2.5': 32,\n  $3: 36,\n  '$3.5': 40,\n  $4: 44,\n  $true: 44,\n  '$4.5': 48,\n  $5: 52,\n  $6: 64,\n  $7: 74,\n  $8: 84,\n  $9: 94,\n  $10: 104,\n  $11: 124,\n  $12: 144,\n  $13: 164,\n  $14: 184,\n  $15: 204,\n  $16: 224,\n  $17: 224,\n  $18: 244,\n  $19: 264,\n  $20: 284,\n}\n\ntype SizeKeysIn = keyof typeof size\ntype Sizes = {\n  [Key in SizeKeysIn extends `$${infer Key}` ? Key : SizeKeysIn]: number\n}\ntype SizeKeys = `${keyof Sizes extends `${infer K}` ? K : never}`\n\nconst spaces = Object.entries(size).map(([k, v]) => {\n  return [k, sizeToSpace(v)]\n})\n\n// a bit odd but keeping backward compat for values >8 while fixing below\nfunction sizeToSpace(v: number) {\n  if (v === 0) return 0\n  if (v === 2) return 0.5\n  if (v === 4) return 1\n  if (v === 8) return 1.5\n  if (v <= 16) return Math.round(v * 0.333)\n  return Math.floor(v * 0.7 - 12)\n}\n\nconst spacesNegative = spaces.map(([k, v]) => [`-${(k as string).slice(1)}`, -v])\n\ntype SizeKeysWithNegatives =\n  | `-${SizeKeys extends `$${infer Key}` ? Key : SizeKeys}`\n  | SizeKeys\n\nexport const space: {\n  [Key in SizeKeysWithNegatives]: Key extends keyof Sizes ? Sizes[Key] : number\n} = {\n  ...Object.fromEntries(spaces),\n  ...Object.fromEntries(spacesNegative),\n} as any\n\nexport const zIndex = {\n  0: 0,\n  1: 100,\n  2: 200,\n  3: 300,\n  4: 400,\n  5: 500,\n}\n\nexport const colorTokens = {\n  light: {\n    blue: blue,\n    gray: gray,\n    green: green,\n    orange: orange,\n    pink: pink,\n    purple: purple,\n    red: red,\n    yellow: yellow,\n  },\n  dark: {\n    blue: blueDark,\n    gray: grayDark,\n    green: greenDark,\n    orange: orangeDark,\n    pink: pinkDark,\n    purple: purpleDark,\n    red: redDark,\n    yellow: yellowDark,\n  },\n}\n\nexport const darkColors = {\n  ...colorTokens.dark.blue,\n  ...colorTokens.dark.gray,\n  ...colorTokens.dark.green,\n  ...colorTokens.dark.orange,\n  ...colorTokens.dark.pink,\n  ...colorTokens.dark.purple,\n  ...colorTokens.dark.red,\n  ...colorTokens.dark.yellow,\n}\n\nexport const lightColors = {\n  ...colorTokens.light.blue,\n  ...colorTokens.light.gray,\n  ...colorTokens.light.green,\n  ...colorTokens.light.orange,\n  ...colorTokens.light.pink,\n  ...colorTokens.light.purple,\n  ...colorTokens.light.red,\n  ...colorTokens.light.yellow,\n}\n\nexport const color = {\n  ...postfixObjKeys(lightColors, 'Light'),\n  ...postfixObjKeys(darkColors, 'Dark'),\n}\n\nfunction postfixObjKeys<\n  A extends { [key: string]: Variable<string> | string },\n  B extends string\n>(\n  obj: A,\n  postfix: B\n): {\n  [Key in `${keyof A extends string ? keyof A : never}${B}`]: Variable<string> | string\n} {\n  return Object.fromEntries(\n    Object.entries(obj).map(([k, v]) => [`${k}${postfix}`, v])\n  ) as any\n}\n\nexport const radius = {\n  0: 0,\n  1: 3,\n  2: 5,\n  3: 7,\n  4: 9,\n  true: 9,\n  5: 10,\n  6: 16,\n  7: 19,\n  8: 22,\n  9: 26,\n  10: 34,\n  11: 42,\n  12: 50,\n}\n\nexport const tokens = createTokens({\n  color,\n  radius,\n  zIndex,\n  space,\n  size,\n})\n"],
+  "mappings": "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",
   "names": []
 }

package/dist/esm/tokens.mjs

@@ -16,7 +16,7 @@ import {
   yellow,
   yellowDark
 } from "@tamagui/colors";
-import { createTokens } from "@tamagui/core";
+import { createTokens } from "@tamagui/web";
 const size = {
   $0: 0,
   "$0.25": 2,

package/dist/esm/tokens.mjs.map

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../src/tokens.tsx"],
-  "sourcesContent": ["import {\n  blue,\n  blueDark,\n  gray,\n  grayDark,\n  green,\n  greenDark,\n  orange,\n  orangeDark,\n  pink,\n  pinkDark,\n  purple,\n  purpleDark,\n  red,\n  redDark,\n  yellow,\n  yellowDark,\n} from '@tamagui/colors'\nimport { Variable, createTokens, createVariable } from '@tamagui/core'\n\n// should roughly map to button/input etc height at each level\n// fonts should match that height/lineHeight at each stop\n// so these are really non-linear on purpose\n// why?\n//   - at sizes <1, used for fine grained things (borders, smallest paddingY)\n//     - so smallest padY should be roughly 1-4px so it can join with lineHeight\n//   - at sizes >=1, have to consider \"pressability\" (jumps up)\n//   - after that it should go upwards somewhat naturally\n//   - H1 / headings top out at 10 naturally, so after 10 we can go upwards faster\n//  but also one more wrinkle...\n//  space is used in conjunction with size\n//  i'm setting space to generally just a fixed fraction of size (~1/3-2/3 still fine tuning)\nexport const size = {\n  $0: 0,\n  '$0.25': 2,\n  '$0.5': 4,\n  '$0.75': 8,\n  $1: 20,\n  '$1.5': 24,\n  $2: 28,\n  '$2.5': 32,\n  $3: 36,\n  '$3.5': 40,\n  $4: 44,\n  $true: 44,\n  '$4.5': 48,\n  $5: 52,\n  $6: 64,\n  $7: 74,\n  $8: 84,\n  $9: 94,\n  $10: 104,\n  $11: 124,\n  $12: 144,\n  $13: 164,\n  $14: 184,\n  $15: 204,\n  $16: 224,\n  $17: 224,\n  $18: 244,\n  $19: 264,\n  $20: 284,\n}\n\ntype SizeKeysIn = keyof typeof size\ntype Sizes = {\n  [Key in SizeKeysIn extends `$${infer Key}` ? Key : SizeKeysIn]: number\n}\ntype SizeKeys = `${keyof Sizes extends `${infer K}` ? K : never}`\n\nconst spaces = Object.entries(size).map(([k, v]) => {\n  return [k, sizeToSpace(v)]\n})\n\n// a bit odd but keeping backward compat for values >8 while fixing below\nfunction sizeToSpace(v: number) {\n  if (v === 0) return 0\n  if (v === 2) return 0.5\n  if (v === 4) return 1\n  if (v === 8) return 1.5\n  if (v <= 16) return Math.round(v * 0.333)\n  return Math.floor(v * 0.7 - 12)\n}\n\nconst spacesNegative = spaces.map(([k, v]) => [`-${(k as string).slice(1)}`, -v])\n\ntype SizeKeysWithNegatives =\n  | `-${SizeKeys extends `$${infer Key}` ? Key : SizeKeys}`\n  | SizeKeys\n\nexport const space: {\n  [Key in SizeKeysWithNegatives]: Key extends keyof Sizes ? Sizes[Key] : number\n} = {\n  ...Object.fromEntries(spaces),\n  ...Object.fromEntries(spacesNegative),\n} as any\n\nexport const zIndex = {\n  0: 0,\n  1: 100,\n  2: 200,\n  3: 300,\n  4: 400,\n  5: 500,\n}\n\nexport const colorTokens = {\n  light: {\n    blue: blue,\n    gray: gray,\n    green: green,\n    orange: orange,\n    pink: pink,\n    purple: purple,\n    red: red,\n    yellow: yellow,\n  },\n  dark: {\n    blue: blueDark,\n    gray: grayDark,\n    green: greenDark,\n    orange: orangeDark,\n    pink: pinkDark,\n    purple: purpleDark,\n    red: redDark,\n    yellow: yellowDark,\n  },\n}\n\nexport const darkColors = {\n  ...colorTokens.dark.blue,\n  ...colorTokens.dark.gray,\n  ...colorTokens.dark.green,\n  ...colorTokens.dark.orange,\n  ...colorTokens.dark.pink,\n  ...colorTokens.dark.purple,\n  ...colorTokens.dark.red,\n  ...colorTokens.dark.yellow,\n}\n\nexport const lightColors = {\n  ...colorTokens.light.blue,\n  ...colorTokens.light.gray,\n  ...colorTokens.light.green,\n  ...colorTokens.light.orange,\n  ...colorTokens.light.pink,\n  ...colorTokens.light.purple,\n  ...colorTokens.light.red,\n  ...colorTokens.light.yellow,\n}\n\nexport const color = {\n  ...postfixObjKeys(lightColors, 'Light'),\n  ...postfixObjKeys(darkColors, 'Dark'),\n}\n\nfunction postfixObjKeys<\n  A extends { [key: string]: Variable<string> | string },\n  B extends string\n>(\n  obj: A,\n  postfix: B\n): {\n  [Key in `${keyof A extends string ? keyof A : never}${B}`]: Variable<string> | string\n} {\n  return Object.fromEntries(\n    Object.entries(obj).map(([k, v]) => [`${k}${postfix}`, v])\n  ) as any\n}\n\nexport const radius = {\n  0: 0,\n  1: 3,\n  2: 5,\n  3: 7,\n  4: 9,\n  true: 9,\n  5: 10,\n  6: 16,\n  7: 19,\n  8: 22,\n  9: 26,\n  10: 34,\n  11: 42,\n  12: 50,\n}\n\nexport const tokens = createTokens({\n  color,\n  radius,\n  zIndex,\n  space,\n  size,\n})\n"],
-  "mappings": "AAAA;AAAA,EACE;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,OACK;AACP,SAAmB,oBAAoC;AAchD,MAAM,OAAO;AAAA,EAClB,IAAI;AAAA,EACJ,SAAS;AAAA,EACT,QAAQ;AAAA,EACR,SAAS;AAAA,EACT,IAAI;AAAA,EACJ,QAAQ;AAAA,EACR,IAAI;AAAA,EACJ,QAAQ;AAAA,EACR,IAAI;AAAA,EACJ,QAAQ;AAAA,EACR,IAAI;AAAA,EACJ,OAAO;AAAA,EACP,QAAQ;AAAA,EACR,IAAI;AAAA,EACJ,IAAI;AAAA,EACJ,IAAI;AAAA,EACJ,IAAI;AAAA,EACJ,IAAI;AAAA,EACJ,KAAK;AAAA,EACL,KAAK;AAAA,EACL,KAAK;AAAA,EACL,KAAK;AAAA,EACL,KAAK;AAAA,EACL,KAAK;AAAA,EACL,KAAK;AAAA,EACL,KAAK;AAAA,EACL,KAAK;AAAA,EACL,KAAK;AAAA,EACL,KAAK;AACP;AAQA,MAAM,SAAS,OAAO,QAAQ,IAAI,EAAE,IAAI,CAAC,CAAC,GAAG,CAAC,MAAM;AAClD,SAAO,CAAC,GAAG,YAAY,CAAC,CAAC;AAC3B,CAAC;AAGD,SAAS,YAAY,GAAW;AAC9B,MAAI,MAAM;AAAG,WAAO;AACpB,MAAI,MAAM;AAAG,WAAO;AACpB,MAAI,MAAM;AAAG,WAAO;AACpB,MAAI,MAAM;AAAG,WAAO;AACpB,MAAI,KAAK;AAAI,WAAO,KAAK,MAAM,IAAI,KAAK;AACxC,SAAO,KAAK,MAAM,IAAI,MAAM,EAAE;AAChC;AAEA,MAAM,iBAAiB,OAAO,IAAI,CAAC,CAAC,GAAG,CAAC,MAAM,CAAC,IAAK,EAAa,MAAM,CAAC,KAAK,CAAC,CAAC,CAAC;AAMzE,MAAM,QAET;AAAA,EACF,GAAG,OAAO,YAAY,MAAM;AAAA,EAC5B,GAAG,OAAO,YAAY,cAAc;AACtC;AAEO,MAAM,SAAS;AAAA,EACpB,GAAG;AAAA,EACH,GAAG;AAAA,EACH,GAAG;AAAA,EACH,GAAG;AAAA,EACH,GAAG;AAAA,EACH,GAAG;AACL;AAEO,MAAM,cAAc;AAAA,EACzB,OAAO;AAAA,IACL;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,EACF;AAAA,EACA,MAAM;AAAA,IACJ,MAAM;AAAA,IACN,MAAM;AAAA,IACN,OAAO;AAAA,IACP,QAAQ;AAAA,IACR,MAAM;AAAA,IACN,QAAQ;AAAA,IACR,KAAK;AAAA,IACL,QAAQ;AAAA,EACV;AACF;AAEO,MAAM,aAAa;AAAA,EACxB,GAAG,YAAY,KAAK;AAAA,EACpB,GAAG,YAAY,KAAK;AAAA,EACpB,GAAG,YAAY,KAAK;AAAA,EACpB,GAAG,YAAY,KAAK;AAAA,EACpB,GAAG,YAAY,KAAK;AAAA,EACpB,GAAG,YAAY,KAAK;AAAA,EACpB,GAAG,YAAY,KAAK;AAAA,EACpB,GAAG,YAAY,KAAK;AACtB;AAEO,MAAM,cAAc;AAAA,EACzB,GAAG,YAAY,MAAM;AAAA,EACrB,GAAG,YAAY,MAAM;AAAA,EACrB,GAAG,YAAY,MAAM;AAAA,EACrB,GAAG,YAAY,MAAM;AAAA,EACrB,GAAG,YAAY,MAAM;AAAA,EACrB,GAAG,YAAY,MAAM;AAAA,EACrB,GAAG,YAAY,MAAM;AAAA,EACrB,GAAG,YAAY,MAAM;AACvB;AAEO,MAAM,QAAQ;AAAA,EACnB,GAAG,eAAe,aAAa,OAAO;AAAA,EACtC,GAAG,eAAe,YAAY,MAAM;AACtC;AAEA,SAAS,eAIP,KACA,SAGA;AACA,SAAO,OAAO;AAAA,IACZ,OAAO,QAAQ,GAAG,EAAE,IAAI,CAAC,CAAC,GAAG,CAAC,MAAM,CAAC,GAAG,IAAI,WAAW,CAAC,CAAC;AAAA,EAC3D;AACF;AAEO,MAAM,SAAS;AAAA,EACpB,GAAG;AAAA,EACH,GAAG;AAAA,EACH,GAAG;AAAA,EACH,GAAG;AAAA,EACH,GAAG;AAAA,EACH,MAAM;AAAA,EACN,GAAG;AAAA,EACH,GAAG;AAAA,EACH,GAAG;AAAA,EACH,GAAG;AAAA,EACH,GAAG;AAAA,EACH,IAAI;AAAA,EACJ,IAAI;AAAA,EACJ,IAAI;AACN;AAEO,MAAM,SAAS,aAAa;AAAA,EACjC;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AACF,CAAC;",
+  "sourcesContent": ["import {\n  blue,\n  blueDark,\n  gray,\n  grayDark,\n  green,\n  greenDark,\n  orange,\n  orangeDark,\n  pink,\n  pinkDark,\n  purple,\n  purpleDark,\n  red,\n  redDark,\n  yellow,\n  yellowDark,\n} from '@tamagui/colors'\nimport { Variable, createTokens } from '@tamagui/web'\n\n// should roughly map to button/input etc height at each level\n// fonts should match that height/lineHeight at each stop\n// so these are really non-linear on purpose\n// why?\n//   - at sizes <1, used for fine grained things (borders, smallest paddingY)\n//     - so smallest padY should be roughly 1-4px so it can join with lineHeight\n//   - at sizes >=1, have to consider \"pressability\" (jumps up)\n//   - after that it should go upwards somewhat naturally\n//   - H1 / headings top out at 10 naturally, so after 10 we can go upwards faster\n//  but also one more wrinkle...\n//  space is used in conjunction with size\n//  i'm setting space to generally just a fixed fraction of size (~1/3-2/3 still fine tuning)\nexport const size = {\n  $0: 0,\n  '$0.25': 2,\n  '$0.5': 4,\n  '$0.75': 8,\n  $1: 20,\n  '$1.5': 24,\n  $2: 28,\n  '$2.5': 32,\n  $3: 36,\n  '$3.5': 40,\n  $4: 44,\n  $true: 44,\n  '$4.5': 48,\n  $5: 52,\n  $6: 64,\n  $7: 74,\n  $8: 84,\n  $9: 94,\n  $10: 104,\n  $11: 124,\n  $12: 144,\n  $13: 164,\n  $14: 184,\n  $15: 204,\n  $16: 224,\n  $17: 224,\n  $18: 244,\n  $19: 264,\n  $20: 284,\n}\n\ntype SizeKeysIn = keyof typeof size\ntype Sizes = {\n  [Key in SizeKeysIn extends `$${infer Key}` ? Key : SizeKeysIn]: number\n}\ntype SizeKeys = `${keyof Sizes extends `${infer K}` ? K : never}`\n\nconst spaces = Object.entries(size).map(([k, v]) => {\n  return [k, sizeToSpace(v)]\n})\n\n// a bit odd but keeping backward compat for values >8 while fixing below\nfunction sizeToSpace(v: number) {\n  if (v === 0) return 0\n  if (v === 2) return 0.5\n  if (v === 4) return 1\n  if (v === 8) return 1.5\n  if (v <= 16) return Math.round(v * 0.333)\n  return Math.floor(v * 0.7 - 12)\n}\n\nconst spacesNegative = spaces.map(([k, v]) => [`-${(k as string).slice(1)}`, -v])\n\ntype SizeKeysWithNegatives =\n  | `-${SizeKeys extends `$${infer Key}` ? Key : SizeKeys}`\n  | SizeKeys\n\nexport const space: {\n  [Key in SizeKeysWithNegatives]: Key extends keyof Sizes ? Sizes[Key] : number\n} = {\n  ...Object.fromEntries(spaces),\n  ...Object.fromEntries(spacesNegative),\n} as any\n\nexport const zIndex = {\n  0: 0,\n  1: 100,\n  2: 200,\n  3: 300,\n  4: 400,\n  5: 500,\n}\n\nexport const colorTokens = {\n  light: {\n    blue: blue,\n    gray: gray,\n    green: green,\n    orange: orange,\n    pink: pink,\n    purple: purple,\n    red: red,\n    yellow: yellow,\n  },\n  dark: {\n    blue: blueDark,\n    gray: grayDark,\n    green: greenDark,\n    orange: orangeDark,\n    pink: pinkDark,\n    purple: purpleDark,\n    red: redDark,\n    yellow: yellowDark,\n  },\n}\n\nexport const darkColors = {\n  ...colorTokens.dark.blue,\n  ...colorTokens.dark.gray,\n  ...colorTokens.dark.green,\n  ...colorTokens.dark.orange,\n  ...colorTokens.dark.pink,\n  ...colorTokens.dark.purple,\n  ...colorTokens.dark.red,\n  ...colorTokens.dark.yellow,\n}\n\nexport const lightColors = {\n  ...colorTokens.light.blue,\n  ...colorTokens.light.gray,\n  ...colorTokens.light.green,\n  ...colorTokens.light.orange,\n  ...colorTokens.light.pink,\n  ...colorTokens.light.purple,\n  ...colorTokens.light.red,\n  ...colorTokens.light.yellow,\n}\n\nexport const color = {\n  ...postfixObjKeys(lightColors, 'Light'),\n  ...postfixObjKeys(darkColors, 'Dark'),\n}\n\nfunction postfixObjKeys<\n  A extends { [key: string]: Variable<string> | string },\n  B extends string\n>(\n  obj: A,\n  postfix: B\n): {\n  [Key in `${keyof A extends string ? keyof A : never}${B}`]: Variable<string> | string\n} {\n  return Object.fromEntries(\n    Object.entries(obj).map(([k, v]) => [`${k}${postfix}`, v])\n  ) as any\n}\n\nexport const radius = {\n  0: 0,\n  1: 3,\n  2: 5,\n  3: 7,\n  4: 9,\n  true: 9,\n  5: 10,\n  6: 16,\n  7: 19,\n  8: 22,\n  9: 26,\n  10: 34,\n  11: 42,\n  12: 50,\n}\n\nexport const tokens = createTokens({\n  color,\n  radius,\n  zIndex,\n  space,\n  size,\n})\n"],
+  "mappings": "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",
   "names": []
 }

package/dist/esm/v2.js

@@ -0,0 +1 @@
+//# sourceMappingURL=v2.js.map

package/dist/esm/v2.js.map

@@ -0,0 +1,7 @@
+{
+  "version": 3,
+  "sources": [],
+  "sourcesContent": [],
+  "mappings": "",
+  "names": []
+}

package/dist/esm/v2.mjs

@@ -0,0 +1 @@
+//# sourceMappingURL=v2.mjs.map

package/dist/esm/v2.mjs.map

@@ -0,0 +1,7 @@
+{
+  "version": 3,
+  "sources": [],
+  "sourcesContent": [],
+  "mappings": "",
+  "names": []
+}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@tamagui/theme-base",
-  "version": "1.3.1",
+  "version": "1.5.0",
   "types": "./types/index.d.ts",
   "main": "dist/cjs",
   "module": "dist/esm",
@@ -27,12 +27,13 @@
     }
   },
   "dependencies": {
-    "@tamagui/colors": "^1.3.1",
-    "@tamagui/core": "^1.3.1",
-    "@tamagui/create-themes": "^1.3.1"
+    "@tamagui/colors": "^1.5.0",
+    "@tamagui/core": "^1.5.0",
+    "@tamagui/create-theme": "^1.5.0",
+    "@tamagui/create-themes": "^1.5.0"
   },
   "devDependencies": {
-    "@tamagui/build": "^1.3.1"
+    "@tamagui/build": "^1.5.0"
   },
   "publishConfig": {
     "access": "public"

package/src/tokens.tsx

@@ -16,7 +16,7 @@ import {
   yellow,
   yellowDark,
 } from '@tamagui/colors'
-import { Variable, createTokens, createVariable } from '@tamagui/core'
+import { Variable, createTokens } from '@tamagui/web'
 
 // should roughly map to button/input etc height at each level
 // fonts should match that height/lineHeight at each stop

package/types/themesv2.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"themesv2.d.ts","sourceRoot":"","sources":["../src/themesv2.tsx"],"names":[],"mappings":"AA2JA,eAAO,MAAM,MAAM;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CA4EjB,CAAA"}

package/types/tokens.d.ts

@@ -1,4 +1,4 @@
-import { Variable } from '@tamagui/core';
+import { Variable } from '@tamagui/web';
 export declare const size: {
     $0: number;
     '$0.25': number;
@@ -971,13 +971,13 @@ export declare const tokens: {
     };
     radius: {
         0: Variable<number>;
-        1: Variable<number>;
-        4: Variable<number>;
         2: Variable<number>;
-        3: Variable<number>;
+        4: Variable<number>;
         8: Variable<number>;
         true: Variable<number>;
+        1: Variable<number>;
         12: Variable<number>;
+        3: Variable<number>;
         5: Variable<number>;
         7: Variable<number>;
         9: Variable<number>;
@@ -987,9 +987,9 @@ export declare const tokens: {
     };
     zIndex: {
         0: Variable<number>;
-        1: Variable<number>;
-        4: Variable<number>;
         2: Variable<number>;
+        4: Variable<number>;
+        1: Variable<number>;
         3: Variable<number>;
         5: Variable<number>;
     };

package/types/tokens.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"tokens.d.ts","sourceRoot":"","sources":["../src/tokens.tsx"],"names":[],"mappings":"AAkBA,OAAO,EAAE,QAAQ,EAAgC,MAAM,eAAe,CAAA;AActE,eAAO,MAAM,IAAI;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CA8BhB,CAAA;AAED,KAAK,UAAU,GAAG,MAAM,OAAO,IAAI,CAAA;AACnC,KAAK,KAAK,GAAG;KACV,GAAG,IAAI,UAAU,SAAS,IAAI,MAAM,GAAG,EAAE,GAAG,GAAG,GAAG,UAAU,GAAG,MAAM;CACvE,CAAA;AACD,KAAK,QAAQ,GAAG,GAAG,MAAM,KAAK,SAAS,GAAG,MAAM,CAAC,EAAE,GAAG,CAAC,GAAG,KAAK,EAAE,CAAA;AAkBjE,KAAK,qBAAqB,GACtB,IAAI,QAAQ,SAAS,IAAI,MAAM,GAAG,EAAE,GAAG,GAAG,GAAG,QAAQ,EAAE,GACvD,QAAQ,CAAA;AAEZ,eAAO,MAAM,KAAK,EAAE;KACjB,GAAG,IAAI,qBAAqB,GAAG,GAAG,SAAS,MAAM,KAAK,GAAG,KAAK,CAAC,GAAG,CAAC,GAAG,MAAM;CAIvE,CAAA;AAER,eAAO,MAAM,MAAM;;;;;;;CAOlB,CAAA;AAED,eAAO,MAAM,WAAW;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CAqBvB,CAAA;AAED,eAAO,MAAM,UAAU;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CAStB,CAAA;AAED,eAAO,MAAM,WAAW;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CASvB,CAAA;AAED,eAAO,MAAM,KAAK;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CAGjB,CAAA;AAgBD,eAAO,MAAM,MAAM;;;;;;;;;;;;;;;CAelB,CAAA;AAED,eAAO,MAAM,MAAM;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CAMjB,CAAA"}
+{"version":3,"file":"tokens.d.ts","sourceRoot":"","sources":["../src/tokens.tsx"],"names":[],"mappings":"AAkBA,OAAO,EAAE,QAAQ,EAAgB,MAAM,cAAc,CAAA;AAcrD,eAAO,MAAM,IAAI;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CA8BhB,CAAA;AAED,KAAK,UAAU,GAAG,MAAM,OAAO,IAAI,CAAA;AACnC,KAAK,KAAK,GAAG;KACV,GAAG,IAAI,UAAU,SAAS,IAAI,MAAM,GAAG,EAAE,GAAG,GAAG,GAAG,UAAU,GAAG,MAAM;CACvE,CAAA;AACD,KAAK,QAAQ,GAAG,GAAG,MAAM,KAAK,SAAS,GAAG,MAAM,CAAC,EAAE,GAAG,CAAC,GAAG,KAAK,EAAE,CAAA;AAkBjE,KAAK,qBAAqB,GACtB,IAAI,QAAQ,SAAS,IAAI,MAAM,GAAG,EAAE,GAAG,GAAG,GAAG,QAAQ,EAAE,GACvD,QAAQ,CAAA;AAEZ,eAAO,MAAM,KAAK,EAAE;KACjB,GAAG,IAAI,qBAAqB,GAAG,GAAG,SAAS,MAAM,KAAK,GAAG,KAAK,CAAC,GAAG,CAAC,GAAG,MAAM;CAIvE,CAAA;AAER,eAAO,MAAM,MAAM;;;;;;;CAOlB,CAAA;AAED,eAAO,MAAM,WAAW;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CAqBvB,CAAA;AAED,eAAO,MAAM,UAAU;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CAStB,CAAA;AAED,eAAO,MAAM,WAAW;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CASvB,CAAA;AAED,eAAO,MAAM,KAAK;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CAGjB,CAAA;AAgBD,eAAO,MAAM,MAAM;;;;;;;;;;;;;;;CAelB,CAAA;AAED,eAAO,MAAM,MAAM;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CAMjB,CAAA"}

package/types/v2.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"v2.d.ts","sourceRoot":"","sources":["../src/v2.tsx"],"names":[],"mappings":""}

package/README.md

@@ -1,21 +0,0 @@
-```tsx
-import '@tamagui/theme-base/inter.css' // web-fonts
-import '@tamagui/theme-base/fira-code.css' // web-fonts
-import { shorthands } from '@tamagui/shorthands'
-import { themes, tokens } from '@tamagui/theme-base'
-import { createTamagui } from 'tamagui'
-
-export default createTamagui({
-  themes,
-  tokens,
-  shorthands,
-})
-```
-
-For Fira Code:
-
-```
-.font_mono {
-  font-feature-settings:"liga","tnum","zero","ss01","locl","calt";
-}
-```

package/src/colorUtils.tsx

@@ -1,43 +0,0 @@
-import { Variable, getVariableValue } from '@tamagui/core'
-
-export const hexToRGBA = (hex: string, alpha = 1) => {
-  if (!isValidHex(hex)) {
-    throw new Error('Invalid HEX')
-  }
-  const chunkSize = Math.floor((hex.length - 1) / 3)
-  const hexArr = getChunksFromString(hex.slice(1), chunkSize)
-  const [r, g, b, a] = hexArr?.map(convertHexUnitTo256) ?? []
-  return `rgba(${r}, ${g}, ${b}, ${getAlphaFloat(a, alpha)})`
-}
-
-export const setColorAlpha = (colorIn: string | Variable, alpha = 1) => {
-  const color = `${getVariableValue(colorIn)}`
-  if (color.startsWith('hsl(')) {
-    return color.replace('hsl', 'hsla').replace(')', `, ${alpha})`)
-  }
-  if (color.startsWith('#')) {
-    return hexToRGBA(color, alpha)
-  }
-  if (color.startsWith('rgb(')) {
-    return color.replace('rgb', 'rgba').replace(')', `, ${alpha})`)
-  }
-  return color
-}
-
-const isValidHex = (hex: string) => /^#([A-Fa-f0-9]{3,4}){1,2}$/.test(hex)
-
-const getChunksFromString = (st: string, chunkSize = 0) =>
-  st.match(new RegExp(`.{${chunkSize}}`, 'g'))
-
-const convertHexUnitTo256 = (hexStr: string) =>
-  parseInt(hexStr.repeat(2 / hexStr.length), 16)
-
-const getAlphaFloat = (a: any, alpha = 1) => {
-  if (a !== undefined) {
-    return a / 255
-  }
-  if (typeof alpha !== 'number' || alpha < 0 || alpha > 1) {
-    return 1
-  }
-  return alpha
-}