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

package/src/helpers/variables.ts

@@ -2,19 +2,23 @@ import { reservedThemeProps, simpleHash } from '@tamagui/helpers'
 import {
   grammarPlatformNames,
   isRootThemeName,
-  parseValue,
-  type ModifierRegistryView,
+  modifierKindPlatform,
+  modifierKindTheme,
+  reduceFlatValueIdentity,
+  type ClauseIdentityErrorCode,
+  type ClauseIdentityHandler,
 } from '@tamagui/style-grammar/runtime'
 import { getSetting } from '../config'
 import { createVariable, isVariable } from '../createVariable'
+import { getConfigRevisionState, type ConfigRevisionState } from './grammarConfig'
+import { themeUpdateStateKey, type ThemeUpdateLayerInfo } from './themeUpdateState'
 import { platformMatches } from './directStyle'
+import { findVariableToken, isUnitlessVariableKey } from './variableValue'
 import { warnOnce } from './warnOnce'
 import type {
-  GenericVariables,
   TamaguiInternalConfig,
   ThemeKeys,
   ThemeName,
-  TokensParsed,
   Variable,
   VariableValIn,
 } from '../types'
@@ -26,34 +30,11 @@ export type InlineValues = {
   }
 }
 
-// keys whose numeric values stay unitless on web. audited against RN numeric
-// style keys: opacity, zIndex, flex/flexGrow/flexShrink, aspectRatio, scale*,
-// fontWeight, elevation, shadowOpacity all end in one of these suffixes.
-// dimensional keys (radius, width, gap, size...) default to px.
-const unitlessSuffixes = [
-  'opacity',
-  'scale',
-  'zindex',
-  'weight',
-  'flex',
-  'grow',
-  'shrink',
-  'ratio',
-  'elevation',
-]
-
-export const isUnitlessVariableKey = (key: string): boolean => {
-  const lower = key.toLowerCase()
-  return unitlessSuffixes.some((suffix) => lower.endsWith(suffix))
-}
-
-// Property-less variable references scan token categories in this fixed order.
-const tokenCategoryOrder = ['color', 'space', 'size', 'radius', 'zIndex'] as const
-
-const themeKeySets = new WeakMap<object, Set<string>>()
+const themeKeySets = new WeakMap<ConfigRevisionState, Set<string>>()
 
 export const getThemeKeySet = (conf: TamaguiInternalConfig): Set<string> => {
-  const existing = themeKeySets.get(conf.themes)
+  const generation = getConfigRevisionState(conf)
+  const existing = themeKeySets.get(generation)
   if (existing) return existing
   const set = new Set<string>()
   for (const themeName in conf.themes) {
@@ -62,42 +43,21 @@ export const getThemeKeySet = (conf: TamaguiInternalConfig): Set<string> => {
     }
   }
   if (process.env.NODE_ENV === 'development') {
-    // <Theme> reads every non-reserved prop as a theme key, so a theme key or
+    // <ThemeUpdate> reads every non-reserved prop as a theme key, so a theme key or
     // config variable sharing a name with one of Theme's own props could never
     // be set inline. Caught once per config, at the source.
     for (const key of set) {
       if (reservedThemeProps[key]) {
         console.error(
-          `[tamagui] theme key "${key}" collides with a <Theme> prop, so it can never be set inline (<Theme ${key}="...">). Rename it.`
+          `[tamagui] theme key "${key}" collides with a reserved theme prop, so it cannot be set with <ThemeUpdate ${key}="...">. Rename it.`
         )
       }
     }
   }
-  themeKeySets.set(conf.themes, set)
+  themeKeySets.set(generation, set)
   return set
 }
 
-const findToken = (tokensParsed: TokensParsed, name: string): Variable | undefined => {
-  let found: Variable | undefined
-  let foundCategory: string | undefined
-  for (const category of tokenCategoryOrder) {
-    const token = tokensParsed[category]?.[name] as Variable | undefined
-    if (!token) continue
-    if (!found) {
-      found = token
-      foundCategory = category
-      if (process.env.NODE_ENV !== 'development') break
-    } else {
-      warnOnce(
-        `ambiguous:${name}`,
-        `Theme inline value: "${name}" exists in multiple token categories; using "${foundCategory}". Rename one of the colliding tokens.`
-      )
-      break
-    }
-  }
-  return found
-}
-
 const cssVariablePrefix = process.env.TAMAGUI_CSS_VARIABLE_PREFIX || ''
 
 // theme-key custom property reference, matching the declaration side in
