@tamagui/themes 1.114.4 → 1.115.0

package/dist/cjs/helpers.cjs

@@ -0,0 +1,34 @@
+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: !0
+    });
+  },
+  __copyProps = (to, from, except, desc) => {
+    if (from && typeof from == "object" || typeof from == "function") for (let key of __getOwnPropNames(from)) !__hasOwnProp.call(to, key) && key !== except && __defProp(to, key, {
+      get: () => from[key],
+      enumerable: !(desc = __getOwnPropDesc(from, key)) || desc.enumerable
+    });
+    return to;
+  };
+var __toCommonJS = mod => __copyProps(__defProp({}, "__esModule", {
+  value: !0
+}), mod);
+var helpers_exports = {};
+__export(helpers_exports, {
+  objectEntries: () => objectEntries,
+  objectFromEntries: () => objectFromEntries,
+  objectKeys: () => objectKeys
+});
+module.exports = __toCommonJS(helpers_exports);
+const objectKeys = obj => Object.keys(obj);
+function objectEntries(obj) {
+  return Object.entries(obj);
+}
+function objectFromEntries(arr) {
+  return Object.fromEntries(arr);
+}

package/dist/cjs/index.cjs

@@ -0,0 +1,25 @@
+var __defProp = Object.defineProperty;
+var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
+var __getOwnPropNames = Object.getOwnPropertyNames;
+var __hasOwnProp = Object.prototype.hasOwnProperty;
+var __copyProps = (to, from, except, desc) => {
+    if (from && typeof from == "object" || typeof from == "function") for (let key of __getOwnPropNames(from)) !__hasOwnProp.call(to, key) && key !== except && __defProp(to, key, {
+      get: () => from[key],
+      enumerable: !(desc = __getOwnPropDesc(from, key)) || desc.enumerable
+    });
+    return to;
+  },
+  __reExport = (target, mod, secondTarget) => (__copyProps(target, mod, "default"), secondTarget && __copyProps(secondTarget, mod, "default"));
+var __toCommonJS = mod => __copyProps(__defProp({}, "__esModule", {
+  value: !0
+}), mod);
+var src_exports = {};
+module.exports = __toCommonJS(src_exports);
+__reExport(src_exports, require("./themes.cjs"), module.exports);
+__reExport(src_exports, require("./tokens.cjs"), module.exports);
+__reExport(src_exports, require("./masks.cjs"), module.exports);
+__reExport(src_exports, require("./componentThemeDefinitions.cjs"), module.exports);
+__reExport(src_exports, require("./palettes.cjs"), module.exports);
+__reExport(src_exports, require("@tamagui/colors"), module.exports);
+__reExport(src_exports, require("./templates.cjs"), module.exports);
+__reExport(src_exports, require("./shadows.cjs"), module.exports);

package/dist/cjs/{masks.js → masks.cjs}

