@tamagui/themes 1.89.0-1706483140977 → 1.89.0

package/dist/esm/v3-themes.mjs

@@ -1,8 +1,6 @@
-import { createThemeBuilder } from "@tamagui/theme-builder";
 import { blue, blueDark, gray, grayDark, green, greenDark, orange, orangeDark, pink, pinkDark, purple, purpleDark, red, redDark, yellow, yellowDark } from "@tamagui/colors";
+import { createThemeBuilder } from "@tamagui/theme-builder";
 import { createTokens } from "@tamagui/web";
-import { masks } from "./masks.mjs";
-import { masks as masks2 } from "./masks.mjs";
 const colorTokens = {
     light: {
       blue,
@@ -25,21 +23,77 @@ const colorTokens = {
       yellow: 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 transparent = (hsl, opacity = 0) => hsl.replace("%)", `%, ${opacity})`).replace("hsl(", "hsla("),
+      getColorPalette = colors => {
         const colorPalette = Object.values(colors),
-          [head, tail] = [colorPalette.slice(0, 6), colorPalette.slice(colorPalette.length - 5)];
-        return [transparent(colorPalette[0]), ...head, ...tail, color2, transparent(colorPalette[colorPalette.length - 1])];
+          colorI = colorPalette.length - 4;
+        return [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],
-      lightPalettes = objectFromEntries(objectKeys(colorTokens.light).map(key => [`light_${key}`, getColorPalette(colorTokens.light[key], lightColor)])),
-      darkPalettes = objectFromEntries(objectKeys(colorTokens.dark).map(key => [`dark_${key}`, getColorPalette(colorTokens.dark[key], darkColor)])),
+      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])])),
+      darkPalettes = objectFromEntries(objectKeys(colorTokens.dark).map(key => [`dark_${key}`, getColorPalette(colorTokens.dark[key])])),
       colorPalettes = {
         ...lightPalettes,
         ...darkPalettes
@@ -50,230 +104,137 @@ const colorTokens = {
       ...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 = (() => {
     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
+        placeholderColor: -7,
+        outlineColor: -1
       },
-      surface1 = {
+      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
+        borderColorPress: base.borderColorPress + 1
       },
-      surface2 = {
+      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
+        borderColorPress: base.borderColorPress + 2
       },
-      surface3 = {
+      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
-      };
-    return {
-      base,
-      surface1,
-      surface2,
-      surface3
-    };
-  })(),
-  maskOptions = (() => {
-    const shadows2 = {
-        shadowColor: 0,
-        shadowColorHover: 0,
-        shadowColorPress: 0,
-        shadowColorFocus: 0
+        borderColorPress: base.borderColorPress + 3
       },
-      colors = {
-        ...shadows2,
-        color: 0,
-        colorHover: 0,
-        colorFocus: 0,
-        colorPress: 0
+      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
       },
-      baseMaskOptions = {
-        override: shadows2,
-        skip: shadows2,
-        // avoids the transparent ends
-        max: palettes.light.length - 2,
-        min: 1
+      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
       },
-      skipShadowsAndSpecificColors = {
-        ...shadows2,
-        ...templateColorsSpecific
-      };
-    return {
-      component: {
-        ...baseMaskOptions,
-        override: colors,
-        skip: skipShadowsAndSpecificColors
+      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
       },
-      alt: {
-        ...baseMaskOptions
+      alt1 = {
+        color: base.color - 1,
+        colorHover: base.colorHover - 1,
+        colorPress: base.colorPress - 1,
+        colorFocus: base.colorFocus - 1
       },
-      button: {
-        ...baseMaskOptions,
-        override: {
-          ...colors,
-          borderColor: "transparent",
-          borderColorHover: "transparent"
-        },
-        skip: skipShadowsAndSpecificColors
-      }
+      alt2 = {
+        color: base.color - 2,
+        colorHover: base.colorHover - 2,
+        colorPress: base.colorPress - 2,
+        colorFocus: base.colorFocus - 2
+      };
+    return {
+      base,
+      alt1,
+      alt2,
+      surface1: surface12,
+      surface2: surface22,
+      surface3: surface32,
+      inverseSurface1: inverseSurface12,
+      inverseActive,
+      surfaceActive
     };
   })(),
-  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 = {
-    $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)]),
-  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
-  },
-  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,
-    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 = createTokens({
-    color,
-    radius,
-    zIndex,
-    space,
-    size
-  }),
   shadows = {
     light: {
       shadowColor: lightShadowColorStrong,
@@ -288,10 +249,6 @@ const colorTokens = {
       shadowColorFocus: darkShadowColor
     }
   },
-  colorThemeDefinition = colorName => ({
-    palette: colorName,
-    template: "base"
-  }),
   nonInherited = {
     light: {
       ...lightColors,
@@ -313,7 +270,35 @@ const colorTokens = {
       background: "rgba(0,0,0,0.9)"
     }
   }],
-  themeBuilder = createThemeBuilder().addPalettes(palettes).addTemplates(templates).addMasks(masks).addThemes({
+  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 = createThemeBuilder().addPalettes(palettes).addTemplates(templates).addThemes({
     light: {
       template: "base",
       palette: "light",
@@ -325,20 +310,44 @@ const colorTokens = {
       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")
+    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: "surface1"
+      template: "alt1"
     },
     alt2: {
-      template: "surface2"
+      template: "alt2"
     },
     active: {
       template: "surface3"
@@ -347,34 +356,19 @@ const colorTokens = {
     ListItem: {
       template: "surface1"
     },
-    Card: {
-      template: "surface1"
-    },
-    Button: {
-      template: "surface2"
-    },
-    Checkbox: {
-      template: "surface2"
-    },
-    Switch: {
-      template: "surface2"
-    },
-    SwitchThumb: {
-      mask: "inverse",
-      ...maskOptions.component
-    },
-    TooltipContent: {
-      template: "surface2"
-    },
+    Card: surface1,
+    Button: surface3,
+    Checkbox: surface2,
+    Switch: surface2,
+    SwitchThumb: inverseSurface1,
+    TooltipContent: surface2,
     DrawerFrame: {
       template: "surface1"
     },
     Progress: {
       template: "surface1"
     },
-    RadioGroupItem: {
-      template: "surface2"
-    },
+    RadioGroupItem: surface2,
     TooltipArrow: {
       template: "surface1"
     },
@@ -384,30 +378,87 @@ const colorTokens = {
     SliderTrack: {
       template: "surface1"
     },
-    SliderThumb: {
-      mask: "inverse",
-      ...maskOptions.component
-    },
-    Tooltip: {
-      mask: "inverse",
-      ...maskOptions.component
-    },
-    ProgressIndicator: {
-      mask: "inverse",
-      ...maskOptions.component
-    },
+    SliderThumb: inverseSurface1,
+    Tooltip: inverseSurface1,
+    ProgressIndicator: inverseSurface1,
     SheetOverlay: overlayThemeDefinitions,
     DialogOverlay: overlayThemeDefinitions,
     ModalOverlay: overlayThemeDefinitions,
-    Input: {
-      template: "surface2"
-    },
-    TextArea: {
-      template: "surface2"
-    }
+    Input: surface1,
+    TextArea: surface1
+  }, {
+    avoidNestingWithin: ["alt1", "alt2"]
   }),
   themesIn = themeBuilder.build(),
-  themes = themesIn;
+  themes = themesIn,
+  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)]),
+  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
+  },
+  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 = createTokens({
+    color,
+    radius,
+    zIndex,
+    space,
+    size
+  });
 function postfixObjKeys(obj, postfix) {
   return Object.fromEntries(Object.entries(obj).map(([k, v]) => [`${k}${postfix}`, v]));
 }
@@ -420,4 +471,4 @@ function objectFromEntries(arr) {
 function objectKeys(obj) {
   return Object.keys(obj);
 }
-export { maskOptions, masks2 as masks, palettes, templates, themes, tokens };
+export { palettes, templates, themes, tokens };