@tamagui/themes 2.0.0-rc.9 → 2.1.0

package/dist/cjs/themes-old.cjs

@@ -3,187 +3,191 @@ 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, {
+  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;
-  };
+  }
+  return to;
+};
 var __toCommonJS = mod => __copyProps(__defProp({}, "__esModule", {
-  value: !0
+  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"),
-  import_tokens = require("./tokens.cjs");
-const lightTransparent = "rgba(255,255,255,0)",
-  darkTransparent = "rgba(10,10,10,0)",
-  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]
-  },
-  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
-  },
-  templateShadows = {
-    shadowColor: 1,
-    shadowColorHover: 1,
-    shadowColorPress: 2,
-    shadowColorFocus: 2
-  },
-  toSkip = {
-    ...templateShadows
-  },
-  override = Object.fromEntries(Object.entries(toSkip).map(([k]) => [k, 0])),
-  overrideShadows = Object.fromEntries(Object.entries(templateShadows).map(([k]) => [k, 0])),
-  overrideWithColors = {
-    ...override,
-    color: 0,
-    colorHover: 0,
-    colorFocus: 0,
-    colorPress: 0
-  },
-  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
-  },
-  lightShadowColor = "rgba(0,0,0,0.02)",
-  lightShadowColorStrong = "rgba(0,0,0,0.066)",
-  darkShadowColor = "rgba(0,0,0,0.2)",
-  darkShadowColorStrong = "rgba(0,0,0,0.3)",
-  lightShadows = {
-    shadowColor: lightShadowColorStrong,
-    shadowColorHover: lightShadowColorStrong,
-    shadowColorPress: lightShadowColor,
-    shadowColorFocus: lightShadowColor
-  },
-  darkShadows = {
-    shadowColor: darkShadowColorStrong,
-    shadowColorHover: darkShadowColorStrong,
-    shadowColorPress: darkShadowColor,
-    shadowColorFocus: darkShadowColor
-  },
-  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
-  },
-  darkTemplate = {
-    ...template,
-    ...darkShadows
-  },
-  light = (0, import_create_theme.createTheme)(palettes.light, lightTemplate),
-  dark = (0, import_create_theme.createTheme)(palettes.dark, darkTemplate),
-  baseThemes = {
-    light,
-    dark
-  },
-  masks = {
-    skip: import_create_theme.skipMask,
-    weaker: (0, import_create_theme.createWeakenMask)(),
-    stronger: (0, import_create_theme.createStrengthenMask)()
-  },
-  maskOptions = {
-    override,
-    skip: toSkip,
-    // avoids the transparent ends
-    max: palettes.light.length - 2,
-    min: 1
-  },
-  transparent = (hsl, opacity = 0) => hsl.replace("%)", `%, ${opacity})`).replace("hsl(", "hsla("),
-  [lightColorThemes, darkColorThemes] = [import_tokens.colorTokens.light, import_tokens.colorTokens.dark].map((colorSet, i) => {
-    const isLight = i === 0,
-      theme = baseThemes[isLight ? "light" : "dark"];
-    return Object.fromEntries(Object.keys(colorSet).map(color => {
-      const colorPalette = Object.values(colorSet[color]),
-        [head, tail] = [colorPalette.slice(0, 6), colorPalette.slice(colorPalette.length - 5)],
-        palette = [transparent(colorPalette[0]), ...head, ...tail, theme.color, transparent(colorPalette[colorPalette.length - 1])],
-        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];
-    }));
-  }),
-  allThemes = (0, import_create_theme.addChildren)(baseThemes, (name, theme) => {
-    const isLight = name === "light",
-      inverseTheme = baseThemes[isLight ? "dark" : "light"],
-      colorThemes = isLight ? lightColorThemes : darkColorThemes,
-      inverseColorThemes = isLight ? darkColorThemes : lightColorThemes,
-      allColorThemes = (0, import_create_theme.addChildren)(colorThemes, (colorName, colorTheme) => {
-        const inverse = inverseColorThemes[colorName];
-        return {
-          ...getAltThemes({
-            theme: colorTheme,
-            inverse,
-            isLight
-          }),
-          ...getComponentThemes(colorTheme, inverse, isLight)
-        };
-      });
+var import_create_theme = require("@tamagui/create-theme");
+var import_tokens = require("./tokens.cjs");
+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,
-          inverse: inverseTheme,
-          isLight
-        }),
-        ...getComponentThemes(theme, inverseTheme, isLight)
-      },
-      ...allColorThemes
+      ...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,
@@ -191,62 +195,66 @@ function getAltThemes({
   activeTheme
 }) {
   const maskOptionsAlt = {
-      ...maskOptions,
-      override: overrideShadows
-    },
-    alt1 = (0, import_create_theme.applyMask)(theme, masks.weaker, maskOptionsAlt),
-    alt2 = (0, import_create_theme.applyMask)(alt1, masks.weaker, maskOptionsAlt),
-    active = activeTheme ?? (process.env.ACTIVE_THEME_INVERSE ? inverse : (0, import_create_theme.applyMask)(theme, masks.weaker, {
+    ...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) => getComponentThemes(subTheme, subTheme === inverse ? theme : inverse, isLight));
+  }, (_, 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
-      }
-    },
-    weaker1 = (0, import_create_theme.applyMask)(theme, masks.weaker, componentMaskOptions),
-    base = (0, import_create_theme.applyMask)(weaker1, masks.stronger, componentMaskOptions),
-    weaker2 = (0, import_create_theme.applyMask)(weaker1, masks.weaker, componentMaskOptions),
-    stronger1 = (0, import_create_theme.applyMask)(theme, masks.stronger, componentMaskOptions),
-    inverse1 = (0, import_create_theme.applyMask)(inverse, masks.weaker, componentMaskOptions),
-    inverse2 = (0, import_create_theme.applyMask)(inverse1, masks.weaker, componentMaskOptions),
-    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
-    },
-    overlayTheme = {
-      background: isLight ? "rgba(0,0,0,0.5)" : "rgba(0,0,0,0.9)"
-    },
-    weaker2WithoutBorder = {
-      ...weaker2,
-      borderColor: "transparent",
-      borderColorHover: "transparent"
-    };
+    ...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,