@tamagui/themes 1.4.0

package/dist/esm/themes.js

@@ -0,0 +1,202 @@
+import {
+  addChildren,
+  applyMask,
+  createStrengthenMask,
+  createTheme,
+  createWeakenMask
+} from "@tamagui/create-theme";
+import { colorTokens, darkColors, lightColors } from "./tokens";
+const lightTransparent = "rgba(255,255,255,0)";
+const darkTransparent = "rgba(10,10,10,0)";
+const palettes = {
+  dark: [
+    darkTransparent,
+    "#090909",
+    "#151515",
+    "#191919",
+    "#232323",
+    "#282828",
+    "#323232",
+    "#424242",
+    "#494949",
+    "#545454",
+    "#626262",
+    "#a5a5a5",
+    "#fff",
+    lightTransparent
+  ],
+  light: [
+    lightTransparent,
+    "#fff",
+    "#f4f4f4",
+    "hsl(0, 0%, 99.0%)",
+    "hsl(0, 0%, 97.3%)",
+    "hsl(0, 0%, 95.1%)",
+    "hsl(0, 0%, 93.0%)",
+    "hsl(0, 0%, 90.9%)",
+    "hsl(0, 0%, 80.0%)",
+    "hsl(0, 0%, 56.1%)",
+    "hsl(0, 0%, 52.3%)",
+    "hsl(0, 0%, 43.5%)",
+    "hsl(0, 0%, 9.0%)",
+    darkTransparent
+  ]
+};
+const colorScale = {
+  color1: 1,
+  color2: 2,
+  color3: 3,
+  color4: 4,
+  color5: 5,
+  color6: 6,
+  color7: 7,
+  color8: 8,
+  color9: 9,
+  color10: 10,
+  color11: 11,
+  color12: 12
+};
+const skip = {
+  ...colorScale,
+  shadowColor: 1,
+  shadowColorHover: 1,
+  shadowColorPress: 2,
+  shadowColorFocus: 2
+};
+const template = {
+  ...skip,
+  // 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: 1,
+  backgroundFocus: 2,
+  backgroundStrong: 1,
+  backgroundTransparent: 0,
+  color: -1,
+  colorHover: -2,
+  colorPress: -1,
+  colorFocus: -2,
+  colorTransparent: -0,
+  borderColor: 3,
+  borderColorHover: 4,
+  borderColorPress: 2,
+  borderColorFocus: 3,
+  placeholderColor: -4
+};
+const lightShadowColor = "rgba(0,0,0,0.15)";
+const lightShadowColorStrong = "rgba(0,0,0,0.2)";
+const darkShadowColor = "rgba(0,0,0,0.5)";
+const darkShadowColorStrong = "rgba(0,0,0,0.7)";
+const lightShadows = {
+  shadowColor: lightShadowColorStrong,
+  shadowColorHover: lightShadowColorStrong,
+  shadowColorPress: lightShadowColor,
+  shadowColorFocus: lightShadowColor
+};
+const darkShadows = {
+  shadowColor: darkShadowColorStrong,
+  shadowColorHover: darkShadowColorStrong,
+  shadowColorPress: darkShadowColor,
+  shadowColorFocus: darkShadowColor
+};
+const lightTemplate = {
+  ...template,
+  ...lightShadows
+};
+const darkTemplate = { ...template, ...darkShadows };
+const light = createTheme(palettes.light, lightTemplate, {
+  nonInheritedValues: lightColors
+});
+const dark = createTheme(palettes.dark, darkTemplate, { nonInheritedValues: darkColors });
+const baseThemes = {
+  light,
+  dark
+};
+const max = palettes.dark.length - 1;
+const masks = {
+  weaker: createWeakenMask({
+    by: 1,
+    min: 1,
+    max
+  }),
+  stronger: createStrengthenMask({
+    by: 1,
+    min: 1,
+    max
+  })
+};
+const themes = addChildren(baseThemes, (name, themeIn) => {
+  const theme = themeIn;
+  const inverseName = name === "light" ? "dark" : "light";
+  const inverseTheme = baseThemes[inverseName];
+  const transparent = (hsl, opacity = 0) => hsl.replace(`%)`, `%, ${opacity})`).replace(`hsl(`, `hsla(`);
+  const [colorThemes, inverseColorThemes] = [
+    colorTokens[name],
+    colorTokens[inverseName]
+  ].map((colorSet) => {
+    return Object.fromEntries(
+      Object.keys(colorSet).map((color) => {
+        const colorPalette = Object.values(colorSet[color]);
+        const first6 = colorPalette.slice(0, 6);
+        const last5 = colorPalette.slice(colorPalette.length - 5);
+        return [
+          color,
+          createTheme(
+            [
+              transparent(colorPalette[0]),
+              ...first6,
+              ...last5,
+              theme.color,
+              transparent(colorPalette[colorPalette.length - 1])
+            ],
+            template
+          )
+        ];
+      })
+    );
+  });
+  return {
+    ...getAltThemes(theme, inverseTheme),
+    ...getComponentThemes(theme, inverseTheme),
+    ...addChildren(colorThemes, (colorName, colorTheme) => {
+      const inverse = inverseColorThemes[colorName];
+      return {
+        ...getAltThemes(colorTheme, inverse),
+        ...getComponentThemes(colorTheme, inverse)
+      };
+    })
+  };
+  function getComponentThemes(theme2, inverse) {
+    const stronger1 = applyMask(theme2, masks.stronger, { skip });
+    const stronger2 = applyMask(stronger1, masks.stronger, { skip });
+    const inverse1 = applyMask(inverse, masks.weaker, { skip });
+    const inverse2 = applyMask(inverse1, masks.weaker, { skip });
+    return {
+      Button: stronger2,
+      DrawerFrame: stronger1,
+      SliderTrack: theme2,
+      SliderTrackActive: stronger2,
+      SliderThumb: inverse1,
+      Progress: stronger1,
+      ProgressIndicator: inverse,
+      Switch: stronger2,
+      SwitchThumb: inverse2,
+      TooltipArrow: stronger1,
+      TooltipContent: stronger2
+    };
+  }
+  function getAltThemes(theme2, inverse) {
+    const alt1 = applyMask(theme2, masks.weaker, { skip });
+    const alt2 = applyMask(alt1, masks.weaker, { skip });
+    return addChildren({ alt1, alt2 }, (name2, theme3) => {
+      return getComponentThemes(theme3, inverse);
+    });
+  }
+});
+export {
+  themes
+};
+//# sourceMappingURL=themes.js.map

