@tamagui/themes 1.31.1 → 1.31.3

package/dist/cjs/palettes.js

@@ -0,0 +1,102 @@
+"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 palettes_exports = {};
+__export(palettes_exports, {
+  palettes: () => palettes
+});
+module.exports = __toCommonJS(palettes_exports);
+var import_helpers = require("./helpers");
+var import_tokens = require("./tokens");
+const palettes = (() => {
+  const lightTransparent = "rgba(255,255,255,0)";
+  const darkTransparent = "rgba(10,10,10,0)";
+  const transparent = (hsl, opacity = 0) => hsl.replace(`%)`, `%, ${opacity})`).replace(`hsl(`, `hsla(`);
+  const getColorPalette = (colors, color = colors[0]) => {
+    const colorPalette = Object.values(colors);
+    const [head, tail] = [
+      colorPalette.slice(0, 6),
+      colorPalette.slice(colorPalette.length - 5)
+    ];
+    return [
+      transparent(colorPalette[0]),
+      ...head,
+      ...tail,
+      color,
+      transparent(colorPalette[colorPalette.length - 1])
+    ];
+  };
+  const lightColor = "hsl(0, 0%, 9.0%)";
+  const lightPalette = [
+    lightTransparent,
+    "#fff",
+    "#f9f9f9",
+    "hsl(0, 0%, 97.3%)",
+    "hsl(0, 0%, 95.1%)",
+    "hsl(0, 0%, 94.0%)",
+    "hsl(0, 0%, 92.0%)",
+    "hsl(0, 0%, 89.5%)",
+    "hsl(0, 0%, 81.0%)",
+    "hsl(0, 0%, 56.1%)",
+    "hsl(0, 0%, 50.3%)",
+    "hsl(0, 0%, 42.5%)",
+    lightColor,
+    darkTransparent
+  ];
+  const darkColor = "#fff";
+  const darkPalette = [
+    darkTransparent,
+    "#050505",
+    "#151515",
+    "#191919",
+    "#232323",
+    "#282828",
+    "#323232",
+    "#424242",
+    "#494949",
+    "#545454",
+    "#626262",
+    "#a5a5a5",
+    darkColor,
+    lightTransparent
+  ];
+  const lightPalettes = (0, import_helpers.objectFromEntries)(
+    (0, import_helpers.objectKeys)(import_tokens.colorTokens.light).map(
+      (key) => [`light_${key}`, getColorPalette(import_tokens.colorTokens.light[key], lightColor)]
+    )
+  );
+  const darkPalettes = (0, import_helpers.objectFromEntries)(
+    (0, import_helpers.objectKeys)(import_tokens.colorTokens.dark).map(
+      (key) => [`dark_${key}`, getColorPalette(import_tokens.colorTokens.dark[key], darkColor)]
+    )
+  );
+  const colorPalettes = {
+    ...lightPalettes,
+    ...darkPalettes
+  };
+  return {
+    light: lightPalette,
+    dark: darkPalette,
+    ...colorPalettes
+  };
+})();
+// Annotate the CommonJS export names for ESM import in node:
+0 && (module.exports = {
+  palettes
+});
+//# sourceMappingURL=palettes.js.map

package/dist/cjs/palettes.js.map

