@tamagui/theme-base 1.0.0-beta.147

package/dist/jsx/themes.js

@@ -0,0 +1,231 @@
+var __defProp = Object.defineProperty;
+var __name = (target, value) => __defProp(target, "name", { value, configurable: true });
+import * as Colors from "@tamagui/colors";
+import { allDarkColors, allLightColors } from "@tamagui/colors";
+import { getVariableValue } from "@tamagui/core";
+import { setColorAlpha } from "./colorUtils";
+import { color } from "./tokens";
+const alternates = [1, 2, 3, 4];
+function createThemesFrom(name, getTheme, props) {
+  const { shift = 0 } = props;
+  const theme = getTheme(0 + shift, props);
+  let themeEntries = [[name, theme]];
+  const altThemes = alternates.map((alt) => [
+    `${name}_alt${alt}`,
+    getTheme(alt + shift, props)
+  ]);
+  const altButtonThemes = alternates.map((_, i) => {
+    const [bName, bTheme] = [altThemes[i][0], (altThemes[i + 1] || altThemes[i])[1]];
+    return [`${bName}_Button`, bTheme];
+  });
+  const darkerTheme = getTheme(Math.max(0, shift + (props.isLight ? 1 : -1)), props);
+  const activeTheme = makeActiveTheme(theme);
+  themeEntries = [
+    ...themeEntries,
+    ...altThemes,
+    ...altButtonThemes,
+    [`${name}_Button`, altThemes[0][1]],
+    [`${name}_darker`, darkerTheme],
+    [`${name}_active`, activeTheme]
+  ];
+  const themes2 = Object.fromEntries(themeEntries);
+  return themes2;
+}
+__name(createThemesFrom, "createThemesFrom");
+const createTheme = /* @__PURE__ */ __name((str = 1, {
+  backgrounds,
+  isLight = true,
+  colors = [...backgrounds].reverse(),
+  offsets: offsetsProp
+}) => {
+  var _a, _b, _c, _d;
+  const offsets = {
+    borderColor: (_b = (_a = offsetsProp == null ? void 0 : offsetsProp.borderColor) != null ? _a : offsetsProp == null ? void 0 : offsetsProp.background) != null ? _b : [0, 0, 0, 0],
+    background: (_c = offsetsProp == null ? void 0 : offsetsProp.background) != null ? _c : [0, 0, 0, 0],
+    color: (_d = offsetsProp == null ? void 0 : offsetsProp.color) != null ? _d : [0, 0, 0, 0]
+  };
+  const darkColors = isLight ? colors : backgrounds;
+  const lighterDir = isLight ? -1 : 1;
+  const darkerDir = -lighterDir;
+  const strongerDir = isLight ? darkerDir : lighterDir;
+  const get = /* @__PURE__ */ __name((arr, index, name = "background") => {
+    return arr[Math.max(0, Math.min(index + (offsets[name][str] || 0), arr.length - 1))];
+  }, "get");
+  const colorTranslucent = setColorAlpha(getVariableValue(get(colors, 0 + str, "color")), 0.5);
+  return {
+    background: get(backgrounds, str),
+    backgroundStronger: get(backgrounds, str + strongerDir),
+    backgroundSoft: get(backgrounds, str + 3),
+    backgroundHover: get(backgrounds, str + lighterDir),
+    backgroundPress: get(backgrounds, str + darkerDir * 1),
+    backgroundFocus: get(backgrounds, str + darkerDir * 2),
+    backgroundTransparent: color.grayA1,
+    borderColor: isLight ? get(colors, 8 - str, "borderColor") : get(backgrounds, 2 + str, "borderColor"),
+    borderColorHover: isLight ? get(colors, 6 - str, "borderColor") : get(backgrounds, 3 + str, "borderColor"),
+    borderColorPress: isLight ? get(colors, 5 - str, "borderColor") : get(backgrounds, 1 + str, "borderColor"),
+    borderColorFocus: isLight ? get(colors, 4 - str, "borderColor") : get(backgrounds, 3 + str, "borderColor"),
+    color: get(colors, 0 + str, "color"),
+    colorHover: get(colors, 1 + str, "color"),
+    colorPress: get(colors, 2 + str, "color"),
+    colorFocus: get(colors, 3 + str, "color"),
+    colorTranslucent,
+    colorMid: colors[Math.floor(colors.length / 2)],
+    shadowColor: isLight ? color.grayA3 : color.grayA8,
+    shadowColorHover: darkColors[!isLight ? 1 : 8],
+    shadowColorPress: darkColors[!isLight ? 1 : 8],
+    shadowColorFocus: darkColors[!isLight ? 1 : 8]
+  };
+}, "createTheme");
+const colorSchemes = [
+  { name: "blue", colors: Colors.blue, darkColors: Colors.blueDark },
+  { name: "gray", colors: Colors.gray, darkColors: Colors.grayDark },
+  { name: "green", colors: Colors.green, darkColors: Colors.greenDark },
+  { name: "indigo", colors: Colors.indigo, darkColors: Colors.indigoDark },
+  { name: "orange", colors: Colors.orange, darkColors: Colors.orangeDark },
+  { name: "pink", colors: Colors.pink, darkColors: Colors.pinkDark },
+  { name: "purple", colors: Colors.purple, darkColors: Colors.purpleDark },
+  { name: "red", colors: Colors.red, darkColors: Colors.redDark },
+  { name: "violet", colors: Colors.violet, darkColors: Colors.violetDark },
+  { name: "yellow", colors: Colors.yellow, darkColors: Colors.yellowDark },
+  { name: "teal", colors: Colors.teal, darkColors: Colors.tealDark },
+  { name: "lime", colors: Colors.lime, darkColors: Colors.limeDark },
+  { name: "brown", colors: Colors.brown, darkColors: Colors.brownDark }
+];
+const lightGradient = [
+  "#fff",
+  "#f4f4f4",
+  color.gray1,
+  color.gray2,
+  color.gray3,
+  color.gray4,
+  color.gray5,
+  color.gray6,
+  color.gray7,
+  color.gray8,
+  color.gray9,
+  color.gray10,
+  color.gray11,
+  color.gray12
+];
+const darkGradient = [
+  "#111111",
+  "#151515",
+  "#191919",
+  "#232323",
+  "#282828",
+  "#323232",
+  "#383838",
+  "#424242",
+  "#494949",
+  "#545454",
+  "#626262",
+  "#777777"
+];
+const lightThemes = createThemesFrom("light", createTheme, {
+  backgrounds: lightGradient,
+  isLight: true
+});
+const darkThemes = createThemesFrom("dark", createTheme, {
+  backgrounds: darkGradient,
+  colors: lightGradient,
+  isLight: false,
+  shift: 1,
+  offsets: {
+    color: [0, 6, 7, 7, 7, 7]
+  }
+});
+const baseThemes = {
+  ...lightThemes,
+  light: {
+    ...allLightColors,
+    ...lightThemes.light
+  },
+  light_active: makeActiveTheme(lightThemes.light),
+  light_Card: lightThemes.light,
+  light_Button: lightThemes.light_alt1,
+  ...darkThemes,
+  dark: {
+    ...allDarkColors,
+    ...darkThemes.dark
+  },
+  dark_active: makeActiveTheme(darkThemes.dark),
+  dark_Card: darkThemes.dark_alt1,
+  dark_Button: darkThemes.dark_alt1
+};
+function makeActiveTheme(theme) {
+  const res = { ...theme };
+  res.backgroundHover = res.background;
+  res.colorHover = res.color;
+  res.backgroundPress = res.background;
+  res.colorPress = res.color;
+  return res;
+}
+__name(makeActiveTheme, "makeActiveTheme");
+const colorThemeEntries = colorSchemes.flatMap(({ name, colors, darkColors }) => {
+  const [altLightThemes, altDarkThemes] = [colors, darkColors].map((colors2, i) => {
+    const isLight = i === 0;
+    const scheme = isLight ? "light" : "dark";
+    const shift = isLight ? 0 : 1;
+    let backgrounds = Object.values(colors2);
+    if (!isLight) {
+      const [_, h, sp, lp] = backgrounds[0].match(/hsl\(([0-9\.]+), ([0-9\.]+)\%, ([0-9\.]+)\%\)/);
+      backgrounds.unshift(`hsl(${h}, ${sp}%, ${parseFloat(lp) / 2}%)`);
+    }
+    const themeWithAlts = createThemesFrom(name, createTheme, {
+      backgrounds,
+      isLight,
+      shift,
+      isBase: false,
+      offsets: {
+        background: isLight ? [1, 1, 1, 0, 0, 0] : null,
+        borderColor: isLight ? [0, 1, 1, 2, 2, -2] : null,
+        color: isLight ? [0, 0, -1, -2, -3, -3, -4] : [-1, -1, -1, -1, -1, -1]
+      }
+    });
+    return Object.entries(themeWithAlts).map(([k, v]) => [`${scheme}_${k}`, v]);
+  });
+  const lightButtonTheme = altLightThemes[0];
+  const darkButtonTheme = altDarkThemes[0];
+  return [
+    ...altLightThemes,
+    [`${lightButtonTheme[0]}_Button`, altLightThemes[2][1]],
+    ...altDarkThemes,
+    [`${darkButtonTheme[0]}_Button`, altDarkThemes[2][1]]
+  ];
+});
+const transparent = {
+  background: "transparent",
+  backgroundSoft: "transparent",
+  backgroundHover: "transparent",
+  backgroundPress: "transparent",
+  backgroundFocus: "transparent",
+  backgroundTransparent: "transparent",
+  shadowColor: "transparent",
+  shadowColorHover: "transparent",
+  shadowColorPress: "transparent",
+  shadowColorFocus: "transparent"
+};
+const dark_outline = {
+  ...baseThemes.dark,
+  borderColor: "#fff",
+  ...transparent
+};
+const light_outline = {
+  ...baseThemes.light,
+  borderColor: "#000",
+  ...transparent
+};
+const colorThemes = Object.fromEntries(colorThemeEntries);
+const allThemes = {
+  ...baseThemes,
+  ...colorThemes,
+  dark_outline,
+  light_outline
+};
+const themes = allThemes;
+export {
+  colorSchemes,
+  darkGradient,
+  lightGradient,
+  themes
+};