@@ -3,15 +3,21 @@ var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
 var __getOwnPropNames = Object.getOwnPropertyNames;
 var __hasOwnProp = Object.prototype.hasOwnProperty;
 var __export = (target, all) => {
-  for (var name in all)
-    __defProp(target, name, { get: all[name], enumerable: !0 });
-}, __copyProps = (to, from, except, desc) => {
-  if (from && typeof from == "object" || typeof from == "function")
-    for (let key of __getOwnPropNames(from))
-      !__hasOwnProp.call(to, key) && key !== except && __defProp(to, key, { get: () => from[key], enumerable: !(desc = __getOwnPropDesc(from, key)) || desc.enumerable });
-  return to;
-};
-var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: !0 }), mod);
+    for (var name in all) __defProp(target, name, {
+      get: all[name],
+      enumerable: !0
+    });
+  },
+  __copyProps = (to, from, except, desc) => {
+    if (from && typeof from == "object" || typeof from == "function") for (let key of __getOwnPropNames(from)) !__hasOwnProp.call(to, key) && key !== except && __defProp(to, key, {
+      get: () => from[key],
+      enumerable: !(desc = __getOwnPropDesc(from, key)) || desc.enumerable
+    });
+    return to;
+  };
+var __toCommonJS = mod => __copyProps(__defProp({}, "__esModule", {
+  value: !0
+}), mod);
 var masks_exports = {};
 __export(masks_exports, {
   masks: () => masks
@@ -21,19 +27,29 @@ var import_create_theme = require("@tamagui/create-theme");
 const masks = {
   identity: (0, import_create_theme.createIdentityMask)(),
   soften: (0, import_create_theme.createSoftenMask)(),
-  soften2: (0, import_create_theme.createSoftenMask)({ strength: 2 }),
-  soften3: (0, import_create_theme.createSoftenMask)({ strength: 3 }),
+  soften2: (0, import_create_theme.createSoftenMask)({
+    strength: 2
+  }),
+  soften3: (0, import_create_theme.createSoftenMask)({
+    strength: 3
+  }),
   strengthen: (0, import_create_theme.createStrengthenMask)(),
   inverse: (0, import_create_theme.createInverseMask)(),
-  inverseSoften: (0, import_create_theme.combineMasks)((0, import_create_theme.createInverseMask)(), (0, import_create_theme.createSoftenMask)({ strength: 2 })),
-  inverseSoften2: (0, import_create_theme.combineMasks)((0, import_create_theme.createInverseMask)(), (0, import_create_theme.createSoftenMask)({ strength: 3 })),
-  inverseSoften3: (0, import_create_theme.combineMasks)((0, import_create_theme.createInverseMask)(), (0, import_create_theme.createSoftenMask)({ strength: 4 })),
-  inverseStrengthen2: (0, import_create_theme.combineMasks)(
-    (0, import_create_theme.createInverseMask)(),
-    (0, import_create_theme.createStrengthenMask)({ strength: 2 })
-  ),
+  inverseSoften: (0, import_create_theme.combineMasks)((0, import_create_theme.createInverseMask)(), (0, import_create_theme.createSoftenMask)({
+    strength: 2
+  })),
+  inverseSoften2: (0, import_create_theme.combineMasks)((0, import_create_theme.createInverseMask)(), (0, import_create_theme.createSoftenMask)({
+    strength: 3
+  })),
+  inverseSoften3: (0, import_create_theme.combineMasks)((0, import_create_theme.createInverseMask)(), (0, import_create_theme.createSoftenMask)({
+    strength: 4
+  })),
+  inverseStrengthen2: (0, import_create_theme.combineMasks)((0, import_create_theme.createInverseMask)(), (0, import_create_theme.createStrengthenMask)({
+    strength: 2
+  })),
   strengthenButSoftenBorder: (0, import_create_theme.createMask)((template, options) => {
-    const stronger = (0, import_create_theme.createStrengthenMask)().mask(template, options), softer = (0, import_create_theme.createSoftenMask)().mask(template, options);
+    const stronger = (0, import_create_theme.createStrengthenMask)().mask(template, options),
+      softer = (0, import_create_theme.createSoftenMask)().mask(template, options);
     return {
       ...stronger,
       borderColor: softer.borderColor,
@@ -43,7 +59,12 @@ const masks = {
     };
   }),
   soften2Border1: (0, import_create_theme.createMask)((template, options) => {
-    const softer2 = (0, import_create_theme.createSoftenMask)({ strength: 2 }).mask(template, options), softer1 = (0, import_create_theme.createSoftenMask)({ strength: 1 }).mask(template, options);
+    const softer2 = (0, import_create_theme.createSoftenMask)({
+        strength: 2
+      }).mask(template, options),
+      softer1 = (0, import_create_theme.createSoftenMask)({
+        strength: 1
+      }).mask(template, options);
     return {
       ...softer2,
       borderColor: softer1.borderColor,
@@ -53,9 +74,13 @@ const masks = {
     };
   }),
   soften3FlatBorder: (0, import_create_theme.createMask)((template, options) => {
-    const borderMask = (0, import_create_theme.createSoftenMask)({ strength: 2 }).mask(template, options);
+    const borderMask = (0, import_create_theme.createSoftenMask)({
+      strength: 2
+    }).mask(template, options);
     return {
-      ...(0, import_create_theme.createSoftenMask)({ strength: 3 }).mask(template, options),
+      ...(0, import_create_theme.createSoftenMask)({
+        strength: 3
+      }).mask(template, options),
       borderColor: borderMask.borderColor,
       borderColorHover: borderMask.borderColorHover,
       borderColorPress: borderMask.borderColorPress,
@@ -63,7 +88,8 @@ const masks = {
     };
   }),
   softenBorder: (0, import_create_theme.createMask)((template, options) => {
-    const plain = import_create_theme.skipMask.mask(template, options), softer = (0, import_create_theme.createSoftenMask)().mask(template, options);
+    const plain = import_create_theme.skipMask.mask(template, options),
+      softer = (0, import_create_theme.createSoftenMask)().mask(template, options);
     return {
       ...plain,
       borderColor: softer.borderColor,
@@ -73,7 +99,10 @@ const masks = {
     };
   }),
   softenBorder2: (0, import_create_theme.createMask)((template, options) => {
-    const plain = import_create_theme.skipMask.mask(template, options), softer = (0, import_create_theme.createSoftenMask)({ strength: 2 }).mask(template, options);
+    const plain = import_create_theme.skipMask.mask(template, options),
+      softer = (0, import_create_theme.createSoftenMask)({
+        strength: 2
+      }).mask(template, options);
     return {
       ...plain,
       borderColor: softer.borderColor,
@@ -82,5 +111,4 @@ const masks = {
       borderColorFocus: softer.borderColorFocus
     };
   })
-};
-//# sourceMappingURL=masks.js.map
+};

package/dist/cjs/palettes.cjs

@@ -0,0 +1,52 @@
+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: !0
+    });
+  },
+  __copyProps = (to, from, except, desc) => {
+    if (from && typeof from == "object" || typeof from == "function") for (let key of __getOwnPropNames(from)) !__hasOwnProp.call(to, key) && key !== except && __defProp(to, key, {
+      get: () => from[key],
+      enumerable: !(desc = __getOwnPropDesc(from, key)) || desc.enumerable
+    });
+    return to;
+  };
+var __toCommonJS = mod => __copyProps(__defProp({}, "__esModule", {
+  value: !0
+}), mod);
+var palettes_exports = {};
+__export(palettes_exports, {
+  palettes: () => palettes
+});
+module.exports = __toCommonJS(palettes_exports);
+var import_helpers = require("./helpers.cjs"),
+  import_tokens = require("./tokens.cjs");
+const palettes = (() => {
+  const lightTransparent = "rgba(255,255,255,0)",
+    darkTransparent = "rgba(10,10,10,0)",
+    transparent = (hsl, opacity = 0) => hsl.replace("%)", `%, ${opacity})`).replace("hsl(", "hsla("),
+    getColorPalette = (colors, color = colors[0]) => {
+      const colorPalette = Object.values(colors),
+        [head, tail] = [colorPalette.slice(0, 6), colorPalette.slice(colorPalette.length - 5)];
+      return [transparent(colorPalette[0]), ...head, ...tail, color, transparent(colorPalette[colorPalette.length - 1])];
+    },
+    lightColor = "hsl(0, 0%, 9.0%)",
+    lightPalette = [lightTransparent, "#fff", "#f8f8f8", "hsl(0, 0%, 96.3%)", "hsl(0, 0%, 94.1%)", "hsl(0, 0%, 92.0%)", "hsl(0, 0%, 90.0%)", "hsl(0, 0%, 88.5%)", "hsl(0, 0%, 81.0%)", "hsl(0, 0%, 56.1%)", "hsl(0, 0%, 50.3%)", "hsl(0, 0%, 42.5%)", lightColor, darkTransparent],
+    darkColor = "#fff",
+    darkPalette = [darkTransparent, "#050505", "#151515", "#191919", "#232323", "#282828", "#323232", "#424242", "#494949", "#545454", "#626262", "#a5a5a5", darkColor, lightTransparent],
+    lightPalettes = (0, import_helpers.objectFromEntries)((0, import_helpers.objectKeys)(import_tokens.colorTokens.light).map(key => [`light_${key}`, getColorPalette(import_tokens.colorTokens.light[key], lightColor)])),
+    darkPalettes = (0, import_helpers.objectFromEntries)((0, import_helpers.objectKeys)(import_tokens.colorTokens.dark).map(key => [`dark_${key}`, getColorPalette(import_tokens.colorTokens.dark[key], darkColor)])),
+    colorPalettes = {
+      ...lightPalettes,
+      ...darkPalettes
+    };
+  return {
+    light: lightPalette,
+    dark: darkPalette,
+    ...colorPalettes
+  };
+})();

package/dist/cjs/shadows.cjs

@@ -0,0 +1,43 @@
+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: !0
+    });
+  },
+  __copyProps = (to, from, except, desc) => {
+    if (from && typeof from == "object" || typeof from == "function") for (let key of __getOwnPropNames(from)) !__hasOwnProp.call(to, key) && key !== except && __defProp(to, key, {
+      get: () => from[key],
+      enumerable: !(desc = __getOwnPropDesc(from, key)) || desc.enumerable
+    });
+    return to;
+  };
+var __toCommonJS = mod => __copyProps(__defProp({}, "__esModule", {
+  value: !0
+}), mod);
+var shadows_exports = {};
+__export(shadows_exports, {
+  shadows: () => shadows
+});
+module.exports = __toCommonJS(shadows_exports);
+const lightShadowColor = "rgba(0,0,0,0.04)",
+  lightShadowColorStrong = "rgba(0,0,0,0.085)",
+  darkShadowColor = "rgba(0,0,0,0.2)",
+  darkShadowColorStrong = "rgba(0,0,0,0.3)",
+  shadows = {
+    light: {
+      shadowColor: lightShadowColorStrong,
+      shadowColorHover: lightShadowColorStrong,
+      shadowColorPress: lightShadowColor,
+      shadowColorFocus: lightShadowColor
+    },
+    dark: {
+      shadowColor: darkShadowColorStrong,
+      shadowColorHover: darkShadowColorStrong,
+      shadowColorPress: darkShadowColor,
+      shadowColorFocus: darkShadowColor
+    }
+  };

