@tamagui/web 1.33.5 → 1.34.1

package/src/createTamagui.ts

@@ -1,6 +1,7 @@
 import { isRSC, isWeb } from '@tamagui/constants'
 
 import { configListeners, setConfig } from './config'
+import { Variable, getVariableValue } from './createVariable'
 import { createVariables } from './createVariables'
 import { getThemeCSSRules } from './helpers/getThemeCSSRules'
 import {
@@ -8,11 +9,7 @@ import {
   listenForSheetChanges,
   scanAllSheets,
 } from './helpers/insertStyleRule'
-import {
-  registerCSSVariable,
-  tokensValueToVariable,
-  variableToCSS,
-} from './helpers/registerCSSVariable'
+import { registerCSSVariable, variableToCSS } from './helpers/registerCSSVariable'
 import { ensureThemeVariable, proxyThemeToParents } from './helpers/themes'
 import { configureMedia } from './hooks/useMedia'
 import { parseFont, registerFontVariables } from './insertFont'
@@ -71,6 +68,8 @@ export function createTamagui<Conf extends CreateTamaguiProps>(
     return res!
   })()
 
+  const specificTokens = {}
+
   const themeConfig = (() => {
     const themes = { ...configIn.themes }
     const cssRuleSets: string[] = []
@@ -84,9 +83,25 @@ export function createTamagui<Conf extends CreateTamaguiProps>(
 
       for (const key in configIn.tokens) {
         for (const skey in configIn.tokens[key]) {
-          const val = configIn.tokens[key][skey]
-          registerCSSVariable(val)
-          declarations.push(variableToCSS(val, key === 'zIndex'))
+          const variable = configIn.tokens[key][skey] as Variable
+
+          // set specific tokens (like $size.sm)
+          specificTokens[`$${key}.${skey}`] = variable
+
+          if (process.env.NODE_ENV === 'development') {
+            if (typeof variable === 'undefined') {
+              throw new Error(
+                `No value for tokens.${key}.${skey}:\n${JSON.stringify(
+                  variable,
+                  null,
+                  2
+                )}`
+              )
+            }
+          }
+
+          registerCSSVariable(variable)
+          declarations.push(variableToCSS(variable, key === 'zIndex'))
         }
       }
 
@@ -268,6 +283,7 @@ ${runtimeStyles}`
     getCSS,
     defaultFont,
     fontSizeTokens: fontSizeTokens || new Set(),
+    specificTokens,
     // const tokens = [...getToken(tokens.size[0])]
     // .spacer-sm + ._dsp_contents._dsp-sm-hidden { margin-left: -var(--${}) }
   }

package/src/createTokens.ts

@@ -7,33 +7,34 @@ export function createTokens<T extends CreateTokens>(tokens: T): MakeTokens<T> {
   return createVariables(tokens) as any
 }
 
+type NormalizeTokens<A, Type = A[keyof A]> = {
+  // removes $ prefix allowing for defining either as $1: or 1:,
+  // which is important because Chrome re-orders numerical-seeming keys :/
+  [Key in keyof A extends `$${infer X}` ? X : keyof A]: Variable<Type>
+}
+
 // verbose but gives us nice types...
-type MakeTokens<T> = T extends {
-  color: infer E
-  space: infer F
-  size: infer G
-  radius: infer H
-  zIndex: infer J
+// removes $ prefix allowing for defining either as $1: or 1:,
+// which is important because Chrome re-orders numerical-seeming keys :/
+type MakeTokens<T extends CreateTokens> = T extends {
+  color?: infer E
+  space?: infer F
+  size?: infer G
+  radius?: infer H
+  zIndex?: infer J
 }
   ? {
-      color: {
-        // removes $ prefix allowing for defining either as $1: or 1:,
-        // which is important because Chrome re-orders numerical-seeming keys :/
-        [Key in keyof E extends `$${infer X}` ? X : keyof E]: Variable<string>
-      }
-      space: {
-        [Key in keyof F extends `$${infer X}` ? X : keyof F]: Variable<number>
-      }
-      size: {
-        [Key in keyof G extends `$${infer X}` ? X : keyof G]: Variable<number>
-      }
-      radius: {
-        [Key in keyof H extends `$${infer X}` ? X : keyof H]: Variable<number>
-      }
-      zIndex: {
-        [Key in keyof J extends `$${infer X}` ? X : keyof J]: Variable<number>
-      }
-    }
+      color: NormalizeTokens<E, string>
+      space: NormalizeTokens<F, number>
+      size: NormalizeTokens<G, number>
+      radius: NormalizeTokens<H, number>
+      zIndex: NormalizeTokens<J, number>
+    } & Omit<
+      {
+        [key in keyof T]: NormalizeTokens<T[key]>
+      },
+      'color' | 'space' | 'size' | 'radius' | 'zIndex'
+    >
   : never
 
 // // test
@@ -44,4 +45,8 @@ type MakeTokens<T> = T extends {
 //   radius: { 0: 1 },
 //   zIndex: { 0: 1 },
 //   color: { 0: 'hi' },
+//   arbitrary: { abc: '123' },
 // })
+
+// tokens.arbitrary.abc
+// tokens.size['0']

package/src/createVariable.ts

@@ -85,7 +85,7 @@ export function getVariableVariable(v: Variable | any) {
 export const createCSSVariable = (nameProp: string, includeVar = true) => {
   if (process.env.NODE_ENV === 'development') {
     if (!nameProp || typeof nameProp !== 'string') {
-      throw new Error(`createCSSVariable expected string: ${nameProp}`)
+      throw new Error(`createCSSVariable expected string, got: ${nameProp}`)
     }
   }
   const name = simpleHash(nameProp, 60)

package/src/helpers/createPropMapper.ts

@@ -5,9 +5,7 @@ import { isDevTools } from '../constants/isDevTools'
 import { Variable, getVariableValue, isVariable } from '../createVariable'
 import type {
   DebugProp,
-  GenericVariantDefinitions,
   PropMapper,
-  SplitStyleState,
   StaticConfigParsed,
   StyleResolver,
   TamaguiInternalConfig,
@@ -19,6 +17,7 @@ import { expandStyles } from './expandStyles'
 import { getFontsForLanguage, getVariantExtras } from './getVariantExtras'
 import { isObj } from './isObj'
 import { mergeProps } from './mergeProps'
+import { pseudoDescriptors } from './pseudoDescriptors'
 
 export type ResolveVariableTypes =
   | 'auto'
@@ -161,15 +160,15 @@ const resolveVariants: StyleResolver = (
   if (!variantValue) {
     // variant at key exists, but no matching variant
     // disabling warnings, its fine to pass through, could re-enable later somehoiw
-    // if (process.env.NODE_ENV === 'development') {
-    //   // don't warn on missing booleans
-    //   if (typeof value !== 'boolean') {
-    //     const name = staticConfig.componentName || '[UnnamedComponent]'
-    //     console.warn(
-    //       `No variant found: ${name} has variant "${key}", but no matching value "${value}"`
-    //     )
-    //   }
-    // }
+    if (process.env.TAMAGUI_WARN_ON_MISSING_VARIANT === '1') {
+      // don't warn on missing booleans
+      if (typeof value !== 'boolean') {
+        const name = staticConfig.componentName || '[UnnamedComponent]'
+        console.warn(
+          `No variant found: ${name} has variant "${key}", but no matching value "${value}"`
+        )
+      }
+    }
     return
   }
 
@@ -321,18 +320,16 @@ const resolveTokensAndVariants: StyleResolver<Object> = (
           debug
         )
 
-        if (!variantOut) {
-          continue
-        }
-
-        const { pressStyle, hoverStyle, focusStyle, enterStyle, exitStyle, ...rest } =
-          Object.fromEntries(variantOut)
-        const subs = { pressStyle, hoverStyle, focusStyle, enterStyle, exitStyle }
-        Object.assign(res, rest)
-        for (const key in subs) {
-          if (subs[key]) {
-            res[key] ??= {}
-            Object.assign(res[key], subs[key])
+        // apply, merging sub-styles
+        if (variantOut) {
+          for (const [key, val] of variantOut) {
+            if (val == null) continue
+            if (key in pseudoDescriptors) {
+              res[key] ??= {}
+              Object.assign(res[key], val)
+            } else {
+              res[key] = val
+            }
           }
         }
       }
@@ -459,44 +456,49 @@ const getToken = (
     valOrVar = theme[value]
     hasSet = true
   } else {
-    switch (key) {
-      case 'fontFamily': {
-        const fontsParsed = languageContext
-          ? getFontsForLanguage(conf.fontsParsed, languageContext)
-          : conf.fontsParsed
-        valOrVar = fontsParsed[value]?.family || value
-        hasSet = true
-        break
-      }
-      case 'fontSize':
-      case 'lineHeight':
-      case 'letterSpacing':
-      case 'fontWeight': {
-        if (fontFamily) {
+    if (value in conf.specificTokens) {
+      hasSet = true
+      valOrVar = conf.specificTokens[value]
+    } else {
+      switch (key) {
+        case 'fontFamily': {
           const fontsParsed = languageContext
             ? getFontsForLanguage(conf.fontsParsed, languageContext)
             : conf.fontsParsed
-          valOrVar =
-            fontsParsed[fontFamily]?.[fontShorthand[key] || key]?.[value] || value
+          valOrVar = fontsParsed[value]?.family || value
           hasSet = true
+          break
+        }
+        case 'fontSize':
+        case 'lineHeight':
+        case 'letterSpacing':
+        case 'fontWeight': {
+          if (fontFamily) {
+            const fontsParsed = languageContext
+              ? getFontsForLanguage(conf.fontsParsed, languageContext)
+              : conf.fontsParsed
+            valOrVar =
+              fontsParsed[fontFamily]?.[fontShorthand[key] || key]?.[value] || value
+            hasSet = true
+          }
+          break
         }
-        break
       }
-    }
-    for (const cat in tokenCategories) {
-      if (key in tokenCategories[cat]) {
-        const res = tokensParsed[cat][value]
-        if (res) {
-          valOrVar = res
-          hasSet = true
+      for (const cat in tokenCategories) {
+        if (key in tokenCategories[cat]) {
+          const res = tokensParsed[cat][value]
+          if (res) {
+            valOrVar = res
+            hasSet = true
+          }
         }
       }
-    }
-    if (!hasSet) {
-      const spaceVar = tokensParsed.space[value]
-      if (spaceVar) {
-        valOrVar = spaceVar
-        hasSet = true
+      if (!hasSet) {
+        const spaceVar = tokensParsed.space[value]
+        if (spaceVar) {
+          valOrVar = spaceVar
+          hasSet = true
+        }
       }
     }
   }

package/src/helpers/registerCSSVariable.ts

@@ -1,7 +1,8 @@
-import { Variable, createCSSVariable } from '../createVariable'
+import { Variable, createCSSVariable, getVariableValue } from '../createVariable'
+import { VariableVal } from '../types'
 
-export const registerCSSVariable = (v: Variable) => {
-  tokensValueToVariable.set(v.val, v)
+export const registerCSSVariable = (v: Variable | VariableVal) => {
+  tokensValueToVariable.set(getVariableValue(v), v)
 }
 
 export const variableToCSS = (v: Variable, unitless = false) => {

package/src/types.tsx

@@ -185,7 +185,10 @@ export type VariableColorVal = string | Variable
 
 type GenericKey = string
 
-export interface CreateTokens<Val extends VariableVal = VariableVal> {
+export type CreateTokens<Val extends VariableVal = VariableVal> = Record<
+  string,
+  { [key: GenericKey]: Val }
+> & {
   color: { [key: GenericKey]: Val }
   space: { [key: GenericKey]: Val }
   size: { [key: GenericKey]: Val }
@@ -193,7 +196,12 @@ export interface CreateTokens<Val extends VariableVal = VariableVal> {
   zIndex: { [key: GenericKey]: Val }
 }
 
-type Tokenify<A extends GenericTokens> = {
+type Tokenify<A extends GenericTokens> = Omit<
+  {
+    [Key in keyof A]: TokenifyRecord<A[Key]>
+  },
+  'color' | 'space' | 'size' | 'radius' | 'zIndex'
+> & {
   color: TokenifyRecord<A['color']>
   space: TokenifyRecord<A['space']>
   size: TokenifyRecord<A['size']>
@@ -393,11 +401,7 @@ export type ThemeParsed = {
 export type Tokens = TamaguiConfig['tokens']
 
 export type TokensParsed = {
-  size: TokenPrefixed<Tokens['size']>
-  color: TokenPrefixed<Tokens['color']>
-  radius: TokenPrefixed<Tokens['radius']>
-  zIndex: TokenPrefixed<Tokens['zIndex']>
-  space: TokenPrefixed<Tokens['space']>
+  [Key in keyof Tokens]: TokenPrefixed<Tokens[Key]>
 }
 
 type TokenPrefixed<A extends { [key: string]: any }> = {
@@ -410,13 +414,7 @@ type Ensure$Prefix<A extends string | number | symbol> = A extends string
     : `$${A}`
   : never
 
-export type TokensMerged = {
-  size: TokensParsed['size'] & Tokens['size']
-  color: TokensParsed['color'] & Tokens['color']
-  radius: TokensParsed['radius'] & Tokens['radius']
-  zIndex: TokensParsed['zIndex'] & Tokens['zIndex']
-  space: TokensParsed['space'] & Tokens['space']
-}
+export type TokensMerged = TokensParsed & Tokens
 
 export type Shorthands = TamaguiConfig['shorthands']
 export type Media = TamaguiConfig['media']
@@ -577,6 +575,7 @@ export type TamaguiInternalConfig<
     reactNative?: any
     defaultFont?: H
     fontSizeTokens: Set<string>
+    specificTokens: Record<string, Variable>
   }
 
 export type GetAnimationKeys<A extends GenericTamaguiConfig> = keyof A['animations']
@@ -681,16 +680,37 @@ type GetTokenFontKeysFor<
 
 type GetTokenString<A> = A extends string | number ? `$${A}` : `$${string}`
 
+// export type SpecificTokens<K extends keyof Tokens = keyof Tokens> =
+//   `${K}.${keyof Tokens[K] extends string ? keyof Tokens[K] : never}`
+
+export type SpecificTokens<
+  Record = Tokens,
+  RK extends keyof Record = keyof Record
+> = RK extends string
+  ? `$${RK}.${keyof Record[RK] extends string | number ? keyof Record[RK] : never}`
+  : never
+
 // base tokens
-export type SizeTokens = GetTokenString<keyof Tokens['size']> | number
-export type SpaceTokens = GetTokenString<keyof Tokens['space']> | number | boolean
+export type SizeTokens = SpecificTokens | GetTokenString<keyof Tokens['size']> | number
+export type SpaceTokens =
+  | SpecificTokens
+  | GetTokenString<keyof Tokens['space']>
+  | number
+  | boolean
 
 export type ColorTokens =
+  | SpecificTokens
   | GetTokenString<keyof Tokens['color']>
   | GetTokenString<keyof ThemeParsed>
   | CSSColorNames
-export type ZIndexTokens = GetTokenString<keyof Tokens['zIndex']> | number
-export type RadiusTokens = GetTokenString<keyof Tokens['radius']> | number
+export type ZIndexTokens =
+  | SpecificTokens
+  | GetTokenString<keyof Tokens['zIndex']>
+  | number
+export type RadiusTokens =
+  | SpecificTokens
+  | GetTokenString<keyof Tokens['radius']>
+  | number
 
 // fonts
 type DefaultFont = TamaguiConfig['defaultFont']
@@ -750,7 +770,10 @@ export type ThemeValueByCategory<K extends string | number | symbol> = K extends
   ? FontWeightTokens
   : K extends 'letterSpacing'
   ? FontLetterSpacingTokens
-  : {}
+  : K extends keyof Tokens
+  ? // fallback to user-defined tokens
+    GetTokenString<Tokens[K]>
+  : never
 
 type FontKeys = 'fontFamily'
 type FontSizeKeys = 'fontSize'

package/types/createTamagui.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"createTamagui.d.ts","sourceRoot":"","sources":["../src/createTamagui.ts"],"names":[],"mappings":"AAmBA,OAAO,EACL,kBAAkB,EAElB,kBAAkB,EAGnB,MAAM,SAAS,CAAA;AAKhB,wBAAgB,aAAa,CAAC,IAAI,SAAS,kBAAkB,EAC3D,QAAQ,EAAE,IAAI,GACb,kBAAkB,CAAC,IAAI,CAAC,CAuQ1B"}
+{"version":3,"file":"createTamagui.d.ts","sourceRoot":"","sources":["../src/createTamagui.ts"],"names":[],"mappings":"AAgBA,OAAO,EACL,kBAAkB,EAElB,kBAAkB,EAGnB,MAAM,SAAS,CAAA;AAKhB,wBAAgB,aAAa,CAAC,IAAI,SAAS,kBAAkB,EAC3D,QAAQ,EAAE,IAAI,GACb,kBAAkB,CAAC,IAAI,CAAC,CA0R1B"}

package/types/createTokens.d.ts

@@ -1,28 +1,23 @@
 import { Variable } from './createVariable';
 import { CreateTokens } from './types';
 export declare function createTokens<T extends CreateTokens>(tokens: T): MakeTokens<T>;
-type MakeTokens<T> = T extends {
-    color: infer E;
-    space: infer F;
-    size: infer G;
-    radius: infer H;
-    zIndex: infer J;
+type NormalizeTokens<A, Type = A[keyof A]> = {
+    [Key in keyof A extends `$${infer X}` ? X : keyof A]: Variable<Type>;
+};
+type MakeTokens<T extends CreateTokens> = T extends {
+    color?: infer E;
+    space?: infer F;
+    size?: infer G;
+    radius?: infer H;
+    zIndex?: infer J;
 } ? {
-    color: {
-        [Key in keyof E extends `$${infer X}` ? X : keyof E]: Variable<string>;
-    };
-    space: {
-        [Key in keyof F extends `$${infer X}` ? X : keyof F]: Variable<number>;
-    };
-    size: {
-        [Key in keyof G extends `$${infer X}` ? X : keyof G]: Variable<number>;
-    };
-    radius: {
-        [Key in keyof H extends `$${infer X}` ? X : keyof H]: Variable<number>;
-    };
-    zIndex: {
-        [Key in keyof J extends `$${infer X}` ? X : keyof J]: Variable<number>;
-    };
-} : never;
+    color: NormalizeTokens<E, string>;
+    space: NormalizeTokens<F, number>;
+    size: NormalizeTokens<G, number>;
+    radius: NormalizeTokens<H, number>;
+    zIndex: NormalizeTokens<J, number>;
+} & Omit<{
+    [key in keyof T]: NormalizeTokens<T[key]>;
+}, 'color' | 'space' | 'size' | 'radius' | 'zIndex'> : never;
 export {};
 //# sourceMappingURL=createTokens.d.ts.map

package/types/createTokens.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"createTokens.d.ts","sourceRoot":"","sources":["../src/createTokens.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,QAAQ,EAAE,MAAM,kBAAkB,CAAA;AAE3C,OAAO,EAAE,YAAY,EAAE,MAAM,SAAS,CAAA;AAGtC,wBAAgB,YAAY,CAAC,CAAC,SAAS,YAAY,EAAE,MAAM,EAAE,CAAC,GAAG,UAAU,CAAC,CAAC,CAAC,CAE7E;AAGD,KAAK,UAAU,CAAC,CAAC,IAAI,CAAC,SAAS;IAC7B,KAAK,EAAE,MAAM,CAAC,CAAA;IACd,KAAK,EAAE,MAAM,CAAC,CAAA;IACd,IAAI,EAAE,MAAM,CAAC,CAAA;IACb,MAAM,EAAE,MAAM,CAAC,CAAA;IACf,MAAM,EAAE,MAAM,CAAC,CAAA;CAChB,GACG;IACE,KAAK,EAAE;SAGJ,GAAG,IAAI,MAAM,CAAC,SAAS,IAAI,MAAM,CAAC,EAAE,GAAG,CAAC,GAAG,MAAM,CAAC,GAAG,QAAQ,CAAC,MAAM,CAAC;KACvE,CAAA;IACD,KAAK,EAAE;SACJ,GAAG,IAAI,MAAM,CAAC,SAAS,IAAI,MAAM,CAAC,EAAE,GAAG,CAAC,GAAG,MAAM,CAAC,GAAG,QAAQ,CAAC,MAAM,CAAC;KACvE,CAAA;IACD,IAAI,EAAE;SACH,GAAG,IAAI,MAAM,CAAC,SAAS,IAAI,MAAM,CAAC,EAAE,GAAG,CAAC,GAAG,MAAM,CAAC,GAAG,QAAQ,CAAC,MAAM,CAAC;KACvE,CAAA;IACD,MAAM,EAAE;SACL,GAAG,IAAI,MAAM,CAAC,SAAS,IAAI,MAAM,CAAC,EAAE,GAAG,CAAC,GAAG,MAAM,CAAC,GAAG,QAAQ,CAAC,MAAM,CAAC;KACvE,CAAA;IACD,MAAM,EAAE;SACL,GAAG,IAAI,MAAM,CAAC,SAAS,IAAI,MAAM,CAAC,EAAE,GAAG,CAAC,GAAG,MAAM,CAAC,GAAG,QAAQ,CAAC,MAAM,CAAC;KACvE,CAAA;CACF,GACD,KAAK,CAAA"}
+{"version":3,"file":"createTokens.d.ts","sourceRoot":"","sources":["../src/createTokens.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,QAAQ,EAAE,MAAM,kBAAkB,CAAA;AAE3C,OAAO,EAAE,YAAY,EAAE,MAAM,SAAS,CAAA;AAGtC,wBAAgB,YAAY,CAAC,CAAC,SAAS,YAAY,EAAE,MAAM,EAAE,CAAC,GAAG,UAAU,CAAC,CAAC,CAAC,CAE7E;AAED,KAAK,eAAe,CAAC,CAAC,EAAE,IAAI,GAAG,CAAC,CAAC,MAAM,CAAC,CAAC,IAAI;KAG1C,GAAG,IAAI,MAAM,CAAC,SAAS,IAAI,MAAM,CAAC,EAAE,GAAG,CAAC,GAAG,MAAM,CAAC,GAAG,QAAQ,CAAC,IAAI,CAAC;CACrE,CAAA;AAKD,KAAK,UAAU,CAAC,CAAC,SAAS,YAAY,IAAI,CAAC,SAAS;IAClD,KAAK,CAAC,EAAE,MAAM,CAAC,CAAA;IACf,KAAK,CAAC,EAAE,MAAM,CAAC,CAAA;IACf,IAAI,CAAC,EAAE,MAAM,CAAC,CAAA;IACd,MAAM,CAAC,EAAE,MAAM,CAAC,CAAA;IAChB,MAAM,CAAC,EAAE,MAAM,CAAC,CAAA;CACjB,GACG;IACE,KAAK,EAAE,eAAe,CAAC,CAAC,EAAE,MAAM,CAAC,CAAA;IACjC,KAAK,EAAE,eAAe,CAAC,CAAC,EAAE,MAAM,CAAC,CAAA;IACjC,IAAI,EAAE,eAAe,CAAC,CAAC,EAAE,MAAM,CAAC,CAAA;IAChC,MAAM,EAAE,eAAe,CAAC,CAAC,EAAE,MAAM,CAAC,CAAA;IAClC,MAAM,EAAE,eAAe,CAAC,CAAC,EAAE,MAAM,CAAC,CAAA;CACnC,GAAG,IAAI,CACN;KACG,GAAG,IAAI,MAAM,CAAC,GAAG,eAAe,CAAC,CAAC,CAAC,GAAG,CAAC,CAAC;CAC1C,EACD,OAAO,GAAG,OAAO,GAAG,MAAM,GAAG,QAAQ,GAAG,QAAQ,CACjD,GACD,KAAK,CAAA"}

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

@@ -1 +1 @@
-{"version":3,"file":"createPropMapper.d.ts","sourceRoot":"","sources":["../../src/helpers/createPropMapper.ts"],"names":[],"mappings":"AAKA,OAAO,KAAK,EAGV,UAAU,EAEV,kBAAkB,EAElB,qBAAqB,EAEtB,MAAM,UAAU,CAAA;AAQjB,MAAM,MAAM,oBAAoB,GAC5B,MAAM,GACN,OAAO,GACP,UAAU,GACV,MAAM,GACN,iBAAiB,CAAA;AAErB,eAAO,MAAM,gBAAgB,iBAAkB,kBAAkB,eAsGhE,CAAA;AA+GD,wBAAgB,+BAA+B,CAAC,KAAK,EAAE,GAAG,EAAE,IAAI,EAAE,qBAAqB,sBA2BtF;AAMD,eAAO,MAAM,uBAAuB,cAAe,GAAG,QAErD,CAAA"}
+{"version":3,"file":"createPropMapper.d.ts","sourceRoot":"","sources":["../../src/helpers/createPropMapper.ts"],"names":[],"mappings":"AAKA,OAAO,KAAK,EAEV,UAAU,EACV,kBAAkB,EAElB,qBAAqB,EAEtB,MAAM,UAAU,CAAA;AASjB,MAAM,MAAM,oBAAoB,GAC5B,MAAM,GACN,OAAO,GACP,UAAU,GACV,MAAM,GACN,iBAAiB,CAAA;AAErB,eAAO,MAAM,gBAAgB,iBAAkB,kBAAkB,eAsGhE,CAAA;AA+GD,wBAAgB,+BAA+B,CAAC,KAAK,EAAE,GAAG,EAAE,IAAI,EAAE,qBAAqB,sBA2BtF;AAMD,eAAO,MAAM,uBAAuB,cAAe,GAAG,QAErD,CAAA"}

package/types/helpers/registerCSSVariable.d.ts

@@ -1,5 +1,6 @@
 import { Variable } from '../createVariable';
-export declare const registerCSSVariable: (v: Variable) => void;
+import { VariableVal } from '../types';
+export declare const registerCSSVariable: (v: Variable | VariableVal) => void;
 export declare const variableToCSS: (v: Variable, unitless?: boolean) => string;
 export declare const tokensValueToVariable: Map<any, any>;
 //# sourceMappingURL=registerCSSVariable.d.ts.map

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

@@ -1 +1 @@
-{"version":3,"file":"registerCSSVariable.d.ts","sourceRoot":"","sources":["../../src/helpers/registerCSSVariable.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,QAAQ,EAAqB,MAAM,mBAAmB,CAAA;AAE/D,eAAO,MAAM,mBAAmB,MAAO,QAAQ,SAE9C,CAAA;AAED,eAAO,MAAM,aAAa,MAAO,QAAQ,+BAIxC,CAAA;AAED,eAAO,MAAM,qBAAqB,eAAsB,CAAA"}
+{"version":3,"file":"registerCSSVariable.d.ts","sourceRoot":"","sources":["../../src/helpers/registerCSSVariable.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,QAAQ,EAAuC,MAAM,mBAAmB,CAAA;AACjF,OAAO,EAAE,WAAW,EAAE,MAAM,UAAU,CAAA;AAEtC,eAAO,MAAM,mBAAmB,MAAO,QAAQ,GAAG,WAAW,SAE5D,CAAA;AAED,eAAO,MAAM,aAAa,MAAO,QAAQ,+BAIxC,CAAA;AAED,eAAO,MAAM,qBAAqB,eAAsB,CAAA"}

package/types/types.d.ts

@@ -72,7 +72,9 @@ export type ConfigListener = (conf: TamaguiInternalConfig) => void;
 export type VariableVal = number | string | Variable;
 export type VariableColorVal = string | Variable;
 type GenericKey = string;
-export interface CreateTokens<Val extends VariableVal = VariableVal> {
+export type CreateTokens<Val extends VariableVal = VariableVal> = Record<string, {
+    [key: GenericKey]: Val;
+}> & {
     color: {
         [key: GenericKey]: Val;
     };
@@ -88,8 +90,10 @@ export interface CreateTokens<Val extends VariableVal = VariableVal> {
     zIndex: {
         [key: GenericKey]: Val;
     };
-}
-type Tokenify<A extends GenericTokens> = {
+};
+type Tokenify<A extends GenericTokens> = Omit<{
+    [Key in keyof A]: TokenifyRecord<A[Key]>;
+}, 'color' | 'space' | 'size' | 'radius' | 'zIndex'> & {
     color: TokenifyRecord<A['color']>;
     space: TokenifyRecord<A['space']>;
     size: TokenifyRecord<A['size']>;
@@ -187,11 +191,7 @@ export type ThemeParsed = {
 };
 export type Tokens = TamaguiConfig['tokens'];
 export type TokensParsed = {
-    size: TokenPrefixed<Tokens['size']>;
-    color: TokenPrefixed<Tokens['color']>;
-    radius: TokenPrefixed<Tokens['radius']>;
-    zIndex: TokenPrefixed<Tokens['zIndex']>;
-    space: TokenPrefixed<Tokens['space']>;
+    [Key in keyof Tokens]: TokenPrefixed<Tokens[Key]>;
 };
 type TokenPrefixed<A extends {
     [key: string]: any;
@@ -199,13 +199,7 @@ type TokenPrefixed<A extends {
     [key in Ensure$Prefix<keyof A>]: A[keyof A];
 };
 type Ensure$Prefix<A extends string | number | symbol> = A extends string ? A extends `$${string}` ? A : `$${A}` : never;
-export type TokensMerged = {
-    size: TokensParsed['size'] & Tokens['size'];
-    color: TokensParsed['color'] & Tokens['color'];
-    radius: TokensParsed['radius'] & Tokens['radius'];
-    zIndex: TokensParsed['zIndex'] & Tokens['zIndex'];
-    space: TokensParsed['space'] & Tokens['space'];
-};
+export type TokensMerged = TokensParsed & Tokens;
 export type Shorthands = TamaguiConfig['shorthands'];
 export type Media = TamaguiConfig['media'];
 export type Themes = TamaguiConfig['themes'];
@@ -307,6 +301,7 @@ export type TamaguiInternalConfig<A extends GenericTokens = GenericTokens, B ext
     reactNative?: any;
     defaultFont?: H;
     fontSizeTokens: Set<string>;
+    specificTokens: Record<string, Variable>;
 };
 export type GetAnimationKeys<A extends GenericTamaguiConfig> = keyof A['animations'];
 export type UnionableString = string & {};
@@ -393,11 +388,12 @@ export type AnimationProp = AnimationKeys | {
 ];
 type GetTokenFontKeysFor<A extends 'size' | 'weight' | 'letterSpacing' | 'family' | 'lineHeight' | 'transform' | 'style' | 'color'> = keyof TamaguiConfig['fonts']['body'][A];
 type GetTokenString<A> = A extends string | number ? `$${A}` : `$${string}`;
-export type SizeTokens = GetTokenString<keyof Tokens['size']> | number;
-export type SpaceTokens = GetTokenString<keyof Tokens['space']> | number | boolean;
-export type ColorTokens = GetTokenString<keyof Tokens['color']> | GetTokenString<keyof ThemeParsed> | CSSColorNames;
-export type ZIndexTokens = GetTokenString<keyof Tokens['zIndex']> | number;
-export type RadiusTokens = GetTokenString<keyof Tokens['radius']> | number;
+export type SpecificTokens<Record = Tokens, RK extends keyof Record = keyof Record> = RK extends string ? `$${RK}.${keyof Record[RK] extends string | number ? keyof Record[RK] : never}` : never;
+export type SizeTokens = SpecificTokens | GetTokenString<keyof Tokens['size']> | number;
+export type SpaceTokens = SpecificTokens | GetTokenString<keyof Tokens['space']> | number | boolean;
+export type ColorTokens = SpecificTokens | GetTokenString<keyof Tokens['color']> | GetTokenString<keyof ThemeParsed> | CSSColorNames;
+export type ZIndexTokens = SpecificTokens | GetTokenString<keyof Tokens['zIndex']> | number;
+export type RadiusTokens = SpecificTokens | GetTokenString<keyof Tokens['radius']> | number;
 type DefaultFont = TamaguiConfig['defaultFont'];
 export type Fonts = DefaultFont extends string ? TamaguiConfig['fonts'][DefaultFont] : never;
 export type Font = ParseFont<Fonts>;
@@ -423,7 +419,7 @@ type ParseFont<A extends GenericFont> = {
     face: TokenPrefixedIfExists<A['face']>;
 };
 type TokenPrefixedIfExists<A> = A extends Object ? TokenPrefixed<A> : {};
-export type ThemeValueByCategory<K extends string | number | symbol> = K extends 'theme' ? ThemeTokens : K extends 'size' ? SizeTokens : K extends 'font' ? FontTokens : K extends 'fontSize' ? FontSizeTokens : K extends 'space' ? SpaceTokens : K extends 'color' ? ColorTokens : K extends 'zIndex' ? ZIndexTokens : K extends 'lineHeight' ? FontLineHeightTokens : K extends 'fontWeight' ? FontWeightTokens : K extends 'letterSpacing' ? FontLetterSpacingTokens : {};
+export type ThemeValueByCategory<K extends string | number | symbol> = K extends 'theme' ? ThemeTokens : K extends 'size' ? SizeTokens : K extends 'font' ? FontTokens : K extends 'fontSize' ? FontSizeTokens : K extends 'space' ? SpaceTokens : K extends 'color' ? ColorTokens : K extends 'zIndex' ? ZIndexTokens : K extends 'lineHeight' ? FontLineHeightTokens : K extends 'fontWeight' ? FontWeightTokens : K extends 'letterSpacing' ? FontLetterSpacingTokens : K extends keyof Tokens ? GetTokenString<Tokens[K]> : never;
 type FontKeys = 'fontFamily';
 type FontSizeKeys = 'fontSize';
 type FontWeightKeys = 'fontWeight';