@tamagui/themes 2.0.0-rc.8 → 2.0.0

package/dist/cjs/v5-themes.cjs

@@ -3,20 +3,22 @@ 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 v5_themes_exports = {};
 __export(v5_themes_exports, {
@@ -39,70 +41,70 @@ __export(v5_themes_exports, {
   v5GrandchildrenThemes: () => v5GrandchildrenThemes
 });
 module.exports = __toCommonJS(v5_themes_exports);
-var import_colors = require("@tamagui/colors"),
-  import_theme_builder = require("@tamagui/theme-builder"),
-  import_opacify = require("./opacify.cjs"),
-  import_v5_templates = require("./v5-templates.cjs"),
-  import_opacify2 = require("./opacify.cjs");
-const V5_BG_OFFSET = 7,
-  v5ComponentThemes = {
-    Button: {
-      template: "surface2"
-    },
-    Input: {
-      template: "surface1"
-    },
-    Progress: {
-      template: "surface1"
-    },
-    ProgressIndicator: {
-      template: "surface3"
-    },
-    Slider: {
-      template: "surface1"
-    },
-    SliderActive: {
-      template: "surface3"
-    },
-    SliderThumb: {
-      template: "surface2"
-    },
-    Switch: {
-      template: "surface2"
-    },
-    TextArea: {
-      template: "surface1"
-    },
-    Tooltip: {
-      template: "accent"
-    },
-    SwitchThumb: {
-      template: "accent"
-    }
+var import_colors = require("@tamagui/colors");
+var import_theme_builder = require("@tamagui/theme-builder");
+var import_opacify = require("./opacify.cjs");
+var import_v5_templates = require("./v5-templates.cjs");
+var import_opacify2 = require("./opacify.cjs");
+const V5_BG_OFFSET = 6 + 1;
+const v5ComponentThemes = {
+  Button: {
+    template: "surface2"
   },
-  v5ComponentThemesWithInverses = {
-    ...v5ComponentThemes,
-    ProgressIndicator: {
-      template: "accent"
-    },
-    SliderThumb: {
-      template: "accent"
-    },
-    Tooltip: {
-      template: "accent"
-    }
+  Input: {
+    template: "surface1"
   },
-  v5GrandchildrenThemes = {
-    accent: {
-      template: "accent"
-    },
-    surface1: {
-      template: "surface1"
-    },
-    surface2: {
-      template: "surface2"
-    }
-  };
+  Progress: {
+    template: "surface1"
+  },
+  ProgressIndicator: {
+    template: "surface3"
+  },
+  Slider: {
+    template: "surface1"
+  },
+  SliderActive: {
+    template: "surface3"
+  },
+  SliderThumb: {
+    template: "surface2"
+  },
+  Switch: {
+    template: "surface2"
+  },
+  TextArea: {
+    template: "surface1"
+  },
+  Tooltip: {
+    template: "accent"
+  },
+  SwitchThumb: {
+    template: "accent"
+  }
+};
+const v5ComponentThemesWithInverses = {
+  ...v5ComponentThemes,
+  ProgressIndicator: {
+    template: "accent"
+  },
+  SliderThumb: {
+    template: "accent"
+  },
+  Tooltip: {
+    template: "accent"
+  }
+};
+const v5GrandchildrenThemes = {
+  accent: {
+    template: "accent"
+  },
+  surface1: {
+    template: "surface1"
+  },
+  surface2: {
+    template: "surface2"
+  }
+};
 function parseHSL(str) {
   const m = str.match(/hsl\((\d+(?:\.\d+)?),\s*(\d+(?:\.\d+)?)%,\s*(\d+(?:\.\d+)?)%\)/);
   return m ? {
@@ -114,22 +116,28 @@ function parseHSL(str) {
 function parseHex(str) {
   if (!str.startsWith("#")) return null;
   let hex = str.slice(1);
-  if (hex.length === 3 && (hex = hex.split("").map(c => c + c).join("")), hex.length !== 6) return null;
-  const r = Number.parseInt(hex.slice(0, 2), 16) / 255,
-    g = Number.parseInt(hex.slice(2, 4), 16) / 255,
-    b = Number.parseInt(hex.slice(4, 6), 16) / 255,
-    max = Math.max(r, g, b),
-    min = Math.min(r, g, b),
-    l = (max + min) / 2;
-  if (max === min) return {
-    h: 0,
-    s: 0,
-    l: l * 100
-  };
-  const d = max - min,
-    s = l > 0.5 ? d / (2 - max - min) : d / (max + min);
+  if (hex.length === 3) {
+    hex = hex.split("").map(c => c + c).join("");
+  }
+  if (hex.length !== 6) return null;
+  const r = Number.parseInt(hex.slice(0, 2), 16) / 255;
+  const g = Number.parseInt(hex.slice(2, 4), 16) / 255;
+  const b = Number.parseInt(hex.slice(4, 6), 16) / 255;
+  const max = Math.max(r, g, b);
+  const min = Math.min(r, g, b);
+  const l = (max + min) / 2;
+  if (max === min) {
+    return {
+      h: 0,
+      s: 0,
+      l: l * 100
+    };
+  }
+  const d = max - min;
+  const s = l > 0.5 ? d / (2 - max - min) : d / (max + min);
   let h = 0;
-  return max === r ? h = ((g - b) / d + (g < b ? 6 : 0)) / 6 : max === g ? h = ((b - r) / d + 2) / 6 : h = ((r - g) / d + 4) / 6, {
+  if (max === r) h = ((g - b) / d + (g < b ? 6 : 0)) / 6;else if (max === g) h = ((b - r) / d + 2) / 6;else h = ((r - g) / d + 4) / 6;
+  return {
     h: Math.round(h * 360),
     s: s * 100,
     l: l * 100
@@ -142,11 +150,11 @@ function hslToString(hsl) {
   return `hsl(${hsl.h}, ${Math.round(Math.min(100, Math.max(0, hsl.s)))}%, ${Math.round(Math.min(100, Math.max(0, hsl.l)))}%)`;
 }
 function adjustPalette(palette, fn) {
-  const out = {},
-    keys = Object.keys(palette);
+  const out = {};
+  const keys = Object.keys(palette);
   for (let i = 0; i < keys.length; i++) {
-    const key = keys[i],
-      parsed = parseColor(palette[key]);
+    const key = keys[i];
+    const parsed = parseColor(palette[key]);
     if (!parsed) {
       out[key] = palette[key];
       continue;
@@ -161,9 +169,11 @@ function adjustPalettes(themes2, adjustments) {
   for (const [name, theme] of Object.entries(themes2)) {
     const adj = adjustments[name] ?? adjustments.default;
     if (!adj) {
+      ;
       result[name] = theme;
       continue;
     }
+    ;
     result[name] = {
       light: adjustPalette(theme.light, adj.light ?? identity),
       dark: adjustPalette(theme.dark, adj.dark ?? identity)
@@ -174,64 +184,64 @@ function adjustPalettes(themes2, adjustments) {
 function paletteToNamedColors(name, palette) {
   return Object.fromEntries(palette.map((color, i) => [`${name}${i + 1}`, color]));
 }
-const darkPalette = ["#090909", "#151515", "#191919", "#232323", "#333", "#444", "#666", "#777", "#858585", "#aaa", "#ccc", "#ffffff"],
-  lightPalette = ["#fff", "#f8f8f8", "hsl(0, 0%, 93%)", "hsl(0, 0%, 85%)", "hsl(0, 0%, 80%)", "hsl(0, 0%, 70%)", "hsl(0, 0%, 59%)", "hsl(0, 0%, 45%)", "hsl(0, 0%, 30%)", "hsl(0, 0%, 20%)", "hsl(0, 0%, 14%)", "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 = paletteToNamedColors("neutral", neutralPalette),
-  whiteBlack = {
-    white: "rgba(255,255,255,1)",
-    white0: "rgba(255,255,255,0)",
-    white02: "rgba(255,255,255,0.2)",
-    white04: "rgba(255,255,255,0.4)",
-    white06: "rgba(255,255,255,0.6)",
-    white08: "rgba(255,255,255,0.8)",
-    black: "rgba(0,0,0,1)",
-    black0: "rgba(0,0,0,0)",
-    black02: "rgba(0,0,0,0.2)",
-    black04: "rgba(0,0,0,0.4)",
-    black06: "rgba(0,0,0,0.6)",
-    black08: "rgba(0,0,0,0.8)"
-  },
-  darkShadows = {
-    shadow1: "rgba(0,0,0,0.15)",
-    shadow2: "rgba(0,0,0,0.23)",
-    shadow3: "rgba(0,0,0,0.33)",
-    shadow4: "rgba(0,0,0,0.45)",
-    shadow5: "rgba(0,0,0,0.65)",
-    shadow6: "rgba(0,0,0,0.8)",
-    shadow7: "rgba(0,0,0,0.9)",
-    shadow8: "rgba(0,0,0,1)"
-  },
-  lightShadows = {
-    shadow1: "rgba(0,0,0,0.04)",
-    shadow2: "rgba(0,0,0,0.08)",
-    shadow3: "rgba(0,0,0,0.12)",
-    shadow4: "rgba(0,0,0,0.22)",
-    shadow5: "rgba(0,0,0,0.33)",
-    shadow6: "rgba(0,0,0,0.44)",
-    shadow7: "rgba(0,0,0,0.6)",
-    shadow8: "rgba(0,0,0,0.75)"
-  },
-  darkHighlights = {
-    highlight1: "rgba(255,255,255,0.1)",
-    highlight2: "rgba(255,255,255,0.2)",
-    highlight3: "rgba(255,255,255,0.3)",
-    highlight4: "rgba(255,255,255,0.45)",
-    highlight5: "rgba(255,255,255,0.65)",
-    highlight6: "rgba(255,255,255,0.85)",
-    highlight7: "rgba(255,255,255,0.95)",
-    highlight8: "rgba(255,255,255,1)"
-  },
-  lightHighlights = {
-    highlight1: "rgba(255,255,255,0.05)",
-    highlight2: "rgba(255,255,255,0.1)",
-    highlight3: "rgba(255,255,255,0.15)",
-    highlight4: "rgba(255,255,255,0.3)",
-    highlight5: "rgba(255,255,255,0.4)",
-    highlight6: "rgba(255,255,255,0.55)",
-    highlight7: "rgba(255,255,255,0.7)",
-    highlight8: "rgba(255,255,255,0.85)"
-  };
+const darkPalette = ["#090909", "#151515", "#191919", "#232323", "#333", "#444", "#666", "#777", "#858585", "#aaa", "#ccc", "#ffffff"];
+const lightPalette = ["#fff", "#f8f8f8", "hsl(0, 0%, 93%)", "hsl(0, 0%, 85%)", "hsl(0, 0%, 80%)", "hsl(0, 0%, 70%)", "hsl(0, 0%, 59%)", "hsl(0, 0%, 45%)", "hsl(0, 0%, 30%)", "hsl(0, 0%, 20%)", "hsl(0, 0%, 14%)", "hsl(0, 0%, 2%)"];
+const 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%)"];
+const neutral = paletteToNamedColors("neutral", neutralPalette);
+const whiteBlack = {
+  white: "rgba(255,255,255,1)",
+  white0: "rgba(255,255,255,0)",
+  white02: "rgba(255,255,255,0.2)",
+  white04: "rgba(255,255,255,0.4)",
+  white06: "rgba(255,255,255,0.6)",
+  white08: "rgba(255,255,255,0.8)",
+  black: "rgba(0,0,0,1)",
+  black0: "rgba(0,0,0,0)",
+  black02: "rgba(0,0,0,0.2)",
+  black04: "rgba(0,0,0,0.4)",
+  black06: "rgba(0,0,0,0.6)",
+  black08: "rgba(0,0,0,0.8)"
+};
+const darkShadows = {
+  shadow1: "rgba(0,0,0,0.15)",
+  shadow2: "rgba(0,0,0,0.23)",
+  shadow3: "rgba(0,0,0,0.33)",
+  shadow4: "rgba(0,0,0,0.45)",
+  shadow5: "rgba(0,0,0,0.65)",
+  shadow6: "rgba(0,0,0,0.8)",
+  shadow7: "rgba(0,0,0,0.9)",
+  shadow8: "rgba(0,0,0,1)"
+};
+const lightShadows = {
+  shadow1: "rgba(0,0,0,0.04)",
+  shadow2: "rgba(0,0,0,0.08)",
+  shadow3: "rgba(0,0,0,0.12)",
+  shadow4: "rgba(0,0,0,0.22)",
+  shadow5: "rgba(0,0,0,0.33)",
+  shadow6: "rgba(0,0,0,0.44)",
+  shadow7: "rgba(0,0,0,0.6)",
+  shadow8: "rgba(0,0,0,0.75)"
+};
+const darkHighlights = {
+  highlight1: "rgba(255,255,255,0.1)",
+  highlight2: "rgba(255,255,255,0.2)",
+  highlight3: "rgba(255,255,255,0.3)",
+  highlight4: "rgba(255,255,255,0.45)",
+  highlight5: "rgba(255,255,255,0.65)",
+  highlight6: "rgba(255,255,255,0.85)",
+  highlight7: "rgba(255,255,255,0.95)",
+  highlight8: "rgba(255,255,255,1)"
+};
+const lightHighlights = {
+  highlight1: "rgba(255,255,255,0.05)",
+  highlight2: "rgba(255,255,255,0.1)",
+  highlight3: "rgba(255,255,255,0.15)",
+  highlight4: "rgba(255,255,255,0.3)",
+  highlight5: "rgba(255,255,255,0.4)",
+  highlight6: "rgba(255,255,255,0.55)",
+  highlight7: "rgba(255,255,255,0.7)",
+  highlight8: "rgba(255,255,255,0.85)"
+};
 const defaultChildrenThemes = {
   gray: {
     light: import_colors.gray,
@@ -274,40 +284,73 @@ const defaultChildrenThemes = {
     dark: neutral
   }
 };
+function getDefaultV5ThemeValues({
+  palette
+}) {
+  if (!palette || palette.length < 3) {
+    throw new Error(`invalid palette: ${JSON.stringify(palette)}`);
+  }
+  const bgColor = palette[V5_BG_OFFSET];
+  const fgColor = palette[palette.length - 2];
+  return {
+    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),
+    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),
+    background02: (0, import_opacify.opacify)(bgColor, 0.2),
+    background04: (0, import_opacify.opacify)(bgColor, 0.4),
+    background06: (0, import_opacify.opacify)(bgColor, 0.6),
+    background08: (0, import_opacify.opacify)(bgColor, 0.8),
+    outlineColor: (0, import_opacify.opacify)(palette[V5_BG_OFFSET + 4], 0.6)
+  };
+}
 function createV5Theme(options = {}) {
   const {
-      darkPalette: customDarkPalette = darkPalette,
-      lightPalette: customLightPalette = lightPalette,
-      childrenThemes = defaultChildrenThemes,
-      grandChildrenThemes = v5GrandchildrenThemes,
-      componentThemes: customComponentThemes = v5ComponentThemes
-    } = options,
-    blackColors = paletteToNamedColors("black", customDarkPalette),
-    whiteColors = paletteToNamedColors("white", customLightPalette),
-    extraBase = {
-      ...blackColors,
-      ...whiteColors,
-      ...whiteBlack
-    },
-    lightExtraBase = {
-      ...extraBase,
-      ...lightShadows,
-      ...lightHighlights,
-      shadowColor: lightShadows.shadow3
-    },
-    darkExtraBase = {
-      ...extraBase,
-      ...darkShadows,
-      ...darkHighlights,
-      shadowColor: darkShadows.shadow3
-    },
-    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);
+    darkPalette: customDarkPalette = darkPalette,
+    lightPalette: customLightPalette = lightPalette,
+    accent: customAccent,
+    childrenThemes = defaultChildrenThemes,
+    grandChildrenThemes = v5GrandchildrenThemes,
+    componentThemes: customComponentThemes = v5ComponentThemes,
+    getTheme: userGetTheme
+  } = options;
+  const blackColors = paletteToNamedColors("black", customDarkPalette);
+  const whiteColors = paletteToNamedColors("white", customLightPalette);
+  const extraBase = {
+    ...blackColors,
+    ...whiteColors,
+    ...whiteBlack
+  };
+  const lightExtraBase = {
+    ...extraBase,
+    ...lightShadows,
+    ...lightHighlights,
+    shadowColor: lightShadows.shadow3
+  };
+  const darkExtraBase = {
+    ...extraBase,
+    ...darkShadows,
+    ...darkHighlights,
+    shadowColor: darkShadows.shadow3
+  };
+  const lightExtra = {
+    ...lightExtraBase
+  };
+  const darkExtra = {
+    ...darkExtraBase
+  };
+  for (const theme of Object.values(childrenThemes)) {
+    if (theme.light) Object.assign(lightExtra, theme.light);
+    if (theme.dark) Object.assign(darkExtra, theme.dark);
+  }
   const childrenWithPalettes = {
     // Always include black/white for theme generation
     black: {
@@ -344,43 +387,23 @@ function createV5Theme(options = {}) {
       }
     },
     accent: {
-      palette: {
+      palette: customAccent ? {
+        light: Object.values(customAccent.light),
+        dark: Object.values(customAccent.dark)
+      } : {
         dark: customLightPalette,
         light: customDarkPalette
       }
     },
     childrenThemes: childrenWithPalettes,
     grandChildrenThemes,
-    // Add computed colors to ALL themes based on each theme's palette
-    getTheme: ({
-      palette,
-      scheme
-    }) => {
-      if (!palette || palette.length < 3) throw new Error(`invalid palette: ${JSON.stringify(palette)}`);
-      const bgColor = palette[V5_BG_OFFSET],
-        fgColor = palette[palette.length - 2];
-      return {
-        // 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),
-        background02: (0, import_opacify.opacify)(bgColor, 0.2),
-        background04: (0, import_opacify.opacify)(bgColor, 0.4),
-        background06: (0, import_opacify.opacify)(bgColor, 0.6),
-        background08: (0, import_opacify.opacify)(bgColor, 0.8),
-        // a slightly stronger but translucent color
-        outlineColor: (0, import_opacify.opacify)(palette[V5_BG_OFFSET + 4], 0.6)
-      };
+    getTheme: props => {
+      const builtInTheme = getDefaultV5ThemeValues(props);
+      const customTheme = userGetTheme?.(props);
+      return customTheme ? {
+        ...builtInTheme,
+        ...customTheme
+      } : builtInTheme;
     }
   });
 }