@tamagui/themes 1.116.1 → 1.116.2

package/dist/cjs/helpers.js

@@ -0,0 +1,29 @@
+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);
+}
+//# sourceMappingURL=helpers.js.map

package/dist/cjs/index.js

@@ -0,0 +1,22 @@
+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"), module.exports);
+__reExport(src_exports, require("./tokens"), module.exports);
+__reExport(src_exports, require("./masks"), module.exports);
+__reExport(src_exports, require("./componentThemeDefinitions"), module.exports);
+__reExport(src_exports, require("./palettes"), module.exports);
+__reExport(src_exports, require("@tamagui/colors"), module.exports);
+__reExport(src_exports, require("./templates"), module.exports);
+__reExport(src_exports, require("./shadows"), module.exports);
+//# sourceMappingURL=index.js.map

package/dist/cjs/masks.js

@@ -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 masks_exports = {};
+__export(masks_exports, {
+  masks: () => masks
+});
+module.exports = __toCommonJS(masks_exports);
+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 }),
+  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 })
+  ),
+  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);
+    return {
+      ...stronger,
+      borderColor: softer.borderColor,
+      borderColorHover: softer.borderColorHover,
+      borderColorPress: softer.borderColorPress,
+      borderColorFocus: softer.borderColorFocus
+    };
+  }),
+  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);
+    return {
+      ...softer2,
+      borderColor: softer1.borderColor,
+      borderColorHover: softer1.borderColorHover,
+      borderColorPress: softer1.borderColorPress,
+      borderColorFocus: softer1.borderColorFocus
+    };
+  }),
+  soften3FlatBorder: (0, import_create_theme.createMask)((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),
+      borderColor: borderMask.borderColor,
+      borderColorHover: borderMask.borderColorHover,
+      borderColorPress: borderMask.borderColorPress,
+      borderColorFocus: borderMask.borderColorFocus
+    };
+  }),
+  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);
+    return {
+      ...plain,
+      borderColor: softer.borderColor,
+      borderColorHover: softer.borderColorHover,
+      borderColorPress: softer.borderColorPress,
+      borderColorFocus: softer.borderColorFocus
+    };
+  }),
+  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);
+    return {
+      ...plain,
+      borderColor: softer.borderColor,
+      borderColorHover: softer.borderColorHover,
+      borderColorPress: softer.borderColorPress,
+      borderColorFocus: softer.borderColorFocus
+    };
+  })
+};
+//# sourceMappingURL=masks.js.map

package/dist/cjs/palettes.js

@@ -0,0 +1,82 @@
+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"), import_tokens = require("./tokens");
+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
+  };
+})();
+//# sourceMappingURL=palettes.js.map

package/dist/cjs/shadows.js

@@ -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 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
+  }
+};
+//# sourceMappingURL=shadows.js.map

package/dist/cjs/templates.js

@@ -0,0 +1,106 @@
+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");
+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
+  }
+};
+//# sourceMappingURL=templates.js.map

package/dist/cjs/themes-new.js

@@ -0,0 +1,76 @@
+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"), import_masks = require("./masks"), import_palettes = require("./palettes"), import_shadows = require("./shadows"), import_templates = require("./templates"), import_tokens = require("./tokens");
+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();
+//# sourceMappingURL=themes-new.js.map