add typo to figma build (#892)

Author: lukasoppermann

scripts/buildFigma.ts

@@ -73,6 +73,18 @@ const buildFigma = (buildOptions: ConfigGeneratorOptions): void => {
     },
   }).buildAllPlatforms()
 
+  /** -----------------------------------
+   * Typography
+   * ----------------------------------- */
+  //
+  PrimerStyleDictionary.extend({
+    source: ['src/tokens/base/typography/typography.json', 'src/tokens/functional/typography/typography.json'],
+    include: [],
+    platforms: {
+      figma: figma(`figma/typography/typography.json`, buildOptions.prefix, buildOptions.buildPath),
+    },
+  }).buildAllPlatforms()
+
   /** -----------------------------------
    * Shadow tokens
    * ----------------------------------- */

src/formats/jsonFigma.ts

@@ -27,6 +27,8 @@ const getFigmaType = (type: string): string => {
   const validTypes = {
     color: 'COLOR',
     dimension: 'FLOAT',
+    fontWeight: 'FLOAT',
+    fontFamily: 'STRING',
   }
   if (type in validTypes) return validTypes[type as keyof typeof validTypes]
   throw new Error(`Invalid type: ${type}`)

src/platforms/figma.ts

@@ -3,7 +3,7 @@ import type {PlatformInitializer} from '../types/PlatformInitializer'
 import {isSource} from '../filters'
 
 const validFigmaToken = (token: StyleDictionary.TransformedToken) => {
-  const validTypes = ['color', 'dimension', 'shadow']
+  const validTypes = ['color', 'dimension', 'shadow', 'fontWeight', 'fontFamily']
   // is a siource token, not an included one
   if (!isSource(token)) return false
   // has a collection attribute

src/schemas/collections.ts

@@ -8,11 +8,13 @@ type Collections =
   | 'base/color/dark'
   | 'base/color/dark-dimmed'
   | 'base/color/dark-high-contrast'
+  | 'base/typography'
   | 'mode'
   | 'pattern/mode'
   | 'base/size'
   | 'functional/size'
   | 'pattern/size'
+  | 'typography'
 
 export const collection = (collections: Collections[]) => {
   return z.string().refine(

src/schemas/dimensionToken.ts

@@ -13,7 +13,7 @@ export const dimensionToken = baseToken
     $extensions: z
       .object({
         'org.primer.figma': z.object({
-          collection: collection(['base/size', 'functional/size', 'pattern/size']),
+          collection: collection(['base/size', 'functional/size', 'pattern/size', 'typography']),
           scopes: scopes(['all', 'size', 'gap', 'radius', 'borderColor']),
         }),
       })

src/schemas/fontFamilyToken.ts

@@ -2,10 +2,20 @@ import {z} from 'zod'
 import {referenceValue} from './referenceValue'
 import {baseToken} from './baseToken'
 import {tokenType} from './tokenType'
+import {collection} from './collections'
+import {scopes} from './scopes'
 
 export const fontFamilyToken = baseToken
   .extend({
     $value: z.union([z.string(), referenceValue]),
     $type: tokenType('fontFamily'),
+    $extensions: z
+      .object({
+        'org.primer.figma': z.object({
+          collection: collection(['base/typography', 'typography']).optional(),
+          scopes: scopes(['all']).optional(),
+        }),
+      })
+      .optional(),
   })
   .strict()

src/schemas/fontWeightToken.ts

@@ -3,10 +3,20 @@ import {fontWeightValue} from './fontWeightValue'
 import {referenceValue} from './referenceValue'
 import {baseToken} from './baseToken'
 import {tokenType} from './tokenType'
+import {collection} from './collections'
+import {scopes} from './scopes'
 
 export const fontWeightToken = baseToken
   .extend({
     $type: tokenType('fontWeight'),
     $value: z.union([fontWeightValue, referenceValue]),
+    $extensions: z
+      .object({
+        'org.primer.figma': z.object({
+          collection: collection(['base/typography', 'typography']).optional(),
+          scopes: scopes(['all']).optional(),
+        }),
+      })
+      .optional(),
   })
   .strict()