package/dist/esm/themes.js.map

@@ -0,0 +1,7 @@
+{
+  "version": 3,
+  "sources": ["../../src/themes.tsx"],
+  "sourcesContent": ["import {\n  addChildren,\n  applyMask,\n  createStrengthenMask,\n  createTheme,\n  createWeakenMask,\n} from '@tamagui/create-theme'\n\nimport { colorTokens, darkColors, lightColors } from './tokens'\n\ntype ColorName = keyof typeof colorTokens.dark\n\nconst lightTransparent = 'rgba(255,255,255,0)'\nconst darkTransparent = 'rgba(10,10,10,0)'\n\n// background => foreground\nconst palettes = {\n  dark: [\n    darkTransparent,\n    '#090909',\n    '#151515',\n    '#191919',\n    '#232323',\n    '#282828',\n    '#323232',\n    '#424242',\n    '#494949',\n    '#545454',\n    '#626262',\n    '#a5a5a5',\n    '#fff',\n    lightTransparent,\n  ],\n  light: [\n    lightTransparent,\n    '#fff',\n    '#f4f4f4',\n    'hsl(0, 0%, 99.0%)',\n    'hsl(0, 0%, 97.3%)',\n    'hsl(0, 0%, 95.1%)',\n    'hsl(0, 0%, 93.0%)',\n    'hsl(0, 0%, 90.9%)',\n    'hsl(0, 0%, 80.0%)',\n    'hsl(0, 0%, 56.1%)',\n    'hsl(0, 0%, 52.3%)',\n    'hsl(0, 0%, 43.5%)',\n    'hsl(0, 0%, 9.0%)',\n    darkTransparent,\n  ],\n}\n\nconst colorScale = {\n  color1: 1,\n  color2: 2,\n  color3: 3,\n  color4: 4,\n  color5: 5,\n  color6: 6,\n  color7: 7,\n  color8: 8,\n  color9: 9,\n  color10: 10,\n  color11: 11,\n  color12: 12,\n}\n\n// we can use subset of our template as a \"skip\" so it doesn't get adjusted with masks\nconst skip = {\n  ...colorScale,\n  shadowColor: 1,\n  shadowColorHover: 1,\n  shadowColorPress: 2,\n  shadowColorFocus: 2,\n}\n\n// templates use the palette and specify index\n// negative goes backwards from end so -1 is the last item\nconst template = {\n  ...skip,\n  // the background, color, etc keys here work like generics - they make it so you\n  // can publish components for others to use without mandating a specific color scale\n  // the @tamagui/button Button component looks for `$background`, so you set the\n  // dark_red_Button theme to have a stronger background than the dark_red theme.\n  background: 2,\n  backgroundHover: 3,\n  backgroundPress: 1,\n  backgroundFocus: 2,\n  backgroundStrong: 1,\n  backgroundTransparent: 0,\n  color: -1,\n  colorHover: -2,\n  colorPress: -1,\n  colorFocus: -2,\n  colorTransparent: -0,\n  borderColor: 3,\n  borderColorHover: 4,\n  borderColorPress: 2,\n  borderColorFocus: 3,\n  placeholderColor: -4,\n}\n\nconst lightShadowColor = 'rgba(0,0,0,0.15)'\nconst lightShadowColorStrong = 'rgba(0,0,0,0.2)'\nconst darkShadowColor = 'rgba(0,0,0,0.5)'\nconst darkShadowColorStrong = 'rgba(0,0,0,0.7)'\n\nconst lightShadows = {\n  shadowColor: lightShadowColorStrong,\n  shadowColorHover: lightShadowColorStrong,\n  shadowColorPress: lightShadowColor,\n  shadowColorFocus: lightShadowColor,\n}\n\nconst darkShadows = {\n  shadowColor: darkShadowColorStrong,\n  shadowColorHover: darkShadowColorStrong,\n  shadowColorPress: darkShadowColor,\n  shadowColorFocus: darkShadowColor,\n}\n\nconst lightTemplate = {\n  ...template,\n  ...lightShadows,\n}\n\nconst darkTemplate = { ...template, ...darkShadows }\n\nconst light = createTheme(palettes.light, lightTemplate, {\n  nonInheritedValues: lightColors,\n})\n\nconst dark = createTheme(palettes.dark, darkTemplate, { nonInheritedValues: darkColors })\n\nconst baseThemes = {\n  light,\n  dark,\n}\n\ntype Theme = typeof light\n\n// avoid transparent ends\nconst max = palettes.dark.length - 1\nconst masks = {\n  weaker: createWeakenMask({\n    by: 1,\n    min: 1,\n    max,\n  }),\n  stronger: createStrengthenMask({\n    by: 1,\n    min: 1,\n    max,\n  }),\n}\n\nexport const themes = addChildren(baseThemes, (name, themeIn) => {\n  const theme = themeIn as Theme\n  const inverseName = name === 'light' ? 'dark' : 'light'\n  const inverseTheme = baseThemes[inverseName]\n  const transparent = (hsl: string, opacity = 0) =>\n    hsl.replace(`%)`, `%, ${opacity})`).replace(`hsl(`, `hsla(`)\n\n  // setup colorThemes and their inverses\n  const [colorThemes, inverseColorThemes] = [\n    colorTokens[name],\n    colorTokens[inverseName],\n  ].map((colorSet) => {\n    return Object.fromEntries(\n      Object.keys(colorSet).map((color) => {\n        const colorPalette = Object.values(colorSet[color as ColorName])\n        // we want a much lighter text color by default so swap them around a bit\n        const first6 = colorPalette.slice(0, 6)\n        const last5 = colorPalette.slice(colorPalette.length - 5)\n        return [\n          color,\n          createTheme(\n            [\n              transparent(colorPalette[0]),\n              ...first6,\n              ...last5,\n              theme.color,\n              transparent(colorPalette[colorPalette.length - 1]),\n            ],\n            template\n          ),\n        ]\n      })\n    ) as Record<ColorName, Theme>\n  })\n\n  return {\n    ...getAltThemes(theme, inverseTheme),\n    ...getComponentThemes(theme, inverseTheme),\n    ...addChildren(colorThemes, (colorName, colorTheme) => {\n      const inverse = inverseColorThemes[colorName]\n      return {\n        ...getAltThemes(colorTheme as any, inverse as any),\n        ...getComponentThemes(colorTheme as any, inverse as any),\n      }\n    }),\n  }\n\n  function getComponentThemes(theme: Theme, inverse: Theme) {\n    const stronger1 = applyMask(theme, masks.stronger, { skip })\n    const stronger2 = applyMask(stronger1, masks.stronger, { skip })\n    const inverse1 = applyMask(inverse, masks.weaker, { skip })\n    const inverse2 = applyMask(inverse1, masks.weaker, { skip })\n    return {\n      Button: stronger2,\n      DrawerFrame: stronger1,\n      SliderTrack: theme,\n      SliderTrackActive: stronger2,\n      SliderThumb: inverse1,\n      Progress: stronger1,\n      ProgressIndicator: inverse,\n      Switch: stronger2,\n      SwitchThumb: inverse2,\n      TooltipArrow: stronger1,\n      TooltipContent: stronger2,\n    }\n  }\n\n  function getAltThemes(theme: Theme, inverse: Theme) {\n    const alt1 = applyMask(theme, masks.weaker, { skip })\n    const alt2 = applyMask(alt1, masks.weaker, { skip })\n    return addChildren({ alt1, alt2 }, (name, theme) => {\n      return getComponentThemes(theme as any, inverse)\n    })\n  }\n})\n"],
+  "mappings": "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",
+  "names": ["theme", "name"]
+}

