@primer/primitives 7.16.0 → 7.17.0-rc.1685583f

package/src/formats/jsonFigma.ts

@@ -0,0 +1,131 @@
+import StyleDictionary from 'style-dictionary'
+import {format} from 'prettier'
+import type {FormatterArguments} from 'style-dictionary/types/Format'
+import {transformNamePathToFigma} from '../transformers/namePathToFigma'
+import type {ShadowTokenValue} from '../types/ShadowTokenValue'
+import {hexToRgbaFloat} from '../transformers/utilities/hexToRgbaFloat'
+import type {RgbaFloat} from '../transformers/utilities/isRgbaFloat'
+import {isRgbaFloat} from '../transformers/utilities/isRgbaFloat'
+const {sortByReference} = StyleDictionary.formatHelpers
+
+const isReference = (string: string): boolean => /^\{([^\\]*)\}$/g.test(string)
+
+const getReference = (
+  dictionary: StyleDictionary.Dictionary,
+  refString: string,
+  platform: StyleDictionary.Platform,
+) => {
+  if (isReference(refString)) {
+    // retrieve reference token
+    const refToken = dictionary.getReferences(refString)[0]
+    // return full reference
+    return [refToken.attributes?.collection, transformNamePathToFigma(refToken, platform)].filter(Boolean).join('/')
+  }
+}
+
+const getFigmaType = (type: string): string => {
+  const validTypes = {
+    color: 'COLOR',
+    dimension: 'FLOAT',
+  }
+  if (type in validTypes) return validTypes[type as keyof typeof validTypes]
+  throw new Error(`Invalid type: ${type}`)
+}
+
+const shadowToVariables = (
+  name: string,
+  values: Omit<ShadowTokenValue, 'color'> & {color: string | RgbaFloat},
+  token: StyleDictionary.TransformedToken,
+) => {
+  // floatValue
+  const floatValue = (property: 'offsetX' | 'offsetY' | 'blur' | 'spread') => ({
+    name: `${name}/${property}`,
+    value: parseInt(values[property].replace('px', '')),
+    type: 'FLOAT',
+    scopes: ['EFFECT_FLOAT'],
+    mode,
+    collection,
+    group,
+  })
+
+  const {attributes} = token
+  const {mode, collection, group} = attributes || {}
+
+  return [
+    floatValue('offsetX'),
+    floatValue('offsetY'),
+    floatValue('blur'),
+    floatValue('spread'),
+    {
+      name: `${name}/color`,
+      value: isRgbaFloat(values.color)
+        ? {...values.color, ...(values.alpha ? {a: values.alpha} : {})}
+        : hexToRgbaFloat(values.color, values.alpha),
+      type: 'COLOR',
+      scopes: ['EFFECT_COLOR'],
+      mode,
+      collection,
+      group,
+    },
+  ]
+}
+
+/**
+ * @description Converts `StyleDictionary.dictionary.tokens` to javascript esm (javascript export statement)
+ * @param arguments [FormatterArguments](https://github.com/amzn/style-dictionary/blob/main/types/Format.d.ts)
+ * @returns formatted `string`
+ */
+export const jsonFigma: StyleDictionary.Formatter = ({dictionary, file: _file, platform}: FormatterArguments) => {
+  // array to store tokens in
+  const tokens: Record<string, unknown>[] = []
+  // loop through tokens sorted by reference
+  for (const token of dictionary.allTokens.sort(sortByReference(dictionary))) {
+    // deconstruct token
+    const {attributes, value, $type, comment: description, original, alpha, mix} = token
+    const {mode, collection, scopes, group, codeSyntax} = attributes || {}
+    // shadows need to be specifically dealt with
+    if ($type === 'shadow') {
+      const shadowValues = !Array.isArray(value) ? [value] : value
+      // if only one set of shadow values is present
+      if (shadowValues.length === 1) {
+        tokens.push(
+          ...shadowToVariables(token.name, shadowValues[0], {
+            ...token,
+            ...(platform.mode ? {mode: platform.mode} : {}),
+          }),
+        )
+      } else {
+        // if multiple shadow sets values are present we need loop through them and add the index to the name
+        for (const [index, stepValue] of shadowValues.entries()) {
+          tokens.push(
+            ...shadowToVariables(`${token.name}/${index + 1}`, stepValue, {
+              ...token,
+              ...(platform.mode ? {mode: platform.mode} : {}),
+            }),
+          )
+        }
+      }
+      // other tokens just get added to tokens array
+    } else {
+      tokens.push({
+        name: token.name,
+        value,
+        type: getFigmaType($type),
+        alpha,
+        isMix: mix ? true : undefined,
+        description,
+        refId: [collection, token.name].filter(Boolean).join('/'),
+        reference: getReference(dictionary, original.value, platform),
+        collection,
+        mode,
+        group,
+        scopes,
+        codeSyntax,
+      })
+    }
+  }
+  // add file header and convert output
+  const output = JSON.stringify(tokens, null, 2)
+  // return prettified
+  return format(output, {parser: 'json', printWidth: 500})
+}

