@tamagui/theme-base 1.0.1-beta.54 → 1.0.1-beta.57

package/dist/jsx/themes.js

@@ -1,8 +1,8 @@
 var __defProp = Object.defineProperty;
 var __name = (target, value) => __defProp(target, "name", { value, configurable: true });
-import { createVariable, getVariableValue } from "@tamagui/core";
+import { createTheme, getVariableValue } from "@tamagui/core";
 import { setColorAlpha } from "./colorUtils";
-import { colorTokens, darkColors, lightColors, tokens } from "./tokens";
+import { darkColors, lightColors, tokens } from "./tokens";
 const { color } = tokens;
 const alternates = [1, 2, 3, 4];
 const alts = [1, 2, 3];
@@ -12,7 +12,7 @@ function createThemesFrom(name, getTheme, props) {
   let themeEntries = [[name, theme]];
   const altThemes = alternates.map((alt) => [
     `${name}_alt${alt}`,
-    getTheme(alt + (props.isLight ? 1 : 0) + shift, props)
+    getTheme(alt + (props.isLight ? 0 : 0) + shift, props)
   ]);
   const altThemes2 = alternates.map((alt) => [
     `${name}_alt${alt}`,
@@ -59,7 +59,7 @@ function createThemesFrom(name, getTheme, props) {
   return themes2;
 }
 __name(createThemesFrom, "createThemesFrom");
-const createTheme = /* @__PURE__ */ __name((str = 1, {
+const themeCreator = /* @__PURE__ */ __name((str = 1, {
   backgrounds,
   isLight = true,
   isBase = false,
@@ -90,14 +90,14 @@ const createTheme = /* @__PURE__ */ __name((str = 1, {
     backgroundHover: get(backgrounds, str + lighterDir),
     backgroundPress: get(backgrounds, str + darkerDir),
     backgroundFocus: get(backgrounds, str + darkerDir * 2),
-    backgroundTransparent: color.grayA1,
+    backgroundTransparent: color.grayA1Light,
     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: (isLight ? colors : backgrounds)[Math.floor(colors.length / 2)],
-    shadowColor: isLight ? color.grayA2 : color.grayA8,
+    shadowColor: isLight ? color.grayA2Light : color.grayA8Light,
     shadowColorHover: darkColors2[!isLight ? 1 : 8],
     shadowColorPress: darkColors2[!isLight ? 1 : 8],
     shadowColorFocus: darkColors2[!isLight ? 1 : 8],
@@ -122,35 +122,23 @@ const createTheme = /* @__PURE__ */ __name((str = 1, {
     });
   }
   return theme;
-}, "createTheme");
-const colorSchemes = [
-  { name: "blue", colors: colorTokens.light.blue, darkColors: colorTokens.dark.blue },
-  { name: "gray", colors: colorTokens.light.gray, darkColors: colorTokens.dark.gray },
-  { name: "green", colors: colorTokens.light.green, darkColors: colorTokens.dark.green },
-  { name: "orange", colors: colorTokens.light.orange, darkColors: colorTokens.dark.orange },
-  { name: "pink", colors: colorTokens.light.pink, darkColors: colorTokens.dark.pink },
-  { name: "purple", colors: colorTokens.light.purple, darkColors: colorTokens.dark.purple },
-  { name: "red", colors: colorTokens.light.red, darkColors: colorTokens.dark.red },
-  { name: "violet", colors: colorTokens.light.violet, darkColors: colorTokens.dark.violet },
-  { name: "yellow", colors: colorTokens.light.yellow, darkColors: colorTokens.dark.yellow },
-  { name: "teal", colors: colorTokens.light.teal, darkColors: colorTokens.dark.teal }
-];
+}, "themeCreator");
 const themeColors = {
   light: [
     "#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
+    color.gray1Light,
+    color.gray2Light,
+    color.gray3Light,
+    color.gray4Light,
+    color.gray5Light,
+    color.gray6Light,
+    color.gray7Light,
+    color.gray8Light,
+    color.gray9Light,
+    color.gray10Light,
+    color.gray11Light,
+    color.gray12Light
   ],
   dark: [
     "#111111",
@@ -167,13 +155,13 @@ const themeColors = {
     "#777777"
   ]
 };
-const lightThemes = createThemesFrom("light", createTheme, {
+const lightThemes = createThemesFrom("light", themeCreator, {
   backgrounds: themeColors.light,
   backgroundStrong: "#fafafa",
   borderColors: themeColors.light.slice(2),
   isLight: true
 });
-const darkThemes = createThemesFrom("dark", createTheme, {
+const darkThemes = createThemesFrom("dark", themeCreator, {
   backgrounds: themeColors.dark,
   colors: themeColors.light.slice(2),
   backgroundStrong: "#111",
@@ -184,25 +172,17 @@ const darkThemes = createThemesFrom("dark", createTheme, {
     color: [0, 4, 5, 5, 5, 5]
   }
 });
-const colorNames = [
-  "blue",
-  "gray",
-  "green",
-  "indigo",
-  "orange",
-  "pink",
-  "purple",
-  "red",
-  "violet",
-  "yellow",
-  "teal"
-];
+const light = createTheme({
+  ...lightColors,
+  ...lightThemes.light
+});
+const dark = createTheme({
+  ...darkColors,
+  ...darkThemes.dark
+});
 const baseThemes = {
   ...lightThemes,
-  light: {
-    ...lightColors,
-    ...lightThemes.light
-  },
+  light,
   light_active: makeActiveTheme(lightThemes.light),
   light_Card: lightThemes.light,
   light_Button: lightThemes.light,
@@ -212,10 +192,7 @@ const baseThemes = {
   light_SwitchThumb: lightThemes.light_alt1,
   light_DrawerFrame: lightThemes.light_alt1,
   ...darkThemes,
-  dark: {
-    ...darkColors,
-    ...darkThemes.dark
-  },
+  dark,
   dark_active: makeActiveTheme(darkThemes.dark),
   dark_Card: darkThemes.dark,
   dark_DrawerFrame: darkThemes.dark_alt1,
@@ -234,28 +211,48 @@ function makeActiveTheme(theme) {
   return res;
 }
 __name(makeActiveTheme, "makeActiveTheme");
+const darkEntries = Object.entries(dark);
+const lightEntries = Object.entries(light);
+function findColors(prefix, dark2 = false) {
+  return Object.fromEntries((dark2 ? darkEntries : lightEntries).filter(([k]) => k.startsWith(prefix)));
+}
+__name(findColors, "findColors");
+const colorSchemes = [
+  { name: "blue", colors: findColors("blue"), darkColors: findColors("blue", true) },
+  { name: "gray", colors: findColors("gray"), darkColors: findColors("gray", true) },
+  { name: "green", colors: findColors("green"), darkColors: findColors("green", true) },
+  { name: "orange", colors: findColors("orange"), darkColors: findColors("orange", true) },
+  { name: "pink", colors: findColors("pink"), darkColors: findColors("pink", true) },
+  { name: "purple", colors: findColors("purple"), darkColors: findColors("purple", true) },
+  { name: "red", colors: findColors("red"), darkColors: findColors("red", true) },
+  { name: "yellow", colors: findColors("yellow"), darkColors: findColors("yellow", true) },
+  { name: "teal", colors: findColors("teal"), darkColors: findColors("teal", true) }
+];
+const colorNames = [
+  "blue",
+  "gray",
+  "green",
+  "orange",
+  "pink",
+  "purple",
+  "red",
+  "yellow",
+  "teal"
+];
 const colorThemeEntries = colorSchemes.flatMap(({ name, colors, darkColors: darkColors2 }) => {
   const [altLightThemes, altDarkThemes] = [
     { colors: darkColors2, backgrounds: colors },
     { colors, backgrounds: darkColors2 }
   ].map((props, i) => {
     const isLight = i === 0;
+    const colorsBase = Object.values(props.colors).slice(2);
     const [backgrounds, colors2] = [
       Object.values(props.backgrounds),
-      Object.values(props.colors).slice(isLight ? 2 : 2)
+      isLight ? colorsBase : [colorsBase[0], "#ccc", ...colorsBase.slice(1)]
     ];
     const scheme = isLight ? "light" : "dark";
     const shift = isLight ? 0 : 1;
-    if (!isLight) {
-      const [_, h, sp, lp] = backgrounds[0].val.match(/hsl\(([0-9\.]+), ([0-9\.]+)\%, ([0-9\.]+)\%\)/);
-      const key = backgrounds[0].key.replace("1", "0");
-      backgrounds.unshift(createVariable({
-        key,
-        name: key,
-        val: `hsl(${h}, ${sp}%, ${parseFloat(lp) / 2}%)`
-      }));
-    }
-    const themeWithAlts = createThemesFrom(name, createTheme, {
+    const themeWithAlts = createThemesFrom(name, themeCreator, {
       colors: colors2,
       backgrounds,
       borderColors: backgrounds,
@@ -263,7 +260,7 @@ const colorThemeEntries = colorSchemes.flatMap(({ name, colors, darkColors: dark
       shift,
       isBase: false,
       offsets: {
-        background: isLight ? [1, 1, 1, 1, 1, 1] : null,
+        background: isLight ? [2, 2, 2, 2, 2, 2] : null,
         borderColor: isLight ? [2, 2, 2, 3, 2] : null,
         color: isLight ? [0, 0, -1, -2, -3, -3, -4] : [-1, -1, -1, -1, -1, -1]
       }

package/dist/jsx/tokens.js

@@ -24,41 +24,47 @@ import {
   yellow,
   yellowDark
 } from "@tamagui/colors";
-import { createTokens, createVariables } from "@tamagui/core";
-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",
-  "8.5",
-  "9",
-  "9.5",
-  "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 spaces = Object.entries(size).map(([k, v]) => [k, Math.round(v * 0.75)]);
+import { createTokens } from "@tamagui/core";
+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,
+  5.5: 59,
+  6: 64,
+  6.5: 69,
+  7: 74,
+  7.6: 79,
+  8: 84,
+  8.5: 89,
+  9: 94,
+  9.5: 99,
+  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]) => [
+  k,
+  Math.max(0, v <= 16 ? Math.round(v * 0.333) : Math.floor(v * 0.7 - 12))
+]);
 const spacesNegative = spaces.map(([k, v]) => [`-${k}`, -v]);
 const space = {
   ...Object.fromEntries(spaces),
@@ -72,7 +78,7 @@ const zIndex = {
   4: 400,
   5: 500
 };
-const colorTokens = createVariables({
+const colorTokens = {
   light: {
     blue,
     gray,
@@ -99,7 +105,7 @@ const colorTokens = createVariables({
     yellow: yellowDark,
     teal: tealDark
   }
-});
+};
 const darkColors = {
   ...colorTokens.dark.blue,
   ...colorTokens.dark.gray,
@@ -127,13 +133,13 @@ const lightColors = {
   ...colorTokens.light.teal
 };
 const allColors = {
-  ...lightColors,
-  ...darkPostfix(darkColors)
+  ...postfixObjKeys(lightColors, "Light"),
+  ...postfixObjKeys(darkColors, "Dark")
 };
-function darkPostfix(obj) {
-  return Object.fromEntries(Object.entries(obj).map(([k, v]) => [`${k}Dark`, v]));
+function postfixObjKeys(obj, postfix) {
+  return Object.fromEntries(Object.entries(obj).map(([k, v]) => [`${k}${postfix}`, v]));
 }
-__name(darkPostfix, "darkPostfix");
+__name(postfixObjKeys, "postfixObjKeys");
 const radius = {
   0: 0,
   1: 3,
@@ -157,7 +163,6 @@ const tokens = createTokens({
   size
 });
 export {
-  colorTokens,
   darkColors,
   lightColors,
   tokens

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@tamagui/theme-base",
-  "version": "1.0.1-beta.54",
+  "version": "1.0.1-beta.57",
   "types": "./types/index.d.ts",
   "main": "dist/cjs",
   "module": "dist/esm",
@@ -16,11 +16,11 @@
     "clean:build": "tamagui-build clean:build"
   },
   "dependencies": {
-    "@tamagui/colors": "^1.0.1-beta.54",
-    "@tamagui/core": "^1.0.1-beta.54"
+    "@tamagui/colors": "^1.0.1-beta.57",
+    "@tamagui/core": "^1.0.1-beta.57"
   },
   "devDependencies": {
-    "@tamagui/build": "^1.0.1-beta.54"
+    "@tamagui/build": "^1.0.1-beta.57"
   },
   "publishConfig": {
     "access": "public"