upgrade to config v4 fully

tamagui · Jan 22, 2025 · 28f4420 · 28f4420
1 parent e6258f3
commit 28f4420
Show file tree

Hide file tree

Showing 7 changed files with 71 additions and 134 deletions.
diff --git a/packages/app/features/home/screen.tsx b/packages/app/features/home/screen.tsx
@@ -5,13 +5,13 @@ import {
   Paragraph,
   Separator,
   Sheet,
-  useToastController,
-  SwitchThemeButton,
   SwitchRouterButton,
+  SwitchThemeButton,
+  useToastController,
   XStack,
   YStack,
 } from '@my/ui'
-import { ChevronDown, ChevronUp, X } from '@tamagui/lucide-icons'
+import { ChevronDown, ChevronUp } from '@tamagui/lucide-icons'
 import { useState } from 'react'
 import { Platform } from 'react-native'
 import { useLink } from 'solito/navigation'
@@ -23,22 +23,15 @@ export function HomeScreen({ pagesMode = false }: { pagesMode?: boolean }) {
   })
 
   return (
-    <YStack
-      f={1}
-      jc="center"
-      ai="center"
-      gap="$8"
-      p="$4"
-      bg="$background"
-    >
+    <YStack flex={1} justify="center" items="center" gap="$8" p="$4" bg="$background">
       <XStack
-        pos="absolute"
-        w="100%"
+        position="absolute"
+        width="100%"
         t="$6"
         gap="$6"
-        jc="center"
-        fw="wrap"
-        $sm={{ pos: 'relative', t: 0 }}
+        justify="center"
+        flexWrap="wrap"
+        $sm={{ position: 'relative', t: 0 }}
       >
         {Platform.OS === 'web' && (
           <>
@@ -49,20 +42,14 @@ export function HomeScreen({ pagesMode = false }: { pagesMode?: boolean }) {
       </XStack>
 
       <YStack gap="$4">
-        <H1
-          ta="center"
-          col="$color12"
-        >
+        <H1 text="center" color="$color12">
           Welcome to Tamagui.
         </H1>
-        <Paragraph
-          col="$color10"
-          ta="center"
-        >
+        <Paragraph color="$color10" text="center">
           Here's a basic starter to show navigating from one screen to another.
         </Paragraph>
         <Separator />
-        <Paragraph ta="center">
+        <Paragraph text="center">
           This screen uses the same code on Next.js and React Native.
         </Paragraph>
         <Separator />
@@ -100,28 +87,20 @@ function SheetDemo() {
         dismissOnSnapToBottom
       >
         <Sheet.Overlay
+          bg="$shadow4"
           animation="lazy"
           enterStyle={{ opacity: 0 }}
           exitStyle={{ opacity: 0 }}
         />
-        <Sheet.Handle bg="$gray8" />
-        <Sheet.Frame
-          ai="center"
-          jc="center"
-          gap="$10"
-          bg="$color2"
-        >
+        <Sheet.Handle bg="$color8" />
+        <Sheet.Frame items="center" justify="center" gap="$10" bg="$color2">
           <XStack gap="$2">
-            <Paragraph ta="center">Made by</Paragraph>
-            <Anchor
-              col="$blue10"
-              href="https://twitter.com/natebirdman"
-              target="_blank"
-            >
+            <Paragraph text="center">Made by</Paragraph>
+            <Anchor color="$blue10" href="https://twitter.com/natebirdman" target="_blank">
               @natebirdman,
             </Anchor>
             <Anchor
-              color="$purple10"
+              color="$blue10"
               href="https://github.com/tamagui/tamagui"
               target="_blank"
               rel="noreferrer"

diff --git a/packages/ui/src/animations.ts → packages/config/src/animations.ts b/packages/ui/src/animations.ts → packages/config/src/animations.ts
diff --git a/packages/config/src/fonts.ts b/packages/config/src/fonts.ts
@@ -0,0 +1,45 @@
+import { createInterFont } from '@tamagui/font-inter'
+
+export 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' },
+  },
+})
+
+export 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)),
+  }
+)
diff --git a/packages/config/src/tamagui.config.ts b/packages/config/src/tamagui.config.ts
@@ -1,93 +1,13 @@
+import { defaultConfig } from '@tamagui/config/v4'
 import { createTamagui } from 'tamagui'
-import { createInterFont } from '@tamagui/font-inter'
-import { shorthands } from '@tamagui/shorthands'
-import { defaultConfig, themes, tokens } from '@tamagui/config/v4'
-
-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)),
-  }
-)
+import { bodyFont, headingFont } from './fonts'
+import { animations } from './animations'
 
 export const config = createTamagui({
   ...defaultConfig,
-  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: {
-    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
diff --git a/packages/ui/src/MyComponent.tsx b/packages/ui/src/MyComponent.tsx
@@ -2,12 +2,12 @@ import { YStack, styled } from 'tamagui'
 
 export const MyComponent = styled(YStack, {
   name: 'MyComponent',
-  backgroundColor: 'red',
+  bg: 'red',
 
   variants: {
     blue: {
       true: {
-        backgroundColor: 'blue',
+        bg: 'blue',
       },
     },
   } as const,

diff --git a/packages/ui/src/NativeToast.tsx b/packages/ui/src/NativeToast.tsx
@@ -20,11 +20,8 @@ export const NativeToast = () => {
       scale={1}
       animation="quick"
     >
-      <YStack
-        py="$1.5"
-        px="$2"
-      >
-        <Toast.Title lh="$1">{currentToast.title}</Toast.Title>
+      <YStack py="$1.5" px="$2">
+        <Toast.Title lineHeight="$1">{currentToast.title}</Toast.Title>
         {!!currentToast.message && <Toast.Description>{currentToast.message}</Toast.Description>}
       </YStack>
     </Toast>

diff --git a/packages/ui/src/SwitchRouterButton.tsx b/packages/ui/src/SwitchRouterButton.tsx
@@ -2,11 +2,7 @@ import { Anchor, Button } from 'tamagui'
 
 export const SwitchRouterButton = ({ pagesMode = false }: { pagesMode?: boolean }) => {
   return (
-    <Anchor
-      ta="center"
-      color="$color12"
-      href={pagesMode ? '/' : '/pages-example'}
-    >
+    <Anchor text="center" color="$color12" href={pagesMode ? '/' : '/pages-example'}>
       <Button>Change router: {pagesMode ? 'pages' : 'app'}</Button>
     </Anchor>
   )