@tamagui/web 3.0.0-beta.669.1 → 3.0.0-beta.728.1

package/src/createTamagui.ts

@@ -14,7 +14,7 @@ import {
 import { scanAllSheets } from './helpers/insertStyleRule'
 import { proxyThemesToParents } from './helpers/proxyThemeToParents'
 import { ensureThemeVariable } from './helpers/themes'
-import { mergeConfigVariablesIntoTheme } from './helpers/variables'
+import { mergeConfigVariablesIntoTheme } from './helpers/configVariables'
 import { configureMedia } from './hooks/useMedia'
 import { parseFont, registerFontVariables } from './insertFont'
 import { Tamagui } from './Tamagui'
@@ -348,13 +348,8 @@ function getThemesDeduped(
 
     // custom variables merge into base themes only; sub-themes inherit them
     // via proxyThemesToParents (native) and the CSS cascade (web), so a
-    // inline <Theme> patch survives sub-theme switches below it
-    if (
-      process.env.TAMAGUI_RUNTIME_INLINE_THEME_VALUES !== 'disabled' &&
-      variables &&
-      variablesCtx &&
-      !themeName.includes('_')
-    ) {
+    // a ThemeUpdate patch survives sub-theme switches below it
+    if (variables && variablesCtx && !themeName.includes('_')) {
       mergeConfigVariablesIntoTheme(
         theme as any,
         themeName,

package/src/dom/primitives.native.tsx

@@ -15,7 +15,7 @@ import {
   type ReactNode,
   type Ref,
 } from 'react'
-import { unitlessNumberProperties } from '@tamagui/style-grammar'
+import { unitlessNumberProperties } from '@tamagui/style-grammar/runtime'
 
 import {
   clickFromPress,

package/src/helpers/configVariables.ts

@@ -0,0 +1,64 @@
+import { createVariable, isVariable } from '../createVariable'
+import type { GenericVariables, TokensParsed, Variable } from '../types'
+import { findVariableToken, isUnitlessVariableKey } from './variableValue'
+import { warnOnce } from './warnOnce'
+
+export function mergeConfigVariablesIntoTheme(
+  theme: Record<string, Variable>,
+  themeName: string,
+  variables: GenericVariables,
+  tokensParsed: TokensParsed
+) {
+  const scheme = themeName.startsWith('dark') ? 'dark' : 'light'
+  const resolving = new Set<string>()
+
+  const resolveRawValue = (key: string, value: unknown): unknown => {
+    if (typeof value === 'object' && value !== null) {
+      if (isVariable(value)) return value.val
+      if ('needsPx' in value) return value
+      if ('light' in value || 'dark' in value) {
+        return resolveRawValue(key, (value as any)[scheme] ?? (value as any).light)
+      }
+      return
+    }
+    if (typeof value === 'string') {
+      const name = value
+      if (name in variables && !(name in theme)) {
+        if (resolving.has(name)) {
+          warnOnce(
+            `config-cycle:${name}`,
+            `createTamagui variables: reference cycle at "${name}". Dropping.`
+          )
+          return
+        }
+        resolving.add(name)
+        const res = resolveRawValue(name, variables[name])
+        resolving.delete(name)
+        return res
+      }
+      const themeValue = theme[name]
+      if (themeValue !== undefined) {
+        return isVariable(themeValue) ? themeValue.val : themeValue
+      }
+      const token = findVariableToken(tokensParsed, name)
+      return token ? token.val : value
+    }
+    return value
+  }
+
+  for (const key in variables) {
+    if (key in theme) continue
+    let raw = resolveRawValue(key, variables[key])
+    if (raw === undefined) continue
+    let needsPx = typeof raw === 'number' && !isUnitlessVariableKey(key)
+    if (typeof raw === 'object' && raw !== null && 'needsPx' in raw) {
+      needsPx = true
+      raw = (raw as unknown as { val: number }).val
+    }
+    const variable = createVariable({ key, name: key, val: raw as any })
+    if (needsPx) {
+      variable.needsPx = true
+    }
+    theme[key] = variable
+  }
+}

package/src/helpers/defaultAnimationDriver.tsx

@@ -15,10 +15,6 @@ const createEmptyAnimationDriver = (): AnimationDriver => ({
   useAnimations: () => noAnimationDriver('animations'),
   usePresence: () => noAnimationDriver('usePresence'),
   ResetPresence: () => noAnimationDriver('ResetPresence'),
-  useAnimatedNumber: () => noAnimationDriver('useAnimatedNumber'),
-  useAnimatedNumberStyle: () => noAnimationDriver('useAnimatedNumberStyle'),
-  useAnimatedNumbersStyle: () => noAnimationDriver('useAnimatedNumbersStyle'),
-  useAnimatedNumberReaction: () => noAnimationDriver('useAnimatedNumberReaction'),
 })
 
 export const defaultAnimationDriver = createEmptyAnimationDriver()