@@ -0,0 +1,6 @@
+{
+  "version": 3,
+  "sources": ["../../src/palettes.tsx"],
+  "mappings": ";;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,qBAA8C;AAC9C,oBAA4B;AAErB,MAAM,YAAY,MAAM;AAC7B,QAAM,mBAAmB;AACzB,QAAM,kBAAkB;AAExB,QAAM,cAAc,CAAC,KAAa,UAAU,MAC1C,IAAI,QAAQ,MAAM,MAAM,UAAU,EAAE,QAAQ,QAAQ,OAAO;AAE7D,QAAM,kBAAkB,CAAC,QAAgB,QAAQ,OAAO,CAAC,MAAgB;AACvE,UAAM,eAAe,OAAO,OAAO,MAAM;AAGzC,UAAM,CAAC,MAAM,IAAI,IAAI;AAAA,MACnB,aAAa,MAAM,GAAG,CAAC;AAAA,MACvB,aAAa,MAAM,aAAa,SAAS,CAAC;AAAA,IAC5C;AAKA,WAAO;AAAA,MACL,YAAY,aAAa,CAAC,CAAC;AAAA,MAC3B,GAAG;AAAA,MACH,GAAG;AAAA,MACH;AAAA,MACA,YAAY,aAAa,aAAa,SAAS,CAAC,CAAC;AAAA,IACnD;AAAA,EACF;AAEA,QAAM,aAAa;AACnB,QAAM,eAAe;AAAA,IACnB;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;AAEA,QAAM,YAAY;AAClB,QAAM,cAAc;AAAA,IAClB;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;AAEA,QAAM,oBAAgB;AAAA,QACpB,2BAAW,0BAAY,KAAK,EAAE;AAAA,MAC5B,CAAC,QACC,CAAC,SAAS,OAAO,gBAAgB,0BAAY,MAAM,GAAG,GAAG,UAAU,CAAC;AAAA,IACxE;AAAA,EACF;AAEA,QAAM,mBAAe;AAAA,QACnB,2BAAW,0BAAY,IAAI,EAAE;AAAA,MAC3B,CAAC,QAAQ,CAAC,QAAQ,OAAO,gBAAgB,0BAAY,KAAK,GAAG,GAAG,SAAS,CAAC;AAAA,IAC5E;AAAA,EACF;AAEA,QAAM,gBAAgB;AAAA,IACpB,GAAG;AAAA,IACH,GAAG;AAAA,EACL;AAEA,SAAO;AAAA,IACL,OAAO;AAAA,IACP,MAAM;AAAA,IACN,GAAG;AAAA,EACL;AACF,GAAG;",
+  "names": []
+}

package/dist/cjs/templates.js

