@tamagui/tamagui-dev-config 1.124.0

package/dist/esm/tamagui.dev.config.mjs

@@ -0,0 +1,78 @@
+import { tokens } from "@tamagui/config/v3";
+import { setupDev } from "@tamagui/core";
+import { shorthands } from "@tamagui/shorthands/v2";
+import { tamaguiThemes } from "@tamagui/themes/v4";
+import { animations } from "./animations.mjs";
+import { bodyFont, cherryBombFont, dmSansHeadingFont, dmSerifDisplayHeadingFont, headingFont, monoFont, munroFont, nohemiFont, silkscreenFont } from "./fonts.mjs";
+import { media, mediaQueryDefaultActive } from "./media.mjs";
+setupDev({
+  visualizer: !0
+});
+const fonts = {
+    heading: headingFont,
+    headingDmSans: dmSansHeadingFont,
+    headingDmSerifDisplay: dmSerifDisplayHeadingFont,
+    headingNohemi: nohemiFont,
+    body: bodyFont,
+    mono: monoFont,
+    silkscreen: silkscreenFont,
+    munro: munroFont,
+    cherryBomb: cherryBombFont
+  },
+  fixTypescript55Bug = {
+    space: tokens.space,
+    size: tokens.size,
+    radius: tokens.radius,
+    zIndex: tokens.zIndex,
+    color: tokens.color
+  },
+  config = {
+    fonts,
+    animations,
+    themes: tamaguiThemes,
+    media,
+    shorthands,
+    tokens: fixTypescript55Bug,
+    settings: {
+      defaultFont: "body",
+      shouldAddPrefersColorThemes: !0,
+      maxDarkLightNesting: 2,
+      themeClassNameOnRoot: !0,
+      disableRootThemeClass: !0,
+      mediaQueryDefaultActive,
+      selectionStyles: theme => ({
+        backgroundColor: theme.color5,
+        color: theme.color11
+      }),
+      allowedStyleValues: "somewhat-strict-web",
+      autocompleteSpecificTokens: "except-special"
+    }
+  };
+Object.assign(config.media, {
+  tiny: {
+    maxWidth: 500
+  },
+  gtTiny: {
+    minWidth: 501
+  },
+  small: {
+    maxWidth: 620
+  },
+  gtSmall: {
+    minWidth: 621
+  },
+  medium: {
+    maxWidth: 780
+  },
+  gtMedium: {
+    minWidth: 781
+  },
+  large: {
+    maxWidth: 900
+  },
+  gtLarge: {
+    minWidth: 901
+  }
+});
+export { config };
+//# sourceMappingURL=tamagui.dev.config.mjs.map

package/dist/esm/tamagui.dev.config.mjs.map

