@tamagui/config 2.7.7 → 3.0.0-beta.1093.1

package/src/fonts.ts

@@ -1,96 +1,24 @@
-import { createInterFont } from '@tamagui/font-inter'
-import { createSilkscreenFont } from '@tamagui/font-silkscreen'
+import { createSystemFont } from '@tamagui/create-system-font'
+const isNative = process.env.TAMAGUI_TARGET === 'native'
 
-import { createGenericFont } from './createGenericFont'
+export { createSystemFont }
 
-const silkscreenFont = createSilkscreenFont()
-
-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: -1,
-      10: -1.5,
-      12: -2,
-      14: -3,
-      15: -4,
-    },
-    // for native
-    face: {
-      700: { normal: 'InterBold' },
-      800: { normal: 'InterBold' },
-      900: { normal: 'InterBold' },
-    },
-  },
-  { sizeLineHeight: (size) => Math.round(size * 1.1 + (size < 30 ? 10 : 5)) }
-)
-
-const bodyFont = createInterFont(
-  {
-    weight: {
-      1: '400',
-    },
-  },
-  {
-    sizeSize: (size) => Math.round(size),
-    sizeLineHeight: (size) => Math.round(size * 1.1 + (size >= 12 ? 8 : 4)),
-  }
-)
-
-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: 14,
-      5: 16,
-      6: 18,
-      7: 20,
-      8: 22,
-      9: 30,
-      10: 42,
-      11: 52,
-      12: 62,
-      13: 72,
-      14: 92,
-      15: 114,
-      16: 124,
-    },
-  },
-  {
-    sizeLineHeight: (x) => x * 1.5,
-  }
-)
+// heading line height: native ~120%, web original
+const headingLineHeight = (size: number) =>
+  Math.round(isNative ? size * 1.2 : size * 1.12 + 5)
 
 export const fonts = {
-  heading: headingFont,
-  body: bodyFont,
-  mono: monoFont,
-  silkscreen: silkscreenFont,
+  body: createSystemFont(),
+  heading: createSystemFont({
+    font: {
+      weight: {
+        0: '600',
+        6: '700',
+        9: '800',
+      },
+    },
+    sizeLineHeight: headingLineHeight,
+  }),
 }
+
+export type Fonts = typeof fonts

package/src/media.ts

@@ -1,32 +1,107 @@
-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 },
-  lg: { maxWidth: 1280 },
-  md: { maxWidth: 1020 },
-  sm: { maxWidth: 800 },
-  xs: { maxWidth: 660 },
-  xxs: { maxWidth: 390 },
-  gtXs: { minWidth: 660 + 1 },
-  gtSm: { minWidth: 800 + 1 },
-  gtMd: { minWidth: 1020 + 1 },
-  gtLg: { minWidth: 1280 + 1 },
-  gtXl: { minWidth: 1650 + 1 },
+export const breakpoints = {
+  // for container queries its really helpful to have small sizes
+  100: 100,
+  200: 200,
+
+  xxxs: 260,
+  xxs: 340,
+  xs: 460,
+  sm: 640,
+  md: 768,
+  lg: 1024,
+  xl: 1280,
+  xxl: 1536,
 }
 
