@tamagui/web 1.52.6 → 1.52.8

package/src/createTamagui.ts

@@ -1,7 +1,7 @@
 import { isWeb } from '@tamagui/constants'
 
-import { configListeners, setConfig } from './config'
-import { Variable } from './createVariable'
+import { configListeners, setConfig, setTokens } from './config'
+import { Variable, createVariable, isVariable } from './createVariable'
 import { createVariables } from './createVariables'
 import { getThemeCSSRules } from './helpers/getThemeCSSRules'
 import {
@@ -24,6 +24,8 @@ import {
   TamaguiInternalConfig,
   ThemeParsed,
   ThemesLikeObject,
+  TokensMerged,
+  TokensParsed,
 } from './types'
 
 // config is re-run by the @tamagui/static, dont double validate
@@ -48,13 +50,25 @@ export function createTamagui<Conf extends CreateTamaguiProps>(
     }
   }
 
-  // faster $lookups
-  const tokensParsed: any = Object.fromEntries(
-    Object.entries(configIn.tokens).map(([k, v]) => {
-      const val = Object.fromEntries(Object.entries(v).map(([k, v]) => [`$${k}`, v]))
-      return [k, val]
-    })
-  )
+  // ensure variables
+  const tokens = createVariables(configIn.tokens)
+
+  // faster lookups
+  const tokensParsed: TokensParsed = {} as any
+  const tokensMerged: TokensMerged = {} as any
+  for (const cat in tokens) {
+    tokensParsed[cat] = {}
+    tokensMerged[cat] = {}
+    const tokenCat = tokens[cat]
+    for (const key in tokenCat) {
+      const val = tokenCat[key]
+      const prefixedKey = `$${key}`
+      tokensParsed[cat][prefixedKey] = val as any
+      tokensMerged[cat][prefixedKey] = val as any
+      tokensMerged[cat][key] = val as any
+    }
+  }
+  setTokens(tokensMerged)
 
   const noThemes = Object.keys(configIn.themes).length === 0
   const foundThemes = scanAllSheets(noThemes, tokensParsed)
