@tamagui/config 2.7.7 → 3.0.0-beta.1097.1

package/src/v6-base.ts

@@ -0,0 +1,277 @@
+// the aligned v6 base: Tailwind-aligned shorthands, scales, fonts, media and settings.
+// colors and themes are deliberately separate so createV6Config can accept any pack.
+import { shorthands } from '@tamagui/shorthands/v6'
+import type { CreateTamaguiProps } from '@tamagui/web'
+import { fonts as systemFonts } from './fonts'
+import { media } from './media'
+import { selectionStyles, settings as baseSettings } from './settings'
+import {
+  tailwindFontSize,
+  tailwindLineHeight,
+  tailwindRadius,
+  tailwindSize,
+  tailwindSpace,
+} from './v6-tailwind-scales.generated'
+import {
+  v6RemovedThemeNames,
+  v6ThemeNameReplacements,
+} from '@tamagui/style-grammar/v6-themes'
+
+export { shorthands }
+export { createSystemFont } from './fonts'
+export { breakpoints, media, mediaQueryDefaultActive } from './media'
+export { selectionStyles }
+export { tailwindSource } from './v6-tailwind-scales.generated'
+export { v6RemovedThemeNames, v6ThemeNameReplacements }
+export { toV6Themes, type V6Theme, type V6Themes } from './v6-themes'
+// space and size deliberately remain separate configured domains even though their default
+// values coincide. z-index is literal, so its identity scale is not configured as tokens.
+/**
+ * Tailwind's `--container-*` scale, which is width-only by design: `max-w-3xl` is a
+ * utility and `h-3xl` is not. It is spread into the width/inline-size domains below
+ * and deliberately NOT into any height or block-size domain, so `width="$3xl"` is 768
+ * while `height="$3xl"` finds nothing on the shared `size` scale and stays unresolved.
+ * Adding it to `height` would invent a Tamagui-only spelling the class path still
+ * rejects. Documented for users in `docs/tailwind-mode.md`.
+ */
+const tailwindContainerSize = {
+  '3xs': 256,
+  '2xs': 288,
+  xs: 320,
+  sm: 384,
+  md: 448,
+  lg: 512,
+  xl: 576,
+  '2xl': 672,
+  '3xl': 768,
+  '4xl': 896,
+  '5xl': 1024,
+  '6xl': 1152,
+  '7xl': 1280,
+} as const
+
+export const tokens = {
+  space: tailwindSpace,
+  size: tailwindSize,
+  width: {
+    ...tailwindSize,
+    ...tailwindContainerSize,
+  },
+  minWidth: { ...tailwindSize, ...tailwindContainerSize },
+  maxWidth: { ...tailwindSize, ...tailwindContainerSize },
+  inlineSize: { ...tailwindSize, ...tailwindContainerSize },
+  minInlineSize: { ...tailwindSize, ...tailwindContainerSize },
+  maxInlineSize: { ...tailwindSize, ...tailwindContainerSize },
+  flexBasis: { ...tailwindSize, ...tailwindContainerSize },
+  outlineWidth: {
+    0: 0,
+    1: 1,
+    2: 2,
+    4: 4,
+    8: 8,
+  },
+  outlineOffset: {
+    0: 0,
+    1: 1,
+    2: 2,
+    4: 4,
+    8: 8,
+    '-1': -1,
+    '-2': -2,
+    '-4': -4,
+    '-8': -8,
+  },
+  boxShadow: {
+    '2xs': '0 1px rgb(0 0 0 / 0.05)',
+    xs: '0 1px 2px 0 rgb(0 0 0 / 0.05)',
+    sm: '0 1px 3px 0 rgb(0 0 0 / 0.1), 0 1px 2px -1px rgb(0 0 0 / 0.1)',
+    md: '0 4px 6px -1px rgb(0 0 0 / 0.1), 0 2px 4px -2px rgb(0 0 0 / 0.1)',
+    lg: '0 10px 15px -3px rgb(0 0 0 / 0.1), 0 4px 6px -4px rgb(0 0 0 / 0.1)',
+    xl: '0 20px 25px -5px rgb(0 0 0 / 0.1), 0 8px 10px -6px rgb(0 0 0 / 0.1)',
+    '2xl': '0 25px 50px -12px rgb(0 0 0 / 0.25)',
+  },
+  perspective: {
+    dramatic: 100,
+    near: 300,
+    normal: 500,
+    midrange: 800,
+    distant: 1200,
+  },
+  radius: {
+    0: 0,
+    1: 3,
+    2: 5,
+    3: 7,
+    4: 9,
+    5: 10,
+    6: 16,
+    7: 19,
+    8: 22,
+    9: 26,
+    10: 34,
+    11: 42,
+    12: 50,
+    ...tailwindRadius,
+  },
+} as const
+
+/**
+ * Adds the tailwind type-scale keys (`xs sm base lg xl 2xl ...`) a font needs
+ * for the named sizes, which read `sizes.md.fontSize` and so on from the font.
+ * Wrap any font you pass to a v6 config with it.
+ */
+export function withTailwindTypeScale<F extends { size: object; lineHeight: object }>(
+  font: F
+) {
+  return {
+    ...font,
+    size: { ...font.size, ...tailwindFontSize },
+    lineHeight: { ...font.lineHeight, ...tailwindLineHeight },
+  }
+}
+
+export const fonts = {
+  body: withTailwindTypeScale(systemFonts.body),
+  heading: withTailwindTypeScale(systemFonts.heading),
+} satisfies NonNullable<CreateTamaguiProps['fonts']>
+
+export const settings = {
+  ...baseSettings,
+} satisfies CreateTamaguiProps['settings']
+
+export type V6Settings = typeof settings
+
+/**
+ * A v6 colors pack: the one seam where color choice enters the config.
+ * Themes should be generated from the same palette as the color tokens.
+ */
+export type V6Colors = {
+  themes: NonNullable<CreateTamaguiProps['themes']>
+  /** flat named colors added at tokens.color */
+  colorTokens?: Record<string, string>
+  /** extra 12-step color scales merged into the light and dark base themes */
+  scales?: V6ColorScales
+}
+
+type Twelve<Value> = readonly [
+  Value,
+  Value,
+  Value,
+  Value,
+  Value,
+  Value,
+  Value,
+  Value,
+  Value,
+  Value,
+  Value,
+  Value,
+]
+
+/** one 12-step scale, light and dark values from step 1 (faintest) to 12 (strongest) */
+export type V6ColorScale = {
+  light: Twelve<string>
+  dark: Twelve<string>
+}
+
+export type V6ColorScales = Record<string, V6ColorScale>
+
+type ScaleStep = 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 9 | 10 | 11 | 12
+
+type ColorScaleThemeKeys<Scales extends V6ColorScales> = {
+  [Name in keyof Scales & string as `${Name}${ScaleStep}`]: string
+}
+
+type WithColorScales<
+  Themes extends Record<string, object>,
+  Scales extends V6ColorScales,
+> = {
+  [Name in keyof Themes]: Name extends 'light' | 'dark'
+    ? Themes[Name] & ColorScaleThemeKeys<Scales>
+    : Themes[Name]
+}
+
+// scale keys land only on the base light/dark themes; every subtheme reaches
+// them through parent fallback, so the CSS carries each value once
+function themesWithColorScales<
+  Themes extends Record<string, object>,
+  Scales extends V6ColorScales,
+>(themes: Themes, scales: Scales): WithColorScales<Themes, Scales> {
+  const light: Record<string, string> = {}
+  const dark: Record<string, string> = {}
+  for (const name in scales) {
+    const scale = scales[name]
+    if (scale.light.length !== 12 || scale.dark.length !== 12) {
+      throw new Error(
+        `color scale "${name}" needs exactly 12 light and 12 dark values, got ${scale.light.length}/${scale.dark.length}`
+      )
+    }
+    scale.light.forEach((value, index) => {
+      light[`${name}${index + 1}`] = value
+    })
+    scale.dark.forEach((value, index) => {
+      dark[`${name}${index + 1}`] = value
+    })
+  }
+  return {
+    ...themes,
+    light: { ...themes.light, ...light },
+    dark: { ...themes.dark, ...dark },
+  } as WithColorScales<Themes, Scales>
+}
+
+/**
+ * Named control sizes as recipes of tailwind token keys. Heights are never set:
+ * a control is line-height plus vertical padding tall, so at `md` a button is
+ * 20 + 8 + 8 = 36px, shadcn's `h-9 px-4 py-2 text-sm`.
+ */
+export const sizes = {
+  default: 'md',
+  xs: { fontSize: 'xs', paddingX: '2', paddingY: '1', radius: 'sm' },
+  sm: { fontSize: 'sm', paddingX: '3', paddingY: '1.5', radius: 'md' },
+  md: { fontSize: 'sm', paddingX: '4', paddingY: '2', radius: 'md' },
+  lg: { fontSize: 'base', paddingX: '6', paddingY: '2', radius: 'md' },
+  xl: { fontSize: 'lg', paddingX: '8', paddingY: '2.5', radius: 'lg' },
+} as const satisfies NonNullable<CreateTamaguiProps['sizes']>
+
+const alignedConfig = {
+  media,
+  shorthands,
+  fonts,
+  sizes,
+  settings,
+}
+
+/** Compose the aligned v6 base with a colors pack into a createTamagui-ready config. */
+export function createV6Config<
+  Themes extends NonNullable<CreateTamaguiProps['themes']>,
+  ColorTokens extends Record<string, string>,
+  Scales extends V6ColorScales = Record<never, V6ColorScale>,
+>(colors: {
+  themes: Themes
+  colorTokens: ColorTokens
+  scales?: Scales
+}): typeof alignedConfig & {
+  themes: WithColorScales<Themes, Scales>
+  tokens: typeof tokens & { color: ColorTokens }
+}
+export function createV6Config<
+  Themes extends NonNullable<CreateTamaguiProps['themes']>,
+  Scales extends V6ColorScales = Record<never, V6ColorScale>,
+>(colors: {
+  themes: Themes
+  colorTokens?: undefined
+  scales?: Scales
+}): typeof alignedConfig & {
+  themes: WithColorScales<Themes, Scales>
+  tokens: typeof tokens
+}
+export function createV6Config(colors: V6Colors) {
+  return {
+    ...alignedConfig,
+    themes: colors.scales
+      ? themesWithColorScales(colors.themes, colors.scales)
+      : colors.themes,
+    tokens: colors.colorTokens ? { ...tokens, color: colors.colorTokens } : tokens,
+  }
+}