-// 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
+const mediaQueryForceNonOverlap = process.env.TAMAGUI_TARGET === 'native' ? 1 : 0.02
+
+export const media = {
+  // always true on native
+  touchable:
+    process.env.TAMAGUI_TARGET === 'native'
+      ? ({ minWidth: 0 } as never)
+      : { pointer: 'coarse' },
+
+  // always false on native (can't hover on touch)
+  hoverable:
+    process.env.TAMAGUI_TARGET === 'native'
+      ? ({ maxWidth: 0 } as never)
+      : { hover: 'hover' },
+
+  // Max-width queries (desktop-first, ordered large-to-small so smaller wins)
+  'max-xxl': { maxWidth: breakpoints.xxl - mediaQueryForceNonOverlap },
+  'max-xl': { maxWidth: breakpoints.xl - mediaQueryForceNonOverlap },
+  'max-lg': { maxWidth: breakpoints.lg - mediaQueryForceNonOverlap },
+  'max-md': { maxWidth: breakpoints.md - mediaQueryForceNonOverlap },
+  'max-sm': { maxWidth: breakpoints.sm - mediaQueryForceNonOverlap },
+  'max-xs': { maxWidth: breakpoints.xs - mediaQueryForceNonOverlap },
+  'max-xxs': { maxWidth: breakpoints.xxs - mediaQueryForceNonOverlap },
+  'max-xxxs': { maxWidth: breakpoints.xxxs - mediaQueryForceNonOverlap },
+
+  // for container queries its really helpful to have small sizes
+  'max-200': { maxWidth: breakpoints['200'] - mediaQueryForceNonOverlap },
+  'max-100': { maxWidth: breakpoints['100'] - mediaQueryForceNonOverlap },
+
+  // Min-width queries (mobile-first)
+  // non-max wins over max though tbh it could go either way
+  xxxs: { minWidth: breakpoints.xxxs },
+  xxs: { minWidth: breakpoints.xxs },
+  xs: { minWidth: breakpoints.xs },
+  sm: { minWidth: breakpoints.sm },
+  md: { minWidth: breakpoints.md },
+  lg: { minWidth: breakpoints.lg },
+  xl: { minWidth: breakpoints.xl },
+  xxl: { minWidth: breakpoints.xxl },
+
+  // Height-based queries LAST so they override width queries when both match
+  // (later in object = higher CSS specificity)
+  // max-height ordered large-to-small so smaller wins (like max-width)
+  'max-height-lg': { maxHeight: breakpoints.lg - mediaQueryForceNonOverlap },
+  'max-height-md': { maxHeight: breakpoints.md - mediaQueryForceNonOverlap },
+  'max-height-sm': { maxHeight: breakpoints.sm - mediaQueryForceNonOverlap },
+  'max-height-xs': { maxHeight: breakpoints.xs - mediaQueryForceNonOverlap },
+  'max-height-xxs': { maxHeight: breakpoints.xxs - mediaQueryForceNonOverlap },
+  'max-height-xxxs': { maxHeight: breakpoints.xxxs - mediaQueryForceNonOverlap },
+
+  'max-height-200': { maxHeight: breakpoints['200'] - mediaQueryForceNonOverlap },
+  'max-height-100': { maxHeight: breakpoints['100'] - mediaQueryForceNonOverlap },
+
+  'height-sm': { minHeight: breakpoints.sm },
+  'height-md': { minHeight: breakpoints.md },
+  'height-lg': { minHeight: breakpoints.lg },
+} as const
+
+export type Media = typeof media
+
 export const mediaQueryDefaultActive = {
-  xl: true,
-  lg: true,
-  md: true,
-  sm: true,
+  touchable: process.env.TAMAGUI_TARGET === 'native',
+  hoverable: process.env.TAMAGUI_TARGET !== 'native',
+  // Max queries
+  'max-xxl': true,
+  'max-xl': true,
+  'max-lg': true,
+  'max-md': true,
+  'max-sm': true,
+  'max-xs': true,
+  'max-xxs': false,
+  'max-xxxs': false,
+  // Min queries
+  xxxs: true,
+  xxs: true,
   xs: true,
-  // false
-  xxs: false,
+  sm: false,
+  md: false,
+  lg: false,
+  xl: false,
+  xxl: false,
+  // Height queries (default: iPhone non-max ~844pt)
+  'max-height-sm': false,
+  'max-height-md': false,
+  'max-height-lg': true,
+  'height-sm': true,
+  'height-md': true,
+  'height-lg': false,
 }

package/src/settings.ts

@@ -0,0 +1,36 @@
+import type { CreateTamaguiProps } from '@tamagui/web'
+import { mediaQueryDefaultActive } from './media'
+
+export const selectionStyles = (theme) =>
+  theme.color5
+    ? {
+        backgroundColor: theme.color5,
+        color: theme.color11,
+      }
+    : null
+
+export const settings = {
+  mediaQueryDefaultActive,
+  defaultFont: 'body',
+  fastSchemeChange: true,
+  shouldAddPrefersColorThemes: true,
+  allowedStyleValues: 'somewhat-strict-web',
+  addThemeClassName: 'html',
+  onlyAllowShorthands: true,
+  styleCompat: 'web',
+} satisfies CreateTamaguiProps['settings']
+
+export type Settings = typeof settings
+
+/**
+ * Named control sizes on the v5 scales. v5 space is a fraction of size, so the
+ * keys step unevenly: space 2 = 7px, 2-5 = 10px, 3 = 13px, 4 = 18px.
+ */
+export const sizes = {
+  default: 'md',
+  xs: { fontSize: '2', paddingX: '2', paddingY: '1-5', radius: '2' },
+  sm: { fontSize: '3', paddingX: '3', paddingY: '2', radius: '3' },
+  md: { fontSize: '4', paddingX: '4', paddingY: '2', radius: '4' },
+  lg: { fontSize: '5', paddingX: '5', paddingY: '2-5', radius: '5' },
+  xl: { fontSize: '6', paddingX: '6', paddingY: '3', radius: '6' },
+} as const