package/dist/esm/themes.mjs

@@ -0,0 +1,202 @@
+import {
+  addChildren,
+  applyMask,
+  createStrengthenMask,
+  createTheme,
+  createWeakenMask
+} from "@tamagui/create-theme";
+import { colorTokens, darkColors, lightColors } from "./tokens";
+const lightTransparent = "rgba(255,255,255,0)";
+const darkTransparent = "rgba(10,10,10,0)";
+const palettes = {
+  dark: [
+    darkTransparent,
+    "#090909",
+    "#151515",
+    "#191919",
+    "#232323",
+    "#282828",
+    "#323232",
+    "#424242",
+    "#494949",
+    "#545454",
+    "#626262",
+    "#a5a5a5",
+    "#fff",
+    lightTransparent
+  ],
+  light: [
+    lightTransparent,
+    "#fff",
+    "#f4f4f4",
+    "hsl(0, 0%, 99.0%)",
+    "hsl(0, 0%, 97.3%)",
+    "hsl(0, 0%, 95.1%)",
+    "hsl(0, 0%, 93.0%)",
+    "hsl(0, 0%, 90.9%)",
+    "hsl(0, 0%, 80.0%)",
+    "hsl(0, 0%, 56.1%)",
+    "hsl(0, 0%, 52.3%)",
+    "hsl(0, 0%, 43.5%)",
+    "hsl(0, 0%, 9.0%)",
+    darkTransparent
+  ]
+};
+const colorScale = {
+  color1: 1,
+  color2: 2,
+  color3: 3,
+  color4: 4,
+  color5: 5,
+  color6: 6,
+  color7: 7,
+  color8: 8,
+  color9: 9,
+  color10: 10,
+  color11: 11,
+  color12: 12
+};
+const skip = {
+  ...colorScale,
+  shadowColor: 1,
+  shadowColorHover: 1,
+  shadowColorPress: 2,
+  shadowColorFocus: 2
+};
+const template = {
+  ...skip,
+  // 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: 1,
+  backgroundFocus: 2,
+  backgroundStrong: 1,
+  backgroundTransparent: 0,
+  color: -1,
+  colorHover: -2,
+  colorPress: -1,
+  colorFocus: -2,
+  colorTransparent: -0,
+  borderColor: 3,
+  borderColorHover: 4,
+  borderColorPress: 2,
+  borderColorFocus: 3,
+  placeholderColor: -4
+};
+const lightShadowColor = "rgba(0,0,0,0.15)";
+const lightShadowColorStrong = "rgba(0,0,0,0.2)";
+const darkShadowColor = "rgba(0,0,0,0.5)";
+const darkShadowColorStrong = "rgba(0,0,0,0.7)";
+const lightShadows = {
+  shadowColor: lightShadowColorStrong,
+  shadowColorHover: lightShadowColorStrong,
+  shadowColorPress: lightShadowColor,
+  shadowColorFocus: lightShadowColor
+};
+const darkShadows = {
+  shadowColor: darkShadowColorStrong,
+  shadowColorHover: darkShadowColorStrong,
+  shadowColorPress: darkShadowColor,
+  shadowColorFocus: darkShadowColor
+};
+const lightTemplate = {
+  ...template,
+  ...lightShadows
+};
+const darkTemplate = { ...template, ...darkShadows };
+const light = createTheme(palettes.light, lightTemplate, {
+  nonInheritedValues: lightColors
+});
+const dark = createTheme(palettes.dark, darkTemplate, { nonInheritedValues: darkColors });
+const baseThemes = {
+  light,
+  dark
+};
+const max = palettes.dark.length - 1;
+const masks = {
+  weaker: createWeakenMask({
+    by: 1,
+    min: 1,
+    max
+  }),
+  stronger: createStrengthenMask({
+    by: 1,
+    min: 1,
+    max
+  })
+};
+const themes = addChildren(baseThemes, (name, themeIn) => {
+  const theme = themeIn;
+  const inverseName = name === "light" ? "dark" : "light";
+  const inverseTheme = baseThemes[inverseName];
+  const transparent = (hsl, opacity = 0) => hsl.replace(`%)`, `%, ${opacity})`).replace(`hsl(`, `hsla(`);
+  const [colorThemes, inverseColorThemes] = [
+    colorTokens[name],
+    colorTokens[inverseName]
+  ].map((colorSet) => {
+    return Object.fromEntries(
+      Object.keys(colorSet).map((color) => {
+        const colorPalette = Object.values(colorSet[color]);
+        const first6 = colorPalette.slice(0, 6);
+        const last5 = colorPalette.slice(colorPalette.length - 5);
+        return [
+          color,
+          createTheme(
+            [
+              transparent(colorPalette[0]),
+              ...first6,
+              ...last5,
+              theme.color,
+              transparent(colorPalette[colorPalette.length - 1])
+            ],
+            template
+          )
+        ];
+      })
+    );
+  });
+  return {
+    ...getAltThemes(theme, inverseTheme),
+    ...getComponentThemes(theme, inverseTheme),
+    ...addChildren(colorThemes, (colorName, colorTheme) => {
+      const inverse = inverseColorThemes[colorName];
+      return {
+        ...getAltThemes(colorTheme, inverse),
+        ...getComponentThemes(colorTheme, inverse)
+      };
+    })
+  };
+  function getComponentThemes(theme2, inverse) {
+    const stronger1 = applyMask(theme2, masks.stronger, { skip });
+    const stronger2 = applyMask(stronger1, masks.stronger, { skip });
+    const inverse1 = applyMask(inverse, masks.weaker, { skip });
+    const inverse2 = applyMask(inverse1, masks.weaker, { skip });
+    return {
+      Button: stronger2,
+      DrawerFrame: stronger1,
+      SliderTrack: theme2,
+      SliderTrackActive: stronger2,
+      SliderThumb: inverse1,
+      Progress: stronger1,
+      ProgressIndicator: inverse,
+      Switch: stronger2,
+      SwitchThumb: inverse2,
+      TooltipArrow: stronger1,
+      TooltipContent: stronger2
+    };
+  }
+  function getAltThemes(theme2, inverse) {
+    const alt1 = applyMask(theme2, masks.weaker, { skip });
+    const alt2 = applyMask(alt1, masks.weaker, { skip });
+    return addChildren({ alt1, alt2 }, (name2, theme3) => {
+      return getComponentThemes(theme3, inverse);
+    });
+  }
+});
+export {
+  themes
+};
+//# sourceMappingURL=themes.mjs.map

