@tamagui/themes 2.0.0-1768586279389 → 2.0.0-1768636514428

package/dist/cjs/v5-themes.cjs

@@ -21,80 +21,23 @@ var __toCommonJS = mod => __copyProps(__defProp({}, "__esModule", {
 var v5_themes_exports = {};
 __export(v5_themes_exports, {
   createV5Theme: () => createV5Theme,
-  darkPalette: () => darkPalette,
-  defaultColors: () => defaultColors,
-  lightPalette: () => lightPalette,
+  defaultChildrenThemes: () => defaultChildrenThemes,
+  defaultDarkPalette: () => darkPalette,
+  defaultGrandChildrenThemes: () => defaultGrandChildrenThemes,
+  defaultLightPalette: () => lightPalette,
   themes: () => themes
 });
 module.exports = __toCommonJS(v5_themes_exports);
 var import_colors = require("@tamagui/colors"),
   import_theme_builder = require("@tamagui/theme-builder"),
   import_opacify = require("./opacify.cjs");
-const blue = import_colors.blue,
-  blueDark = import_colors.blueDark,
-  green = import_colors.green,
-  greenDark = import_colors.greenDark,
-  purple = import_colors.purple,
-  purpleDark = import_colors.purpleDark,
-  red = import_colors.red,
-  redDark = import_colors.redDark,
-  yellow = import_colors.yellow,
-  yellowDark = import_colors.yellowDark,
-  pink = import_colors.pink,
-  pinkDark = import_colors.pinkDark,
-  orange = import_colors.orange,
-  orangeDark = import_colors.orangeDark,
-  teal = import_colors.teal,
-  tealDark = import_colors.tealDark,
-  gray = import_colors.gray,
-  grayDark = import_colors.grayDark,
-  darkPalette = ["#050505", "#151515", "#191919", "#232323", "#282828", "#323232", "#424242", "#494949", "#545454", "#626262", "#a5a5a5", "#fff"],
+function paletteToNamedColors(name, palette) {
+  return Object.fromEntries(palette.map((color, i) => [`${name}${i + 1}`, color]));
+}
+const darkPalette = ["#050505", "#151515", "#191919", "#232323", "#282828", "#323232", "#424242", "#494949", "#545454", "#626262", "#a5a5a5", "#fff"],
   lightPalette = ["#fff", "#f8f8f8", "hsl(0, 0%, 93%)", "hsl(0, 0%, 87%)", "hsl(0, 0%, 80%)", "hsl(0, 0%, 74%)", "hsl(0, 0%, 68%)", "hsl(0, 0%, 60%)", "hsl(0, 0%, 48%)", "hsl(0, 0%, 38%)", "hsl(0, 0%, 20%)", "hsl(0, 0%, 2%)"],
   neutralPalette = ["hsl(0, 0%, 68%)", "hsl(0, 0%, 65%)", "hsl(0, 0%, 62%)", "hsl(0, 0%, 59%)", "hsl(0, 0%, 56%)", "hsl(0, 0%, 53%)", "hsl(0, 0%, 50%)", "hsl(0, 0%, 47%)", "hsl(0, 0%, 44%)", "hsl(0, 0%, 41%)", "hsl(0, 0%, 38%)", "hsl(0, 0%, 32%)"],
-  neutral = {
-    neutral1: neutralPalette[0],
-    neutral2: neutralPalette[1],
-    neutral3: neutralPalette[2],
-    neutral4: neutralPalette[3],
-    neutral5: neutralPalette[4],
-    neutral6: neutralPalette[5],
-    neutral7: neutralPalette[6],
-    neutral8: neutralPalette[7],
-    neutral9: neutralPalette[8],
-    neutral10: neutralPalette[9],
-    neutral11: neutralPalette[10],
-    neutral12: neutralPalette[11]
-  },
-  tanLightPalette = ["hsla(40, 30%, 98%, 1)", "hsla(40, 24%, 94%, 1)", "hsla(38, 23%, 91%, 1)", "hsla(36, 20%, 90%, 1)", "hsla(36, 20%, 88%, 1)", "hsla(35, 20%, 85%, 1)", "hsla(35, 21%, 74%, 1)", "hsla(34, 20%, 70%, 1)", "hsla(35, 20%, 67%, 1)", "hsla(34, 19%, 47%, 1)", "hsla(35, 18%, 37%, 1)", "hsla(35, 17%, 20%, 1)"],
-  tanDarkPalette = ["hsla(30, 9%, 10%, 1)", "hsla(30, 10%, 12%, 1)", "hsla(31, 11%, 18%, 1)", "hsla(30, 12%, 23%, 1)", "hsla(30, 14%, 28%, 1)", "hsla(30, 16%, 33%, 1)", "hsla(30, 18%, 38%, 1)", "hsla(30, 20%, 45%, 1)", "hsla(30, 21%, 50%, 1)", "hsla(29, 22%, 58%, 1)", "hsla(34, 24%, 70%, 1)", "hsla(11, 12%, 79%, 1)"],
-  tan = {
-    tan1: tanLightPalette[0],
-    tan2: tanLightPalette[1],
-    tan3: tanLightPalette[2],
-    tan4: tanLightPalette[3],
-    tan5: tanLightPalette[4],
-    tan6: tanLightPalette[5],
-    tan7: tanLightPalette[6],
-    tan8: tanLightPalette[7],
-    tan9: tanLightPalette[8],
-    tan10: tanLightPalette[9],
-    tan11: tanLightPalette[10],
-    tan12: tanLightPalette[11]
-  },
-  tanDark = {
-    tan1: tanDarkPalette[0],
-    tan2: tanDarkPalette[1],
-    tan3: tanDarkPalette[2],
-    tan4: tanDarkPalette[3],
-    tan5: tanDarkPalette[4],
-    tan6: tanDarkPalette[5],
-    tan7: tanDarkPalette[6],
-    tan8: tanDarkPalette[7],
-    tan9: tanDarkPalette[8],
-    tan10: tanDarkPalette[9],
-    tan11: tanDarkPalette[10],
-    tan12: tanDarkPalette[11]
-  },
+  neutral = paletteToNamedColors("neutral", neutralPalette),
   whiteBlack = {
     white: "rgba(255,255,255,1)",
     white0: "rgba(255,255,255,0)",
@@ -109,35 +52,6 @@ const blue = import_colors.blue,
     black06: "rgba(0,0,0,0.6)",
     black08: "rgba(0,0,0,0.8)"
   },
-  extraColorsDark = {
-    // in between 1/2
-    color1pt5: "rgba(20,20,20)",
-    color2pt5: "#222",
-    // TODO: ideally just functions for alpha($color1, 0.1)
-    // extra low opacities
-    color01: (0, import_opacify.opacify)(darkPalette[darkPalette.length - 1], 0.1),
-    color0075: (0, import_opacify.opacify)(darkPalette[darkPalette.length - 1], 0.075),
-    color005: (0, import_opacify.opacify)(darkPalette[darkPalette.length - 1], 0.05),
-    color0025: (0, import_opacify.opacify)(darkPalette[darkPalette.length - 1], 0.025),
-    background01: (0, import_opacify.opacify)(darkPalette[0], 0.1),
-    background0075: (0, import_opacify.opacify)(darkPalette[0], 0.075),
-    background005: (0, import_opacify.opacify)(darkPalette[0], 0.05),
-    background0025: (0, import_opacify.opacify)(darkPalette[0], 0.025)
-  },
-  extraColorsLight = {
-    // in between 1/2
-    color1pt5: "#f9f9f9",
-    color2pt5: "#f4f4f4",
-    // extra low opacities
-    color01: (0, import_opacify.opacify)(lightPalette[lightPalette.length - 1], 0.1),
-    color0075: (0, import_opacify.opacify)(lightPalette[lightPalette.length - 1], 0.075),
-    color005: (0, import_opacify.opacify)(lightPalette[lightPalette.length - 1], 0.05),
-    color0025: (0, import_opacify.opacify)(lightPalette[lightPalette.length - 1], 0.025),
-    background01: (0, import_opacify.opacify)(lightPalette[0], 0.1),
-    background0075: (0, import_opacify.opacify)(lightPalette[0], 0.075),
-    background005: (0, import_opacify.opacify)(lightPalette[0], 0.05),
-    background0025: (0, import_opacify.opacify)(lightPalette[0], 0.025)
-  },
   darkShadows = {
     shadow1: "rgba(0,0,0,0.1)",
     shadow2: "rgba(0,0,0,0.18)",
@@ -153,207 +67,108 @@ const blue = import_colors.blue,
     shadow4: "rgba(0,0,0,0.095)",
     shadow5: "rgba(0,0,0,0.195)",
     shadow6: "rgba(0,0,0,0.3)"
-  },
-  blackColors = {
-    black1: darkPalette[0],
-    black2: darkPalette[1],
-    black3: darkPalette[2],
-    black4: darkPalette[3],
-    black5: darkPalette[4],
-    black6: darkPalette[5],
-    black7: darkPalette[6],
-    black8: darkPalette[7],
-    black9: darkPalette[8],
-    black10: darkPalette[9],
-    black11: darkPalette[10],
-    black12: darkPalette[11]
-  },
-  whiteColors = {
-    white1: lightPalette[0],
-    white2: lightPalette[1],
-    white3: lightPalette[2],
-    white4: lightPalette[3],
-    white5: lightPalette[4],
-    white6: lightPalette[5],
-    white7: lightPalette[6],
-    white8: lightPalette[7],
-    white9: lightPalette[8],
-    white10: lightPalette[9],
-    white11: lightPalette[10],
-    white12: lightPalette[11]
   };
-const defaultColors = {
-  light: {
-    blue,
-    gray,
-    green,
-    neutral,
-    orange,
-    pink,
-    purple,
-    red,
-    tan,
-    teal,
-    yellow
-  },
-  dark: {
-    blue: blueDark,
-    gray: grayDark,
-    green: greenDark,
-    neutral,
-    // same for both light and dark - that's the point!
-    orange: orangeDark,
-    pink: pinkDark,
-    purple: purpleDark,
-    red: redDark,
-    tan: tanDark,
-    teal: tealDark,
-    yellow: yellowDark
-  }
-};
-function createV5Theme(options = {}) {
-  const {
-      darkPalette: customDarkPalette = darkPalette,
-      lightPalette: customLightPalette = lightPalette,
-      colors = {},
-      includeDefaultColors = !0,
-      grandChildrenThemes: customGrandChildrenThemes = {}
-    } = options,
-    childrenThemes = {
-      black: {
-        palette: {
-          dark: Object.values(blackColors),
-          light: Object.values(blackColors)
-        }
-      },
-      white: {
-        palette: {
-          dark: Object.values(whiteColors),
-          light: Object.values(whiteColors)
-        }
-      }
-    };
-  includeDefaultColors && Object.assign(childrenThemes, {
+const defaultChildrenThemes = {
     gray: {
-      palette: {
-        dark: Object.values(grayDark),
-        light: Object.values(gray)
-      }
+      light: import_colors.gray,
+      dark: import_colors.grayDark
     },
     blue: {
-      palette: {
-        dark: Object.values(blueDark),
-        light: Object.values(blue)
-      }
+      light: import_colors.blue,
+      dark: import_colors.blueDark
     },
     red: {
-      palette: {
-        dark: Object.values(redDark),
-        light: Object.values(red)
-      }
+      light: import_colors.red,
+      dark: import_colors.redDark
     },
     yellow: {
-      palette: {
-        dark: Object.values(yellowDark),
-        light: Object.values(yellow)
-      }
+      light: import_colors.yellow,
+      dark: import_colors.yellowDark
     },
     green: {
-      palette: {
-        dark: Object.values(greenDark),
-        light: Object.values(green)
-      }
+      light: import_colors.green,
+      dark: import_colors.greenDark
     },
-    teal: {
-      palette: {
-        dark: Object.values(tealDark),
-        light: Object.values(teal)
-      }
+    neutral: {
+      light: neutral,
+      dark: neutral
+    }
+  },
+  defaultGrandChildrenThemes = {
+    accent: {
+      template: "inverse"
+    }
+    // simplified and removed:
+    // alt1: { template: 'alt1' },
+    // alt2: { template: 'alt2' },
+    // surface1: { template: 'surface1' },
+    // surface2: { template: 'surface2' },
+    // surface3: { template: 'surface3' },
+  };
+function createV5Theme(options = {}) {
+  const {
+      darkPalette: customDarkPalette = darkPalette,
+      lightPalette: customLightPalette = lightPalette,
+      childrenThemes = defaultChildrenThemes,
+      grandChildrenThemes = defaultGrandChildrenThemes,
+      componentThemes: customComponentThemes = import_theme_builder.defaultComponentThemes
+    } = options,
+    blackColors = paletteToNamedColors("black", customDarkPalette),
+    whiteColors = paletteToNamedColors("white", customLightPalette),
+    extraBase = {
+      ...blackColors,
+      ...whiteColors,
+      ...whiteBlack
     },
-    orange: {
-      palette: {
-        dark: Object.values(orangeDark),
-        light: Object.values(orange)
-      }
+    lightExtraBase = {
+      ...extraBase,
+      ...lightShadows,
+      shadowColor: lightShadows.shadow1
     },
-    pink: {
-      palette: {
-        dark: Object.values(pinkDark),
-        light: Object.values(pink)
-      }
+    darkExtraBase = {
+      ...extraBase,
+      ...darkShadows,
+      shadowColor: darkShadows.shadow1
     },
-    purple: {
+    lightExtra = {
+      ...lightExtraBase
+    },
+    darkExtra = {
+      ...darkExtraBase
+    };
+  for (const theme of Object.values(childrenThemes)) theme.light && Object.assign(lightExtra, theme.light), theme.dark && Object.assign(darkExtra, theme.dark);
+  const childrenWithPalettes = {
+    // Always include black/white for theme generation
+    black: {
       palette: {
-        dark: Object.values(purpleDark),
-        light: Object.values(purple)
+        dark: Object.values(blackColors),
+        light: Object.values(blackColors)
       }
     },
-    neutral: {
+    white: {
       palette: {
-        dark: neutralPalette,
-        light: neutralPalette
+        dark: Object.values(whiteColors),
+        light: Object.values(whiteColors)
       }
     },
-    tan: {
+    ...Object.fromEntries(Object.entries(childrenThemes).map(([name, theme]) => [name, {
       palette: {
-        dark: tanDarkPalette,
-        light: tanLightPalette
+        light: Object.values(theme.light),
+        dark: Object.values(theme.dark)
       }
-    }
-  });
-  for (const [name, palette] of Object.entries(colors)) childrenThemes[name] = {
-    palette: {
-      dark: palette.dark,
-      light: palette.light
-    }
+    }]))
   };
   return (0, import_theme_builder.createThemes)({
-    componentThemes: import_theme_builder.defaultComponentThemes,
+    // componentThemes: false disables them, undefined/truthy values enable them
+    componentThemes: customComponentThemes,
     base: {
       palette: {
         dark: customDarkPalette,
         light: customLightPalette
       },
       extra: {
-        light: {
-          ...blackColors,
-          ...blue,
-          ...gray,
-          ...green,
-          ...lightShadows,
-          ...neutral,
-          ...orange,
-          ...pink,
-          ...purple,
-          ...red,
-          ...tan,
-          ...teal,
-          ...whiteColors,
-          ...yellow,
-          shadowColor: lightShadows.shadow1,
-          ...whiteBlack,
-          ...extraColorsLight
-        },
-        dark: {
-          ...blackColors,
-          ...blueDark,
-          ...darkShadows,
-          ...grayDark,
-          ...greenDark,
-          ...neutral,
-          // same for both light and dark
-          ...orangeDark,
-          ...pinkDark,
-          ...purpleDark,
-          ...redDark,
-          ...tanDark,
-          ...tealDark,
-          ...whiteColors,
-          ...yellowDark,
-          shadowColor: darkShadows.shadow1,
-          ...whiteBlack,
-          ...extraColorsDark
-        }
+        light: lightExtra,
+        dark: darkExtra
       }
     },
     accent: {
@@ -362,28 +177,39 @@ function createV5Theme(options = {}) {
         light: customDarkPalette
       }
     },
-    childrenThemes,
-    grandChildrenThemes: {
-      accent: {
-        template: "inverse"
-      },
-      alt1: {
-        template: "alt1"
-      },
-      alt2: {
-        template: "alt2"
-      },
-      surface1: {
-        template: "surface1"
-      },
-      surface2: {
-        template: "surface2"
-      },
-      surface3: {
-        template: "surface3"
-      },
-      ...customGrandChildrenThemes
+    childrenThemes: childrenWithPalettes,
+    grandChildrenThemes,
+    // Add computed colors to ALL themes based on each theme's palette
+    getTheme: ({
+      palette
+    }) => {
+      if (!palette || palette.length < 3) throw new Error(`invalid palette: ${JSON.stringify(palette)}`);
+      const bgColor = palette[1],
+        fgColor = palette[palette.length - 2];
+      return {
+        // In-between shades
+        color0pt5: (0, import_opacify.interpolateColor)(bgColor, palette[2], 0.5),
+        color1pt5: (0, import_opacify.interpolateColor)(palette[1], palette[2], 0.5),
+        color2pt5: (0, import_opacify.interpolateColor)(palette[2], palette[3], 0.5),
+        // Opacity variants of foreground color
+        color01: (0, import_opacify.opacify)(fgColor, 0.1),
+        color0075: (0, import_opacify.opacify)(fgColor, 0.075),
+        color005: (0, import_opacify.opacify)(fgColor, 0.05),
+        color0025: (0, import_opacify.opacify)(fgColor, 0.025),
+        color002: (0, import_opacify.opacify)(fgColor, 0.02),
+        color001: (0, import_opacify.opacify)(fgColor, 0.01),
+        // Opacity variants of background color
+        background01: (0, import_opacify.opacify)(bgColor, 0.1),
+        background0075: (0, import_opacify.opacify)(bgColor, 0.075),
+        background005: (0, import_opacify.opacify)(bgColor, 0.05),
+        background0025: (0, import_opacify.opacify)(bgColor, 0.025),
+        background002: (0, import_opacify.opacify)(bgColor, 0.02),
+        background001: (0, import_opacify.opacify)(bgColor, 0.01)
+      };
     }
   });
 }
-const themes = createV5Theme();
+const themes = createV5Theme();
+themes.dark.background0075;
+themes.dark.background;
+themes.dark.accent1;