@@ -93,9 +107,9 @@ export function createTamagui<Conf extends CreateTamaguiProps>(
         { name: string; declarations: string[]; language?: string }
       > = {}
 
-      for (const key in configIn.tokens) {
-        for (const skey in configIn.tokens[key]) {
-          const variable = configIn.tokens[key][skey] as Variable
+      for (const key in tokens) {
+        for (const skey in tokens[key]) {
+          const variable = tokens[key][skey] as any as Variable
 
           // set specific tokens (like $size.sm)
           specificTokens[`$${key}.${skey}`] = variable
@@ -240,8 +254,7 @@ ${runtimeStyles}`
     animations: {} as any,
     media: {},
     ...configIn,
-    // already processed by createTokens()
-    tokens: configIn.tokens as any,
+    tokens: tokens as any,
     // vite made this into a function if it wasn't set
     shorthands,
     inverseShorthands: shorthands
@@ -250,7 +263,7 @@ ${runtimeStyles}`
     themes: themeConfig.themes as any,
     fontsParsed,
     themeConfig,
-    tokensParsed,
+    tokensParsed: tokensParsed as any,
     parsed: true,
     getNewCSS,
     getCSS,

package/src/createVariables.ts

@@ -14,18 +14,25 @@ export type DeepVariableObject<A extends DeepTokenObject> = {
     : never
 }
 
+const cache = new WeakMap()
+
+// recursive...
+
 export const createVariables = <A extends DeepTokenObject>(
   tokens: A,
   parentPath = '',
   isFont = false
 ): DeepVariableObject<A> => {
+  if (cache.has(tokens)) return tokens
+
   const res: any = {}
   let i = 0
   for (let keyIn in tokens) {
     i++
     const val = tokens[keyIn]
-    const keyWithPrefix = keyIn[0] === '$' ? keyIn : `$${keyIn}`
-    const key = keyWithPrefix.slice(1)
+    const isPrefixed = keyIn[0] === '$'
+    const keyWithPrefix = isPrefixed ? keyIn : `$${keyIn}`
+    const key = isPrefixed ? keyWithPrefix.slice(1) : keyIn
     if (isVariable(val)) {
       res[key] = val
       continue
@@ -35,11 +42,15 @@ export const createVariables = <A extends DeepTokenObject>(
     name = parentPath ? `${parentPath}-${name}` : niceKey
     if (val && typeof val === 'object') {
       // recurse
-      res[key] = createVariables(tokens[key] as any, name)
+      res[key] = createVariables(tokens[key] as any, name, isFont)
       continue
     }
-    res[key] = isVariable(val) ? val : createVariable({ val, name, key: keyWithPrefix })
+    const finalValue = isVariable(val)
+      ? val
+      : createVariable({ val, name, key: keyWithPrefix })
+    res[key] = finalValue
   }
 
+  cache.set(res, true)
   return res
 }

package/src/helpers/ThemeManager.tsx

@@ -46,7 +46,7 @@ export class ThemeManager {
     parentManagerIn?: ThemeManager | 'root' | null | undefined
   ) {
     if (parentManagerIn === 'root') {
-      this.updateState(props, false)
+      this.updateStateFromProps(props, false)
       return
     }
 
@@ -66,51 +66,47 @@ export class ThemeManager {
 
     this.parentManager = parentManagerIn
 
-    if (this.updateState(props, false)) {
+    if (this.updateStateFromProps(props, false)) {
       return
     }
 
     return parentManagerIn || this
   }
 
-  updateState(
+  updateStateFromProps(
     props: ThemeProps & { forceTheme?: ThemeParsed } = this.props || {},
     shouldNotify = true
   ) {
-    const isChanging = (() => {
-      if (props.forceTheme) {
-        this.state.theme = props.forceTheme
-        this.state.name = props.name || ''
-        return true
-      }
-      const nextState = this.getStateIfChanged(props)
-      if (nextState) {
-        this.props = props
-        this.state = nextState
-        return true
-      }
-    })()
-
-    if (isChanging) {
-      const names = this.state.name.split('_')
-      const lastName = names[names.length - 1][0]
-      this.isComponent = lastName[0] === lastName[0].toUpperCase()
-      this._allKeys = null
-      this.scheme = names[0] === 'light' ? 'light' : names[0] === 'dark' ? 'dark' : null
-
-      if (process.env.NODE_ENV === 'development') {
-        this['_numChangeEventsSent'] ??= 0
-        this['_numChangeEventsSent']++
-      }
-
-      if (shouldNotify) {
-        queueMicrotask(() => {
-          this.notify(!!props.forceTheme)
-        })
-      }
+    this.props = props
+    if (props.forceTheme) {
+      this.state.theme = props.forceTheme
+      this.state.name = props.name || ''
+      return true
+    }
+    const nextState = this.getStateIfChanged(props)
+    if (nextState) {
+      this.updateState(nextState, shouldNotify)
+      return nextState
+    }
+  }
 
-      return this.state
+  updateState(nextState: ThemeManagerState, shouldNotify = true) {
+    this.state = nextState
+    const names = this.state.name.split('_')
+    const lastName = names[names.length - 1][0]
+    this.isComponent = lastName[0] === lastName[0].toUpperCase()
+    this._allKeys = null
+    this.scheme = names[0] === 'light' ? 'light' : names[0] === 'dark' ? 'dark' : null
+    if (process.env.NODE_ENV === 'development') {
+      this['_numChangeEventsSent'] ??= 0
+      this['_numChangeEventsSent']++
     }
+    if (shouldNotify) {
+      queueMicrotask(() => {
+        this.notify()
+      })
+    }
+    return this.state
   }
 
   getStateIfChanged(
@@ -119,6 +115,7 @@ export class ThemeManager {
     parentManager = this.parentManager
   ) {
     const _ = this.getState(props, parentManager)
+
     // is removing
     if (state && state !== emptyState && !_) {
       return parentManager?.state

package/src/helpers/insertStyleRule.tsx

@@ -1,16 +1,13 @@
 import { isClient } from '@tamagui/constants'
 
-import { getConfig } from '../config'
-import { Variable, createVariable } from '../createVariable'
+import { createVariable } from '../createVariable'
 import type {
   DedupedTheme,
   DedupedThemes,
   RulesToInsert,
   ThemeParsed,
-  Tokens,
   TokensParsed,
 } from '../types'
-import { ensureThemeVariable } from './themes'
 
 const allSelectors: Record<string, string> = {}
 const allRules: Record<string, string> = {}
@@ -255,7 +252,7 @@ function addThemesFromCSS(cssStyleRule: CSSStyleRule, tokens?: TokensParsed) {
         val: value,
       },
       true
-    )
+    ) as any
   }
 
   const dedupedEntry: DedupedTheme = {

package/src/helpers/propMapper.ts

@@ -56,7 +56,7 @@ export const propMapper: PropMapper = (key, value, styleStateIn, subPropsIn) =>
     );
   }
 
-  if (variants && key in variants && value != null) {
+  if (variants && key in variants) {
     styleState.curProps[key] = value
 
     const variantValue = resolveVariants(key, value, styleProps, styleState, '')

package/src/helpers/proxyThemeToParents.ts

@@ -1,4 +1,4 @@
-import { getToken } from '../config'
+import { getToken, getTokenObject, getTokens } from '../config'
 import { GetThemeUnwrapped } from '../hooks/getThemeUnwrapped'
 import { DedupedThemes, ThemeParsed } from '../types'
 
@@ -51,7 +51,15 @@ export function proxyThemeToParents(themeName: string, theme: ThemeParsed) {
   return new Proxy(theme, {
     get(target, key) {
       if (key === GetThemeUnwrapped) return theme
-      if (Reflect.has(target, key)) return Reflect.get(target, key)
+      if (
+        key == null ||
+        // dont ask me, idk why but on hermes you can see that useTheme()[undefined] passes in STRING undefined to proxy
+        // if someone is crazy enough to use "undefined" as a theme key then this not working is on them
+        key == 'undefined' ||
+        Reflect.has(target, key)
+      ) {
+        return Reflect.get(target, key)
+      }
       // check parents
       for (let i = numParents - 1; i >= 0; i--) {
         const parent = themesRaw[parents[i]]
@@ -60,7 +68,7 @@ export function proxyThemeToParents(themeName: string, theme: ThemeParsed) {
           return Reflect.get(parent, key)
         }
       }
-      return getToken(key as any) ?? Reflect.get(target, key)
+      return getTokenObject(key as any) ?? Reflect.get(target, key)
     },
   })
 }

package/src/helpers/themeable.tsx

@@ -18,7 +18,11 @@ export function themeable<Component extends (props: any) => any>(
   const withThemeComponent = forwardRef(function WithTheme(props: ThemeableProps, ref) {
     const { themeInverse, theme, componentName, themeReset, ...rest } = props
 
-    const element = React.createElement(component, { ...rest, ref } as any)
+    const element = React.createElement(component, {
+      ...rest,
+      ref,
+      'data-disable-theme': true,
+    } as any)
 
     let contents = (
       <Theme

package/src/hooks/useTheme.tsx

@@ -3,7 +3,7 @@ import { isClient, isServer, isWeb } from '@tamagui/constants'
 import { useContext, useEffect, useLayoutEffect, useMemo, useRef, useState } from 'react'
 
 import { getConfig } from '../config'
-import { getVariable } from '../createVariable'
+import { Variable, getVariable } from '../createVariable'
 import { createProxy } from '../helpers/createProxy'
 import {
   ThemeManager,
@@ -11,7 +11,14 @@ import {
   getHasThemeUpdatingProps,
 } from '../helpers/ThemeManager'
 import { ThemeManagerContext } from '../helpers/ThemeManagerContext'
-import type { DebugProp, ThemeParsed, ThemeProps } from '../types'
+import type {
+  DebugProp,
+  ThemeParsed,
+  ThemeProps,
+  Tokens,
+  VariableVal,
+  VariableValGeneric,
+} from '../types'
 import { GetThemeUnwrapped } from './getThemeUnwrapped'
 
 export type ChangedThemeResponse = {
@@ -30,10 +37,22 @@ function getDefaultThemeProxied() {
   })
 }
 
+type ThemeGettable<Val> = Val & {
+  get: () =>
+    | string
+    | (Val extends Variable<infer X>
+        ? X extends VariableValGeneric
+          ? any
+          : X
+        : Val extends VariableVal
+        ? string | number
+        : unknown)
+}
+
 type UseThemeResult = {
-  [key in keyof ThemeParsed]: ThemeParsed[key] & {
-    get: () => string | ThemeParsed[key]['val']
-  }
+  [Key in keyof ThemeParsed]: ThemeGettable<ThemeParsed[Key]>
+} & {
+  [Key in keyof Tokens['color']]: ThemeGettable<string>
 }
 
 export const useTheme = (props: ThemeProps = emptyProps) => {
@@ -125,7 +144,13 @@ export function getThemeProxied(
       if (key === GetThemeUnwrapped) {
         return theme
       }
-      if (typeof key === 'string' && keys) {
+      if (
+        // dont ask me, idk why but on hermes you can see that useTheme()[undefined] passes in STRING undefined to proxy
+        // if someone is crazy enough to use "undefined" as a theme key then this not working is on them
+        key !== 'undefined' &&
+        typeof key === 'string' &&
+        keys
+      ) {
         // auto convert variables to plain
         const keyString = key[0] === '$' ? key.slice(1) : key
         const val = theme[keyString]
@@ -236,6 +261,7 @@ export const useChangeThemeEffect = (
       const disposeChangeListener = parentManager?.onChangeTheme((name, manager) => {
         const force = shouldUpdate?.()
         const doUpdate = force ?? Boolean(keys?.length || isNewTheme)
+
         if (process.env.NODE_ENV === 'development' && props.debug) {
           // prettier-ignore
           // rome-ignore lint/nursery/noConsoleLog: <explanation>
@@ -337,7 +363,7 @@ export const useChangeThemeEffect = (
           if (!prev.isNewTheme || !isWeb) {
             themeManager = getNewThemeManager()
           } else {
-            themeManager.updateState(nextState, true)
+            themeManager.updateState(nextState)
           }
         } else {
           if (prev.isNewTheme) {

package/src/types.tsx

@@ -191,7 +191,7 @@ export type ConfigListener = (conf: TamaguiInternalConfig) => void
 // to prevent things from going circular, hoisting some types in this file
 // to generally order them as building up towards TamaguiConfig
 
-export type VariableVal = number | string | Variable
+export type VariableVal = number | string | Variable | VariableValGeneric
 export type VariableColorVal = string | Variable
 
 type GenericKey = string
@@ -246,6 +246,8 @@ export type TamaguiBaseTheme = {
   shadowColorFocus: VariableColorVal
 }
 
+export type VariableValGeneric = { __generic: 1 }
+
 type GenericTokens = CreateTokens
 type GenericThemes = {
   [key: string]:
@@ -317,7 +319,7 @@ export type CreateTamaguiConfig<
   // parsed
   themes: {
     [Name in keyof B]: {
-      [Key in keyof B[Name]]: Variable
+      [Key in keyof B[Name]]: Variable<B[Name][Key]>
     }
   }
   shorthands: C
@@ -411,7 +413,7 @@ export type ThemeDefinition = BaseThemeDefinitions extends never
   : BaseThemeDefinitions
 export type ThemeKeys = keyof ThemeDefinition
 export type ThemeParsed = {
-  [key in ThemeKeys]: Variable<any>
+  [key in ThemeKeys]: ThemeDefinition[key]
 }
 
 export type Tokens = TamaguiConfig['tokens']

package/src/views/ThemeDebug.tsx

@@ -33,7 +33,7 @@ export function ThemeDebug({
         node.style.overflowY = 'scroll'
         node.style.position = 'fixed'
         node.style.zIndex = 10000000
-        node.style.top = '30px'
+        node.style.bottom = '30px'
         node.style.left = '30px'
         node.style.right = '30px'
         node.style.display = 'flex'
@@ -48,7 +48,7 @@ export function ThemeDebug({
       themeState.themeManager?.parentManager?.onChangeTheme((name, manager) => {
         setOnChangeCount((p) => ++p)
         console.warn(
-          `theme changed for ${themeState.themeManager?.id} from parent ${themeState.themeManager?.parentManager?.id}`,
+          `theme changed for ${themeState.themeManager?.id} from parent ${themeState.themeManager?.parentManager?.id} to new name`,
           name
         )
       })

package/types/config.d.ts

@@ -2,12 +2,14 @@ import { ConfigListener, TamaguiInternalConfig, Token, Tokens, TokensMerged } fr
 export declare const setConfig: (next: TamaguiInternalConfig) => void;
 export declare const setConfigFont: (name: string, font: any, fontParsed: any) => void;
 export declare const getConfig: () => TamaguiInternalConfig;
+export declare function setTokens(_: TokensMerged): void;
 export declare const getTokens: ({ prefixed, }?: {
     /**
      * Force either with $ or without $ prefix
      */
     prefixed?: boolean | undefined;
 }) => TokensMerged;
+export declare const getTokenObject: (value: Token, group?: keyof Tokens) => import("./createVariable").Variable<any>;
 export declare const getToken: (value: Token, group?: keyof Tokens, useVariable?: boolean) => any;
 export declare const getTokenValue: (value: Token, group?: keyof Tokens) => any;
 /**
@@ -21,23 +23,23 @@ export declare const useTokens: ({ prefixed, }?: {
 }) => TokensMerged;
 export declare const getThemes: () => {
     [x: string]: {
-        [x: string]: import("./createVariable").Variable<any>;
-        background?: import("./createVariable").Variable<any> | undefined;
-        backgroundHover?: import("./createVariable").Variable<any> | undefined;
-        backgroundPress?: import("./createVariable").Variable<any> | undefined;
-        backgroundFocus?: import("./createVariable").Variable<any> | undefined;
-        color?: import("./createVariable").Variable<any> | undefined;
-        colorHover?: import("./createVariable").Variable<any> | undefined;
-        colorPress?: import("./createVariable").Variable<any> | undefined;
-        colorFocus?: import("./createVariable").Variable<any> | undefined;
-        borderColor?: import("./createVariable").Variable<any> | undefined;
-        borderColorHover?: import("./createVariable").Variable<any> | undefined;
-        borderColorPress?: import("./createVariable").Variable<any> | undefined;
-        borderColorFocus?: import("./createVariable").Variable<any> | undefined;
-        shadowColor?: import("./createVariable").Variable<any> | undefined;
-        shadowColorHover?: import("./createVariable").Variable<any> | undefined;
-        shadowColorPress?: import("./createVariable").Variable<any> | undefined;
-        shadowColorFocus?: import("./createVariable").Variable<any> | undefined;
+        [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;
     };
 };
 export declare const configListeners: Set<ConfigListener>;

package/types/config.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"config.d.ts","sourceRoot":"","sources":["../src/config.ts"],"names":[],"mappings":"AAEA,OAAO,EACL,cAAc,EACd,qBAAqB,EACrB,KAAK,EACL,MAAM,EACN,YAAY,EACb,MAAM,SAAS,CAAA;AAIhB,eAAO,MAAM,SAAS,SAAU,qBAAqB,SAGpD,CAAA;AAED,eAAO,MAAM,aAAa,SAAU,MAAM,QAAQ,GAAG,cAAc,GAAG,SAMrE,CAAA;AAED,eAAO,MAAM,SAAS,6BASrB,CAAA;AAID,eAAO,MAAM,SAAS;IAGpB;;OAEG;;MAEI,YAYR,CAAA;AAED,eAAO,MAAM,QAAQ,UAAW,KAAK,UAAU,MAAM,MAAM,+BAO1D,CAAA;AAED,eAAO,MAAM,aAAa,UAAW,KAAK,UAAU,MAAM,MAAM,QAE/D,CAAA;AAED;;GAEG;AACH,eAAO,MAAM,SAAS;IAlCpB;;OAEG;;MAEI,YA8ByB,CAAA;AAElC,eAAO,MAAM,SAAS;;;;;;;;;;;;;;;;;;;;CAAqB,CAAA;AAE3C,eAAO,MAAM,eAAe,qBAA4B,CAAA;AAExD,eAAO,MAAM,gBAAgB,OAAQ,cAAc,SAMlD,CAAA;AAED,eAAO,MAAM,YAAY,QAAS,MAAM,SAAS,GAAG,SAGnD,CAAA;AAGD,eAAO,MAAM,OAAO,SAAU,MAAM,4DAQnC,CAAA"}
+{"version":3,"file":"config.d.ts","sourceRoot":"","sources":["../src/config.ts"],"names":[],"mappings":"AAEA,OAAO,EACL,cAAc,EACd,qBAAqB,EACrB,KAAK,EACL,MAAM,EACN,YAAY,EACb,MAAM,SAAS,CAAA;AAIhB,eAAO,MAAM,SAAS,SAAU,qBAAqB,SAGpD,CAAA;AAED,eAAO,MAAM,aAAa,SAAU,MAAM,QAAQ,GAAG,cAAc,GAAG,SAMrE,CAAA;AAED,eAAO,MAAM,SAAS,6BASrB,CAAA;AAGD,wBAAgB,SAAS,CAAC,CAAC,EAAE,YAAY,QAExC;AAED,eAAO,MAAM,SAAS;IAGpB;;OAEG;;MAEI,YAQR,CAAA;AAED,eAAO,MAAM,cAAc,UAAW,KAAK,UAAU,MAAM,MAAM,6CAShE,CAAA;AAED,eAAO,MAAM,QAAQ,UAAW,KAAK,UAAU,MAAM,MAAM,+BAG1D,CAAA;AAED,eAAO,MAAM,aAAa,UAAW,KAAK,UAAU,MAAM,MAAM,QAE/D,CAAA;AAED;;GAEG;AACH,eAAO,MAAM,SAAS;IArCpB;;OAEG;;MAEI,YAiCyB,CAAA;AAElC,eAAO,MAAM,SAAS;;;;;;;;;;;;;;;;;;;;CAAqB,CAAA;AAE3C,eAAO,MAAM,eAAe,qBAA4B,CAAA;AAExD,eAAO,MAAM,gBAAgB,OAAQ,cAAc,SAMlD,CAAA;AAED,eAAO,MAAM,YAAY,QAAS,MAAM,SAAS,GAAG,SAGnD,CAAA;AAGD,eAAO,MAAM,OAAO,SAAU,MAAM,4DAQnC,CAAA"}

package/types/createTamagui.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"createTamagui.d.ts","sourceRoot":"","sources":["../src/createTamagui.ts"],"names":[],"mappings":"AAiBA,OAAO,EACL,kBAAkB,EAIlB,kBAAkB,EAInB,MAAM,SAAS,CAAA;AAKhB,wBAAgB,aAAa,CAAC,IAAI,SAAS,kBAAkB,EAC3D,QAAQ,EAAE,IAAI,GACb,kBAAkB,CAAC,IAAI,CAAC,CA2P1B"}
+{"version":3,"file":"createTamagui.d.ts","sourceRoot":"","sources":["../src/createTamagui.ts"],"names":[],"mappings":"AAiBA,OAAO,EACL,kBAAkB,EAIlB,kBAAkB,EAMnB,MAAM,SAAS,CAAA;AAKhB,wBAAgB,aAAa,CAAC,IAAI,SAAS,kBAAkB,EAC3D,QAAQ,EAAE,IAAI,GACb,kBAAkB,CAAC,IAAI,CAAC,CAsQ1B"}

package/types/createVariables.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"createVariables.d.ts","sourceRoot":"","sources":["../src/createVariables.ts"],"names":[],"mappings":"AAEA,OAAO,EAAE,QAAQ,EAA8B,MAAM,kBAAkB,CAAA;AAEvE,KAAK,eAAe,CAAC,GAAG,SAAS,MAAM,GAAG,MAAM,GAAG,GAAG,IAAI;IACxD,CAAC,GAAG,EAAE,MAAM,GAAG,GAAG,GAAG,eAAe,CAAC,GAAG,CAAC,CAAA;CAC1C,CAAA;AAED,MAAM,MAAM,kBAAkB,CAAC,CAAC,SAAS,eAAe,IAAI;KACzD,GAAG,IAAI,MAAM,CAAC,GAAG,CAAC,CAAC,GAAG,CAAC,SAAS,MAAM,GAAG,MAAM,GAC5C,QAAQ,CAAC,CAAC,CAAC,GAAG,CAAC,CAAC,GAChB,CAAC,CAAC,GAAG,CAAC,SAAS,eAAe,GAC9B,kBAAkB,CAAC,CAAC,CAAC,GAAG,CAAC,CAAC,GAC1B,KAAK;CACV,CAAA;AAED,eAAO,MAAM,eAAe,6GA4B3B,CAAA"}
+{"version":3,"file":"createVariables.d.ts","sourceRoot":"","sources":["../src/createVariables.ts"],"names":[],"mappings":"AAEA,OAAO,EAAE,QAAQ,EAA8B,MAAM,kBAAkB,CAAA;AAEvE,KAAK,eAAe,CAAC,GAAG,SAAS,MAAM,GAAG,MAAM,GAAG,GAAG,IAAI;IACxD,CAAC,GAAG,EAAE,MAAM,GAAG,GAAG,GAAG,eAAe,CAAC,GAAG,CAAC,CAAA;CAC1C,CAAA;AAED,MAAM,MAAM,kBAAkB,CAAC,CAAC,SAAS,eAAe,IAAI;KACzD,GAAG,IAAI,MAAM,CAAC,GAAG,CAAC,CAAC,GAAG,CAAC,SAAS,MAAM,GAAG,MAAM,GAC5C,QAAQ,CAAC,CAAC,CAAC,GAAG,CAAC,CAAC,GAChB,CAAC,CAAC,GAAG,CAAC,SAAS,eAAe,GAC9B,kBAAkB,CAAC,CAAC,CAAC,GAAG,CAAC,CAAC,GAC1B,KAAK;CACV,CAAA;AAMD,eAAO,MAAM,eAAe,6GAmC3B,CAAA"}

package/types/helpers/ThemeManager.d.ts

@@ -25,9 +25,10 @@ export declare class ThemeManager {
     state: ThemeManagerState;
     scheme: 'light' | 'dark' | null;
     constructor(props?: ThemeProps, parentManagerIn?: ThemeManager | 'root' | null | undefined);
-    updateState(props?: ThemeProps & {
+    updateStateFromProps(props?: ThemeProps & {
         forceTheme?: ThemeParsed;
-    }, shouldNotify?: boolean): ThemeManagerState | undefined;
+    }, shouldNotify?: boolean): true | ThemeManagerState | undefined;
+    updateState(nextState: ThemeManagerState, shouldNotify?: boolean): ThemeManagerState;
     getStateIfChanged(props?: ThemeProps, state?: ThemeManagerState | null, parentManager?: ThemeManager | null): ThemeManagerState | null | undefined;
     getStateShouldChange(nextState: ThemeManagerState | null, state?: ThemeManagerState | null): boolean;
     getState(props?: ThemeProps, parentManager?: ThemeManager | null): ThemeManagerState | null;

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

@@ -1 +1 @@
-{"version":3,"file":"ThemeManager.d.ts","sourceRoot":"","sources":["../../src/helpers/ThemeManager.tsx"],"names":[],"mappings":"AAEA,OAAO,EAAE,WAAW,EAAE,UAAU,EAAE,MAAM,UAAU,CAAA;AAElD,KAAK,aAAa,GAAG,CACnB,IAAI,EAAE,MAAM,GAAG,IAAI,EACnB,YAAY,EAAE,YAAY,EAC1B,MAAM,EAAE,OAAO,KACZ,IAAI,CAAA;AAET,MAAM,MAAM,mBAAmB,GAAG;IAChC,SAAS,CAAC,EAAE,MAAM,CAAA;IAClB,aAAa,CAAC,EAAE,YAAY,GAAG,IAAI,CAAA;IACnC,IAAI,CAAC,EAAE,MAAM,GAAG,IAAI,CAAA;IACpB,KAAK,CAAC,EAAE,GAAG,CAAA;IACX,KAAK,CAAC,EAAE,OAAO,CAAA;CAChB,CAAA;AAED,MAAM,MAAM,iBAAiB,GAAG;IAC9B,IAAI,EAAE,MAAM,CAAA;IACZ,KAAK,CAAC,EAAE,WAAW,GAAG,IAAI,CAAA;IAC1B,SAAS,CAAC,EAAE,MAAM,CAAA;IAClB,UAAU,CAAC,EAAE,MAAM,CAAA;IACnB,aAAa,CAAC,EAAE,MAAM,CAAA;IACtB,OAAO,CAAC,EAAE,OAAO,CAAA;CAClB,CAAA;AAID,wBAAgB,wBAAwB,CAAC,KAAK,EAAE,UAAU,WAEzD;AAID,qBAAa,YAAY;IASd,KAAK,EAAE,UAAU;IAR1B,EAAE,SAAQ;IACV,WAAW,UAAQ;IACnB,cAAc,qBAA2B;IACzC,aAAa,EAAE,YAAY,GAAG,IAAI,CAAO;IACzC,KAAK,EAAE,iBAAiB,CAAa;IACrC,MAAM,EAAE,OAAO,GAAG,MAAM,GAAG,IAAI,CAAO;gBAG7B,KAAK,GAAE,UAAe,EAC7B,eAAe,CAAC,EAAE,YAAY,GAAG,MAAM,GAAG,IAAI,GAAG,SAAS;IA8B5D,WAAW,CACT,KAAK,GAAE,UAAU,GAAG;QAAE,UAAU,CAAC,EAAE,WAAW,CAAA;KAAqB,EACnE,YAAY,UAAO;IAsCrB,iBAAiB,CACf,KAAK,aAAa,EAClB,KAAK,GAAE,iBAAiB,GAAG,IAAiB,EAC5C,aAAa,sBAAqB;IAYpC,oBAAoB,CAClB,SAAS,EAAE,iBAAiB,GAAG,IAAI,EACnC,KAAK,GAAE,iBAAiB,GAAG,IAAiB;IAQ9C,QAAQ,CAAC,KAAK,aAAa,EAAE,aAAa,sBAAqB;IAO/D,QAAQ,EAAE,GAAG,CAAC,MAAM,CAAC,GAAG,IAAI,CAAO;IACnC,IAAI,OAAO,gBAMV;IAED,MAAM,CAAC,MAAM,UAAQ;IAIrB,aAAa,CAAC,EAAE,EAAE,aAAa,EAAE,OAAO,CAAC,EAAE,MAAM;CAalD;AAuKD,wBAAgB,4BAA4B,CAAC,YAAY,CAAC,EAAE,YAAY,GAAG,IAAI,4CAe9E"}
+{"version":3,"file":"ThemeManager.d.ts","sourceRoot":"","sources":["../../src/helpers/ThemeManager.tsx"],"names":[],"mappings":"AAEA,OAAO,EAAE,WAAW,EAAE,UAAU,EAAE,MAAM,UAAU,CAAA;AAElD,KAAK,aAAa,GAAG,CACnB,IAAI,EAAE,MAAM,GAAG,IAAI,EACnB,YAAY,EAAE,YAAY,EAC1B,MAAM,EAAE,OAAO,KACZ,IAAI,CAAA;AAET,MAAM,MAAM,mBAAmB,GAAG;IAChC,SAAS,CAAC,EAAE,MAAM,CAAA;IAClB,aAAa,CAAC,EAAE,YAAY,GAAG,IAAI,CAAA;IACnC,IAAI,CAAC,EAAE,MAAM,GAAG,IAAI,CAAA;IACpB,KAAK,CAAC,EAAE,GAAG,CAAA;IACX,KAAK,CAAC,EAAE,OAAO,CAAA;CAChB,CAAA;AAED,MAAM,MAAM,iBAAiB,GAAG;IAC9B,IAAI,EAAE,MAAM,CAAA;IACZ,KAAK,CAAC,EAAE,WAAW,GAAG,IAAI,CAAA;IAC1B,SAAS,CAAC,EAAE,MAAM,CAAA;IAClB,UAAU,CAAC,EAAE,MAAM,CAAA;IACnB,aAAa,CAAC,EAAE,MAAM,CAAA;IACtB,OAAO,CAAC,EAAE,OAAO,CAAA;CAClB,CAAA;AAID,wBAAgB,wBAAwB,CAAC,KAAK,EAAE,UAAU,WAEzD;AAID,qBAAa,YAAY;IASd,KAAK,EAAE,UAAU;IAR1B,EAAE,SAAQ;IACV,WAAW,UAAQ;IACnB,cAAc,qBAA2B;IACzC,aAAa,EAAE,YAAY,GAAG,IAAI,CAAO;IACzC,KAAK,EAAE,iBAAiB,CAAa;IACrC,MAAM,EAAE,OAAO,GAAG,MAAM,GAAG,IAAI,CAAO;gBAG7B,KAAK,GAAE,UAAe,EAC7B,eAAe,CAAC,EAAE,YAAY,GAAG,MAAM,GAAG,IAAI,GAAG,SAAS;IA8B5D,oBAAoB,CAClB,KAAK,GAAE,UAAU,GAAG;QAAE,UAAU,CAAC,EAAE,WAAW,CAAA;KAAqB,EACnE,YAAY,UAAO;IAerB,WAAW,CAAC,SAAS,EAAE,iBAAiB,EAAE,YAAY,UAAO;IAmB7D,iBAAiB,CACf,KAAK,aAAa,EAClB,KAAK,GAAE,iBAAiB,GAAG,IAAiB,EAC5C,aAAa,sBAAqB;IAapC,oBAAoB,CAClB,SAAS,EAAE,iBAAiB,GAAG,IAAI,EACnC,KAAK,GAAE,iBAAiB,GAAG,IAAiB;IAQ9C,QAAQ,CAAC,KAAK,aAAa,EAAE,aAAa,sBAAqB;IAO/D,QAAQ,EAAE,GAAG,CAAC,MAAM,CAAC,GAAG,IAAI,CAAO;IACnC,IAAI,OAAO,gBAMV;IAED,MAAM,CAAC,MAAM,UAAQ;IAIrB,aAAa,CAAC,EAAE,EAAE,aAAa,EAAE,OAAO,CAAC,EAAE,MAAM;CAalD;AAuKD,wBAAgB,4BAA4B,CAAC,YAAY,CAAC,EAAE,YAAY,GAAG,IAAI,4CAe9E"}

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

@@ -1 +1 @@
-{"version":3,"file":"insertStyleRule.d.ts","sourceRoot":"","sources":["../../src/helpers/insertStyleRule.tsx"],"names":[],"mappings":"AAIA,OAAO,KAAK,EAEV,aAAa,EACb,aAAa,EAGb,YAAY,EACb,MAAM,UAAU,CAAA;AAKjB,eAAO,MAAM,kBAAkB,IAAK,CAAA;AAEpC,eAAO,MAAM,eAAe,8BAAqB,CAAA;AACjD,eAAO,MAAM,WAAW,gBAAgC,CAAA;AACxD,eAAO,MAAM,gBAAgB,UAA2B,CAAA;AAiCxD,wBAAgB,qBAAqB,SAkBpC;AAID,wBAAgB,aAAa,CAC3B,aAAa,UAAQ,EACrB,MAAM,CAAC,EAAE,YAAY,GACpB,aAAa,GAAG,SAAS,CA8B3B;AAiOD,wBAAgB,WAAW,CAAC,UAAU,EAAE,MAAM,EAAE,KAAK,EAAE,MAAM,EAAE,uBAS9D;AAED,wBAAgB,gBAAgB,CAAC,aAAa,EAAE,aAAa,QAgC5D;AAED,wBAAgB,sBAAsB,CAAC,UAAU,EAAE,MAAM,WAOxD"}
+{"version":3,"file":"insertStyleRule.d.ts","sourceRoot":"","sources":["../../src/helpers/insertStyleRule.tsx"],"names":[],"mappings":"AAGA,OAAO,KAAK,EAEV,aAAa,EACb,aAAa,EAEb,YAAY,EACb,MAAM,UAAU,CAAA;AAIjB,eAAO,MAAM,kBAAkB,IAAK,CAAA;AAEpC,eAAO,MAAM,eAAe,8BAAqB,CAAA;AACjD,eAAO,MAAM,WAAW,gBAAgC,CAAA;AACxD,eAAO,MAAM,gBAAgB,UAA2B,CAAA;AAiCxD,wBAAgB,qBAAqB,SAkBpC;AAID,wBAAgB,aAAa,CAC3B,aAAa,UAAQ,EACrB,MAAM,CAAC,EAAE,YAAY,GACpB,aAAa,GAAG,SAAS,CA8B3B;AAiOD,wBAAgB,WAAW,CAAC,UAAU,EAAE,MAAM,EAAE,KAAK,EAAE,MAAM,EAAE,uBAS9D;AAED,wBAAgB,gBAAgB,CAAC,aAAa,EAAE,aAAa,QAgC5D;AAED,wBAAgB,sBAAsB,CAAC,UAAU,EAAE,MAAM,WAOxD"}

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

@@ -1 +1 @@
-{"version":3,"file":"proxyThemeToParents.d.ts","sourceRoot":"","sources":["../../src/helpers/proxyThemeToParents.ts"],"names":[],"mappings":"AAEA,OAAO,EAAE,aAAa,EAAE,WAAW,EAAE,MAAM,UAAU,CAAA;AAErD,eAAO,MAAM,SAAS,EAAE,MAAM,CAAC,MAAM,EAAE,WAAW,CAAM,CAAA;AAIxD,wBAAgB,oBAAoB,CAClC,aAAa,EAAE,aAAa,GAC3B,MAAM,CAAC,MAAM,EAAE,WAAW,CAAC,CAsB7B;AAED,wBAAgB,mBAAmB,CAAC,SAAS,EAAE,MAAM,EAAE,KAAK,EAAE,WAAW,eA+BxE"}
+{"version":3,"file":"proxyThemeToParents.d.ts","sourceRoot":"","sources":["../../src/helpers/proxyThemeToParents.ts"],"names":[],"mappings":"AAEA,OAAO,EAAE,aAAa,EAAE,WAAW,EAAE,MAAM,UAAU,CAAA;AAErD,eAAO,MAAM,SAAS,EAAE,MAAM,CAAC,MAAM,EAAE,WAAW,CAAM,CAAA;AAIxD,wBAAgB,oBAAoB,CAClC,aAAa,EAAE,aAAa,GAC3B,MAAM,CAAC,MAAM,EAAE,WAAW,CAAC,CAsB7B;AAED,wBAAgB,mBAAmB,CAAC,SAAS,EAAE,MAAM,EAAE,KAAK,EAAE,WAAW,eAuCxE"}

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

@@ -1 +1 @@
-{"version":3,"file":"themeable.d.ts","sourceRoot":"","sources":["../../src/helpers/themeable.tsx"],"names":[],"mappings":"AAEA,OAAO,EAAE,SAAS,EAAE,YAAY,EAAE,SAAS,EAAE,MAAM,UAAU,CAAA;AAG7D,MAAM,WAAW,cAAc;IAC7B,KAAK,CAAC,EAAE,SAAS,GAAG,IAAI,CAAA;IACxB,YAAY,CAAC,EAAE,OAAO,CAAA;IACtB,UAAU,CAAC,EAAE,OAAO,CAAA;IACpB,aAAa,CAAC,EAAE,MAAM,CAAA;IACtB,KAAK,CAAC,EAAE,SAAS,CAAA;CAClB;AAED,wBAAgB,SAAS,CAAC,SAAS,SAAS,CAAC,KAAK,EAAE,GAAG,KAAK,GAAG,EAC7D,SAAS,EAAE,SAAS,EACpB,YAAY,CAAC,EAAE,OAAO,CAAC,YAAY,CAAC,8HA+BrC"}
+{"version":3,"file":"themeable.d.ts","sourceRoot":"","sources":["../../src/helpers/themeable.tsx"],"names":[],"mappings":"AAEA,OAAO,EAAE,SAAS,EAAE,YAAY,EAAE,SAAS,EAAE,MAAM,UAAU,CAAA;AAG7D,MAAM,WAAW,cAAc;IAC7B,KAAK,CAAC,EAAE,SAAS,GAAG,IAAI,CAAA;IACxB,YAAY,CAAC,EAAE,OAAO,CAAA;IACtB,UAAU,CAAC,EAAE,OAAO,CAAA;IACpB,aAAa,CAAC,EAAE,MAAM,CAAA;IACtB,KAAK,CAAC,EAAE,SAAS,CAAA;CAClB;AAED,wBAAgB,SAAS,CAAC,SAAS,SAAS,CAAC,KAAK,EAAE,GAAG,KAAK,GAAG,EAC7D,SAAS,EAAE,SAAS,EACpB,YAAY,CAAC,EAAE,OAAO,CAAC,YAAY,CAAC,8HAmCrC"}

package/types/hooks/useTheme.d.ts

@@ -1,15 +1,19 @@
+import { Variable } from '../createVariable';
 import { ThemeManager, ThemeManagerState } from '../helpers/ThemeManager';
-import type { DebugProp, ThemeParsed, ThemeProps } from '../types';
+import type { DebugProp, ThemeParsed, ThemeProps, Tokens, VariableVal, VariableValGeneric } from '../types';
 export type ChangedThemeResponse = {
     state: ThemeManagerState;
     themeManager: ThemeManager;
     isNewTheme: boolean;
     mounted?: boolean;
 };
+type ThemeGettable<Val> = Val & {
+    get: () => string | (Val extends Variable<infer X> ? X extends VariableValGeneric ? any : X : Val extends VariableVal ? string | number : unknown);
+};
 type UseThemeResult = {
-    [key in keyof ThemeParsed]: ThemeParsed[key] & {
-        get: () => string | ThemeParsed[key]['val'];
-    };
+    [Key in keyof ThemeParsed]: ThemeGettable<ThemeParsed[Key]>;
+} & {
+    [Key in keyof Tokens['color']]: ThemeGettable<string>;
 };
 export declare const useTheme: (props?: ThemeProps) => UseThemeResult;
 export declare const useThemeWithState: (props: ThemeProps) => [ChangedThemeResponse, ThemeParsed];

package/types/hooks/useTheme.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"useTheme.d.ts","sourceRoot":"","sources":["../../src/hooks/useTheme.tsx"],"names":[],"mappings":"AAOA,OAAO,EACL,YAAY,EACZ,iBAAiB,EAElB,MAAM,yBAAyB,CAAA;AAEhC,OAAO,KAAK,EAAE,SAAS,EAAE,WAAW,EAAE,UAAU,EAAE,MAAM,UAAU,CAAA;AAGlE,MAAM,MAAM,oBAAoB,GAAG;IACjC,KAAK,EAAE,iBAAiB,CAAA;IACxB,YAAY,EAAE,YAAY,CAAA;IAC1B,UAAU,EAAE,OAAO,CAAA;IACnB,OAAO,CAAC,EAAE,OAAO,CAAA;CAClB,CAAA;AAWD,KAAK,cAAc,GAAG;KACnB,GAAG,IAAI,MAAM,WAAW,GAAG,WAAW,CAAC,GAAG,CAAC,GAAG;QAC7C,GAAG,EAAE,MAAM,MAAM,GAAG,WAAW,CAAC,GAAG,CAAC,CAAC,KAAK,CAAC,CAAA;KAC5C;CACF,CAAA;AAED,eAAO,MAAM,QAAQ,WAAW,UAAU,mBAIzC,CAAA;AAED,eAAO,MAAM,iBAAiB,UACrB,UAAU,KAChB,CAAC,oBAAoB,EAAE,WAAW,CAwDpC,CAAA;AAED,wBAAgB,eAAe,CAC7B,EACE,KAAK,EACL,YAAY,GACb,EAAE;IACD,KAAK,EAAE,WAAW,CAAA;IAClB,YAAY,CAAC,EAAE,YAAY,CAAA;CAC5B,EACD,IAAI,CAAC,EAAE,MAAM,EAAE,EACf,KAAK,CAAC,EAAE,SAAS,GAChB,cAAc,CA+ChB;AAED,eAAO,MAAM,mBAAmB,mBAA0B,CAAA;AAE1D,eAAO,MAAM,oBAAoB,UACxB,UAAU,yBAEV,MAAM,EAAE,iBACA,MAAM,OAAO,GAAG,SAAS,KACvC,oBAsOF,CAAA"}
+{"version":3,"file":"useTheme.d.ts","sourceRoot":"","sources":["../../src/hooks/useTheme.tsx"],"names":[],"mappings":"AAKA,OAAO,EAAE,QAAQ,EAAe,MAAM,mBAAmB,CAAA;AAEzD,OAAO,EACL,YAAY,EACZ,iBAAiB,EAElB,MAAM,yBAAyB,CAAA;AAEhC,OAAO,KAAK,EACV,SAAS,EACT,WAAW,EACX,UAAU,EACV,MAAM,EACN,WAAW,EACX,kBAAkB,EACnB,MAAM,UAAU,CAAA;AAGjB,MAAM,MAAM,oBAAoB,GAAG;IACjC,KAAK,EAAE,iBAAiB,CAAA;IACxB,YAAY,EAAE,YAAY,CAAA;IAC1B,UAAU,EAAE,OAAO,CAAA;IACnB,OAAO,CAAC,EAAE,OAAO,CAAA;CAClB,CAAA;AAWD,KAAK,aAAa,CAAC,GAAG,IAAI,GAAG,GAAG;IAC9B,GAAG,EAAE,MACD,MAAM,GACN,CAAC,GAAG,SAAS,QAAQ,CAAC,MAAM,CAAC,CAAC,GAC1B,CAAC,SAAS,kBAAkB,GAC1B,GAAG,GACH,CAAC,GACH,GAAG,SAAS,WAAW,GACvB,MAAM,GAAG,MAAM,GACf,OAAO,CAAC,CAAA;CACjB,CAAA;AAED,KAAK,cAAc,GAAG;KACnB,GAAG,IAAI,MAAM,WAAW,GAAG,aAAa,CAAC,WAAW,CAAC,GAAG,CAAC,CAAC;CAC5D,GAAG;KACD,GAAG,IAAI,MAAM,MAAM,CAAC,OAAO,CAAC,GAAG,aAAa,CAAC,MAAM,CAAC;CACtD,CAAA;AAED,eAAO,MAAM,QAAQ,WAAW,UAAU,mBAIzC,CAAA;AAED,eAAO,MAAM,iBAAiB,UACrB,UAAU,KAChB,CAAC,oBAAoB,EAAE,WAAW,CAwDpC,CAAA;AAED,wBAAgB,eAAe,CAC7B,EACE,KAAK,EACL,YAAY,GACb,EAAE;IACD,KAAK,EAAE,WAAW,CAAA;IAClB,YAAY,CAAC,EAAE,YAAY,CAAA;CAC5B,EACD,IAAI,CAAC,EAAE,MAAM,EAAE,EACf,KAAK,CAAC,EAAE,SAAS,GAChB,cAAc,CAqDhB;AAED,eAAO,MAAM,mBAAmB,mBAA0B,CAAA;AAE1D,eAAO,MAAM,oBAAoB,UACxB,UAAU,yBAEV,MAAM,EAAE,iBACA,MAAM,OAAO,GAAG,SAAS,KACvC,oBAuOF,CAAA"}

package/types/types.d.ts

@@ -75,7 +75,7 @@ export type TamaguiComponentPropsBase = {
 };
 export type ReactComponentWithRef<Props, Ref> = ForwardRefExoticComponent<Props & RefAttributes<Ref>>;
 export type ConfigListener = (conf: TamaguiInternalConfig) => void;
-export type VariableVal = number | string | Variable;
+export type VariableVal = number | string | Variable | VariableValGeneric;
 export type VariableColorVal = string | Variable;
 type GenericKey = string;
 export type CreateTokens<Val extends VariableVal = VariableVal> = Record<string, {
@@ -127,6 +127,9 @@ export type TamaguiBaseTheme = {
     shadowColorPress: VariableColorVal;
     shadowColorFocus: VariableColorVal;
 };
+export type VariableValGeneric = {
+    __generic: 1;
+};
 type GenericTokens = CreateTokens;
 type GenericThemes = {
     [key: string]: (Partial<TamaguiBaseTheme> & {
@@ -160,7 +163,7 @@ export type CreateTamaguiConfig<A extends GenericTokens, B extends GenericThemes
     tokens: A;
     themes: {
         [Name in keyof B]: {
-            [Key in keyof B[Name]]: Variable;
+            [Key in keyof B[Name]]: Variable<B[Name][Key]>;
         };
     };
     shorthands: C;
@@ -195,7 +198,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]: Variable<any>;
+    [key in ThemeKeys]: ThemeDefinition[key];
 };
 export type Tokens = TamaguiConfig['tokens'];
 export type TokensParsed = {