@tamagui/theme-base 1.0.0-beta.200 → 1.0.0-beta.204

package/dist/jsx/themes.js

@@ -1,10 +1,10 @@
 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 { allDarkColors, allLightColors } from "./colors";
 import { setColorAlpha } from "./colorUtils";
-import { tokens } from "./tokens";
+import { color } from "./tokens";
 const alternates = [1, 2, 3, 4];
 function createThemesFrom(name, getTheme, props) {
   const { shift = 0 } = props;
@@ -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,29 +54,45 @@ 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),
     backgroundHover: get(backgrounds, str + lighterDir),
     backgroundPress: get(backgrounds, str + darkerDir * 1),
     backgroundFocus: get(backgrounds, str + darkerDir * 2),
-    backgroundTransparent: tokens.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"),
+    backgroundTransparent: color.grayA1,
     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 ? tokens.color.grayA3 : tokens.color.grayA8,
+    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 },
@@ -94,44 +112,46 @@ const colorSchemes = [
 const lightGradient = [
   "#fff",
   "#f4f4f4",
-  tokens.color.gray1,
-  tokens.color.gray2,
-  tokens.color.gray3,
-  tokens.color.gray4,
-  tokens.color.gray5,
-  tokens.color.gray6,
-  tokens.color.gray7,
-  tokens.color.gray8,
-  tokens.color.gray9,
-  tokens.color.gray10,
-  tokens.color.gray11,
-  tokens.color.gray12
+  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 = [
-  "#0f0f0f",
   "#111111",
-  "#141414",
+  "#151515",
   "#191919",
-  "#242424",
-  "#292929",
+  "#232323",
+  "#282828",
   "#323232",
   "#383838",
   "#424242",
   "#494949",
   "#545454",
-  "#626262"
+  "#626262",
+  "#777777"
 ];
 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,63 +1,45 @@
-import { createTokens } from "@tamagui/core";
-import { allLightColors, darkColorsPostfixed } from "./colors";
-import { firaFont } from "./firaFont";
-import { interFont } from "./interFont";
-import { silkscreenFont } from "./silkscreenFont";
-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
-};
+var __defProp = Object.defineProperty;
+var __name = (target, value) => __defProp(target, "name", { value, configurable: true });
+import { allLightColors, darkColorsPostfixed } from "@tamagui/colors";
+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]))
 };
-const tokens = createTokens({
+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,
+  getSizeAt,
+  radius,
   size,
+  sizeKeys,
   space,
-  font: {
-    title: interFont,
-    body: interFont,
-    mono: firaFont,
-    silkscreen: silkscreenFont
-  },
-  zIndex: {
-    0: 0,
-    1: 100,
-    2: 200,
-    3: 300,
-    4: 400,
-    5: 500
-  },
-  color: {
-    ...allLightColors,
-    ...darkColorsPostfixed
-  },
-  radius: {
-    0: 0,
-    1: 3,
-    2: 5,
-    3: 7,
-    4: 9,
-    5: 10,
-    6: 12,
-    7: 16,
-    8: 20,
-    9: 30
-  }
-});
-export {
-  tokens
+  zIndex
 };

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@tamagui/theme-base",
-  "version": "1.0.0-beta.200+9591831d",
+  "version": "1.0.0-beta.204+322b9fd1",
   "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.200+9591831d",
-    "@tamagui/colors": "^1.0.0-beta.200+9591831d",
-    "@tamagui/core": "^1.0.0-beta.200+9591831d"
+    "@tamagui/build": "^1.0.0-beta.204+322b9fd1",
+    "@tamagui/colors": "^1.0.0-beta.204+322b9fd1",
+    "@tamagui/core": "^1.0.0-beta.204+322b9fd1"
   },
   "publishConfig": {
     "access": "public"
   },
-  "gitHead": "9591831d7d4a58cc4e01846e68a0d3324570b5c8"
+  "gitHead": "322b9fd15b9cfbe9b671390a3b4e2562addd57fd"
 }

package/types/index.d.ts

@@ -1,4 +1,4 @@
 export * from './themes';
 export * from './tokens';
-export * from './colors';
+export * from '@tamagui/colors';
 //# sourceMappingURL=index.d.ts.map

package/types/index.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../src/index.tsx"],"names":[],"mappings":"AAAA,cAAc,UAAU,CAAA;AACxB,cAAc,UAAU,CAAA;AACxB,cAAc,UAAU,CAAA"}
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../src/index.tsx"],"names":[],"mappings":"AAAA,cAAc,UAAU,CAAA;AACxB,cAAc,UAAU,CAAA;AACxB,cAAc,iBAAiB,CAAA"}