@tamagui/theme-base 1.0.1-beta.48 → 1.0.1-beta.49

package/dist/jsx/themes.js

@@ -1,11 +1,11 @@
 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 { createVariable, getVariableValue } from "@tamagui/core";
 import { setColorAlpha } from "./colorUtils";
-import { color } from "./tokens";
+import { colorTokens, darkColors, lightColors, tokens } from "./tokens";
+const { color } = tokens;
 const alternates = [1, 2, 3, 4];
+const alts = [1, 2, 3];
 function createThemesFrom(name, getTheme, props) {
   const { shift = 0 } = props;
   const theme = getTheme(0 + shift, props);
@@ -39,8 +39,8 @@ function createThemesFrom(name, getTheme, props) {
   });
   themeEntries = [
     ...themeEntries,
-    ...altThemes,
-    ...altButtonThemes,
+    ...altThemes.slice(0, alts.length),
+    ...altButtonThemes.slice(0, alts.length),
     [`${name}_Button`, altThemes2[1][1]],
     [`${name}_DrawerFrame`, altThemes2[1][1]],
     [`${name}_SliderTrack`, altThemes[1][1]],
@@ -74,7 +74,7 @@ const createTheme = /* @__PURE__ */ __name((str = 1, {
     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 darkColors2 = isLight ? colors : backgrounds;
   const lighterDir = isLight ? -1 : 1;
   const darkerDir = -lighterDir;
   const strongerDir = isLight ? darkerDir : lighterDir;
@@ -98,9 +98,9 @@ const createTheme = /* @__PURE__ */ __name((str = 1, {
     colorTranslucent,
     colorMid: (isLight ? colors : backgrounds)[Math.floor(colors.length / 2)],
     shadowColor: isLight ? color.grayA2 : color.grayA8,
-    shadowColorHover: darkColors[!isLight ? 1 : 8],
-    shadowColorPress: darkColors[!isLight ? 1 : 8],
-    shadowColorFocus: darkColors[!isLight ? 1 : 8],
+    shadowColorHover: darkColors2[!isLight ? 1 : 8],
+    shadowColorPress: darkColors2[!isLight ? 1 : 8],
+    shadowColorFocus: darkColors2[!isLight ? 1 : 8],
     borderColor: null,
     borderColorHover: null,
     borderColorPress: null,
@@ -124,59 +124,58 @@ const createTheme = /* @__PURE__ */ __name((str = 1, {
   return theme;
 }, "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"
+  { 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 }
 ];
+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
+  ],
+  dark: [
+    "#111111",
+    "#151515",
+    "#191919",
+    "#232323",
+    "#282828",
+    "#323232",
+    "#383838",
+    "#424242",
+    "#494949",
+    "#545454",
+    "#626262",
+    "#777777"
+  ]
+};
 const lightThemes = createThemesFrom("light", createTheme, {
-  backgrounds: lightGradient,
+  backgrounds: themeColors.light,
   backgroundStrong: "#fafafa",
-  borderColors: lightGradient.slice(2),
+  borderColors: themeColors.light.slice(2),
   isLight: true
 });
 const darkThemes = createThemesFrom("dark", createTheme, {
-  backgrounds: darkGradient,
-  colors: lightGradient.slice(2),
+  backgrounds: themeColors.dark,
+  colors: themeColors.light.slice(2),
   backgroundStrong: "#111",
   isBase: true,
   isLight: false,
@@ -185,10 +184,23 @@ 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 baseThemes = {
   ...lightThemes,
   light: {
-    ...allLightColors,
+    ...lightColors,
     ...lightThemes.light
   },
   light_active: makeActiveTheme(lightThemes.light),
@@ -201,7 +213,7 @@ const baseThemes = {
   light_DrawerFrame: lightThemes.light_alt1,
   ...darkThemes,
   dark: {
-    ...allDarkColors,
+    ...darkColors,
     ...darkThemes.dark
   },
   dark_active: makeActiveTheme(darkThemes.dark),
@@ -222,10 +234,10 @@ function makeActiveTheme(theme) {
   return res;
 }
 __name(makeActiveTheme, "makeActiveTheme");
-const colorThemeEntries = colorSchemes.flatMap(({ name, colors, darkColors }) => {
+const colorThemeEntries = colorSchemes.flatMap(({ name, colors, darkColors: darkColors2 }) => {
   const [altLightThemes, altDarkThemes] = [
-    { colors: darkColors, backgrounds: colors },
-    { colors, backgrounds: darkColors }
+    { colors: darkColors2, backgrounds: colors },
+    { colors, backgrounds: darkColors2 }
   ].map((props, i) => {
     const isLight = i === 0;
     const [backgrounds, colors2] = [
@@ -235,8 +247,13 @@ const colorThemeEntries = colorSchemes.flatMap(({ name, colors, darkColors }) =>
     const scheme = isLight ? "light" : "dark";
     const shift = isLight ? 0 : 1;
     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 [_, 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, {
       colors: colors2,
@@ -262,8 +279,7 @@ const allThemes = {
 };
 const themes = allThemes;
 export {
+  colorNames,
   colorSchemes,
-  darkGradient,
-  lightGradient,
   themes
 };

package/dist/jsx/tokens.js

@@ -1,6 +1,30 @@
 var __defProp = Object.defineProperty;
 var __name = (target, value) => __defProp(target, "name", { value, configurable: true });
-import { allLightColors, darkColorsPostfixed } from "@tamagui/colors";
+import {
+  blue,
+  blueDark,
+  gray,
+  grayA,
+  grayDark,
+  grayDarkA,
+  green,
+  greenDark,
+  orange,
+  orangeDark,
+  pink,
+  pinkDark,
+  purple,
+  purpleDark,
+  red,
+  redDark,
+  teal,
+  tealDark,
+  violet,
+  violetDark,
+  yellow,
+  yellowDark
+} from "@tamagui/colors";
+import { createTokens, createVariables } from "@tamagui/core";
 const sizeKeys = [
   "true",
   "0",
@@ -48,10 +72,68 @@ const zIndex = {
   4: 400,
   5: 500
 };
-const color = {
-  ...allLightColors,
-  ...darkColorsPostfixed
+const colorTokens = createVariables({
+  light: {
+    blue,
+    gray,
+    grayA,
+    green,
+    orange,
+    pink,
+    purple,
+    red,
+    violet,
+    yellow,
+    teal
+  },
+  dark: {
+    blue: blueDark,
+    gray: grayDark,
+    grayA: grayDarkA,
+    green: greenDark,
+    orange: orangeDark,
+    pink: pinkDark,
+    purple: purpleDark,
+    red: redDark,
+    violet: violetDark,
+    yellow: yellowDark,
+    teal: tealDark
+  }
+});
+const darkColors = {
+  ...colorTokens.dark.blue,
+  ...colorTokens.dark.gray,
+  ...colorTokens.dark.grayA,
+  ...colorTokens.dark.green,
+  ...colorTokens.dark.orange,
+  ...colorTokens.dark.pink,
+  ...colorTokens.dark.purple,
+  ...colorTokens.dark.red,
+  ...colorTokens.dark.violet,
+  ...colorTokens.dark.yellow,
+  ...colorTokens.dark.teal
 };
+const lightColors = {
+  ...colorTokens.light.blue,
+  ...colorTokens.light.gray,
+  ...colorTokens.light.grayA,
+  ...colorTokens.light.green,
+  ...colorTokens.light.orange,
+  ...colorTokens.light.pink,
+  ...colorTokens.light.purple,
+  ...colorTokens.light.red,
+  ...colorTokens.light.violet,
+  ...colorTokens.light.yellow,
+  ...colorTokens.light.teal
+};
+const allColors = {
+  ...lightColors,
+  ...darkPostfix(darkColors)
+};
+function darkPostfix(obj) {
+  return Object.fromEntries(Object.entries(obj).map(([k, v]) => [`${k}Dark`, v]));
+}
+__name(darkPostfix, "darkPostfix");
 const radius = {
   0: 0,
   1: 3,
@@ -67,12 +149,16 @@ const radius = {
   11: 42,
   12: 50
 };
-export {
-  color,
-  getSizeAt,
+const tokens = createTokens({
+  color: allColors,
   radius,
-  size,
-  sizeKeys,
+  zIndex,
   space,
-  zIndex
+  size
+});
+export {
+  colorTokens,
+  darkColors,
+  lightColors,
+  tokens
 };

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@tamagui/theme-base",
-  "version": "1.0.1-beta.48",
+  "version": "1.0.1-beta.49",
   "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.48",
-    "@tamagui/core": "^1.0.1-beta.48"
+    "@tamagui/colors": "^1.0.1-beta.49",
+    "@tamagui/core": "^1.0.1-beta.49"
   },
   "devDependencies": {
-    "@tamagui/build": "^1.0.1-beta.48"
+    "@tamagui/build": "^1.0.1-beta.49"
   },
   "publishConfig": {
     "access": "public"