package/dist/esm/themes.mjs.map

@@ -0,0 +1,7 @@
+{
+  "version": 3,
+  "sources": ["../../src/themes.tsx"],
+  "sourcesContent": ["import {\n  addChildren,\n  applyMask,\n  createStrengthenMask,\n  createTheme,\n  createWeakenMask,\n} from '@tamagui/create-theme'\n\nimport { colorTokens, darkColors, lightColors } from './tokens'\n\ntype ColorName = keyof typeof colorTokens.dark\n\nconst lightTransparent = 'rgba(255,255,255,0)'\nconst darkTransparent = 'rgba(10,10,10,0)'\n\n// background => foreground\nconst palettes = {\n  dark: [\n    darkTransparent,\n    '#090909',\n    '#151515',\n    '#191919',\n    '#232323',\n    '#282828',\n    '#323232',\n    '#424242',\n    '#494949',\n    '#545454',\n    '#626262',\n    '#a5a5a5',\n    '#fff',\n    lightTransparent,\n  ],\n  light: [\n    lightTransparent,\n    '#fff',\n    '#f4f4f4',\n    'hsl(0, 0%, 99.0%)',\n    'hsl(0, 0%, 97.3%)',\n    'hsl(0, 0%, 95.1%)',\n    'hsl(0, 0%, 93.0%)',\n    'hsl(0, 0%, 90.9%)',\n    'hsl(0, 0%, 80.0%)',\n    'hsl(0, 0%, 56.1%)',\n    'hsl(0, 0%, 52.3%)',\n    'hsl(0, 0%, 43.5%)',\n    'hsl(0, 0%, 9.0%)',\n    darkTransparent,\n  ],\n}\n\nconst colorScale = {\n  color1: 1,\n  color2: 2,\n  color3: 3,\n  color4: 4,\n  color5: 5,\n  color6: 6,\n  color7: 7,\n  color8: 8,\n  color9: 9,\n  color10: 10,\n  color11: 11,\n  color12: 12,\n}\n\n// we can use subset of our template as a \"skip\" so it doesn't get adjusted with masks\nconst skip = {\n  ...colorScale,\n  shadowColor: 1,\n  shadowColorHover: 1,\n  shadowColorPress: 2,\n  shadowColorFocus: 2,\n}\n\n// templates use the palette and specify index\n// negative goes backwards from end so -1 is the last item\nconst template = {\n  ...skip,\n  // the background, color, etc keys here work like generics - they make it so you\n  // can publish components for others to use without mandating a specific color scale\n  // the @tamagui/button Button component looks for `$background`, so you set the\n  // dark_red_Button theme to have a stronger background than the dark_red theme.\n  background: 2,\n  backgroundHover: 3,\n  backgroundPress: 1,\n  backgroundFocus: 2,\n  backgroundStrong: 1,\n  backgroundTransparent: 0,\n  color: -1,\n  colorHover: -2,\n  colorPress: -1,\n  colorFocus: -2,\n  colorTransparent: -0,\n  borderColor: 3,\n  borderColorHover: 4,\n  borderColorPress: 2,\n  borderColorFocus: 3,\n  placeholderColor: -4,\n}\n\nconst lightShadowColor = 'rgba(0,0,0,0.15)'\nconst lightShadowColorStrong = 'rgba(0,0,0,0.2)'\nconst darkShadowColor = 'rgba(0,0,0,0.5)'\nconst darkShadowColorStrong = 'rgba(0,0,0,0.7)'\n\nconst lightShadows = {\n  shadowColor: lightShadowColorStrong,\n  shadowColorHover: lightShadowColorStrong,\n  shadowColorPress: lightShadowColor,\n  shadowColorFocus: lightShadowColor,\n}\n\nconst darkShadows = {\n  shadowColor: darkShadowColorStrong,\n  shadowColorHover: darkShadowColorStrong,\n  shadowColorPress: darkShadowColor,\n  shadowColorFocus: darkShadowColor,\n}\n\nconst lightTemplate = {\n  ...template,\n  ...lightShadows,\n}\n\nconst darkTemplate = { ...template, ...darkShadows }\n\nconst light = createTheme(palettes.light, lightTemplate, {\n  nonInheritedValues: lightColors,\n})\n\nconst dark = createTheme(palettes.dark, darkTemplate, { nonInheritedValues: darkColors })\n\nconst baseThemes = {\n  light,\n  dark,\n}\n\ntype Theme = typeof light\n\n// avoid transparent ends\nconst max = palettes.dark.length - 1\nconst masks = {\n  weaker: createWeakenMask({\n    by: 1,\n    min: 1,\n    max,\n  }),\n  stronger: createStrengthenMask({\n    by: 1,\n    min: 1,\n    max,\n  }),\n}\n\nexport const themes = addChildren(baseThemes, (name, themeIn) => {\n  const theme = themeIn as Theme\n  const inverseName = name === 'light' ? 'dark' : 'light'\n  const inverseTheme = baseThemes[inverseName]\n  const transparent = (hsl: string, opacity = 0) =>\n    hsl.replace(`%)`, `%, ${opacity})`).replace(`hsl(`, `hsla(`)\n\n  // setup colorThemes and their inverses\n  const [colorThemes, inverseColorThemes] = [\n    colorTokens[name],\n    colorTokens[inverseName],\n  ].map((colorSet) => {\n    return Object.fromEntries(\n      Object.keys(colorSet).map((color) => {\n        const colorPalette = Object.values(colorSet[color as ColorName])\n        // we want a much lighter text color by default so swap them around a bit\n        const first6 = colorPalette.slice(0, 6)\n        const last5 = colorPalette.slice(colorPalette.length - 5)\n        return [\n          color,\n          createTheme(\n            [\n              transparent(colorPalette[0]),\n              ...first6,\n              ...last5,\n              theme.color,\n              transparent(colorPalette[colorPalette.length - 1]),\n            ],\n            template\n          ),\n        ]\n      })\n    ) as Record<ColorName, Theme>\n  })\n\n  return {\n    ...getAltThemes(theme, inverseTheme),\n    ...getComponentThemes(theme, inverseTheme),\n    ...addChildren(colorThemes, (colorName, colorTheme) => {\n      const inverse = inverseColorThemes[colorName]\n      return {\n        ...getAltThemes(colorTheme as any, inverse as any),\n        ...getComponentThemes(colorTheme as any, inverse as any),\n      }\n    }),\n  }\n\n  function getComponentThemes(theme: Theme, inverse: Theme) {\n    const stronger1 = applyMask(theme, masks.stronger, { skip })\n    const stronger2 = applyMask(stronger1, masks.stronger, { skip })\n    const inverse1 = applyMask(inverse, masks.weaker, { skip })\n    const inverse2 = applyMask(inverse1, masks.weaker, { skip })\n    return {\n      Button: stronger2,\n      DrawerFrame: stronger1,\n      SliderTrack: theme,\n      SliderTrackActive: stronger2,\n      SliderThumb: inverse1,\n      Progress: stronger1,\n      ProgressIndicator: inverse,\n      Switch: stronger2,\n      SwitchThumb: inverse2,\n      TooltipArrow: stronger1,\n      TooltipContent: stronger2,\n    }\n  }\n\n  function getAltThemes(theme: Theme, inverse: Theme) {\n    const alt1 = applyMask(theme, masks.weaker, { skip })\n    const alt2 = applyMask(alt1, masks.weaker, { skip })\n    return addChildren({ alt1, alt2 }, (name, theme) => {\n      return getComponentThemes(theme as any, inverse)\n    })\n  }\n})\n"],
+  "mappings": "AAAA;AAAA,EACE;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,OACK;AAEP,SAAS,aAAa,YAAY,mBAAmB;AAIrD,MAAM,mBAAmB;AACzB,MAAM,kBAAkB;AAGxB,MAAM,WAAW;AAAA,EACf,MAAM;AAAA,IACJ;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,EACF;AAAA,EACA,OAAO;AAAA,IACL;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,EACF;AACF;AAEA,MAAM,aAAa;AAAA,EACjB,QAAQ;AAAA,EACR,QAAQ;AAAA,EACR,QAAQ;AAAA,EACR,QAAQ;AAAA,EACR,QAAQ;AAAA,EACR,QAAQ;AAAA,EACR,QAAQ;AAAA,EACR,QAAQ;AAAA,EACR,QAAQ;AAAA,EACR,SAAS;AAAA,EACT,SAAS;AAAA,EACT,SAAS;AACX;AAGA,MAAM,OAAO;AAAA,EACX,GAAG;AAAA,EACH,aAAa;AAAA,EACb,kBAAkB;AAAA,EAClB,kBAAkB;AAAA,EAClB,kBAAkB;AACpB;AAIA,MAAM,WAAW;AAAA,EACf,GAAG;AAAA;AAAA;AAAA;AAAA;AAAA,EAKH,YAAY;AAAA,EACZ,iBAAiB;AAAA,EACjB,iBAAiB;AAAA,EACjB,iBAAiB;AAAA,EACjB,kBAAkB;AAAA,EAClB,uBAAuB;AAAA,EACvB,OAAO;AAAA,EACP,YAAY;AAAA,EACZ,YAAY;AAAA,EACZ,YAAY;AAAA,EACZ,kBAAkB;AAAA,EAClB,aAAa;AAAA,EACb,kBAAkB;AAAA,EAClB,kBAAkB;AAAA,EAClB,kBAAkB;AAAA,EAClB,kBAAkB;AACpB;AAEA,MAAM,mBAAmB;AACzB,MAAM,yBAAyB;AAC/B,MAAM,kBAAkB;AACxB,MAAM,wBAAwB;AAE9B,MAAM,eAAe;AAAA,EACnB,aAAa;AAAA,EACb,kBAAkB;AAAA,EAClB,kBAAkB;AAAA,EAClB,kBAAkB;AACpB;AAEA,MAAM,cAAc;AAAA,EAClB,aAAa;AAAA,EACb,kBAAkB;AAAA,EAClB,kBAAkB;AAAA,EAClB,kBAAkB;AACpB;AAEA,MAAM,gBAAgB;AAAA,EACpB,GAAG;AAAA,EACH,GAAG;AACL;AAEA,MAAM,eAAe,EAAE,GAAG,UAAU,GAAG,YAAY;AAEnD,MAAM,QAAQ,YAAY,SAAS,OAAO,eAAe;AAAA,EACvD,oBAAoB;AACtB,CAAC;AAED,MAAM,OAAO,YAAY,SAAS,MAAM,cAAc,EAAE,oBAAoB,WAAW,CAAC;AAExF,MAAM,aAAa;AAAA,EACjB;AAAA,EACA;AACF;AAKA,MAAM,MAAM,SAAS,KAAK,SAAS;AACnC,MAAM,QAAQ;AAAA,EACZ,QAAQ,iBAAiB;AAAA,IACvB,IAAI;AAAA,IACJ,KAAK;AAAA,IACL;AAAA,EACF,CAAC;AAAA,EACD,UAAU,qBAAqB;AAAA,IAC7B,IAAI;AAAA,IACJ,KAAK;AAAA,IACL;AAAA,EACF,CAAC;AACH;AAEO,MAAM,SAAS,YAAY,YAAY,CAAC,MAAM,YAAY;AAC/D,QAAM,QAAQ;AACd,QAAM,cAAc,SAAS,UAAU,SAAS;AAChD,QAAM,eAAe,WAAW,WAAW;AAC3C,QAAM,cAAc,CAAC,KAAa,UAAU,MAC1C,IAAI,QAAQ,MAAM,MAAM,UAAU,EAAE,QAAQ,QAAQ,OAAO;AAG7D,QAAM,CAAC,aAAa,kBAAkB,IAAI;AAAA,IACxC,YAAY,IAAI;AAAA,IAChB,YAAY,WAAW;AAAA,EACzB,EAAE,IAAI,CAAC,aAAa;AAClB,WAAO,OAAO;AAAA,MACZ,OAAO,KAAK,QAAQ,EAAE,IAAI,CAAC,UAAU;AACnC,cAAM,eAAe,OAAO,OAAO,SAAS,KAAkB,CAAC;AAE/D,cAAM,SAAS,aAAa,MAAM,GAAG,CAAC;AACtC,cAAM,QAAQ,aAAa,MAAM,aAAa,SAAS,CAAC;AACxD,eAAO;AAAA,UACL;AAAA,UACA;AAAA,YACE;AAAA,cACE,YAAY,aAAa,CAAC,CAAC;AAAA,cAC3B,GAAG;AAAA,cACH,GAAG;AAAA,cACH,MAAM;AAAA,cACN,YAAY,aAAa,aAAa,SAAS,CAAC,CAAC;AAAA,YACnD;AAAA,YACA;AAAA,UACF;AAAA,QACF;AAAA,MACF,CAAC;AAAA,IACH;AAAA,EACF,CAAC;AAED,SAAO;AAAA,IACL,GAAG,aAAa,OAAO,YAAY;AAAA,IACnC,GAAG,mBAAmB,OAAO,YAAY;AAAA,IACzC,GAAG,YAAY,aAAa,CAAC,WAAW,eAAe;AACrD,YAAM,UAAU,mBAAmB,SAAS;AAC5C,aAAO;AAAA,QACL,GAAG,aAAa,YAAmB,OAAc;AAAA,QACjD,GAAG,mBAAmB,YAAmB,OAAc;AAAA,MACzD;AAAA,IACF,CAAC;AAAA,EACH;AAEA,WAAS,mBAAmBA,QAAc,SAAgB;AACxD,UAAM,YAAY,UAAUA,QAAO,MAAM,UAAU,EAAE,KAAK,CAAC;AAC3D,UAAM,YAAY,UAAU,WAAW,MAAM,UAAU,EAAE,KAAK,CAAC;AAC/D,UAAM,WAAW,UAAU,SAAS,MAAM,QAAQ,EAAE,KAAK,CAAC;AAC1D,UAAM,WAAW,UAAU,UAAU,MAAM,QAAQ,EAAE,KAAK,CAAC;AAC3D,WAAO;AAAA,MACL,QAAQ;AAAA,MACR,aAAa;AAAA,MACb,aAAaA;AAAA,MACb,mBAAmB;AAAA,MACnB,aAAa;AAAA,MACb,UAAU;AAAA,MACV,mBAAmB;AAAA,MACnB,QAAQ;AAAA,MACR,aAAa;AAAA,MACb,cAAc;AAAA,MACd,gBAAgB;AAAA,IAClB;AAAA,EACF;AAEA,WAAS,aAAaA,QAAc,SAAgB;AAClD,UAAM,OAAO,UAAUA,QAAO,MAAM,QAAQ,EAAE,KAAK,CAAC;AACpD,UAAM,OAAO,UAAU,MAAM,MAAM,QAAQ,EAAE,KAAK,CAAC;AACnD,WAAO,YAAY,EAAE,MAAM,KAAK,GAAG,CAACC,OAAMD,WAAU;AAClD,aAAO,mBAAmBA,QAAc,OAAO;AAAA,IACjD,CAAC;AAAA,EACH;AACF,CAAC;",
+  "names": ["theme", "name"]
+}