package/src/v6-builder.ts

@@ -0,0 +1 @@
+export * from '@tamagui/themes/builder'

package/src/v6-tailwind-scales.generated.ts

@@ -0,0 +1,173 @@
+// AUTO-GENERATED from tailwindcss@4.3.0 with @csstools/color-helpers@6.1.0. Do not edit.
+// Source checksum: d8fc16823f2b4e64ea102d9888d8ca3d7aa97e4551d9cd5f17c0ec6d65bb0bf6
+export const tailwindSource = {
+  tailwindVersion: '4.3.0',
+  colorConverter: '@csstools/color-helpers@6.1.0',
+  checksum: 'd8fc16823f2b4e64ea102d9888d8ca3d7aa97e4551d9cd5f17c0ec6d65bb0bf6',
+} as const
+
+export const tailwindSpace = {
+  '0': 0,
+  '1': 4,
+  '2': 8,
+  '3': 12,
+  '4': 16,
+  '5': 20,
+  '6': 24,
+  '7': 28,
+  '8': 32,
+  '9': 36,
+  '10': 40,
+  '11': 44,
+  '12': 48,
+  '14': 56,
+  '16': 64,
+  '20': 80,
+  '24': 96,
+  '28': 112,
+  '32': 128,
+  '36': 144,
+  '40': 160,
+  '44': 176,
+  '48': 192,
+  '52': 208,
+  '56': 224,
+  '60': 240,
+  '64': 256,
+  '72': 288,
+  '80': 320,
+  '96': 384,
+  px: 1,
+  '0.5': 2,
+  '0-5': 2,
+  '1.5': 6,
+  '1-5': 6,
+  '2.5': 10,
+  '2-5': 10,
+  '3.5': 14,
+  '3-5': 14,
+  '-px': -1,
+  '-0.5': -2,
+  '-0-5': -2,
+  '-1': -4,
+  '-1.5': -6,
+  '-1-5': -6,
+  '-2': -8,
+  '-2.5': -10,
+  '-2-5': -10,
+  '-3': -12,
+  '-3.5': -14,
+  '-3-5': -14,
+  '-4': -16,
+  '-5': -20,
+  '-6': -24,
+  '-7': -28,
+  '-8': -32,
+  '-9': -36,
+  '-10': -40,
+  '-11': -44,
+  '-12': -48,
+  '-14': -56,
+  '-16': -64,
+  '-20': -80,
+  '-24': -96,
+  '-28': -112,
+  '-32': -128,
+  '-36': -144,
+  '-40': -160,
+  '-44': -176,
+  '-48': -192,
+  '-52': -208,
+  '-56': -224,
+  '-60': -240,
+  '-64': -256,
+  '-72': -288,
+  '-80': -320,
+  '-96': -384,
+} as const
+
+export const tailwindSize = {
+  '0': 0,
+  '1': 4,
+  '2': 8,
+  '3': 12,
+  '4': 16,
+  '5': 20,
+  '6': 24,
+  '7': 28,
+  '8': 32,
+  '9': 36,
+  '10': 40,
+  '11': 44,
+  '12': 48,
+  '14': 56,
+  '16': 64,
+  '20': 80,
+  '24': 96,
+  '28': 112,
+  '32': 128,
+  '36': 144,
+  '40': 160,
+  '44': 176,
+  '48': 192,
+  '52': 208,
+  '56': 224,
+  '60': 240,
+  '64': 256,
+  '72': 288,
+  '80': 320,
+  '96': 384,
+  px: 1,
+  '0.5': 2,
+  '0-5': 2,
+  '1.5': 6,
+  '1-5': 6,
+  '2.5': 10,
+  '2-5': 10,
+  '3.5': 14,
+  '3-5': 14,
+} as const
+
+export const tailwindRadius = {
+  xs: 2,
+  sm: 4,
+  md: 6,
+  lg: 8,
+  xl: 12,
+  '2xl': 16,
+  '3xl': 24,
+  '4xl': 32,
+  full: 9999,
+} as const
+
+export const tailwindFontSize = {
+  xs: 12,
+  sm: 14,
+  base: 16,
+  lg: 18,
+  xl: 20,
+  '2xl': 24,
+  '3xl': 30,
+  '4xl': 36,
+  '5xl': 48,
+  '6xl': 60,
+  '7xl': 72,
+  '8xl': 96,
+  '9xl': 128,
+} as const
+
+export const tailwindLineHeight = {
+  xs: 16,
+  sm: 20,
+  base: 24,
+  lg: 28,
+  xl: 28,
+  '2xl': 32,
+  '3xl': 36,
+  '4xl': 40,
+  '5xl': 48,
+  '6xl': 60,
+  '7xl': 72,
+  '8xl': 96,
+  '9xl': 128,
+} as const

