@tamagui/config 3.0.0-beta.924.1 → 3.0.0

package/src/v6-base.ts

@@ -1,10 +1,12 @@
 // 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 { defaultSizing } from '@tamagui/web'
+import { copyAuthoredThemeScheme } from '@tamagui/web/internal-runtime'
 import type { CreateTamaguiProps } from '@tamagui/web'
 import { fonts as systemFonts } from './fonts'
 import { media } from './media'
-import { selectionStyles, settings as baseSettings } from './settings'
+import { settings as baseSettings } from './settings'
 import {
   tailwindFontSize,
   tailwindLineHeight,
@@ -18,17 +20,93 @@ import {
 } from '@tamagui/style-grammar/v6-themes'
 
 export { shorthands }
+export { defaultSizing }
 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 },
+  borderWidth: {
+    0: 0,
+    1: 1,
+    2: 2,
+    4: 4,
+    8: 8,
+  },
+  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)',
+    inner: 'inset 0 2px 4px 0 rgb(0 0 0 / 0.05)',
+  },
+  perspective: {
+    dramatic: 100,
+    near: 300,
+    normal: 500,
+    midrange: 800,
+    distant: 1200,
+  },
   radius: {
     0: 0,
     1: 3,
@@ -47,7 +125,13 @@ export const tokens = {
   },
 } as const
 
-function withTailwindTypeScale<F extends { size: object; lineHeight: object }>(font: F) {
+/**
+ * Adds the tailwind type-scale keys (`xs sm base lg xl 2xl ...`) to a 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 },
@@ -60,8 +144,18 @@ export const fonts = {
   heading: withTailwindTypeScale(systemFonts.heading),
 } satisfies NonNullable<CreateTamaguiProps['fonts']>
 
+/** v6 theme keys are hyphenated, so the v5 spelling in ./settings does not apply */
+export const selectionStyles = (theme) =>
+  theme['color-5']
+    ? {
+        backgroundColor: theme['color-5'],
+        color: theme['color-11'],
+      }
+    : null
+
 export const settings = {
   ...baseSettings,
+  selectionStyles,
 } satisfies CreateTamaguiProps['settings']
 
 export type V6Settings = typeof settings
@@ -93,7 +187,7 @@ type Twelve<Value> = readonly [
   Value,
 ]
 
-/** one 12-step scale, light and dark values from step 1 (faintest) to 12 (strongest) */
+/** one 12-step scale, light and dark values from step 1 (faintest) to 12 (strongest), keyed `${name}-${step}` */
 export type V6ColorScale = {
   light: Twelve<string>
   dark: Twelve<string>
@@ -104,7 +198,7 @@ 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
+  [Name in keyof Scales & string as `${Name}-${ScaleStep}`]: string
 }
 
 type WithColorScales<
@@ -132,16 +226,16 @@ function themesWithColorScales<
       )
     }
     scale.light.forEach((value, index) => {
-      light[`${name}${index + 1}`] = value
+      light[`${name}-${index + 1}`] = value
     })
     scale.dark.forEach((value, index) => {
-      dark[`${name}${index + 1}`] = value
+      dark[`${name}-${index + 1}`] = value
     })
   }
   return {
     ...themes,
-    light: { ...themes.light, ...light },
-    dark: { ...themes.dark, ...dark },
+    light: copyAuthoredThemeScheme({ ...themes.light, ...light }, themes.light),
+    dark: copyAuthoredThemeScheme({ ...themes.dark, ...dark }, themes.dark),
   } as WithColorScales<Themes, Scales>
 }
 
@@ -149,8 +243,8 @@ const alignedConfig = {
   media,
   shorthands,
   fonts,
-  selectionStyles,
   settings,
+  sizing: defaultSizing,
 }
 
 /** Compose the aligned v6 base with a colors pack into a createTamagui-ready config. */

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