package/dist/esm/tokens.js

@@ -0,0 +1,165 @@
+import {
+  blue,
+  blueDark,
+  gray,
+  grayDark,
+  green,
+  greenDark,
+  orange,
+  orangeDark,
+  pink,
+  pinkDark,
+  purple,
+  purpleDark,
+  red,
+  redDark,
+  yellow,
+  yellowDark
+} from "@tamagui/colors";
+import { createTokens } from "@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
+};
+const spaces = Object.entries(size).map(([k, v]) => {
+  return [k, sizeToSpace(v)];
+});
+function sizeToSpace(v) {
+  if (v === 0)
+    return 0;
+  if (v === 2)
+    return 0.5;
+  if (v === 4)
+    return 1;
+  if (v === 8)
+    return 1.5;
+  if (v <= 16)
+    return Math.round(v * 0.333);
+  return Math.floor(v * 0.7 - 12);
+}
+const spacesNegative = spaces.map(([k, v]) => [`-${k.slice(1)}`, -v]);
+const space = {
+  ...Object.fromEntries(spaces),
+  ...Object.fromEntries(spacesNegative)
+};
+const zIndex = {
+  0: 0,
+  1: 100,
+  2: 200,
+  3: 300,
+  4: 400,
+  5: 500
+};
+const colorTokens = {
+  light: {
+    blue,
+    gray,
+    green,
+    orange,
+    pink,
+    purple,
+    red,
+    yellow
+  },
+  dark: {
+    blue: blueDark,
+    gray: grayDark,
+    green: greenDark,
+    orange: orangeDark,
+    pink: pinkDark,
+    purple: purpleDark,
+    red: redDark,
+    yellow: yellowDark
+  }
+};
+const 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
+};
+const 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
+};
+const 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
+};
+const tokens = createTokens({
+  color,
+  radius,
+  zIndex,
+  space,
+  size
+});
+export {
+  color,
+  colorTokens,
+  darkColors,
+  lightColors,
+  radius,
+  size,
+  space,
+  tokens,
+  zIndex
+};
+//# sourceMappingURL=tokens.js.map

