fix(core): added fill support for font face config

packages/core/src/createFont.ts

@@ -1,29 +1,44 @@
-import { GenericFont } from './types'
+import { FontWeightSteps, GenericFont } from './types'
+
+const fontWeights: FontWeightSteps[] = [
+  '100',
+  '200',
+  '300',
+  '400',
+  '500',
+  '600',
+  '700',
+  '800',
+  '900',
+]
+
+const processSection = <T>(
+  section: string | Record<string, T>,
+  keys: string[]
+): string | Record<string, T> => {
+  if (typeof section === 'string') return section
+
+  let fillValue = section[Object.keys(section)[0]]
+
+  return Object.fromEntries(
+    keys.map((key) => {
+      const value = section[key] ?? fillValue
+      fillValue = value
+      return [key, value]
+    })
+  )
+}
 
 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' || key === 'face') {
-      continue
-    }
-    const section = font[key] as Object
-    const keys = Object.keys(section)
-
-    // fill with first filled in value to start
-    let fillVal = section[keys[0]]
-
-    for (const sKey of sizeKeys) {
-      if (!(sKey in section)) {
-        section[sKey] = fillVal
-      } else {
-        // if exists, set as the fillVal
-        fillVal = section[sKey]
-      }
-    }
-  }
+  Object.fromEntries(
+    Object.entries(font).map(([key, section]) => {
+      const fillKeys = key === 'face' ? fontWeights : sizeKeys
+
+      return [key, processSection(section, fillKeys)]
+    })
+  )
 
   return Object.freeze(font)
 }

packages/core/src/types.tsx

@@ -385,7 +385,7 @@ export type GenericFont<Key extends number | string = number | string> = {
   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 } }
+  face?: Partial<{ [key in FontWeightSteps]: { normal?: string; italic?: string } }>
 }
 
 // media