@@ -0,0 +1 @@
+{"version":3,"names":["tokens","setupDev","shorthands","tamaguiThemes","animations","bodyFont","cherryBombFont","dmSansHeadingFont","dmSerifDisplayHeadingFont","headingFont","monoFont","munroFont","nohemiFont","silkscreenFont","media","mediaQueryDefaultActive","visualizer","fonts","heading","headingDmSans","headingDmSerifDisplay","headingNohemi","body","mono","silkscreen","munro","cherryBomb","fixTypescript55Bug","space","size","radius","zIndex","color","config","themes","settings","defaultFont","shouldAddPrefersColorThemes","maxDarkLightNesting","themeClassNameOnRoot","disableRootThemeClass","selectionStyles","theme","backgroundColor","color5","color11","allowedStyleValues","autocompleteSpecificTokens","Object","assign","tiny","maxWidth","gtTiny","minWidth","small","gtSmall","medium","gtMedium","large","gtLarge"],"sources":["../../src/tamagui.dev.config.ts"],"sourcesContent":[null],"mappings":"AAAA,SAASA,MAAA,QAAc;AAEvB,SAASC,QAAA,QAAgB;AACzB,SAASC,UAAA,QAAkB;AAC3B,SAASC,aAAA,QAAqB;AAC9B,SAASC,UAAA,QAAkB;AAC3B,SACEC,QAAA,EACAC,cAAA,EACAC,iBAAA,EACAC,yBAAA,EACAC,WAAA,EACAC,QAAA,EACAC,SAAA,EACAC,UAAA,EACAC,cAAA,QACK;AACP,SAASC,KAAA,EAAOC,uBAAA,QAA+B;AAE/Cd,QAAA,CAAS;EACPe,UAAA,EAAY;AACd,CAAC;AAED,MAAMC,KAAA,GAAQ;IACZC,OAAA,EAAST,WAAA;IACTU,aAAA,EAAeZ,iBAAA;IACfa,qBAAA,EAAuBZ,yBAAA;IACvBa,aAAA,EAAeT,UAAA;IACfU,IAAA,EAAMjB,QAAA;IACNkB,IAAA,EAAMb,QAAA;IACNc,UAAA,EAAYX,cAAA;IACZY,KAAA,EAAOd,SAAA;IACPe,UAAA,EAAYpB;EACd;EAGMqB,kBAAA,GAAqB;IACzBC,KAAA,EAAO5B,MAAA,CAAO4B,KAAA;IACdC,IAAA,EAAM7B,MAAA,CAAO6B,IAAA;IACbC,MAAA,EAAQ9B,MAAA,CAAO8B,MAAA;IACfC,MAAA,EAAQ/B,MAAA,CAAO+B,MAAA;IACfC,KAAA,EAAOhC,MAAA,CAAOgC;EAChB;EAEaC,MAAA,GAAS;IACpBhB,KAAA;IACAb,UAAA;IACA8B,MAAA,EAAQ/B,aAAA;IACRW,KAAA;IACAZ,UAAA;IACAF,MAAA,EAAQ2B,kBAAA;IACRQ,QAAA,EAAU;MACRC,WAAA,EAAa;MACbC,2BAAA,EAA6B;MAC7BC,mBAAA,EAAqB;MACrBC,oBAAA,EAAsB;MACtBC,qBAAA,EAAuB;MACvBzB,uBAAA;MACA0B,eAAA,EAAkBC,KAAA,KAAW;QAC3BC,eAAA,EAAiBD,KAAA,CAAME,MAAA;QACvBZ,KAAA,EAAOU,KAAA,CAAMG;MACf;MACAC,kBAAA,EAAoB;MACpBC,0BAAA,EAA4B;IAC9B;EACF;AAGAC,MAAA,CAAOC,MAAA,CAAOhB,MAAA,CAAOnB,KAAA,EAAO;EAC1BoC,IAAA,EAAM;IAAEC,QAAA,EAAU;EAAI;EACtBC,MAAA,EAAQ;IAAEC,QAAA,EAAU;EAAQ;EAC5BC,KAAA,EAAO;IAAEH,QAAA,EAAU;EAAI;EACvBI,OAAA,EAAS;IAAEF,QAAA,EAAU;EAAQ;EAC7BG,MAAA,EAAQ;IAAEL,QAAA,EAAU;EAAI;EACxBM,QAAA,EAAU;IAAEJ,QAAA,EAAU;EAAQ;EAC9BK,KAAA,EAAO;IAAEP,QAAA,EAAU;EAAI;EACvBQ,OAAA,EAAS;IAAEN,QAAA,EAAU;EAAQ;AAC/B,CAAC","ignoreList":[]}

package/package.json