package/dist/cjs/templates.cjs

@@ -0,0 +1,118 @@
+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: !0
+    });
+  },
+  __copyProps = (to, from, except, desc) => {
+    if (from && typeof from == "object" || typeof from == "function") for (let key of __getOwnPropNames(from)) !__hasOwnProp.call(to, key) && key !== except && __defProp(to, key, {
+      get: () => from[key],
+      enumerable: !(desc = __getOwnPropDesc(from, key)) || desc.enumerable
+    });
+    return to;
+  };
+var __toCommonJS = mod => __copyProps(__defProp({}, "__esModule", {
+  value: !0
+}), mod);
+var templates_exports = {};
+__export(templates_exports, {
+  maskOptions: () => maskOptions,
+  templates: () => templates
+});
+module.exports = __toCommonJS(templates_exports);
+var import_palettes = require("./palettes.cjs");
+const templateColorsSpecific = {
+    color1: 1,
+    color2: 2,
+    color3: 3,
+    color4: 4,
+    color5: 5,
+    color6: 6,
+    color7: 7,
+    color8: 8,
+    color9: 9,
+    color10: 10,
+    color11: 11,
+    color12: 12
+  },
+  template = {
+    ...templateColorsSpecific,
+    // 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
+  },
+  templates = {
+    base: template,
+    colorLight: {
+      ...template,
+      // light color themes are a bit less sensitive
+      borderColor: 4,
+      borderColorHover: 5,
+      borderColorFocus: 4,
+      borderColorPress: 4
+    }
+  },
+  shadows = {
+    shadowColor: 0,
+    shadowColorHover: 0,
+    shadowColorPress: 0,
+    shadowColorFocus: 0
+  },
+  colors = {
+    ...shadows,
+    color: 0,
+    colorHover: 0,
+    colorFocus: 0,
+    colorPress: 0
+  },
+  baseMaskOptions = {
+    override: shadows,
+    skip: shadows,
+    // avoids the transparent ends
+    max: import_palettes.palettes.light.length - 2,
+    min: 1
+  },
+  skipShadowsAndSpecificColors = {
+    ...shadows,
+    ...templateColorsSpecific
+  },
+  maskOptions = {
+    component: {
+      ...baseMaskOptions,
+      override: colors,
+      skip: skipShadowsAndSpecificColors
+    },
+    alt: {
+      ...baseMaskOptions
+    },
+    button: {
+      ...baseMaskOptions,
+      override: {
+        ...colors,
+        borderColor: "transparent",
+        borderColorHover: "transparent"
+      },
+      skip: skipShadowsAndSpecificColors
+    }
+  };