package/src/formats/jsonNestedPrefixed.ts

@@ -0,0 +1,23 @@
+import type StyleDictionary from 'style-dictionary'
+import {format} from 'prettier'
+import {prefixTokens} from './utilities/prefixTokens'
+import {jsonToNestedValue} from './utilities/jsonToNestedValue'
+
+/**
+ * @description Takes a style dictionary token dictionary and converts it to a nested json string.
+ * In contrast to the `json/nested` this formatter does add a prefix if provided
+ * @param StyleDictionary.FormatterArguments
+ * @returns formatted json `string`
+ */
+export const jsonNestedPrefixed: StyleDictionary.Formatter = ({dictionary, file: _file, options, platform}) => {
+  const {outputVerbose} = options
+  // add prefix if defined
+  let tokens = prefixTokens(dictionary.tokens, platform)
+  if (!outputVerbose) {
+    tokens = jsonToNestedValue(tokens)
+  }
+  // add file header and convert output
+  const output = JSON.stringify(tokens, null, 2)
+  // return prettified
+  return format(output, {parser: 'json', printWidth: 500})
+}

package/src/formats/jsonOneDimensional.ts

@@ -0,0 +1,18 @@
+import type StyleDictionary from 'style-dictionary'
+import {format} from 'prettier'
+import {jsonToFlat} from './utilities/jsonToFlat'
+/**
+ * @description Takes a style dictionary token dictionary and converts it to a one dimensional json object.
+ * @param StyleDictionary.FormatterArguments
+ * @param options.nameSeparator - separator to use for nested token name
+ * @returns formatted json `string`
+ */
+export const jsonOneDimensional: StyleDictionary.Formatter = ({dictionary, file: _file, options}) => {
+  // option to allow verbose output (object) or just the value
+  const {outputVerbose} = options
+  const tokens = jsonToFlat(dictionary.allTokens, outputVerbose)
+  // add file header and convert output
+  const output = JSON.stringify(tokens, null, 2)
+  // return prettified
+  return format(output, {parser: 'json', printWidth: 500})
+}

package/src/formats/jsonPostCssFallback.ts

@@ -0,0 +1,16 @@
+import type StyleDictionary from 'style-dictionary'
+import {format} from 'prettier'
+
+/**
+ * @description Takes a style dictionary token dictionary and converts it to a one dimensional json object.
+ * @param StyleDictionary.FormatterArguments
+ * @param options.nameSeparator - separator to use for nested token name
+ * @returns formatted json `string`
+ */
+export const jsonPostCssFallback: StyleDictionary.Formatter = ({dictionary, file: _file}) => {
+  const tokens = Object.fromEntries(dictionary.allTokens.map(token => [`--${token.name}`, token.value]))
+  // add file header and convert output
+  const output = JSON.stringify(tokens, null, 2)
+  // return prettified
+  return format(output, {parser: 'json', printWidth: 500})
+}

package/src/formats/typescriptExportDefinition.ts

