@tamagui/web 1.79.6 → 1.79.8

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@tamagui/web",
-  "version": "1.79.6",
+  "version": "1.79.8",
   "source": "src/index.ts",
   "main": "dist/cjs",
   "module": "dist/esm",
@@ -27,20 +27,20 @@
     "reset.css"
   ],
   "dependencies": {
-    "@tamagui/compose-refs": "1.79.6",
-    "@tamagui/constants": "1.79.6",
-    "@tamagui/helpers": "1.79.6",
-    "@tamagui/normalize-css-color": "1.79.6",
-    "@tamagui/timer": "1.79.6",
-    "@tamagui/use-did-finish-ssr": "1.79.6",
-    "@tamagui/use-event": "1.79.6",
-    "@tamagui/use-force-update": "1.79.6"
+    "@tamagui/compose-refs": "1.79.8",
+    "@tamagui/constants": "1.79.8",
+    "@tamagui/helpers": "1.79.8",
+    "@tamagui/normalize-css-color": "1.79.8",
+    "@tamagui/timer": "1.79.8",
+    "@tamagui/use-did-finish-ssr": "1.79.8",
+    "@tamagui/use-event": "1.79.8",
+    "@tamagui/use-force-update": "1.79.8"
   },
   "peerDependencies": {
     "react": "*"
   },
   "devDependencies": {
-    "@tamagui/build": "1.79.6",
+    "@tamagui/build": "1.79.8",
     "@testing-library/react": "^14.0.0",
     "csstype": "^3.0.10",
     "react": "^18.2.0",

package/src/helpers/getThemeCSSRules.ts

@@ -77,8 +77,8 @@ export function getThemeCSSRules(props: {
             continue
           }
 
-          const parents = new Array(depth + 1).fill(0).map((_, psi) => {
-            return `${CNP}${psi % 2 === 0 ? stronger : weaker}`
+          const parents = new Array(depth + 1).fill(0).map((_, idx) => {
+            return `${CNP}${idx % 2 === 0 ? stronger : weaker}`
           })
 
           let parentSelectors = parents.length > 1 ? parents.slice(1) : parents
@@ -103,6 +103,12 @@ export function getThemeCSSRules(props: {
 
     const selectors = [...selectorsSet].sort((a, b) => a.localeCompare(b))
 
+    // let specificity = 1 //themeName.split('_').length
+
+    // if (themeName.includes('accent_Button')) {
+    //   specificity = 2
+    // }
+
     // only do our :root attach if it's not light/dark - not support sub themes on root saves a lot of effort/size
     // this isBaseTheme logic could probably be done more efficiently above
     const selectorsString = selectors

package/src/hooks/useMedia.tsx

@@ -1,4 +1,4 @@
-import { useIsomorphicLayoutEffect } from '@tamagui/constants'
+import { isWeb, useIsomorphicLayoutEffect } from '@tamagui/constants'
 import { useRef, useSyncExternalStore } from 'react'
 
 import { getConfig } from '../config'
@@ -198,7 +198,7 @@ export function useMedia(uid?: any, componentContext?: ComponentContextI): UseMe
   const internal = useRef<UseMediaInternalState | undefined>()
   // performance boost to avoid using context twice
   const disableSSR = componentContext ? getDisableSSR(componentContext) : useDisableSSR()
-  const initialState = (disableSSR ? mediaState : initState) || {}
+  const initialState = (disableSSR || !isWeb ? mediaState : initState) || {}
 
   const state = useSyncExternalStore<MediaQueryState>(
     subscribe,

package/src/hooks/useTheme.tsx

@@ -325,7 +325,7 @@ export const useChangeThemeEffect = (
 
   if (!isServer) {
     // listen for parent change + notify children change
-    useLayoutEffect(() => {
+    useEffect(() => {
       if (!themeManager) return
 
       // SSR safe inverse (because server can't know prefers scheme)
@@ -375,7 +375,7 @@ export const useChangeThemeEffect = (
           }
 
           if (shouldTryUpdate) {
-            setThemeState(createState)
+            setThemeState((prev) => createState(prev, force))
           }
         },
         themeManager.id

package/src/internalWithTheme.tsx

@@ -4,13 +4,10 @@ import { useTheme } from './hooks/useTheme'
 
 /** internal: this is for tamagui babel plugin usage only */
 
-export const internalWithTheme = (
-  Component: any,
-  styleProvider: any,
-  memoArgs: string[]
-) => {
+export const internalWithTheme = (Component: any, styleProvider: any) => {
   return (props) => {
+    const { expressions, ...rest } = props
     const theme = useTheme()
-    return <Component style={useMemo(() => styleProvider(theme), memoArgs)} {...props} />
+    return <Component style={styleProvider(theme, props.expressions)} {...rest} />
   }
 }

package/src/types.tsx

@@ -388,9 +388,11 @@ type Tokenify<A extends GenericTokens> = Omit<
 }
 
 type TokenifyRecord<A extends CreateTokens[keyof CreateTokens]> = {
-  [Key in keyof A]: A[Key] extends Variable ? A[Key] : Variable<A[Key]>
+  [Key in keyof A]: CoerceToVariable<A[Key]>
 }
 
+type CoerceToVariable<A> = A extends Variable ? A : Variable<A>
+
 export type TamaguiBaseTheme = {
   // defined for our tamagui kit , we could do this inside `tamagui`
   // but maybe helpful to have some sort of universally shared things +
@@ -486,9 +488,7 @@ export type CreateTamaguiConfig<
   // parsed
   themes: {
     [Name in keyof B]: {
-      [Key in keyof B[Name]]: B[Name][Key] extends Variable
-        ? B[Name][Key]
-        : Variable<B[Name][Key]>
+      [Key in keyof B[Name]]: CoerceToVariable<B[Name][Key]>
     }
   }
   shorthands: C
@@ -582,7 +582,7 @@ export type ThemeDefinition = BaseThemeDefinitions extends never
   : BaseThemeDefinitions
 export type ThemeKeys = keyof ThemeDefinition
 export type ThemeParsed = {
-  [key in ThemeKeys]: ThemeDefinition[key]
+  [key in ThemeKeys]: CoerceToVariable<ThemeDefinition[key]>
 }
 
 export type Tokens = TamaguiConfig['tokens']
@@ -1377,6 +1377,7 @@ export type SpaceValue = number | SpaceTokens | ThemeValueFallback
 type SharedBaseExtraStyleProps = {
   columnGap?: SpaceValue
   contain?: Properties['contain']
+  touchAction?: Properties['touchAction']
   cursor?: Properties['cursor']
   display?: 'inherit' | 'none' | 'inline' | 'block' | 'contents' | 'flex' | 'inline-flex'
   gap?: SpaceValue

package/types/config.d.ts

@@ -23,23 +23,23 @@ export declare const useTokens: ({ prefixed, }?: {
 }) => TokensMerged;
 export declare const getThemes: () => {
     [x: string]: {
-        [x: string]: import("./createVariable").Variable<import("./types").VariableVal>;
-        background?: import("./createVariable").Variable<import("./types").VariableColorVal | undefined> | undefined;
-        backgroundHover?: import("./createVariable").Variable<import("./types").VariableColorVal | undefined> | undefined;
-        backgroundPress?: import("./createVariable").Variable<import("./types").VariableColorVal | undefined> | undefined;
-        backgroundFocus?: import("./createVariable").Variable<import("./types").VariableColorVal | undefined> | undefined;
-        color?: import("./createVariable").Variable<import("./types").VariableColorVal | undefined> | undefined;
-        colorHover?: import("./createVariable").Variable<import("./types").VariableColorVal | undefined> | undefined;
-        colorPress?: import("./createVariable").Variable<import("./types").VariableColorVal | undefined> | undefined;
-        colorFocus?: import("./createVariable").Variable<import("./types").VariableColorVal | undefined> | undefined;
-        borderColor?: import("./createVariable").Variable<import("./types").VariableColorVal | undefined> | undefined;
-        borderColorHover?: import("./createVariable").Variable<import("./types").VariableColorVal | undefined> | undefined;
-        borderColorPress?: import("./createVariable").Variable<import("./types").VariableColorVal | undefined> | undefined;
-        borderColorFocus?: import("./createVariable").Variable<import("./types").VariableColorVal | undefined> | undefined;
-        shadowColor?: import("./createVariable").Variable<import("./types").VariableColorVal | undefined> | undefined;
-        shadowColorHover?: import("./createVariable").Variable<import("./types").VariableColorVal | undefined> | undefined;
-        shadowColorPress?: import("./createVariable").Variable<import("./types").VariableColorVal | undefined> | undefined;
-        shadowColorFocus?: import("./createVariable").Variable<import("./types").VariableColorVal | undefined> | undefined;
+        [x: string]: import("./createVariable").Variable<any> | import("./createVariable").Variable<string> | import("./createVariable").Variable<number> | import("./createVariable").Variable<import("./types").VariableValGeneric>;
+        background?: import("./createVariable").Variable<string> | import("./createVariable").Variable<any> | import("./createVariable").Variable<undefined> | undefined;
+        backgroundHover?: import("./createVariable").Variable<string> | import("./createVariable").Variable<any> | import("./createVariable").Variable<undefined> | undefined;
+        backgroundPress?: import("./createVariable").Variable<string> | import("./createVariable").Variable<any> | import("./createVariable").Variable<undefined> | undefined;
+        backgroundFocus?: import("./createVariable").Variable<string> | import("./createVariable").Variable<any> | import("./createVariable").Variable<undefined> | undefined;
+        color?: import("./createVariable").Variable<string> | import("./createVariable").Variable<any> | import("./createVariable").Variable<undefined> | undefined;
+        colorHover?: import("./createVariable").Variable<string> | import("./createVariable").Variable<any> | import("./createVariable").Variable<undefined> | undefined;
+        colorPress?: import("./createVariable").Variable<string> | import("./createVariable").Variable<any> | import("./createVariable").Variable<undefined> | undefined;
+        colorFocus?: import("./createVariable").Variable<string> | import("./createVariable").Variable<any> | import("./createVariable").Variable<undefined> | undefined;
+        borderColor?: import("./createVariable").Variable<string> | import("./createVariable").Variable<any> | import("./createVariable").Variable<undefined> | undefined;
+        borderColorHover?: import("./createVariable").Variable<string> | import("./createVariable").Variable<any> | import("./createVariable").Variable<undefined> | undefined;
+        borderColorPress?: import("./createVariable").Variable<string> | import("./createVariable").Variable<any> | import("./createVariable").Variable<undefined> | undefined;
+        borderColorFocus?: import("./createVariable").Variable<string> | import("./createVariable").Variable<any> | import("./createVariable").Variable<undefined> | undefined;
+        shadowColor?: import("./createVariable").Variable<string> | import("./createVariable").Variable<any> | import("./createVariable").Variable<undefined> | undefined;
+        shadowColorHover?: import("./createVariable").Variable<string> | import("./createVariable").Variable<any> | import("./createVariable").Variable<undefined> | undefined;
+        shadowColorPress?: import("./createVariable").Variable<string> | import("./createVariable").Variable<any> | import("./createVariable").Variable<undefined> | undefined;
+        shadowColorFocus?: import("./createVariable").Variable<string> | import("./createVariable").Variable<any> | import("./createVariable").Variable<undefined> | undefined;
     };
 };
 export declare const configListeners: Set<ConfigListener>;

package/types/helpers/getThemeCSSRules.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"getThemeCSSRules.d.ts","sourceRoot":"","sources":["../../src/helpers/getThemeCSSRules.ts"],"names":[],"mappings":"AAIA,OAAO,KAAK,EAAE,kBAAkB,EAAE,WAAW,EAAE,MAAM,UAAU,CAAA;AAG/D,wBAAgB,gBAAgB,CAAC,KAAK,EAAE;IACtC,MAAM,EAAE,kBAAkB,CAAA;IAC1B,SAAS,EAAE,MAAM,CAAA;IACjB,KAAK,EAAE,WAAW,CAAA;IAClB,KAAK,EAAE,MAAM,EAAE,CAAA;CAChB,YA0JA"}
+{"version":3,"file":"getThemeCSSRules.d.ts","sourceRoot":"","sources":["../../src/helpers/getThemeCSSRules.ts"],"names":[],"mappings":"AAIA,OAAO,KAAK,EAAE,kBAAkB,EAAE,WAAW,EAAE,MAAM,UAAU,CAAA;AAG/D,wBAAgB,gBAAgB,CAAC,KAAK,EAAE;IACtC,MAAM,EAAE,kBAAkB,CAAA;IAC1B,SAAS,EAAE,MAAM,CAAA;IACjB,KAAK,EAAE,WAAW,CAAA;IAClB,KAAK,EAAE,MAAM,EAAE,CAAA;CAChB,YAgKA"}

package/types/hooks/useConfiguration.d.ts

@@ -30,23 +30,23 @@ export declare const useConfiguration: () => {
     fontLanguages: string[];
     themes: {
         [x: string]: {
-            [x: string]: import("..").Variable<import("..").VariableVal>;
-            background?: import("..").Variable<import("..").VariableColorVal | undefined> | undefined;
-            backgroundHover?: import("..").Variable<import("..").VariableColorVal | undefined> | undefined;
-            backgroundPress?: import("..").Variable<import("..").VariableColorVal | undefined> | undefined;
-            backgroundFocus?: import("..").Variable<import("..").VariableColorVal | undefined> | undefined;
-            color?: import("..").Variable<import("..").VariableColorVal | undefined> | undefined;
-            colorHover?: import("..").Variable<import("..").VariableColorVal | undefined> | undefined;
-            colorPress?: import("..").Variable<import("..").VariableColorVal | undefined> | undefined;
-            colorFocus?: import("..").Variable<import("..").VariableColorVal | undefined> | undefined;
-            borderColor?: import("..").Variable<import("..").VariableColorVal | undefined> | undefined;
-            borderColorHover?: import("..").Variable<import("..").VariableColorVal | undefined> | undefined;
-            borderColorPress?: import("..").Variable<import("..").VariableColorVal | undefined> | undefined;
-            borderColorFocus?: import("..").Variable<import("..").VariableColorVal | undefined> | undefined;
-            shadowColor?: import("..").Variable<import("..").VariableColorVal | undefined> | undefined;
-            shadowColorHover?: import("..").Variable<import("..").VariableColorVal | undefined> | undefined;
-            shadowColorPress?: import("..").Variable<import("..").VariableColorVal | undefined> | undefined;
-            shadowColorFocus?: import("..").Variable<import("..").VariableColorVal | undefined> | undefined;
+            [x: string]: import("..").Variable<any> | import("..").Variable<string> | import("..").Variable<number> | import("..").Variable<import("..").VariableValGeneric>;
+            background?: import("..").Variable<string> | import("..").Variable<any> | import("..").Variable<undefined> | undefined;
+            backgroundHover?: import("..").Variable<string> | import("..").Variable<any> | import("..").Variable<undefined> | undefined;
+            backgroundPress?: import("..").Variable<string> | import("..").Variable<any> | import("..").Variable<undefined> | undefined;
+            backgroundFocus?: import("..").Variable<string> | import("..").Variable<any> | import("..").Variable<undefined> | undefined;
+            color?: import("..").Variable<string> | import("..").Variable<any> | import("..").Variable<undefined> | undefined;
+            colorHover?: import("..").Variable<string> | import("..").Variable<any> | import("..").Variable<undefined> | undefined;
+            colorPress?: import("..").Variable<string> | import("..").Variable<any> | import("..").Variable<undefined> | undefined;
+            colorFocus?: import("..").Variable<string> | import("..").Variable<any> | import("..").Variable<undefined> | undefined;
+            borderColor?: import("..").Variable<string> | import("..").Variable<any> | import("..").Variable<undefined> | undefined;
+            borderColorHover?: import("..").Variable<string> | import("..").Variable<any> | import("..").Variable<undefined> | undefined;
+            borderColorPress?: import("..").Variable<string> | import("..").Variable<any> | import("..").Variable<undefined> | undefined;
+            borderColorFocus?: import("..").Variable<string> | import("..").Variable<any> | import("..").Variable<undefined> | undefined;
+            shadowColor?: import("..").Variable<string> | import("..").Variable<any> | import("..").Variable<undefined> | undefined;
+            shadowColorHover?: import("..").Variable<string> | import("..").Variable<any> | import("..").Variable<undefined> | undefined;
+            shadowColorPress?: import("..").Variable<string> | import("..").Variable<any> | import("..").Variable<undefined> | undefined;
+            shadowColorFocus?: import("..").Variable<string> | import("..").Variable<any> | import("..").Variable<undefined> | undefined;
         };
     };
     shorthands: import("..").GenericShorthands;
@@ -72,74 +72,74 @@ export declare const useConfiguration: () => {
     };
     tokens: Omit<{
         [x: string]: {
-            [x: string]: import("..").Variable<import("..").VariableVal>;
+            [x: string]: import("..").Variable<any> | import("..").Variable<string> | import("..").Variable<number> | import("..").Variable<import("..").VariableValGeneric>;
         };
         color: {
-            [x: string]: import("..").Variable<import("..").VariableVal>;
+            [x: string]: import("..").Variable<any> | import("..").Variable<string> | import("..").Variable<number> | import("..").Variable<import("..").VariableValGeneric>;
         };
         space: {
-            [x: string]: import("..").Variable<import("..").VariableVal>;
+            [x: string]: import("..").Variable<any> | import("..").Variable<string> | import("..").Variable<number> | import("..").Variable<import("..").VariableValGeneric>;
         };
         size: {
-            [x: string]: import("..").Variable<import("..").VariableVal>;
+            [x: string]: import("..").Variable<any> | import("..").Variable<string> | import("..").Variable<number> | import("..").Variable<import("..").VariableValGeneric>;
         };
         radius: {
-            [x: string]: import("..").Variable<import("..").VariableVal>;
+            [x: string]: import("..").Variable<any> | import("..").Variable<string> | import("..").Variable<number> | import("..").Variable<import("..").VariableValGeneric>;
         };
         zIndex: {
-            [x: string]: import("..").Variable<import("..").VariableVal>;
+            [x: string]: import("..").Variable<any> | import("..").Variable<string> | import("..").Variable<number> | import("..").Variable<import("..").VariableValGeneric>;
         };
     }, "color" | "space" | "size" | "radius" | "zIndex"> & {
         color: {
-            [x: string]: import("..").Variable<import("..").VariableVal>;
+            [x: string]: import("..").Variable<any> | import("..").Variable<string> | import("..").Variable<number> | import("..").Variable<import("..").VariableValGeneric>;
         };
         space: {
-            [x: string]: import("..").Variable<import("..").VariableVal>;
+            [x: string]: import("..").Variable<any> | import("..").Variable<string> | import("..").Variable<number> | import("..").Variable<import("..").VariableValGeneric>;
         };
         size: {
-            [x: string]: import("..").Variable<import("..").VariableVal>;
+            [x: string]: import("..").Variable<any> | import("..").Variable<string> | import("..").Variable<number> | import("..").Variable<import("..").VariableValGeneric>;
         };
         radius: {
-            [x: string]: import("..").Variable<import("..").VariableVal>;
+            [x: string]: import("..").Variable<any> | import("..").Variable<string> | import("..").Variable<number> | import("..").Variable<import("..").VariableValGeneric>;
         };
         zIndex: {
-            [x: string]: import("..").Variable<import("..").VariableVal>;
+            [x: string]: import("..").Variable<any> | import("..").Variable<string> | import("..").Variable<number> | import("..").Variable<import("..").VariableValGeneric>;
         };
     };
     tokensParsed: Omit<{
         [x: string]: {
-            [x: string]: import("..").Variable<import("..").VariableVal>;
+            [x: string]: import("..").Variable<any> | import("..").Variable<string> | import("..").Variable<number> | import("..").Variable<import("..").VariableValGeneric>;
         };
         color: {
-            [x: string]: import("..").Variable<import("..").VariableVal>;
+            [x: string]: import("..").Variable<any> | import("..").Variable<string> | import("..").Variable<number> | import("..").Variable<import("..").VariableValGeneric>;
         };
         space: {
-            [x: string]: import("..").Variable<import("..").VariableVal>;
+            [x: string]: import("..").Variable<any> | import("..").Variable<string> | import("..").Variable<number> | import("..").Variable<import("..").VariableValGeneric>;
         };
         size: {
-            [x: string]: import("..").Variable<import("..").VariableVal>;
+            [x: string]: import("..").Variable<any> | import("..").Variable<string> | import("..").Variable<number> | import("..").Variable<import("..").VariableValGeneric>;
         };
         radius: {
-            [x: string]: import("..").Variable<import("..").VariableVal>;
+            [x: string]: import("..").Variable<any> | import("..").Variable<string> | import("..").Variable<number> | import("..").Variable<import("..").VariableValGeneric>;
         };
         zIndex: {
-            [x: string]: import("..").Variable<import("..").VariableVal>;
+            [x: string]: import("..").Variable<any> | import("..").Variable<string> | import("..").Variable<number> | import("..").Variable<import("..").VariableValGeneric>;
         };
     }, "color" | "space" | "size" | "radius" | "zIndex"> & {
         color: {
-            [x: string]: import("..").Variable<import("..").VariableVal>;
+            [x: string]: import("..").Variable<any> | import("..").Variable<string> | import("..").Variable<number> | import("..").Variable<import("..").VariableValGeneric>;
         };
         space: {
-            [x: string]: import("..").Variable<import("..").VariableVal>;
+            [x: string]: import("..").Variable<any> | import("..").Variable<string> | import("..").Variable<number> | import("..").Variable<import("..").VariableValGeneric>;
         };
         size: {
-            [x: string]: import("..").Variable<import("..").VariableVal>;
+            [x: string]: import("..").Variable<any> | import("..").Variable<string> | import("..").Variable<number> | import("..").Variable<import("..").VariableValGeneric>;
         };
         radius: {
-            [x: string]: import("..").Variable<import("..").VariableVal>;
+            [x: string]: import("..").Variable<any> | import("..").Variable<string> | import("..").Variable<number> | import("..").Variable<import("..").VariableValGeneric>;
         };
         zIndex: {
-            [x: string]: import("..").Variable<import("..").VariableVal>;
+            [x: string]: import("..").Variable<any> | import("..").Variable<string> | import("..").Variable<number> | import("..").Variable<import("..").VariableValGeneric>;
         };
     };
     themeConfig: any;

package/types/internalWithTheme.d.ts

@@ -1,4 +1,4 @@
 /// <reference types="react" />
 /** internal: this is for tamagui babel plugin usage only */
-export declare const internalWithTheme: (Component: any, styleProvider: any, memoArgs: string[]) => (props: any) => JSX.Element;
+export declare const internalWithTheme: (Component: any, styleProvider: any) => (props: any) => JSX.Element;
 //# sourceMappingURL=internalWithTheme.d.ts.map

package/types/internalWithTheme.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"internalWithTheme.d.ts","sourceRoot":"","sources":["../src/internalWithTheme.tsx"],"names":[],"mappings":";AAIA,4DAA4D;AAE5D,eAAO,MAAM,iBAAiB,cACjB,GAAG,iBACC,GAAG,YACR,MAAM,EAAE,gCAMnB,CAAA"}
+{"version":3,"file":"internalWithTheme.d.ts","sourceRoot":"","sources":["../src/internalWithTheme.tsx"],"names":[],"mappings":";AAIA,4DAA4D;AAE5D,eAAO,MAAM,iBAAiB,cAAe,GAAG,iBAAiB,GAAG,gCAMnE,CAAA"}

package/types/types.d.ts

@@ -207,8 +207,9 @@ type Tokenify<A extends GenericTokens> = Omit<{
     zIndex: TokenifyRecord<A['zIndex']>;
 };
 type TokenifyRecord<A extends CreateTokens[keyof CreateTokens]> = {
-    [Key in keyof A]: A[Key] extends Variable ? A[Key] : Variable<A[Key]>;
+    [Key in keyof A]: CoerceToVariable<A[Key]>;
 };
+type CoerceToVariable<A> = A extends Variable ? A : Variable<A>;
 export type TamaguiBaseTheme = {
     background: VariableColorVal;
     backgroundHover: VariableColorVal;
@@ -263,7 +264,7 @@ export type CreateTamaguiConfig<A extends GenericTokens, B extends GenericThemes
     tokens: A;
     themes: {
         [Name in keyof B]: {
-            [Key in keyof B[Name]]: B[Name][Key] extends Variable ? B[Name][Key] : Variable<B[Name][Key]>;
+            [Key in keyof B[Name]]: CoerceToVariable<B[Name][Key]>;
         };
     };
     shorthands: C;
@@ -298,7 +299,7 @@ type GenericThemeDefinition = TamaguiConfig['themes'][keyof TamaguiConfig['theme
 export type ThemeDefinition = BaseThemeDefinitions extends never ? GenericThemeDefinition : BaseThemeDefinitions;
 export type ThemeKeys = keyof ThemeDefinition;
 export type ThemeParsed = {
-    [key in ThemeKeys]: ThemeDefinition[key];
+    [key in ThemeKeys]: CoerceToVariable<ThemeDefinition[key]>;
 };
 export type Tokens = TamaguiConfig['tokens'];
 export type TokensParsed = {
@@ -712,6 +713,7 @@ export type SpaceValue = number | SpaceTokens | ThemeValueFallback;
 type SharedBaseExtraStyleProps = {
     columnGap?: SpaceValue;
     contain?: Properties['contain'];
+    touchAction?: Properties['touchAction'];
     cursor?: Properties['cursor'];
     display?: 'inherit' | 'none' | 'inline' | 'block' | 'contents' | 'flex' | 'inline-flex';
     gap?: SpaceValue;