@@ -0,0 +1,48 @@
+{
+  "name": "@tamagui/tamagui-dev-config",
+  "version": "1.124.0",
+  "sideEffects": false,
+  "source": "src/index.ts",
+  "types": "./src/index.ts",
+  "type": "module",
+  "main": "dist/cjs",
+  "module": "dist/esm",
+  "files": [
+    "src",
+    "types",
+    "dist"
+  ],
+  "exports": {
+    "./package.json": "./package.json",
+    ".": {
+      "types": "./src/index.ts",
+      "import": "./dist/esm/index.mjs",
+      "require": "./dist/cjs/index.cjs",
+      "default": "./dist/cjs/index.native.js"
+    }
+  },
+  "scripts": {
+    "build": "tamagui-build --skip-types --skip-native",
+    "watch": "tamagui-build --skip-types --skip-native --watch",
+    "lint": "biome check src",
+    "lint:fix": "biome check --write src",
+    "clean": "tamagui-build clean",
+    "clean:build": "tamagui-build clean:build"
+  },
+  "dependencies": {
+    "@tamagui/config": "1.124.0",
+    "@tamagui/core": "1.124.0",
+    "@tamagui/shorthands": "1.124.0",
+    "@tamagui/themes": "1.124.0"
+  },
+  "devDependencies": {
+    "@tamagui/build": "1.124.0",
+    "react": "*"
+  },
+  "peerDependencies": {
+    "react": "*"
+  },
+  "publishConfig": {
+    "access": "public"
+  }
+}

package/src/animations.css.ts

@@ -0,0 +1,19 @@
+import { createAnimations } from '@tamagui/animations-css'
+
+const smoothBezier = 'cubic-bezier(0.215, 0.610, 0.355, 1.000)'
+
+export const animationsCSS = createAnimations({
+  '75ms': 'ease-in 75ms',
+  '100ms': 'ease-in 100ms',
+  '200ms': 'ease-in 200ms',
+  bouncy: 'ease-in 200ms',
+  superBouncy: 'ease-in 500ms',
+  lazy: 'ease-in 800ms',
+  superLazy: 'ease-in 1000ms',
+  medium: 'ease-in 300ms',
+  slow: 'ease-in 500ms',
+  quick: `${smoothBezier} 240ms`,
+  quicker: `${smoothBezier} 180ms`,
+  quickest: `${smoothBezier} 90ms`,
+  tooltip: 'ease-in 400ms',
+})

package/src/animations.reanimated.ts

@@ -0,0 +1,59 @@
+import { createAnimations } from '@tamagui/animations-moti'
+
+export const animations = createAnimations({
+  '75ms': {
+    type: 'timing',
+    duration: 75,
+  },
+  '100ms': {
+    type: 'timing',
+    duration: 100,
+  },
+  '200ms': {
+    type: 'timing',
+    duration: 200,
+  },
+  superBouncy: {
+    damping: 5,
+    mass: 0.7,
+    stiffness: 200,
+  },
+  bouncy: {
+    damping: 9,
+    mass: 0.9,
+    stiffness: 150,
+  },
+  medium: {
+    damping: 15,
+    stiffness: 120,
+    mass: 1,
+  },
+  lazy: {
+    damping: 18,
+    stiffness: 50,
+  },
+  slow: {
+    damping: 15,
+    stiffness: 40,
+  },
+  quick: {
+    damping: 20,
+    mass: 1.2,
+    stiffness: 250,
+  },
+  tooltip: {
+    damping: 10,
+    mass: 0.9,
+    stiffness: 100,
+  },
+  quicker: {
+    damping: 20,
+    mass: 0.7,
+    stiffness: 250,
+  },
+  quickest: {
+    damping: 5,
+    mass: 0.2,
+    stiffness: 300,
+  },
+})

package/src/animations.ts

