@tamagui/web 1.105.1 → 1.105.2

package/src/helpers/getSplitStyles.tsx

@@ -72,6 +72,8 @@ import { pseudoDescriptors, pseudoPriorities } from './pseudoDescriptors'
 import { skipProps } from './skipProps'
 import { transformsToString } from './transformsToString'
 
+const consoleGroupCollapsed = isWeb ? console.groupCollapsed : console.info
+
 export type SplitStyles = ReturnType<typeof getSplitStyles>
 
 export type SplitStyleResult = ReturnType<typeof getSplitStyles>
@@ -218,7 +220,7 @@ export const getSplitStyles: StyleSplitter = (
     debug !== 'profile' &&
     isClient
   ) {
-    console.groupCollapsed('getSplitStyles (collapsed)')
+    consoleGroupCollapsed('getSplitStyles (collapsed)')
     log({
       props,
       staticConfig,
@@ -536,7 +538,7 @@ export const getSplitStyles: StyleSplitter = (
     if (process.env.NODE_ENV === 'development' && debug === 'verbose') {
       console.groupEnd() // react native was not nesting right
       console.groupEnd() // react native was not nesting right
-      console.groupCollapsed(
+      consoleGroupCollapsed(
         `  🔑 ${keyOg}${keyInit !== keyOg ? ` (shorthand for ${keyInit})` : ''} ${
           shouldPassThrough ? '(pass)' : ''
         }`
@@ -620,7 +622,7 @@ export const getSplitStyles: StyleSplitter = (
     }
 
     if (process.env.NODE_ENV === 'development' && debug === 'verbose') {
-      console.groupCollapsed('  💠 expanded', keyInit, valInit)
+      consoleGroupCollapsed('  💠 expanded', keyInit, valInit)
       try {
         if (!isServer && isDevTools) {
           log({
@@ -631,7 +633,6 @@ export const getSplitStyles: StyleSplitter = (
             variant: variants?.[keyInit],
             shouldPassProp,
             isHOCShouldPassThrough,
-            theme,
             usedKeys: { ...usedKeys },
             curProps: { ...styleState.curProps },
           })
@@ -682,7 +683,7 @@ export const getSplitStyles: StyleSplitter = (
       if (shouldPassThrough) {
         passDownProp(viewProps, key, val, isMediaOrPseudo)
         if (process.env.NODE_ENV === 'development' && debug === 'verbose') {
-          console.groupCollapsed(` - passing down prop ${key}`)
+          consoleGroupCollapsed(` - passing down prop ${key}`)
           log({ val, after: { ...viewProps[key] } })
           console.groupEnd()
         }
@@ -725,7 +726,7 @@ export const getSplitStyles: StyleSplitter = (
 
           if (process.env.NODE_ENV === 'development' && debug === 'verbose') {
             // prettier-ignore
-            console.groupCollapsed('pseudo (classes)', key)
+            consoleGroupCollapsed('pseudo (classes)', key)
 
             log({ pseudoStyleObject, pseudoStyles })
             console.groupEnd()
@@ -764,7 +765,7 @@ export const getSplitStyles: StyleSplitter = (
           }
 
           if (process.env.NODE_ENV === 'development' && debug === 'verbose') {
-            console.groupCollapsed('pseudo', key, { isDisabled })
+            consoleGroupCollapsed('pseudo', key, { isDisabled })
             log({ pseudoStyleObject, isDisabled, descriptor, componentState })
             console.groupEnd()
           }
@@ -953,7 +954,7 @@ export const getSplitStyles: StyleSplitter = (
             const groupContext = context?.groups.state[groupName]
             if (!groupContext) {
               if (process.env.NODE_ENV === 'development' && debug) {
-                console.warn(`No parent with group prop, skipping styles: ${groupName}`)
+                log(`No parent with group prop, skipping styles: ${groupName}`)
               }
               continue
             }
@@ -971,6 +972,9 @@ export const getSplitStyles: StyleSplitter = (
               if (!mediaState && groupContext.layout) {
                 isActive = mediaKeyMatch(groupMediaKey, groupContext.layout)
               }
+              if (process.env.NODE_ENV === 'development' && debug === 'verbose') {
+                log(` 🏘️ GROUP media ${groupMediaKey} active? ${isActive}`)
+              }
               if (!isActive) continue
               importanceBump = 2
             }
@@ -984,8 +988,13 @@ export const getSplitStyles: StyleSplitter = (
                 context.groups.state[groupName]
               ).pseudo
               const isActive = componentGroupPseudoState?.[groupPseudoKey]
-              if (!isActive) continue
               const priority = pseudoPriorities[groupPseudoKey]
+              if (process.env.NODE_ENV === 'development' && debug === 'verbose') {
+                log(
+                  ` 🏘️ GROUP pseudo ${groupMediaKey} active? ${isActive}, priority ${priority}`
+                )
+              }
+              if (!isActive) continue
               importanceBump = priority
             }
           }
@@ -1003,7 +1012,8 @@ export const getSplitStyles: StyleSplitter = (
               mediaStyle[subKey],
               usedKeys,
               mediaState[mediaKeyShort],
-              importanceBump
+              importanceBump,
+              debug
             )
             if (key === 'fontFamily') {
               styleState.fontFamily = mediaStyle.fontFamily as string
@@ -1158,7 +1168,7 @@ export const getSplitStyles: StyleSplitter = (
 
         if (process.env.NODE_ENV === 'development' && props.debug === 'verbose') {
           console.groupEnd() // ensure group ended from loop above
-          console.groupCollapsed(`🔹 getSplitStyles final style object`)
+          consoleGroupCollapsed(`🔹 getSplitStyles final style object`)
           console.info(styleState.style)
           console.groupEnd()
         }
@@ -1172,7 +1182,7 @@ export const getSplitStyles: StyleSplitter = (
         for (const namespace in transforms) {
           if (!transforms[namespace]) {
             if (process.env.NODE_ENV === 'development') {
-              console.warn('Error no transform', transforms, namespace)
+              log('Error no transform', transforms, namespace)
             }
             continue
           }
@@ -1365,7 +1375,7 @@ export const getSplitStyles: StyleSplitter = (
 
   if (process.env.NODE_ENV === 'development' && debug === 'verbose') {
     if (isDevTools) {
-      console.groupCollapsed('🔹 getSplitStyles ===>')
+      consoleGroupCollapsed('🔹 getSplitStyles ===>')
       try {
         // prettier-ignore
         const logs = {
@@ -1596,7 +1606,8 @@ function mergeMediaByImportance(
   value: any,
   importancesUsed: Record<string, number>,
   isSizeMedia: boolean,
-  importanceBump?: number
+  importanceBump?: number,
+  debugProp?: DebugProp
 ) {
   let importance = getMediaImportanceIfMoreImportant(
     mediaKey,
@@ -1607,11 +1618,30 @@ function mergeMediaByImportance(
   if (importanceBump) {
     importance = (importance || 0) + importanceBump
   }
+  if (process.env.NODE_ENV === 'development' && debugProp === 'verbose') {
+    log(
+      `mergeMediaByImportance ${key} importance existing ${importancesUsed[key]} next ${importance}`
+    )
+  }
   if (importance === null) {
     return false
   }
   importancesUsed[key] = importance
-  mergeStyle(styleState, key, value)
+
+  if (key in pseudoDescriptors) {
+    const descriptor = pseudoDescriptors[key]
+    const descriptorKey = descriptor.stateKey || descriptor.name
+    const isDisabled = styleState.componentState[descriptorKey] === false
+    if (isDisabled) {
+      return false
+    }
+    for (const subKey in value) {
+      mergeStyle(styleState, subKey, value[subKey])
+    }
+  } else {
+    mergeStyle(styleState, key, value)
+  }
+
   return true
 }
 

package/src/helpers/getThemeCSSRules.ts

@@ -5,6 +5,7 @@ import type { Variable } from '../createVariable'
 import { variableToString } from '../createVariable'
 import type { CreateTamaguiProps, ThemeParsed } from '../types'
 import { tokensValueToVariable } from './registerCSSVariable'
+import { getSetting } from '../config'
 
 export function getThemeCSSRules(props: {
   config: CreateTamaguiProps
@@ -59,7 +60,7 @@ export function getThemeCSSRules(props: {
     // since we dont specify dark/light in classnames we have to do an awkward specificity war
     // use config.maxDarkLightNesting to determine how deep you can nest until it breaks
     if (hasDarkLight) {
-      const maxDepth = config.maxDarkLightNesting ?? 3
+      const maxDepth = getSetting('maxDarkLightNesting') ?? 3
 
       for (const subName of names) {
         const isDark = isDarkBase || subName.startsWith('dark_')
@@ -115,7 +116,7 @@ export function getThemeCSSRules(props: {
     // this isBaseTheme logic could probably be done more efficiently above
     const selectorsString = selectors
       .map((x) => {
-        const rootSep = isBaseTheme(x) && config.themeClassNameOnRoot ? '' : ' '
+        const rootSep = isBaseTheme(x) && getSetting('themeClassNameOnRoot') ? '' : ' '
         return `:root${rootSep}${x}`
       })
       .join(', ')
@@ -123,7 +124,7 @@ export function getThemeCSSRules(props: {
     const css = `${selectorsString} {${vars}}`
     cssRuleSets.push(css)
 
-    if (config.shouldAddPrefersColorThemes) {
+    if (getSetting('shouldAddPrefersColorThemes')) {
       const bgString = theme.background
         ? `background:${variableToString(theme.background)};`
         : ''
@@ -154,8 +155,9 @@ export function getThemeCSSRules(props: {
       cssRuleSets.push(prefersMediaSelectors)
     }
 
-    if (config.selectionStyles) {
-      const rules = config.selectionStyles(theme as any)
+    const selectionStyles = getSetting('selectionStyles')
+    if (selectionStyles) {
+      const rules = selectionStyles(theme as any)
       if (rules) {
         const selectionSelectors = baseSelectors.map((s) => `${s} ::selection`).join(', ')
         const styles = Object.entries(rules)

package/src/helpers/log.ts

@@ -1,9 +1,16 @@
+import { _dmt } from '../hooks/useMedia'
+
 export function log(...args: any[]) {
   if (process.env.NODE_ENV === 'production') return
-  if (process.env.TAMAGUI_TARGET === 'web') {
-    return console.info(...args)
+  _dmt(true)
+  try {
+    if (process.env.TAMAGUI_TARGET === 'web') {
+      return console.info(...args)
+    }
+    // react native doesn't log in the cli unless it's log
+    // biome-ignore lint/suspicious/noConsoleLog: <explanation>
+    return console.log(...args)
+  } finally {
+    _dmt(false)
   }
-  // react native doesn't log in the cli unless it's log
-  // biome-ignore lint/suspicious/noConsoleLog: <explanation>
-  return console.log(...args)
 }

package/src/helpers/propMapper.ts

@@ -28,8 +28,10 @@ export const propMapper: PropMapper = (key, value, styleStateIn, subPropsIn) =>
     if (key === 'elevationAndroid') return
   }
 
+  const { conf, styleProps, fontFamily, staticConfig } = styleStateIn
+
   if (value === 'unset') {
-    const unsetVal = styleStateIn.conf.unset?.[key]
+    const unsetVal = conf.unset?.[key]
     if (unsetVal != null) {
       value = unsetVal
     } else {
@@ -41,7 +43,7 @@ export const propMapper: PropMapper = (key, value, styleStateIn, subPropsIn) =>
   // we use this for the sub-props like pseudos so we need to overwrite the "props" in styleState
   // fallbackProps is awkward thanks to static
   // also we need to override the props here because subStyles pass in a sub-style props object
-  const subProps = styleStateIn.styleProps.fallbackProps || subPropsIn
+  const subProps = styleProps.fallbackProps || subPropsIn
   const styleState = subProps
     ? new Proxy(styleStateIn, {
         get(_, k) {
@@ -50,7 +52,6 @@ export const propMapper: PropMapper = (key, value, styleStateIn, subPropsIn) =>
       })
     : styleStateIn
 
-  const { conf, styleProps, fontFamily, staticConfig } = styleState
   const { variants } = staticConfig
 
   if (

package/src/hooks/useDisableSSR.tsx

@@ -1,6 +1,6 @@
-import { getConfig } from '../config'
+import { getSetting } from '../config'
 import type { ComponentContextI } from '../types'
 
 export function getDisableSSR(componentContext?: ComponentContextI) {
-  return componentContext?.disableSSR ?? getConfig().disableSSR
+  return componentContext?.disableSSR ?? getSetting('disableSSR')
 }

package/src/hooks/useMedia.tsx

@@ -1,13 +1,14 @@
 import { isServer, isWeb, useIsomorphicLayoutEffect } from '@tamagui/constants'
 import { useRef, useState, useSyncExternalStore } from 'react'
 
-import { getConfig } from '../config'
+import { getConfig, getSetting } from '../config'
 import { matchMedia } from '../helpers/matchMedia'
 import { pseudoDescriptors } from '../helpers/pseudoDescriptors'
 import type {
   ComponentContextI,
   DebugProp,
   IsMediaType,
+  LayoutEvent,
   MediaQueries,
   MediaQueryObject,
   MediaQueryState,
@@ -83,7 +84,8 @@ const dispose = new Set<Function>()
 let mediaVersion = 0
 
 export const configureMedia = (config: TamaguiInternalConfig) => {
-  const { media, mediaQueryDefaultActive } = config
+  const { media } = config
+  const mediaQueryDefaultActive = getSetting('mediaQueryDefaultActive')
   if (!media) return
   mediaVersion++
   for (const key in media) {
@@ -265,6 +267,7 @@ export function useMedia(
 
   return new Proxy(state, {
     get(_, key) {
+      if (disableMediaTouch) return
       if (typeof key === 'string') {
         componentState.keys ||= {}
         componentState.keys[key] = true
@@ -277,15 +280,38 @@ export function useMedia(
   })
 }
 
+let disableMediaTouch = false
+
+export function _dmt(val: boolean) {
+  disableMediaTouch = val
+}
+
+export function getMediaState(
+  mediaGroups: Set<string>,
+  layout: LayoutEvent['nativeEvent']['layout']
+) {
+  disableMediaTouch = true
+  let res: Record<string, boolean>
+  try {
+    res = Object.fromEntries(
+      [...mediaGroups].map((mediaKey) => {
+        return [mediaKey, mediaKeyMatch(mediaKey, layout as any)]
+      })
+    )
+  } finally {
+    disableMediaTouch = false
+  }
+  return res
+}
+
 export const getMediaImportanceIfMoreImportant = (
   mediaKey: string,
   key: string,
   importancesUsed: Record<string, number>,
   isSizeMedia: boolean
 ) => {
-  const conf = getConfig()
   const importance =
-    isSizeMedia && !conf.settings.mediaPropOrder
+    isSizeMedia && !getSetting('mediaPropOrder')
       ? getMediaKeyImportance(mediaKey)
       : defaultMediaImportance
   return !importancesUsed[key] || importance > importancesUsed[key] ? importance : null

package/src/hooks/useTheme.tsx

@@ -1,7 +1,7 @@
 import { isClient, isIos, isServer, isWeb } from '@tamagui/constants'
 import { useContext, useEffect, useMemo, useRef, useState } from 'react'
 
-import { getConfig } from '../config'
+import { getConfig, getSetting } from '../config'
 import type { Variable } from '../createVariable'
 import { getVariable } from '../createVariable'
 import type { ThemeManagerState } from '../helpers/ThemeManager'
@@ -130,7 +130,7 @@ export const useThemeWithState = (
   if (process.env.NODE_ENV === 'development') {
     if (!state?.theme) {
       if (process.env.TAMAGUI_DISABLE_NO_THEME_WARNING !== '1') {
-        console.warn(
+        console.error(
           `[tamagui] No theme found, this could be due to an invalid theme name (given theme props ${JSON.stringify(
             props
           )}).\n\nIf this is intended and you are using Tamagui without any themes, you can disable this warning by setting the environment variable TAMAGUI_DISABLE_NO_THEME_WARNING=1`
@@ -217,7 +217,7 @@ export function getThemeProxied(
                       platform !== 'web' &&
                       isIos &&
                       !deopt &&
-                      config.settings.fastSchemeChange &&
+                      getSetting('fastSchemeChange') &&
                       !someParentIsInversed(themeManager)
                     ) {
                       if (scheme) {
@@ -300,6 +300,19 @@ const registerThemeManager = (t: ThemeManager) => {
   }
 }
 
+const ogLog = console.error
+const preventWarnSetState =
+  process.env.NODE_ENV === 'production'
+    ? ogLog
+    : // temporary fix for logs, they are harmless in that i've tried to rewrite this
+      // a few times using the "right" ways, but they are always slower. maybe skill issue
+      (a?: any, ...args: any[]) => {
+        if (typeof a === 'string' && a.includes('Cannot update a component')) {
+          return
+        }
+        return ogLog(a, ...args)
+      }
+
 export const useChangeThemeEffect = (
   props: UseThemeWithStateProps,
   isRoot = false,
@@ -379,7 +392,9 @@ export const useChangeThemeEffect = (
       // for updateTheme/replaceTheme
       const selfListenerDispose = themeManager.onChangeTheme((_a, _b, forced) => {
         if (forced) {
+          console.error = preventWarnSetState
           setThemeState((prev) => createState(prev, true))
+          console.error = ogLog
         }
       })
 
@@ -409,7 +424,9 @@ export const useChangeThemeEffect = (
           }
 
           if (shouldTryUpdate) {
+            console.error = preventWarnSetState
             setThemeState((prev) => createState(prev, force))
+            console.error = ogLog
           }
         },
         themeManager.id
@@ -525,7 +542,7 @@ export const useChangeThemeEffect = (
       registerThemeManager(themeManager)
     }
 
-    const isWebSSR = isWeb ? !getConfig().disableSSR : false
+    const isWebSSR = isWeb ? !getSetting('disableSSR') : false
     const mounted = isWebSSR ? isRoot || prev?.mounted : true
 
     if (!state) {

package/src/types.tsx

@@ -264,8 +264,7 @@ export type CreateTamaguiConfig<
   E extends GenericAnimations = GenericAnimations,
   F extends GenericFonts = GenericFonts,
   G extends OnlyAllowShorthandsSetting = OnlyAllowShorthandsSetting,
-  H extends DefaultFontSetting = DefaultFontSetting,
-  I extends GenericTamaguiSettings = GenericTamaguiSettings,
+  H extends GenericTamaguiSettings = GenericTamaguiSettings,
 > = {
   fonts: RemoveLanguagePostfixes<F>
   fontLanguages: GetLanguagePostfixes<F> extends never
@@ -282,8 +281,7 @@ export type CreateTamaguiConfig<
   media: D
   animations: AnimationDriver<E>
   onlyAllowShorthands: G
-  defaultFont: H
-  settings: I
+  settings: H
 }
 
 type GetLanguagePostfix<Set> = Set extends string
@@ -310,7 +308,7 @@ type GetLanguagePostfixes<F extends GenericFonts> = GetLanguagePostfix<keyof F>
 //   body_en: any
 // }>['fonts']
 
-type ConfProps<A, B, C, D, E, F, G, H, I> = {
+type ConfProps<A, B, C, D, E, F, G, I> = {
   tokens?: A
   themes?: B
   shorthands?: C
@@ -318,7 +316,6 @@ type ConfProps<A, B, C, D, E, F, G, H, I> = {
   animations?: E extends AnimationConfig ? AnimationDriver<E> : undefined
   fonts?: F
   onlyAllowShorthands?: G
-  defaultFont?: H
   settings?: I
 }
 
@@ -348,8 +345,7 @@ export type InferTamaguiConfig<Conf> = Conf extends ConfProps<
   infer E,
   infer F,
   infer G,
-  infer H,
-  infer I
+  infer H
 >
   ? TamaguiInternalConfig<
       A extends GenericTokens ? A : EmptyTokens,
@@ -359,8 +355,7 @@ export type InferTamaguiConfig<Conf> = Conf extends ConfProps<
       E extends GenericAnimations ? E : EmptyAnimations,
       F extends GenericFonts ? F : EmptyFonts,
       G extends OnlyAllowShorthandsSetting ? G : OnlyAllowShorthandsSetting,
-      H extends DefaultFontSetting ? H : DefaultFontSetting,
-      I extends GenericTamaguiSettings ? I : EmptyTamaguiSettings
+      H extends GenericTamaguiSettings ? H : EmptyTamaguiSettings
     >
   : unknown
 
@@ -490,7 +485,7 @@ type AllowedStyleValuesSetting =
 
 type AutocompleteSpecificTokensSetting = boolean | 'except-special'
 
-type GenericTamaguiSettings = {
+export interface GenericTamaguiSettings {
   /**
    * When true, flexBasis will be set to 0 when flex is positive. This will be
    * the default in v2 of Tamagui alongside an alternative mode for web compat.
@@ -597,6 +592,81 @@ type GenericTamaguiSettings = {
     | 'revert'
     | 'revert-layer'
     | 'unset'
+
+  /**
+   * Only allow shorthands when enabled. Recommended to be true to avoid having
+   * two ways to style the same property.
+   */
+  onlyAllowShorthands?: OnlyAllowShorthandsSetting
+
+  /**
+   * Define a default font, for better types and default font on Text
+   */
+  defaultFont?: string
+
+  /**
+   * Web-only: define CSS text-selection styles
+   */
+  selectionStyles?: (theme: Record<string, string>) => null | {
+    backgroundColor?: any
+    color?: any
+  }
+
+  /**
+   * If building a non-server rendered app, set this to true.
+   *
+   * For SSR compatibility on the web, Tamagui will render once with the settings
+   * from `mediaQueryDefaultActive` set for all media queries. Then, it will render
+   * again after the initial render using the proper media query values. This is so that
+   * hydration will match perfectly with the server.
+   *
+   * Setting disableSSR will avoid this second render by setting the media query state
+   * to the actual browser dimensions on initial load. This is only useful for client-only
+   * apps.
+   *
+   */
+  disableSSR?: boolean
+
+  /**
+   * Disable inserting a theme class in the DOM or context, allowing you to manually place it higher.
+   * For custom use cases like integration with next-theme.
+   */
+  disableRootThemeClass?: boolean
+
+  /**
+   * For the first render, determines which media queries are true, this only
+   * affects things on native or on web if you disableSSR, as otherwise Tamagui
+   * relies on CSS to avoid the need for re-rendering on first render.
+   */
+  mediaQueryDefaultActive?: Record<string, boolean>
+
+  /**
+   * What's between each CSS style rule, set to "\n" to be easier to read
+   * @default "\n" when NODE_ENV=development, "" otherwise
+   */
+  cssStyleSeparator?: string
+
+  /**
+   * (Advanced) on the web, tamagui treats `dark` and `light` themes as special
+   * and generates extra CSS to avoid having to re-render the entire page. this
+   * CSS relies on specificity hacks that multiply by your sub-themes. this sets
+   * the maxiumum number of nested dark/light themes you can do defaults to 3
+   * for a balance, but can be higher if you nest them deeply.
+   */
+  maxDarkLightNesting?: number
+
+  /**
+   * Adds @media(prefers-color-scheme) media queries for dark/light, must be set
+   * true if you are supporting system preference for light and dark mode themes
+   */
+  shouldAddPrefersColorThemes?: boolean
+
+  /**
+   * If you want to style your <body> tag to use themes, you must place the
+   * theme className onto the body element. This will do so. Otherwise, Tamagui
+   * will place the className onto the element rendered by the TamaguiProvider
+   */
+  themeClassNameOnRoot?: boolean
 }
 
 export type TamaguiSettings = TamaguiConfig['settings']
@@ -626,6 +696,7 @@ export type CreateTamaguiProps = {
   /**
    * Define a default font, for better types and default font on Text
    */
+  /** @deprecated moved into settings sub-object */
   defaultFont?: string
 
   /**
@@ -649,12 +720,14 @@ export type CreateTamaguiProps = {
    * apps.
    *
    */
+  /** @deprecated moved into settings sub-object */
   disableSSR?: boolean
 
   /**
    * Disable inserting a theme class in the DOM or context, allowing you to manually place it higher.
    * For custom use cases like integration with next-theme.
    */
+  /** @deprecated moved into settings sub-object */
   disableRootThemeClass?: boolean
 
   defaultProps?: Record<string, any> & {
@@ -665,10 +738,12 @@ export type CreateTamaguiProps = {
 
   // for the first render, determines which media queries are true
   // useful for SSR
+  /** @deprecated moved into settings sub-object */
   mediaQueryDefaultActive?: Record<string, boolean>
 
   // what's between each CSS style rule, set to "\n" to be easier to read
   // defaults: "\n" when NODE_ENV=development, "" otherwise
+  /** @deprecated moved into settings sub-object */
   cssStyleSeparator?: string
 
   // (Advanced)
@@ -677,17 +752,21 @@ export type CreateTamaguiProps = {
   // this CSS relies on specificity hacks that multiply by your sub-themes.
   // this sets the maxiumum number of nested dark/light themes you can do
   // defaults to 3 for a balance, but can be higher if you nest them deeply.
+  /** @deprecated moved into settings sub-object */
   maxDarkLightNesting?: number
 
   // adds @media(prefers-color-scheme) media queries for dark/light
+  /** @deprecated moved into settings sub-object */
   shouldAddPrefersColorThemes?: boolean
 
   // only if you put the theme classname on the html element we have to generate diff
+  /** @deprecated moved into settings sub-object */
   themeClassNameOnRoot?: boolean
 
   /**
    * Only allow shorthands when enabled
    */
+  /** @deprecated moved into settings sub-object */
   onlyAllowShorthands?: OnlyAllowShorthandsSetting
 }
 
@@ -706,10 +785,9 @@ export type TamaguiInternalConfig<
   E extends GenericAnimations = GenericAnimations,
   F extends GenericFonts = GenericFonts,
   G extends OnlyAllowShorthandsSetting = OnlyAllowShorthandsSetting,
-  H extends DefaultFontSetting = DefaultFontSetting,
   I extends GenericTamaguiSettings = GenericTamaguiSettings,
 > = Omit<CreateTamaguiProps, keyof GenericTamaguiConfig> &
-  Omit<CreateTamaguiConfig<A, B, C, D, E, F, G, H, I>, 'tokens'> & {
+  Omit<CreateTamaguiConfig<A, B, C, D, E, F, G, I>, 'tokens'> & {
     // TODO need to make it this but this breaks types, revisit
     // animations: E //AnimationDriver<E>
     // with $ prefixes for fast lookups (one time cost at startup vs every render)
@@ -722,7 +800,6 @@ export type TamaguiInternalConfig<
     parsed: boolean
     inverseShorthands: Record<string, string>
     reactNative?: any
-    defaultFont?: H
     fontSizeTokens: Set<string>
     specificTokens: Record<string, Variable>
     settings: Omit<GenericTamaguiSettings, keyof I> & I
@@ -1045,7 +1122,7 @@ export type Token =
 export type ColorStyleProp = ThemeValueFallbackColor | ColorTokens
 
 // fonts
-type DefaultFont = TamaguiConfig['defaultFont']
+type DefaultFont = TamaguiSettings['defaultFont']
 
 export type Fonts = DefaultFont extends string
   ? TamaguiConfig['fonts'][DefaultFont]