package/dist/cjs/themes-new.cjs

@@ -0,0 +1,86 @@
+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: !0
+    });
+  },
+  __copyProps = (to, from, except, desc) => {
+    if (from && typeof from == "object" || typeof from == "function") for (let key of __getOwnPropNames(from)) !__hasOwnProp.call(to, key) && key !== except && __defProp(to, key, {
+      get: () => from[key],
+      enumerable: !(desc = __getOwnPropDesc(from, key)) || desc.enumerable
+    });
+    return to;
+  };
+var __toCommonJS = mod => __copyProps(__defProp({}, "__esModule", {
+  value: !0
+}), mod);
+var themes_new_exports = {};
+__export(themes_new_exports, {
+  themes: () => themes
+});
+module.exports = __toCommonJS(themes_new_exports);
+var import_theme_builder = require("@tamagui/theme-builder"),
+  import_componentThemeDefinitions = require("./componentThemeDefinitions.cjs"),
+  import_masks = require("./masks.cjs"),
+  import_palettes = require("./palettes.cjs"),
+  import_shadows = require("./shadows.cjs"),
+  import_templates = require("./templates.cjs"),
+  import_tokens = require("./tokens.cjs");
+const colorThemeDefinition = colorName => [{
+    parent: "light",
+    palette: colorName,
+    template: "colorLight"
+  }, {
+    parent: "dark",
+    palette: colorName,
+    template: "base"
+  }],
+  themesBuilder = (0, import_theme_builder.createThemeBuilder)().addPalettes(import_palettes.palettes).addTemplates(import_templates.templates).addMasks(import_masks.masks).addThemes({
+    light: {
+      template: "base",
+      palette: "light",
+      nonInheritedValues: {
+        ...import_tokens.lightColors,
+        ...import_shadows.shadows.light
+      }
+    },
+    dark: {
+      template: "base",
+      palette: "dark",
+      nonInheritedValues: {
+        ...import_tokens.darkColors,
+        ...import_shadows.shadows.dark
+      }
+    }
+  }).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, {
+    // to save bundle size but make alt themes not work on components
+    // avoidNestingWithin: ['alt1', 'alt2'],
+  }),
+  themes = themesBuilder.build();