@@ -0,0 +1,83 @@
+import { createAnimations } from '@tamagui/animations-moti'
+
+export const animations = createAnimations({
+  '75ms': {
+    type: 'timing',
+    duration: 75,
+  },
+  '100ms': {
+    type: 'timing',
+    duration: 100,
+  },
+  '200ms': {
+    type: 'timing',
+    duration: 200,
+  },
+  superBouncy: {
+    type: 'spring',
+    damping: 5,
+    mass: 0.7,
+    stiffness: 200,
+  },
+  bouncy: {
+    type: 'spring',
+    damping: 9,
+    mass: 0.9,
+    stiffness: 150,
+  },
+  kindaBouncy: {
+    type: 'spring',
+    damping: 16,
+    mass: 1,
+    stiffness: 25,
+  },
+  superLazy: {
+    type: 'spring',
+    damping: 25,
+    mass: 2,
+    stiffness: 25,
+  },
+  lazy: {
+    type: 'spring',
+    damping: 18,
+    stiffness: 50,
+  },
+  medium: {
+    damping: 16,
+    stiffness: 120,
+    mass: 0.8,
+  },
+  slowest: {
+    type: 'spring',
+    damping: 15,
+    stiffness: 10,
+  },
+  slow: {
+    type: 'spring',
+    damping: 15,
+    stiffness: 60,
+  },
+  quick: {
+    type: 'spring',
+    damping: 20,
+    mass: 1.2,
+    stiffness: 250,
+  },
+  tooltip: {
+    type: 'spring',
+    damping: 10,
+    mass: 0.9,
+    stiffness: 100,
+  },
+  quicker: {
+    type: 'spring',
+    damping: 20,
+    mass: 1,
+    stiffness: 250,
+  },
+  quickest: {
+    damping: 14,
+    mass: 0.1,
+    stiffness: 380,
+  },
+})

package/src/createGenericFont.ts

@@ -0,0 +1,43 @@
+import type { GenericFont } from '@tamagui/core'
+import { createFont } from '@tamagui/core'
+
+const genericFontSizes = {
+  1: 10,
+  2: 11,
+  3: 12,
+  4: 14,
+  5: 15,
+  6: 16,
+  7: 20,
+  8: 22,
+  9: 30,
+  10: 42,
+  11: 52,
+  12: 62,
+  13: 72,
+  14: 92,
+  15: 114,
+  16: 124,
+} as const
+
+export function createGenericFont<A extends GenericFont<keyof typeof genericFontSizes>>(
+  family: string,
+  font: Partial<A> = {},
+  {
+    sizeLineHeight = (val) => val * 1.35,
+  }: {
+    sizeLineHeight?: (val: number) => number
+  } = {}
+): A {
+  const size = font.size || genericFontSizes
+  return createFont({
+    family,
+    size,
+    lineHeight: Object.fromEntries(
+      Object.entries(size).map(([k, v]) => [k, sizeLineHeight(+v)])
+    ) as typeof size,
+    weight: { 0: '300' },
+    letterSpacing: { 4: 0 },
+    ...(font as any),
+  })
+}

package/src/fonts.ts