@@ -0,0 +1,170 @@
+import StyleDictionary from 'style-dictionary'
+import {format} from 'prettier'
+import fs = require('fs')
+import path = require('path')
+import {treeWalker} from '../utilities/treeWalker'
+
+import type {FormatterArguments} from 'style-dictionary/types/Format'
+import type {w3cTransformedToken} from '../types/w3cTransformedToken'
+import {prefixTokens} from './utilities/prefixTokens'
+
+const {fileHeader} = StyleDictionary.formatHelpers
+
+/**
+ * unquoteTypes
+ * @description extract types from designTokenTypes (string with type definitions from file) and replace quoted types "Color" with unquoted Color
+ * @param output
+ * @param designTokenTypes
+ * @returns string with unquoted types
+ */
+const unquoteTypes = (output: string, designTokenTypes: string[]): string => {
+  // join types for replacement
+  const regex = `"(${['number', 'string', 'any', ...designTokenTypes].join('|')})"`
+  // remove strings
+  return output.replace(new RegExp(regex, 'g'), '$1')
+}
+
+/**
+ * getTokenType
+ * @description extract content from token files
+ * @param path string
+ */
+const getTokenType = (tokenTypesPath: string): string => {
+  try {
+    const designTokenType = fs.readFileSync(path.resolve(tokenTypesPath), {encoding: 'utf-8'})
+    return designTokenType
+  } catch (e) {
+    // eslint-disable-next-line no-console
+    throw new Error(`Error trying to load design token type from file "${tokenTypesPath}".`)
+  }
+}
+
+/**
+ * @description throws an error stating the token name, type and invalid value
+ * @param token w3cTransformedToken
+ */
+const invalidTokenValueError = (token: w3cTransformedToken) => {
+  throw new Error(`Invalid token: "${token.name}" with type "${token.$type}" can not have a value of "${token.value}"`)
+}
+/**
+ * convertPropToType
+ * @description return take type attribute and return correct typescript type as string
+ * @param type
+ * @returns
+ */
+const convertPropToType = (tree: w3cTransformedToken): string => {
+  if (!Object.prototype.hasOwnProperty.call(tree, 'value')) {
+    throw new Error(`Invalid token: ${tree}`)
+  }
+  switch (tree.$type) {
+    case 'color':
+      if (typeof tree.value === 'string' && tree.value[0] === '#') {
+        return 'ColorHex'
+      }
+      return invalidTokenValueError(tree)
+    case 'dimension':
+      if (typeof tree.value === 'string' && tree.value.substring(tree.value.length - 3) === 'rem') return 'SizeRem'
+      if (typeof tree.value === 'string' && tree.value.substring(tree.value.length - 2) === 'em') return 'SizeEm'
+      if (typeof tree.value === 'string' && tree.value.substring(tree.value.length - 2) === 'px') return 'SizePx'
+      return invalidTokenValueError(tree)
+    case 'shadow':
+      return 'Shadow'
+    case 'border':
+      return 'Border'
+    default:
+      if (typeof tree.value === 'number') return 'number'
+      if (typeof tree.value === 'string') return 'string'
+      if (typeof tree.value === 'boolean') return 'boolean'
+      return 'any'
+  }
+}
+/**
+ * a valid token node has a `value` property
+ * @param item object
+ * @returns boolean
+ */
+const validTokenNode = (item: w3cTransformedToken | unknown): item is w3cTransformedToken => {
+  return typeof item === 'object' && item !== null && 'value' in item
+}
+/**
+ * returns a set with every used token type
+ * @param item object
+ * @param validTypes array, all other types will be removed
+ * @returns set of all used token types
+ */
+const getUsedTokenTypes = (tokens: StyleDictionary.DesignTokens, validTypes: string[]): Set<string> => {
+  // using a set to assure every value only exists once
+  const usedTypes = new Set<string>()
+  // adds type to set
+  const callback = (tree: unknown) => usedTypes.add(convertPropToType(tree as w3cTransformedToken))
+  // tree walker adds to usedTypes
+  treeWalker(tokens, callback, validTokenNode)
+  // clean up types
+  for (const type of usedTypes) {
+    if (!validTypes.includes(type)) {
+      usedTypes.delete(type)
+    }
+  }
+  return usedTypes
+}
+/**
+ * returns the entire token object structure but instead of token values each token just has a typescript type
+ * @param item object
+ * @returns object
+ */
+const getTokenObjectWithTypes = (tokens: StyleDictionary.DesignTokens): Record<string, unknown> => {
+  // TODO: FIX typescript issues
+  // eslint-disable-next-line @typescript-eslint/ban-ts-comment
+  // @ts-ignore
+  return treeWalker(tokens, convertPropToType, validTokenNode) as Record<string, unknown>
+}
+/**
+ * getTypeDefinition
+ * @description returns type definitions as string
+ * @param tokens
+ * @param moduleName
+ * @param tokenTypesPath
+ * @returns string
+ */
+const getTypeDefinition = (
+  tokens: StyleDictionary.DesignTokens,
+  moduleName: string,
+  tokenTypesPath: string,
+): string => {
+  const usedTypes = getUsedTokenTypes(tokens, ['ColorHex', 'Shadow', 'Border', 'SizeEm', 'SizeRem', 'SizePx'])
+  const tokenObjectWithTypes = getTokenObjectWithTypes(tokens)
+  // get token type declaration from file
+  const designTokenTypes: string[] = []
+  for (const type of usedTypes) {
+    // path to type files without trailing slash
+    const typePath = tokenTypesPath.replace(new RegExp(/\/$/, 'g'), '')
+
+    designTokenTypes.push(getTokenType(`${typePath}/${type}.d.ts`))
+  }
+  // build output
+  const output = `${designTokenTypes.join('\n')} 
+    export type ${moduleName} = ${JSON.stringify(tokenObjectWithTypes, null, 2)}`
+
+  // JSON stringify will quote strings, because this is a type we need it unquoted.
+  return unquoteTypes(output, [...usedTypes])
+}
+/**
+ * @description Converts `StyleDictionary.dictionary.tokens` to typescript definition
+ * @param arguments [FormatterArguments](https://github.com/amzn/style-dictionary/blob/main/types/Format.d.ts)
+ * @returns formatted `string`
+ */
+export const typescriptExportDefinition: StyleDictionary.Formatter = ({
+  dictionary,
+  file,
+  options = {},
+  platform,
+}: FormatterArguments): string => {
+  // extract options
+  const {moduleName = `tokens`, tokenTypesPath = `./src/types/`} = options
+  // add prefix if defined
+  const tokens = prefixTokens(dictionary.tokens, platform)
+  // add file header and convert output
+  const output = `${fileHeader({file})}\n${getTypeDefinition(tokens, moduleName, tokenTypesPath)}\n`
+  // return prettified
+  return format(output, {parser: 'typescript', printWidth: 500})
+}

