@tamagui/themes 1.116.1 → 1.116.2

package/dist/cjs/themes-old.js

@@ -0,0 +1,266 @@
+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_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");
+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)
+    };
+  });
+  return {
+    ...{
+      ...getAltThemes({ theme, inverse: inverseTheme, isLight }),
+      ...getComponentThemes(theme, inverseTheme, isLight)
+    },
+    ...allColorThemes
+  };
+});
+function getAltThemes({
+  theme,
+  inverse,
+  isLight,
+  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,
+    strength: 3,
+    skip: {
+      ...maskOptions.skip,
+      color: 1
+    }
+  }));
+  return (0, import_create_theme.addChildren)({ alt1, alt2, active }, (_, subTheme) => 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"
+  };
+  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 })
+};
+//# sourceMappingURL=themes-old.js.map

package/dist/cjs/themes.js

@@ -0,0 +1,29 @@
+var __create = Object.create;
+var __defProp = Object.defineProperty;
+var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
+var __getOwnPropNames = Object.getOwnPropertyNames;
+var __getProtoOf = Object.getPrototypeOf, __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 __toESM = (mod, isNodeMode, target) => (target = mod != null ? __create(__getProtoOf(mod)) : {}, __copyProps(
+  // If the importer is in node compatibility mode or this is not an ESM
+  // file that has been converted to a CommonJS file using a Babel-
+  // compatible transform (i.e. "__esModule" has not been set), then set
+  // "default" to the CommonJS "module.exports" for node compatibility.
+  isNodeMode || !mod || !mod.__esModule ? __defProp(target, "default", { value: mod, enumerable: !0 }) : target,
+  mod
+)), __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: !0 }), mod);
+var themes_exports = {};
+__export(themes_exports, {
+  themes: () => themes
+});
+module.exports = __toCommonJS(themes_exports);
+var themes = __toESM(require("./generated-new"));
+//# sourceMappingURL=themes.js.map

package/dist/cjs/tokens.js

@@ -0,0 +1,143 @@
+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 tokens_exports = {};
+__export(tokens_exports, {
+  color: () => color,
+  colorTokens: () => colorTokens,
+  darkColors: () => darkColors,
+  lightColors: () => lightColors,
+  radius: () => radius,
+  size: () => size,
+  space: () => space,
+  tokens: () => tokens,
+  zIndex: () => zIndex
+});
+module.exports = __toCommonJS(tokens_exports);
+var import_colors = require("@tamagui/colors"), import_web = require("@tamagui/web");
+const size = {
+  $0: 0,
+  "$0.25": 2,
+  "$0.5": 4,
+  "$0.75": 8,
+  $1: 20,
+  "$1.5": 24,
+  $2: 28,
+  "$2.5": 32,
+  $3: 36,
+  "$3.5": 40,
+  $4: 44,
+  $true: 44,
+  "$4.5": 48,
+  $5: 52,
+  $6: 64,
+  $7: 74,
+  $8: 84,
+  $9: 94,
+  $10: 104,
+  $11: 124,
+  $12: 144,
+  $13: 164,
+  $14: 184,
+  $15: 204,
+  $16: 224,
+  $17: 224,
+  $18: 244,
+  $19: 264,
+  $20: 284
+}, spaces = Object.entries(size).map(([k, v]) => [k, sizeToSpace(v)]);
+function sizeToSpace(v) {
+  return v === 0 ? 0 : v === 2 ? 0.5 : v === 4 ? 1 : v === 8 ? 1.5 : v <= 16 ? Math.round(v * 0.333) : Math.floor(v * 0.7 - 12);
+}
+const spacesNegative = spaces.slice(1).map(([k, v]) => [`-${k.slice(1)}`, -v]), space = {
+  ...Object.fromEntries(spaces),
+  ...Object.fromEntries(spacesNegative)
+}, zIndex = {
+  0: 0,
+  1: 100,
+  2: 200,
+  3: 300,
+  4: 400,
+  5: 500
+}, colorTokens = {
+  light: {
+    blue: import_colors.blue,
+    gray: import_colors.gray,
+    green: import_colors.green,
+    orange: import_colors.orange,
+    pink: import_colors.pink,
+    purple: import_colors.purple,
+    red: import_colors.red,
+    yellow: import_colors.yellow
+  },
+  dark: {
+    blue: import_colors.blueDark,
+    gray: import_colors.grayDark,
+    green: import_colors.greenDark,
+    orange: import_colors.orangeDark,
+    pink: import_colors.pinkDark,
+    purple: import_colors.purpleDark,
+    red: import_colors.redDark,
+    yellow: import_colors.yellowDark
+  }
+}, darkColors = {
+  ...colorTokens.dark.blue,
+  ...colorTokens.dark.gray,
+  ...colorTokens.dark.green,
+  ...colorTokens.dark.orange,
+  ...colorTokens.dark.pink,
+  ...colorTokens.dark.purple,
+  ...colorTokens.dark.red,
+  ...colorTokens.dark.yellow
+}, lightColors = {
+  ...colorTokens.light.blue,
+  ...colorTokens.light.gray,
+  ...colorTokens.light.green,
+  ...colorTokens.light.orange,
+  ...colorTokens.light.pink,
+  ...colorTokens.light.purple,
+  ...colorTokens.light.red,
+  ...colorTokens.light.yellow
+}, color = {
+  ...postfixObjKeys(lightColors, "Light"),
+  ...postfixObjKeys(darkColors, "Dark")
+};
+function postfixObjKeys(obj, postfix) {
+  return Object.fromEntries(
+    Object.entries(obj).map(([k, v]) => [`${k}${postfix}`, v])
+  );
+}
+const radius = {
+  0: 0,
+  1: 3,
+  2: 5,
+  3: 7,
+  4: 9,
+  true: 9,
+  5: 10,
+  6: 16,
+  7: 19,
+  8: 22,
+  9: 26,
+  10: 34,
+  11: 42,
+  12: 50
+}, tokens = (0, import_web.createTokens)({
+  color,
+  radius,
+  zIndex,
+  space,
+  size
+});
+//# sourceMappingURL=tokens.js.map