package/src/v6-themes.ts

@@ -0,0 +1,46 @@
+import {
+  v6RemovedThemeNames,
+  v6ThemeNameReplacements,
+} from '@tamagui/style-grammar/v6-themes'
+
+export type V6Theme<Theme> = {
+  [Name in keyof Theme as Name extends (typeof v6RemovedThemeNames)[number]
+    ? never
+    : Name extends keyof typeof v6ThemeNameReplacements
+      ? (typeof v6ThemeNameReplacements)[Name]
+      : Name]: Theme[Name]
+}
+
+export type V6Themes<Themes extends Record<string, object>> = {
+  [Name in keyof Themes]: V6Theme<Themes[Name]>
+}
+
+/** Apply the v6 theme-key grammar to any generated theme pack. */
+export function toV6Themes<Themes extends Record<string, object>>(
+  themes: Themes
+): V6Themes<Themes> {
+  const convertedThemes = new WeakMap<object, object>()
+
+  return Object.fromEntries(
+    Object.entries(themes).map(([themeName, theme]) => {
+      let convertedTheme = convertedThemes.get(theme)
+
+      if (!convertedTheme) {
+        convertedTheme = Object.fromEntries(
+          Object.entries(theme)
+            .filter(
+              ([name]) => !(v6RemovedThemeNames as readonly string[]).includes(name)
+            )
+            .map(([name, value]) => [
+              v6ThemeNameReplacements[name as keyof typeof v6ThemeNameReplacements] ??
+                name,
+              value,
+            ])
+        )
+        convertedThemes.set(theme, convertedTheme)
+      }
+
+      return [themeName, convertedTheme]
+    })
+  ) as V6Themes<Themes>
+}

