@tamagui/theme-base 1.0.0-beta.222 → 1.0.0-beta.3

package/dist/esm/tokens.js

@@ -1,21 +1,11 @@
+var __defProp = Object.defineProperty;
+var __name = (target, value) => __defProp(target, "name", { value, configurable: true });
 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 sizeKeys = ["true", "0", "0.25", "0.5", "1", "1.5", "2", "2.5", "3", "3.5", "4", "4.5", "5", "5.5", "6", "6.5", "7", "7.5", "8", "9", "10", "11", "12", "13", "14"];
+const getSizeAt = /* @__PURE__ */ __name((index) => index === 0 ? 0 : Math.round(Math.pow(1.6, index)) + Math.floor(3 * index), "getSizeAt");
+const size = Object.fromEntries(sizeKeys.map((key) => {
+  return [key, getSizeAt(key === "true" ? 4 : +key)];
+}));
 const space = {
   ...size,
   ...Object.fromEntries(Object.entries(size).map(([k, v]) => [`-${k}`, -v]))
@@ -46,8 +36,10 @@ const radius = {
 };
 export {
   color,
+  getSizeAt,
   radius,
   size,
+  sizeKeys,
   space,
   zIndex
 };

package/dist/esm/tokens.js.map

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../src/tokens.tsx"],
-  "sourcesContent": ["import { allLightColors, darkColorsPostfixed } from '@tamagui/colors'\n\nexport const size = {\n  true: 20, // for space boolean true\n  0: 0,\n  '0.5': 2,\n  1: 6,\n  2: 10,\n  3: 15,\n  4: 20,\n  5: 25,\n  6: 30,\n  7: 40,\n  8: 50,\n  9: 65,\n  10: 75,\n  11: 85,\n  12: 100,\n} as const\n\ntype Sizes = typeof size\ntype SizeKeys = keyof Sizes\n\nexport const space: {\n  [Key in `-${SizeKeys}` | SizeKeys]: Key extends keyof Sizes ? Sizes[Key] : number\n} = {\n  ...size,\n  ...Object.fromEntries(Object.entries(size).map(([k, v]) => [`-${k}`, -v])),\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 color = {\n  ...allLightColors,\n  ...darkColorsPostfixed,\n}\n\nexport const radius = {\n  0: 0,\n  1: 3,\n  2: 5,\n  3: 7,\n  4: 9,\n  5: 10,\n  6: 12,\n  7: 16,\n  8: 20,\n  9: 30,\n}\n"],
-  "mappings": "AAAA;AAEO,MAAM,OAAO;AAAA,EAClB,MAAM;AAAA,EACN,GAAG;AAAA,EACH,OAAO;AAAA,EACP,GAAG;AAAA,EACH,GAAG;AAAA,EACH,GAAG;AAAA,EACH,GAAG;AAAA,EACH,GAAG;AAAA,EACH,GAAG;AAAA,EACH,GAAG;AAAA,EACH,GAAG;AAAA,EACH,GAAG;AAAA,EACH,IAAI;AAAA,EACJ,IAAI;AAAA,EACJ,IAAI;AACN;AAKO,MAAM,QAET;AAAA,KACC;AAAA,KACA,OAAO,YAAY,OAAO,QAAQ,IAAI,EAAE,IAAI,CAAC,CAAC,GAAG,OAAO,CAAC,IAAI,KAAK,CAAC,CAAC,CAAC,CAAC;AAC3E;AAEO,MAAM,SAAS;AAAA,EACpB,GAAG;AAAA,EACH,GAAG;AAAA,EACH,GAAG;AAAA,EACH,GAAG;AAAA,EACH,GAAG;AAAA,EACH,GAAG;AACL;AAEO,MAAM,QAAQ;AAAA,KAChB;AAAA,KACA;AACL;AAEO,MAAM,SAAS;AAAA,EACpB,GAAG;AAAA,EACH,GAAG;AAAA,EACH,GAAG;AAAA,EACH,GAAG;AAAA,EACH,GAAG;AAAA,EACH,GAAG;AAAA,EACH,GAAG;AAAA,EACH,GAAG;AAAA,EACH,GAAG;AAAA,EACH,GAAG;AACL;",
+  "sourcesContent": ["import { allLightColors, darkColorsPostfixed } from '@tamagui/colors'\n\n// acknowledge you need more granularity at the smaller sizes with .5s\n// prettier-ignore\nexport const sizeKeys = ['true', '0', '0.25', '0.5', '1', '1.5', '2', '2.5', '3', '3.5', '4', '4.5', '5', '5.5', '6', '6.5', '7', '7.5', '8', '9', '10', '11', '12', '13', '14'] as const\n\n// slightly more than double every 2 indices apart\nexport const getSizeAt = (index: number) =>\n  index === 0 ? 0 : Math.round(Math.pow(1.6, index)) + Math.floor(3 * index)\n\nexport const size: {\n  [key in typeof sizeKeys[any]]: number\n} = Object.fromEntries(\n  sizeKeys.map((key) => {\n    return [key, getSizeAt(key === 'true' ? 4 : +key)]\n  })\n) as any\n\ntype Sizes = typeof size\ntype SizeKeys = keyof Sizes\n\nexport const space: {\n  [Key in `-${SizeKeys}` | SizeKeys]: Key extends keyof Sizes ? Sizes[Key] : number\n} = {\n  ...size,\n  ...Object.fromEntries(Object.entries(size).map(([k, v]) => [`-${k}`, -v])),\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 color = {\n  ...allLightColors,\n  ...darkColorsPostfixed,\n}\n\nexport const radius = {\n  0: 0,\n  1: 3,\n  2: 5,\n  3: 7,\n  4: 9,\n  5: 10,\n  6: 12,\n  7: 16,\n  8: 20,\n  9: 30,\n}\n"],
+  "mappings": ";;AAAA;AAIO,MAAM,WAAW,CAAC,QAAQ,KAAK,QAAQ,OAAO,KAAK,OAAO,KAAK,OAAO,KAAK,OAAO,KAAK,OAAO,KAAK,OAAO,KAAK,OAAO,KAAK,OAAO,KAAK,KAAK,MAAM,MAAM,MAAM,MAAM,IAAI;AAGxK,MAAM,YAAY,wBAAC,UACxB,UAAU,IAAI,IAAI,KAAK,MAAM,KAAK,IAAI,KAAK,KAAK,CAAC,IAAI,KAAK,MAAM,IAAI,KAAK,GADlD;AAGlB,MAAM,OAET,OAAO,YACT,SAAS,IAAI,CAAC,QAAQ;AACpB,SAAO,CAAC,KAAK,UAAU,QAAQ,SAAS,IAAI,CAAC,GAAG,CAAC;AACnD,CAAC,CACH;AAKO,MAAM,QAET;AAAA,KACC;AAAA,KACA,OAAO,YAAY,OAAO,QAAQ,IAAI,EAAE,IAAI,CAAC,CAAC,GAAG,OAAO,CAAC,IAAI,KAAK,CAAC,CAAC,CAAC,CAAC;AAC3E;AAEO,MAAM,SAAS;AAAA,EACpB,GAAG;AAAA,EACH,GAAG;AAAA,EACH,GAAG;AAAA,EACH,GAAG;AAAA,EACH,GAAG;AAAA,EACH,GAAG;AACL;AAEO,MAAM,QAAQ;AAAA,KAChB;AAAA,KACA;AACL;AAEO,MAAM,SAAS;AAAA,EACpB,GAAG;AAAA,EACH,GAAG;AAAA,EACH,GAAG;AAAA,EACH,GAAG;AAAA,EACH,GAAG;AAAA,EACH,GAAG;AAAA,EACH,GAAG;AAAA,EACH,GAAG;AAAA,EACH,GAAG;AAAA,EACH,GAAG;AACL;",
   "names": []
 }