package/dist/esm/tokens.js.map

@@ -0,0 +1,7 @@
+{
+  "version": 3,
+  "sources": ["../../src/tokens.tsx"],
+  "sourcesContent": ["import {\n  blue,\n  blueDark,\n  gray,\n  grayDark,\n  green,\n  greenDark,\n  orange,\n  orangeDark,\n  pink,\n  pinkDark,\n  purple,\n  purpleDark,\n  red,\n  redDark,\n  yellow,\n  yellowDark,\n} from '@tamagui/colors'\nimport { Variable, createTokens } from '@tamagui/web'\n\n// should roughly map to button/input etc height at each level\n// fonts should match that height/lineHeight at each stop\n// so these are really non-linear on purpose\n// why?\n//   - at sizes <1, used for fine grained things (borders, smallest paddingY)\n//     - so smallest padY should be roughly 1-4px so it can join with lineHeight\n//   - at sizes >=1, have to consider \"pressability\" (jumps up)\n//   - after that it should go upwards somewhat naturally\n//   - H1 / headings top out at 10 naturally, so after 10 we can go upwards faster\n//  but also one more wrinkle...\n//  space is used in conjunction with size\n//  i'm setting space to generally just a fixed fraction of size (~1/3-2/3 still fine tuning)\nexport const size = {\n  $0: 0,\n  '$0.25': 2,\n  '$0.5': 4,\n  '$0.75': 8,\n  $1: 20,\n  '$1.5': 24,\n  $2: 28,\n  '$2.5': 32,\n  $3: 36,\n  '$3.5': 40,\n  $4: 44,\n  $true: 44,\n  '$4.5': 48,\n  $5: 52,\n  $6: 64,\n  $7: 74,\n  $8: 84,\n  $9: 94,\n  $10: 104,\n  $11: 124,\n  $12: 144,\n  $13: 164,\n  $14: 184,\n  $15: 204,\n  $16: 224,\n  $17: 224,\n  $18: 244,\n  $19: 264,\n  $20: 284,\n}\n\ntype SizeKeysIn = keyof typeof size\ntype Sizes = {\n  [Key in SizeKeysIn extends `$${infer Key}` ? Key : SizeKeysIn]: number\n}\ntype SizeKeys = `${keyof Sizes extends `${infer K}` ? K : never}`\n\nconst spaces = Object.entries(size).map(([k, v]) => {\n  return [k, sizeToSpace(v)]\n})\n\n// a bit odd but keeping backward compat for values >8 while fixing below\nfunction sizeToSpace(v: number) {\n  if (v === 0) return 0\n  if (v === 2) return 0.5\n  if (v === 4) return 1\n  if (v === 8) return 1.5\n  if (v <= 16) return Math.round(v * 0.333)\n  return Math.floor(v * 0.7 - 12)\n}\n\nconst spacesNegative = spaces.map(([k, v]) => [`-${(k as string).slice(1)}`, -v])\n\ntype SizeKeysWithNegatives =\n  | `-${SizeKeys extends `$${infer Key}` ? Key : SizeKeys}`\n  | SizeKeys\n\nexport const space: {\n  [Key in SizeKeysWithNegatives]: Key extends keyof Sizes ? Sizes[Key] : number\n} = {\n  ...Object.fromEntries(spaces),\n  ...Object.fromEntries(spacesNegative),\n} as any\n\nexport const zIndex = {\n  0: 0,\n  1: 100,\n  2: 200,\n  3: 300,\n  4: 400,\n  5: 500,\n}\n\nexport const colorTokens = {\n  light: {\n    blue: blue,\n    gray: gray,\n    green: green,\n    orange: orange,\n    pink: pink,\n    purple: purple,\n    red: red,\n    yellow: yellow,\n  },\n  dark: {\n    blue: blueDark,\n    gray: grayDark,\n    green: greenDark,\n    orange: orangeDark,\n    pink: pinkDark,\n    purple: purpleDark,\n    red: redDark,\n    yellow: yellowDark,\n  },\n}\n\nexport const darkColors = {\n  ...colorTokens.dark.blue,\n  ...colorTokens.dark.gray,\n  ...colorTokens.dark.green,\n  ...colorTokens.dark.orange,\n  ...colorTokens.dark.pink,\n  ...colorTokens.dark.purple,\n  ...colorTokens.dark.red,\n  ...colorTokens.dark.yellow,\n}\n\nexport const lightColors = {\n  ...colorTokens.light.blue,\n  ...colorTokens.light.gray,\n  ...colorTokens.light.green,\n  ...colorTokens.light.orange,\n  ...colorTokens.light.pink,\n  ...colorTokens.light.purple,\n  ...colorTokens.light.red,\n  ...colorTokens.light.yellow,\n}\n\nexport const color = {\n  ...postfixObjKeys(lightColors, 'Light'),\n  ...postfixObjKeys(darkColors, 'Dark'),\n}\n\nfunction postfixObjKeys<\n  A extends { [key: string]: Variable<string> | string },\n  B extends string\n>(\n  obj: A,\n  postfix: B\n): {\n  [Key in `${keyof A extends string ? keyof A : never}${B}`]: Variable<string> | string\n} {\n  return Object.fromEntries(\n    Object.entries(obj).map(([k, v]) => [`${k}${postfix}`, v])\n  ) as any\n}\n\nexport const radius = {\n  0: 0,\n  1: 3,\n  2: 5,\n  3: 7,\n  4: 9,\n  true: 9,\n  5: 10,\n  6: 16,\n  7: 19,\n  8: 22,\n  9: 26,\n  10: 34,\n  11: 42,\n  12: 50,\n}\n\nexport const tokens = createTokens({\n  color,\n  radius,\n  zIndex,\n  space,\n  size,\n})\n"],
+  "mappings": "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",
+  "names": []
+}