package/dist/jsx/tokens.js

@@ -0,0 +1,53 @@
+import { allLightColors, darkColorsPostfixed } from "@tamagui/colors";
+const size = {
+  true: 20,
+  0: 0,
+  "0.5": 2,
+  1: 6,
+  2: 10,
+  3: 15,
+  4: 20,
+  5: 25,
+  6: 30,
+  7: 40,
+  8: 50,
+  9: 65,
+  10: 75,
+  11: 85,
+  12: 100
+};
+const space = {
+  ...size,
+  ...Object.fromEntries(Object.entries(size).map(([k, v]) => [`-${k}`, -v]))
+};
+const zIndex = {
+  0: 0,
+  1: 100,
+  2: 200,
+  3: 300,
+  4: 400,
+  5: 500
+};
+const color = {
+  ...allLightColors,
+  ...darkColorsPostfixed
+};
+const radius = {
+  0: 0,
+  1: 3,
+  2: 5,
+  3: 7,
+  4: 9,
+  5: 10,
+  6: 12,
+  7: 16,
+  8: 20,
+  9: 30
+};
+export {
+  color,
+  radius,
+  size,
+  space,
+  zIndex
+};

package/package.json

@@ -0,0 +1,27 @@
+{
+  "name": "@tamagui/theme-base",
+  "version": "1.0.0-beta.147+6d63af55",
+  "typings": "types",
+  "main": "dist/cjs",
+  "module": "dist/esm",
+  "module:jsx": "dist/jsx",
+  "files": [
+    "types",
+    "dist"
+  ],
+  "scripts": {
+    "build": "tamagui-build",
+    "watch": "tamagui-build --watch",
+    "clean": "tamagui-build clean",
+    "clean:build": "tamagui-build clean:build"
+  },
+  "devDependencies": {
+    "@tamagui/build": "^1.0.0-beta.147+6d63af55",
+    "@tamagui/colors": "^1.0.0-beta.147+6d63af55",
+    "@tamagui/core": "^1.0.0-beta.147+6d63af55"
+  },
+  "publishConfig": {
+    "access": "public"
+  },
+  "gitHead": "6d63af55317e3c878ea0b61995728fa480776ffc"
+}

package/types/colorUtils.d.ts

@@ -0,0 +1,4 @@
+import { Variable } from '@tamagui/core';
+export declare const hexToRGBA: (hex: string, alpha?: number) => string;
+export declare const setColorAlpha: (colorIn: string | Variable, alpha?: number) => string;
+//# sourceMappingURL=colorUtils.d.ts.map

package/types/colorUtils.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"colorUtils.d.ts","sourceRoot":"","sources":["../src/colorUtils.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,QAAQ,EAAoB,MAAM,eAAe,CAAA;AAE1D,eAAO,MAAM,SAAS,QAAS,MAAM,2BAQpC,CAAA;AAED,eAAO,MAAM,aAAa,YAAa,MAAM,GAAG,QAAQ,2BAYvD,CAAA"}