@@ -105,7 +65,7 @@ const cssVariablePrefix = process.env.TAMAGUI_CSS_VARIABLE_PREFIX || ''
 const themeKeyVar = (key: string) => `var(--${cssVariablePrefix}${simpleHash(key, 40)})`
 
 /**
- * Resolves one inline `<Theme>` value to a CSS value string.
+ * Resolves one `<ThemeUpdate>` value to a CSS value string.
  * References emit var() so they stay live in the cascade; literals serialize
  * with the same unit rule numeric style props use (px unless unitless key).
  * Configured names resolve first; a lookup miss stays literal.
@@ -131,7 +91,7 @@ export function resolveVariableValueToCSS(
     return themeKeyVar(name)
   }
 
-  const token = findToken(conf.tokensParsed, name)
+  const token = findVariableToken(conf.tokensParsed, name)
   if (token) {
     return token.variable
   }
@@ -202,10 +162,11 @@ const getThemedBucketNames = (themes: InlineValues['themes']): string[] => {
 // scheme-stripped theme name in the config. broader than the style grammar's
 // theme modifiers, which require a top-level conf.themes key and so can't
 // target a `blue` that only exists as `dark_blue`/`light_blue`
-const themeBucketNameSets = new WeakMap<object, Set<string>>()
+const themeBucketNameSets = new WeakMap<ConfigRevisionState, Set<string>>()
 
 const getThemeBucketNames = (conf: TamaguiInternalConfig): Set<string> => {
-  let set = themeBucketNameSets.get(conf.themes)
+  const generation = getConfigRevisionState(conf)
+  let set = themeBucketNameSets.get(generation)
   if (!set) {
     set = new Set()
     for (const themeName in conf.themes) {
@@ -214,7 +175,7 @@ const getThemeBucketNames = (conf: TamaguiInternalConfig): Set<string> => {
         set.add(parts.slice(0, i).join('_'))
       }
     }
-    themeBucketNameSets.set(conf.themes, set)
+    themeBucketNameSets.set(generation, set)
   }
   return set
 }
@@ -304,7 +265,7 @@ const getCycleDroppedKeys = (props: InlineValues): Set<string> | null => {
 const rulesCache = new Map<string, VariablesCSS>()
 
 /**
- * Builds the deterministic identifier and CSS rules for inline `<Theme>` values.
+ * Builds the deterministic identifier and CSS rules for `<ThemeUpdate>` values.
  * Identifier is a pure function of the resolved declarations so SSR and
  * client agree, and a build-time extractor can precompute it.
  *
@@ -419,14 +380,6 @@ export function getVariablesCSSRules(
 
 // non-enumerable marker on merged theme objects: cache key for idempotency,
 // overridden key set, and literal light/dark pairs for the iOS fast-scheme path
-export const inlineLayerKey = '_tmgInlineLayer'
-
-export type InlineLayerInfo = {
-  key: string
-  overridden: Set<string>
-  pairs: Record<string, { light: string | number; dark: string | number }>
-}
-
 const serializeInlineValue = (value: VariableValIn): string =>
   value && typeof value === 'object'
     ? `object:px${value.val}`
@@ -446,7 +399,7 @@ const serializeBucket = (bucket: InlineValues['values']): string => {
 
 // memoized per layer object: the flat-props path hands back identity-stable
 // layers, so this is one serialization per distinct value set instead of one
-// per render (getPropsKey calls it on every render of every <Theme>)
+// per render (getPropsKey calls it on every render of every <ThemeUpdate>)
 const inlineKeys = new WeakMap<InlineValues, string>()
 
 export const getInlineValuesKey = (inline: InlineValues): string => {
@@ -463,29 +416,7 @@ export const getInlineValuesKey = (inline: InlineValues): string => {
   return key
 }
 
-// ---- flat theme-value props: <Theme background-hover="blue4 dark:blue2"> ----
-
-const registryViews = new WeakMap<object, ModifierRegistryView>()
-
-/**
- * Theme and platform are the only modifiers a subtree-wide value can honor.
- * Everything else still parses as a modifier so it can be rejected by name
- * below, rather than coming back as a generic "unregistered modifier".
- */
-const getModifierRegistry = (conf: TamaguiInternalConfig): ModifierRegistryView => {
-  let view = registryViews.get(conf.themes)
-  if (!view) {
-    view = {
-      get(name: string) {
-        if (grammarPlatformNames.has(name)) return 'platform'
-        if (isRootThemeName(name) && getThemeBucketNames(conf).has(name)) return 'theme'
-        return 'state'
-      },
-    }
-    registryViews.set(conf.themes, view)
-  }
-  return view
-}
+// ---- flat theme-value props: <ThemeUpdate background-hover="blue4 dark:blue2"> ----
 
 /**
  * One authored theme-value clause the parser could not use. The runtime warns
@@ -499,10 +430,78 @@ type FlatBuckets = {
   themes: Record<string, Record<string, VariableValIn>> | null
 }
 
-const parsedInlineValues = new WeakMap<
-  object,
-  Map<string, ReturnType<typeof parseValue>>
->()
+type FlatThemeModifier = [
+  name: string,
+  kind: 0 | typeof modifierKindPlatform | typeof modifierKindTheme,
+]
+type FlatThemeClause = [payload: string, modifiers: FlatThemeModifier[]]
+type FlatThemeValue = {
+  base: string | null
+  clauses: FlatThemeClause[] | null
+  error: string | null
+}
+type FlatThemeScanContext = {
+  source: string
+  themeBuckets: Set<string>
+  out: FlatThemeValue
+  pending: FlatThemeModifier[] | null
+  chainStart: number
+  chainEnd: number
+}
+
+const themeUpdateFlatHandler: ClauseIdentityHandler<FlatThemeScanContext> = {
+  segment(ctx, start, end, isBase) {
+    if (isBase) {
+      ctx.out.base = start < end ? ctx.source.slice(start, end) : null
+    }
+  },
+
+  chain(ctx, start, end) {
+    ctx.pending = []
+    ctx.chainStart = start
+    ctx.chainEnd = end
+  },
+
+  modifier(ctx, start, end) {
+    const name = ctx.source.slice(start, end)
+    const kind =
+      // theme updates intentionally keep their subtree-specific collision order:
+      // platform, then theme, then every unsupported kind. direct styles use
+      // the shared vocabulary's state/media/platform/theme order instead.
+      grammarPlatformNames.has(name)
+        ? modifierKindPlatform
+        : isRootThemeName(name) && ctx.themeBuckets.has(name)
+          ? modifierKindTheme
+          : 0
+    ctx.pending!.push([name, kind])
+  },
+
+  clause(ctx, _start, _chainEnd, start, end) {
+    ;(ctx.out.clauses ||= []).push([ctx.source.slice(start, end), ctx.pending!])
+  },
+
+  error(ctx, code: ClauseIdentityErrorCode, index) {
+    if (ctx.out.error !== null) return
+    if (code === 'empty-modifier') {
+      ctx.out.error = 'a modifier chain has an empty segment'
+    } else if (code === 'empty-payload') {
+      ctx.out.error = `the "${ctx.source.slice(ctx.chainStart, ctx.chainEnd)}:" clause has no value`
+    } else if (code === 'invalid-character') {
+      ctx.out.error = `"${ctx.source[index]}" cannot appear in a value: it would end the declaration or rule`
+    } else if (code === 'unterminated-string') {
+      ctx.out.error = `unterminated ${ctx.source[index]} string`
+    } else if (code === 'unterminated-comment') {
+      ctx.out.error =
+        'unterminated "/*" comment: it would swallow the rules after this one'
+    } else if (code === 'stray-comment-close') {
+      ctx.out.error = 'stray "*/": it would close a comment opened somewhere else'
+    } else {
+      ctx.out.error = 'unterminated "(" in value'
+    }
+  },
+}
+
+const parsedInlineValues = new WeakMap<ConfigRevisionState, Map<string, FlatThemeValue>>()
 
 const addFlatValue = (
   out: FlatBuckets,
@@ -526,50 +525,60 @@ const addFlatValue = (
     return
   }
 
-  let configValues = parsedInlineValues.get(conf.themes)
+  const generation = getConfigRevisionState(conf)
+  let configValues = parsedInlineValues.get(generation)
   if (!configValues) {
     configValues = new Map()
-    parsedInlineValues.set(conf.themes, configValues)
+    parsedInlineValues.set(generation, configValues)
   }
 
   let parsed = configValues.get(raw)
   if (!parsed) {
-    parsed = parseValue(raw, getModifierRegistry(conf))
+    parsed = { base: null, clauses: null, error: null }
+    reduceFlatValueIdentity(raw, themeUpdateFlatHandler, {
+      source: raw,
+      themeBuckets: getThemeBucketNames(conf),
+      out: parsed,
+      pending: null,
+      chainStart: 0,
+      chainEnd: 0,
+    })
     if (configValues.size >= 10_000) {
       configValues.clear()
     }
     configValues.set(raw, parsed)
   }
 
-  if (!parsed.ok) {
+  if (parsed.error !== null) {
     report(
       `parse:${key}:${raw}`,
-      `<Theme ${key}="${raw}">: ${parsed.errors[0].message}`,
+      `<ThemeUpdate ${key}="${raw}">: ${parsed.error}`,
       'Dropping.'
     )
     return
   }
 
-  const { base, clauses } = parsed.value
+  const { base, clauses } = parsed
   if (base !== null) {
     out.values[key] = base
   }
 
-  for (const clause of clauses) {
+  if (!clauses) return
+  for (const [payload, modifiers] of clauses) {
     let themeName: string | undefined
     let applies = true
 
-    for (const modifier of clause.modifiers) {
-      if (grammarPlatformNames.has(modifier)) {
+    for (const [modifier, kind] of modifiers) {
+      if (kind === modifierKindPlatform) {
         // platform is fixed for the process, so this resolves once per value
         applies &&= platformMatches(modifier)
         continue
       }
-      if (isRootThemeName(modifier) && getThemeBucketNames(conf).has(modifier)) {
+      if (kind === modifierKindTheme) {
         if (themeName !== undefined) {
           report(
             `two-themes:${key}:${raw}`,
-            `<Theme ${key}="${raw}">: "${themeName}:${modifier}:" targets two themes at once, which a subtree value can't express. Name the composed theme instead.`,
+            `<ThemeUpdate ${key}="${raw}">: "${themeName}:${modifier}:" targets two themes at once, which a subtree value can't express. Name the composed theme instead.`,
             'Dropping the clause.'
           )
           applies = false
@@ -580,7 +589,7 @@ const addFlatValue = (
       }
       report(
         `unsupported-modifier:${modifier}`,
-        `<Theme ${key}="${raw}">: "${modifier}:" isn't supported here. Theme values apply to a whole subtree, so only theme (dark:) and platform (ios:) modifiers work.`,
+        `<ThemeUpdate ${key}="${raw}">: "${modifier}:" isn't supported here. Theme values apply to a whole subtree, so only theme (dark:) and platform (ios:) modifiers work.`,
         'Dropping the clause.'
       )
       applies = false
@@ -589,29 +598,29 @@ const addFlatValue = (
 
     if (!applies) continue
     if (themeName === undefined) {
-      out.values[key] = clause.payload
+      out.values[key] = payload
     } else {
-      ;((out.themes ||= {})[themeName] ||= {})[key] = clause.payload
+      ;((out.themes ||= {})[themeName] ||= {})[key] = payload
     }
   }
 }
 
-// keyed by config and raw prop values, so repeat renders of the same <Theme>
+// keyed by config and raw prop values, so repeat renders of the same <ThemeUpdate>
 // reuse one layer object. downstream identity caches and snapshot bailouts key
 // off this object. each config cache is bounded with the same clear-on-limit
 // pattern as simpleHash's string cache.
-const flatLayers = new WeakMap<object, Map<string, InlineValues>>()
+const flatLayers = new WeakMap<ConfigRevisionState, Map<string, InlineValues>>()
 
 /**
- * Reads theme-key props off a <Theme> into the inline layer shape the rest of
+ * Reads theme-key props off a <ThemeUpdate> into the layer shape the rest of
  * the system already consumes. Returns null when the element carries no theme
  * key props at all, which is one loop over its props (two entries for a plain
- * `<Theme name="dark">`) and no allocation.
+ * `<ThemeUpdate>`) and no allocation.
  *
  * A key that is present but currently undefined still produces an empty
  * layer. Presence, not value, is what makes an element a theme-updating
  * one (the same rule `hasThemeUpdatingProps` applies to `name`), and it is
- * what keeps `<Theme background={on ? 'red' : undefined}>` rendering the same
+ * what keeps `<ThemeUpdate background={on ? 'red' : undefined}>` rendering the same
  * tree in both states instead of remounting its subtree when a value appears.
  */
 export function getInlineValuesFromProps(
@@ -632,10 +641,11 @@ export function getInlineValuesFromProps(
 
   if (!hasKey) return null
 
-  let configLayers = flatLayers.get(conf.themes)
+  const generation = getConfigRevisionState(conf)
+  let configLayers = flatLayers.get(generation)
   if (!configLayers) {
     configLayers = new Map()
-    flatLayers.set(conf.themes, configLayers)
+    flatLayers.set(generation, configLayers)
   }
 
   // a caller that asked for issues has to see them for every call, and a cache
@@ -665,10 +675,13 @@ export function getInlineValuesFromProps(
   return layer
 }
 
-const mergedThemeCache = new WeakMap<object, Map<string, Record<string, Variable>>>()
+const mergedThemeCache = new WeakMap<
+  ConfigRevisionState,
+  WeakMap<object, Map<string, Record<string, Variable>>>
+>()
 
 /**
- * Builds the merged theme for an inline `<Theme>` layer: parent theme spread plus
+ * Builds the merged theme for a `<ThemeUpdate>` layer: parent theme spread plus
  * overridden keys as variables, resolved per the shared contract (effective
  * map = values + matching non-scheme theme buckets + scheme bucket,
  * fixed-point references, cycle-involved keys dropped everywhere). Non-scheme
@@ -685,6 +698,7 @@ export function getMergedInlineTheme(
   themeName: string | undefined,
   conf: TamaguiInternalConfig
 ): Record<string, Variable> {
+  const generation = getConfigRevisionState(conf)
   const name = themeName || 'light'
   const activeScheme = name === 'dark' || name.startsWith('dark_') ? 'dark' : 'light'
 
@@ -706,12 +720,15 @@ export function getMergedInlineTheme(
   const cacheKey = `${getInlineValuesKey(inline)}|${activeScheme}|${matched ? matched.join(',') : ''}`
 
   // idempotency: re-applying the same layer to its own output is a no-op
-  const existingInfo = (parentTheme as any)[inlineLayerKey] as InlineLayerInfo | undefined
-  if (existingInfo?.key === cacheKey) {
+  const existingInfo = (parentTheme as any)[themeUpdateStateKey] as
+    | ThemeUpdateLayerInfo
+    | undefined
+  if (existingInfo?.generation === generation && existingInfo.key === cacheKey) {
     return parentTheme
   }
 
-  let byKey = mergedThemeCache.get(parentTheme)
+  let generationCache = mergedThemeCache.get(generation)
+  let byKey = generationCache?.get(parentTheme)
   const cached = byKey?.get(cacheKey)
   if (cached) return cached
 
@@ -749,7 +766,7 @@ export function getMergedInlineTheme(
       if (themeValue !== undefined) {
         return isVariable(themeValue) ? themeValue.val : themeValue
       }
-      const token = findToken(conf.tokensParsed, name)
+      const token = findVariableToken(conf.tokensParsed, name)
       if (token) return token.val
       return value
     }
@@ -759,8 +776,9 @@ export function getMergedInlineTheme(
     return value
   }
 
-  const info: InlineLayerInfo = {
+  const info: ThemeUpdateLayerInfo = {
     key: cacheKey,
+    generation,
     // nested layers: carry the parent layer's overrides forward (its values
     // are plain enumerable entries after the spread, but the iOS pair info
     // would otherwise be lost)
@@ -798,7 +816,7 @@ export function getMergedInlineTheme(
       (typeof v === 'string' &&
         !(v in effective) &&
         !(v in parentTheme) &&
-        !findToken(conf.tokensParsed, v)) ||
+        !findVariableToken(conf.tokensParsed, v)) ||
       typeof v === 'number'
     if (isLiteral(activeLiteral) && isLiteral(oppositeLiteral)) {
       info.pairs[key] = {
@@ -818,84 +836,20 @@ export function getMergedInlineTheme(
     return parentTheme
   }
 
-  Object.defineProperty(merged, inlineLayerKey, {
+  Object.defineProperty(merged, themeUpdateStateKey, {
     value: info,
     enumerable: false,
   })
 
   byKey ||= new Map()
-  mergedThemeCache.set(parentTheme, byKey)
+  if (!generationCache) {
+    generationCache = new WeakMap()
+    mergedThemeCache.set(generation, generationCache)
+  }
+  generationCache.set(parentTheme, byKey)
   if (byKey.size >= 10_000) {
     byKey.clear()
   }
   byKey.set(cacheKey, merged)
   return merged
 }
-
-/**
- * Config-level custom variables: merged into every base theme at createTamagui
- * time so they behave exactly like theme keys in every existing code path.
- * References resolve per-theme at parse time; sub-themes inherit through
- * proxyThemesToParents (native) and the cascade (web).
- */
-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
-      // other config variables first (chains allowed, cycles dropped)
-      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 = findToken(tokensParsed, name)
-      return token ? token.val : value
-    }
-    return value
-  }
-
-  for (const key in variables) {
-    // an explicit theme value always wins over a config variable default
-    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/warnOnce.ts

@@ -25,7 +25,7 @@ export function warnOnce(key: string, message = key) {
 /**
  * A value the flat-value scanner refused, reported where the author can act on
  * it. Item 5b left refusal silent, matching the clause scanner, so an author
- * who typed a `;` got nothing back and a style simply never appeared.
+ * who typed a `;` got nothing back and the bad segment simply never appeared.
  *
  * It warns rather than throws, and the throw it replaced is the reason to say
  * why. A style value is an ordinary place to put a string an app did not write
@@ -42,6 +42,6 @@ export function warnOnce(key: string, message = key) {
 export function warnRefusedValue(property: string, value: string, reason: string) {
   warnOnce(
     `refused:${property}=${value}`,
-    `${property}="${value}" was dropped: ${reason}`
+    `${property}="${value}" had a segment dropped: ${reason}`
   )
 }

package/src/hooks/getThemeProxied.ts

@@ -3,7 +3,10 @@ import type { MutableRefObject } from 'react'
 import { getConfig, getSetting } from '../config'
 import { getVariable } from '../createVariable'
 import { getDynamicVal } from '../helpers/getDynamicVal'
-import { inlineLayerKey, type InlineLayerInfo } from '../helpers/variables'
+import {
+  themeUpdateStateKey,
+  type ThemeUpdateLayerInfo,
+} from '../helpers/themeUpdateState'
 import type {
   ThemeParsed,
   ThemeState,
@@ -50,7 +53,7 @@ type ThemeGettable<Val> = Val & {
 
 // only proxy each theme one time, after that we know that renders are sync,
 // so we can just change the focus of the proxied theme and it can be re-used.
-// WeakMap so dynamically created theme objects (inline <Theme> layers)
+// WeakMap so dynamically created ThemeUpdate theme objects
 // don't retain their proxies after the layer is gone
 const trackingCache: WeakMap<ThemeParsed, ThemeProxied> = new WeakMap()
 const untrackedCache: WeakMap<ThemeParsed, ThemeProxied> = new WeakMap()
@@ -148,13 +151,12 @@ export function getThemeProxied(
             )
           }
 
-          // an inline <Theme> layer overrides this key: the config.themes
+          // a ThemeUpdate layer overrides this key: the config.themes
           // pair below would bypass it. use the layer's literal light/dark
           // pair when it has one, otherwise deopt to normal tracking
-          const inlineLayer =
-            process.env.TAMAGUI_RUNTIME_INLINE_THEME_VALUES === 'disabled'
-              ? undefined
-              : ((curState.theme as any)?.[inlineLayerKey] as InlineLayerInfo | undefined)
+          const inlineLayer = (curState.theme as any)?.[themeUpdateStateKey] as
+            | ThemeUpdateLayerInfo
+            | undefined
           const inlineOverridden = !!inlineLayer?.overridden.has(key)
 
           if (shouldOptimize && inlineOverridden) {