package/src/v5-base.ts

@@ -2,31 +2,19 @@ import { shorthands } from '@tamagui/shorthands/v4' // v4 same as v5
 import type { Shorthands } from '@tamagui/shorthands/v4'
 import { themes, tokens } from '@tamagui/themes/v5'
 import type { V5Themes, V5Tokens } from '@tamagui/themes/v5'
-import type { CreateTamaguiProps } from '@tamagui/web'
 import { fonts } from './v5-fonts'
 import type { V5Fonts } from './v5-fonts'
-import { media, mediaQueryDefaultActive } from './v5-media'
-import type { V5Media } from './v5-media'
+import { media } from './media'
+import type { Media as V5Media } from './media'
+import { selectionStyles, settings, sizes } from './settings'
+import type { Settings as V5Settings } from './settings'
 
 export { shorthands } from '@tamagui/shorthands/v4'
-export { createThemes } from '@tamagui/theme-builder'
+export { sizes } from './settings'
+// static re-exports only, so this compatibility config stays free of the
+// retired v5 theme builder on native.
 export {
-  adjustPalette,
-  adjustPalettes,
-  createV5Theme,
-  defaultChildrenThemes,
-  defaultDarkPalette,
-  defaultLightPalette,
-  hslToString,
-  // helpers
-  interpolateColor,
-  opacify,
-  parseHSL,
   tokens,
-  type AdjustFn,
-  // types
-  type HSL,
-  type PaletteAdjustments,
   type V5Theme,
   type V5ThemeNames,
   type V5Themes,
@@ -34,29 +22,10 @@ export {
 } from '@tamagui/themes/v5'
 export { createSystemFont, fonts } from './v5-fonts'
 export type { V5Fonts } from './v5-fonts'
-export { breakpoints, media, mediaQueryDefaultActive } from './v5-media'
-export type { V5Media } from './v5-media'
-
-export const selectionStyles = (theme) =>
-  theme.color5
-    ? {
-        backgroundColor: theme.color5,
-        color: theme.color11,
-      }
-    : null
-
-export const settings = {
-  mediaQueryDefaultActive,
-  defaultFont: 'body',
-  fastSchemeChange: true,
-  shouldAddPrefersColorThemes: true,
-  allowedStyleValues: 'somewhat-strict-web',
-  addThemeClassName: 'html',
-  onlyAllowShorthands: true,
-  styleCompat: 'web',
-} satisfies CreateTamaguiProps['settings']
-
-export type V5Settings = typeof settings
+export { breakpoints, media, mediaQueryDefaultActive } from './media'
+export type { Media as V5Media } from './media'
+export { selectionStyles, settings } from './settings'
+export type { Settings as V5Settings } from './settings'
 
 export type V5DefaultConfig = {
   media: V5Media
@@ -66,6 +35,7 @@ export type V5DefaultConfig = {
   fonts: V5Fonts
   selectionStyles: typeof selectionStyles
   settings: V5Settings
+  sizes: typeof sizes
 }
 
 // base config without animations - users must provide their own
@@ -75,6 +45,7 @@ export const defaultConfig: V5DefaultConfig = {
   themes,
   tokens,
   fonts,
+  sizes,
   selectionStyles,
   settings,
 }

package/src/v5-fonts.ts

@@ -1,112 +1,42 @@
-import type { FillInFont, GenericFont } from '@tamagui/core'
-import { createFont, getVariableValue } from '@tamagui/core'
-
-const isWeb = process.env.TAMAGUI_TARGET === 'web'
+import { createSystemFont } from '@tamagui/create-system-font'
 const isNative = process.env.TAMAGUI_TARGET === 'native'
 
-// web sizes
-const webSizes = {
-  1: 12,
-  2: 13,
-  3: 14,
-  4: 15,
-  true: 15,
-  5: 16,
-  6: 18,
-  7: 22,
-  8: 26,
-  9: 30,
-  10: 40,
-  11: 46,
-  12: 52,
-  13: 60,
-  14: 70,
-  15: 85,
-  16: 100,
-} as const
-
-// native sizes aligned with iOS HIG (SF Pro)
-// 4/true = body (17pt), 3 = subheadline (15pt), 2 = caption (12pt)
-const nativeSizes = {
-  1: 11,
-  2: 12,
-  3: 15,
-  4: 17,
-  true: 17,
-  5: 20,
-  6: 22,
-  7: 24,
-  8: 28,
-  9: 32,
-  10: 40,
-  11: 46,
-  12: 52,
-  13: 60,
-  14: 70,
-  15: 85,
-  16: 100,
-} as const
-
-const defaultSizes = isNative ? nativeSizes : webSizes
-
-// line height: native per iOS HIG (size + 5), web 150% tapering to ~142% for large sizes
-const defaultLineHeight = (size: number) => {
-  if (isNative) return Math.round(size + 5)
-  // taper from 1.5 at small sizes to ~1.42 at 40px
-  const ratio = 1.5 - Math.max(0, (size - 20) * 0.004)
-  return Math.round(size * ratio)
-}
-
-export const createSystemFont = <A extends GenericFont>({
-  font = {},
-  sizeLineHeight = defaultLineHeight,
-  sizeSize = (size) => Math.round(size),
-}: {
-  font?: Partial<A>
-  sizeLineHeight?: (fontSize: number) => number
-  sizeSize?: (size: number) => number
-} = {}): FillInFont<A, keyof typeof webSizes> => {
-  // merge to allow individual overrides
-  const size = Object.fromEntries(
-    Object.entries({
-      ...defaultSizes,
-      ...font.size,
-    }).map(([k, v]) => [k, sizeSize(+v)])
-  )
-  return createFont({
-    family: isWeb
-      ? '-apple-system, system-ui, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif'
-      : 'System',
-    lineHeight: Object.fromEntries(
-      Object.entries(size).map(([k, v]) => [k, sizeLineHeight(getVariableValue(v))])
-    ),
-    weight: {
-      1: '400',
-    },
-    letterSpacing: {
-      4: 0,
-    },
-    ...(font as any),
-    size,
-  })
-}
+export { createSystemFont }
 
 // heading line height: native ~120%, web original
 const headingLineHeight = (size: number) =>
   Math.round(isNative ? size * 1.2 : size * 1.12 + 5)
 
+// pin the v5 font size + lineHeight scales to exact "Npx" strings. numbers are
+// reserved for the v6 multiplier semantics; px strings mean "exact pixels" and
+// are normalized back to numbers (with a needsPx flag) at token creation, so
+// rendering is identical to the previous numeric config. the numeric type is
+// preserved via cast to avoid widening every font-size consumer.
+const toPxScale = <T extends Record<string, number>>(obj: T): T =>
+  Object.fromEntries(
+    Object.entries(obj).map(([k, v]) => [k, typeof v === 'number' ? `${v}px` : v])
+  ) as unknown as T
+
+const pinFontToPx = <F extends { size: any; lineHeight?: any }>(font: F): F => ({
+  ...font,
+  size: toPxScale(font.size),
+  ...(font.lineHeight ? { lineHeight: toPxScale(font.lineHeight) } : null),
+})
+
 export const fonts = {
-  body: createSystemFont(),
-  heading: createSystemFont({
-    font: {
-      weight: {
-        0: '600',
-        6: '700',
-        9: '800',
+  body: pinFontToPx(createSystemFont()),
+  heading: pinFontToPx(
+    createSystemFont({
+      font: {
+        weight: {
+          0: '600',
+          6: '700',
+          9: '800',
+        },
       },
-    },
-    sizeLineHeight: headingLineHeight,
-  }),
+      sizeLineHeight: headingLineHeight,
+    })
+  ),
 }
 
 export type V5Fonts = typeof fonts

package/src/v5.ts

@@ -1,6 +1,6 @@
 // v5 base - no animations bundled, users import from specific paths:
 //   @tamagui/config/v5-css
-//   @tamagui/config/v5-native
+//   @tamagui/config/v5-rn
 //   @tamagui/config/v5-reanimated
 
 export * from '@tamagui/themes/v5'