@tamagui/theme-base 1.0.0-beta.193 → 1.0.0-beta.2

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,11 +141,13 @@ const darkGradient = [
 ];
 const lightThemes = createThemesFrom("light", createTheme, {
   backgrounds: lightGradient,
+  borderColors: lightGradient.slice(2),
   isLight: true
 });
 const darkThemes = createThemesFrom("dark", createTheme, {
   backgrounds: darkGradient,
   colors: lightGradient.slice(2),
+  isBase: true,
   isLight: false,
   shift: 1,
   offsets: {
@@ -142,7 +162,7 @@ const baseThemes = {
   },
   light_active: makeActiveTheme(lightThemes.light),
   light_Card: lightThemes.light,
-  light_Drawer: lightThemes.light_alt1,
+  light_DrawerFrame: lightThemes.light_alt1,
   light_Button: lightThemes.light_alt1,
   ...darkThemes,
   dark: {
@@ -151,7 +171,7 @@ const baseThemes = {
   },
   dark_active: makeActiveTheme(darkThemes.dark),
   dark_Card: darkThemes.dark_alt1,
-  dark_Drawer: darkThemes.dark_alt2,
+  dark_DrawerFrame: darkThemes.dark_alt2,
   dark_Button: darkThemes.dark_alt1
 };
 function makeActiveTheme(theme) {
@@ -171,7 +191,7 @@ const colorThemeEntries = colorSchemes.flatMap(({ name, colors, darkColors }) =>
     const isLight = i === 0;
     const [backgrounds, colors2] = [
       Object.values(props.backgrounds),
-      Object.values(props.colors).slice(isLight ? 0 : 2)
+      Object.values(props.colors).slice(isLight ? 2 : 2)
     ];
     const scheme = isLight ? "light" : "dark";
     const shift = isLight ? 0 : 1;
@@ -182,12 +202,13 @@ const colorThemeEntries = colorSchemes.flatMap(({ name, colors, darkColors }) =>
     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]
       }
     });
@@ -199,41 +220,17 @@ const colorThemeEntries = colorSchemes.flatMap(({ name, colors, darkColors }) =>
     ...altLightThemes,
     [`${lightButtonTheme[0]}_Button`, altLightThemes[2][1]],
     [`${lightButtonTheme[0]}_Card`, altLightThemes[2][1]],
-    [`${lightButtonTheme[0]}_Drawer`, altLightThemes[2][1]],
+    [`${lightButtonTheme[0]}_DrawerFrame`, altLightThemes[2][1]],
     ...altDarkThemes,
     [`${darkButtonTheme[0]}_Button`, altDarkThemes[2][1]],
     [`${darkButtonTheme[0]}_Card`, altDarkThemes[2][1]],
-    [`${darkButtonTheme[0]}_Drawer`, 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/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@tamagui/theme-base",
-  "version": "1.0.0-beta.193+14c13acd",
+  "version": "1.0.0-beta.2",
   "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.193+14c13acd",
-    "@tamagui/colors": "^1.0.0-beta.193+14c13acd",
-    "@tamagui/core": "^1.0.0-beta.193+14c13acd"
+    "@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": "14c13acd9143e76d975e7a6c311d4a5f3a00bced"
+  "gitHead": "a49cc7ea6b93ba384e77a4880ae48ac4a5635c14"
 }