@tamagui/themes 1.89.0-1706483140977 → 1.89.0

package/dist/cjs/v3-themes.js

@@ -14,15 +14,23 @@ var __export = (target, all) => {
 var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: !0 }), mod);
 var v3_themes_exports = {};
 __export(v3_themes_exports, {
-  maskOptions: () => maskOptions,
-  masks: () => import_masks2.masks,
+  objectFromEntries: () => objectFromEntries,
+  objectKeys: () => objectKeys,
   palettes: () => palettes,
+  postfixObjKeys: () => postfixObjKeys,
+  radius: () => radius,
+  size: () => size,
+  sizeToSpace: () => sizeToSpace,
+  space: () => space,
+  spaces: () => spaces,
+  spacesNegative: () => spacesNegative,
   templates: () => templates,
   themes: () => themes,
-  tokens: () => tokens
+  tokens: () => tokens,
+  zIndex: () => zIndex
 });
 module.exports = __toCommonJS(v3_themes_exports);
-var import_theme_builder = require("@tamagui/theme-builder"), import_colors = require("@tamagui/colors"), import_web = require("@tamagui/web"), import_masks = require("./masks"), import_masks2 = require("./masks");
+var import_colors = require("@tamagui/colors"), import_theme_builder = require("@tamagui/theme-builder"), import_web = require("@tamagui/web");
 const colorTokens = {
   light: {
     blue: import_colors.blue,
@@ -44,56 +52,122 @@ const colorTokens = {
     red: import_colors.redDark,
     yellow: import_colors.yellowDark
   }
+}, 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)", 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 = {
+  white0: "rgba(255,255,255,0)",
+  white075: "rgba(255,255,255,0.75)",
+  white05: "rgba(255,255,255,0.5)",
+  white025: "rgba(255,255,255,0.25)",
+  black0: "rgba(10,10,10,0)",
+  black075: "rgba(10,10,10,0.75)",
+  black05: "rgba(10,10,10,0.5)",
+  black025: "rgba(10,10,10,0.25)",
+  white1: "#fff",
+  white2: "#f8f8f8",
+  white3: "hsl(0, 0%, 96.3%)",
+  white4: "hsl(0, 0%, 94.1%)",
+  white5: "hsl(0, 0%, 92.0%)",
+  white6: "hsl(0, 0%, 90.0%)",
+  white7: "hsl(0, 0%, 88.5%)",
+  white8: "hsl(0, 0%, 81.0%)",
+  white9: "hsl(0, 0%, 56.1%)",
+  white10: "hsl(0, 0%, 50.3%)",
+  white11: "hsl(0, 0%, 42.5%)",
+  white12: "hsl(0, 0%, 9.0%)",
+  black1: "#050505",
+  black2: "#151515",
+  black3: "#191919",
+  black4: "#232323",
+  black5: "#282828",
+  black6: "#323232",
+  black7: "#424242",
+  black8: "#494949",
+  black9: "#545454",
+  black10: "#626262",
+  black11: "#a5a5a5",
+  black12: "#fff",
+  ...postfixObjKeys(lightColors, "Light"),
+  ...postfixObjKeys(darkColors, "Dark")
 }, 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, color2 = colors[0]) => {
-    const colorPalette = Object.values(colors), [head, tail] = [
-      colorPalette.slice(0, 6),
-      colorPalette.slice(colorPalette.length - 5)
-    ];
+  const transparent = (hsl, opacity = 0) => hsl.replace("%)", `%, ${opacity})`).replace("hsl(", "hsla("), getColorPalette = (colors) => {
+    const colorPalette = Object.values(colors), colorI = colorPalette.length - 4;
     return [
-      transparent(colorPalette[0]),
-      ...head,
-      ...tail,
-      color2,
-      transparent(colorPalette[colorPalette.length - 1])
+      transparent(colorPalette[0], 0),
+      transparent(colorPalette[0], 0.25),
+      transparent(colorPalette[0], 0.5),
+      transparent(colorPalette[0], 0.75),
+      ...colorPalette,
+      transparent(colorPalette[colorI], 0.75),
+      transparent(colorPalette[colorI], 0.5),
+      transparent(colorPalette[colorI], 0.25),
+      transparent(colorPalette[colorI], 0)
     ];
-  }, 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
+  }, lightPalette = [
+    color.white0,
+    color.white075,
+    color.white05,
+    color.white025,
+    color.white1,
+    color.white2,
+    color.white3,
+    color.white4,
+    color.white5,
+    color.white6,
+    color.white7,
+    color.white8,
+    color.white9,
+    color.white10,
+    color.white11,
+    color.white12,
+    color.black075,
+    color.black05,
+    color.black025,
+    color.black0
+  ], darkPalette = [
+    color.black0,
+    color.black075,
+    color.black05,
+    color.black025,
+    color.black1,
+    color.black2,
+    color.black3,
+    color.black4,
+    color.black5,
+    color.black6,
+    color.black7,
+    color.black8,
+    color.black9,
+    color.black10,
+    color.black11,
+    color.black12,
+    color.white075,
+    color.white05,
+    color.white025,
+    color.white0
   ], lightPalettes = objectFromEntries(
     objectKeys(colorTokens.light).map(
-      (key) => [`light_${key}`, getColorPalette(colorTokens.light[key], lightColor)]
+      (key) => [`light_${key}`, getColorPalette(colorTokens.light[key])]
     )
   ), darkPalettes = objectFromEntries(
     objectKeys(colorTokens.dark).map(
-      (key) => [`dark_${key}`, getColorPalette(colorTokens.dark[key], darkColor)]
+      (key) => [`dark_${key}`, getColorPalette(colorTokens.dark[key])]
     )
   ), colorPalettes = {
     ...lightPalettes,
@@ -104,126 +178,291 @@ const colorTokens = {
     dark: darkPalette,
     ...colorPalettes
   };
-})(), 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
-}, templates = (() => {
+})(), templates = (() => {
   const base = {
-    ...templateColorsSpecific,
+    background0: 0,
+    background025: 1,
+    background05: 2,
+    background075: 3,
+    color1: 4,
+    color2: 5,
+    color3: 6,
+    color4: 7,
+    color5: 8,
+    color6: 9,
+    color7: 10,
+    color8: 11,
+    color9: 12,
+    color10: 13,
+    color11: 14,
+    color12: 15,
+    color0: -0,
+    color025: -1,
+    color05: -2,
+    color075: -3,
     // 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,
+    background: 4,
+    backgroundHover: 5,
+    backgroundPress: 6,
+    backgroundFocus: 4,
+    borderColor: 7,
+    borderColorHover: 8,
+    borderColorFocus: 5,
+    borderColorPress: 7,
+    color: -4,
+    colorHover: -5,
+    colorPress: -4,
+    colorFocus: -5,
     colorTransparent: -0,
-    borderColor: 5,
-    borderColorHover: 6,
-    borderColorFocus: 4,
-    borderColorPress: 5,
-    placeholderColor: -4,
-    // in the future this should be partially transparent
-    outlineColor: 5
-  }, surface1 = {
+    placeholderColor: -7,
+    outlineColor: -1
+  }, surface12 = {
     background: base.background + 1,
     backgroundHover: base.backgroundHover + 1,
     backgroundPress: base.backgroundPress + 1,
     backgroundFocus: base.backgroundFocus + 1,
-    backgroundStrong: base.backgroundStrong + 1,
     borderColor: base.borderColor + 1,
     borderColorHover: base.borderColorHover + 1,
     borderColorFocus: base.borderColorFocus + 1,
-    borderColorPress: base.borderColorPress + 1,
-    outlineColor: base.outlineColor + 1
-  }, surface2 = {
+    borderColorPress: base.borderColorPress + 1
+  }, surface22 = {
     background: base.background + 2,
     backgroundHover: base.backgroundHover + 2,
     backgroundPress: base.backgroundPress + 2,
     backgroundFocus: base.backgroundFocus + 2,
-    backgroundStrong: base.backgroundStrong + 2,
     borderColor: base.borderColor + 2,
     borderColorHover: base.borderColorHover + 2,
     borderColorFocus: base.borderColorFocus + 2,
-    borderColorPress: base.borderColorPress + 2,
-    outlineColor: base.outlineColor + 2
-  }, surface3 = {
+    borderColorPress: base.borderColorPress + 2
+  }, surface32 = {
     background: base.background + 3,
     backgroundHover: base.backgroundHover + 3,
     backgroundPress: base.backgroundPress + 3,
     backgroundFocus: base.backgroundFocus + 3,
-    backgroundStrong: base.backgroundStrong + 3,
     borderColor: base.borderColor + 3,
     borderColorHover: base.borderColorHover + 3,
     borderColorFocus: base.borderColorFocus + 3,
-    borderColorPress: base.borderColorPress + 3,
-    outlineColor: base.outlineColor + 3
+    borderColorPress: base.borderColorPress + 3
+  }, surfaceActive = {
+    background: base.background + 5,
+    backgroundHover: base.background + 5,
+    backgroundPress: base.backgroundPress + 5,
+    backgroundFocus: base.backgroundFocus + 5,
+    borderColor: base.borderColor + 5,
+    borderColorHover: base.borderColor + 5,
+    borderColorFocus: base.borderColorFocus + 5,
+    borderColorPress: base.borderColorPress + 5
+  }, inverseSurface12 = {
+    color: surface12.background,
+    colorHover: surface12.backgroundHover,
+    colorPress: surface12.backgroundPress,
+    colorFocus: surface12.backgroundFocus,
+    background: base.color,
+    backgroundHover: base.colorHover,
+    backgroundPress: base.colorPress,
+    backgroundFocus: base.colorFocus,
+    borderColor: base.color - 2,
+    borderColorHover: base.color - 3,
+    borderColorFocus: base.color - 4,
+    borderColorPress: base.color - 5
+  }, inverseActive = {
+    ...inverseSurface12,
+    background: base.color - 2,
+    backgroundHover: base.colorHover - 2,
+    backgroundPress: base.colorPress - 2,
+    backgroundFocus: base.colorFocus - 2,
+    borderColor: base.color - 2 - 2,
+    borderColorHover: base.color - 3 - 2,
+    borderColorFocus: base.color - 4 - 2,
+    borderColorPress: base.color - 5 - 2
+  }, alt1 = {
+    color: base.color - 1,
+    colorHover: base.colorHover - 1,
+    colorPress: base.colorPress - 1,
+    colorFocus: base.colorFocus - 1
+  }, alt2 = {
+    color: base.color - 2,
+    colorHover: base.colorHover - 2,
+    colorPress: base.colorPress - 2,
+    colorFocus: base.colorFocus - 2
   };
   return {
     base,
-    surface1,
-    surface2,
-    surface3
+    alt1,
+    alt2,
+    surface1: surface12,
+    surface2: surface22,
+    surface3: surface32,
+    inverseSurface1: inverseSurface12,
+    inverseActive,
+    surfaceActive
   };
-})(), maskOptions = (() => {
-  const shadows2 = {
-    shadowColor: 0,
-    shadowColorHover: 0,
-    shadowColorPress: 0,
-    shadowColorFocus: 0
-  }, colors = {
-    ...shadows2,
-    color: 0,
-    colorHover: 0,
-    colorFocus: 0,
-    colorPress: 0
-  }, baseMaskOptions = {
-    override: shadows2,
-    skip: shadows2,
-    // avoids the transparent ends
-    max: palettes.light.length - 2,
-    min: 1
-  }, skipShadowsAndSpecificColors = {
-    ...shadows2,
-    ...templateColorsSpecific
-  };
-  return {
-    component: {
-      ...baseMaskOptions,
-      override: colors,
-      skip: skipShadowsAndSpecificColors
+})(), shadows = {
+  light: {
+    shadowColor: lightShadowColorStrong,
+    shadowColorHover: lightShadowColorStrong,
+    shadowColorPress: lightShadowColor,
+    shadowColorFocus: lightShadowColor
+  },
+  dark: {
+    shadowColor: darkShadowColorStrong,
+    shadowColorHover: darkShadowColorStrong,
+    shadowColorPress: darkShadowColor,
+    shadowColorFocus: darkShadowColor
+  }
+}, nonInherited = {
+  light: {
+    ...lightColors,
+    ...shadows.light
+  },
+  dark: {
+    ...darkColors,
+    ...shadows.dark
+  }
+}, overlayThemeDefinitions = [
+  {
+    parent: "light",
+    theme: {
+      background: "rgba(0,0,0,0.5)"
+    }
+  },
+  {
+    parent: "dark",
+    theme: {
+      background: "rgba(0,0,0,0.9)"
+    }
+  }
+], inverseSurface1 = [
+  {
+    parent: "active",
+    template: "inverseActive"
+  },
+  {
+    parent: "",
+    template: "inverseSurface1"
+  }
+], surface1 = [
+  {
+    parent: "active",
+    template: "surfaceActive"
+  },
+  {
+    parent: "",
+    template: "surface1"
+  }
+], surface2 = [
+  {
+    parent: "active",
+    template: "surfaceActive"
+  },
+  {
+    parent: "",
+    template: "surface2"
+  }
+], surface3 = [
+  {
+    parent: "active",
+    template: "surfaceActive"
+  },
+  {
+    parent: "",
+    template: "surface3"
+  }
+], themeBuilder = (0, import_theme_builder.createThemeBuilder)().addPalettes(palettes).addTemplates(templates).addThemes({
+  light: {
+    template: "base",
+    palette: "light",
+    nonInheritedValues: nonInherited.light
+  },
+  dark: {
+    template: "base",
+    palette: "dark",
+    nonInheritedValues: nonInherited.dark
+  }
+}).addChildThemes({
+  orange: {
+    palette: "orange",
+    template: "base"
+  },
+  yellow: {
+    palette: "yellow",
+    template: "base"
+  },
+  green: {
+    palette: "green",
+    template: "base"
+  },
+  blue: {
+    palette: "blue",
+    template: "base"
+  },
+  purple: {
+    palette: "purple",
+    template: "base"
+  },
+  pink: {
+    palette: "pink",
+    template: "base"
+  },
+  red: {
+    palette: "red",
+    template: "base"
+  },
+  gray: {
+    palette: "gray",
+    template: "base"
+  }
+}).addChildThemes({
+  alt1: {
+    template: "alt1"
+  },
+  alt2: {
+    template: "alt2"
+  },
+  active: {
+    template: "surface3"
+  }
+}).addChildThemes(
+  {
+    ListItem: {
+      template: "surface1"
     },
-    alt: {
-      ...baseMaskOptions
+    SelectTrigger: surface1,
+    Card: surface1,
+    Button: surface3,
+    Checkbox: surface2,
+    Switch: surface2,
+    SwitchThumb: inverseSurface1,
+    TooltipContent: surface2,
+    Progress: {
+      template: "surface1"
     },
-    button: {
-      ...baseMaskOptions,
-      override: {
-        ...colors,
-        borderColor: "transparent",
-        borderColorHover: "transparent"
-      },
-      skip: skipShadowsAndSpecificColors
-    }
-  };
-})(), 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)", size = {
+    RadioGroupItem: surface2,
+    TooltipArrow: {
+      template: "surface1"
+    },
+    SliderTrackActive: {
+      template: "surface3"
+    },
+    SliderTrack: {
+      template: "surface1"
+    },
+    SliderThumb: inverseSurface1,
+    Tooltip: inverseSurface1,
+    ProgressIndicator: inverseSurface1,
+    SheetOverlay: overlayThemeDefinitions,
+    DialogOverlay: overlayThemeDefinitions,
+    ModalOverlay: overlayThemeDefinitions,
+    Input: surface1,
+    TextArea: surface1
+  },
+  {
+    avoidNestingWithin: ["alt1", "alt2"]
+  }
+), themesIn = themeBuilder.build(), themes = themesIn, size = {
   $0: 0,
   "$0.25": 2,
   "$0.5": 4,
@@ -263,27 +502,6 @@ const colorTokens = {
   3: 300,
   4: 400,
   5: 500
-}, 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")
 }, radius = {
   0: 0,
   1: 3,
@@ -305,137 +523,7 @@ const colorTokens = {
   zIndex,
   space,
   size
-}), shadows = {
-  light: {
-    shadowColor: lightShadowColorStrong,
-    shadowColorHover: lightShadowColorStrong,
-    shadowColorPress: lightShadowColor,
-    shadowColorFocus: lightShadowColor
-  },
-  dark: {
-    shadowColor: darkShadowColorStrong,
-    shadowColorHover: darkShadowColorStrong,
-    shadowColorPress: darkShadowColor,
-    shadowColorFocus: darkShadowColor
-  }
-}, colorThemeDefinition = (colorName) => ({
-  palette: colorName,
-  template: "base"
-}), nonInherited = {
-  light: {
-    ...lightColors,
-    ...shadows.light
-  },
-  dark: {
-    ...darkColors,
-    ...shadows.dark
-  }
-}, overlayThemeDefinitions = [
-  {
-    parent: "light",
-    theme: {
-      background: "rgba(0,0,0,0.5)"
-    }
-  },
-  {
-    parent: "dark",
-    theme: {
-      background: "rgba(0,0,0,0.9)"
-    }
-  }
-], themeBuilder = (0, import_theme_builder.createThemeBuilder)().addPalettes(palettes).addTemplates(templates).addMasks(import_masks.masks).addThemes({
-  light: {
-    template: "base",
-    palette: "light",
-    nonInheritedValues: nonInherited.light
-  },
-  dark: {
-    template: "base",
-    palette: "dark",
-    nonInheritedValues: nonInherited.dark
-  }
-}).addChildThemes({
-  orange: colorThemeDefinition("orange"),
-  yellow: colorThemeDefinition("yellow"),
-  green: colorThemeDefinition("green"),
-  blue: colorThemeDefinition("blue"),
-  purple: colorThemeDefinition("purple"),
-  pink: colorThemeDefinition("pink"),
-  red: colorThemeDefinition("red"),
-  gray: colorThemeDefinition("gray")
-}).addChildThemes({
-  alt1: {
-    template: "surface1"
-  },
-  alt2: {
-    template: "surface2"
-  },
-  active: {
-    template: "surface3"
-  }
-}).addChildThemes({
-  ListItem: {
-    template: "surface1"
-  },
-  Card: {
-    template: "surface1"
-  },
-  Button: {
-    template: "surface2"
-  },
-  Checkbox: {
-    template: "surface2"
-  },
-  Switch: {
-    template: "surface2"
-  },
-  SwitchThumb: {
-    mask: "inverse",
-    ...maskOptions.component
-  },
-  TooltipContent: {
-    template: "surface2"
-  },
-  DrawerFrame: {
-    template: "surface1"
-  },
-  Progress: {
-    template: "surface1"
-  },
-  RadioGroupItem: {
-    template: "surface2"
-  },
-  TooltipArrow: {
-    template: "surface1"
-  },
-  SliderTrackActive: {
-    template: "surface3"
-  },
-  SliderTrack: {
-    template: "surface1"
-  },
-  SliderThumb: {
-    mask: "inverse",
-    ...maskOptions.component
-  },
-  Tooltip: {
-    mask: "inverse",
-    ...maskOptions.component
-  },
-  ProgressIndicator: {
-    mask: "inverse",
-    ...maskOptions.component
-  },
-  SheetOverlay: overlayThemeDefinitions,
-  DialogOverlay: overlayThemeDefinitions,
-  ModalOverlay: overlayThemeDefinitions,
-  Input: {
-    template: "surface2"
-  },
-  TextArea: {
-    template: "surface2"
-  }
-}), themesIn = themeBuilder.build(), themes = themesIn;
+});
 function postfixObjKeys(obj, postfix) {
   return Object.fromEntries(
     Object.entries(obj).map(([k, v]) => [`${k}${postfix}`, v])