@@ -0,0 +1,210 @@
+import { createCherryBombFont } from '@tamagui/font-cherry-bomb'
+import { createDmSansFont } from '@tamagui/font-dm-sans'
+import { createDmSerifDisplayFont } from '@tamagui/font-dm-serif-display'
+import { createInterFont } from '@tamagui/font-inter'
+import { createMunroFont } from '@tamagui/font-munro'
+import { createNohemi } from '@tamagui/font-nohemi'
+import { createSilkscreenFont } from '@tamagui/font-silkscreen'
+import { createGenericFont } from './createGenericFont'
+
+export const cherryBombFont = createCherryBombFont({
+  family: '"Cherry Bomb", Arial, sans-serif',
+})
+export const munroFont = createMunroFont()
+export const silkscreenFont = createSilkscreenFont()
+export const headingFont = createInterFont(
+  {
+    size: {
+      5: 13,
+      6: 15,
+      9: 32,
+      10: 44,
+    },
+    transform: {
+      6: 'uppercase',
+      7: 'none',
+    },
+    weight: {
+      6: '400',
+      7: '700',
+    },
+    color: {
+      6: '$colorFocus',
+      7: '$color',
+    },
+    letterSpacing: {
+      5: 2,
+      6: 1,
+      7: 0,
+      8: 0,
+      9: -0.1,
+      10: -0.25,
+      11: -0.5,
+      12: -0.75,
+      14: -1,
+      15: -2,
+    },
+    // for native
+    face: {
+      700: { normal: 'InterBold' },
+      800: { normal: 'InterBold' },
+      900: { normal: 'InterBold' },
+    },
+  },
+  { sizeLineHeight: (size) => Math.round(size * 1.1 + (size < 30 ? 10 : 5)) }
+)
+
+export const dmSansHeadingFont = createDmSansFont(
+  {
+    size: {
+      5: 13,
+      6: 15,
+      9: 32,
+      10: 44,
+    },
+    transform: {
+      6: 'uppercase',
+      7: 'none',
+    },
+    weight: {
+      6: '400',
+      7: '700',
+    },
+    color: {
+      6: '$colorFocus',
+      7: '$color',
+    },
+    letterSpacing: {
+      5: 2,
+      6: 1,
+      7: 0,
+      8: 0,
+      9: 2,
+      11: 3,
+    },
+    face: {},
+  },
+  {
+    sizeLineHeight: (size) => Math.round(size * 1.15),
+    sizeSize: (size) => size * 1.3,
+  }
+)
+
+export const nohemiFont = createNohemi(
+  {
+    size: {
+      5: 13,
+      6: 15,
+      9: 32,
+      10: 44,
+    },
+    transform: {
+      6: 'uppercase',
+      7: 'none',
+    },
+    weight: {
+      6: '400',
+      7: '700',
+    },
+    color: {
+      6: '$colorFocus',
+      7: '$color',
+    },
+    letterSpacing: {
+      5: 3,
+      6: 2,
+      7: 1,
+      9: 2,
+      12: 3,
+    },
+    face: {},
+  },
+  {
+    sizeLineHeight: (size) => Math.round(size * 1.15),
+    sizeSize: (size) => size * 1.3,
+  }
+)
+
+export const dmSerifDisplayHeadingFont = createDmSerifDisplayFont(
+  {
+    size: {
+      5: 13,
+      6: 15,
+      7: 16,
+      8: 22,
+      9: 32,
+      10: 44,
+    },
+    transform: {
+      6: 'uppercase',
+      7: 'none',
+    },
+    weight: {
+      6: '400',
+      7: '700',
+    },
+    color: {
+      6: '$colorFocus',
+      7: '$color',
+    },
+    letterSpacing: {
+      5: 1,
+      6: 1,
+      7: 1,
+      8: 1,
+      9: 1.9,
+      10: 1.75,
+      11: 1.5,
+      12: 1.25,
+      14: 1,
+      15: 0,
+    },
+    face: {},
+  },
+  {
+    sizeLineHeight: (size) => Math.round(size * 1.1),
+    sizeSize: (size) => size * 1.55,
+  }
+)
+
+export const bodyFont = createInterFont(
+  {
+    weight: {
+      1: '400',
+    },
+  },
+  {
+    sizeSize: (size) => Math.round(size),
+    sizeLineHeight: (size) => Math.round(size * 1.2 + (size >= 20 ? 12 : 8)),
+  }
+)
+
+export const monoFont = createGenericFont(
+  `"ui-monospace", "SFMono-Regular", "SF Mono", Menlo, Consolas, "Liberation Mono", monospace`,
+  {
+    weight: {
+      1: '500',
+    },
+    size: {
+      1: 11,
+      2: 12,
+      3: 13,
+      4: 13,
+      5: 14,
+      6: 16,
+      7: 18,
+      8: 20,
+      9: 24,
+      10: 32,
+      11: 46,
+      12: 62,
+      13: 72,
+      14: 92,
+      15: 114,
+      16: 124,
+    },
+  },
+  {
+    sizeLineHeight: (x) => x * 1.5,
+  }
+)

package/src/index.ts

@@ -0,0 +1,4 @@
+export * from './tamagui.dev.config'
+export * from './animations.css'
+export * from './animations'
+export * from './media'

package/src/media.ts

