Create tamagui-config package (#813)

packages/config-tamagui/package.json

@@ -0,0 +1,33 @@
+{
+  "name": "@helixbridge/tamagui-config",
+  "version": "0.0.0",
+  "private": true,
+  "sideEffects": [
+    "*.css"
+  ],
+  "license": "MIT",
+  "types": "./src",
+  "main": "src/index.ts",
+  "files": [
+    "types",
+    "dist"
+  ],
+  "scripts": {
+    "clean": "rm -rf node_modules .turbo dist",
+    "build": "tamagui-build --skip-types",
+    "watch": "tamagui-build --skip-types --watch"
+  },
+  "dependencies": {
+    "@babel/preset-env": "^7.1.6",
+    "@tamagui/animations-react-native": "^1.110.1",
+    "@tamagui/config": "^1.110.1",
+    "@tamagui/font-inter": "^1.110.1",
+    "@tamagui/react-native-media-driver": "^1.110.1",
+    "@tamagui/shorthands": "^1.110.1",
+    "@tamagui/themes": "^1.110.1",
+    "tamagui": "^1.110.1"
+  },
+  "devDependencies": {
+    "@tamagui/build": "^1.110.1"
+  }
+}

packages/config-tamagui/src/index.ts

@@ -0,0 +1 @@
+export * from "./tamagui.config";

packages/config-tamagui/src/tamagui.config.ts

@@ -0,0 +1,93 @@
+import { createTamagui } from "tamagui";
+import { createInterFont } from "@tamagui/font-inter";
+import { shorthands } from "@tamagui/shorthands";
+import { tokens, themes } from "@tamagui/config/v3";
+import { createMedia } from "@tamagui/react-native-media-driver";
+
+// import { animations } from '@my/ui/src/animations'
+
+const headingFont = createInterFont({
+  size: {
+    6: 15,
+  },
+  transform: {
+    6: "uppercase",
+    7: "none",
+  },
+  weight: {
+    6: "400",
+    7: "700",
+  },
+  color: {
+    6: "$colorFocus",
+    7: "$color",
+  },
+  letterSpacing: {
+    5: 2,
+    6: 1,
+    7: 0,
+    8: -1,
+    9: -2,
+    10: -3,
+    12: -4,
+    14: -5,
+    15: -6,
+  },
+  face: {
+    700: { normal: "InterBold" },
+  },
+});
+
+const bodyFont = createInterFont(
+  {
+    face: {
+      700: { normal: "InterBold" },
+    },
+  },
+  {
+    sizeSize: (size) => Math.round(size * 1.1),
+    sizeLineHeight: (size) => Math.round(size * 1.1 + (size > 20 ? 10 : 10)),
+  },
+);
+
+export const config = createTamagui({
+  defaultFont: "body",
+  // animations,
+  shouldAddPrefersColorThemes: true,
+  themeClassNameOnRoot: true,
+
+  // highly recommended to turn this on if you are using shorthands
+  // to avoid having multiple valid style keys that do the same thing
+  // we leave it off by default because it can be confusing as you onboard.
+  onlyAllowShorthands: false,
+  shorthands,
+
+  fonts: {
+    body: bodyFont,
+    heading: headingFont,
+  },
+  settings: {
+    allowedStyleValues: "somewhat-strict",
+  },
+  themes,
+  tokens,
+  media: createMedia({
+    xs: { maxWidth: 660 },
+    sm: { maxWidth: 800 },
+    md: { maxWidth: 1020 },
+    lg: { maxWidth: 1280 },
+    xl: { maxWidth: 1420 },
+    xxl: { maxWidth: 1600 },
+    gtXs: { minWidth: 660 + 1 },
+    gtSm: { minWidth: 800 + 1 },
+    gtMd: { minWidth: 1020 + 1 },
+    gtLg: { minWidth: 1280 + 1 },
+    short: { maxHeight: 820 },
+    tall: { minHeight: 820 },
+    hoverNone: { hover: "none" },
+    pointerCoarse: { pointer: "coarse" },
+  }),
+});
+
+// for the compiler to find it
+export default config;