@@ -0,0 +1,128 @@
+"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 templates_exports = {};
+__export(templates_exports, {
+  maskOptions: () => maskOptions,
+  templates: () => templates
+});
+module.exports = __toCommonJS(templates_exports);
+var import_palettes = require("./palettes");
+const { templates, maskOptions } = (() => {
+  const templateColors = {
+    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 template = {
+    ...templateColors,
+    // 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: 4,
+    backgroundFocus: 5,
+    backgroundStrong: 1,
+    backgroundTransparent: 0,
+    color: -1,
+    colorHover: -2,
+    colorPress: -1,
+    colorFocus: -2,
+    colorTransparent: -0,
+    borderColor: 5,
+    borderColorHover: 6,
+    borderColorFocus: 4,
+    borderColorPress: 5,
+    placeholderColor: -4
+  };
+  const templates2 = {
+    base: template,
+    colorLight: {
+      ...template,
+      // light color themes are a bit less sensitive
+      borderColor: 4,
+      borderColorHover: 5,
+      borderColorFocus: 4,
+      borderColorPress: 4
+    }
+  };
+  const overrideShadows = {
+    shadowColor: 0,
+    shadowColorHover: 0,
+    shadowColorPress: 0,
+    shadowColorFocus: 0
+  };
+  const overrideWithColors = {
+    ...overrideShadows,
+    color: 0,
+    colorHover: 0,
+    colorFocus: 0,
+    colorPress: 0
+  };
+  const baseMaskOptions = {
+    override: overrideShadows,
+    skip: overrideShadows,
+    // avoids the transparent ends
+    max: import_palettes.palettes.light.length - 2,
+    min: 1
+  };
+  const skipShadowsAndColors = {
+    ...overrideShadows,
+    ...templateColors
+  };
+  const maskOptions2 = {
+    component: {
+      ...baseMaskOptions,
+      override: overrideWithColors,
+      skip: skipShadowsAndColors
+    },
+    alt: {
+      ...baseMaskOptions
+    },
+    button: {
+      ...baseMaskOptions,
+      override: {
+        ...overrideWithColors,
+        borderColor: "transparent",
+        borderColorHover: "transparent"
+      },
+      skip: skipShadowsAndColors
+    }
+  };
+  return {
+    templates: templates2,
+    maskOptions: maskOptions2
+  };
+})();
+// Annotate the CommonJS export names for ESM import in node:
+0 && (module.exports = {
+  maskOptions,
+  templates
+});
+//# sourceMappingURL=templates.js.map

package/dist/cjs/templates.js.map

@@ -0,0 +1,6 @@
+{
+  "version": 3,
+  "sources": ["../../src/templates.tsx"],
+  "mappings": ";;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAEA,sBAAyB;AAElB,MAAM,EAAE,WAAW,YAAY,KAAK,MAAM;AAC/C,QAAM,iBAAiB;AAAA,IACrB,QAAQ;AAAA,IACR,QAAQ;AAAA,IACR,QAAQ;AAAA,IACR,QAAQ;AAAA,IACR,QAAQ;AAAA,IACR,QAAQ;AAAA,IACR,QAAQ;AAAA,IACR,QAAQ;AAAA,IACR,QAAQ;AAAA,IACR,SAAS;AAAA,IACT,SAAS;AAAA,IACT,SAAS;AAAA,EACX;AAIA,QAAM,WAAW;AAAA,IACf,GAAG;AAAA;AAAA;AAAA;AAAA;AAAA,IAKH,YAAY;AAAA,IACZ,iBAAiB;AAAA,IACjB,iBAAiB;AAAA,IACjB,iBAAiB;AAAA,IACjB,kBAAkB;AAAA,IAClB,uBAAuB;AAAA,IACvB,OAAO;AAAA,IACP,YAAY;AAAA,IACZ,YAAY;AAAA,IACZ,YAAY;AAAA,IACZ,kBAAkB;AAAA,IAClB,aAAa;AAAA,IACb,kBAAkB;AAAA,IAClB,kBAAkB;AAAA,IAClB,kBAAkB;AAAA,IAClB,kBAAkB;AAAA,EACpB;AAEA,QAAMA,aAAY;AAAA,IAChB,MAAM;AAAA,IACN,YAAY;AAAA,MACV,GAAG;AAAA;AAAA,MAEH,aAAa;AAAA,MACb,kBAAkB;AAAA,MAClB,kBAAkB;AAAA,MAClB,kBAAkB;AAAA,IACpB;AAAA,EACF;AAEA,QAAM,kBAAkB;AAAA,IACtB,aAAa;AAAA,IACb,kBAAkB;AAAA,IAClB,kBAAkB;AAAA,IAClB,kBAAkB;AAAA,EACpB;AAEA,QAAM,qBAAqB;AAAA,IACzB,GAAG;AAAA,IACH,OAAO;AAAA,IACP,YAAY;AAAA,IACZ,YAAY;AAAA,IACZ,YAAY;AAAA,EACd;AAEA,QAAM,kBAA+B;AAAA,IACnC,UAAU;AAAA,IACV,MAAM;AAAA;AAAA,IAEN,KAAK,yBAAS,MAAM,SAAS;AAAA,IAC7B,KAAK;AAAA,EACP;AAEA,QAAM,uBAAuB;AAAA,IAC3B,GAAG;AAAA,IACH,GAAG;AAAA,EACL;AAEA,QAAMC,eAAc;AAAA,IAClB,WAAW;AAAA,MACT,GAAG;AAAA,MACH,UAAU;AAAA,MACV,MAAM;AAAA,IACR;AAAA,IACA,KAAK;AAAA,MACH,GAAG;AAAA,IACL;AAAA,IACA,QAAQ;AAAA,MACN,GAAG;AAAA,MACH,UAAU;AAAA,QACR,GAAG;AAAA,QACH,aAAa;AAAA,QACb,kBAAkB;AAAA,MACpB;AAAA,MACA,MAAM;AAAA,IACR;AAAA,EACF;AAEA,SAAO;AAAA,IACL,WAAAD;AAAA,IACA,aAAAC;AAAA,EACF;AACF,GAAG;",
+  "names": ["templates", "maskOptions"]
+}

package/dist/cjs/themes-new.js

@@ -0,0 +1,107 @@
+"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 themes_new_exports = {};
+__export(themes_new_exports, {
+  themes: () => themes
+});
+module.exports = __toCommonJS(themes_new_exports);
+var import_create_theme = require("@tamagui/create-theme");
+var import_componentThemeDefinitions = require("./componentThemeDefinitions");
+var import_masks = require("./masks");
+var import_palettes = require("./palettes");
+var import_templates = require("./templates");
+var import_tokens = require("./tokens");
+const lightShadowColor = "rgba(0,0,0,0.02)";
+const lightShadowColorStrong = "rgba(0,0,0,0.066)";
+const darkShadowColor = "rgba(0,0,0,0.2)";
+const darkShadowColorStrong = "rgba(0,0,0,0.3)";
+const lightShadows = {
+  shadowColor: lightShadowColorStrong,
+  shadowColorHover: lightShadowColorStrong,
+  shadowColorPress: lightShadowColor,
+  shadowColorFocus: lightShadowColor
+};
+const darkShadows = {
+  shadowColor: darkShadowColorStrong,
+  shadowColorHover: darkShadowColorStrong,
+  shadowColorPress: darkShadowColor,
+  shadowColorFocus: darkShadowColor
+};
+const colorThemeDefinition = (colorName) => [
+  {
+    parent: "light",
+    palette: colorName,
+    template: "colorLight"
+  },
+  {
+    parent: "dark",
+    palette: colorName,
+    template: "base"
+  }
+];
+const themesBuilder = (0, import_create_theme.createThemeBuilder)().addPalettes(import_palettes.palettes).addTemplates(import_templates.templates).addMasks(import_masks.masks).addThemes({
+  light: {
+    template: "base",
+    palette: "light",
+    nonInheritedValues: {
+      ...import_tokens.lightColors,
+      ...lightShadows
+    }
+  },
+  dark: {
+    template: "base",
+    palette: "dark",
+    nonInheritedValues: {
+      ...import_tokens.darkColors,
+      ...darkShadows
+    }
+  }
+}).addChildThemes({
+  orange: colorThemeDefinition("orange"),
+  yellow: colorThemeDefinition("yellow"),
+  green: colorThemeDefinition("green"),
+  blue: colorThemeDefinition("blue"),
+  purple: colorThemeDefinition("purple"),
+  pink: colorThemeDefinition("pink"),
+  red: colorThemeDefinition("red")
+}).addChildThemes({
+  alt1: {
+    mask: "soften",
+    ...import_templates.maskOptions.alt
+  },
+  alt2: {
+    mask: "soften2",
+    ...import_templates.maskOptions.alt
+  },
+  active: {
+    mask: "soften3",
+    skip: {
+      color: 1
+    }
+  }
+}).addChildThemes(import_componentThemeDefinitions.componentThemeDefinitions, {
+  // TODO types should then avoid generating these types!
+  avoidNestingWithin: ["alt1", "alt2", "active"]
+});
+const themes = themesBuilder.build();
+// Annotate the CommonJS export names for ESM import in node:
+0 && (module.exports = {
+  themes
+});
+//# sourceMappingURL=themes-new.js.map

package/dist/cjs/themes-new.js.map

@@ -0,0 +1,6 @@
+{
+  "version": 3,
+  "sources": ["../../src/themes-new.tsx"],
+  "mappings": ";;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,0BAAmC;AAEnC,uCAA0C;AAC1C,mBAAsB;AACtB,sBAAyB;AACzB,uBAAuC;AACvC,oBAAwC;AAExC,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,uBAAuB,CAAC,cAAsB;AAAA,EAClD;AAAA,IACE,QAAQ;AAAA,IACR,SAAS;AAAA,IACT,UAAU;AAAA,EACZ;AAAA,EACA;AAAA,IACE,QAAQ;AAAA,IACR,SAAS;AAAA,IACT,UAAU;AAAA,EACZ;AACF;AAEA,MAAM,oBAAgB,wCAAmB,EACtC,YAAY,wBAAQ,EACpB,aAAa,0BAAS,EACtB,SAAS,kBAAK,EACd,UAAU;AAAA,EACT,OAAO;AAAA,IACL,UAAU;AAAA,IACV,SAAS;AAAA,IACT,oBAAoB;AAAA,MAClB,GAAG;AAAA,MACH,GAAG;AAAA,IACL;AAAA,EACF;AAAA,EACA,MAAM;AAAA,IACJ,UAAU;AAAA,IACV,SAAS;AAAA,IACT,oBAAoB;AAAA,MAClB,GAAG;AAAA,MACH,GAAG;AAAA,IACL;AAAA,EACF;AACF,CAAC,EACA,eAAe;AAAA,EACd,QAAQ,qBAAqB,QAAQ;AAAA,EACrC,QAAQ,qBAAqB,QAAQ;AAAA,EACrC,OAAO,qBAAqB,OAAO;AAAA,EACnC,MAAM,qBAAqB,MAAM;AAAA,EACjC,QAAQ,qBAAqB,QAAQ;AAAA,EACrC,MAAM,qBAAqB,MAAM;AAAA,EACjC,KAAK,qBAAqB,KAAK;AACjC,CAAC,EACA,eAAe;AAAA,EACd,MAAM;AAAA,IACJ,MAAM;AAAA,IACN,GAAG,6BAAY;AAAA,EACjB;AAAA,EACA,MAAM;AAAA,IACJ,MAAM;AAAA,IACN,GAAG,6BAAY;AAAA,EACjB;AAAA,EACA,QAAQ;AAAA,IACN,MAAM;AAAA,IACN,MAAM;AAAA,MACJ,OAAO;AAAA,IACT;AAAA,EACF;AACF,CAAC,EACA,eAAe,4DAA2B;AAAA;AAAA,EAEzC,oBAAoB,CAAC,QAAQ,QAAQ,QAAQ;AAC/C,CAAC;AAEI,MAAM,SAAS,cAAc,MAAM;",
+  "names": []
+}

package/dist/cjs/themes-old.js

@@ -0,0 +1,326 @@
+"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 themes_old_exports = {};
+__export(themes_old_exports, {
+  themes: () => themes
+});
+module.exports = __toCommonJS(themes_old_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,
+    "#050505",
+    "#151515",
+    "#191919",
+    "#232323",
+    "#282828",
+    "#323232",
+    "#424242",
+    "#494949",
+    "#545454",
+    "#626262",
+    "#a5a5a5",
+    "#fff",
+    lightTransparent
+  ],
+  light: [
+    lightTransparent,
+    "#fff",
+    "#f9f9f9",
+    "hsl(0, 0%, 97.3%)",
+    "hsl(0, 0%, 95.1%)",
+    "hsl(0, 0%, 94.0%)",
+    "hsl(0, 0%, 92.0%)",
+    "hsl(0, 0%, 89.5%)",
+    "hsl(0, 0%, 81.0%)",
+    "hsl(0, 0%, 56.1%)",
+    "hsl(0, 0%, 50.3%)",
+    "hsl(0, 0%, 42.5%)",
+    "hsl(0, 0%, 9.0%)",
+    darkTransparent
+  ]
+};
+const templateColors = {
+  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 templateShadows = {
+  shadowColor: 1,
+  shadowColorHover: 1,
+  shadowColorPress: 2,
+  shadowColorFocus: 2
+};
+const toSkip = {
+  ...templateShadows
+};
+const override = Object.fromEntries(Object.entries(toSkip).map(([k]) => [k, 0]));
+const overrideShadows = Object.fromEntries(
+  Object.entries(templateShadows).map(([k]) => [k, 0])
+);
+const overrideWithColors = {
+  ...override,
+  color: 0,
+  colorHover: 0,
+  colorFocus: 0,
+  colorPress: 0
+};
+const template = {
+  ...templateColors,
+  ...toSkip,
+  // 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: 4,
+  backgroundFocus: 5,
+  backgroundStrong: 1,
+  backgroundTransparent: 0,
+  color: -1,
+  colorHover: -2,
+  colorPress: -1,
+  colorFocus: -2,
+  colorTransparent: -0,
+  borderColor: 4,
+  borderColorHover: 5,
+  borderColorPress: 3,
+  borderColorFocus: 4,
+  placeholderColor: -4
+};
+const lightShadowColor = "rgba(0,0,0,0.02)";
+const lightShadowColorStrong = "rgba(0,0,0,0.066)";
+const darkShadowColor = "rgba(0,0,0,0.2)";
+const darkShadowColorStrong = "rgba(0,0,0,0.3)";
+const lightShadows = {
+  shadowColor: lightShadowColorStrong,
+  shadowColorHover: lightShadowColorStrong,
+  shadowColorPress: lightShadowColor,
+  shadowColorFocus: lightShadowColor
+};
+const darkShadows = {
+  shadowColor: darkShadowColorStrong,
+  shadowColorHover: darkShadowColorStrong,
+  shadowColorPress: darkShadowColor,
+  shadowColorFocus: darkShadowColor
+};
+const lightTemplate = {
+  ...template,
+  background: 2,
+  backgroundHover: 3,
+  backgroundPress: 4,
+  // our light color palette is... a bit unique
+  borderColor: 6,
+  borderColorHover: 7,
+  borderColorFocus: 5,
+  borderColorPress: 6,
+  ...lightShadows
+};
+const darkTemplate = { ...template, ...darkShadows };
+const light = (0, import_create_theme.createTheme)(palettes.light, lightTemplate);
+const dark = (0, import_create_theme.createTheme)(palettes.dark, darkTemplate);
+const baseThemes = {
+  light,
+  dark
+};
+const masks = {
+  skip: import_create_theme.skipMask,
+  weaker: (0, import_create_theme.createWeakenMask)(),
+  stronger: (0, import_create_theme.createStrengthenMask)()
+};
+const maskOptions = {
+  override,
+  skip: toSkip,
+  // avoids the transparent ends
+  max: palettes.light.length - 2,
+  min: 1
+};
+const transparent = (hsl, opacity = 0) => hsl.replace(`%)`, `%, ${opacity})`).replace(`hsl(`, `hsla(`);
+const [lightColorThemes, darkColorThemes] = [import_tokens.colorTokens.light, import_tokens.colorTokens.dark].map(
+  (colorSet, i) => {
+    const isLight = i === 0;
+    const theme = baseThemes[isLight ? "light" : "dark"];
+    return Object.fromEntries(
+      Object.keys(colorSet).map((color) => {
+        const colorPalette = Object.values(colorSet[color]);
+        const [head, tail] = [
+          colorPalette.slice(0, 6),
+          colorPalette.slice(colorPalette.length - 5)
+        ];
+        const palette = [
+          transparent(colorPalette[0]),
+          ...head,
+          ...tail,
+          theme.color,
+          transparent(colorPalette[colorPalette.length - 1])
+        ];
+        const colorTheme = (0, import_create_theme.createTheme)(
+          palette,
+          isLight ? {
+            ...lightTemplate,
+            // light color themes are a bit less sensitive
+            borderColor: 4,
+            borderColorHover: 5,
+            borderColorFocus: 4,
+            borderColorPress: 4
+          } : darkTemplate
+        );
+        return [color, colorTheme];
+      })
+    );
+  }
+);
+const allThemes = (0, import_create_theme.addChildren)(baseThemes, (name, theme) => {
+  const isLight = name === "light";
+  const inverseName = isLight ? "dark" : "light";
+  const inverseTheme = baseThemes[inverseName];
+  const colorThemes = isLight ? lightColorThemes : darkColorThemes;
+  const inverseColorThemes = isLight ? darkColorThemes : lightColorThemes;
+  const allColorThemes = (0, import_create_theme.addChildren)(colorThemes, (colorName, colorTheme) => {
+    const inverse = inverseColorThemes[colorName];
+    return {
+      ...getAltThemes({
+        theme: colorTheme,
+        inverse,
+        isLight
+      }),
+      ...getComponentThemes(colorTheme, inverse, isLight)
+    };
+  });
+  const baseSubThemes = {
+    ...getAltThemes({ theme, inverse: inverseTheme, isLight }),
+    ...getComponentThemes(theme, inverseTheme, isLight)
+  };
+  return {
+    ...baseSubThemes,
+    ...allColorThemes
+  };
+});
+function getAltThemes({
+  theme,
+  inverse,
+  isLight,
+  activeTheme
+}) {
+  const maskOptionsAlt = {
+    ...maskOptions,
+    override: overrideShadows
+  };
+  const alt1 = (0, import_create_theme.applyMask)(theme, masks.weaker, maskOptionsAlt);
+  const alt2 = (0, import_create_theme.applyMask)(alt1, masks.weaker, maskOptionsAlt);
+  const active = activeTheme ?? (process.env.ACTIVE_THEME_INVERSE ? inverse : (() => {
+    return (0, import_create_theme.applyMask)(theme, masks.weaker, {
+      ...maskOptions,
+      strength: 3,
+      skip: {
+        ...maskOptions.skip,
+        color: 1
+      }
+    });
+  })());
+  return (0, import_create_theme.addChildren)({ alt1, alt2, active }, (_, subTheme) => {
+    return getComponentThemes(subTheme, subTheme === inverse ? theme : inverse, isLight);
+  });
+}
+function getComponentThemes(theme, inverse, isLight) {
+  const componentMaskOptions = {
+    ...maskOptions,
+    override: overrideWithColors,
+    skip: {
+      ...maskOptions.skip,
+      // skip colors too just for component sub themes
+      ...templateColors
+    }
+  };
+  const weaker1 = (0, import_create_theme.applyMask)(theme, masks.weaker, componentMaskOptions);
+  const base = (0, import_create_theme.applyMask)(weaker1, masks.stronger, componentMaskOptions);
+  const weaker2 = (0, import_create_theme.applyMask)(weaker1, masks.weaker, componentMaskOptions);
+  const stronger1 = (0, import_create_theme.applyMask)(theme, masks.stronger, componentMaskOptions);
+  const inverse1 = (0, import_create_theme.applyMask)(inverse, masks.weaker, componentMaskOptions);
+  const inverse2 = (0, import_create_theme.applyMask)(inverse1, masks.weaker, componentMaskOptions);
+  const strongerBorderLighterBackground = isLight ? {
+    ...stronger1,
+    borderColor: weaker1.borderColor,
+    borderColorHover: weaker1.borderColorHover,
+    borderColorPress: weaker1.borderColorPress,
+    borderColorFocus: weaker1.borderColorFocus
+  } : {
+    ...(0, import_create_theme.applyMask)(theme, masks.skip, componentMaskOptions),
+    borderColor: weaker1.borderColor,
+    borderColorHover: weaker1.borderColorHover,
+    borderColorPress: weaker1.borderColorPress,
+    borderColorFocus: weaker1.borderColorFocus
+  };
+  const overlayTheme = {
+    background: isLight ? "rgba(0,0,0,0.5)" : "rgba(0,0,0,0.9)"
+  };
+  const weaker2WithoutBorder = {
+    ...weaker2,
+    borderColor: "transparent",
+    borderColorHover: "transparent"
+  };
+  return {
+    ListItem: isLight ? stronger1 : base,
+    Card: weaker1,
+    Button: weaker2WithoutBorder,
+    Checkbox: weaker2,
+    DrawerFrame: weaker1,
+    SliderTrack: stronger1,
+    SliderTrackActive: weaker2,
+    SliderThumb: inverse1,
+    Progress: weaker1,
+    ProgressIndicator: inverse,
+    Switch: weaker2,
+    SwitchThumb: inverse2,
+    TooltipArrow: weaker1,
+    TooltipContent: weaker2,
+    Input: strongerBorderLighterBackground,
+    TextArea: strongerBorderLighterBackground,
+    Tooltip: inverse1,
+    // make overlays always dark
+    SheetOverlay: overlayTheme,
+    DialogOverlay: overlayTheme,
+    ModalOverlay: overlayTheme
+  };
+}
+const themes = {
+  ...allThemes,
+  // bring back the full type, the rest use a subset to avoid clogging up ts,
+  // tamagui will be smart and use the top level themes as the type for useTheme() etc
+  light: (0, import_create_theme.createTheme)(palettes.light, lightTemplate, { nonInheritedValues: import_tokens.lightColors }),
+  dark: (0, import_create_theme.createTheme)(palettes.dark, darkTemplate, { nonInheritedValues: import_tokens.darkColors })
+};
+// Annotate the CommonJS export names for ESM import in node:
+0 && (module.exports = {
+  themes
+});
+//# sourceMappingURL=themes-old.js.map