package/src/formats/utilities/jsonToFlat.ts

@@ -0,0 +1,10 @@
+import type StyleDictionary from 'style-dictionary'
+/**
+ * jsonToFlat
+ * @description creates a one dimensional json structure with either a single value or an token object as the value
+ * @param token StyleDictionary.DesignToken
+ * @param returnObject - boolean
+ * @returns flat json three
+ */
+export const jsonToFlat = (tokens: StyleDictionary.TransformedToken[], returnObject = false) =>
+  Object.fromEntries(tokens.map(token => [token.name, returnObject ? token : token.value]))

package/src/formats/utilities/jsonToNestedValue.ts

@@ -0,0 +1,20 @@
+import type StyleDictionary from 'style-dictionary'
+/**
+ * jsonToNestedValue
+ * @description creates a nested json tree where every final value is the `.value` prop
+ * @param token StyleDictionary.DesignToken
+ * @returns nested json three
+ */
+export const jsonToNestedValue = (token: StyleDictionary.DesignToken | Record<string, unknown>) => {
+  // is non-object value
+  if (typeof token !== 'object') return token
+  // is design token
+  if ('value' in token) return token.value
+  // is obj
+  const nextObj = {}
+  for (const [prop, value] of Object.entries(token)) {
+    // @ts-expect-error: can't predict type
+    nextObj[prop] = jsonToNestedValue(value)
+  }
+  return nextObj
+}

package/src/formats/utilities/prefixTokens.ts

@@ -0,0 +1,17 @@
+import type StyleDictionary from 'style-dictionary'
+/**
+ * @description extract prefix from platform and add to tokens array if defined
+ * @param tokens StyleDictionary.TransformedTokens
+ * @param platform StyleDictionary.Platform
+ * @return StyleDictionary.TransformedTokens
+ */
+export const prefixTokens = (
+  tokens: StyleDictionary.TransformedTokens,
+  platform: StyleDictionary.Platform = {},
+): StyleDictionary.TransformedTokens => {
+  const {prefix} = platform
+  if (typeof prefix === 'string') {
+    tokens = {[prefix]: tokens}
+  }
+  return tokens
+}

package/src/parsers/index.ts

@@ -0,0 +1 @@
+export {w3cJsonParser} from './w3cJsonParser'

package/src/parsers/w3cJsonParser.ts