package/src/v6.ts

@@ -0,0 +1,30 @@
+// v6 defaults: aligned scales and the statically generated recipe-tree themes.
+// no animations are bundled; import a driver from its specific entry.
+import {
+  tailwindColors,
+  themes,
+  tokens as themeTokens,
+  type Theme,
+  type ThemeNames,
+  type Themes,
+} from '@tamagui/themes'
+import type { CreateTamaguiProps } from '@tamagui/web'
+import { createV6Config, tokens as baseTokens } from './v6-base'
+import type { V6Colors } from './v6-base'
+
+export * from './v6-base'
+export { tailwindColors, themes }
+export type { Theme as V6Theme, ThemeNames as V6ThemeNames, Themes as V6Themes }
+
+/** the Tailwind colors pack: color tokens + themes generated from the same palette */
+export const colors = {
+  themes,
+  colorTokens: themeTokens.color,
+} satisfies V6Colors
+
+export const tokens = {
+  ...baseTokens,
+  color: themeTokens.color,
+} as const
+
+export const defaultConfig = createV6Config(colors) satisfies CreateTamaguiProps

package/types/animations-css.d.ts

@@ -0,0 +1,109 @@
+export declare const animationsCSS: import("@tamagui/web").AnimationDriverWithAnimatedNumbers<{
+    readonly quickest: {
+        readonly duration: 120;
+        readonly bounce: 0.2;
+    };
+    readonly quickestLessBouncy: {
+        readonly duration: 120;
+        readonly bounce: 0;
+    };
+    readonly quicker: {
+        readonly duration: 160;
+        readonly bounce: 0.25;
+    };
+    readonly quickerLessBouncy: {
+        readonly duration: 160;
+        readonly bounce: 0;
+    };
+    readonly quick: {
+        readonly duration: 220;
+        readonly bounce: 0.3;
+    };
+    readonly quickLessBouncy: {
+        readonly duration: 220;
+        readonly bounce: 0;
+    };
+    readonly medium: {
+        readonly duration: 300;
+        readonly bounce: 0.15;
+    };
+    readonly slow: {
+        readonly duration: 450;
+        readonly bounce: 0.1;
+    };
+    readonly slowest: {
+        readonly duration: 700;
+        readonly bounce: 0.1;
+    };
+    readonly lazy: {
+        readonly duration: 500;
+        readonly bounce: -0.2;
+    };
+    readonly superLazy: {
+        readonly duration: 800;
+        readonly bounce: -0.3;
+    };
+    readonly bouncy: {
+        readonly duration: 400;
+        readonly bounce: 0.5;
+    };
+    readonly superBouncy: {
+        readonly duration: 400;
+        readonly bounce: 0.75;
+    };
+}>;
+export declare const animations: import("@tamagui/web").AnimationDriverWithAnimatedNumbers<{
+    readonly quickest: {
+        readonly duration: 120;
+        readonly bounce: 0.2;
+    };
+    readonly quickestLessBouncy: {
+        readonly duration: 120;
+        readonly bounce: 0;
+    };
+    readonly quicker: {
+        readonly duration: 160;
+        readonly bounce: 0.25;
+    };
+    readonly quickerLessBouncy: {
+        readonly duration: 160;
+        readonly bounce: 0;
+    };
+    readonly quick: {
+        readonly duration: 220;
+        readonly bounce: 0.3;
+    };
+    readonly quickLessBouncy: {
+        readonly duration: 220;
+        readonly bounce: 0;
+    };
+    readonly medium: {
+        readonly duration: 300;
+        readonly bounce: 0.15;
+    };
+    readonly slow: {
+        readonly duration: 450;
+        readonly bounce: 0.1;
+    };
+    readonly slowest: {
+        readonly duration: 700;
+        readonly bounce: 0.1;
+    };
+    readonly lazy: {
+        readonly duration: 500;
+        readonly bounce: -0.2;
+    };
+    readonly superLazy: {
+        readonly duration: 800;
+        readonly bounce: -0.3;
+    };
+    readonly bouncy: {
+        readonly duration: 400;
+        readonly bounce: 0.5;
+    };
+    readonly superBouncy: {
+        readonly duration: 400;
+        readonly bounce: 0.75;
+    };
+}>;
+//# sourceMappingURL=animations-css.d.ts.map

package/types/animations-css.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"animations-css.d.ts","sourceRoot":"","sources":["../src/animations-css.ts"],"names":[],"mappings":"AAGA,eAAO,MAAM,aAAa;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;EAAqC,CAAA;AAE/D,eAAO,MAAM,UAAU;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;EAAgB,CAAA"}

package/{src/v3-animations.native.ts → types/animations-css.native.d.ts}

@@ -1 +1,2 @@
-export { animationsReactNative as animations } from './animationsReactNative'
+export { animationsReactNative as animations } from './animations-rn';
+//# sourceMappingURL=animations-css.native.d.ts.map

package/types/animations-css.native.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"animations-css.native.d.ts","sourceRoot":"","sources":["../src/animations-css.native.ts"],"names":[],"mappings":"AACA,OAAO,EAAE,qBAAqB,IAAI,UAAU,EAAE,MAAM,iBAAiB,CAAA"}