@@ -0,0 +1,36 @@
+export const demoMedia = [500, 620, 780, 900]
+export const widths = [660, 800, 1020, 1280]
+
+// note order is important!
+// earlier defined = less important
+
+export const media = {
+  // for site
+  xl: { maxWidth: 1650 },
+  // between lg and xl - for studio usage
+  lg_xl: { maxWidth: 1400 },
+  lg: { maxWidth: 1280 },
+  md: { maxWidth: 1020 },
+  sm: { maxWidth: 800 },
+  xs: { maxWidth: 660 },
+  xxs: { maxWidth: 390 },
+  gtXxs: { minWidth: 390 + 1 },
+  gtXs: { minWidth: 660 + 1 },
+  gtSm: { minWidth: 800 + 1 },
+  gtMd: { minWidth: 1020 + 1 },
+  gtLg: { minWidth: 1280 + 1 },
+  gtXl: { minWidth: 1650 + 1 },
+  pointerFine: { pointer: 'fine' },
+} as const
+
+// note all the non "gt" ones should be true to start to match mobile-first
+// were aiming for "xs" to be the default to "gtXs" true too
+export const mediaQueryDefaultActive = {
+  xl: true,
+  lg: true,
+  md: true,
+  sm: true,
+  xs: true,
+  // false
+  xxs: false,
+}

package/src/tamagui.dev.config.ts

@@ -0,0 +1,78 @@
+import { tokens } from '@tamagui/config/v3'
+import type { CreateTamaguiProps } from '@tamagui/core'
+import { setupDev } from '@tamagui/core'
+import { shorthands } from '@tamagui/shorthands/v2'
+import { tamaguiThemes } from '@tamagui/themes/v4'
+import { animations } from './animations'
+import {
+  bodyFont,
+  cherryBombFont,
+  dmSansHeadingFont,
+  dmSerifDisplayHeadingFont,
+  headingFont,
+  monoFont,
+  munroFont,
+  nohemiFont,
+  silkscreenFont,
+} from './fonts'
+import { media, mediaQueryDefaultActive } from './media'
+
+setupDev({
+  visualizer: true,
+})
+
+const fonts = {
+  heading: headingFont,
+  headingDmSans: dmSansHeadingFont,
+  headingDmSerifDisplay: dmSerifDisplayHeadingFont,
+  headingNohemi: nohemiFont,
+  body: bodyFont,
+  mono: monoFont,
+  silkscreen: silkscreenFont,
+  munro: munroFont,
+  cherryBomb: cherryBombFont,
+}
+
+// for some reason just re-defining these fixes a bug where negative space tokens were dropped
+const fixTypescript55Bug = {
+  space: tokens.space,
+  size: tokens.size,
+  radius: tokens.radius,
+  zIndex: tokens.zIndex,
+  color: tokens.color,
+}
+
+export const config = {
+  fonts,
+  animations,
+  themes: tamaguiThemes,
+  media,
+  shorthands,
+  tokens: fixTypescript55Bug,
+  settings: {
+    defaultFont: 'body',
+    shouldAddPrefersColorThemes: true,
+    maxDarkLightNesting: 2,
+    themeClassNameOnRoot: true,
+    disableRootThemeClass: true,
+    mediaQueryDefaultActive,
+    selectionStyles: (theme) => ({
+      backgroundColor: theme.color5,
+      color: theme.color11,
+    }),
+    allowedStyleValues: 'somewhat-strict-web',
+    autocompleteSpecificTokens: 'except-special',
+  },
+} satisfies CreateTamaguiProps
+
+// for site responsive demo, but we want no types
+Object.assign(config.media, {
+  tiny: { maxWidth: 500 },
+  gtTiny: { minWidth: 500 + 1 },
+  small: { maxWidth: 620 },
+  gtSmall: { minWidth: 620 + 1 },
+  medium: { maxWidth: 780 },
+  gtMedium: { minWidth: 780 + 1 },
+  large: { maxWidth: 900 },
+  gtLarge: { minWidth: 900 + 1 },
+})