@@ -0,0 +1,25 @@
+import {parse as json5Parse} from 'json5'
+import type StyleDictionary from 'style-dictionary'
+
+/**
+ * @description Parses a valid [json5](https://json5.org) file and replaces `$value` with `value` and `$description` with `comment` to make a w3c standard file compatible with style dictionary
+ * @pattern supported file extensions `.json` or `.json5`
+ */
+export const w3cJsonParser: StyleDictionary.Parser = {
+  pattern: /\.json5?$/,
+  parse: ({filePath, contents}: {filePath: string; contents: string}) => {
+    // replace $value with value so that style dictionary recognizes it
+    try {
+      contents = contents
+        .replace(/["|']?\$value["|']?:/g, '"value":')
+        // convert $description to comment
+        .replace(/["|']?\$?description["|']?:/g, '"comment":')
+        .replace(/["|']?\$?type["|']?:/g, '"$type":')
+        .replace(/["|']?\$?extensions["|']?:/g, '"$extensions":')
+      //
+      return json5Parse(contents)
+    } catch (e) {
+      throw new Error(`Invalid json5 file "${filePath}".`)
+    }
+  },
+}

package/src/platforms/css.ts

@@ -0,0 +1,93 @@
+import {isFromFile, isSource} from '../filters'
+import type StyleDictionary from 'style-dictionary'
+import type {PlatformInitializer} from '../types/PlatformInitializer'
+
+const getCssSelectors = (outputFile: string): {selector: string; selectorLight: string; selectorDark: string} => {
+  // check for dark in the beginning of the output filename
+  const lastSlash = outputFile.lastIndexOf('/')
+  const outputBasename = outputFile.substring(lastSlash + 1, outputFile.indexOf('.'))
+  const themeName = outputBasename.replace(/-/g, '_')
+  const mode = outputBasename.substring(0, 4) === 'dark' ? 'dark' : 'light'
+
+  return {
+    selector: `[data-color-mode="${mode}"][data-${mode}-theme="${themeName}"], [data-color-mode="${mode}"][data-${mode}-theme="${themeName}"] ::backdrop`,
+    selectorLight: `[data-color-mode="auto"][data-light-theme="${themeName}"], [data-color-mode="auto"][data-light-theme="${themeName}"] ::backdrop`,
+    selectorDark: `[data-color-mode="auto"][data-dark-theme="${themeName}"], [data-color-mode="auto"][data-dark-theme="${themeName}"] ::backdrop`,
+  }
+}
+
+export const css: PlatformInitializer = (outputFile, prefix, buildPath, options): StyleDictionary.Platform => {
+  const {selector, selectorLight, selectorDark} = getCssSelectors(outputFile)
+  return {
+    prefix,
+    buildPath,
+    transforms: [
+      'name/pathToKebabCase',
+      'color/hex',
+      'color/hexAlpha',
+      'color/hexMix',
+      'dimension/rem',
+      'duration/css',
+      'shadow/css',
+      'border/css',
+      'typography/css',
+      'fontFamily/css',
+      'fontWeight/number',
+    ],
+    options: {
+      basePxFontSize: 16,
+    },
+    files: [
+      {
+        destination: `${outputFile}`,
+        format: `css/themed`,
+        filter: token => isSource(token) && options?.themed === true,
+        options: {
+          showFileHeader: false,
+          outputReferences: false,
+          descriptions: false,
+          selector,
+          selectorLight,
+          selectorDark,
+          ...options?.options,
+        },
+      },
+      {
+        destination: `${outputFile}`,
+        format: `css/variables`,
+        filter: token => isSource(token) && options?.themed !== true,
+        options: {
+          showFileHeader: false,
+          descriptions: false,
+          ...options?.options,
+        },
+      },
+      {
+        destination: `${outputFile}`,
+        format: `css/customMedia`,
+        filter: token => isSource(token) && options?.themed !== true && token.$type === 'custom-viewportRange',
+        options: {
+          showFileHeader: false,
+        },
+      },
+      {
+        destination: `${outputFile}`,
+        format: `css/wrapMediaQuery`,
+        filter: token =>
+          isSource(token) &&
+          isFromFile(token, [
+            'src/tokens/functional/size/size-coarse.json',
+            'src/tokens/functional/size/size-fine.json',
+          ]),
+        options: {
+          descriptions: false,
+          showFileHeader: false,
+          mediaQuery: {
+            'css/functional/size/size-fine.css': '(pointer: fine)',
+            'css/functional/size/size-coarse.css': '(pointer: coarse)',
+          },
+        },
+      },
+    ],
+  }
+}

package/src/platforms/deprecatedJson.ts

@@ -0,0 +1,16 @@
+import type StyleDictionary from 'style-dictionary'
+import type {PlatformInitializer} from '../types/PlatformInitializer'
+import {isDeprecated} from '../filters'
+
+export const deprecatedJson: PlatformInitializer = (outputFile, prefix, buildPath): StyleDictionary.Platform => ({
+  prefix,
+  buildPath,
+  transforms: ['name/pathToDotNotation', 'json/deprecated'],
+  files: [
+    {
+      destination: outputFile,
+      format: `json/flat`,
+      filter: isDeprecated,
+    },
+  ],
+})

package/src/platforms/docJson.ts

@@ -0,0 +1,34 @@
+import type StyleDictionary from 'style-dictionary'
+import type {PlatformInitializer} from '../types/PlatformInitializer'
+import {isSource} from '../filters'
+
+export const docJson: PlatformInitializer = (outputFile, prefix, buildPath): StyleDictionary.Platform => ({
+  prefix,
+  buildPath,
+  transforms: [
+    'name/pathToKebabCase',
+    'color/hex',
+    'color/hexMix',
+    'color/hexAlpha',
+    'dimension/rem',
+    'shadow/css',
+    'border/css',
+    'typography/css',
+    'fontFamily/css',
+    'fontWeight/number',
+  ],
+  options: {
+    basePxFontSize: 16,
+  },
+  files: [
+    {
+      destination: outputFile,
+      format: `json/one-dimensional`,
+      filter: isSource,
+      options: {
+        outputReferences: false,
+        outputVerbose: true,
+      },
+    },
+  ],
+})

package/src/platforms/fallbacks.ts

@@ -0,0 +1,34 @@
+import type StyleDictionary from 'style-dictionary'
+import type {PlatformInitializer} from '../types/PlatformInitializer'
+import {isSource} from '../filters'
+
+export const fallbacks: PlatformInitializer = (outputFile, prefix, buildPath): StyleDictionary.Platform => ({
+  prefix,
+  buildPath,
+  transforms: [
+    'name/pathToKebabCase',
+    'color/hex',
+    'color/hexMix',
+    'color/hexAlpha',
+    'dimension/rem',
+    'shadow/css',
+    'border/css',
+    'typography/css',
+    'fontFamily/css',
+    'fontWeight/number',
+  ],
+  options: {
+    basePxFontSize: 16,
+  },
+  files: [
+    {
+      destination: outputFile,
+      format: `json/postCss-fallback`,
+      filter: isSource,
+      options: {
+        outputReferences: false,
+        outputVerbose: true,
+      },
+    },
+  ],
+})

package/src/platforms/figma.ts

@@ -0,0 +1,48 @@
+import type StyleDictionary from 'style-dictionary'
+import type {PlatformInitializer} from '../types/PlatformInitializer'
+import {isSource} from '../filters'
+
+const validFigmaToken = (token: StyleDictionary.TransformedToken) => {
+  const validTypes = ['color', 'dimension', 'shadow']
+  // is a siource token, not an included one
+  if (!isSource(token)) return false
+  // has a collection attribute
+  if (
+    !('$extensions' in token) ||
+    !('org.primer.figma' in token.$extensions) ||
+    !('collection' in token.$extensions['org.primer.figma'])
+  )
+    return false
+  // is a color or dimension type
+  return validTypes.includes(token.$type)
+}
+
+export const figma: PlatformInitializer = (outputFile, prefix, buildPath, options): StyleDictionary.Platform => ({
+  prefix,
+  buildPath,
+  transforms: [
+    'color/rgbaFloat',
+    'name/pathToFigma',
+    // 'name/pathToSlashNotation',
+    'figma/attributes',
+    'dimension/pixelUnitless',
+    // 'border/figma',
+    // 'typography/figma',
+    'fontWeight/number',
+  ],
+  options: {
+    basePxFontSize: 16,
+    ...options,
+  },
+  files: [
+    {
+      destination: outputFile,
+      filter: validFigmaToken,
+      format: `json/figma`,
+      options: {
+        outputReferences: true,
+        mode: options?.mode,
+      },
+    },
+  ],
+})