package/dist/jsx/themes.js

@@ -35,7 +35,9 @@ __name(createThemesFrom, "createThemesFrom");
 const createTheme = /* @__PURE__ */ __name((str = 1, {
   backgrounds,
   isLight = true,
+  isBase = false,
   colors = [...backgrounds].reverse(),
+  borderColors = isLight ? colors : backgrounds,
   offsets: offsetsProp
 }) => {
   var _a, _b, _c, _d;
@@ -52,7 +54,7 @@ const createTheme = /* @__PURE__ */ __name((str = 1, {
     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 {
+  let theme = {
     background: get(backgrounds, str),
     backgroundStronger: get(backgrounds, str + strongerDir),
     backgroundSoft: get(backgrounds, str + 3),
@@ -60,10 +62,6 @@ const createTheme = /* @__PURE__ */ __name((str = 1, {
     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"),
@@ -73,8 +71,28 @@ const createTheme = /* @__PURE__ */ __name((str = 1, {
     shadowColor: isLight ? color.grayA3 : color.grayA8,
     shadowColorHover: darkColors[!isLight ? 1 : 8],
     shadowColorPress: darkColors[!isLight ? 1 : 8],
-    shadowColorFocus: darkColors[!isLight ? 1 : 8]
+    shadowColorFocus: darkColors[!isLight ? 1 : 8],
+    borderColor: null,
+    borderColorHover: null,
+    borderColorPress: null,
+    borderColorFocus: null
   };
+  if (isBase) {
+    Object.assign(theme, {
+      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")
+    });
+  } else {
+    Object.assign(theme, {
+      borderColor: get(borderColors, 1 + strongerDir, "borderColor"),
+      borderColorHover: get(borderColors, 2 + strongerDir, "borderColor"),
+      borderColorPress: get(borderColors, 3 + strongerDir, "borderColor"),
+      borderColorFocus: get(borderColors, 4 + strongerDir, "borderColor")
+    });
+  }
+  return theme;
 }, "createTheme");
 const colorSchemes = [
   { name: "blue", colors: Colors.blue, darkColors: Colors.blueDark },
@@ -123,15 +141,17 @@ const darkGradient = [
 ];
 const lightThemes = createThemesFrom("light", createTheme, {
   backgrounds: lightGradient,
+  borderColors: lightGradient.slice(2),
   isLight: true
 });
 const darkThemes = createThemesFrom("dark", createTheme, {
   backgrounds: darkGradient,
-  colors: lightGradient,
+  colors: lightGradient.slice(2),
+  isBase: true,
   isLight: false,
   shift: 1,
   offsets: {
-    color: [0, 6, 7, 7, 7, 7]
+    color: [0, 4, 5, 5, 5, 5]
   }
 });
 const baseThemes = {
@@ -142,6 +162,7 @@ const baseThemes = {
   },
   light_active: makeActiveTheme(lightThemes.light),
   light_Card: lightThemes.light,
+  light_DrawerFrame: lightThemes.light_alt1,
   light_Button: lightThemes.light_alt1,
   ...darkThemes,
   dark: {
@@ -150,6 +171,7 @@ const baseThemes = {
   },
   dark_active: makeActiveTheme(darkThemes.dark),
   dark_Card: darkThemes.dark_alt1,
+  dark_DrawerFrame: darkThemes.dark_alt2,
   dark_Button: darkThemes.dark_alt1
 };
 function makeActiveTheme(theme) {
@@ -162,23 +184,31 @@ function makeActiveTheme(theme) {
 }
 __name(makeActiveTheme, "makeActiveTheme");
 const colorThemeEntries = colorSchemes.flatMap(({ name, colors, darkColors }) => {
-  const [altLightThemes, altDarkThemes] = [colors, darkColors].map((colors2, i) => {
+  const [altLightThemes, altDarkThemes] = [
+    { colors: darkColors, backgrounds: colors },
+    { colors, backgrounds: darkColors }
+  ].map((props, i) => {
     const isLight = i === 0;
+    const [backgrounds, colors2] = [
+      Object.values(props.backgrounds),
+      Object.values(props.colors).slice(isLight ? 2 : 2)
+    ];
     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, {
+      colors: colors2,
       backgrounds,
+      borderColors: backgrounds,
       isLight,
       shift,
       isBase: false,
       offsets: {
-        background: isLight ? [1, 1, 1, 0, 0, 0] : null,
-        borderColor: isLight ? [0, 1, 1, 2, 2, -2] : null,
+        background: isLight ? [0, 0, 0, 0, 0, 0] : null,
+        borderColor: isLight ? [3, 3, 3, 3, 2] : null,
         color: isLight ? [0, 0, -1, -2, -3, -3, -4] : [-1, -1, -1, -1, -1, -1]
       }
     });
@@ -189,38 +219,18 @@ const colorThemeEntries = colorSchemes.flatMap(({ name, colors, darkColors }) =>
   return [
     ...altLightThemes,
     [`${lightButtonTheme[0]}_Button`, altLightThemes[2][1]],
+    [`${lightButtonTheme[0]}_Card`, altLightThemes[2][1]],
+    [`${lightButtonTheme[0]}_DrawerFrame`, altLightThemes[2][1]],
     ...altDarkThemes,
-    [`${darkButtonTheme[0]}_Button`, altDarkThemes[2][1]]
+    [`${darkButtonTheme[0]}_Button`, altDarkThemes[2][1]],
+    [`${darkButtonTheme[0]}_Card`, altDarkThemes[2][1]],
+    [`${darkButtonTheme[0]}_DrawerFrame`, 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
+  ...colorThemes
 };
 const themes = allThemes;
 export {

package/dist/jsx/tokens.js

@@ -1,21 +1,11 @@
+var __defProp = Object.defineProperty;
+var __name = (target, value) => __defProp(target, "name", { value, configurable: true });
 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 sizeKeys = ["true", "0", "0.25", "0.5", "1", "1.5", "2", "2.5", "3", "3.5", "4", "4.5", "5", "5.5", "6", "6.5", "7", "7.5", "8", "9", "10", "11", "12", "13", "14"];
+const getSizeAt = /* @__PURE__ */ __name((index) => index === 0 ? 0 : Math.round(Math.pow(1.6, index)) + Math.floor(3 * index), "getSizeAt");
+const size = Object.fromEntries(sizeKeys.map((key) => {
+  return [key, getSizeAt(key === "true" ? 4 : +key)];
+}));
 const space = {
   ...size,
   ...Object.fromEntries(Object.entries(size).map(([k, v]) => [`-${k}`, -v]))
@@ -46,8 +36,10 @@ const radius = {
 };
 export {
   color,
+  getSizeAt,
   radius,
   size,
+  sizeKeys,
   space,
   zIndex
 };

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@tamagui/theme-base",
-  "version": "1.0.0-beta.222+464bca9b",
+  "version": "1.0.0-beta.3",
   "typings": "types",
   "main": "dist/cjs",
   "module": "dist/esm",
@@ -16,12 +16,12 @@
     "clean:build": "tamagui-build clean:build"
   },
   "devDependencies": {
-    "@tamagui/build": "^1.0.0-beta.222+464bca9b",
-    "@tamagui/colors": "^1.0.0-beta.222+464bca9b",
-    "@tamagui/core": "^1.0.0-beta.222+464bca9b"
+    "@tamagui/build": "^1.0.0-beta.2",
+    "@tamagui/colors": "^1.0.0-beta.2",
+    "@tamagui/core": "^1.0.0-beta.2"
   },
   "publishConfig": {
     "access": "public"
   },
-  "gitHead": "464bca9bb632fcd9557a632d8e8dc49db243753c"
+  "gitHead": "a49cc7ea6b93ba384e77a4880ae48ac4a5635c14"
 }