@tamagui/core 1.0.1-beta.150 → 1.0.1-beta.151

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@tamagui/core",
-  "version": "1.0.1-beta.150",
+  "version": "1.0.1-beta.151",
   "source": "src/index.ts",
   "main": "dist/cjs",
   "module": "dist/esm",
@@ -27,14 +27,14 @@
   ],
   "dependencies": {
     "@expo/match-media": "^0.3.0",
-    "@tamagui/compose-refs": "^1.0.1-beta.150",
-    "@tamagui/helpers": "^1.0.1-beta.150",
-    "@tamagui/normalize-css-color-lite": "^1.0.1-beta.150",
-    "@tamagui/rnw": "^1.0.1-beta.150",
-    "@tamagui/rnw-lite": "^1.0.1-beta.150",
-    "@tamagui/use-debounce": "^1.0.1-beta.150",
-    "@tamagui/use-event": "^1.0.1-beta.150",
-    "@tamagui/use-force-update": "^1.0.1-beta.150",
+    "@tamagui/compose-refs": "^1.0.1-beta.151",
+    "@tamagui/helpers": "^1.0.1-beta.151",
+    "@tamagui/normalize-css-color-lite": "^1.0.1-beta.151",
+    "@tamagui/rnw": "^1.0.1-beta.151",
+    "@tamagui/rnw-lite": "^1.0.1-beta.151",
+    "@tamagui/use-debounce": "^1.0.1-beta.151",
+    "@tamagui/use-event": "^1.0.1-beta.151",
+    "@tamagui/use-force-update": "^1.0.1-beta.151",
     "expo-screen-orientation": "^4.3.0",
     "hyphenate-style-name": "^1.0.4"
   },
@@ -43,7 +43,7 @@
     "react-dom": "*"
   },
   "devDependencies": {
-    "@tamagui/build": "^1.0.1-beta.150",
+    "@tamagui/build": "^1.0.1-beta.151",
     "@types/react": "^18.0.15",
     "csstype": "^3.0.10",
     "esbuild": "^0.14.49",

package/src/createComponent.tsx

@@ -707,7 +707,34 @@ export function createComponent<
       }
 
       viewProps.style = style
-    } else {
+    }
+
+    if (process.env.TAMAGUI_TARGET === 'native') {
+      // swap out the right family based on weight/style
+      if (splitStyles.fontFamily) {
+        const faceInfo = config.fontsParsed[splitStyles.fontFamily]?.face
+        if (faceInfo) {
+          const [weight, style] = (() => {
+            let weight: string | undefined
+            let style: string | undefined
+            for (let i = styles.length; i >= 0; i--) {
+              weight ??= styles[i]?.fontWeight
+              style ??= styles[i]?.fontStyle
+            }
+            return [weight || '400', style || 'normal'] as const
+          })()
+          const overrideFace = faceInfo[weight]?.[style]?.val
+          if (overrideFace) {
+            for (const style of styles) {
+              if (style?.fontFamily) {
+                style.fontFamily = overrideFace
+              }
+            }
+          }
+        }
+      }
+
+      // assign styles
       viewProps.style = styles
     }
 

package/src/createFont.ts

@@ -4,8 +4,11 @@ export const createFont = <A extends GenericFont>(font: A): A => {
   // fills in any missing values based on size keys being standard
   const sizeKeys = Object.keys(font.size)
 
+  // fill in intermediate values
   for (const key in font) {
-    if (key === 'size' || key === 'family') continue
+    if (key === 'size' || key === 'family' || key === 'face') {
+      continue
+    }
     const section = font[key] as Object
     const keys = Object.keys(section)
 

package/src/helpers/getSplitStyles.tsx

@@ -392,6 +392,9 @@ export const getSplitStyles: StyleSplitter = (
               for (const key in mediaStyle) {
                 usedKeys.add(key)
                 style[key] = mediaStyle[key]
+                if (key === 'fontFamily') {
+                  fontFamily = mediaStyle[key]
+                }
               }
             }
           }

package/src/insertFont.ts

@@ -27,7 +27,7 @@ export function parseFont<A extends GenericFont>(definition: A): DeepVariableObj
   const parsed: any = {}
   for (const attrKey in definition) {
     const attr = definition[attrKey]
-    if (attrKey === 'family') {
+    if (attrKey === 'family' || attrKey === 'face') {
       parsed[attrKey] = attr
       continue
     }

package/src/types.tsx

@@ -336,6 +336,8 @@ export type GenericFont<Key extends number | string = number | string> = {
   style?: Partial<{ [key in Key]: TextStyle['fontStyle'] | Variable }>
   transform?: Partial<{ [key in Key]: TextStyle['textTransform'] | Variable }>
   color?: Partial<{ [key in Key]: string | Variable }>
+  // for native use only, lets you map to alternative fonts
+  face?: { [key in FontWeightSteps]: { normal?: string; italic?: string } }
 }
 
 // media
@@ -429,9 +431,8 @@ export type RadiusTokens = GetTokenString<keyof Tokens['radius']> | number
 export type FontTokens = GetTokenString<keyof TamaguiConfig['fonts']>
 export type FontSizeTokens = GetTokenString<GetTokenFontKeysFor<'size'>> | number
 export type FontLineHeightTokens = `$${GetTokenFontKeysFor<'lineHeight'>}` | number
-export type FontWeightTokens =
-  | `$${GetTokenFontKeysFor<'weight'>}`
-  | `${1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 9}00`
+export type FontWeightSteps = `${1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 9}00`
+export type FontWeightTokens = `$${GetTokenFontKeysFor<'weight'>}` | FontWeightSteps
 export type FontColorTokens = `$${GetTokenFontKeysFor<'color'>}` | number
 export type FontLetterSpacingTokens = `$${GetTokenFontKeysFor<'letterSpacing'>}` | number
 export type FontStyleTokens = `$${GetTokenFontKeysFor<'style'>}` | TextStyle['fontStyle']

package/types/types.d.ts

@@ -205,6 +205,12 @@ export declare type GenericFont<Key extends number | string = number | string> =
     color?: Partial<{
         [key in Key]: string | Variable;
     }>;
+    face?: {
+        [key in FontWeightSteps]: {
+            normal?: string;
+            italic?: string;
+        };
+    };
 };
 export declare type MediaQueryObject = {
     [key: string]: string | number | string;
@@ -264,7 +270,8 @@ export declare type RadiusTokens = GetTokenString<keyof Tokens['radius']> | numb
 export declare type FontTokens = GetTokenString<keyof TamaguiConfig['fonts']>;
 export declare type FontSizeTokens = GetTokenString<GetTokenFontKeysFor<'size'>> | number;
 export declare type FontLineHeightTokens = `$${GetTokenFontKeysFor<'lineHeight'>}` | number;
-export declare type FontWeightTokens = `$${GetTokenFontKeysFor<'weight'>}` | `${1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 9}00`;
+export declare type FontWeightSteps = `${1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 9}00`;
+export declare type FontWeightTokens = `$${GetTokenFontKeysFor<'weight'>}` | FontWeightSteps;
 export declare type FontColorTokens = `$${GetTokenFontKeysFor<'color'>}` | number;
 export declare type FontLetterSpacingTokens = `$${GetTokenFontKeysFor<'letterSpacing'>}` | number;
 export declare type FontStyleTokens = `$${GetTokenFontKeysFor<'style'>}` | TextStyle['fontStyle'];