@@ -38,17 +38,25 @@ export const tailwindSpace = {
   '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,
@@ -110,9 +118,13 @@ export const tailwindSize = {
   '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
 

package/src/v6-themes.ts

@@ -3,18 +3,49 @@ import {
   v6ThemeNameReplacements,
 } from '@tamagui/style-grammar/v6-themes'
 
+type Digit = '0' | '1' | '2' | '3' | '4' | '5' | '6' | '7' | '8' | '9'
+
+type AllDigits<Name extends string> = Name extends ''
+  ? true
+  : Name extends `${infer Head}${infer Rest}`
+    ? Head extends Digit
+      ? AllDigits<Rest>
+      : false
+    : false
+
+/** `color5` -> `color-5`, `black04` -> `black-04`, leaving hyphenated and digitless keys alone */
+type HyphenateRamp<Name extends string, Prefix extends string = ''> = string extends Name
+  ? Name
+  : Name extends `${infer Head}${infer Rest}`
+    ? Head extends Digit
+      ? AllDigits<Rest> extends true
+        ? Prefix extends '' | `${string}-`
+          ? `${Prefix}${Name}`
+          : `${Prefix}-${Name}`
+        : HyphenateRamp<Rest, `${Prefix}${Head}`>
+      : HyphenateRamp<Rest, `${Prefix}${Head}`>
+    : Prefix
+
+export type V6ThemeKey<Name> = Name extends keyof typeof v6ThemeNameReplacements
+  ? (typeof v6ThemeNameReplacements)[Name]
+  : Name extends string
+    ? HyphenateRamp<Name>
+    : Name
+
 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]
+    : V6ThemeKey<Name>]: Theme[Name]
 }
 
 export type V6Themes<Themes extends Record<string, object>> = {
   [Name in keyof Themes]: V6Theme<Themes[Name]>
 }
 
+// the digit run only splits off when a non-hyphen, non-digit character precedes
+// it, so `shadow-1` and `2xl` are already in the v6 grammar and pass through
+const trailingRamp = /^(.*[^-\d])(\d+)$/
+
 /** Apply the v6 theme-key grammar to any generated theme pack. */
 export function toV6Themes<Themes extends Record<string, object>>(
   themes: Themes
@@ -33,7 +64,7 @@ export function toV6Themes<Themes extends Record<string, object>>(
             )
             .map(([name, value]) => [
               v6ThemeNameReplacements[name as keyof typeof v6ThemeNameReplacements] ??
-                name,
+                name.replace(trailingRamp, '$1-$2'),
               value,
             ])
         )

package/types/animations-css.d.ts

@@ -1,49 +1,109 @@
 export declare const animationsCSS: import("@tamagui/web").AnimationDriverWithAnimatedNumbers<{
-    '0ms': string;
-    '50ms': string;
-    '75ms': string;
-    '100ms': string;
-    '200ms': string;
-    '250ms': string;
-    '300ms': string;
-    '400ms': string;
-    '500ms': string;
-    superBouncy: string;
-    bouncy: string;
-    superLazy: string;
-    lazy: string;
-    medium: string;
-    slowest: string;
-    slow: string;
-    quick: string;
-    quickLessBouncy: string;
-    quicker: string;
-    quickerLessBouncy: string;
-    quickest: string;
-    quickestLessBouncy: string;
+    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<{
-    '0ms': string;
-    '50ms': string;
-    '75ms': string;
-    '100ms': string;
-    '200ms': string;
-    '250ms': string;
-    '300ms': string;
-    '400ms': string;
-    '500ms': string;
-    superBouncy: string;
-    bouncy: string;
-    superLazy: string;
-    lazy: string;
-    medium: string;
-    slowest: string;
-    slow: string;
-    quick: string;
-    quickLessBouncy: string;
-    quicker: string;
-    quickerLessBouncy: string;
-    quickest: string;
-    quickestLessBouncy: string;
+    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

@@ -1 +1 @@
-{"version":3,"file":"animations-css.d.ts","sourceRoot":"","sources":["../src/animations-css.ts"],"names":[],"mappings":"AAKA,eAAO,MAAM,aAAa;;;;;;;;;;;;;;;;;;;;;;;EAuBxB,CAAA;AAEF,eAAO,MAAM,UAAU;;;;;;;;;;;;;;;;;;;;;;;EAAgB,CAAA"}
+{"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"}